@inkandswitch/patchwork-bootloader 0.3.1 → 0.4.0

package/src/service-worker.ts

@@ -13,10 +13,13 @@ import {
   type HandoffRequestMessage,
 } from "./types.js";
 
-let cachename = "default";
+const DEFAULT_CACHE_NAME = "patchwork";
+
+let cachename = DEFAULT_CACHE_NAME;
 let debugging = false;
 
-const cacheableStatuses = [200, 203, 204];
+// 0 is an opaque response, that also needs cached
+const cacheableStatuses = [0, 200, 203, 204];
 
 // The automerge worker times its own resolution out after 30s and replies
 // with an error, so this only fires when nobody is listening at all.
@@ -82,22 +85,19 @@ self.addEventListener("install", (event) => {
   (event as ExtendableEvent).waitUntil(self.skipWaiting());
 });
 
-async function clearOldCaches() {
-  const cacheWhitelist = [cachename];
-  const cacheNames = await caches.keys();
-  const deletePromises = cacheNames.map((cacheName) => {
-    if (!cacheWhitelist.includes(cacheName)) {
-      return caches.delete(cacheName);
-    }
-  });
-  await Promise.all(deletePromises);
+async function clearOtherCaches() {
+  await Promise.all(
+    (await caches.keys()).map((cacheName) => {
+      if (cacheName !== cachename) return caches.delete(cacheName);
+    })
+  );
 }
 
 self.addEventListener("activate", (event) => {
   lifecycle("info", "activate (claiming clients)");
   (event as ExtendableEvent).waitUntil(
     (async () => {
-      await clearOldCaches();
+      await clearOtherCaches();
       await self.clients.claim();
       // Pre-cache pages of already-open clients so they survive going offline
       // before the next navigation.
@@ -110,7 +110,7 @@ self.addEventListener("activate", (event) => {
             if (!existing) {
               const response = await fetch(client.url);
               if (cacheableStatuses.includes(response.status)) {
-                await cache.put(client.url, response);
+                await cachePage(cache, client.url, response);
               }
             }
           } catch {
@@ -128,11 +128,19 @@ self.addEventListener("message", async (event) => {
     if (cachename == nextCachename) {
       return;
     }
-    console.info(
-      `deleting ${cachename} and setting cache name to ${nextCachename}`
-    );
-    caches.delete(cachename);
+    console.info(`moving from cache ${cachename} to ${nextCachename}`);
+    if (cachename === DEFAULT_CACHE_NAME) {
+      const defaultCache = await caches.open(cachename);
+      const nextCache = await caches.open(nextCachename);
+      await Promise.all(
+        (await defaultCache.keys()).map(async (request) => {
+          const response = await defaultCache.match(request);
+          if (response) await nextCache.put(request, response);
+        })
+      );
+    }
     cachename = nextCachename;
+    await clearOtherCaches();
   } else if (event.data.type == "debug") {
     debugging = event.data.debug;
     log("serviceworker debugging enabled");
@@ -216,20 +224,47 @@ function handoff(
   });
 }
 
-function withSpecialHeaders(response: {
+function makeResponse(response: {
   body?: BodyInit | ReadableStream<Uint8Array> | null;
   status?: number;
   headers?: HeadersInit;
 }): Response {
-  const headers = new Headers(response.headers);
-  headers.set("cross-origin-embedder-policy", "credentialless");
-  headers.set("cross-origin-resource-policy", "cross-origin");
   return new Response(response.body ?? null, {
     status: response.status ?? 200,
-    headers,
+    headers: response.headers,
   });
 }
 
+function indexRequestFor(request: Request | string): Request | undefined {
+  const url = new URL(typeof request === "string" ? request : request.url);
+  if (url.origin !== self.location.origin) return undefined;
+  url.pathname = "/index.html";
+  url.search = "";
+  url.hash = "";
+  return new Request(url.href);
+}
+
+function rootRequestFor(request: Request | string): Request | undefined {
+  const url = new URL(typeof request === "string" ? request : request.url);
+  if (url.origin !== self.location.origin) return undefined;
+  url.pathname = "/";
+  url.search = "";
+  url.hash = "";
+  return new Request(url.href);
+}
+
+async function cachePage(
+  cache: Cache,
+  request: Request | string,
+  response: Response
+) {
+  const indexRequest = indexRequestFor(request);
+  if (indexRequest) await cache.put(indexRequest, response.clone());
+  const rootRequest = rootRequestFor(request);
+  if (rootRequest) await cache.put(rootRequest, response.clone());
+  await cache.put(request, response);
+}
+
 // ── Fetch handler ──────────────────────────────────────────────────────
 
 self.addEventListener("fetch", (fetchEvent: FetchEvent) => {
@@ -260,7 +295,7 @@ self.addEventListener("fetch", (fetchEvent: FetchEvent) => {
         if (handoffURL) {
           if (match) {
             log(`serving ${handoffURL} from cache ${cachename}`);
-            return withSpecialHeaders(match);
+            return match;
           }
 
           log(`handing ${handoffURL} off to the automerge worker`);
@@ -271,7 +306,7 @@ self.addEventListener("fetch", (fetchEvent: FetchEvent) => {
           if (reply.type === "response") {
             // errors, redirects and other things that shouldn't be cached
             log(`serving handed-off response for ${handoffURL}`, reply);
-            return withSpecialHeaders(reply.response);
+            return makeResponse(reply.response);
           }
 
           // reply.type === "cached": the automerge worker has put the
@@ -284,26 +319,51 @@ self.addEventListener("fetch", (fetchEvent: FetchEvent) => {
             );
           }
           log(`serving ${handoffURL} from cache ${cachename} after handoff`);
-          return withSpecialHeaders(cached);
+          return cached;
         } else {
-          const response = await fetch(request).catch(() => null);
-          if (response) {
+          // fetch() rejects on network error / abort rather than resolving;
+          // keep the error so we can surface it in the 503 body below.
+          const result = await fetch(request).catch((error: unknown) =>
+            error instanceof Error ? error : new Error(String(error))
+          );
+          if (result instanceof Response) {
+            const response = result;
+            // Tool subresources (<link>/<script>) are requested from srcdoc
+            // frames whose origin is "null", so they come back as opaque
+            // cross-origin `no-cors` responses: status 0 and an empty url. They
+            // render fine while online but were being excluded from the cache,
+            // so e.g. a theme stylesheet vanished on an offline refresh. Opaque
+            // responses are cacheable and replay to the same no-cors consumer,
+            // so treat status 0 as cacheable and gate the scheme on request.url
+            // (an opaque response's own url is "").
             if (
-              cacheableStatuses.includes(response.status) &&
-              response.url.match(/^https?\:/)
+              (response.status === 0 ||
+                cacheableStatuses.includes(response.status)) &&
+              /^https?:/.test(request.url)
             ) {
-              await cache.put(request, response.clone()).catch((error) => {
+              const cachedResponse = response.clone();
+              await (
+                request.mode === "navigate" ||
+                request.destination === "document"
+                  ? cachePage(cache, request, cachedResponse)
+                  : cache.put(request, cachedResponse)
+              ).catch((error) => {
                 log(`error caching ${request.url} in ${cachename}`, error);
               });
             } else {
               log(
-                `skipping uncacheable response code from cache: ${response.status} for ${response.url}`
+                `skipping uncacheable response code from cache: ${response.status} for ${request.url}`
               );
             }
             return response;
           }
           if (match) return match;
-          return new Response("couldnt fetch and no stale", { status: 503 });
+          return new Response(
+            `couldnt fetch ${request.url} and no stale copy in ${cachename}\n\n${
+              result.stack ?? result.message
+            }`,
+            { status: 503, headers: { "content-type": "text/plain" } }
+          );
         }
       } catch (error) {
         const message =

package/src/setup.ts

@@ -2,12 +2,17 @@ import type {
   ServiceWorkerRepoChannelListener,
   SetupServiceWorkerOptions,
   SetupServiceWorkerResult,
+  SyncStateDocMessage,
 } from "./types.js";
 import {
   readClassicSyncServer,
   DEFAULT_CLASSIC_SYNC_SERVER,
 } from "./sync-config.js";
 import debug from "debug";
+import {
+  donatePort,
+  isWorkerErrorMessage,
+} from "@automerge/automerge-repo/worker-port";
 
 const serviceWorkerDebugging = debug.enabled("patchwork:serviceworker");
 const workerDebugging = debug.enabled("patchwork:automergeworker");
@@ -41,6 +46,7 @@ function installServiceWorkerLogForwarding(): void {
 }
 
 const key = "patchworkServiceWorkerCacheVersion";
+const defaultServiceWorkerCacheName = "patchwork";
 let nextRepoChannelId = 0;
 
 function bumpServiceWorkerCacheVersion() {
@@ -53,19 +59,13 @@ function getServiceWorkerCacheVersion() {
   return localStorage.getItem(key);
 }
 
-function getOrCreateServiceWorkerCacheVersion() {
-  const existing = getServiceWorkerCacheVersion();
-  if (existing) return existing;
-  return bumpServiceWorkerCacheVersion();
-}
-
 function setServiceWorkerCacheName(sw: ServiceWorker | null) {
   if (!sw) {
     throw new Error("no service worker!");
   }
   sw.postMessage({
     type: "cachename",
-    cachename: getOrCreateServiceWorkerCacheVersion(),
+    cachename: getServiceWorkerCacheVersion() ?? defaultServiceWorkerCacheName,
   });
 }
 
@@ -81,8 +81,10 @@ export function bumpServiceWorkerCache(
 function configureServiceWorker(sw: ServiceWorker | null) {
   if (!sw) return;
   sw.postMessage({ type: "debug", debug: serviceWorkerDebugging });
-  const cachename = getServiceWorkerCacheVersion();
-  if (cachename) sw.postMessage({ type: "cachename", cachename });
+  sw.postMessage({
+    type: "cachename",
+    cachename: getServiceWorkerCacheVersion() ?? defaultServiceWorkerCacheName,
+  });
 }
 
 // ── The automerge worker ───────────────────────────────────────────────
@@ -95,9 +97,42 @@ function configureServiceWorker(sw: ServiceWorker | null) {
 let automergeWorkerPath = "/automerge-worker.js";
 let automergeWorker: SharedWorker | undefined;
 
+// SharedWorker proxy entry that owns the subduction WebSocket. Chrome can't
+// spawn workers from inside a SharedWorker, so each tab offers this proxy's
+// port to the automerge worker (which requests one via its port provider).
+// Being a SharedWorker itself, the proxy — and the donated worker↔worker
+// port — outlives the donor tab. Emitted at /packages/... via externals.ts.
+const SUBDUCTION_IO_WORKER_URL =
+  "/packages/@automerge/automerge-repo/subduction-websocket-worker-shared.js";
+
+// Bench toggles for the subduction socket (see getSubductionEndpoints in
+// automerge-worker.ts), passed as query params because SharedWorker scope
+// has no localStorage — which also gives each configuration its own worker
+// instance, so bench arms can't share state.
+//   localStorage["patchwork:ws-mode"] = "inline"  → socket on worker thread
+//   localStorage["patchwork:ws-window"] = "16"    → WorkerWebSocketEndpoint
+//                                                    windowFrames override
+function workerBenchParams(): string {
+  const params = new URLSearchParams();
+  try {
+    for (const [key, param] of [
+      ["patchwork:ws-mode", "ws-mode"],
+      ["patchwork:ws-window", "ws-window"],
+    ] as const) {
+      const value = globalThis.localStorage?.getItem(key);
+      if (value) params.set(param, value);
+    }
+  } catch {
+    // No localStorage (shouldn't happen in a tab) — use defaults.
+  }
+  const qs = params.toString();
+  return qs ? `?${qs}` : "";
+}
+
 export function getAutomergeWorker(): SharedWorker {
   if (!automergeWorker) {
-    automergeWorker = new SharedWorker(automergeWorkerPath, {
+    const workerUrl = `${automergeWorkerPath}${workerBenchParams()}`;
+    automergeWorker = new SharedWorker(workerUrl, {
       name: "patchwork-automerge",
       type: "module",
     });
@@ -107,6 +142,25 @@ export function getAutomergeWorker(): SharedWorker {
     // Surface the SharedWorker's console output and uncaught errors in this
     // tab's console (it has its own console that's awkward to find otherwise).
     automergeWorker.port.addEventListener("message", (event: MessageEvent) => {
+      if (event.data?.type === "sync-state") {
+        dispatchSyncState(event.data as SyncStateDocMessage);
+        return;
+      }
+      if (isWorkerErrorMessage(event.data)) {
+        // Crash/skew reports relayed from the subduction io proxy (e.g.
+        // protocol-mismatch from a stale SW-cached worker chunk). Surface
+        // loudly — these otherwise only exist in chrome://inspect.
+        console.error("[subduction-io]", event.data);
+        return;
+      }
+      if (event.data?.type === "drift-samples") {
+        // Keepalive-drift samples from the worker's bench probe. Kept on a
+        // bounded window global for the Playwright bench to harvest.
+        const sink = ((window as any).__driftSamples ??= []) as number[];
+        sink.push(...event.data.samples);
+        if (sink.length > 10_000) sink.splice(0, sink.length - 10_000);
+        return;
+      }
       if (event.data?.type !== "console") return;
       const { level, args } = event.data;
       // Gate forwarded [lifecycle] logs on the toggle too.
@@ -130,6 +184,16 @@ export function getAutomergeWorker(): SharedWorker {
     });
     automergeWorker.port.postMessage({ type: "debug", debug: workerDebugging });
 
+    // Offer the subduction io proxy's port; the worker's port provider pulls
+    // it when (re)constructing its WorkerWebSocketEndpoint.
+    donatePort(automergeWorker.port, () => {
+      const io = new SharedWorker(SUBDUCTION_IO_WORKER_URL, {
+        type: "module",
+        name: "subduction-websocket",
+      });
+      return io.port;
+    });
+
     installWorkerDeathDetection(automergeWorker);
   }
   return automergeWorker;
@@ -205,6 +269,53 @@ function installWorkerDeathDetection(worker: SharedWorker): void {
   }, HEARTBEAT_MS);
 }
 
+// ── Sync-state subscriptions ────────────────────────────────────────────
+// The automerge worker pushes per-document heads only to the tabs that ask for
+// them (see SyncStateDocMessage). We ref-count locally so several callers in
+// this tab can watch the same doc with a single worker subscription, and tear
+// the worker subscription down when the last local watcher drops.
+type SyncStateListener = (update: SyncStateDocMessage) => void;
+const syncStateListeners = new Map<string, Set<SyncStateListener>>();
+
+function dispatchSyncState(update: SyncStateDocMessage): void {
+  const listeners = syncStateListeners.get(update.documentId);
+  if (!listeners) return;
+  for (const listener of listeners) {
+    try {
+      listener(update);
+    } catch (err) {
+      console.error("sync-state listener threw", err);
+    }
+  }
+}
+
+export function subscribeSyncState(
+  documentId: string,
+  listener: SyncStateListener
+): () => void {
+  const worker = getAutomergeWorker();
+  let listeners = syncStateListeners.get(documentId);
+  if (!listeners) {
+    syncStateListeners.set(documentId, (listeners = new Set()));
+    // First local watcher for this doc — ask the worker to start pushing it.
+    worker.port.postMessage({ type: "sync-sub", documentId });
+  }
+  listeners.add(listener);
+
+  let active = true;
+  return () => {
+    if (!active) return; // idempotent
+    active = false;
+    const set = syncStateListeners.get(documentId);
+    if (!set) return;
+    set.delete(listener);
+    if (set.size === 0) {
+      syncStateListeners.delete(documentId);
+      worker.port.postMessage({ type: "sync-unsub", documentId });
+    }
+  };
+}
+
 export function connectClassicSync(
   server: string = readClassicSyncServer()
 ): Promise<void> {
@@ -311,6 +422,7 @@ export default async function setupServiceWorker(
   // Attach the SW→tab [lifecycle] log bridge as early as possible so boot /
   // install / activate markers from the controlling worker are rendered here.
   installServiceWorkerLogForwarding();
+  localStorage.removeItem(key);
 
   if (options?.workerPath) automergeWorkerPath = options.workerPath;
 
@@ -367,6 +479,7 @@ export default async function setupServiceWorker(
     shared,
     connectClassicSync,
     getRepoChannel,
+    subscribeSyncState,
     async subscribeToRepoChannel(listener: ServiceWorkerRepoChannelListener) {
       // The automerge worker outlives the page, so unlike the old in-service-
       // worker repo there's nothing to reconnect: one port, handed over once.