WIP

@types/esbuild.wasm.d.ts

@@ -0,0 +1,4 @@
+declare module 'esbuild-wasm/esbuild.wasm' {
+  const wasmURL: string;
+  export default wasmURL;
+}

lib/makeWebpackConfig.js

@@ -141,6 +141,13 @@ module.exports = async (playroomConfig, options) => {
           include: path.dirname(require.resolve('codemirror/package.json')),
           use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
+        {
+          test: /esbuild.wasm$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'esbuild-[hash][ext]',
+          },
+        },
       ],
     },
     optimization: {

package.json

@@ -83,6 +83,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",
@@ -92,6 +93,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
+    "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "parse-prop-types": "^0.3.0",
     "polished": "^4.2.2",

src/Playroom/CodeEditor/CodeEditor.tsx

@@ -12,8 +12,8 @@ import {
 import { formatCode as format, isMac } from '../../utils/formatting';
 import {
   closeFragmentTag,
-  compileJsx,
   openFragmentTag,
+  validateCode,
 } from '../../utils/compileJsx';
 
 import * as styles from './CodeEditor.css';
@@ -42,13 +42,13 @@ import {
 } from './keymaps/cursors';
 import { wrapInTag } from './keymaps/wrap';
 
-const validateCode = (editorInstance: Editor, code: string) => {
+const validateCodeInEditor = (editorInstance: Editor, code: string) => {
   editorInstance.clearGutter('errorGutter');
 
-  try {
-    compileJsx(code);
-  } catch (err) {
-    const errorMessage = err instanceof Error ? err.message : '';
+  const validOrError = validateCode(code);
+  if (validOrError !== true) {
+    const errorMessage =
+      validOrError instanceof Error ? validOrError.message : '';
     const matches = errorMessage.match(/\(([0-9]+):/);
     const lineNumber =
       matches && matches.length >= 2 && matches[1] && parseInt(matches[1], 10);
@@ -172,7 +172,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
       }
 
       editorInstanceRef.current.setValue(code);
-      validateCode(editorInstanceRef.current, code);
+      validateCodeInEditor(editorInstanceRef.current, code);
     }
   }, [code, previewCode]);
 
@@ -213,12 +213,12 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
     <ReactCodeMirror
       editorDidMount={(editorInstance) => {
         editorInstanceRef.current = editorInstance;
-        validateCode(editorInstance, code);
+        validateCodeInEditor(editorInstance, code);
         setCursorPosition(cursorPosition);
       }}
       onChange={(editorInstance, data, newCode) => {
         if (editorInstance.hasFocus() && !previewCode) {
-          validateCode(editorInstance, newCode);
+          validateCodeInEditor(editorInstance, newCode);
           debouncedChange(newCode);
         }
       }}

src/Playroom/Frames/Frames.tsx

@@ -1,11 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import flatMap from 'lodash/flatMap';
 import Iframe from './Iframe';
-import {
-  compileJsx,
-  openFragmentTag,
-  closeFragmentTag,
-} from '../../utils/compileJsx';
+import { compileJsx } from '../../utils/compileJsx';
 import type { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
@@ -31,16 +27,16 @@ export default function Frames({ code, themes, widths }: FramesProps) {
     }))
   );
 
-  const [renderCode, setRenderCode] = useState(
-    () => `${openFragmentTag}${closeFragmentTag}`
-  );
+  const [renderCode, setRenderCode] = useState('');
 
   useEffect(() => {
-    try {
-      const newCode = compileJsx(code);
-      setRenderCode(newCode);
-    } catch (e) {}
-  }, [code]);
+    (async () => {
+      try {
+        const newCode = await compileJsx(code);
+        setRenderCode(newCode);
+      } catch (e) {}
+    })();
+  });
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>

src/Playroom/Preview.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react';
+import { useState, type ComponentType, type ReactNode, useEffect } from 'react';
 import lzString from 'lz-string';
 
 import { useParams } from '../utils/params';
@@ -32,13 +32,23 @@ export default ({ themes, components, FrameComponent }: PreviewProps) => {
       );
 
       return {
-        code: compileJsx(result.code),
+        code: result.code,
         themeName: result.theme,
       };
     }
 
     return {};
   });
+  const [renderCode, setRenderCode] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const newCode = await compileJsx(code || '');
+        setRenderCode(newCode);
+      } catch (e) {}
+    })();
+  });
 
   const resolvedTheme = themeName ? themes[themeName] : null;
 
@@ -49,7 +59,7 @@ export default ({ themes, components, FrameComponent }: PreviewProps) => {
           themeName={themeName || '__PLAYROOM__NO_THEME__'}
           theme={resolvedTheme}
         >
-          <RenderCode code={code} scope={components} />
+          <RenderCode code={renderCode} scope={components} />
         </FrameComponent>
       </div>
       <div className={styles.splashScreenContainer}>

src/Playroom/RenderCode/RenderCode.js

@@ -10,6 +10,14 @@ import {
 } from '../../utils/compileJsx';
 
 export default function RenderCode({ code, scope }) {
+  // TODO: move these up
+  if (ReactCreateElementPragma in scope) {
+    throw new Error(`${ReactCreateElementPragma} not allowed in scope`);
+  }
+  if (ReactFragmentPragma in scope) {
+    throw new Error(`${ReactFragmentPragma} not allowed in scope`);
+  }
+
   return scopeEval(code, {
     ...(useScope() ?? {}),
     ...scope,

src/utils/compileJsx.ts

@@ -1,29 +1,55 @@
 import { transform } from '@babel/standalone';
+import memoizeOne from 'memoize-one';
+import * as esbuild from 'esbuild-wasm';
+import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm';
+
+const init = esbuild.initialize({
+  wasmURL: `/${esbuildWasmUrl}`,
+});
 
 export const ReactFragmentPragma = 'R_F';
 export const ReactCreateElementPragma = 'R_cE';
 
 export const openFragmentTag = '<>';
 export const closeFragmentTag = '</>';
 
-export const compileJsx = (code: string) =>
-  transform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
-    presets: [
-      [
-        'react',
-        {
-          pragma: ReactCreateElementPragma,
-          pragmaFrag: ReactFragmentPragma,
-        },
+export const compileJsxWithBabel = memoizeOne((code: string) => {
+  const result = transform(
+    `${openFragmentTag}${code.trim()}${closeFragmentTag}`,
+    {
+      presets: [
+        [
+          'react',
+          {
+            pragma: ReactCreateElementPragma,
+            pragmaFrag: ReactFragmentPragma,
+          },
+        ],
       ],
-    ],
-  }).code;
+    }
+  );
+  return result.code;
+});
+
+export const compileJsx = memoizeOne(async (code: string) => {
+  await init;
+  const result = await esbuild.transform(
+    `${openFragmentTag}${code.trim()}${closeFragmentTag}`,
+    {
+      loader: 'jsx',
+      jsxFactory: ReactCreateElementPragma,
+      jsxFragment: ReactFragmentPragma,
+    }
+  );
+
+  return result.code;
+});
 
-export const validateCode = (code: string) => {
+export const validateCode = (code: string): true | Error => {
   try {
-    compileJsx(code);
+    compileJsxWithBabel(code);
     return true;
   } catch (err) {
-    return false;
+    return err as Error;
   }
 };

src/utils/cursor.ts

@@ -35,4 +35,4 @@ export const isValidLocation = ({
           cursor,
           snippet: breakoutString,
         })
-      );
+      ) === true;