Use ES Modules Shims for iframe shims

Author: JordanMartinez

client/config/dev/Try.Config.purs

@@ -3,7 +3,7 @@ module Try.Config where
 import Prelude
 
 loaderUrl :: String
-loaderUrl = "js/output"
+loaderUrl = "./js/output"
 
 compileUrl :: String
 compileUrl = "http://localhost:8081"

client/package.json

@@ -6,9 +6,12 @@
     "test": "spago test --path config/dev/Try.Config.purs",
     "build": "spago build --path config/dev/Try.Config.purs",
     "build:dev": "spago bundle-app --path config/dev/Try.Config.purs --to public/js/index.js",
-    "build:production": "spago bundle-app --path config/prod/Try.Config.purs --purs-args '--censor-lib --strict' --to public/js/index.js"
+    "build:production": "spago bundle-app --path config/prod/Try.Config.purs --purs-args '--censor-lib --strict' --to public/js/index.js",
+    "serve": "http-server public/ -o / --cors=\"Access-Control-Allow-Origin: *\" -c-1",
+    "serve:dev": "npm run build:dev && npm run serve"
   },
   "devDependencies": {
+    "http-server": "^14.1.0",
     "purescript": "^0.13.6",
     "purescript-psa": "^0.7.3",
     "rimraf": "^2.5.4",

client/public/frame.html

@@ -5,7 +5,57 @@
   <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
   <meta content="utf-8" http-equiv="encoding">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="js/frame.js"></script>
+  <script noshim>
+    window.esmsInitOptions = {
+      // -- Hooks --
+      // Module load error
+      onerror: (e) => {
+        console.log("Error while loading module: ");
+        console.log(e);
+        throw e;
+      },
+    };
+  </script>
+  <!--
+    JSPM Generator Import Map
+    Edit URL: https://generator.jspm.io/#Y2NnYGCzD80rySzJSU1hSMpM183MK0lNTy1yMNQz0zM1ZEhJTc7MTczRyyp2MDTQM9YzZChKTUwu0U3Jz3UwNNMzxCqiX5xaVJZaBJGAKystzUxxsACaYQQAoBlP83cA
+  -->
+  <script type="importmap">
+  {
+    "imports": {
+      "big-integer": "https://ga.jspm.io/npm:[email protected]/BigInteger.js",
+      "decimal.js": "https://ga.jspm.io/npm:[email protected]/decimal.js",
+      "react": "https://ga.jspm.io/npm:[email protected]/index.js",
+      "react-dom": "https://ga.jspm.io/npm:[email protected]/index.js",
+      "react-dom/server": "https://ga.jspm.io/npm:[email protected]/server.browser.js",
+      "uuid": "https://ga.jspm.io/npm:[email protected]/dist/esm-browser/index.js"
+    },
+    "scopes": {
+      "https://ga.jspm.io/": {
+        "object-assign": "https://ga.jspm.io/npm:[email protected]/index.js",
+        "react": "https://ga.jspm.io/npm:[email protected]/index.js",
+        "scheduler": "https://ga.jspm.io/npm:[email protected]/index.js"
+      }
+    }
+  }
+  </script>
+
+  <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
+  <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" integrity="sha384-ZGtUNdKMtA2sSrO9dN9d2TOeiSlXlDSrOrasgO9YoKR4LsDV7RLdUvvX1M0gCkl2" crossorigin="anonymous"></script>
+
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/BigInteger.js" integrity="sha384-Lxn1K4ox8//F5O+uihYrTIJvbfM+UJaRL2SdFA2s/z0v6i5TrWg9B8RzfjM60R9y"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/decimal.js" integrity="sha384-camBDJB1KoavtyRdQfdzzR4mj+uAKnNlvseJIwqKYOaHWnjZmnXR+1vyBP1WlZd0"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/index.js" integrity="sha384-iQp1zoaqIhfUYyYkz3UNk1QeFfmBGgt1Ojq0kZD5Prql1g7fgJVzVgsjDoR65lv8"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/cjs/react-dom-server.browser.production.min.js" integrity="sha384-XL5bjsaJ5UPjTIPsyzUfscq41OFbVXsLojl53DCgFfdzKNNUL2MOSd0WM/upjd53"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/cjs/react-dom.production.min.js" integrity="sha384-HDQjgsF+F2j5XuiiDtCiuLA1vgyHr9ONiNrBhKmJEVa43KqIZdAB7VN2+QjUGwvq"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/index.js" integrity="sha384-zAu0L7n/xnRAG7+D/qd1K4E1/2tYK4hL3puH/5YEliHNnO3OOt5jUhnnemFTHmIG"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/server.browser.js" integrity="sha384-dsW+4a3rjWELxqtR1rVEIeLNHGyMjRFwdBVz6OG30oBLs8tO2/dYUIxEvc515PSZ"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/index.js" integrity="sha384-T0mNrKFgmKBye+m7XrpShrh+7kfix2zQd9qrR8xytnppcxESpgzrb4IJXvE+uJcl"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/cjs/react.production.min.js" integrity="sha384-pTMZhybzHZ+1G029kWUmoGvTrBp1C+2oJAkZV48BBq7+e6Hk3bGuXtvxT2vQfBqj"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/index.js" integrity="sha384-jVagjV+2YtlseazU2byX6gMLPHaA5Ps2c6HhvsGDlWjn45YCCoU1q+QtQTOb1MjT"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/index.js" integrity="sha384-HIW1B3OQdGPkUEgh29MiYoUKQp+mFTjw50hRVvGhZgUaNYrUFYN07a+3CqC0/I7L"/>
+  <link rel="modulepreload" href="https://ga.jspm.io/npm:[email protected]/dist/esm-browser/index.js" integrity="sha384-y7UmGnwe+/V/S4AD5T6MLU9dHjA3PLvuVGNhrqZApiNbq9Lf8s3aNRrcnzOa+qtR"/>
+  <script src="js/frame.js" crossorigin="anonymous" noshim></script>
 </head>
 <body>
 <main id="main"></main>

client/public/js/frame.js

@@ -1,41 +1,25 @@
 (function() {
-  function evalSources(sources) {
-    var modules = {};
-    function dirname(str) {
-      var ix = str.lastIndexOf("/");
-      return ix < 0 ? "" : str.slice(0, ix);
-    }
-    function resolvePath(a, b) {
-      if (b[0] === "." && b[1] === "/") {
-        return dirname(a) + b.slice(1);
-      }
-      if (b[0] === "." && b[1] === "." && b[2] === "/") {
-        return dirname(dirname(a)) + b.slice(2);
-      }
-      return b;
-    }
-    return function load(name) {
-      if (modules[name]) {
-        return modules[name].exports;
-      }
-      function require(path) {
-        return load(resolvePath(name, path));
-      }
-      var module = modules[name] = { exports: {} };
-      new Function("module", "exports", "require", sources[name])(module, module.exports, require);
-      return module.exports;
-    };
-  }
-
   var parent;
 
   document.addEventListener("DOMContentLoaded", function() {
     window.addEventListener("message", function(event) {
       parent = event.source;
       parent.postMessage("trypurescript", "*");
-      var file = evalSources(event.data)("<file>");
-      if (file.main && typeof file.main === "function") {
-        file.main();
+      const scriptEl = document.createElement("script");
+      scriptEl.type = "module";
+      const code = event.data.code;
+      const url = event.data.url;
+      const codeFixedImports = code
+        .split("\n")
+        .map((line) => line.replace(/^import (.+) from "..\/([^"]+)";$/, `import $1 from "${url}/$2";`))
+        .join("\n");
+      // See https://stackoverflow.com/a/6433770
+      try {
+        scriptEl.appendChild(document.createTextNode(codeFixedImports));
+      } catch (e) {
+        scriptEl.text = codeFixedImports;
+      } finally {
+        document.body.appendChild(scriptEl);
       }
     }, { once: true });
   }, { once: true });

client/src/Try/Container.purs

@@ -29,10 +29,8 @@ import Try.Editor (MarkerType(..), toStringMarkerType)
 import Try.Editor as Editor
 import Try.Gist (getGistById, tryLoadFileFromGist)
 import Try.GitHub (getRawGitHubFile)
-import Try.Loader (Loader, makeLoader, runLoader)
 import Try.QueryString (getQueryStringMaybe)
 import Try.Session (createSessionIdIfNecessary, storeSession, tryRetrieveSession)
-import Try.Types (JS(..))
 import Web.HTML (window)
 import Web.HTML.Window (alert)
 
@@ -83,12 +81,9 @@ data Action
 _editor :: SProxy "editor"
 _editor = SProxy
 
-loader :: Loader
-loader = makeLoader Config.loaderUrl
-
 type LoadCb = Effect Unit
 type FailCb = Effect Unit
-foreign import setupIFrame :: EffectFn3 (Object JS) LoadCb FailCb Unit
+foreign import setupIFrame :: EffectFn3 { code :: String, url :: String } LoadCb FailCb Unit
 foreign import teardownIFrame :: Effect Unit
 
 component :: forall q i o. H.Component HH.HTML q i o Aff
@@ -189,22 +184,20 @@ component = H.mkComponent
           if settings.showJs then
             H.liftEffect teardownIFrame
           else do
-            eitherSources <- H.liftAff $ runExceptT $ runLoader loader (JS js)
             for_ warnings \warnings_ -> do
               let anns = Array.mapMaybe (toAnnotation MarkerWarning) warnings_
               _ <- H.query _editor unit $ H.tell $ Editor.SetAnnotations anns
               pure unit
-            case eitherSources of
-              Right sources -> do
-                let eventData = Object.insert "<file>" (JS js) sources
-                H.liftAff $ makeAff \f -> do 
-                  runEffectFn3 setupIFrame eventData (f (Right unit)) (f (Left $ Aff.error "Could not load iframe"))
-                  mempty
-                H.modify_ _ { compiled = Just (Right res) }
-              Left err -> do
-                H.liftEffect teardownIFrame
-                H.liftEffect $ error err
-                H.modify_ _ { compiled = Just (Left err) }
+            let
+              eventData =
+                { code: js
+                , url: Config.loaderUrl
+                }
+            H.liftEffect teardownIFrame
+            H.liftAff $ makeAff \f -> do
+              runEffectFn3 setupIFrame eventData (f (Right unit)) (f (Left $ Aff.error "Could not load iframe"))
+              mempty
+            H.modify_ _ { compiled = Just (Right res) }
 
     HandleEditor (Editor.TextChanged text) -> do
       _ <- H.fork $ handleAction $ Cache text