Hey y’all
Is there a way to split a widget’s code into multiple files? I know Figma won’t accept import
statements in widget code, but I was wondering if I there was a special Typescript or vite/webpack/etc. configuration that managed to export a single, FigJam-friendly file.
My widget’s UI is quite complex, and it’s getting unwieldy to have the mini design system, re-usable components, state logic and iframe communication all in a single file. Plus, I was hoping this would open the door to using npm packages
Thank you for your help 'n attention o/
I hope the widget example and the information in the README will help you.
Thank you for the quick reply, @tank666!
The create-widget-app
template is exactly what I was looking for! Perhaps you’d like to break its widget code (currently a single file) into multiple files to show it’s possible?
Also, getting a small TS issue when trying to use npm modules - although they work (), TS can’t resolve them, throwing:
"Cannot find module '@sanity/color'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?"
This is solvable by changing widget-src/tsconfig.json
to include "moduleResolution": "node"
, which doesn’t interfere with the build itself
Anywho, thanks a ton for the help