Service Worker Compilation

packages/app-support/transpilation/src/index.ts

@@ -1,57 +1,57 @@
-// import { handleFetch } from './fetch-handler';
+import { handleFetch } from './fetch-handler';
 
-// const worker = self as unknown as ServiceWorkerGlobalScope;
+const worker = self as unknown as ServiceWorkerGlobalScope;
 
-// /**
-//  * For a given glimdown document id, we will compile
-//  * N components within that glimdown, and return an object
-//  * map of an arbitrary name of the default export to the URL
-//  * for which the module may be imported from.
-//  *
-//  * Since the set of modules is uniqueish to the glimdown
-//  * document id, we'll try to keep a history of 10 most recent
-//  * compiles, so that quick edits don't need to do extra work
-//  *
-//  * example:
-//  *
-//  *  POST /compile.sw
-//  *    id: gmd.id,
-//  *    components: [{ name: string, code: string }]
-//  *
-//  *   =>
-//  *
-//  *  {
-//  *    [name] => "url/to/import"
-//  *  }
-//  *
-//  *  which will then turn in to (roughly):
-//  *
-//  *  for (let [name, importPath] of response) {
-//  *    let module = await import(importPath);
-//  *
-//  *    owner.register(`component:${name}`, module);
-//  *  }
-//  *
-//  *  and the <${name} /> will be swapped in to the ember
-//  *  variant of the glimdown for invocation
-//  *
-//  */
-// worker.addEventListener('install', () => {
-//   // force moving on to activation even if another service worker had control
-//   worker.skipWaiting();
-// });
+/**
+ * For a given glimdown document id, we will compile
+ * N components within that glimdown, and return an object
+ * map of an arbitrary name of the default export to the URL
+ * for which the module may be imported from.
+ *
+ * Since the set of modules is uniqueish to the glimdown
+ * document id, we'll try to keep a history of 10 most recent
+ * compiles, so that quick edits don't need to do extra work
+ *
+ * example:
+ *
+ *  POST /compile.sw
+ *    id: gmd.id,
+ *    components: [{ name: string, code: string }]
+ *
+ *   =>
+ *
+ *  {
+ *    [name] => "url/to/import"
+ *  }
+ *
+ *  which will then turn in to (roughly):
+ *
+ *  for (let [name, importPath] of response) {
+ *    let module = await import(importPath);
+ *
+ *    owner.register(`component:${name}`, module);
+ *  }
+ *
+ *  and the <${name} /> will be swapped in to the ember
+ *  variant of the glimdown for invocation
+ *
+ */
+worker.addEventListener('install', () => {
+  // force moving on to activation even if another service worker had control
+  worker.skipWaiting();
+});
 
-// worker.addEventListener('activate', (event) => {
-//   // Claim any clients immediately, so that the page will be under SW control without reloading.
-//   event.waitUntil(worker.clients.claim());
-//   console.info(`\
-//     Service Worker installed successfully!
+worker.addEventListener('activate', (event) => {
+  // Claim any clients immediately, so that the page will be under SW control without reloading.
+  event.waitUntil(worker.clients.claim());
+  console.info(`\
+    Service Worker installed successfully!
 
-//     This service worker is used for compiling JavaScript
-//     and providing modules to the main thread.
-//   `);
-// });
+    This service worker is used for compiling JavaScript
+    and providing modules to the main thread.
+  `);
+});
 
-// worker.addEventListener('fetch', (event) => {
-//   event.respondWith(handleFetch(event));
-// });
+worker.addEventListener('fetch', (event) => {
+  event.respondWith(handleFetch(event));
+});

packages/ember-repl/addon/.gitignore

@@ -2,6 +2,7 @@
 
 # compiled output
 dist/
+dist-sw/
 tmp/
 declarations/
 tests/dummy/declarations/

packages/ember-repl/addon/bin/bin.mjs

@@ -0,0 +1,18 @@
+import assert from "node:assert";
+import { join } from "node:path";
+import fs from "node:fs/promises";
+import url from "node:url";
+
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
+const [, , ...args] = process.argv;
+
+const isInit = args.includes("init");
+
+assert(isInit, `unknown command, only allowed: 'init'`);
+
+const swDir = join(__dirname, "..", "dist-sw");
+
+const target = join(process.cwd(), "public");
+await fs.copyFile(join(swDir, "sw.js"), join(target, "sw.js"));
+await fs.copyFile(join(swDir, "sw.js.map"), join(target, "sw.js.map"));

packages/ember-repl/addon/package.json

@@ -12,6 +12,7 @@
   },
   "license": "MIT",
   "author": "NullVoxPopuli",
+  "bin": "./bin/bin.mjs",
   "typesVersions": {
     "*": {
       "test-support": [
@@ -56,6 +57,7 @@
   "files": [
     "src",
     "dist",
+    "dist-sw",
     "declarations",
     "addon-main.cjs"
   ],
@@ -123,6 +125,8 @@
     "@nullvoxpopuli/limber-untyped": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@tsconfig/ember": "^3.0.2",
     "@types/babel__core": "^7.20.5",
     "@types/babel__standalone": "^7.1.7",

packages/ember-repl/addon/rollup.config.mjs

@@ -1,36 +1,69 @@
 import { babel } from "@rollup/plugin-babel";
-import cjs from "@rollup/plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+import resolve from "@rollup/plugin-node-resolve";
 import { Addon } from "@embroider/addon-dev/rollup";
 import copy from "rollup-plugin-copy";
 import { defineConfig } from "rollup";
 import { execaCommand } from "execa";
 
-const addon = new Addon({
-  srcDir: "src",
-  destDir: "dist",
-});
+const mainThread = new Addon({ srcDir: "src", destDir: "dist" });
+const sw = new Addon({ srcDir: "src/service-worker", destDir: "dist-sw" });
 
-export default defineConfig({
-  output: addon.output(),
-  external: ["@glimmer/compiler", "@glimmer/syntax"],
-  plugins: [
-    addon.publicEntrypoints(["**/*.js"]),
-    addon.appReexports([]),
-    babel({
-      extensions: [".js", ".gjs", ".ts", ".gts"],
-      babelHelpers: "bundled",
-    }),
-    addon.dependencies(),
-    // line-column...
-    cjs(),
-    addon.keepAssets(["build/**/*"]),
-    addon.clean(),
-
-    {
-      async closeBundle() {
-        await execaCommand("tsc --emitDeclarationOnly --noEmit false", { stdio: "inherit" });
-        console.info("Declarations built successfully");
+export default defineConfig([
+  {
+    output: mainThread.output(),
+    external: ["@glimmer/compiler", "@glimmer/syntax"],
+    plugins: [
+      mainThread.publicEntrypoints(["index.js", "compile/formats/**/*.js"]),
+      mainThread.appReexports([]),
+      babel({
+        extensions: [".js", ".gjs", ".ts", ".gts"],
+        babelHelpers: "bundled",
+      }),
+      mainThread.dependencies(),
+      mainThread.keepAssets(["build/**/*"]),
+      {
+        async closeBundle() {
+          await execaCommand("tsc --emitDeclarationOnly --noEmit false", { stdio: "inherit" });
+          console.info("Declarations built successfully");
+        },
       },
+    ],
+  },
+  {
+    output: {
+      file: "dist-sw/sw.js",
+      format: "es",
+      sourcemap: true,
     },
-  ],
-});
+    plugins: [
+      sw.publicEntrypoints(["sw.js"]),
+      babel({
+        extensions: [".ts"],
+        babelHelpers: "bundled",
+      }),
+      resolve(),
+      terser({
+        mangle: false,
+        format: {
+          semicolons: false,
+          ecma: 2022,
+        },
+        compress: {
+          module: true,
+          passes: 4,
+          unsafe_math: true,
+          hoist_funs: true,
+          conditionals: true,
+          drop_debugger: true,
+          evaluate: true,
+          reduce_vars: true,
+          side_effects: true,
+          dead_code: true,
+          defaults: true,
+          unused: true,
+        },
+      }),
+    ],
+  },
+]);

packages/ember-repl/addon/src/compile/utils.ts

@@ -1,5 +1,3 @@
-import { assert } from '@ember/debug';
-
 import { pascalCase } from 'change-case';
 import { v5 as uuidv5 } from 'uuid';
 
@@ -29,12 +27,7 @@ export function nameFor(code: string, prefix = DEFAULT_PREFIX) {
  * case in REPLs / Playgrounds for the "root" component.
  */
 export function invocationOf(name: string) {
-  assert(
-    `You must pass a name to invocationOf. Received: \`${name}\``,
-    typeof name === 'string' && name.length > 0
-  );
-
-  if (name.length === 0) {
+  if (name?.length === 0) {
     throw new Error(`name passed to invocationOf must have non-0 length`);
   }