@inkandswitch/patchwork-bootloader 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @inkandswitch/patchwork-bootloader
+
+## 0.0.1
+
+### Patch Changes
+
+- 33681ef: initial release
+
+  making the packages available for the first time on npm

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@inkandswitch/patchwork-bootloader",
+  "version": "0.0.1",
+  "author": "chee",
+  "type": "module",
+  "license": "MIT",
+  "devDependencies": {
+    "@automerge/automerge-repo-keyhive": "0.0.0-alpha.71",
+    "@keyhive/keyhive": "0.0.0-alpha.40",
+    "esbuild": "^0.23.1",
+    "rollup": "^4.53.3"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/setup.js",
+      "types": "./dist/setup.d.ts"
+    },
+    "./externals": {
+      "import": "./dist/externals.js",
+      "types": "./dist/externals.d.ts"
+    },
+    "./vite": {
+      "import": "./dist/vite/patchwork-plugin.js",
+      "types": "./dist/vite/patchwork-plugin.d.ts"
+    },
+    "./service-worker": {
+      "import": "./dist/service-worker.js",
+      "types": "./dist/service-worker.d.ts"
+    },
+    "./types": {
+      "import": "./dist/types.js",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "dependencies": {
+    "@automerge/automerge": "3.2.1",
+    "@automerge/automerge-repo": "2.5.0",
+    "@automerge/vanillajs": "2.5.0",
+    "@types/debug": "^4.1.12",
+    "debug": "^4.4.3",
+    "resolve.exports": "^2.0.3",
+    "service-worker-types": "npm:@types/serviceworker@^0.0.153",
+    "tinyargs": "^0.1.4"
+  },
+  "peerDependencies": {
+    "@automerge/automerge": "3.2.1",
+    "@automerge/automerge-repo": "2.5.0",
+    "@automerge/automerge-repo-keyhive": "0.0.0-alpha.71",
+    "@automerge/vanillajs": "2.5.0",
+    "@keyhive/keyhive": "0.0.0-alpha.40"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w --preserveWatchOutput"
+  }
+}

package/src/externals.ts

@@ -0,0 +1,21 @@
+/**
+ * these dependencies will be built into the outdir, and injected into the importmap
+ */
+const externals = [
+  "@automerge/automerge",
+  "@automerge/automerge/slim",
+  "@automerge/automerge-repo",
+  "@automerge/automerge-repo/slim",
+  "@automerge/automerge-repo-keyhive",
+  "@keyhive/keyhive",
+  "@keyhive/keyhive/slim",
+  "@inkandswitch/patchwork-bootloader",
+  "@inkandswitch/patchwork-elements",
+  "@inkandswitch/patchwork-filesystem",
+  "@inkandswitch/patchwork-plugins",
+
+  // sad
+  "@codemirror/state",
+  "@codemirror/view",
+];
+export default externals;

package/src/service-worker.ts

@@ -0,0 +1,187 @@
+/// <reference types="service-worker-types" />
+
+import type { HandoffResponse, HandoffResponseMessage } from "./types.js";
+
+let cachename = "default";
+let debugging = false;
+
+function log(...args: any[]) {
+  if (!debugging) return;
+  console.log.call(
+    console,
+    `%cpatchwork:serviceworker%c\n`,
+    `color: #00ffcc; font-weight: bold`,
+    "color: inherit",
+    ...args
+  );
+}
+
+self.addEventListener("install", () => 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);
+}
+
+self.addEventListener("activate", async () => {
+  await clearOldCaches();
+  clients.claim();
+});
+
+// a map of response promises by their id
+const responseResolvers = new Map<
+  number,
+  PromiseWithResolvers<HandoffResponse>
+>();
+
+function accept(message: HandoffResponseMessage) {
+  const responseItem = responseResolvers.get(message.id);
+  if (!responseItem) {
+    return console.warn(`No read response found for id ${message.id}`);
+  }
+  return responseItem.resolve(message.response);
+}
+
+const bc = new BroadcastChannel("@patchwork/handoff");
+
+bc.addEventListener("message", (event) => {
+  if (event.data.type == "response") accept(event.data);
+});
+
+// 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);
+  } else if (event.data.type == "port") {
+    log("recieved messagechannel");
+    const [port] = event.ports;
+    port.addEventListener("message", (event) => {
+      if (event.data.type == "response") {
+        accept(event.data);
+      }
+    });
+  } else if (event.data.type == "cachename") {
+    const nextCachename = event.data.cachename;
+    if (cachename == nextCachename) {
+      return;
+    }
+    console.info(
+      `deleting ${cachename} and setting cache name to ${nextCachename}`
+    );
+    caches.delete(cachename);
+    cachename = nextCachename;
+  } else if (event.data.type == "debug") {
+    debugging = event.data.debug;
+    log("serviceworker debugging enabled");
+  }
+});
+
+// request ids are kept in a counter
+let reqcount = 0;
+self.addEventListener("fetch", async (fetchEvent: FetchEvent) => {
+  const request = fetchEvent.request;
+  if (request.method !== "GET") return fetchEvent.respondWith(fetch(request));
+  const url = new URL(fetchEvent.request.url);
+
+  let handoffURL: URL | undefined;
+
+  if (
+    url.hostname == self.location.hostname &&
+    url.port == self.location.port &&
+    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}`);
+    } catch {}
+  }
+
+  fetchEvent.respondWith(
+    (async () => {
+      const cache = await caches.open(cachename);
+      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 (handoffResponse.cache !== false) {
+              log(`caching ${handoffURL}`);
+              await cache.put(request, response.clone());
+            } else {
+              log(`caching disabled on ${handoffURL}`);
+            }
+            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,
+          });
+        } else {
+          // network first strategy for external requests
+          const response = await fetch(request);
+          if (response) {
+            if (response.ok && response.url.match(/^https?\:/)) {
+              await cache.put(request, response.clone());
+            }
+            return response;
+          }
+          if (match) return match;
+          return new Response("couldnt fetch and no stale", { status: 503 });
+        }
+      } catch (error) {
+        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 });
+      }
+    })()
+  );
+});

package/src/setup.ts

@@ -0,0 +1,131 @@
+import type {
+  HandoffHandler,
+  HandoffRequestMessage,
+  HandoffResponse,
+  SetupServiceWorkerOptions,
+} from "./types.js";
+import debug from "debug";
+
+const debugging = debug.enabled("patchwork:serviceworker");
+
+const key = "patchworkServiceWorkerCacheVersion";
+
+function bumpServiceWorkerCacheVersion() {
+  const version = new Date().valueOf().toString(36);
+  localStorage.setItem(key, version);
+  return getServiceWorkerCacheVersion();
+}
+
+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(),
+  });
+}
+
+export function bumpServiceWorkerCache(
+  sw = navigator.serviceWorker.controller
+) {
+  bumpServiceWorkerCacheVersion();
+  setServiceWorkerCacheName(sw);
+}
+
+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();
+  });
+
+  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
+      );
+
+      if (!handoffResponse) {
+        return source?.postMessage({ id: requestMessage.id, type: "response" });
+      }
+
+      if (typeof handoffResponse == "string") {
+        return send({ body: handoffResponse }, [handoffResponse]);
+      }
+
+      if (handoffResponse instanceof Uint8Array) {
+        return send({ body: handoffResponse }, [handoffResponse.buffer]);
+      }
+
+      const { body: handoffBody, headers, status, cache } = handoffResponse;
+
+      const body = handoffBody;
+
+      send(
+        { body, headers, status, cache },
+        body instanceof Uint8Array ? [body.buffer] : undefined
+      );
+    }
+  });
+
+  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: #fff8f0; border: 1px solid; border-radius: 4px"
+      );
+    });
+}

package/src/types.ts

@@ -0,0 +1,42 @@
+export interface HandoffRequest {
+  url: string;
+  headers: Record<string, string>;
+  method: string;
+  destination: RequestDestination;
+  referrer: string;
+}
+
+export interface HandoffResponse {
+  body?: string | Uint8Array<ArrayBuffer> | ReadableStream;
+  /** defaults to 200 */
+  status?: number;
+  headers?: [string, string][] | Record<string, string>;
+  cache?: boolean;
+}
+
+export interface HandoffRequestMessage {
+  id: number;
+  type: "request";
+  /** the current name of the service worker cache */
+  cachename: string;
+  request: HandoffRequest;
+}
+
+export interface HandoffResponseMessage {
+  id: number;
+  type: "response";
+  response: HandoffResponse;
+}
+
+export type HandoffHandler = (
+  href: string,
+  request: HandoffRequest
+) => Promise<HandoffResponse | void | string | Uint8Array<ArrayBuffer>>;
+
+export type SetupServiceWorkerOptions = {
+  /**
+   * The public path to the service worker file.
+   * Defaults to `/service-worker.js`
+   */
+  path?: string;
+};

package/src/vite/importmap-plugin.ts

@@ -0,0 +1,75 @@
+import type { Plugin } from "vite";
+import type {
+  ImportMap,
+  PatchworkVitePluginOptions,
+} from "./patchwork-plugin.js";
+
+/**
+ * these dependencies will be built into the outdir,
+ * and injected into the importmap
+ */
+import externals from "../externals.js";
+
+export const builtins = externals.reduce(
+  (builtins, name) => ((builtins[name] = `/packages/${name}.js`), builtins),
+  {} as Record<string, string>
+);
+
+/**
+ * merge the importmap option with our builtins
+ */
+function createImportMap(options?: PatchworkVitePluginOptions) {
+  const importmap: ImportMap = structuredClone(
+    options?.importmap ?? { imports: {}, scopes: {} }
+  );
+  importmap.imports ??= {};
+  importmap.scopes ??= {};
+  Object.assign(importmap.imports, builtins);
+  return { importmap, builtins };
+}
+
+export function importmap(options?: PatchworkVitePluginOptions): Plugin {
+  const { importmap, builtins } = createImportMap(options);
+  return {
+    name: "@patchwork/vite",
+    async buildStart() {
+      if (this.environment.mode == "build") {
+        for (const [id, fileName] of Object.entries(builtins)) {
+          this.emitFile({
+            type: "chunk",
+            fileName: fileName.slice(1),
+            id,
+            preserveSignature: "strict",
+          });
+        }
+      }
+    },
+    resolveId(id) {
+      if (id in importmap.imports && !(id in builtins)) {
+        return { id: importmap.imports[id], external: true };
+      }
+    },
+    transformIndexHtml: {
+      order: "pre",
+      handler(html, ctx) {
+        const map = structuredClone(importmap);
+        if (ctx.server) {
+          // serve builtins from dev server in dev mode
+          for (const id of Object.keys(builtins)) {
+            map.imports[id] = `/@id/${id}`;
+          }
+        }
+        return {
+          html,
+          tags: [
+            {
+              tag: "script",
+              attrs: { type: "importmap" },
+              children: JSON.stringify(map, null, 2),
+            },
+          ],
+        };
+      },
+    },
+  };
+}

package/src/vite/patchwork-plugin.ts

@@ -0,0 +1,20 @@
+// todo this is now not patchwork-specific, it's just a fun little importmap thing
+// and a separate thing that returns the service worker which doesn't really
+// need to be a plugin at all
+
+import { importmap } from "./importmap-plugin.js";
+import { serviceworker } from "./service-worker-plugin.js";
+
+export default function patchwork(options?: PatchworkVitePluginOptions) {
+  return [importmap(options), serviceworker()];
+}
+
+type Imports = { [name: string]: string };
+export type ImportMap = {
+  imports: Imports;
+  scopes?: { [scope: string]: Imports };
+};
+
+export interface PatchworkVitePluginOptions {
+  importmap?: ImportMap;
+}

package/src/vite/service-worker-plugin.ts

@@ -0,0 +1,48 @@
+import { type Plugin, transformWithEsbuild } from "vite";
+import { type ResolvedId, type RollupFsModule } from "rollup";
+
+export function serviceworker(): Plugin {
+  const moduleId = "service-worker.js";
+  const path = `/${moduleId}`;
+  const ids = [moduleId, path];
+  const serviceWorkerExport = "@inkandswitch/patchwork-bootloader/service-worker";
+  async function transform(
+    resolve: (source: string) => Promise<ResolvedId | null>,
+    fs: RollupFsModule
+  ) {
+    const exportPath = await resolve(serviceWorkerExport);
+    const file = await fs.readFile(exportPath!.id, {
+      encoding: "utf8",
+    });
+    const transformation = await transformWithEsbuild(
+      file,
+      serviceWorkerExport,
+      { format: "iife" }
+    );
+    return transformation;
+  }
+  return {
+    name: "@patchwork/vite",
+    async buildStart() {
+      if (this.environment.mode == "build") {
+        const trans = await transform(this.resolve.bind(this), this.fs);
+        this.emitFile({
+          type: "prebuilt-chunk",
+          fileName: path.slice(1),
+          code: trans.code,
+          map: trans.map,
+        });
+      }
+    },
+    resolveId(id) {
+      if (ids.includes(id)) {
+        return moduleId;
+      }
+    },
+    async load(id) {
+      if (ids.includes(id)) {
+        return transform(this.resolve.bind(this), this.fs);
+      }
+    },
+  };
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "outDir": "dist",
+    "declaration": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "include": ["src", "../../sites/tiny-patchwork/shared-worker.ts"]
+}