@jtfmumm/patchwork-standalone-vite

Vite plugin for building standalone patchwork tool apps. Handles all the Vite configuration needed to use a patchwork tool module (fetched via @jtfmumm/automerge-deps) with @jtfmumm/patchwork-standalone-frame.

What it does

• WASM support: configures vite-plugin-wasm for automerge
• Solid.js JSX: configures vite-plugin-solid
• Patchwork external stubbing: patchwork tools are built with @inkandswitch/patchwork-* and @automerge/automerge-repo-keyhive as externals (provided at runtime by the patchwork import map). This plugin stubs them out since they're unused in standalone mode. If a stubbed package is actually installed (e.g. keyhive in keyhive mode), the real package is used instead.
• Shared dependency deduplication: ensures solid-js, @automerge/automerge, and @automerge/automerge-repo are shared between your app and the fetched tool module
• Tool chunk serving: patchwork tools have code-split chunks (lazy-loaded via dynamic import()). During dev, Vite pre-bundles the tool entry but the chunk files still need to be served from node_modules/. This plugin handles that automatically.
• Build target: sets esnext for top-level await support

Install

pnpm add -D @jtfmumm/patchwork-standalone-vite

Usage

// vite.config.ts
import { defineConfig } from "vite";
import { patchworkStandalone } from "@jtfmumm/patchwork-standalone-vite";

export default defineConfig({
  plugins: [patchworkStandalone({ tools: ["my-tool"] })],
});

The tools option lists tool packages fetched by automerge-deps. This enables chunk serving for their code-split dynamic imports during dev.

Full example

A minimal standalone app that loads a patchwork tool from an automerge FolderDoc:

automerge-deps.json

{
  "syncServers": ["wss://sync-server.example.com"],
  "dependencies": [
    { "name": "my-tool", "url": "automerge:<automergeURL>" }
  ]
}

src/main.ts

import { mountStandaloneApp } from "@jtfmumm/patchwork-standalone-frame";
import { plugins } from "my-tool";

const root = document.getElementById("root");
if (root) {
  mountStandaloneApp(root, plugins);
}

package.json dependencies:

{
  "dependencies": {
    "@automerge/automerge": "^3.2.4",
    "@automerge/automerge-repo": "2.5.3",
    "@automerge/automerge-repo-network-websocket": "2.5.3",
    "@automerge/automerge-repo-storage-indexeddb": "2.5.3",
    "@jtfmumm/patchwork-standalone-frame": "0.4.0",
    "solid-js": "^1.9.9"
  },
  "devDependencies": {
    "@jtfmumm/automerge-deps": "^0.1.4",
    "@jtfmumm/patchwork-standalone-vite": "^0.4.0",
    "vite": "^6.0.3"
  }
}

Run pnpm fetch-deps to pull the tool, then pnpm dev to start.