Try out esbuild-wasm with smaller react pragmas

seek-oss · Nov 3, 2023 · ffa1527 · ffa1527
1 parent 74be8e3
commit ffa1527
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,6 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/standalone": "^7.20.6",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
@@ -83,6 +82,7 @@
     "css-loader": "^6.7.2",
     "current-git-branch": "^1.1.0",
     "dedent": "^0.7.0",
+    "esbuild-wasm": "^0.19.5",
     "fast-glob": "^3.2.12",
     "find-up": "^5.0.0",
     "fuzzy": "^0.1.3",
@@ -134,6 +134,7 @@
   },
   "packageManager": "pnpm@7.18.1",
   "volta": {
+    "pnpm": "7.18.1",
     "node": "16.13.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
@@ -37,8 +37,9 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   useEffect(() => {
     try {
-      const newCode = compileJsx(code);
-      setRenderCode(newCode);
+      compileJsx(code).then(({ code: newCode }) => {
+        setRenderCode(newCode);
+      });
     } catch (e) {}
   }, [code]);
 

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
+import * as esbuild from 'esbuild-wasm';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -26,21 +27,27 @@ polyfillIntersectionObserver().then(() => {
       Object.entries(components).filter(([_, value]) => value)
     );
 
-    renderElement(
-      <StoreProvider themes={themeNames} widths={widths}>
-        <Playroom
-          components={filteredComponents}
-          widths={widths}
-          themes={themeNames}
-          snippets={
-            typeof snippets.default !== 'undefined'
-              ? snippets.default
-              : snippets
-          }
-        />
-      </StoreProvider>,
-      outlet
-    );
+    esbuild
+      .initialize({
+        wasmURL: 'https://unpkg.com/esbuild-wasm/esbuild.wasm',
+      })
+      .then(() => {
+        renderElement(
+          <StoreProvider themes={themeNames} widths={widths}>
+            <Playroom
+              components={filteredComponents}
+              widths={widths}
+              themes={themeNames}
+              snippets={
+                typeof snippets.default !== 'undefined'
+                  ? snippets.default
+                  : snippets
+              }
+            />
+          </StoreProvider>,
+          outlet
+        );
+      });
   };
   renderPlayroom();
 

diff --git a/src/utils/compileJsx.ts b/src/utils/compileJsx.ts
@@ -1,4 +1,4 @@
-import { transform } from '@babel/standalone';
+import { transform as esbuildTransform } from 'esbuild-wasm';
 
 export const ReactFragmentPragma = 'R_F';
 export const ReactCreateElementPragma = 'R_cE';
@@ -7,17 +7,11 @@ export const openFragmentTag = '<>';
 export const closeFragmentTag = '</>';
 
 export const compileJsx = (code: string) =>
-  transform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
-    presets: [
-      [
-        'react',
-        {
-          pragma: ReactCreateElementPragma,
-          pragmaFrag: ReactFragmentPragma,
-        },
-      ],
-    ],
-  }).code;
+  esbuildTransform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
+    loader: 'jsx',
+    jsxFactory: ReactCreateElementPragma,
+    jsxFragment: ReactFragmentPragma,
+  });
 
 export const validateCode = (code: string) => {
   try {