@enbox/create-dapp 0.0.1 → 0.0.2

package/README.md

@@ -8,17 +8,22 @@ Requires Node.js 22.12.0 or newer. Create an app with either command:
 ```sh
 npm create @enbox/dapp@latest my-app
 # or
-npx @enbox/create-dapp@latest my-app
+bun create @enbox/dapp@latest my-app
 ```
 
 Then run:
 
 ```sh
 cd my-app
-npm ci
+npm install
 npm run dev
 ```
 
+The CLI detects npm or Bun from the invoking package manager and prints its
+commands. Use `--package-manager npm` or `--package-manager bun` to override
+that choice. The template includes no lockfile: your first install creates one
+for your package manager. Commit it and use frozen installs thereafter.
+
 The generator copies its bundled template into a new or empty directory. It
 does not install packages, run Git, or make network requests. It refuses
 nonempty destinations and symbolic-link targets; there is no force option.
@@ -27,7 +32,7 @@ interactive terminal; scripts must provide it explicitly.
 
 The directory's basename becomes the display name in `src/app.json`. Its
 normalized lowercase npm name becomes both the package name and the stable
-`app.json` ID, and the bundled lockfile is updated to match. The ID identifies
+`app.json` ID. The ID identifies
 the app to the wallet and defines its private demo protocol namespace. Keep
 the ID when changing the display name so saved data remains in the same
 namespace. Source code is copied unchanged. Run `--help` for usage or

package/bin/create-dapp.mjs

@@ -11,17 +11,20 @@ const manifest = JSON.parse(fs.readFileSync(join(packageRoot, 'package.json'), '
 const excluded = new Set([
   'node_modules', 'dist', 'build', '.git', '.artifacts', '.vite', '.cache',
   'coverage', 'test-results', 'playwright-report', '.DS_Store',
+  'package-lock.json', 'bun.lock', 'bun.lockb', 'npm-shrinkwrap.json', 'yarn.lock', 'pnpm-lock.yaml',
 ]);
 
 const usage = `Create a minimal Enbox React application.
 
 Usage:
   npm create @enbox/dapp@latest [directory]
+  bun create @enbox/dapp@latest [directory]
   npx @enbox/create-dapp@latest [directory]
 
 Options:
   -h, --help     Show this help
   -v, --version  Show the generator version
+  --package-manager <npm|bun>  Override the invoking package manager
 
 The destination must be empty. No dependencies are installed and no Git
 repository is created. Use "." to create an app in the current empty directory.
@@ -78,11 +81,6 @@ function createProject(destination) {
     value.id = name;
     value.name = displayName;
   });
-  customizeJson(files, 'package-lock.json', (value) => {
-    if (value.packages?.[''] === undefined) throw new Error('root package metadata is missing');
-    value.name = name;
-    value.packages[''].name = name;
-  });
 
   const createdFiles = [];
   const createdDirectories = [];
@@ -128,11 +126,16 @@ function quoteDirectory(directory) {
 
 async function main() {
   const { values, positionals } = parseArgs({
-    options: { help: { type: 'boolean', short: 'h' }, version: { type: 'boolean', short: 'v' } },
+    options: {
+      help: { type: 'boolean', short: 'h' }, version: { type: 'boolean', short: 'v' },
+      'package-manager': { type: 'string' },
+    },
     allowPositionals: true,
   });
   if (values.help) { console.log(usage); return; }
   if (values.version) { console.log(manifest.version); return; }
+  const manager = values['package-manager'] ?? (process.env.npm_config_user_agent?.startsWith('bun/') ? 'bun' : 'npm');
+  if (manager !== 'npm' && manager !== 'bun') throw new Error('The package manager must be npm or bun.');
   if (positionals.length > 1) throw new Error('Provide one target directory. Run with --help for usage.');
   let directory = positionals[0];
   if (directory === undefined) {
@@ -149,7 +152,7 @@ async function main() {
   const destination = resolve(directory);
   createProject(destination);
   const changeDirectory = process.platform === 'win32' ? 'Set-Location -LiteralPath' : 'cd';
-  console.log(`Created ${basename(destination)}.\n\n${process.platform === 'win32' ? 'In PowerShell' : 'Next'}:\n  ${changeDirectory} ${quoteDirectory(destination)}\n  npm ci\n  npm run dev`);
+  console.log(`Created ${basename(destination)}.\n\n${process.platform === 'win32' ? 'In PowerShell' : 'Next'}:\n  ${changeDirectory} ${quoteDirectory(destination)}\n  ${manager} install\n  ${manager} run dev`);
 }
 
 main().catch((cause) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enbox/create-dapp",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Create a minimal Enbox React application",
   "type": "module",
   "license": "Apache-2.0",
@@ -17,7 +17,6 @@
     "template/src",
     "template/index.html",
     "template/package.json",
-    "template/package-lock.json",
     "template/tsconfig.json",
     "template/vite.config.ts",
     "template/README.md",

package/template/README.md

@@ -1,20 +1,22 @@
 # Hello, Enbox
 
-A small React app with a wallet connection, a read-only public profile, and one
-private choice saved through Enbox. No application server is required.
+A small React app with a wallet connection, a read-only public profile, and
+a private task board with projects and tasks. No application server is required.
 
 ## Run it
 
 Use Node 22.12 or newer:
 
 ```sh
-npm ci
+npm install
 npm run dev
 ```
 
 Open the local URL and choose **Connect wallet**. Enbox handles wallet selection
-and approval. Once connected, choose an emoji. The displayed choice comes from
-the live record view and is restored when this profile returns.
+and approval. Create a project, add tasks, and check them off as you finish.
+Select a task to edit its title or delete it. Completed tasks can be reopened.
+Switching projects selects that project’s own tasks. Saved values come from native
+live record views and are restored when this profile returns.
 
 ```sh
 npm run typecheck
@@ -28,9 +30,11 @@ toolchain. Production builds precache the app shell for
 later offline visits; `npm run preview` serves that built app locally. Deploy
 the generated `dist` directory on an HTTPS origin with service worker support.
 
-Direct dependencies use exact versions; `npm ci` installs the committed
-dependency tree. Update the manifest and lockfile together when accepting
-dependency or security fixes.
+You can also use `bun install` and `bun run dev`. No lockfile is generated
+until your first install. Commit the resulting `package-lock.json` or `bun.lock`;
+then use `npm ci` or `bun install --frozen-lockfile` in CI. Direct dependencies
+use exact versions. Update the manifest and your lockfile together when
+accepting dependency or security fixes.
 
 ## Make it yours
 
@@ -48,23 +52,28 @@ the expanded details still show which name is publicly published.
 
 The removable demo lives entirely in `src/demo`:
 
-- `protocol.ts` declares an encrypted singleton record and validates its emoji.
-- `Demo.tsx` reads through `useRecords` and writes absolute choices through
-  `useEnboxMutation` and the typed `records.set` API.
+- `protocol.ts` declares encrypted `project` and `project/task` records with
+  payload validators. Tasks store a title and completion state.
+- `use-task-board.ts` defines `useProjects`, `useTasks`, and `useTask` with
+  `useEnboxRecords` and `useEnboxRecord`. A child selection takes its direct
+  parent context ID; task details also select an exact record ID.
+- `TaskBoard.tsx` renders the board and calls typed create, patch, and delete commands.
+  Simple event handlers use `mutate`. Forms await `mutateAsync` and check
+  `isCurrent()` before clearing drafts or closing details. Native observation updates the displayed data.
 - `demo.css` styles the demo. Shared app and profile styles live in `src/style.css`.
 
 To replace the demo, register your own typed application protocol in
-`application.ts` in place of `DemoProtocol`. Then delete `src/demo` and remove
-the `Demo` import and component from `App.tsx`. Enbox requires at least one
+`application.ts` in place of `TaskBoardProtocol`. Then delete `src/demo` and remove
+the `TaskBoard` import and component from `App.tsx`. Enbox requires at least one
 application protocol, so keep your replacement registered. The profile card,
 connection shell, and service worker remain the base for your app.
 
 The demo's default protocol URI is
-`https://example.com/<encoded app ID>/demo/v1`. Replace the URI expression in
+`https://example.com/<encoded app ID>/demo/v2`. Replace the URI expression in
 `src/demo/protocol.ts` with a stable URI
 you control before publishing. This URI identifies saved records and wallet
 grants: changing it creates a different data namespace. Once deployed, keep
 that identifier fixed when changing the app's display name.
 
-Public profile information and the encrypted demo choice are separate. Choosing
-an emoji updates this app's private record; it does not edit the public profile.
+Public profile information and the encrypted task board are separate. Task
+updates change this app’s private records; they do not edit the public profile.

package/template/package.json

@@ -6,12 +6,12 @@
   "scripts": {
     "dev": "vite",
     "typecheck": "tsc --noEmit",
-    "build": "npm run typecheck && vite build",
+    "build": "tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@enbox/browser": "0.3.82",
-    "@enbox/react": "0.0.6",
+    "@enbox/react": "0.0.7",
     "react": "19.3.0",
     "react-dom": "19.3.0"
   },

package/template/src/App.tsx

@@ -2,7 +2,7 @@ import { useEnboxConnection } from '@enbox/react';
 import { useEffect } from 'react';
 
 import app from './app.json' with { type: 'json' };
-import { Demo } from './demo/Demo.js';
+import { TaskBoard } from './demo/TaskBoard.js';
 import { ProfileCard } from './ProfileCard.js';
 
 export function App() {
@@ -53,7 +53,7 @@ export function App() {
         {connection.isConnected && connection.did ? (
           <div className="connected-content">
             <ProfileCard enbox={connection.enbox} did={connection.did} identityName={connection.identityName} />
-            <Demo disabled={busy || connection.walletRepair !== undefined} />
+            <TaskBoard disabled={busy || connection.walletRepair !== undefined} />
           </div>
         ) : (
           <section className="panel connect-panel" aria-labelledby="connect-title">

package/template/src/application.ts

@@ -2,9 +2,9 @@ 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';
+import { TaskBoardProtocol } from './demo/protocol.js';
 
 export const config = {
-  application: defineApplicationManifest({ protocols: [DemoProtocol] }),
+  application: defineApplicationManifest({ protocols: [TaskBoardProtocol] }),
   wallet: { appName: app.name, applicationId: app.id },
 } satisfies CreateEnboxClientOptions;

package/template/src/demo/TaskBoard.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+
+import { useProjects, useTask, useTasks } from './use-task-board.js';
+import './demo.css';
+
+export function TaskBoard({ disabled = false }: { disabled?: boolean }) {
+  const projects = useProjects();
+  const [projectContextId, setProjectContextId] = useState<string>();
+  const [name, setName] = useState('');
+  const prompt = projects.isLoading ? 'Loading projects…'
+    : projects.isReady && projects.records.length === 0 ? 'Create your first project to get started.'
+      : 'Select a project to see its tasks.';
+  async function addProject(event: FormEvent) {
+    event.preventDefault();
+    try {
+      const record = await projects.create.mutateAsync({ name: name.trim() });
+      if (projects.create.isCurrent()) { setProjectContextId(record.contextId); setName(''); }
+    } catch { /* The mutation error is rendered below. */ }
+  }
+  return (
+    <section className="panel demo" aria-labelledby="demo-title">
+      <h2 id="demo-title">Your projects</h2>
+      <p>A private task board. Create a project, add tasks, and make a little progress.</p>
+      <form className="demo-form" onSubmit={addProject}>
+        <label htmlFor="project-name">Project name</label>
+        <input id="project-name" value={name} maxLength={60} required
+          disabled={disabled || projects.create.isPending} onChange={(event) => setName(event.target.value)} />
+        <button className="button button-secondary" disabled={disabled || projects.create.isPending || !name.trim()}>
+          {projects.create.isPending ? 'Creating…' : 'Create project'}
+        </button>
+      </form>
+      {projects.create.error && <p role="alert">Couldn’t create the project: {projects.create.error.message}</p>}
+      {projects.status === 'error' && <div role="alert">
+        <p>Couldn’t load projects: {projects.error.message}</p>
+        <button type="button" disabled={disabled} onClick={() => projects.retry()}>Try again</button>
+      </div>}
+      <div className="project-picker" role="group" aria-label="Projects">
+        {projects.records.map((project) => <button type="button" className="button button-quiet" key={project.id} disabled={disabled}
+          aria-pressed={project.contextId === projectContextId} onClick={() => setProjectContextId(project.contextId)}>{project.data.name}</button>)}
+      </div>
+      {projects.hasMore && <button type="button" disabled={disabled || projects.isLoadingMore}
+        onClick={() => projects.loadMore()}>More projects</button>}
+      {projectContextId !== undefined
+        ? <ProjectTasks key={projectContextId} within={projectContextId} disabled={disabled} />
+        : <p role="status">{prompt}</p>}
+    </section>
+  );
+}
+
+function ProjectTasks({ within, disabled }: { within: string; disabled: boolean }) {
+  const tasks = useTasks(within);
+  const [title, setTitle] = useState('');
+  const [selectedId, setSelectedId] = useState<string>();
+  async function addTask(event: FormEvent) {
+    event.preventDefault();
+    try {
+      const record = await tasks.create.mutateAsync({ title: title.trim(), completed: false });
+      if (tasks.create.isCurrent()) { setSelectedId(record.id); setTitle(''); }
+    } catch { /* The mutation error is rendered below. */ }
+  }
+  return <div className="project-content">
+    <h3>Tasks</h3>
+    <form className="demo-form" onSubmit={addTask}>
+      <label htmlFor="task-title">New task</label>
+      <input id="task-title" value={title} maxLength={120} required
+        disabled={disabled || tasks.create.isPending} onChange={(event) => setTitle(event.target.value)} />
+      <button className="button button-secondary" disabled={disabled || tasks.create.isPending || !title.trim()}>Add task</button>
+    </form>
+    {tasks.create.error && <p role="alert">Couldn’t add the task: {tasks.create.error.message}</p>}
+    {tasks.patch.error && <p role="alert">Couldn’t update the task: {tasks.patch.error.message}</p>}
+    {tasks.status === 'error' && <p role="alert">Couldn’t load tasks. <button type="button"
+      disabled={disabled} onClick={() => tasks.retry()}>Retry tasks</button></p>}
+    <ul className="task-list">
+      {tasks.records.map((task) => <li key={task.id} data-completed={task.data.completed}>
+        <input type="checkbox" aria-label={`Complete ${task.data.title}`} checked={task.data.completed}
+          disabled={disabled || tasks.patch.isPendingFor(task.id)}
+          onChange={(event) => tasks.patch.mutate({ id: task.id, patch: { completed: event.currentTarget.checked } })} />
+        <button type="button" className="button button-quiet" aria-label={`Open task ${task.data.title}`}
+          disabled={disabled} aria-pressed={task.id === selectedId} onClick={() => setSelectedId(task.id)}>{task.data.title}</button>
+      </li>)}
+    </ul>
+    {tasks.hasMore && <button type="button" disabled={disabled || tasks.isLoadingMore}
+      onClick={() => tasks.loadMore()}>More tasks</button>}
+    {selectedId !== undefined
+      ? <TaskDetails key={selectedId} within={within} recordId={selectedId} disabled={disabled} onClose={() => setSelectedId(undefined)} />
+      : <p role="status">Select a task to see its details.</p>}
+  </div>;
+}
+
+function TaskDetails({ within, recordId, disabled, onClose }: {
+  within: string; recordId: string; disabled: boolean; onClose: () => void;
+}) {
+  const task = useTask(within, recordId);
+  const [draft, setDraft] = useState<string>();
+  const pending = task.patch.isPending || task.delete.isPending;
+  async function saveTitle(event: FormEvent) {
+    event.preventDefault();
+    if (draft === undefined) return;
+    try {
+      await task.patch.mutateAsync({ title: draft.trim() });
+      if (task.patch.isCurrent()) setDraft(undefined);
+    } catch { /* The mutation error is rendered below. */ }
+  }
+  async function deleteTask() {
+    try {
+      await task.delete.mutateAsync();
+      if (task.delete.isCurrent()) onClose();
+    } catch { /* The mutation error is rendered below. */ }
+  }
+  const data = task.data;
+  return <section className="task-details" aria-label="Task details">
+    <h3>Task details</h3>
+    {task.status === 'error' && <p role="alert">Couldn’t load the task. <button type="button"
+      disabled={disabled} onClick={() => task.retry()}>Retry task</button></p>}
+    {data === undefined && task.isLoading && <p role="status">Loading task…</p>}
+    {data === undefined && task.isReady && <p role="status">This task is no longer available.</p>}
+    {data !== undefined && <>
+      <p>{data.title} · {data.completed ? 'Completed' : 'To do'}</p>
+      {draft === undefined
+        ? <button type="button" className="button button-quiet" disabled={disabled || pending}
+          onClick={() => setDraft(data.title)}>Edit title</button>
+        : <form className="demo-form" onSubmit={saveTitle}>
+          <label htmlFor="edit-task-title">Task title</label>
+          <input id="edit-task-title" value={draft} maxLength={120} required disabled={disabled || pending}
+            onChange={(event) => setDraft(event.target.value)} />
+          <button className="button button-secondary" disabled={disabled || pending || !draft.trim()}>Save title</button>
+          <button type="button" className="button button-quiet" disabled={disabled || pending} onClick={() => setDraft(undefined)}>Cancel</button>
+        </form>}
+      <button type="button" className="button button-quiet" disabled={disabled || pending} onClick={deleteTask}>Delete task</button>
+    </>}
+    {task.patch.error && <p role="alert">Couldn’t update the task: {task.patch.error.message}</p>}
+    {task.delete.error && <p role="alert">Couldn’t delete the task: {task.delete.error.message}</p>}
+    <button type="button" className="button button-quiet" onClick={onClose}>Close details</button>
+  </section>;
+}

package/template/src/demo/demo.css

@@ -1,17 +1,15 @@
 .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; }
+.demo [role="alert"] { color: #7d4533; }
+.demo-form { display: grid; gap: .5rem; margin: 1rem 0; }
+.demo-form input { padding: .65rem; border: 1px solid var(--border); border-radius: .5rem; font: inherit; background: transparent; color: inherit; }
+.project-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
+.project-picker button[aria-pressed="true"], .task-list button[aria-pressed="true"] { background: #edf3e7; border-color: #709865; color: var(--accent); }
+.project-content, .task-details { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
+.task-list { padding: 0; list-style: none; }
+.task-list li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; }
+.task-list li[data-completed="true"] button { text-decoration: line-through; color: var(--muted); }
+.task-list button { text-align: left; overflow-wrap: anywhere; }
 @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

@@ -1,28 +1,26 @@
 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);
+export type Project = { name: string };
+export type Task = { title: string; completed: boolean };
 
 // 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`,
+export const TaskBoardProtocol = defineProtocol({
+  protocol: `https://example.com/${encodeURIComponent(app.id)}/demo/v2`,
   published: false,
   types: {
-    choice: { dataFormats: ['application/json'], encryptionRequired: true },
+    project: { dataFormats: ['application/json'], encryptionRequired: true },
+    task: { dataFormats: ['application/json'], encryptionRequired: true },
   },
-  structure: { choice: { $recordLimit: { max: 1 } } },
-} as const, { choice: recordCodecs.json<Choice>({ validator: validateChoice }) });
+  structure: { project: { task: {} } },
+} as const, {
+  project: recordCodecs.json<Project>({ validator: (value: unknown) =>
+    value !== null && typeof value === 'object' && !Array.isArray(value) && 'name' in value
+    && typeof value.name === 'string' && value.name.trim().length > 0 && value.name.length <= 60 }),
+  task: recordCodecs.json<Task>({ validator: (value: unknown) =>
+    value !== null && typeof value === 'object' && !Array.isArray(value) && 'title' in value && 'completed' in value
+    && typeof value.title === 'string' && value.title.trim().length > 0 && value.title.length <= 120
+    && typeof value.completed === 'boolean' }),
+});

package/template/src/demo/use-task-board.ts

@@ -0,0 +1,16 @@
+import { useEnboxRecord, useEnboxRecords } from '@enbox/react';
+import { DateSort } from '@enbox/react/config';
+
+import { TaskBoardProtocol } from './protocol.js';
+
+export function useProjects() {
+  return useEnboxRecords(TaskBoardProtocol, 'project', { dateSort: DateSort.CreatedDescending });
+}
+
+export function useTasks(within: string) {
+  return useEnboxRecords(TaskBoardProtocol, 'project/task', { within });
+}
+
+export function useTask(within: string, recordId: string) {
+  return useEnboxRecord(TaskBoardProtocol, 'project/task', { within, recordId });
+}

package/template/src/main.tsx

@@ -1,4 +1,4 @@
-import { activatePolyfills } from '@enbox/browser';
+import { prepareBrowser } from '@enbox/browser';
 import { EnboxProvider } from '@enbox/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -8,43 +8,9 @@ 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(() => {
+void prepareBrowser(workerPath, {
+  registrationOptions: { type: 'module', scope: import.meta.env.BASE_URL },
+}).then(() => {
   createRoot(document.getElementById('root')!).render(<StrictMode><EnboxProvider config={config}><App /></EnboxProvider></StrictMode>);
 }).catch((cause: unknown) => {
   const root = document.getElementById('root')!;