Update to 0.15.0; use ES Module Shims

.github/workflows/ci.yml

@@ -72,6 +72,7 @@ jobs:
           npm run build
           npm run test
           npm run build:production
+          npm run base:production
 
       - 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

@@ -103,8 +103,7 @@ npm install
 # Try PureScript server.
 npm run build:(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,7 +5,59 @@
   <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:prod' script -->
+  <base href="/js/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>
+
+  <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"></script>
 </head>
 <body>
 <main id="main"></main>

client/public/js/frame.js

@@ -1,41 +1,29 @@
 (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;
 
+  // Ensures `main` is only called once.
+  this.window.runCount = 0;
+
   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}
+      if (window.runCount === 0) {
+        main();
+        // bump runCount to ensure we don't re-run this.
+        window.runCount = 1;
+      }`;
+      const scriptEl = document.createElement("script");
+      scriptEl.type = "module";
+      // See https://stackoverflow.com/a/6433770
+      try {
+        scriptEl.appendChild(document.createTextNode(code));
+      } catch (e) {
+        scriptEl.text = code;
+      } finally {
+        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