@inkandswitch/patchwork-bootloader 0.0.4 → 0.0.6

package/src/service-worker.ts

@@ -1,10 +1,75 @@
 /// <reference types="service-worker-types" />
 
-import type { HandoffResponse, HandoffResponseMessage } from "./types.js";
+import { SwLogger } from "./sw-logger.js";
 
+// Heavy imports — marked external by the service-worker vite plugin,
+// resolved to /packages/... URLs at build time. The SW is registered with
+// type:"module" so the browser fetches these as regular network requests.
+// Uses /slim to avoid top-level await (disallowed in service workers).
+// Wasm is fetched from /automerge.wasm (emitted by the vite plugin) instead
+// of bundling the ~3MB base64 string.
+import { initializeWasm } from "@automerge/automerge/slim";
+// eslint-disable-next-line
+// @ts-ignore — initSync is a wasm-bindgen runtime helper not in the .d.ts
+import { initSync as initSubductionSync } from "@automerge/automerge-subduction/slim";
+import { WebCryptoSigner } from "@automerge/automerge-subduction/slim";
+
+import {
+  Repo,
+  isValidAutomergeUrl,
+  parseAutomergeUrl,
+  stringifyAutomergeUrl,
+  type PeerId,
+} from "@automerge/automerge-repo/slim";
+import {
+  findHandleInFolderHandle,
+  resolvePackageExport,
+  type FolderDoc,
+} from "@inkandswitch/patchwork-filesystem";
+
+// Small adapters — bundled directly into the SW
+import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb";
+import { MessageChannelNetworkAdapter } from "@automerge/automerge-repo-network-messagechannel";
+import { WebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket";
+
+// TEMPORARY: enable debug npm module in SW context (no localStorage available)
 let cachename = "default";
 let debugging = false;
 
+const SUBDUCTION_ENDPOINTS = ["wss://subduction.sync.inkandswitch.com"];
+
+// ── Persistent logger ───────────────────────────────────────────────────
+// Initialized eagerly so it's available for the entire SW lifetime.
+// Access from the SW inspector console via self.printLogs(), self.tailLogs(),
+// self.exportLogs(), self.clearLogs().
+const slog = SwLogger.open().then((logger) => {
+  (self as any).slog = logger;
+
+  (self as any).printLogs = async (n = 200) => {
+    const entries = await logger.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);
+      }
+    }
+    console.log(`--- ${entries.length} entries ---`);
+  };
+
+  (self as any).tailLogs = (n = 200) => logger.tail(n);
+  (self as any).exportLogs = () => logger.exportAll();
+  (self as any).clearLogs = () => logger.clear();
+
+  logger.info("sw-logger initialized");
+  return logger;
+});
+
+const cacheableStatuses = [
+  200, 203, 204, 206, 300, 301, 404, 405, 410, 414, 501,
+];
+
 function log(...args: any[]) {
   if (!debugging) return;
   console.log.call(
@@ -34,38 +99,81 @@ self.addEventListener("activate", async () => {
   clients.claim();
 });
 
-// a map of response promises by their id
-const responseResolvers = new Map<
-  number,
-  PromiseWithResolvers<HandoffResponse>
->();
+let repoPromise: Promise<Repo> | null = null;
+
+function getRepo() {
+  if (!repoPromise) {
+    repoPromise = (async () => {
+      const logger = await slog;
+
+      logger.info("fetching wasm modules");
+      const [amWasmBuf, sdnWasmBuf] = await Promise.all([
+        fetch("/automerge.wasm").then((r) => r.arrayBuffer()),
+        fetch("/subduction.wasm").then((r) => r.arrayBuffer()),
+      ]);
+      initSubductionSync(new Uint8Array(sdnWasmBuf));
+      await initializeWasm(new Uint8Array(amWasmBuf));
+      logger.info("wasm initialized");
+
+      const signer = await WebCryptoSigner.setup();
+
+      const repo = new Repo({
+        storage: new IndexedDBStorageAdapter(),
+        signer,
+        peerId: ("service-worker-" +
+          (Math.random() * 10000).toString(36).slice(2)) as PeerId,
+        async sharePolicy(peerId) {
+          return peerId.includes("storage-server");
+        },
+        enableRemoteHeadsGossiping: true,
+        subductionWebsocketEndpoints: SUBDUCTION_ENDPOINTS,
+        network: [new WebSocketClientAdapter("wss://sync3.automerge.org")],
+      });
+
+      (self as any).repo = repo;
+      logger.info("repo constructed, waiting for network subsystem");
+
+      // Don't block getRepo() on whenReady() — the network subsystem starts
+      // with only the subduction adapter, and the MessageChannel adapter is
+      // added later via connectPort (which awaits getRepo). Blocking here
+      // would deadlock that path and starve the fetch handler.
+      repo.networkSubsystem.whenReady().then(() => {
+        logger.info("repo network subsystem ready");
+      });
 
-function accept(message: HandoffResponseMessage) {
-  const responseItem = responseResolvers.get(message.id);
-  if (!responseItem) {
-    return console.warn(`No read response found for id ${message.id}`);
+      return repo;
+    })();
   }
-  return responseItem.resolve(message.response);
+  return repoPromise;
 }
 
-const bc = new BroadcastChannel("@patchwork/handoff");
-
-bc.addEventListener("message", (event) => {
-  if (event.data.type == "response") accept(event.data);
-});
+// Connect client MessagePorts to the repo for sync
+async function connectPort(port: MessagePort) {
+  const repo = await getRepo();
+  repo.networkSubsystem.addNetworkAdapter(
+    new MessageChannelNetworkAdapter(port, { useWeakRef: true })
+  );
+}
 
-// when we receive a `response` req, we resolve the promise with that id
 self.addEventListener("message", async (event) => {
-  if (event.data.type == "response") {
-    accept(event.data);
+  if (event.data.type == "ping") {
+    // Keepalive — Chromium idles out service workers after ~30s of inactivity.
+    // Reply via the provided port if any; the message event itself also resets
+    // the idle timer.
+    const [pongPort] = event.ports;
+    log("ping");
+    if (pongPort) {
+      pongPort.postMessage({ type: "pong" });
+      log("pong");
+      pongPort.close();
+    } else if (event.source) {
+      (event.source as unknown as Client).postMessage({ type: "pong" });
+      log("pong");
+    }
   } else if (event.data.type == "port") {
-    log("recieved messagechannel");
+    log("received messagechannel");
     const [port] = event.ports;
-    port.addEventListener("message", (event) => {
-      if (event.data.type == "response") {
-        accept(event.data);
-      }
-    });
+    connectPort(port);
   } else if (event.data.type == "cachename") {
     const nextCachename = event.data.cachename;
     if (cachename == nextCachename) {
@@ -82,14 +190,139 @@ self.addEventListener("message", async (event) => {
   }
 });
 
-// request ids are kept in a counter
-let reqcount = 0;
-self.addEventListener("fetch", async (fetchEvent: FetchEvent) => {
+interface FileDoc {
+  content: string | Uint8Array;
+  mimeType?: string;
+}
+
+// ── Automerge URL resolution ───────────────────────────────────────────
+
+async function resolveAutomergeUrl(automergeURL: URL): Promise<Response> {
+  const repo = await getRepo();
+  const href = automergeURL.href;
+  const [maybeAutomergeUrl, ...path] = href.split("/");
+
+  if (!isValidAutomergeUrl(maybeAutomergeUrl)) {
+    return new Response("invalid automerge url", { status: 400 });
+  }
+
+  // Trim trailing empty path segment
+  if (path.length && !path[path.length - 1]) path.pop();
+
+  const { heads, documentId } = parseAutomergeUrl(maybeAutomergeUrl);
+
+  if (!heads) {
+    // Redirect to pinned-heads URL
+    const folder = await repo.find(maybeAutomergeUrl);
+    const latestHeads = folder.heads();
+    const url = stringifyAutomergeUrl({ documentId, heads: latestHeads });
+    let location = `/${encodeURIComponent(url)}`;
+    if (path.length) location += `/${path.join("/")}`;
+    return Response.redirect(location, 307);
+  }
+
+  // If no path, check if this is a package with exports to resolve
+  // e.g. /automerge%3Adocid/abc → resolve "abc" via package.json exports
+  const folderHandle = await repo.find<FolderDoc>(maybeAutomergeUrl);
+
+  let fileHandle;
+  if (path.length) {
+    // Try direct file navigation first
+    fileHandle = await findHandleInFolderHandle<FileDoc>(
+      repo,
+      folderHandle,
+      path.map(decodeURIComponent)
+    );
+
+    // If not found as a direct path, try resolving as a package subpath export
+    // e.g. /automerge%3Adocid/abc → exports["./abc"] → "./dist/abc.js"
+    if (!fileHandle) {
+      const subpath = "./" + path.map(decodeURIComponent).join("/");
+      const pkgFileHandle = await findHandleInFolderHandle<FileDoc>(
+        repo,
+        folderHandle,
+        ["package.json"]
+      );
+      if (pkgFileHandle) {
+        const pkgDoc = pkgFileHandle.doc() as FileDoc | undefined;
+        if (pkgDoc?.content) {
+          const pkgJson = JSON.parse(String(pkgDoc.content));
+          try {
+            const resolved = resolvePackageExport(pkgJson, subpath);
+            if (resolved) {
+              const resolvedPath = resolved.replace(/^\.\//, "").split("/");
+              fileHandle = await findHandleInFolderHandle<FileDoc>(
+                repo,
+                folderHandle,
+                resolvedPath
+              );
+            }
+          } catch {
+            // not a valid export subpath, fall through to error
+          }
+        }
+      }
+    }
+  } else {
+    // No path — resolve the root export (like "." in package.json)
+    const pkgFileHandle = await findHandleInFolderHandle<FileDoc>(
+      repo,
+      folderHandle,
+      ["package.json"]
+    );
+    if (pkgFileHandle) {
+      const pkgDoc = pkgFileHandle.doc() as FileDoc | undefined;
+      if (pkgDoc?.content) {
+        const pkgJson = JSON.parse(String(pkgDoc.content));
+        try {
+          const resolved = resolvePackageExport(pkgJson);
+          if (resolved) {
+            const resolvedPath = resolved.replace(/^\.\//, "").split("/");
+            fileHandle = await findHandleInFolderHandle<FileDoc>(
+              repo,
+              folderHandle,
+              resolvedPath
+            );
+          }
+        } catch {}
+      }
+    }
+  }
+
+  if (!fileHandle) {
+    throw new Error(
+      `couldn't resolve ${path.join("/")} in folder at ${maybeAutomergeUrl}`
+    );
+  }
+
+  const fileDoc = fileHandle.doc() as unknown as FileDoc;
+  const content = fileDoc?.content;
+  if (!content) {
+    throw new Error(`file at ${href} has no content`);
+  }
+
+  let body: BodyInit =
+    content instanceof Uint8Array
+      ? (new Uint8Array(content) as BlobPart)
+      : String(content);
+  const mimeType = fileDoc.mimeType ?? "text/plain";
+
+  const headers = new Headers({ "content-type": mimeType });
+  headers.set("cross-origin-embedder-policy", "credentialless");
+  headers.set("cross-origin-resource-policy", "cross-origin");
+
+  return new Response(body, { status: 200, headers });
+}
+
+// ── Fetch handler ──────────────────────────────────────────────────────
+
+self.addEventListener("fetch", (fetchEvent: FetchEvent) => {
+  log("fetch event", fetchEvent.request.url);
   const request = fetchEvent.request;
   if (request.method !== "GET") return fetchEvent.respondWith(fetch(request));
   const url = new URL(fetchEvent.request.url);
 
-  let handoffURL: URL | undefined;
+  let specialURL: URL | undefined;
 
   if (
     url.hostname == self.location.hostname &&
@@ -97,10 +330,8 @@ self.addEventListener("fetch", async (fetchEvent: FetchEvent) => {
     url.protocol == self.location.protocol
   ) {
     try {
-      // trap any request like /url e.g. /automerge%3Awhatever or /http%3A%2F%2Fsomething.com
-      // URI encoded so we can include hashes etc
-      handoffURL = new URL(decodeURIComponent(url.pathname.slice(1)));
-      log(`received handoff request ${handoffURL}`);
+      specialURL = new URL(decodeURIComponent(url.pathname.slice(1)));
+      log(`received special request ${specialURL}`);
     } catch {}
   }
 
@@ -110,66 +341,42 @@ self.addEventListener("fetch", async (fetchEvent: FetchEvent) => {
       const match = await cache.match(request);
 
       try {
-        if (handoffURL) {
-          // cache-first strategy for handoff requests
-          if (match) return match;
-          const client = await self.clients.get(fetchEvent.clientId);
-
-          // set up a request id
-          const reqid = reqcount++;
-          // create a place for the response event handler to put the response
-          const resolvers = Promise.withResolvers<HandoffResponse>();
-          responseResolvers.set(reqid, resolvers);
-
-          // i don't think this can happen
-          if (!client) {
-            throw new Error(
-              `the client has gone missing!!! ${fetchEvent.clientId}. i have NO IDEA what to do`
-            );
-          }
-          const message = {
-            id: reqid,
-            type: "request",
-            cache: cachename,
-            request: {
-              url: handoffURL.href,
-              headers: Object.fromEntries(request.headers.entries()),
-              method: request.method,
-              destination: request.destination,
-              referrer: request.referrer,
-            },
-          };
-          log("sending handoff request", message);
-          // send request event to main thread to ask them how to handle it
-          client.postMessage(message);
-          // this'll finish when the main thread gets back to us
-          fetchEvent.waitUntil(resolvers.promise);
-          const handoffResponse = await resolvers.promise;
-          log("received handoff response", handoffResponse);
-          if (handoffResponse) {
-            const response = new Response(handoffResponse.body, {
-              status: handoffResponse.status,
-              headers: handoffResponse.headers,
+        if (specialURL) {
+          if (match) {
+            log(`serving ${specialURL} from cache ${cachename}`);
+            const headers = new Headers(match.headers);
+            headers.set("cross-origin-embedder-policy", "credentialless");
+            headers.set("cross-origin-resource-policy", "cross-origin");
+            return new Response(match.body, {
+              status: match.status,
+              headers,
             });
-            if (handoffResponse.cache !== false) {
-              log(`caching ${handoffURL}`);
-              await cache.put(request, response.clone());
-            } else {
-              log(`caching disabled on ${handoffURL}`);
-            }
+          }
+
+          const response = await resolveAutomergeUrl(specialURL);
+
+          if (response.status === 307) {
             return response;
           }
 
-          // no idea what's going on now i'm a teapot i'm a teapot
-          return new Response("handler returned nothing", {
-            status: 418,
-          });
+          if (cacheableStatuses.includes(response.status)) {
+            log(`caching ${specialURL}`);
+            await cache.put(request, response.clone());
+          }
+
+          return response;
         } else {
-          // network first strategy for external requests
-          const response = await fetch(request);
+          const response = await fetch(request).catch(() => null);
           if (response) {
-            if (response.ok && response.url.match(/^https?\:/)) {
+            if (
+              cacheableStatuses.includes(response.status) &&
+              response.url.match(/^https?\:/)
+            ) {
               await cache.put(request, response.clone());
+            } else {
+              log(
+                `skipping uncacheable response code from cache: ${response.status} for ${response.url}`
+              );
             }
             return response;
           }
@@ -177,10 +384,19 @@ self.addEventListener("fetch", async (fetchEvent: FetchEvent) => {
           return new Response("couldnt fetch and no stale", { status: 503 });
         }
       } catch (error) {
+        const message =
+          error instanceof Error
+            ? `${error.message}\n\n${error.stack}`
+            : String(error);
+        console.error(
+          `service worker error resolving ${request.url}${specialURL ? ` (for: ${specialURL})` : ""}.\n${message}`
+        );
         if (match) return match;
-        // if something fucked up happens, serve a stale thing if there is one
-        // probably can do better error messaging here based on what was caught
-        return new Response(`yikes: ${error}`, { status: 555 });
+
+        return new Response(message, {
+          status: 500,
+          headers: { "content-type": "text/plain" },
+        });
       }
     })()
   );

package/src/setup.ts

@@ -1,9 +1,4 @@
-import type {
-  HandoffHandler,
-  HandoffRequestMessage,
-  HandoffResponse,
-  SetupServiceWorkerOptions,
-} from "./types.js";
+import type { SetupServiceWorkerOptions } from "./types.js";
 import debug from "debug";
 
 const debugging = debug.enabled("patchwork:serviceworker");
@@ -43,89 +38,87 @@ export function bumpServiceWorkerCache(
   setServiceWorkerCacheName(sw);
 }
 
+(window as any).bumpServiceWorkerCache = bumpServiceWorkerCache;
+
+/** Wait for a registration to have an active worker */
+function waitForActive(reg: ServiceWorkerRegistration): Promise<ServiceWorker> {
+  if (reg.active) return Promise.resolve(reg.active);
+  const worker = reg.installing || reg.waiting;
+  if (!worker)
+    return Promise.reject(new Error("no service worker in registration"));
+  return new Promise((resolve) => {
+    worker.addEventListener("statechange", () => {
+      if (worker.state === "activated") resolve(worker);
+    });
+  });
+}
+
 export default async function setupServiceWorker(
-  handler: HandoffHandler,
   options?: SetupServiceWorkerOptions
 ) {
-  navigator.serviceWorker.addEventListener("controllerchange", function () {
-    console.log(
-      "%cnew service worker, reloading",
-      "color: pink; font-weight: bold"
-    );
-    bumpServiceWorkerCache(navigator.serviceWorker.controller);
-    location.reload();
+  // 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" },
+        },
+      });
+    }
   });
 
-  navigator.serviceWorker.addEventListener("message", async (event) => {
-    if (event.data.type == "request") {
-      const requestMessage: HandoffRequestMessage = event.data;
-      const source = event.source;
-
-      if (!source) {
-        throw new TypeError("can't operate without a source");
-      }
-
-      async function send(
-        response: HandoffResponse,
-        transfer?: Transferable[]
-      ) {
-        source!.postMessage(
-          {
-            id: requestMessage.id,
-            type: "response",
-            response,
-          },
-          { transfer }
-        );
-      }
-
-      const handoffResponse = await handler(
-        requestMessage.request.url,
-        requestMessage.request
-      );
+  const path = options?.path ?? "/service-worker.js";
+  const reg = await navigator.serviceWorker.register(path, { type: "module" });
 
-      if (!handoffResponse) {
-        return source?.postMessage({ id: requestMessage.id, type: "response" });
-      }
+  // If there's an update waiting or installing, wait for it to activate
+  if (reg.installing || reg.waiting) {
+    await waitForActive(reg);
+  }
 
-      if (typeof handoffResponse == "string") {
-        return send({ body: handoffResponse }, [handoffResponse]);
-      }
+  const active = reg.active!;
+  active.postMessage({ type: "debug", debug: debugging });
 
-      if (handoffResponse instanceof Uint8Array) {
-        return send({ body: handoffResponse }, [handoffResponse.buffer]);
-      }
+  // Wait for the controller to be available
+  if (!navigator.serviceWorker.controller) {
+    await new Promise<void>((resolve) => {
+      navigator.serviceWorker.addEventListener(
+        "controllerchange",
+        () => resolve(),
+        { once: true }
+      );
+    });
+  }
 
-      const { body: handoffBody, headers, status, cache } = handoffResponse;
+  // Send a MessagePort so the SW's repo can sync with clients
+  const { port1, port2 } = new MessageChannel();
+  navigator.serviceWorker.controller!.postMessage({ type: "port" }, [port2]);
 
-      const body = handoffBody;
+  // 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.
+  setInterval(() => {
+    navigator.serviceWorker.controller?.postMessage({ type: "ping" });
+  }, 20_000);
 
-      send(
-        { body, headers, status, cache },
-        body instanceof Uint8Array ? [body.buffer] : undefined
-      );
-    }
+  // Reload on future SW updates (added after setup so the initial
+  // activation doesn't trigger a reload loop).
+  navigator.serviceWorker.addEventListener("controllerchange", function () {
+    console.info(
+      "%cnew service worker took control, reloading...",
+      "color: pink; font-weight: bold"
+    );
+    location.reload();
   });
 
-  const existingSw = await navigator.serviceWorker.getRegistration();
-
-  return navigator.serviceWorker
-    .register(options?.path ?? "/service-worker.js")
-    .then(async (sw) => {
-      sw.active?.postMessage({
-        type: "debug",
-        debug: debugging,
-      });
-
-      if (!existingSw?.active) {
-        bumpServiceWorkerCache(sw.installing);
-        queueMicrotask(() => location.reload());
-        return sw.active!;
-      }
+  console.log(
+    "service worker alive, loading %c patchwork system ",
+    "background: #fcf2f0; color: #333; border: 2px solid; border-radius: 4px"
+  );
 
-      console.log(
-        "service worker alive, loading %c patchwork system ",
-        "background: #fff8f0; border: 1px solid; border-radius: 4px"
-      );
-    });
+  return { port: port1 };
 }