Browser plugin preview #2748
Browser plugin preview #2748
Conversation
|
…onnected browser dev preview)
| @@ -26,6 +26,50 @@ export type AsyncMessageChannelHandlers = { | |||
| > | |||
| }; | |||
|
|
|||
| const WEBSOCKET_SERVER_URL = 'ws://localhost:9001/ws'; | |||
There was a problem hiding this comment.
could we move this to a dedicated file? as in just import those functions here - to keep things cleaner?
packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/preview.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/preview.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/preview.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/preview.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/startup.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| ``` | ||
| +------------------------------------+ | ||
| | Figma Plugin Controller | |
There was a problem hiding this comment.
want to turn this into a mermaid diagram?
| const possiblePromise = callback(event.data.pluginMessage); | ||
| if (possiblePromise === false || (possiblePromise && await possiblePromise === false)) { | ||
| window.removeEventListener('message', listener); | ||
| private startWebSocketConnection() { |
There was a problem hiding this comment.
lots of these functions feel like we should move them to either a shared websocket file or their own files alltogether in order to improve maintainabiltiy
| const possiblePromise = callback(msg); | ||
| if (possiblePromise === false || (possiblePromise && await possiblePromise === false)) { | ||
| figma.ui.off('message', listener); | ||
| switch (this.environment) { |
There was a problem hiding this comment.
any way where we can make this function overall more readable? lots of nested ifs and switch statements 🤔
Co-authored-by: Jan Six <six.jan@gmail.com>
…t now) Co-authored-by: Jan Six <six.jan@gmail.com>
Co-authored-by: Jan Six <six.jan@gmail.com>
Co-authored-by: Jan Six <six.jan@gmail.com>
Why does this PR exist?
Closes #2709
There is now an optional web preview mode for development, which starts an Express.js server locally with a WebSockets server. The plugin UI forwards messages between the controller and the browser version.
What does this pull request do?
npm run preview:browser+npm run preview:pluginnpm run build+npm run serveworkingSTARTUPhandler is moved touseEffectin the startup component.yarn build+yarn serveyarn preview:browseryarn preview:pluginTesting this change
Start WebSockets server and
webpack-dev-serverfor web preview and HMRStart Figma plugin dev
Additional Notes (if any)
May need to reload the plugin in Figma if
STARTUPruns too early. Am thinking to implement a sort of dev SDK preview window in the browser, with the ability to simulateSTARTUPwith custom data, would need something like this to work in a Next.js preview and handle the case of having no WebSocket server or Figma plugin environment runningThe
preview:browserscript is running an Express server with a WebSockets server, sonpm run serveisn't working yet.Plugin UI is disabled when
PREVIEW_MODE/browser mode is active.Currently Fast Refresh requires stopping the plugin preview in the command line, to prevent
STARTUPfrom restarting the browser plugin UI.Unrelated change, but I added dev npm packages for
BundleAnalyzerPluginandSpeedMeasurePluginto make debugging build time/bundle size easier when needed (pass Webpack arg). These affect build times so are disabled by default.