fix: improve preview code execution

sidwebworks · Jun 10, 2022 · 94f1cc9 · 94f1cc9 · vercel · Jun 10, 2022
1 parent 98a7779
commit 94f1cc9
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 106 deletions.
diff --git a/public/sandbox.html b/public/sandbox.html
@@ -1,37 +1,43 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script type="module">
-      const handleError = (err) => {
-        console.error(JSON.stringify(err))
-      }
+<script type="module">
 
-      window.addEventListener("error", (ev) => {
-        ev.preventDefault()
-        handleError(ev.error)
-      })
+  function createUri(raw) {
+    const blob = new Blob([String.raw({raw})], {type: 'text/javascript'})
+    const uri = URL.createObjectURL(blob);
+    return uri;
+  }
 
-      window.addEventListener("message", (ev) => {
-        if (!ev.data?.code) return
-        try {
-          eval(e.data.code)
-        } catch (error) {
-          handleError(error)
-        }
-      })
-    </script>
-  </head>
-	<body>
-    <div id="root"></div>
-		<script>
-			window.addEventListener(
-				"message",
-				(event) => {
-					console.log(event);
-				},
-				false
-			);
-		</script>
+  const handleError = (err) => {
+    console.error(err, "CAUGHT");
+    parent.postMessage({ error: err.toString() }, "*");
+  };
 
-	</body>
-</html>
+  window.addEventListener("error", (ev) => {
+    console.log(ev);
+    handleError(ev.error);
+  });
+
+  window.onerror = (e) => {
+    console.log(e)
+  }
+
+  const run = (code) => {
+    console.log("Ran")
+    if (!code) return
+
+    (async () => {
+      await import(createUri(code))
+    })().catch((e) => {
+      console.log(e)
+      handleError(e)
+    });
+  }
+
+  window.addEventListener(
+    "message",
+    (e) => {
+       run(e.data.code)
+    },
+    false
+  );
+
+</script>
diff --git a/src/bundler/index.ts b/src/bundler/index.ts
@@ -31,6 +31,8 @@ class Bundler {
   config: BuildOptions = {
     bundle: true,
     write: false,
+    platform: "browser",
+    format: "esm",
     define: {
       "process.env.NODE_ENV": `"production"`,
       global: "window",

diff --git a/src/bundler/plugins/loader.plugin.ts b/src/bundler/plugins/loader.plugin.ts
@@ -1,36 +1,48 @@
 import { Loader, OnLoadResult } from "esbuild-wasm";
 import { unix as path } from "path-fx";
 import { BuildInput } from "..";
+import { BundlingError } from "../errors";
 
 import { createPlugin, getLoaderFromPath } from "./helpers";
 
 const plugin = createPlugin<BuildInput>((options) => ({
   name: "loader-plugin",
   setup(build) {
-    build.onLoad({ filter: new RegExp(path.join(options.entry)) }, (args) => {
-      return {
-        loader: getLoaderFromPath(args.path, options.loader),
-        contents: options.tree[path.join(options.entry)],
-      };
-    });
+    build.onLoad(
+      { filter: new RegExp(path.join(options.entry)), namespace: "entry" },
+      (args) => {
+        const contents = options.tree[path.join(options.entry)];
+
+        if (!contents) {
+          return null;
+        }
+
+        return {
+          loader: getLoaderFromPath(args.path, options.loader),
+          contents,
+        };
+      }
+    );
 
     /**
      * Resolve relative modules imports
      */
-    build.onLoad({ filter: /^\.+\// }, (args) => {
+    build.onLoad({ filter: /^\.+\//, namespace: "relative" }, (args) => {
       const contents = options.tree[path.join("/", args.path)];
 
+      if (!contents) return null;
+
       return {
         loader: getLoaderFromPath(args.path, options.loader),
         contents,
       };
     });
 
-    build.onLoad({ filter: /.*/ }, async (args) => {
-      let contents = options.tree[args.path];
+    build.onLoad({ filter: /.*/, namespace: "main" }, async (args) => {
+      const contents = options.tree[args.path] || options.tree["/" + args.path];
 
       if (!contents) {
-        contents = options.tree["/" + args.path];
+        return null;
       }
 
       const result: OnLoadResult = {
@@ -41,32 +53,6 @@ const plugin = createPlugin<BuildInput>((options) => ({
 
       return result;
     });
-
-    // build.onLoad({ filter: /.css$/ }, async (args: any) => {
-    //   const { data, request } = await axios.get(args.path);
-
-    //   const contents = normalizeCss(data);
-
-    //   const result: OnLoadResult = {
-    //     loader: "jsx",
-    //     contents,
-    //     resolveDir: new URL("./", request.responseURL).pathname,
-    //   };
-
-    //   await fileCache.setItem(args.path, result);
-
-    //   return result;
-    // });
-
-    // build.onLoad({ filter: /.*/ }, async (args) => {
-    //   const result: OnLoadResult = {
-    //     loader: "jsx",
-    //     contents: "",
-    //     resolveDir: new URL("./", args.path).pathname,
-    //   };
-
-    //   return result;
-    // });
   },
 }));
 

diff --git a/src/bundler/plugins/resolver.plugin.ts b/src/bundler/plugins/resolver.plugin.ts
@@ -1,4 +1,4 @@
-import { unix as path } from "path-fx";
+import { unix } from "path-fx";
 import { BuildInput } from "..";
 import { createPlugin } from "./helpers";
 
@@ -11,9 +11,9 @@ const plugin = createPlugin<BuildInput>((options) => ({
      * Resolve the entry file eg. `index.js`
      */
     build.onResolve(
-      { filter: new RegExp(path.join("/", options.entry)) },
-      (args: any) => {
-        return { path: args.path, namespace: "a" };
+      { filter: new RegExp(unix.join("/", options.entry)) },
+      (args) => {
+        return { path: args.path, namespace: "entry" };
       }
     );
 
@@ -22,18 +22,30 @@ const plugin = createPlugin<BuildInput>((options) => ({
      */
     build.onResolve({ filter: /^\.+\// }, (args) => {
       return {
-        namespace: "a",
+        namespace: "relative",
         path: args.path,
       };
     });
 
     /**
      * Resolve main module files
      */
-    build.onResolve({ filter: /.*/ }, async (args: any) => {
+    build.onResolve({ filter: /.*/ }, async (args) => {
+      let path = unix.join("/", args.path);
+
+      if (path in options.tree) {
+        return {
+          namespace: "main",
+          path,
+        };
+      }
+
+      path = new URL(args.path, "https://cdn.skypack.dev").href;
+
       return {
-        namespace: "a",
-        path: args.path,
+        namespace: "skypack",
+        path: path,
+        external: true,
       };
     });
   },

diff --git a/src/components/preview/Preview.tsx b/src/components/preview/Preview.tsx
@@ -17,26 +17,29 @@ const Preview: React.FC = () => {
 
   const result = useMemo(() => createSnippet({ html, css }), [html, css]);
 
+  const postCode = (target: HTMLIFrameElement) => {
+    target.contentWindow.postMessage({ code: js }, "*");
+  };
+
   useEffect(() => {
     if (!iframe.current) return;
     iframe.current.srcdoc = result;
   }, [result]);
 
   useEffect(() => {
-    if (!iframe.current) return;
-
-    iframe.current.contentWindow.postMessage({ code: js }, "*");
+    postCode(iframe.current);
+  }, [js, result]);
 
+  useEffect(() => {
     const handler = (ev: MessageEvent<{ error: Error }>) => {
       if (typeof ev.data?.error !== "string") return;
-
       dispatch(UPDATE_ERROR(ev.data.error));
     };
 
     window.addEventListener("message", (ev) => handler(ev));
 
     return () => window.removeEventListener("message", (ev) => handler(ev));
-  }, [js, result]);
+  }, []);
 
   return (
     <div className={"preview-wrapper relative h-full"}>
@@ -46,6 +49,7 @@ const Preview: React.FC = () => {
 
       <iframe
         ref={iframe}
+        onLoad={(e) => postCode(e.target as HTMLIFrameElement)}
         title="preview"
         srcDoc={result}
         className="h-full"

diff --git a/src/components/preview/preview.helpers.ts b/src/components/preview/preview.helpers.ts
@@ -2,27 +2,42 @@ import { template } from "lodash-es";
 
 const templates = {
   js: template(`
-<script type="module">
-  const handleError = (err) => {
-    console.error(err)
-    parent.postMessage({ error: err.toString() }, "*")
-  }
-
-  window.addEventListener("error", (ev) => {
-    ev.preventDefault()
-    handleError(ev.error)
-  })
-
-  window.addEventListener("message", (ev) => {
-    if (!ev.data?.code) return
-    try {
-      eval(ev.data.code)
-      parent.postMessage({ error: "" }, "*")
-    } catch (error) {
-      handleError(error)
+  <script type="module" async>
+    function createUri(raw) {
+      const blob = new Blob([String.raw({raw})], {type: 'text/javascript'})
+      const uri = URL.createObjectURL(blob);
+      return uri;
     }
-  }, false)
-</script>`),
+  
+    const handleError = (err) => {
+      console.error(err);
+      parent.postMessage({ error: err.toString() }, "*");
+    };
+  
+    window.addEventListener("error", (ev) => {
+      ev.preventDefault()
+      handleError(ev.error);
+    });
+  
+    const run = (code) => {
+      if (!code) return    
+      (async () => {
+        document.body.innerHTML = document.body.innerHTML
+        const uri = createUri(code)
+        await import(uri)
+      })().then(() => {
+       parent.postMessage({ error: '' }, "*");
+      }).catch(handleError)
+    }
+  
+    window.addEventListener(
+      "message",
+      (e) => run(e.data.code),
+      false
+    );
+</script>
+
+`),
   css: template(`<style> <%- code %> </style>`),
 };
 
@@ -47,6 +62,3 @@ export const createSnippet = ({
 
   return output;
 };
-
-
-