Refer to ESM modules, not CJS ones (#277)

JordanMartinez · web-flow · commit 69ee71a4861b · 2022-06-10T07:53:04.000-05:00
* Refer to ESM modules, not CJS ones

* Return to URL remapping approach

* Drop setBase.mjs; update readme
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -72,12 +72,6 @@ jobs:
           npm run build
           npm run test
           npm run build:production
-          if [ "/output/ignored/" != "$(cat public/frame.html | grep '<base' | sed -E 's/ +<base href="([^"]+)">/\1/;')" ]; then
-            echo "client/public/frame.html's 'base' element refers to the wrong path"
-            echo "Run 'npm run base:production' in the 'client' dir, and push the update as a commit"
-            echo "CI will fail until then"
-            exit 1
-          fi
 
       - name: Build client assets
         if: github.event_name == 'release'
diff --git a/README.md b/README.md
@@ -102,7 +102,6 @@ npm install
 # Use `build:production` and `base:production` if you would like
 # to test the client against the production Try PureScript server.
 npm run build:(dev|production)
-npm run base:(dev|production)
 
 npm run serve # Try PureScript is now available on localhost:8080
 ```
diff --git a/client/config/dev/Try.Config.purs b/client/config/dev/Try.Config.purs
@@ -2,6 +2,9 @@ module Try.Config where
 
 import Prelude
 
+loaderUrl :: String
+loaderUrl = "/js/output"
+
 compileUrl :: String
 compileUrl = "http://localhost:8081"
 
diff --git a/client/config/prod/Try.Config.purs b/client/config/prod/Try.Config.purs
@@ -2,6 +2,9 @@ module Try.Config where
 
 import Prelude
 
+loaderUrl :: String
+loaderUrl = "https://compile.purescript.org/output"
+
 compileUrl :: String
 compileUrl = "https://compile.purescript.org"
 
diff --git a/client/package.json b/client/package.json
@@ -3,15 +3,13 @@
   "private": true,
   "scripts": {
     "clean": "rimraf output",
-    "base:dev": "node setBase.mjs \"dev\"",
-    "base:production": "node setBase.mjs \"prod\"",
     "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",
     "serve": "http-server public/ -o / --cors=\"Access-Control-Allow-Origin: *\" -c-1",
-    "serve:dev": "npm run build:dev && npm run base:dev && npm run serve",
-    "serve:production": "npm run build:production && npm run base:production && npm run serve"
+    "serve:dev": "npm run build:dev && npm run serve",
+    "serve:production": "npm run build:production && npm run serve"
   },
   "devDependencies": {
     "http-server": "^14.1.0",
diff --git a/client/public/frame.html b/client/public/frame.html
@@ -5,8 +5,6 @@
   <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">
-  <!-- Do not edit the base element's 'href' manually. Use the 'base:dev' or 'base:production' script -->
-  <base href="/output/ignored/">
   <script>
     window.esmsInitOptions = {
       // -- Hooks --
@@ -45,7 +43,7 @@
   <!-- 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:es-module-shims@1.5.5/dist/es-module-shims.js" integrity="sha384-Zt+0efULC2q2dftjz0uNzXeTpPVuSLLekXQv9HoRuigkAyLPaUFvPVpYYhu2Xc/t" crossorigin="anonymous"></script>
 
-  <script src="/js/frame.js"></script>
+  <script src="js/frame.js"></script>
 </head>
 <body>
   <main id="main"></main>
diff --git a/client/public/js/frame.js b/client/public/js/frame.js
@@ -5,10 +5,7 @@
     window.addEventListener("message", function(event) {
       parent = event.source;
       parent.postMessage("trypurescript", "*");
-      const code = `
-      ${event.data.code}
-      main();
-      `;
+      const code = event.data.code;
       const scriptEl = document.createElement("script");
       scriptEl.type = "module";
       scriptEl.appendChild(document.createTextNode(code));
diff --git a/client/setBase.mjs b/client/setBase.mjs
diff --git a/client/src/Try/Container.purs b/client/src/Try/Container.purs
@@ -6,16 +6,21 @@ import Ace (Annotation)
 import Control.Monad.Except (runExceptT)
 import Data.Array (fold)
 import Data.Array as Array
-import Data.Either (Either(..))
+import Data.Either (Either(..), either)
 import Data.Foldable (for_, oneOf)
 import Data.FoldableWithIndex (foldMapWithIndex)
 import Data.Maybe (Maybe(..), fromMaybe, isNothing)
 import Data.Symbol (SProxy(..))
+import Data.String as String
+import Data.String (Pattern(..))
+import Data.String.Regex as Regex
+import Data.String.Regex.Flags as RegexFlags
 import Effect (Effect)
 import Effect.Aff (Aff, makeAff)
 import Effect.Aff as Aff
 import Effect.Class.Console (error)
 import Effect.Uncurried (EffectFn3, runEffectFn3)
+import Partial.Unsafe (unsafeCrashWith)
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
@@ -187,7 +192,17 @@ component = H.mkComponent
               _ <- H.query _editor unit $ H.tell $ Editor.SetAnnotations anns
               pure unit
             let
-              eventData = { code: js }
+              importRegex :: Regex.Regex
+              importRegex = either (\_ -> unsafeCrashWith "Invalid regex") identity
+                $ Regex.regex """^import (.+) from "../([^"]+)";$""" RegexFlags.noFlags
+              replacement = "import $1 from \"" <> Config.loaderUrl <> "/$2\";"
+              codeWithRemappedImports = js
+                # String.split (Pattern "\n")
+                # map (Regex.replace importRegex replacement)
+                # String.joinWith "\n"
+
+              -- Actually call the `main` function
+              eventData = { code: codeWithRemappedImports <> "\n\n" <> "main();" }
             H.liftEffect teardownIFrame
             H.liftAff $ makeAff \f -> do
               runEffectFn3 setupIFrame eventData (f (Right unit)) (f (Left $ Aff.error "Could not load iframe"))
diff --git a/deploy/nginx.conf b/deploy/nginx.conf
@@ -86,6 +86,6 @@ server {
     # match to ensure that we only serve JS files.
     location ~ ^/output/(.+\.js)$ {
       add_header Access-Control-Allow-Origin *;
-      alias /var/www/trypurescript/staging/.psci_modules/node_modules/$1;
+      alias /var/www/trypurescript/staging/.psci_modules/$1;
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,6 @@ server {`
`86`	`86`	`# match to ensure that we only serve JS files.`
`87`	`87`	`location ~ ^/output/(.+\.js)$ {`
`88`	`88`	`add_header Access-Control-Allow-Origin *;`
`89`		`- alias /var/www/trypurescript/staging/.psci_modules/node_modules/$1;`
	`89`	`+ alias /var/www/trypurescript/staging/.psci_modules/$1;`
`90`	`90`	`}`
`91`	`91`	`}`