perf: babel-transform for jsx only

package.json

@@ -40,7 +40,7 @@
     "typescript": "3.5.2"
   },
   "scripts": {
-    "deploy": "npm run build && gh-pages -d ./build -b master -r https://github.com/coldemo/coldemo.github.io",
+    "deploy": "npm run build && gh-pages -d ./build -b master -r git@github.com:coldemo/coldemo.github.io.git",
     "dev": "npm start",
     "start": "react-scripts start",
     "build": "react-scripts build",

src/playground/Playground.tsx

@@ -31,6 +31,7 @@ import {
   loadCss,
   appendJs,
   appendCss,
+  wrapCode,
 } from './util';
 
 Object.assign(window, {
@@ -124,18 +125,24 @@ export let Playground: React.FC = () => {
 
   Object.assign(window, { setRendering }); // without side-effect
 
-  let doPreview = useCallback(async (code: string) => {
-    if (!code) return;
-    setCompiling(true);
-    try {
-      let res = await babelTransform(code);
-      setPreview(res);
-    } catch (err) {
-      displayError(err);
-    } finally {
-      setCompiling(false);
-    }
-  }, []);
+  let doPreview = useCallback(
+    async (code: string) => {
+      if (!code) return;
+      setCompiling(true);
+      try {
+        let res = wrapCode(code);
+        if (file && file.endsWith('.jsx')) {
+          res = await babelTransform(res);
+        }
+        setPreview(res);
+      } catch (err) {
+        displayError(err);
+      } finally {
+        setCompiling(false);
+      }
+    },
+    [file]
+  );
 
   // let persistEditor = useCallback((code: string) => {
   //   localStorage.setItem(storeKeyCode, code);

src/playground/babelMaster.ts

@@ -1,40 +1,7 @@
 let worker = new Worker('./babel-worker.js');
 
-let wrapCode = (code: string) => {
-  return `
-(async () => {
-  setRendering(true)
-  // mountNode.innerHTML = '' // can cause error in react
-  ReactDOM.unmountComponentAtNode(mountNode)
-  try {
-    let { useRef, useMemo, useState, useEffect, useLayoutEffect, useReducer, useContext, useCallback, useImperativeHandle } = React
-    ;;${code};;
-
-    let isVueLike = _.isPlainObject(App)
-    if (isVueLike) {
-      if (!mountNode.children[0]) {
-        let innerNode = document.createElement('div')
-        mountNode.appendChild(innerNode)
-      }
-      let curr = mountNode.children[0]
-      new Vue(App).$mount(curr)
-    } else {
-      ReactDOM.render(<App />, mountNode)
-    }
-  } catch (err) {
-    console.error(['displayError', err])
-    displayError(err)
-  } finally {
-    setRendering(false)
-  }
-})()
-  `.trim();
-};
-
 export let babelTransform = async (code: string): Promise<string> => {
   return new Promise((resolve, reject) => {
-    let fullCode = wrapCode(code);
-
     worker.onerror = e => {
       console.error(['worker onerror', e]);
       reject(new Error(`worker onerror - ${code.slice(0, 100)}`));
@@ -48,6 +15,6 @@ export let babelTransform = async (code: string): Promise<string> => {
         resolve(res.data as string);
       }
     };
-    worker.postMessage(fullCode);
+    worker.postMessage(code);
   });
 };

src/playground/util.tsx

@@ -80,3 +80,34 @@ export let appendCss = (code: string) => {
   el.innerHTML = code;
   window.mountNode.appendChild(el);
 };
+
+export let wrapCode = (code: string) => {
+  return `
+(async () => {
+  setRendering(true)
+  // mountNode.innerHTML = '' // can cause error in react
+  ReactDOM.unmountComponentAtNode(mountNode)
+  try {
+    let { useRef, useMemo, useState, useEffect, useLayoutEffect, useReducer, useContext, useCallback, useImperativeHandle } = React
+    ;;${code};;
+
+    let isVueLike = _.isPlainObject(App)
+    if (isVueLike) {
+      if (!mountNode.children[0]) {
+        let innerNode = document.createElement('div')
+        mountNode.appendChild(innerNode)
+      }
+      let curr = mountNode.children[0]
+      new Vue(App).$mount(curr)
+    } else {
+      ReactDOM.render(React.createElement(App), mountNode)
+    }
+  } catch (err) {
+    console.error(['displayError', err])
+    displayError(err)
+  } finally {
+    setRendering(false)
+  }
+})()
+  `.trim();
+};