-
-
Notifications
You must be signed in to change notification settings - Fork 188
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Browser plugin preview #2748
base: release-139
Are you sure you want to change the base?
Browser plugin preview #2748
Conversation
|
…onnected browser dev preview)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice overall! let's hold off merging this until 2.0 is out, too much risk (and its the basis for devex anyway)
@@ -26,6 +26,50 @@ export type AsyncMessageChannelHandlers = { | |||
> | |||
}; | |||
|
|||
const WEBSOCKET_SERVER_URL = 'ws://localhost:9001/ws'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:plugin
npm run build
+npm run serve
workingSTARTUP
handler is moved touseEffect
in the startup component.yarn build
+yarn serve
yarn preview:browser
yarn preview:plugin
Testing this change
Start WebSockets server and
webpack-dev-server
for web preview and HMRStart Figma plugin dev
Additional Notes (if any)
May need to reload the plugin in Figma if
STARTUP
runs too early. Am thinking to implement a sort of dev SDK preview window in the browser, with the ability to simulateSTARTUP
with 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:browser
script is running an Express server with a WebSockets server, sonpm run serve
isn'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
STARTUP
from restarting the browser plugin UI.Unrelated change, but I added dev npm packages for
BundleAnalyzerPlugin
andSpeedMeasurePlugin
to make debugging build time/bundle size easier when needed (pass Webpack arg). These affect build times so are disabled by default.