@inkandswitch/patchwork 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @inkandswitch/patchwork
 
+## 0.6.1
+
+### Patch Changes
+
+- f37bb8e: Bump `@automerge/automerge-subduction` to 0.16.1.
+- Updated dependencies [f37bb8e]
+  - @inkandswitch/patchwork-bootloader@0.6.2
+
+## 0.6.0
+
+### Minor Changes
+
+- 61a152a: Add a `frameToolId` option to `setup`, and stop seeding a frame tool into new accounts.
+
+  `createDefaultAccount` wrote `frameToolId: "threepane"` into every account it created — a tool id belonging to one particular tool bundle, hardcoded in core. A site whose `packageListURL` didn't ship `threepane` gave every new user an account pointing at a tool that never registers, so the root view never mounted.
+
+  New accounts now leave `frameToolId` unset, and the router resolves the frame each boot:
+
+  ```
+  #frame=  →  the account's frameToolId  →  setup({frameToolId})  →  first tool tagged frame-tool
+  ```
+
+  The field is still written to the account when a user picks a frame, so it stays a user preference; it is no longer decided for them at signup. Existing accounts already have it set and are unaffected.
+
+  Sites relying on the old seeded default should pass `frameToolId: "threepane"` to `setup`.
+
+- 61a152a: Make `vite dev` work without a site hand-rolling the dev server.
+
+  The build emits the service worker, the automerge shared worker, the module-loader worker, and three wasm binaries. None of them existed in serve mode, so every one 404'd and dev only worked if a site served a previous production build's `dist/` behind vite. The plugin now serves all of them itself:
+
+  - The three worker entries are bundled on demand with esbuild and rebuilt per request, so they always reflect the source on disk. Their heavy imports resolve to the dev server's optimized-dep URLs, mirroring how the build rewrites them to `/packages/...` — import maps don't apply to `type: "module"` workers, so the URLs have to be real either way.
+  - `automerge.wasm`, `keyhive_wasm.wasm`, and `subduction.wasm` are served from the bootloader's own node_modules. `@inkandswitch/patchwork-bootloader/externals` gains `wasmAssets()`, which `emitWasmAssets` now uses too.
+  - `global.css` 404'd in dev: the generated `index.html` links it by bare specifier, which only the build resolves. Both patchwork's and the bootloader's stylesheets are now served under root-absolute paths, and the link points at them.
+  - `@patchwork/service-worker` called `emitFile` from `buildStart` unconditionally, which throws in serve mode — it logged "This plugin is likely not vite-compatible" three times on every dev-server start. It now skips emission when serving.
+  - Dep pre-bundling runs esbuild outside the plugin pipeline that applies `define`, so in dev the page fell back to the default storage prefix while the workers used the configured one — the two would have opened different IndexedDB databases. The defines are now passed to the optimizer as well.
+
+  Sites no longer need to filter `@patchwork/service-worker` out of the plugin list, serve stylesheets themselves, or keep a built `dist/` around for `vite dev`.
+
+### Patch Changes
+
+- 846cfac: Update the pinned `@automerge/*` versions to `2.6.0-subduction.47`. These are exact pins in `dependencies` and `peerDependencies`, so both packages need to ship the new version together — installing a `.46` and a `.47` package side by side loads two copies of automerge-repo, and document handles from one are not recognised by the other.
+- Updated dependencies [846cfac]
+- Updated dependencies [61a152a]
+  - @inkandswitch/patchwork-bootloader@0.6.1
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/createAccount.js

@@ -20,7 +20,6 @@ export const createDefaultAccount = async (accountHandle, repo) => {
         }),
     ]);
     accountHandle.change((doc) => {
-        doc.frameToolId = "threepane";
         doc.rootFolderUrl = rootFolder.url;
         doc.moduleSettingsUrl = moduleSettings.url;
         doc.contactUrl = contact.url;

package/dist/index.js

@@ -155,6 +155,7 @@ async function doSetup(options) {
             repo,
             accountDocHandle,
             siteTitle,
+            frameToolId: options.frameToolId,
         });
     }
     installReveal(rootElement, router, toolsLoaded);

package/dist/router.d.ts

@@ -10,9 +10,10 @@ export interface RouterParams {
     repo: Repo;
     accountDocHandle: DocHandle<AccountDoc>;
     siteTitle: string;
+    frameToolId?: string;
 }
 export interface Router {
     /** Apply `location.hash` to the view. */
     route(): Promise<void>;
 }
-export declare function createRouter({ rootElement, repo, accountDocHandle, siteTitle, }: RouterParams): Router;
+export declare function createRouter({ rootElement, repo, accountDocHandle, siteTitle, frameToolId, }: RouterParams): Router;

package/dist/router.js

@@ -47,14 +47,17 @@ function registeredFrameToolId() {
         .filter((tool) => !!tool.tags?.includes("frame-tool") && !tool.unlisted)
         .at(0)?.id;
 }
-export function createRouter({ rootElement, repo, accountDocHandle, siteTitle, }) {
+export function createRouter({ rootElement, repo, accountDocHandle, siteTitle, frameToolId, }) {
     const route = async () => {
         // The first call seeds the root view's tool/doc so it can mount; later
         // calls reconcile the mounted view with the hash.
         if (!rootElement.hasAttribute("tool-id")) {
             const params = new URLSearchParams(location.hash.slice(1));
             const frame = params.get("frame");
-            const toolId = frame ?? accountDocHandle.doc().frameToolId ?? registeredFrameToolId();
+            const toolId = frame ??
+                accountDocHandle.doc().frameToolId ??
+                frameToolId ??
+                registeredFrameToolId();
             if (!toolId) {
                 console.error("patchwork: no frame tool registered, nothing to mount");
                 return;

package/dist/types.d.ts

@@ -55,6 +55,16 @@ export interface PatchworkOptions {
      * then `"Patchwork"`.
      */
     title?: string;
+    /**
+     * Id of the tool that frames this site — what mounts in the root view when
+     * the user hasn't chosen one on their account and the URL doesn't name one
+     * via `#frame=`. Must be a tool one of the {@link
+     * PatchworkOptions.packageListURL} sources registers.
+     *
+     * Falls back to the first registered tool tagged `frame-tool`, which with
+     * more than one of them depends on module load order.
+     */
+    frameToolId?: string;
     /** DOM id of the `<patchwork-view>` hosting the root tool. Defaults to "root". */
     rootElementId?: string;
     /**

package/dist/vite/config-plugin.d.ts

@@ -1,6 +1,12 @@
 import type { Plugin } from "vite";
 import wasm from "vite-plugin-wasm";
 import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
+/**
+ * The build-time constants both the page bundle and the workers are compiled
+ * against. Values are already JSON — the shape vite's `define` and esbuild's
+ * `define` both take.
+ */
+export declare function buildDefines(options?: PatchworkVitePluginOptions): Record<string, string>;
 /**
  * Owns envPrefix, define (__SITE_TITLE__/__STORAGE_PREFIX__/sync-server
  * configuration),

package/dist/vite/config-plugin.js

@@ -3,6 +3,22 @@ import { DEFAULT_STORAGE_PREFIX } from "@inkandswitch/patchwork-bootloader/stora
 import { DEFAULT_TITLE } from "../site-kit/options.js";
 import { DEFAULT_SYNC_SERVERS, resolvePrimarySyncServer, } from "../site-kit/sync-servers.js";
 const CORS_HEADERS = { "Access-Control-Allow-Origin": "*" };
+/**
+ * The build-time constants both the page bundle and the workers are compiled
+ * against. Values are already JSON — the shape vite's `define` and esbuild's
+ * `define` both take.
+ */
+export function buildDefines(options = {}) {
+    const classicSyncServer = options.syncServers && typeof options.syncServers.classic === "string"
+        ? options.syncServers.classic
+        : DEFAULT_SYNC_SERVERS.classic;
+    return {
+        __SYNC_SERVER__: JSON.stringify(resolvePrimarySyncServer(options)),
+        __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
+        __SITE_TITLE__: JSON.stringify(options.title ?? DEFAULT_TITLE),
+        __STORAGE_PREFIX__: JSON.stringify(options.storagePrefix ?? DEFAULT_STORAGE_PREFIX),
+    };
+}
 /**
  * Owns envPrefix, define (__SITE_TITLE__/__STORAGE_PREFIX__/sync-server
  * configuration),
@@ -15,21 +31,17 @@ export function configPlugin(options = {}) {
     return {
         name: "@patchwork/config",
         config() {
-            const primarySyncServer = resolvePrimarySyncServer(options);
-            const classicSyncServer = options.syncServers && typeof options.syncServers.classic === "string"
-                ? options.syncServers.classic
-                : DEFAULT_SYNC_SERVERS.classic;
-            // __STORAGE_PREFIX__ is defined unconditionally: the tab and the shared
-            // automerge worker resolve it separately, and only a define reaches both.
-            const define = {
-                __SYNC_SERVER__: JSON.stringify(primarySyncServer),
-                __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
-                __SITE_TITLE__: JSON.stringify(options.title ?? DEFAULT_TITLE),
-                __STORAGE_PREFIX__: JSON.stringify(options.storagePrefix ?? DEFAULT_STORAGE_PREFIX),
-            };
             return {
                 envPrefix: ["VITE_", "PATCHWORK_"],
-                define,
+                define: buildDefines(options),
+                optimizeDeps: {
+                    exclude: ["@automerge/automerge-repo-storage-indexeddb"],
+                    // Dep pre-bundling runs esbuild directly, outside the plugin
+                    // pipeline that applies `define`. Without this the page would fall
+                    // back to the built-in storage prefix while the workers used the
+                    // configured one, and they have to open the same databases.
+                    esbuildOptions: { define: buildDefines(options) },
+                },
                 server: options.server === false
                     ? undefined
                     : {

package/dist/vite/dev-plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
+export declare function devPlugin(options?: PatchworkVitePluginOptions): Plugin;

package/dist/vite/dev-plugin.js

@@ -0,0 +1,129 @@
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import * as esbuild from "esbuild";
+import { wasmAssets } from "@inkandswitch/patchwork-bootloader/externals";
+import { buildDefines } from "./config-plugin.js";
+import { builtins, devDependencyId } from "./importmap-plugin.js";
+import { workers } from "./service-worker-plugin.js";
+const PATCHWORK_CSS = "/@inkandswitch/patchwork/global.css";
+const BOOTLOADER_CSS = "/@inkandswitch/patchwork-bootloader/global.css";
+// The generated index.html links the stylesheet by bare specifier, which the
+// build resolves and the dev server does not. Serving the two files under
+// these paths, and pointing the link at the first one, covers the gap.
+const stylesheets = {
+    [PATCHWORK_CSS]: fileURLToPath(import.meta.resolve("@inkandswitch/patchwork/global.css")),
+    [BOOTLOADER_CSS]: fileURLToPath(import.meta.resolve("@inkandswitch/patchwork-bootloader/global.css")),
+};
+/**
+ * Workers are `type: "module"` scripts the browser fetches directly, so import
+ * maps don't apply to them and their heavy imports have to resolve to real
+ * URLs. The build rewrites those to the `/packages/...` chunks it emits; here
+ * they become the dev server's own optimized-dep URLs.
+ */
+function externalBuiltins() {
+    return {
+        name: "patchwork-dev-externals",
+        setup(build) {
+            build.onResolve({ filter: /.*/ }, (args) => {
+                if (!(args.path in builtins))
+                    return null;
+                return {
+                    path: `/@id/${devDependencyId(args.path)}`,
+                    external: true,
+                };
+            });
+        },
+    };
+}
+function workerContexts(options) {
+    const contexts = new Map();
+    for (const { specifier, fileName } of workers) {
+        contexts.set(`/${fileName}`, esbuild.context({
+            entryPoints: [fileURLToPath(import.meta.resolve(specifier))],
+            bundle: true,
+            write: false,
+            format: "esm",
+            platform: "browser",
+            target: "firefox115",
+            sourcemap: "inline",
+            define: buildDefines(options),
+            plugins: [externalBuiltins()],
+        }));
+    }
+    return contexts;
+}
+export function devPlugin(options = {}) {
+    let serve = false;
+    let contexts;
+    const wasm = new Map(wasmAssets().map(({ fileName, path }) => [`/${fileName}`, path]));
+    return {
+        name: "@patchwork/dev",
+        configResolved(config) {
+            serve = config.command === "serve";
+        },
+        transformIndexHtml(html) {
+            if (!serve)
+                return html;
+            return html.replace(`href="@inkandswitch/patchwork/global.css"`, `href="${PATCHWORK_CSS}"`);
+        },
+        async buildEnd() {
+            if (!contexts)
+                return;
+            for (const context of contexts.values())
+                (await context).dispose();
+            contexts = undefined;
+        },
+        configureServer(server) {
+            contexts = workerContexts(options);
+            server.middlewares.use(async (request, response, next) => {
+                const pathname = request.url?.split("?")[0] ?? "";
+                const stylesheet = stylesheets[pathname];
+                if (stylesheet) {
+                    try {
+                        const css = await readFile(stylesheet, "utf8");
+                        response.setHeader("Content-Type", "text/css");
+                        response.setHeader("Cache-Control", "no-cache");
+                        response.end(pathname === PATCHWORK_CSS
+                            ? css.replace(`"@inkandswitch/patchwork-bootloader/global.css"`, `"${BOOTLOADER_CSS}"`)
+                            : css);
+                    }
+                    catch {
+                        next();
+                    }
+                    return;
+                }
+                const binary = wasm.get(pathname);
+                if (binary) {
+                    try {
+                        response.setHeader("Content-Type", "application/wasm");
+                        response.setHeader("Cache-Control", "no-cache");
+                        response.end(await readFile(binary));
+                    }
+                    catch {
+                        next();
+                    }
+                    return;
+                }
+                const context = contexts?.get(pathname);
+                if (!context)
+                    return next();
+                try {
+                    // Rebuilt per request rather than watched: a worker is fetched once
+                    // when the browser starts it, and esbuild's incremental rebuild is
+                    // cheaper than keeping a watcher per entry.
+                    const result = await (await context).rebuild();
+                    response.setHeader("Content-Type", "text/javascript");
+                    response.setHeader("Cache-Control", "no-cache");
+                    response.end(result.outputFiles[0].text);
+                }
+                catch (error) {
+                    // A worker that fails to build is otherwise a silent 500 in a
+                    // context with no console of its own.
+                    server.config.logger.error(`[patchwork] failed to bundle ${pathname}: ${error}`);
+                    response.statusCode = 500;
+                    response.end(`console.error(${JSON.stringify(String(error))})`);
+                }
+            });
+        },
+    };
+}

package/dist/vite/importmap-plugin.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vite";
 import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
 export declare const builtins: Record<string, string>;
+export declare function devDependencyId(id: string): string;
 export declare function importmap(options?: PatchworkVitePluginOptions): Plugin;

package/dist/vite/importmap-plugin.js

@@ -37,7 +37,7 @@ function createImportMap(options) {
     Object.assign(importmap.imports, builtins);
     return { importmap, builtins };
 }
-function devDependencyId(id) {
+export function devDependencyId(id) {
     if (id === "@inkandswitch/patchwork")
         return id;
     if (id === "@inkandswitch/patchwork-bootloader") {

package/dist/vite/patchwork-plugin.js

@@ -1,6 +1,7 @@
 import { importmap } from "./importmap-plugin.js";
 import { serviceworker } from "./service-worker-plugin.js";
 import { configPlugin, wasm } from "./config-plugin.js";
+import { devPlugin } from "./dev-plugin.js";
 import { iconsPlugin } from "./icons.js";
 import { htmlPlugin } from "./html-plugin.js";
 import { manifestPlugin } from "./manifest-plugin.js";
@@ -36,5 +37,6 @@ export default function patchwork(options) {
         netlifyPlugin(options),
         importmap(options),
         serviceworker(),
+        devPlugin(options),
     ].filter((plugin) => plugin != null);
 }

package/dist/vite/service-worker-plugin.d.ts

@@ -1,2 +1,6 @@
 import type { Plugin } from "vite";
+export declare const workers: {
+    specifier: string;
+    fileName: string;
+}[];
 export declare function serviceworker(): Plugin;

package/dist/vite/service-worker-plugin.js

@@ -10,7 +10,7 @@ const self = fileURLToPath(import.meta.url);
 // own chunks. Their heavy imports are marked external and resolved to
 // /packages/... URLs (both workers are created with type:"module", so the
 // browser fetches those as regular network requests).
-const workers = [
+export const workers = [
     {
         specifier: "@inkandswitch/patchwork-bootloader/service-worker",
         fileName: "service-worker.js",
@@ -26,10 +26,17 @@ const workers = [
 ];
 export function serviceworker() {
     const entryIds = new Set();
+    let serve = false;
     return {
         name: "@patchwork/service-worker",
         enforce: "pre",
+        configResolved(config) {
+            serve = config.command === "serve";
+        },
         async buildStart() {
+            // emitFile throws in serve mode.
+            if (serve)
+                return;
             for (const { specifier, fileName } of workers) {
                 const resolved = await this.resolve(specifier, self);
                 entryIds.add(resolved.id);

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/inkandswitch/patchwork-system.git",
     "directory": "core/patchwork"
   },
-  "version": "0.5.0",
+  "version": "0.6.1",
   "author": "Ink & Switch",
   "type": "module",
   "license": "MIT",
@@ -33,23 +33,23 @@
   },
   "dependencies": {
     "@automerge/automerge": "3.3.2",
-    "@automerge/automerge-repo": "2.6.0-subduction.46",
+    "@automerge/automerge-repo": "2.6.0-subduction.47",
     "@automerge/automerge-repo-keyhive": "0.3.0-alpha.sub.8b",
-    "@automerge/automerge-repo-storage-indexeddb": "2.6.0-subduction.46",
-    "@automerge/automerge-subduction": "0.16.0",
-    "@automerge/vanillajs": "2.6.0-subduction.46",
+    "@automerge/automerge-repo-storage-indexeddb": "2.6.0-subduction.47",
+    "@automerge/automerge-subduction": "0.16.1",
+    "@automerge/vanillajs": "2.6.0-subduction.47",
     "@types/debug": "^4.1.13",
     "debug": "^4.4.3",
+    "esbuild": "^0.23.1",
     "sharp": "^0.35.3",
     "vite-plugin-wasm": "^3.6.0",
-    "@inkandswitch/patchwork-elements": "^6.0.0",
+    "@inkandswitch/patchwork-bootloader": "^0.6.2",
     "@inkandswitch/patchwork-plugins": "^1.2.0",
-    "@inkandswitch/patchwork-bootloader": "^0.6.0",
     "@inkandswitch/patchwork-filesystem": "^0.2.5",
+    "@inkandswitch/patchwork-elements": "^6.0.0",
     "@inkandswitch/patchwork-providers": "^0.5.0"
   },
   "devDependencies": {
-    "esbuild": "^0.23.1",
     "rollup": "^4.61.1",
     "vite": "^7.3.5"
   },

package/src/createAccount.ts

@@ -40,7 +40,6 @@ export const createDefaultAccount: AccountCreator<AccountDoc> = async (
   ]);
 
   accountHandle.change((doc) => {
-    doc.frameToolId = "threepane";
     doc.rootFolderUrl = rootFolder.url;
     doc.moduleSettingsUrl = moduleSettings.url;
     doc.contactUrl = contact.url;

package/src/index.ts

@@ -244,6 +244,7 @@ async function doSetup(options: PatchworkOptions): Promise<Patchwork> {
       repo,
       accountDocHandle,
       siteTitle,
+      frameToolId: options.frameToolId,
     });
   }
 

package/src/router.ts

@@ -66,6 +66,7 @@ export interface RouterParams {
   repo: Repo;
   accountDocHandle: DocHandle<AccountDoc>;
   siteTitle: string;
+  frameToolId?: string;
 }
 
 export interface Router {
@@ -84,6 +85,7 @@ export function createRouter({
   repo,
   accountDocHandle,
   siteTitle,
+  frameToolId,
 }: RouterParams): Router {
   const route = async () => {
     // The first call seeds the root view's tool/doc so it can mount; later
@@ -92,7 +94,10 @@ export function createRouter({
       const params = new URLSearchParams(location.hash.slice(1));
       const frame = params.get("frame");
       const toolId =
-        frame ?? accountDocHandle.doc().frameToolId ?? registeredFrameToolId();
+        frame ??
+        accountDocHandle.doc().frameToolId ??
+        frameToolId ??
+        registeredFrameToolId();
       if (!toolId) {
         console.error("patchwork: no frame tool registered, nothing to mount");
         return;

package/src/types.ts

@@ -74,6 +74,17 @@ export interface PatchworkOptions {
    */
   title?: string;
 
+  /**
+   * Id of the tool that frames this site — what mounts in the root view when
+   * the user hasn't chosen one on their account and the URL doesn't name one
+   * via `#frame=`. Must be a tool one of the {@link
+   * PatchworkOptions.packageListURL} sources registers.
+   *
+   * Falls back to the first registered tool tagged `frame-tool`, which with
+   * more than one of them depends on module load order.
+   */
+  frameToolId?: string;
+
   /** DOM id of the `<patchwork-view>` hosting the root tool. Defaults to "root". */
   rootElementId?: string;
 

package/src/vite/config-plugin.ts

@@ -10,6 +10,28 @@ import {
 
 const CORS_HEADERS = { "Access-Control-Allow-Origin": "*" };
 
+/**
+ * The build-time constants both the page bundle and the workers are compiled
+ * against. Values are already JSON — the shape vite's `define` and esbuild's
+ * `define` both take.
+ */
+export function buildDefines(
+  options: PatchworkVitePluginOptions = {}
+): Record<string, string> {
+  const classicSyncServer =
+    options.syncServers && typeof options.syncServers.classic === "string"
+      ? options.syncServers.classic
+      : DEFAULT_SYNC_SERVERS.classic;
+  return {
+    __SYNC_SERVER__: JSON.stringify(resolvePrimarySyncServer(options)),
+    __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
+    __SITE_TITLE__: JSON.stringify(options.title ?? DEFAULT_TITLE),
+    __STORAGE_PREFIX__: JSON.stringify(
+      options.storagePrefix ?? DEFAULT_STORAGE_PREFIX
+    ),
+  };
+}
+
 /**
  * Owns envPrefix, define (__SITE_TITLE__/__STORAGE_PREFIX__/sync-server
  * configuration),
@@ -24,25 +46,17 @@ export function configPlugin(
   return {
     name: "@patchwork/config",
     config() {
-      const primarySyncServer = resolvePrimarySyncServer(options);
-      const classicSyncServer =
-        options.syncServers && typeof options.syncServers.classic === "string"
-          ? options.syncServers.classic
-          : DEFAULT_SYNC_SERVERS.classic;
-      // __STORAGE_PREFIX__ is defined unconditionally: the tab and the shared
-      // automerge worker resolve it separately, and only a define reaches both.
-      const define: Record<string, string> = {
-        __SYNC_SERVER__: JSON.stringify(primarySyncServer),
-        __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
-        __SITE_TITLE__: JSON.stringify(options.title ?? DEFAULT_TITLE),
-        __STORAGE_PREFIX__: JSON.stringify(
-          options.storagePrefix ?? DEFAULT_STORAGE_PREFIX
-        ),
-      };
-
       return {
         envPrefix: ["VITE_", "PATCHWORK_"],
-        define,
+        define: buildDefines(options),
+        optimizeDeps: {
+          exclude: ["@automerge/automerge-repo-storage-indexeddb"],
+          // Dep pre-bundling runs esbuild directly, outside the plugin
+          // pipeline that applies `define`. Without this the page would fall
+          // back to the built-in storage prefix while the workers used the
+          // configured one, and they have to open the same databases.
+          esbuildOptions: { define: buildDefines(options) },
+        },
         server:
           options.server === false
             ? undefined

package/src/vite/dev-plugin.ts

@@ -0,0 +1,154 @@
+import type { Plugin } from "vite";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import * as esbuild from "esbuild";
+import { wasmAssets } from "@inkandswitch/patchwork-bootloader/externals";
+import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
+import { buildDefines } from "./config-plugin.js";
+import { builtins, devDependencyId } from "./importmap-plugin.js";
+import { workers } from "./service-worker-plugin.js";
+
+const PATCHWORK_CSS = "/@inkandswitch/patchwork/global.css";
+const BOOTLOADER_CSS = "/@inkandswitch/patchwork-bootloader/global.css";
+
+// The generated index.html links the stylesheet by bare specifier, which the
+// build resolves and the dev server does not. Serving the two files under
+// these paths, and pointing the link at the first one, covers the gap.
+const stylesheets: Record<string, string> = {
+  [PATCHWORK_CSS]: fileURLToPath(
+    import.meta.resolve("@inkandswitch/patchwork/global.css")
+  ),
+  [BOOTLOADER_CSS]: fileURLToPath(
+    import.meta.resolve("@inkandswitch/patchwork-bootloader/global.css")
+  ),
+};
+
+/**
+ * Workers are `type: "module"` scripts the browser fetches directly, so import
+ * maps don't apply to them and their heavy imports have to resolve to real
+ * URLs. The build rewrites those to the `/packages/...` chunks it emits; here
+ * they become the dev server's own optimized-dep URLs.
+ */
+function externalBuiltins(): esbuild.Plugin {
+  return {
+    name: "patchwork-dev-externals",
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, (args) => {
+        if (!(args.path in builtins)) return null;
+        return {
+          path: `/@id/${devDependencyId(args.path)}`,
+          external: true,
+        };
+      });
+    },
+  };
+}
+
+function workerContexts(
+  options: PatchworkVitePluginOptions
+): Map<string, Promise<esbuild.BuildContext>> {
+  const contexts = new Map<string, Promise<esbuild.BuildContext>>();
+  for (const { specifier, fileName } of workers) {
+    contexts.set(
+      `/${fileName}`,
+      esbuild.context({
+        entryPoints: [fileURLToPath(import.meta.resolve(specifier))],
+        bundle: true,
+        write: false,
+        format: "esm",
+        platform: "browser",
+        target: "firefox115",
+        sourcemap: "inline",
+        define: buildDefines(options),
+        plugins: [externalBuiltins()],
+      })
+    );
+  }
+  return contexts;
+}
+
+export function devPlugin(options: PatchworkVitePluginOptions = {}): Plugin {
+  let serve = false;
+  let contexts: Map<string, Promise<esbuild.BuildContext>> | undefined;
+  const wasm = new Map(
+    wasmAssets().map(({ fileName, path }) => [`/${fileName}`, path])
+  );
+
+  return {
+    name: "@patchwork/dev",
+    configResolved(config) {
+      serve = config.command === "serve";
+    },
+    transformIndexHtml(html) {
+      if (!serve) return html;
+      return html.replace(
+        `href="@inkandswitch/patchwork/global.css"`,
+        `href="${PATCHWORK_CSS}"`
+      );
+    },
+    async buildEnd() {
+      if (!contexts) return;
+      for (const context of contexts.values()) (await context).dispose();
+      contexts = undefined;
+    },
+    configureServer(server) {
+      contexts = workerContexts(options);
+
+      server.middlewares.use(async (request, response, next) => {
+        const pathname = request.url?.split("?")[0] ?? "";
+
+        const stylesheet = stylesheets[pathname];
+        if (stylesheet) {
+          try {
+            const css = await readFile(stylesheet, "utf8");
+            response.setHeader("Content-Type", "text/css");
+            response.setHeader("Cache-Control", "no-cache");
+            response.end(
+              pathname === PATCHWORK_CSS
+                ? css.replace(
+                    `"@inkandswitch/patchwork-bootloader/global.css"`,
+                    `"${BOOTLOADER_CSS}"`
+                  )
+                : css
+            );
+          } catch {
+            next();
+          }
+          return;
+        }
+
+        const binary = wasm.get(pathname);
+        if (binary) {
+          try {
+            response.setHeader("Content-Type", "application/wasm");
+            response.setHeader("Cache-Control", "no-cache");
+            response.end(await readFile(binary));
+          } catch {
+            next();
+          }
+          return;
+        }
+
+        const context = contexts?.get(pathname);
+        if (!context) return next();
+        try {
+          // Rebuilt per request rather than watched: a worker is fetched once
+          // when the browser starts it, and esbuild's incremental rebuild is
+          // cheaper than keeping a watcher per entry.
+          const result = await (await context).rebuild();
+          response.setHeader("Content-Type", "text/javascript");
+          response.setHeader("Cache-Control", "no-cache");
+          response.end(result.outputFiles![0]!.text);
+        } catch (error) {
+          // A worker that fails to build is otherwise a silent 500 in a
+          // context with no console of its own.
+          server.config.logger.error(
+            `[patchwork] failed to bundle ${pathname}: ${error}`
+          );
+          response.statusCode = 500;
+          response.end(`console.error(${JSON.stringify(String(error))})`);
+        }
+      });
+    },
+  };
+}

package/src/vite/importmap-plugin.ts

@@ -65,7 +65,7 @@ function createImportMap(options?: PatchworkVitePluginOptions) {
   return { importmap, builtins };
 }
 
-function devDependencyId(id: string): string {
+export function devDependencyId(id: string): string {
   if (id === "@inkandswitch/patchwork") return id;
   if (id === "@inkandswitch/patchwork-bootloader") {
     return `@inkandswitch/patchwork > ${id}`;

package/src/vite/patchwork-plugin.ts

@@ -3,6 +3,7 @@ import type { Plugin, ServerOptions, PreviewOptions, BuildOptions } from "vite";
 import { importmap } from "./importmap-plugin.js";
 import { serviceworker } from "./service-worker-plugin.js";
 import { configPlugin, wasm } from "./config-plugin.js";
+import { devPlugin } from "./dev-plugin.js";
 import { iconsPlugin } from "./icons.js";
 import { htmlPlugin } from "./html-plugin.js";
 import { manifestPlugin } from "./manifest-plugin.js";
@@ -40,6 +41,7 @@ export default function patchwork(options?: PatchworkVitePluginOptions) {
     netlifyPlugin(options),
     importmap(options),
     serviceworker(),
+    devPlugin(options),
   ].filter((plugin): plugin is Plugin => plugin != null);
 }
 

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

@@ -13,7 +13,7 @@ const self = fileURLToPath(import.meta.url);
 // own chunks. Their heavy imports are marked external and resolved to
 // /packages/... URLs (both workers are created with type:"module", so the
 // browser fetches those as regular network requests).
-const workers = [
+export const workers = [
   {
     specifier: "@inkandswitch/patchwork-bootloader/service-worker",
     fileName: "service-worker.js",
@@ -30,11 +30,17 @@ const workers = [
 
 export function serviceworker(): Plugin {
   const entryIds = new Set<string>();
+  let serve = false;
 
   return {
     name: "@patchwork/service-worker",
     enforce: "pre",
+    configResolved(config) {
+      serve = config.command === "serve";
+    },
     async buildStart() {
+      // emitFile throws in serve mode.
+      if (serve) return;
       for (const { specifier, fileName } of workers) {
         const resolved = await this.resolve(specifier, self);
         entryIds.add(resolved!.id);