@enbox/create-dapp 0.0.0-stage → 0.0.1

package/template/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "enbox-dapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@enbox/browser": "0.3.82",
+    "@enbox/react": "0.0.6",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.15",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.2.0",
+    "typescript": "5.9.3",
+    "vite": "6.4.4"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,75 @@
+import { useEnboxConnection } from '@enbox/react';
+import { useEffect } from 'react';
+
+import app from './app.json' with { type: 'json' };
+import { Demo } from './demo/Demo.js';
+import { ProfileCard } from './ProfileCard.js';
+
+export function App() {
+  const connection = useEnboxConnection();
+  const busy = connection.isConnecting || connection.isDisconnecting;
+  useEffect(() => { document.title = app.name; }, []);
+
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <a className="wordmark" href="./" aria-label={`${app.name} home`}>
+          <span className="brand-symbol" aria-hidden="true">e</span>
+          <span>Made with Enbox</span>
+        </a>
+        {connection.isConnected && (
+          <button className="button button-quiet" type="button" disabled={busy}
+            onClick={() => { void connection.disconnect().catch(() => {}); }}>
+            {connection.isDisconnecting ? 'Disconnecting…' : 'Disconnect'}
+          </button>
+        )}
+      </header>
+
+      <main>
+        <div className="intro">
+          <p className="eyebrow">A small beginning</p>
+          <h1>{app.name}</h1>
+          <p>Bring your profile. Make a little space your own.</p>
+        </div>
+
+        {connection.walletRepair && (
+          <div className="notice" role="status">
+            <div>
+              <strong>Reconnect your profile</strong>
+              <p>Your wallet access needs a refresh before you can save.</p>
+            </div>
+            <button className="button button-secondary" type="button" disabled={busy}
+              onClick={() => { void connection.connect().catch(() => {}); }}>
+              {connection.isConnecting ? 'Reconnecting…' : 'Reconnect'}
+            </button>
+          </div>
+        )}
+        {connection.connectionError && (
+          <div className="notice notice-error" role="alert">
+            <p>{connection.connectionError.message}</p>
+          </div>
+        )}
+
+        {connection.isConnected && connection.did ? (
+          <div className="connected-content">
+            <ProfileCard enbox={connection.enbox} did={connection.did} identityName={connection.identityName} />
+            <Demo disabled={busy || connection.walletRepair !== undefined} />
+          </div>
+        ) : (
+          <section className="panel connect-panel" aria-labelledby="connect-title">
+            <div className="welcome-symbol" aria-hidden="true">✳</div>
+            <h2 id="connect-title">A hello that belongs to you.</h2>
+            <p>Connect your profile to make this space your own.</p>
+            <button className="button button-primary" type="button" disabled={busy}
+              onClick={() => { void connection.connect().catch(() => {}); }}>
+              {connection.isConnecting ? 'Connecting…' : connection.isDisconnecting ? 'Disconnecting…' : 'Connect wallet'}
+              {!busy && <span aria-hidden="true">↗</span>}
+            </button>
+            <p className="connect-caption">Your wallet will ask you to approve access.</p>
+          </section>
+        )}
+      </main>
+      <footer className="app-footer">Your identity. Your data. Your little corner of the web.</footer>
+    </div>
+  );
+}

package/template/src/ProfileCard.tsx

@@ -0,0 +1,54 @@
+import type { Enbox } from '@enbox/browser';
+import { useProfile } from '@enbox/react';
+import { useState } from 'react';
+
+export function ProfileCard({ enbox, did, identityName }: {
+  enbox: Enbox | undefined;
+  did: string;
+  identityName?: string | undefined;
+}) {
+  const profile = useProfile(enbox, did);
+  const [failedAvatar, setFailedAvatar] = useState<string>();
+  const publishedName = profile.displayName?.trim();
+  const name = publishedName || identityName?.trim();
+  const avatar = profile.avatarUrl !== failedAvatar ? profile.avatarUrl : undefined;
+  const initials = name?.split(/\s+/).slice(0, 2).map((part) => part[0]).join('').toUpperCase();
+  const profileStatus = profile.fields.profile.status;
+  const publicName = publishedName || (profileStatus === 'idle' || profileStatus === 'loading' ? 'Loading…'
+    : profileStatus === 'error' ? 'Unavailable' : 'Not published');
+  const shortDid = did.length > 34 ? `${did.slice(0, 22)}…${did.slice(-8)}` : did;
+
+  return (
+    <section className="panel profile-card" aria-labelledby="profile-title">
+      <div className="profile-heading">
+        <div className="avatar" aria-hidden="true">
+          {avatar
+            ? <img src={avatar} alt="" onError={() => setFailedAvatar(avatar)} />
+            : <span>{initials || '◌'}</span>}
+        </div>
+        <div className="profile-identity">
+          <p className="eyebrow">Your public profile</p>
+          <h2 id="profile-title">{name || 'Your profile'}</h2>
+          <p className="short-did" title={did}>{shortDid}</p>
+        </div>
+        <span className="connected-badge"><span aria-hidden="true" />Connected</span>
+      </div>
+      {profileStatus === 'loading' && !name && <p role="status">Looking up your public profile…</p>}
+      {profileStatus === 'not-found' && <p>No public profile yet. You can still make yourself at home.</p>}
+      {profileStatus === 'error' && (
+        <p className="profile-message" role="status">Your public profile couldn’t be loaded. The app is still yours to use.</p>
+      )}
+      <details className="profile-details">
+        <summary>Profile details</summary>
+        {profile.bio && <p className="profile-bio">{profile.bio}</p>}
+        <dl>
+          <dt>Profile ID</dt><dd><code>{did}</code></dd>
+          <dt>Public name</dt><dd>{publicName}</dd>
+          {profile.location && <><dt>Location</dt><dd>{profile.location}</dd></>}
+          {profile.website && <><dt>Website</dt><dd>{profile.website}</dd></>}
+        </dl>
+        {profile.fields.profile.failure && <p className="error-detail">{profile.fields.profile.failure.message}</p>}
+      </details>
+    </section>
+  );
+}

package/template/src/app.json

@@ -0,0 +1,4 @@
+{
+  "id": "enbox-dapp",
+  "name": "Hello, Enbox"
+}

package/template/src/application.ts

@@ -0,0 +1,10 @@
+import { defineApplicationManifest } from '@enbox/react/config';
+import type { CreateEnboxClientOptions } from '@enbox/react/config';
+
+import app from './app.json' with { type: 'json' };
+import { DemoProtocol } from './demo/protocol.js';
+
+export const config = {
+  application: defineApplicationManifest({ protocols: [DemoProtocol] }),
+  wallet: { appName: app.name, applicationId: app.id },
+} satisfies CreateEnboxClientOptions;

package/template/src/demo/Demo.tsx

@@ -0,0 +1,48 @@
+import { useEnboxMutation, useRecords } from '@enbox/react';
+
+import { CHOICES, DemoProtocol } from './protocol.js';
+import type { ChoiceEmoji } from './protocol.js';
+import './demo.css';
+
+export function Demo({ disabled = false }: { disabled?: boolean }) {
+  const choices = useRecords(DemoProtocol, 'choice', { materialize: true, pagination: { limit: 1 } });
+  const save = useEnboxMutation((enbox, emoji: ChoiceEmoji) =>
+    enbox.using(DemoProtocol).records.set('choice', { data: { emoji } }));
+  const observed = CHOICES.find(({ emoji }) => emoji === choices.records[0]?.value.emoji);
+
+  return (
+    <section className="panel demo" aria-labelledby="demo-title">
+      <h2 id="demo-title">Your first record</h2>
+      <p>Choose a little hello. It’s encrypted for this app, separate from your public profile.</p>
+      <fieldset className="choice-options" disabled={disabled || save.isPending || choices.status !== 'ready'}>
+        <legend className="sr-only">Choose your hello</legend>
+        {CHOICES.map(({ emoji, label }) => (
+          <button type="button" className="choice-option" key={emoji}
+            aria-label={`Choose ${label.toLowerCase()}`}
+            aria-pressed={observed?.emoji === emoji}
+            onClick={() => { void save.run(emoji).catch(() => {}); }}>
+            <span className="choice-emoji" aria-hidden="true">{emoji}</span>
+            <span>{label}</span>
+          </button>
+        ))}
+      </fieldset>
+      <p className="demo-status" role="status">
+        {save.isPending ? 'Saving your choice…'
+          : choices.status === 'loading' ? 'Reading your saved choice…'
+            : observed ? `Saved: ${observed.emoji} ${observed.label}` : 'Choose an emoji to get started.'}
+      </p>
+      {choices.status === 'error' && (
+        <div className="notice notice-error" role="alert">
+          <p>Couldn’t read your choice: {choices.error.message}</p>
+          <button type="button" className="button button-secondary" disabled={disabled || save.isPending}
+            onClick={() => { void choices.retry().catch(() => {}); }}>
+            Try again
+          </button>
+        </div>
+      )}
+      {save.error && (
+        <p className="error-detail" role="alert">Couldn’t save: {save.error.message} Choose an emoji again to retry.</p>
+      )}
+    </section>
+  );
+}

package/template/src/demo/demo.css

@@ -0,0 +1,17 @@
+.demo { padding: 30px; }
+.demo > p { margin-top: 12px; color: var(--muted); font-size: .85rem; }
+.choice-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 0; margin: 24px 0 0; border: 0; min-width: 0; }
+.choice-option { display: grid; place-items: center; gap: 10px; padding: 20px 8px 17px; border: 1px solid var(--border); border-radius: 13px; background: #fff; color: #59645a; font-size: .75rem; transition: background .15s, border-color .15s; }
+.choice-option:hover:not(:disabled) { background: #f8faf5; border-color: #a6bea0; }
+.choice-option[aria-pressed="true"] { background: #edf3e7; border-color: #709865; color: #315b46; }
+.choice-emoji { font-size: 1.9rem; line-height: 1.3; }
+.demo .demo-status { min-height: 20px; margin-top: 18px; font-size: .74rem; text-align: center; }
+.demo > p[role="alert"] { color: #7d4533; }
+.demo .notice { margin: 16px 0 0; }
+@media (max-width: 600px) {
+  .demo { padding: 26px 20px; }
+  .choice-options { gap: 8px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .choice-option { transition: none; }
+}

package/template/src/demo/protocol.ts

@@ -0,0 +1,28 @@
+import { defineProtocol, recordCodecs } from '@enbox/react/config';
+import type { RecordValidator } from '@enbox/react/config';
+
+import app from '../app.json' with { type: 'json' };
+
+export const CHOICES = [
+  { emoji: '🌱', label: 'Grow' },
+  { emoji: '✨', label: 'Spark' },
+  { emoji: '🚀', label: 'Explore' },
+] as const;
+
+export type ChoiceEmoji = typeof CHOICES[number]['emoji'];
+export type Choice = { emoji: ChoiceEmoji };
+
+const validateChoice: RecordValidator = (value: unknown): boolean =>
+  value !== null && typeof value === 'object' && !Array.isArray(value)
+  && 'emoji' in value && CHOICES.some(({ emoji }) => emoji === value.emoji);
+
+// Replace this example URI with one you own before publishing your app.
+// Keep it stable after launch: it identifies the app's saved data and grants.
+export const DemoProtocol = defineProtocol({
+  protocol: `https://example.com/${encodeURIComponent(app.id)}/demo/v1`,
+  published: false,
+  types: {
+    choice: { dataFormats: ['application/json'], encryptionRequired: true },
+  },
+  structure: { choice: { $recordLimit: { max: 1 } } },
+} as const, { choice: recordCodecs.json<Choice>({ validator: validateChoice }) });

package/template/src/main.tsx

@@ -0,0 +1,52 @@
+import { activatePolyfills } from '@enbox/browser';
+import { EnboxProvider } from '@enbox/react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App.js';
+import { config } from './application.js';
+import workerPath from './sw.ts?worker&url';
+import './style.css';
+
+/** Wait for this app's worker to control the page before initializing Enbox. */
+async function prepareBrowser(): Promise<void> {
+  if (!('serviceWorker' in navigator)) throw new Error('This browser needs service worker support.');
+  const workerUrl = new URL(workerPath, window.location.href).href;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let finished = false;
+  let stopListening = (): void => {};
+  try {
+    await Promise.race([
+      (async () => {
+        await navigator.serviceWorker.register(workerUrl, { type: 'module', scope: import.meta.env.BASE_URL });
+        if (finished) throw new Error('Service worker startup wait ended.');
+        await navigator.serviceWorker.ready;
+        if (finished) throw new Error('Service worker startup wait ended.');
+        // A ready registration does not guarantee that our worker controls this page.
+        await new Promise<void>((resolve) => {
+          const resolveWhenControlled = (): void => {
+            if (navigator.serviceWorker.controller?.scriptURL === workerUrl) resolve();
+          };
+          navigator.serviceWorker.addEventListener('controllerchange', resolveWhenControlled);
+          stopListening = () => navigator.serviceWorker.removeEventListener('controllerchange', resolveWhenControlled);
+          resolveWhenControlled();
+        });
+      })(),
+      new Promise<never>((_resolve, reject) => {
+        timer = setTimeout(() => reject(new Error('The app service worker did not become ready. Reload to try again.')), 20_000);
+      }),
+    ]);
+    activatePolyfills({ serviceWorker: false });
+  } finally {
+    finished = true;
+    clearTimeout(timer);
+    stopListening();
+  }
+}
+
+void prepareBrowser().then(() => {
+  createRoot(document.getElementById('root')!).render(<StrictMode><EnboxProvider config={config}><App /></EnboxProvider></StrictMode>);
+}).catch((cause: unknown) => {
+  const root = document.getElementById('root')!;
+  root.textContent = cause instanceof Error ? cause.message : 'Could not open the app.';
+});

package/template/src/style.css

@@ -0,0 +1,108 @@
+:root {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #27342e;
+  background: #f6f5f0;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color-scheme: light;
+  --muted: #68716b;
+  --accent: #315b46;
+  --border: #e1e4dc;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; }
+button, input { font: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: default; opacity: .52; }
+:focus-visible { outline: 3px solid #709e76; outline-offset: 4px; }
+a { color: inherit; }
+p { margin: 0; line-height: 1.65; }
+h1, h2 { margin: 0; line-height: 1.15; }
+h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.035em; }
+
+.app-shell { max-width: 1040px; margin: 0 auto; padding: 0 36px; }
+.app-header {
+  min-height: 108px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.wordmark { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: .8rem; font-weight: 600; }
+.brand-symbol {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--accent);
+  color: #fff;
+  font: italic 25px/.9 Georgia, serif;
+}
+main { max-width: 640px; margin: 45px auto 0; }
+.intro { margin-bottom: 36px; }
+.eyebrow { color: var(--muted); font-size: .65rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
+.intro h1 { margin: 10px 0 15px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.9rem, 7vw, 4.3rem); font-weight: 400; letter-spacing: -.065em; overflow-wrap: anywhere; }
+.intro > p:last-child { color: var(--muted); font-size: .94rem; }
+.panel { background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 6px 24px #27342e04; }
+.connected-content { display: grid; gap: 20px; }
+
+.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 42px; padding: 10px 17px; border: 1px solid transparent; border-radius: 10px; font-size: .84rem; font-weight: 550; transition: background .15s, border-color .15s; }
+.button-primary { background: var(--accent); color: #fff; }
+.button-primary:hover:not(:disabled) { background: #264836; }
+.button-secondary { background: #fff; color: var(--accent); border-color: #b8ccbb; }
+.button-secondary:hover:not(:disabled) { background: #f3f7f0; }
+.button-quiet { background: transparent; border-color: var(--border); color: var(--muted); font-size: .77rem; min-height: 36px; }
+.button-quiet:hover:not(:disabled) { border-color: #a6b4a7; color: var(--accent); }
+
+.connect-panel { padding: 42px 40px; text-align: center; }
+.welcome-symbol { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 25px; border-radius: 22px; color: var(--accent); background: #eef2e8; font-size: 2.6rem; }
+.connect-panel h2 { font-size: 1.45rem; }
+.connect-panel > p { max-width: 350px; margin: 13px auto 24px; color: var(--muted); font-size: .88rem; }
+.connect-panel .button { min-width: 190px; }
+.connect-panel .connect-caption { margin: 14px 0 0; max-width: none; font-size: .73rem; }
+
+.profile-card { padding: 24px 26px; }
+.profile-heading { display: flex; align-items: center; gap: 15px; }
+.avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #edece5; color: #626d59; font: 1.15rem Georgia, serif; }
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+.profile-identity { min-width: 0; flex: 1; }
+.profile-identity .eyebrow { font-size: .58rem; letter-spacing: .1em; }
+.profile-identity h2 { font-size: 1.08rem; margin: 5px 0; overflow-wrap: anywhere; }
+.short-did { color: var(--muted); font-size: .69rem; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
+.connected-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: .65rem; white-space: nowrap; }
+.connected-badge > span { width: 5px; height: 5px; background: #638b5b; border-radius: 50%; }
+.profile-card > p { margin-top: 16px; color: var(--muted); font-size: .8rem; }
+.profile-details { border-top: 1px solid #edf0e8; margin-top: 20px; padding-top: 13px; }
+.profile-details summary { width: fit-content; cursor: pointer; color: var(--muted); font-size: .74rem; }
+.profile-details summary:hover { color: var(--accent); }
+.profile-details dl { margin: 18px 0 0; font-size: .78rem; }
+.profile-details dt { margin-top: 12px; color: var(--muted); font-size: .69rem; }
+.profile-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
+.profile-details code { font-family: ui-monospace, monospace; font-size: .72rem; }
+.profile-bio { margin-top: 15px; color: var(--muted); font-size: .82rem; white-space: pre-wrap; }
+
+.notice { margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ccd9c5; border-radius: 13px; padding: 15px 18px; background: #edf3e8; font-size: .82rem; }
+.notice p { flex-basis: 100%; }
+.notice strong { font-weight: 600; }
+.notice-error { background: #fff5ef; border-color: #eed2c3; color: #7d4533; }
+.error-detail { font-size: .73rem; overflow-wrap: anywhere; }
+.app-footer { padding: 38px 0; color: #7f857e; text-align: center; font-size: .69rem; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+
+@media (max-width: 600px) {
+  .app-shell { padding: 0 20px; }
+  .app-header { min-height: 84px; }
+  main { margin-top: 27px; }
+  .intro { margin-bottom: 27px; }
+  .connect-panel { padding: 34px 22px; }
+  .profile-card { padding: 22px 20px; }
+  .connected-badge { align-self: flex-start; margin-top: 4px; font-size: 0; }
+  .connected-badge > span { width: 7px; height: 7px; }
+  .app-footer { font-size: .65rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .button { transition: none; }
+}

package/template/src/sw.ts

@@ -0,0 +1,40 @@
+/// <reference lib="webworker" />
+import { activatePolyfills } from '@enbox/browser';
+
+declare let self: ServiceWorkerGlobalScope;
+declare const __APP_SHELL__: { version: string; files: string[] };
+
+// Vite injects only production outputs; development uses its live module server.
+if (import.meta.env.PROD) {
+  const shell = __APP_SHELL__;
+  const prefix = `enbox-shell:${self.registration.scope}:`;
+  const cacheName = `${prefix}${shell.version}`;
+  const root = new URL(self.registration.scope);
+  const index = new URL('index.html', root);
+  const files = shell.files.map((file) => new URL(file, self.registration.scope).href);
+
+  self.addEventListener('install', (event) => {
+    event.waitUntil(caches.open(cacheName).then((cache) =>
+      cache.addAll(files.map((url) => new Request(url, { cache: 'reload' })))));
+  });
+  self.addEventListener('activate', (event) => {
+    event.waitUntil(caches.keys().then((names) => Promise.all(
+      names.filter((name) => name.startsWith(prefix) && name !== cacheName).map((name) => caches.delete(name)),
+    )));
+  });
+  self.addEventListener('fetch', (event) => {
+    if (event.request.method !== 'GET') return;
+    const url = new URL(event.request.url);
+    // This starter has no router: leave other navigation and API routes alone.
+    const isIndex = event.request.mode === 'navigate' && url.origin === index.origin &&
+      (url.pathname === index.pathname || url.pathname === root.pathname);
+    const target = isIndex ? index.href : url.href;
+    if (files.includes(target)) {
+      event.respondWith(caches.open(cacheName).then(async (cache) =>
+        await cache.match(target) ?? fetch(event.request)));
+    }
+  });
+}
+
+// The current browser SDK performs automatic worker takeover.
+activatePolyfills({ onCacheCheck: () => ({ ttl: 30_000 }) });

package/template/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable", "WebWorker"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,47 @@
+import { createHash } from 'node:crypto';
+import { fileURLToPath } from 'node:url';
+
+import react from '@vitejs/plugin-react';
+import { defineConfig, normalizePath } from 'vite';
+
+const appWorker = normalizePath(fileURLToPath(new URL('./src/sw.ts', import.meta.url)));
+
+export default defineConfig({
+  plugins: [
+    react(),
+    {
+      name: 'app-shell',
+      apply: 'build',
+      generateBundle: {
+        // Wait for Vite to emit the worker and finalize index.html.
+        order: 'post',
+        handler(_options, bundle) {
+          const worker = bundle['sw.js'];
+          if (worker?.type !== 'asset' || typeof worker.source !== 'string') {
+            this.error('The app service worker was not emitted.');
+          }
+          const files = Object.keys(bundle).filter((file) => !file.endsWith('.map')).sort();
+          const hash = createHash('sha256');
+          for (const file of files) {
+            const output = bundle[file]!;
+            hash.update(file).update('\0').update(output.type === 'chunk' ? output.code : output.source);
+          }
+          worker.source = worker.source.replace('__APP_SHELL__', JSON.stringify({
+            version: hash.digest('hex').slice(0, 16),
+            files: files.filter((file) => file !== 'sw.js'),
+          }));
+        },
+      },
+    },
+  ],
+  worker: {
+    format: 'es',
+    rollupOptions: {
+      output: {
+        entryFileNames: ({ facadeModuleId }) => facadeModuleId === appWorker ? 'sw.js' : 'assets/[name]-[hash].js',
+      },
+    },
+  },
+  server: { host: '127.0.0.1', headers: { 'Service-Worker-Allowed': '/' } },
+  preview: { host: '127.0.0.1' },
+});