@inkandswitch/patchwork-bootloader 0.0.8 → 0.1.0

package/src/setup.ts

@@ -1,9 +1,15 @@
-import type { SetupServiceWorkerOptions } from "./types.js";
+import type {
+  ServiceWorkerRepoChannelListener,
+  SetupServiceWorkerOptions,
+  SetupServiceWorkerResult,
+} from "./types.js";
 import debug from "debug";
 
 const debugging = debug.enabled("patchwork:serviceworker");
 
 const key = "patchworkServiceWorkerCacheVersion";
+let nextRepoChannelId = 0;
+let serviceWorkerInstanceId: string | undefined;
 
 function bumpServiceWorkerCacheVersion() {
   const version = new Date().valueOf().toString(36);
@@ -40,6 +46,21 @@ export function bumpServiceWorkerCache(
 
 (window as any).bumpServiceWorkerCache = bumpServiceWorkerCache;
 
+function configureServiceWorker(sw: ServiceWorker | null) {
+  if (!sw) return;
+  sw.postMessage({ type: "debug", debug: debugging });
+  const cachename = getServiceWorkerCacheVersion();
+  if (cachename) sw.postMessage({ type: "cachename", cachename });
+}
+
+function updateServiceWorkerInstanceId(next: unknown) {
+  if (typeof next !== "string") return false;
+  const changed =
+    serviceWorkerInstanceId != null && serviceWorkerInstanceId !== next;
+  serviceWorkerInstanceId = next;
+  return changed;
+}
+
 /** Wait for a registration to have an active worker */
 function waitForActive(reg: ServiceWorkerRegistration): Promise<ServiceWorker> {
   if (reg.active) return Promise.resolve(reg.active);
@@ -53,35 +74,136 @@ function waitForActive(reg: ServiceWorkerRegistration): Promise<ServiceWorker> {
   });
 }
 
+async function openRepoChannel(): Promise<{
+  port: MessagePort;
+  workerInstanceChanged: boolean;
+}> {
+  const controller = navigator.serviceWorker.controller;
+  if (!controller) {
+    throw new Error("no service worker controller");
+  }
+
+  // Send a MessagePort so the SW's repo can sync with clients, and wait for
+  // the SW to confirm its repo is constructed before returning. The
+  // MessageChannel adapter's whenReady() force-resolves after 100ms regardless
+  // of the other end's state, so it can't be used as a real readiness signal
+  // on first install (when the SW still has to fetch wasm and build its repo).
+  const id = ++nextRepoChannelId;
+  let workerInstanceChanged = false;
+  const { port1, port2 } = new MessageChannel();
+  const swReady = new Promise<void>((resolve, reject) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    const cleanup = () => {
+      clearTimeout(timeout);
+      navigator.serviceWorker.removeEventListener("message", listener);
+    };
+    const listener = (event: MessageEvent) => {
+      if (event.data?.id != null && event.data.id !== id) return;
+      if (event.data?.type === "port-ready") {
+        workerInstanceChanged = updateServiceWorkerInstanceId(
+          event.data.workerInstanceId
+        );
+        cleanup();
+        resolve();
+      } else if (event.data?.type === "port-failed") {
+        workerInstanceChanged = updateServiceWorkerInstanceId(
+          event.data.workerInstanceId
+        );
+        cleanup();
+        reject(new Error(`service worker init failed: ${event.data.error}`));
+      }
+    };
+    navigator.serviceWorker.addEventListener("message", listener);
+    // Failsafe: don't block boot forever if the SW never replies. Surface the
+    // issue and let the rest of the site come up rather than hanging on a
+    // blank page.
+    timeout = setTimeout(() => {
+      cleanup();
+      reject(new Error("service worker port-ready timeout"));
+    }, 30_000);
+  });
+  controller.postMessage({ type: "port", id }, [port2]);
+  try {
+    await swReady;
+  } catch (err) {
+    console.warn(
+      "proceeding without SW ready ack:",
+      err instanceof Error ? err.message : err
+    );
+  }
+  return { port: port1, workerInstanceChanged };
+}
+
 export default async function setupServiceWorker(
   options?: SetupServiceWorkerOptions
-) {
-  // Backwards compat: if an old service worker sends handoff "request" messages,
-  // immediately reject them so its fetch handler doesn't hang forever.
-  navigator.serviceWorker.addEventListener("message", (event) => {
-    if (event.data?.type === "request" && event.data.id != null) {
-      navigator.serviceWorker.controller?.postMessage({
-        type: "response",
-        id: event.data.id,
-        response: {
-          body: "service worker upgraded, please refresh",
-          status: 503,
-          headers: { "content-type": "text/plain" },
-        },
-      });
+): Promise<SetupServiceWorkerResult> {
+  const repoChannelListeners = new Set<ServiceWorkerRepoChannelListener>();
+  let reconnectPromise: Promise<void> | null = null;
+
+  const reconnectRepoChannels = (reason: string) => {
+    if (reconnectPromise) return reconnectPromise;
+    reconnectPromise = (async () => {
+      console.info(
+        `%cservice worker ${reason}, reconnecting repo channels...`,
+        "color: pink; font-weight: bold"
+      );
+      configureServiceWorker(navigator.serviceWorker.controller);
+      for (const listener of repoChannelListeners) {
+        try {
+          const { port } = await openRepoChannel();
+          await listener(port);
+        } catch (err) {
+          console.error("service worker repo channel listener failed", err);
+        }
+      }
+    })().finally(() => {
+      reconnectPromise = null;
+    });
+    return reconnectPromise;
+  };
+
+  const pingServiceWorker = async () => {
+    const controller = navigator.serviceWorker.controller;
+    if (!controller) return;
+    const { port1, port2 } = new MessageChannel();
+    const pong = new Promise<unknown>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        port1.close();
+        reject(new Error("service worker pong timeout"));
+      }, 5_000);
+      port1.onmessage = (event) => {
+        clearTimeout(timeout);
+        port1.close();
+        resolve(event.data?.workerInstanceId);
+      };
+    });
+    controller.postMessage({ type: "ping" }, [port2]);
+    try {
+      const restarted = updateServiceWorkerInstanceId(await pong);
+      if (restarted) {
+        await reconnectRepoChannels("restarted");
+      }
+    } catch (err) {
+      console.warn(
+        "service worker ping failed:",
+        err instanceof Error ? err.message : err
+      );
     }
-  });
+  };
 
   const path = options?.path ?? "/service-worker.js";
+  // No controller at this point means the page loaded without a service
+  // worker — i.e. this is a first-time install (or a hard reload). Wait for
+  // activation so the app boots with the SW in control of generated fetches.
   const reg = await navigator.serviceWorker.register(path, { type: "module" });
 
   // If there's an update waiting or installing, wait for it to activate
+  let active = reg.active;
   if (reg.installing || reg.waiting) {
-    await waitForActive(reg);
+    active = await waitForActive(reg);
   }
 
-  const active = reg.active!;
-  active.postMessage({ type: "debug", debug: debugging });
+  configureServiceWorker(active);
 
   // Wait for the controller to be available
   if (!navigator.serviceWorker.controller) {
@@ -94,25 +216,20 @@ export default async function setupServiceWorker(
     });
   }
 
-  // Send a MessagePort so the SW's repo can sync with clients
-  const { port1, port2 } = new MessageChannel();
-  navigator.serviceWorker.controller!.postMessage({ type: "port" }, [port2]);
-
   // Keepalive — Chromium idles out service workers after ~30s of inactivity,
   // which tears down the in-memory Repo and forces a cold restart on the next
-  // fetch. Send a ping every 20s while the page is visible to keep it warm.
+  // fetch. Ping through a MessageChannel so we can detect when a restarted SW
+  // has a new in-memory Repo and reconnect all repo channels.
   setInterval(() => {
-    navigator.serviceWorker.controller?.postMessage({ type: "ping" });
+    void pingServiceWorker();
   }, 20_000);
 
-  // Reload on future SW updates (added after setup so the initial
-  // activation doesn't trigger a reload loop).
+  // Reconnect on future SW updates (added after setup so the initial
+  // activation doesn't notify before callers subscribe).
   navigator.serviceWorker.addEventListener("controllerchange", function () {
-    console.info(
-      "%cnew service worker took control, reloading...",
-      "color: pink; font-weight: bold"
-    );
-    location.reload();
+    void reconnectRepoChannels("took control").catch((err) => {
+      console.error("service worker reconnect failed", err);
+    });
   });
 
   console.log(
@@ -120,5 +237,20 @@ export default async function setupServiceWorker(
     "background: #fcf2f0; color: #333; border: 2px solid; border-radius: 4px"
   );
 
-  return { port: port1 };
+  return {
+    async subscribeToRepoChannel(listener) {
+      const { port, workerInstanceChanged } = await openRepoChannel();
+      if (workerInstanceChanged) {
+        await reconnectRepoChannels("restarted");
+      }
+      repoChannelListeners.add(listener);
+      try {
+        await listener(port);
+      } catch (err) {
+        repoChannelListeners.delete(listener);
+        throw err;
+      }
+      return () => repoChannelListeners.delete(listener);
+    },
+  };
 }

package/src/site.ts

@@ -44,11 +44,15 @@ import {
   getRegistry,
   registerPlugins,
   resolveAccountHandle,
+  unregisterPlugins,
 } from "@inkandswitch/patchwork-plugins";
 import * as plugins from "@inkandswitch/patchwork-plugins";
 
 import setupServiceWorker from "./setup.js";
+import type { ServiceWorkerRepoChannelListener } from "./types.js";
 import { SwLogReader } from "./sw-logger.js";
+import debug from "debug";
+const log = debug("patchwork:bootloader:site");
 
 declare global {
   interface Window {
@@ -56,10 +60,9 @@ declare global {
     Automerge: typeof import("@automerge/automerge");
     AutomergeRepo: typeof import("@automerge/automerge-repo");
     repo: Repo;
-    getRepoChannel: () => MessagePort;
     patchwork: {
       repo: Repo;
-      modules: ModuleWatcher;
+      packages: ModuleWatcher;
       plugins: typeof plugins;
       accountDocHandle: DocHandle<AccountDoc>;
       sw: {
@@ -67,6 +70,9 @@ declare global {
         tailLogs: (n?: number) => ReturnType<typeof SwLogReader.tail>;
         exportLogs: () => Promise<string>;
         clearLogs: () => Promise<void>;
+        subscribeToRepoChannel: (
+          listener: ServiceWorkerRepoChannelListener
+        ) => Promise<() => void>;
       };
     };
     uncache: (match: string) => Promise<void>;
@@ -125,6 +131,11 @@ const DEFAULT_REMOTE_STORAGE_ID =
 const BIG_PATCHWORK_HASH_REGEX =
   /(?<title>[A-Za-z0-9-]+)--(?<docId>[1-9A-HJ-NP-Za-km-z]+)(?<type>\?=[^&?]+)?/;
 
+const [automergeWasm, subductionWasm] = await Promise.all([
+  fetch("/automerge.wasm?main").then((r) => r.bytes()),
+  fetch("/subduction.wasm").then((r) => r.bytes()),
+]);
+
 /**
  * Boot a Patchwork browser site.
  *
@@ -138,12 +149,8 @@ export async function bootPatchworkSite(
   config: SiteConfig
 ): Promise<BootResult> {
   const defaultModulesUrl = resolveDefaultModulesUrl(config.defaultModulesUrl);
-
-  // Fetch both Wasm binaries in parallel, then compile
-  const [automergeWasm, subductionWasm] = await Promise.all([
-    fetch("/automerge.wasm").then((r) => r.bytes()),
-    fetch("/subduction.wasm").then((r) => r.bytes()),
-  ]);
+  showLoadingAnimation();
+  log(`booting`, config);
   await initializeWasm(automergeWasm);
   initSubductionSync(subductionWasm);
 
@@ -153,16 +160,26 @@ export async function bootPatchworkSite(
       return peerId.includes("service-worker");
     },
     enableRemoteHeadsGossiping: true,
+    peerId:
+      `${config.titleSuffix}-tab-${crypto.randomUUID()}` as AutomergeRepo.PeerId,
   });
+
   repo.subscribeToRemotes(
     config.remoteStorageIds ?? [DEFAULT_REMOTE_STORAGE_ID]
   );
 
   const sw = await setupServiceWorker();
   if (!sw) throw new Error("Failed to set up service worker");
-  const net = new MessageChannelNetworkAdapter(sw.port);
-  repo.networkSubsystem.addNetworkAdapter(net);
-  await net.whenReady();
+  let activeServiceWorkerPort: MessagePort | undefined;
+  const connectServiceWorkerPort = async (port: MessagePort) => {
+    const previousPort = activeServiceWorkerPort;
+    activeServiceWorkerPort = port;
+    const net = new MessageChannelNetworkAdapter(port);
+    repo.networkSubsystem.addNetworkAdapter(net);
+    await net.whenReady();
+    previousPort?.close();
+  };
+  await sw.subscribeToRepoChannel(connectServiceWorkerPort);
 
   installDevConsoleGlobals(repo);
   registerPatchworkViewElement({ repo });
@@ -173,8 +190,9 @@ export async function bootPatchworkSite(
   // is added lazily once it appears on the account doc — see below.
   const moduleWatcher = new ModuleWatcher(
     repo,
-    [defaultModulesUrl],
-    onModuleLoaded
+    { system: defaultModulesUrl },
+    onModuleLoaded,
+    unregisterPlugins
   );
 
   const accountDocHandle = await resolveAccountHandle(repo, {
@@ -197,10 +215,13 @@ export async function bootPatchworkSite(
 
   window.patchwork = {
     repo,
-    modules: moduleWatcher,
+    packages: moduleWatcher,
     plugins,
     accountDocHandle,
-    sw: buildSwLogApi(),
+    sw: {
+      ...buildSwLogApi(),
+      subscribeToRepoChannel: sw.subscribeToRepoChannel,
+    },
   };
   window.uncache = uncache;
 
@@ -238,23 +259,18 @@ function installDevConsoleGlobals(repo: Repo): void {
   window.repo = repo;
   window.Automerge = Automerge;
   window.AutomergeRepo = AutomergeRepo;
-  window.getRepoChannel = () => {
-    const { port1, port2 } = new MessageChannel();
-    navigator.serviceWorker.controller!.postMessage({ type: "port" }, [port2]);
-    return port1;
-  };
 }
 
 function onModuleLoaded(name: string, mod: any): void {
   if (Array.isArray(mod.plugins)) {
-    console.log(
-      `[site] registering ${mod.plugins.length} plugin(s) from ${name.slice(0, 30)}...`,
+    log(
+      `registering ${mod.plugins.length} plugin(s) from ${name.slice(0, 30)}...`,
       mod.plugins.map((p: any) => `${p.type}:${p.id}`)
     );
     registerPlugins(mod.plugins, name);
   } else {
     console.warn(
-      `[site] module ${name.slice(0, 30)}... has no plugins array`,
+      `module ${name.slice(0, 30)}... has no plugins array`,
       Object.keys(mod)
     );
   }
@@ -272,7 +288,7 @@ function wireModuleSettingsWhenReady(
   const wire = () => {
     const url = accountDocHandle.doc()?.moduleSettingsUrl;
     if (!url) return;
-    void moduleWatcher.addUrl(url);
+    void moduleWatcher.addUrl("user", url);
     accountDocHandle.off("change", wire);
   };
   wire();
@@ -291,7 +307,6 @@ function primeRootElement(
   accountDocHandle: DocHandle<AccountDoc>
 ): void {
   rootElement.style.visibility = "hidden";
-  showLoadingAnimation();
 
   const initialParams = new URLSearchParams(location.hash.slice(1));
   if (initialParams.has("frame")) {
@@ -312,26 +327,29 @@ function logToolRegistryWhenLoaded(moduleWatcher: ModuleWatcher): void {
     .then(() => {
       const toolReg = getRegistry("patchwork:tool");
       const tools = toolReg.all();
-      console.log(
-        `[site] doneLoading: ${tools.length} tools registered:`,
+      log(
+        `doneLoading: ${tools.length} tools registered:`,
         tools.map((t: any) => t.id)
       );
     })
     .catch((err: unknown) => {
-      console.error("[site] doneLoading rejected:", err);
+      console.error("doneLoading rejected:", err);
     });
 }
 
-function buildSwLogApi(): Window["patchwork"]["sw"] {
+function buildSwLogApi(): Omit<
+  Window["patchwork"]["sw"],
+  "subscribeToRepoChannel"
+> {
   return {
     printLogs: async (n = 200) => {
       const entries = await SwLogReader.tail(n);
       for (const e of entries) {
         const prefix = `[${e.ts}] [${e.level}]`;
-        if (e.data !== undefined) console.log(prefix, e.msg, e.data);
-        else console.log(prefix, e.msg);
+        if (e.data !== undefined) log(prefix, e.msg, e.data);
+        else log(prefix, e.msg);
       }
-      console.log(`--- ${entries.length} entries ---`);
+      log(`--- ${entries.length} entries ---`);
     },
     tailLogs: (n = 200) => SwLogReader.tail(n),
     exportLogs: () => SwLogReader.exportAll(),
@@ -363,6 +381,10 @@ function showLoadingAnimation(): void {
           radial-gradient(ellipse 65% 55% at 50% 50%, #f1e6f6, transparent 80%);
         animation: pw-bootloader-pulse 3.5s ease-in-out infinite;
         transition: opacity 0.6s ease-out;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
       }
       @media (prefers-color-scheme: dark) {
         #${LOADING_ELEMENT_ID} {

package/src/types.ts

@@ -5,3 +5,13 @@ export type SetupServiceWorkerOptions = {
    */
   path?: string;
 };
+
+export type ServiceWorkerRepoChannelListener = (
+  port: MessagePort
+) => void | Promise<void>;
+
+export type SetupServiceWorkerResult = {
+  subscribeToRepoChannel: (
+    listener: ServiceWorkerRepoChannelListener
+  ) => Promise<() => void>;
+};