Browser preview debug UI #2803

macintoshhelper · 2024-05-29T16:09:08Z

Why does this PR exist?

#2710 #2709

What does this pull request do?

Testing this change

Additional Notes (if any)

changeset-bot · 2024-05-29T16:09:12Z

⚠️ No Changeset found

Latest commit: 92848d5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

…ug-ui

github-actions · 2024-07-05T14:10:35Z

Commit SHA:823bc03ae332be015f20b6917e8ead28b647f389

Test coverage results 🧪

Code coverage diff between base branch:feat/browser-plugin-sync and head branch: feat/browser-preview-debug-ui

Status	File	% Stmts	% Branch	% Funcs	% Lines
🔴	total	66.85 (-0.65)	57.86 (-0.59)	63.78 (-0.61)	67.21 (-0.67)
🟢	packages/tokens-studio-for-figma/src/plugin/controller.ts	98.03 (0.03)	100 (0)	75 (0)	100 (0)
✨ 🆕	packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/preview.ts	33.33	100	0	33.33

github-actions · 2024-07-05T14:10:36Z

Commit SHA:823bc03ae332be015f20b6917e8ead28b647f389
Current PR reduces the test coverage percentage by 1 for some tests

cuserox

Great job 🎉

Again, a few questions as I explored the setup.

We could pair on the next steps of creating actions? If that's a thing :)

cuserox · 2024-07-17T09:03:12Z

developer-knowledgebase/web-preview.md

+
+1. Open two Terminal windows/tabs
+
+    > Terminal 1 (Plugin)


Explaining what this does, like yarn would be useful, for users like me that couldn't get it first time!

cuserox · 2024-07-17T09:03:37Z

developer-knowledgebase/web-preview.md

+    > Terminal 2 (Browser)
+
+    ```sh
+    npm run preview:browser


Also, explaining that this needs to be loaded completely, before running the plugin, would help for understanding 😄

cuserox · 2024-07-17T09:04:28Z

developer-knowledgebase/web-preview.md

Finally, an overview of what one expects to see when this is running 🙏

No need to be super thorough but more like:

Open the browser, when all assets are loaded, then open the plugin, etc

cuserox · 2024-07-17T09:06:35Z

packages/tokens-studio-for-figma/package.json

Are these new commands fully working or WIP?

If fully working, then it's worth adding it to the docs 👏

cuserox · 2024-07-17T09:06:58Z

packages/tokens-studio-for-figma/preview-server.js

@@ -25,7 +25,8 @@ wss.on("connection", (ws) => {
  });

  // connection is up, let's add a simple simple event
-  ws.on("message", (message) => {
+  ws.on("message", (data, isBinary) => {
+    const message = isBinary ? data : data.toString();


What does isBinary mean & do?

Depending on the version of ws installed, the data might be sent as a buffer, or as a string. This step makes sure that it is only a string. Buffer may be better for performance (such as large payloads or streams).

Should probably explicitly install ws as a dependency.

Text messages and close reasons are no longer decoded to strings. They are passed as Buffers to the listeners of their respective events. The listeners of the 'message' event now take a boolean argument specifying whether or not the message is binary (e173423).

https://stackoverflow.com/a/69485504

cuserox · 2024-07-17T11:45:03Z

packages/tokens-studio-for-figma/src/app/preview/preview.tsx

+  }, [value, handleClose]);
+
+  return (
+    <form onSubmit={checkAndSubmitMessage} style={{ display: 'flex', flexGrow: 1, height: '100%' }}>


As I know it's still WIP, could we put an icon or small message that this is not ready yet? 🔨

packages/tokens-studio-for-figma/src/app/preview/previewUtils.ts

cuserox · 2024-07-17T11:51:47Z

packages/tokens-studio-for-figma/src/app/preview/usePreviewState.tsx

+    window.location.hash = `#${urlParams.toString()}`;
+  }, []);
+
+  return { data, updateHash };


Not necessary now, but perhaps it could be worth replacing this URL / route / state handling with a router solution? Like https://tanstack.com/router/latest

react-router could be good, together with createMemoryRouter: https://github.com/rlingineni/figma-plugin-react-template/blob/main/src/app/App.tsx#L8-L27

Didn't want to change routing logic for the whole plugin in this PR.

packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/preview.ts

cuserox · 2024-07-17T11:54:38Z

packages/tokens-studio-for-figma/src/types/AsyncMessages.ts

@@ -335,6 +336,9 @@ AsyncMessageTypes.REMOVE_RELAUNCH_DATA,
 }
 >;

+export type PreviewRequestStartupAsyncMessage = AsyncMessage<AsyncMessageTypes.PREVIEW_REQUEST_STARTUP>;
+export type PreviewRequestStartupAsyncMessageResult = AsyncMessage<AsyncMessageTypes.PREVIEW_REQUEST_STARTUP>;


No extra data returned in the result?

Don't need to return any data, so removed the reply msg. Could pass { success: true } or something maybe

…ug-ui

github-actions · 2024-07-26T17:08:23Z

⤵️ 📦 ✨ The artifact was successfully created! Want to test it? Download it here 👀 🎁

* [WIP] webpack config setup for fast refresh + websocket server * add prod/dev hmr webpack config option * render immediately and handle AsyncMessage in startup app hook * forward ui AsyncMessages to browser via WebSockets * null check sentry transaction to fix browser error * refactor AsyncMessageChannel code for browser implementation * webpack use swc-loader for browser version + speed/bundle size plugin options * prettify browser dev preview UI * enable loading screen if startup params missing (for web serve + disconnected browser dev preview) * attempt to fix webpack build for tests * add SpeedMeasurePlugin package * create AsyncMessageChannel dev docs * replace web-preview.md ASCII data flow diagram with mermaid * use radii/spacing tokens instead of px for web preview.tsx styles Co-authored-by: Jan Six <[email protected]> * remove commented out startup handler (handled in startup.tsx useEffect now) Co-authored-by: Jan Six <[email protected]> * remove commented out code Co-authored-by: Jan Six <[email protected]> * replace px values with tokens Co-authored-by: Jan Six <[email protected]> * conditional export for AsyncMessageChannel preview env * add browser preview WEBSOCKETS_PORT env * fix typescript issue with PreviewAsyncMessageChannel.isWsConnected * add test coverage for AsyncMessageChannelPreview * Browser preview debug UI (#2803) * fix AsyncMessageChannelPreview undefined error + export WS URI * browser preview CSS file for UI fixes * create previewUtils for browser color scheme + setFigmaBrowserTheme * browser preview URL params + fullscreen/theme/action modes * two bug fixes for browser/plugin websocket preview bridge * add preview dist folder for web preview builds * [WIP] browser preview dev knowledge docs * feat(dev): request startup on browser preview page open * refactor(dev): use env vars for browser preview ws src * fix(debug): remove console.log from asyncmessagechannelpreview * fix(css): figmaloading full height css for browser preview * refactor(dev): use enums for websockets src in browser preview tsx * fix(dev): remove comments * refactor: reuse htmlClassList variable * remove unused package --------- Co-authored-by: macintoshhelper <[email protected]> --------- Co-authored-by: macintoshhelper <[email protected]> Co-authored-by: Jan Six <[email protected]>

* Browser plugin preview (#2748) * [WIP] webpack config setup for fast refresh + websocket server * add prod/dev hmr webpack config option * render immediately and handle AsyncMessage in startup app hook * forward ui AsyncMessages to browser via WebSockets * null check sentry transaction to fix browser error * refactor AsyncMessageChannel code for browser implementation * webpack use swc-loader for browser version + speed/bundle size plugin options * prettify browser dev preview UI * enable loading screen if startup params missing (for web serve + disconnected browser dev preview) * attempt to fix webpack build for tests * add SpeedMeasurePlugin package * create AsyncMessageChannel dev docs * replace web-preview.md ASCII data flow diagram with mermaid * use radii/spacing tokens instead of px for web preview.tsx styles Co-authored-by: Jan Six <[email protected]> * remove commented out startup handler (handled in startup.tsx useEffect now) Co-authored-by: Jan Six <[email protected]> * remove commented out code Co-authored-by: Jan Six <[email protected]> * replace px values with tokens Co-authored-by: Jan Six <[email protected]> * conditional export for AsyncMessageChannel preview env * add browser preview WEBSOCKETS_PORT env * fix typescript issue with PreviewAsyncMessageChannel.isWsConnected * add test coverage for AsyncMessageChannelPreview * Browser preview debug UI (#2803) * fix AsyncMessageChannelPreview undefined error + export WS URI * browser preview CSS file for UI fixes * create previewUtils for browser color scheme + setFigmaBrowserTheme * browser preview URL params + fullscreen/theme/action modes * two bug fixes for browser/plugin websocket preview bridge * add preview dist folder for web preview builds * [WIP] browser preview dev knowledge docs * feat(dev): request startup on browser preview page open * refactor(dev): use env vars for browser preview ws src * fix(debug): remove console.log from asyncmessagechannelpreview * fix(css): figmaloading full height css for browser preview * refactor(dev): use enums for websockets src in browser preview tsx * fix(dev): remove comments * refactor: reuse htmlClassList variable * remove unused package --------- Co-authored-by: macintoshhelper <[email protected]> --------- Co-authored-by: macintoshhelper <[email protected]> Co-authored-by: Jan Six <[email protected]> * Browser plugin preview (#2748) * [WIP] webpack config setup for fast refresh + websocket server * add prod/dev hmr webpack config option * render immediately and handle AsyncMessage in startup app hook * forward ui AsyncMessages to browser via WebSockets * null check sentry transaction to fix browser error * refactor AsyncMessageChannel code for browser implementation * webpack use swc-loader for browser version + speed/bundle size plugin options * prettify browser dev preview UI * enable loading screen if startup params missing (for web serve + disconnected browser dev preview) * attempt to fix webpack build for tests * add SpeedMeasurePlugin package * create AsyncMessageChannel dev docs * replace web-preview.md ASCII data flow diagram with mermaid * use radii/spacing tokens instead of px for web preview.tsx styles Co-authored-by: Jan Six <[email protected]> * remove commented out startup handler (handled in startup.tsx useEffect now) Co-authored-by: Jan Six <[email protected]> * remove commented out code Co-authored-by: Jan Six <[email protected]> * replace px values with tokens Co-authored-by: Jan Six <[email protected]> * conditional export for AsyncMessageChannel preview env * add browser preview WEBSOCKETS_PORT env * fix typescript issue with PreviewAsyncMessageChannel.isWsConnected * add test coverage for AsyncMessageChannelPreview * Browser preview debug UI (#2803) * fix AsyncMessageChannelPreview undefined error + export WS URI * browser preview CSS file for UI fixes * create previewUtils for browser color scheme + setFigmaBrowserTheme * browser preview URL params + fullscreen/theme/action modes * two bug fixes for browser/plugin websocket preview bridge * add preview dist folder for web preview builds * [WIP] browser preview dev knowledge docs * feat(dev): request startup on browser preview page open * refactor(dev): use env vars for browser preview ws src * fix(debug): remove console.log from asyncmessagechannelpreview * fix(css): figmaloading full height css for browser preview * refactor(dev): use enums for websockets src in browser preview tsx * fix(dev): remove comments * refactor: reuse htmlClassList variable * remove unused package --------- Co-authored-by: macintoshhelper <[email protected]> --------- Co-authored-by: macintoshhelper <[email protected]> Co-authored-by: Jan Six <[email protected]> * update web preview script docs * fix: updateStyles error from merge conflict * lint: remove comments and cleanup * fix: language switch on startup for new preview startup * lint: remove more comments from preview files * lint: fix indentation error because of prettier conflict --------- Co-authored-by: macintoshhelper <[email protected]> Co-authored-by: Jan Six <[email protected]>

macintoshhelper added 4 commits May 29, 2024 18:57

fix AsyncMessageChannelPreview undefined error + export WS URI

905eaad

browser preview CSS file for UI fixes

9ce955a

create previewUtils for browser color scheme + setFigmaBrowserTheme

adb9b1c

browser preview URL params + fullscreen/theme/action modes

9a95a6c

macintoshhelper and others added 6 commits June 4, 2024 12:22

Merge branch 'feat/browser-plugin-sync' into feat/browser-preview-deb…

0d71300

…ug-ui

two bug fixes for browser/plugin websocket preview bridge

faf71b3

Merge branch 'feat/browser-plugin-sync' into feat/browser-preview-deb…

dae8842

…ug-ui

Merge branch 'feat/browser-plugin-sync' into feat/browser-preview-deb…

b643234

…ug-ui

add preview dist folder for web preview builds

5b4dbb8

[WIP] browser preview dev knowledge docs

2890d53

cuserox assigned macintoshhelper Jul 15, 2024

feat(dev): request startup on browser preview page open

5edd05b

cuserox approved these changes Jul 17, 2024

View reviewed changes

macintoshhelper marked this pull request as ready for review July 17, 2024 14:37

macintoshhelper and others added 8 commits July 17, 2024 17:52

refactor(dev): use env vars for browser preview ws src

d9ad698

fix(debug): remove console.log from asyncmessagechannelpreview

6f286be

fix(css): figmaloading full height css for browser preview

6f2f848

refactor(dev): use enums for websockets src in browser preview tsx

b52d942

fix(dev): remove comments

c2f7bd0

refactor: reuse htmlClassList variable

e7322d6

remove unused package

92848d5

Merge branch 'feat/browser-plugin-sync' into feat/browser-preview-deb…

73f525a

…ug-ui

six7 merged commit dce52fb into feat/browser-plugin-sync Jul 26, 2024
5 of 6 checks passed

six7 deleted the feat/browser-preview-debug-ui branch July 26, 2024 17:52

macintoshhelper mentioned this pull request Oct 21, 2024

DX: Browser plugin preview #3184

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser preview debug UI #2803

Browser preview debug UI #2803

macintoshhelper commented May 29, 2024

changeset-bot bot commented May 29, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

cuserox left a comment

cuserox Jul 17, 2024

cuserox Jul 17, 2024

cuserox Jul 17, 2024

cuserox Jul 17, 2024

cuserox Jul 17, 2024

macintoshhelper Jul 17, 2024

cuserox Jul 17, 2024

cuserox Jul 17, 2024

macintoshhelper Jul 17, 2024

cuserox Jul 17, 2024

macintoshhelper Jul 17, 2024

github-actions bot commented Jul 26, 2024

Browser preview debug UI #2803

Browser preview debug UI #2803

Conversation

macintoshhelper commented May 29, 2024

Why does this PR exist?

What does this pull request do?

Testing this change

Additional Notes (if any)

changeset-bot bot commented May 29, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jul 5, 2024 • edited Loading

Test coverage results 🧪

github-actions bot commented Jul 5, 2024 • edited Loading

cuserox left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 26, 2024

changeset-bot bot commented May 29, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading