Update to 0.15.0; use ES Module Shims (#275)

* Update changelog for last release

* Update purescript deps for 0.15.2; drop cst dep

* Upgrade to latest pkg set; install entire set

* Get server code to compile

* Use ES Modules Shims for iframe shims

* Add serve:production script

* Add instructions for adding shims to import map

* Doc how to calc integrity hash

* Fix infinite invocation of `main` call

* Update base to production; fail CI if not that

* Update readme instructions

Author: JordanMartinez

.github/workflows/ci.yml

@@ -72,6 +72,12 @@ 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'

CHANGELOG.md

@@ -4,6 +4,16 @@ Notable changes to this project are documented in this file. The format is based
 
 ## [Unreleased]
 
+Breaking changes:
+
+New features:
+
+Bugfixes:
+
+Other improvements:
+
+## [v2022-02-25.1](https://github.com/purescript/trypurescript/releases/tag/v2022-02-25.1)
+
 Breaking changes:
 - Update compiler to v0.14.7 (#271 by @JordanMartinez)
 

README.md

@@ -96,15 +96,15 @@ ln -s "$PWD/output" "$PWD/../client/public/js/output"
 cd client
 npm install
 
-# Use `build:dev` if you are using a local Try PureScript server, e.g. you
-# followed the instructions in step 1.
+# Use `build:dev` and `base:dev` if you are using a local Try PureScript server,
+# e.g. you followed the instructions in step 1.
 #
-# Use `build:production` if you would like to test the client against the production
-# Try PureScript server.
+# 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)
 
-cd public
-npx http-server # Try PureScript is now available on localhost:8080
+npm run serve # Try PureScript is now available on localhost:8080
 ```
 
 ### 4. Choosing a Tag

RELEASE.md

@@ -39,3 +39,21 @@ Update the package set by doing the following:
         ```
         $ spago ls packages | cut -f 1 -d ' ' | xargs spago install
         ```
+
+4. If any packages need NPM dependencies, you can try adding their shims to the import map in `client/public/frame.html`
+    - Open up the `generator.jspm.io` URL in the comment
+    - Use the 'Add Dependency' search bar to find the NPM dependency
+        - If it exists but doesn't exist in that CDN, you can try another one or [open an issue on `jspm/project`](https://github.com/jspm/project#issue-queue-for-the-jspm-cdn)
+    - Update the version to the one you need once added
+    - If needed, include other files from that dependency
+    - Copy and paste the content into the `client/public/frame.html` file
+    - Ensure `es-module-shims` has version `1.5.5` or greater.
+
+5. If `es-module-shims` releases a new version, you can calculate its SHA-384 via
+
+        ```console
+        $ ESM_VERSION=1.5.5
+        $ curl -L -o es-module-shims.js "https://ga.jspm.io/npm:es-module-shims@$ESM_VERSION/dist/es-module-shims.js"
+        $ echo "sha384-$(openssl dgst -sha384 -binary es-module-shims.js | openssl base64 -A)"
+        $ rm es-module-shims.js
+        ```

client/config/dev/Try.Config.purs

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

client/config/prod/Try.Config.purs

@@ -2,9 +2,6 @@ module Try.Config where
 
 import Prelude
 
-loaderUrl :: String
-loaderUrl = "https://compile.purescript.org/output"
-
 compileUrl :: String
 compileUrl = "https://compile.purescript.org"
 

client/package.json

@@ -3,12 +3,18 @@
   "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"
+    "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"
   },
   "devDependencies": {
+    "http-server": "^14.1.0",
     "purescript": "^0.13.6",
     "purescript-psa": "^0.7.3",
     "rimraf": "^2.5.4",

client/public/frame.html

@@ -5,9 +5,49 @@
   <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>
+  <!-- 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 --
+      // 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-Zt+0efULC2q2dftjz0uNzXeTpPVuSLLekXQv9HoRuigkAyLPaUFvPVpYYhu2Xc/t" crossorigin="anonymous"></script>
+
+  <script src="/js/frame.js"></script>
 </head>
 <body>
-<main id="main"></main>
+  <main id="main"></main>
 </body>
 </html>

client/public/js/frame.js

@@ -1,42 +1,18 @@
 (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 code = `
+      ${event.data.code}
+      main();
+      `;
+      const scriptEl = document.createElement("script");
+      scriptEl.type = "module";
+      scriptEl.appendChild(document.createTextNode(code));
+      document.body.appendChild(scriptEl);
     }, { once: true });
   }, { once: true });
 

client/setBase.mjs

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+import path from "path";
+import fs from "fs";
+import process from "process";
+
+const filePath = path.join("public", "frame.html");
+
+// PureScript generates JS with the following import lines:
+//    `import * as Data_Foo from "../Data.Foo/index.js"
+// To remap `../Data.Foo/index.js` to `output/Data.Foo/index.js`
+// we append `/ignored/`.
+//
+// This:    `/output/ignored/../Data.Foo/index.js`
+// becomes: `/output/Data.Foo/index.js`
+const prodPath = "/output/ignored/"
+const devPath = "/js/output/ignored/"
+
+const environment = process.argv[2] || "dev";
+const baseHref = environment === "prod" ? prodPath : devPath;
+
+const frameHtml = fs.readFileSync(filePath, "utf-8");
+const newHtml = frameHtml
+  .split("\n")
+  .map((line) => line.replace(/^( *<base href=")[^"]*(".+)$/, `$1${baseHref}$2`))
+  .join("\n");
+
+fs.writeFileSync(filePath, newHtml);

client/src/Try/Container.purs

@@ -16,8 +16,6 @@ import Effect.Aff (Aff, makeAff)
 import Effect.Aff as Aff
 import Effect.Class.Console (error)
 import Effect.Uncurried (EffectFn3, runEffectFn3)
-import Foreign.Object (Object)
-import Foreign.Object as Object
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
@@ -29,10 +27,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 +79,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 } LoadCb FailCb Unit
 foreign import teardownIFrame :: Effect Unit
 
 component :: forall q i o. H.Component HH.HTML q i o Aff
@@ -189,22 +182,17 @@ 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 }
+            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