create-tinyjoin 0.0.6 → 0.2.0

package/README.md

@@ -17,11 +17,13 @@ Your app should look something like this:
 - Task list with add/complete/delete
 - Single TinyJoin database with one `todos` table
 - Demonstrates basic CRUD operations in SQL
+- Automatic multi-tab access for saved data
+- Offline production app loading after the first online visit
 - Perfect starter example
 
 It shares its markup and styling with the equivalent
 [create-tinybase](https://github.com/tinyplex/create-tinybase) vanilla
-TypeScript starter, apart from the TinyJoin accent color.
+TypeScript starter, with the TinyJoin accent color and system fonts.
 
 For agents and CI, every option can be supplied non-interactively:
 
@@ -45,6 +47,7 @@ The generated project is a single Vite application at its root (`.ts` below
 becomes `.js` when JavaScript is chosen):
 
 - `index.html` loads the app and defines its theme variables.
+- `vite.config.ts` enables production offline loading through `tinyjoinOffline()`.
 - `src/index.ts` bootstraps the app on load.
 - `src/app.ts` builds the app shell, showing a spinner until the database opens.
 - `src/database.ts` opens the database, defines the `todos` table, and adds the
@@ -63,6 +66,20 @@ the JavaScript language is chosen, and `tinycreate` blanks the types during
 post-processing. A JavaScript project also drops `tsconfig.json`, the
 `typescript` devDependency, and the `tsc --noEmit` step from its build script.
 
+## Offline builds
+
+Generated applications use `tinyjoinOffline()` from `tinyjoin/vite`. The
+production build includes the application and complete database runtime in
+its offline copy, including files loaded only when persistent storage opens.
+There are no remote font requests. Development remains a normal Vite session;
+use `npm run build` and `npm run preview` to test offline behavior.
+
+New application versions wait for open tabs to close before activating. This
+keeps existing pages on their matching build; it does not migrate database
+schemas. Applications with their own service worker can use the plugin's
+manifest mode. Offline loading and saved local data do not synchronize with
+a server or another device.
+
 ## Development
 
 ```sh
@@ -80,7 +97,8 @@ vocabulary to `cspell.json` rather than disabling the check.
 modes, against the snapshots in `test/__snapshots__`. Run
 `npx vitest run test/cli.test.ts -u` to accept intentional template changes.
 `npm run test:generated` installs and builds all four combinations, and
-`npm run test:e2e` then drives the two saved apps in Chromium.
+`npm run test:e2e` then drives the two saved apps in Chromium and tests offline
+production loading for all four combinations.
 
 Run the local generator from this repository's parent directory with:
 

package/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import{existsSync as g}from"node:fs";import{dirname as m,join as r}from"node:path";import{fileURLToPath as d}from"node:url";import{createCLI as f,detectPackageManager as y}from"tinycreate";const h=r(m(d(import.meta.url)),"templates"),a=process.argv.slice(2),c=[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],p=[{title:"Save data across reloads (recommended)",value:"opfs"},{title:"Start fresh each time",value:"memory"}],v={command:"npm create tinyjoin@latest --",nonInteractiveFlag:"--non-interactive",options:{projectName:{type:"string",required:!0},language:{values:c.map(({value:t})=>t),required:!0,default:"typescript"},storage:{values:p.map(({value:t})=>t),required:!0,default:"opfs"},installAndRun:{values:[!0,!1],required:!0,recommendedForAgents:!1}}};(a.includes("--help")||a.includes("-h"))&&(console.log(`create-tinyjoin
+import{existsSync as g}from"node:fs";import{dirname as m,join as a}from"node:path";import{fileURLToPath as d}from"node:url";import{createCLI as f,detectPackageManager as y}from"tinycreate";const h=a(m(d(import.meta.url)),"templates"),r=process.argv.slice(2),c=[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],p=[{title:"Save data across reloads (recommended)",value:"opfs"},{title:"Start fresh each time",value:"memory"}],v={command:"npm create tinyjoin@latest --",nonInteractiveFlag:"--non-interactive",options:{projectName:{type:"string",required:!0},language:{values:c.map(({value:t})=>t),required:!0,default:"typescript"},storage:{values:p.map(({value:t})=>t),required:!0,default:"opfs"},installAndRun:{values:[!0,!1],required:!0,recommendedForAgents:!1}}};(r.includes("--help")||r.includes("-h"))&&(console.log(`create-tinyjoin
 
 Interactively scaffold a TinyJoin application:
   npm create tinyjoin@latest
@@ -11,5 +11,5 @@ Run non-interactively:
 
 Agent and automation commands:
   --list-options  Print the current option catalog as JSON
-  --help          Show this help`),process.exit(0)),a.includes("--list-options")&&(console.log(JSON.stringify(v,null,2)),process.exit(0));const j={welcomeMessage:`\u{1F389} Welcome to TinyJoin!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinyjoin-app",validate:l},{type:"select",name:"language",message:"Language:",choices:[...c],initial:0},{type:"select",name:"storage",message:"Todo data:",choices:[...p],initial:0},{type:"confirm",name:"installAndRun",message:"Install dependencies and start the app?",initial:!0}],createContext:t=>{const n=String(t.projectName??"").trim(),o=l(n);if(o!==!0)throw new TypeError(o);const e=u(t.language===0?"typescript":t.language??"typescript","language",["typescript","javascript"]),s=u(t.storage===0?"opfs":t.storage??"opfs","storage",["opfs","memory"]),i=e==="typescript";return{projectName:n,installAndRun:t.installAndRun===!0||t.installAndRun==="true",language:e,typescript:i,javascript:!i,scriptExt:i?"ts":"js",ext:i?"ts":"js",storage:s,usesOpfs:s==="opfs",storageName:b(n),tinyjoinDependency:process.env.CREATE_TINYJOIN_DEPENDENCY??"^0.0.5"}},getFiles:t=>{const{ext:n,typescript:o}=t,e=i=>({template:`client/src/${i}.ts.hbs`,output:`src/${i}.${n}`,prettier:!0,transpile:!o}),s=i=>({template:`client/src/${i}.css.hbs`,output:`src/${i}.css`,prettier:!0});return[{template:"README.md.hbs",output:"README.md",prettier:!0},{template:"AGENTS.md.hbs",output:"AGENTS.md",prettier:!0},{template:"client/package.json.hbs",output:"package.json",prettier:!0},{template:"client/.gitignore.hbs",output:".gitignore"},{template:"client/index.html.hbs",output:"index.html",prettier:!0},...o?[{template:"client/tsconfig.json.hbs",output:"tsconfig.json",prettier:!0}]:[],{template:"client/public/favicon.svg",output:"public/favicon.svg"},o?{template:"client/public/ts.svg",output:"public/ts.svg"}:{template:"client/public/js.svg",output:"public/js.svg"},e("index"),e("app"),e("topBar"),s("topBar"),e("title"),s("title"),e("info"),s("info"),e("loading"),s("loading"),e("button"),s("button"),e("input"),s("input"),e("database"),e("todoInput"),s("todoInput"),e("todoList"),s("todoList"),e("todoItem"),s("todoItem")]},templateRoot:h,installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:".",onSuccess:t=>{const n=y();console.log("Next steps:"),console.log(`  cd ${t}`),console.log(`  ${n} install`),console.log(`  ${n} run dev`)}};f(j).catch(t=>{console.error(t instanceof Error?t.message:String(t)),process.exit(1)});function l(t){return!/^[a-z0-9][a-z0-9._-]*$/i.test(t)||t==="."||t===".."?"Use letters, numbers, dots, dashes, or underscores without path separators.":g(r(process.cwd(),t))?`Directory "${t}" already exists. Choose a different name.`:!0}function u(t,n,o){const e=typeof t=="string"?t:"";if(!o.includes(e))throw new TypeError(`${x(n)} must be one of: ${o.join(", ")}.`);return e}function b(t){const n=t.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")||"app",o="tinyjoin-",e="-db-v1";return`${o}${n.slice(0,64-o.length-e.length)}${e}`}function x(t){return`${t.charAt(0).toUpperCase()}${t.slice(1)}`}
+  --help          Show this help`),process.exit(0)),r.includes("--list-options")&&(console.log(JSON.stringify(v,null,2)),process.exit(0));const j={welcomeMessage:`\u{1F389} Welcome to TinyJoin!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinyjoin-app",validate:l},{type:"select",name:"language",message:"Language:",choices:[...c],initial:0},{type:"select",name:"storage",message:"Todo data:",choices:[...p],initial:0},{type:"confirm",name:"installAndRun",message:"Install dependencies and start the app?",initial:!0}],createContext:t=>{const n=String(t.projectName??"").trim(),o=l(n);if(o!==!0)throw new TypeError(o);const e=u(t.language===0?"typescript":t.language??"typescript","language",["typescript","javascript"]),s=u(t.storage===0?"opfs":t.storage??"opfs","storage",["opfs","memory"]),i=e==="typescript";return{projectName:n,installAndRun:t.installAndRun===!0||t.installAndRun==="true",language:e,typescript:i,javascript:!i,scriptExt:i?"ts":"js",ext:i?"ts":"js",storage:s,usesOpfs:s==="opfs",storageName:b(n),tinyjoinDependency:process.env.CREATE_TINYJOIN_DEPENDENCY??"^0.2.0"}},getFiles:t=>{const{ext:n,typescript:o}=t,e=i=>({template:`client/src/${i}.ts.hbs`,output:`src/${i}.${n}`,prettier:!0,transpile:!o}),s=i=>({template:`client/src/${i}.css.hbs`,output:`src/${i}.css`,prettier:!0});return[{template:"README.md.hbs",output:"README.md",prettier:!0},{template:"AGENTS.md.hbs",output:"AGENTS.md",prettier:!0},{template:"client/package.json.hbs",output:"package.json",prettier:!0},{template:"client/.gitignore.hbs",output:".gitignore"},{template:"client/index.html.hbs",output:"index.html",prettier:!0},{template:"client/vite.config.ts.hbs",output:`vite.config.${n}`,prettier:!0,transpile:!o},...o?[{template:"client/tsconfig.json.hbs",output:"tsconfig.json",prettier:!0}]:[],{template:"client/public/favicon.svg",output:"public/favicon.svg"},o?{template:"client/public/ts.svg",output:"public/ts.svg"}:{template:"client/public/js.svg",output:"public/js.svg"},e("index"),e("app"),e("topBar"),s("topBar"),e("title"),s("title"),e("info"),s("info"),e("loading"),s("loading"),e("error"),s("error"),e("button"),s("button"),e("input"),s("input"),e("database"),e("todoInput"),s("todoInput"),e("todoList"),s("todoList"),e("todoItem"),s("todoItem")]},templateRoot:h,installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:".",onSuccess:t=>{const n=y();console.log("Next steps:"),console.log(`  cd ${t}`),console.log(`  ${n} install`),console.log(`  ${n} run dev`)}};f(j).catch(t=>{console.error(t instanceof Error?t.message:String(t)),process.exit(1)});function l(t){return!/^[a-z0-9][a-z0-9._-]*$/i.test(t)||t==="."||t===".."?"Use letters, numbers, dots, dashes, or underscores without path separators.":g(a(process.cwd(),t))?`Directory "${t}" already exists. Choose a different name.`:!0}function u(t,n,o){const e=typeof t=="string"?t:"";if(!o.includes(e))throw new TypeError(`${x(n)} must be one of: ${o.join(", ")}.`);return e}function b(t){const n=t.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")||"app",o="tinyjoin-",e="-db-v2";return`${o}${n.slice(0,64-o.length-e.length)}${e}`}function x(t){return`${t.charAt(0).toUpperCase()}${t.slice(1)}`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinyjoin",
-  "version": "0.0.6",
+  "version": "0.2.0",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",

package/templates/AGENTS.md.hbs

@@ -12,12 +12,18 @@ lifecycle while adapting the application to the user's requirements.
 - **Persistence**: {{#if usesOpfs}}saved in this browser across reloads{{else}}kept for the current visit only{{/if}}
 
 The database client is opened once in `src/database.{{ext}}` and shared through
-the `databaseReady` promise. Keep that single client: opening a second one for
-the same data is rejected.
+the `databaseReady` promise. Reuse it within the application.{{#if usesOpfs}}
+Tabs share the saved database automatically; keep its name stable.{{/if}}
 
-The schema is created before the first read, and the starter rows are only
-inserted when the table is empty. Preserve that ordering so a reload does not
-duplicate or overwrite existing data.
+One atomic script creates the schema and inserts starter rows. Only
+`TABLE_ALREADY_EXISTS` is ignored, so concurrent first visits cannot seed
+twice and an existing empty table stays empty. Preserve this behavior.
+
+Await writes, preserve drafts on failure, and keep errors visible. Retry at
+startup reloads the page to create a fresh client. Do not automatically replay
+a failed write: a storage failure can leave its commit outcome uncertain.
+If the browser restores a cached page after teardown, the `pageshow` handler
+reloads it so the app creates a fresh client instead of reusing a closed one.
 
 ## Key Files
 
@@ -25,12 +31,20 @@ duplicate or overwrite existing data.
 - `src/database.{{ext}}` opens the database and defines the `todos` table.
 - `src/app.{{ext}}` contains the main application UI.
 - `src/todoList.{{ext}}` reads the `todos` table and subscribes to its changes.
+- `vite.config.{{ext}}` enables offline production builds with `tinyjoinOffline()`.
+
+The production app caches its complete build after an online visit. Keep the
+offline plugin configured when changing build output. It waits for open tabs
+to close before activating an update; do not force updates into running tabs.
+For an existing service worker, use the plugin's manifest mode and integrate
+its assets there instead of adding a competing registration. Offline caching
+does not migrate a saved schema or synchronize data to a server.
 
 ## Working Method
 
 1. Read `README.md` and `src/database.{{ext}}` before making changes.
 2. Keep application data in TinyJoin rather than duplicating it in UI state.
-3. Use the `sql` tagged template or `$1` parameter arrays for application
+3. Use `$1` parameter arrays for application
    values. Do not concatenate user input into SQL.
 4. Generate stable row identifiers in application code.
 5. Keep the schema safe to run again when the app reloads.
@@ -48,5 +62,9 @@ npm run build
 
 Change data in the running app, reload the page, and confirm the change
 {{#if usesOpfs}}remains{{else}}resets, as this starter was generated without persistence{{/if}}.
+For offline verification, use `npm run preview`, wait for the browser's offline
+copy to finish installing, close the page, disconnect the network, and reopen
+the same URL. Verify loading, edits, and reloads; the development server does
+not install offline support.
 
 Current TinyJoin documentation: https://tinyjoin.org/llms.txt

package/templates/README.md.hbs

@@ -25,6 +25,7 @@ This project is a single web application, built with Vite and
 ### Key Files
 
 - **`index.html`**: The main HTML file that loads your app
+- **`vite.config.{{ext}}`**: Production build and offline support
 - **`src/index.{{ext}}`**: Entry point that bootstraps the app
 - **`src/app.{{ext}}`**: Main application logic
 - **`src/database.{{ext}}`**: TinyJoin database and `todos` table setup
@@ -42,12 +43,47 @@ to the `todos` table so that every change re-renders the list.
 
 {{#if usesOpfs}}
 **Persistence** is enabled. Your data is automatically saved and restored when
-you reload the page.
+you reload the page. Tabs share the same saved database, and changes appear
+in every open tab.
+
+The browser can clear or evict saved data, so keep a separate copy of anything
+irreplaceable. Deleting all todos leaves the list empty after a reload; the
+example rows are added only when the table is first created.
 {{else}}
 **Persistence** is not enabled. Your todos are kept for the current visit and
 start fresh after a reload.
 {{/if}}
 
+Startup failures replace the loading spinner with a message and **Retry**.
+Failed changes show an error; a failed addition keeps the text you entered.
+Writes are not automatically retried.
+
+## Offline Use
+
+Build and preview the app to try offline support:
+
+```sh
+npm run build
+npm run preview
+```
+
+The production app downloads a local copy on its first online visit. Once
+that download finishes, you can close it, reopen it without a connection,
+and keep using your todos.{{#unless usesOpfs}} Your selected data mode still
+starts with a fresh todo list each visit.{{/unless}} The development server
+does not install an offline copy.
+
+Deploy the contents of `dist/` to an HTTPS host. Offline loading is set up by
+`tinyjoinOffline()` in `vite.config.{{ext}}`; no extra application code is needed.
+New versions wait until all open tabs close before taking over, so a working
+tab keeps its matching application files. A new deployment does not migrate
+saved database schemas. Offline use does not synchronize data with a server
+or another device.
+
+If you later add your own service worker, use the plugin's manifest mode to
+integrate its cached files with that worker instead of registering two for
+the same application. See the [offline guide](https://tinyjoin.org/guides/offline/).
+
 ## Learn More
 
 - [TinyJoin Documentation](https://tinyjoin.org)

package/templates/client/index.html.hbs

@@ -4,9 +4,6 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <title>TinyJoin Todos</title>
   <style>
@@ -18,7 +15,7 @@
       user-select: none;
       margin: 0;
       padding: 0;
-      font-family: 'Inter', sans-serif;
+      font-family: system-ui, sans-serif;
     }
 
     #root {

package/templates/client/package.json.hbs

@@ -18,6 +18,6 @@
 {{#if typescript}}
     "typescript": "^7.0.2",
 {{/if}}
-    "vite": "^8.2.1"
+    "vite": "^8.3.0"
   }
 }

package/templates/client/src/app.ts.hbs

@@ -3,6 +3,8 @@ import {createTopBar} from './topBar';
 import {showLoading, hideLoading} from './loading';
 import {createTodoInput} from './todoInput';
 import {createTodoList} from './todoList';
+import {createButton} from './button';
+import {createError, showError} from './error';
 
 export const app = async (root: HTMLElement) => {
   const appElement = document.createElement('div');
@@ -12,17 +14,24 @@ export const app = async (root: HTMLElement) => {
   // Show loading spinner
   const loadingDiv = showLoading(appElement);
 
-  // Wait for the database to be ready
-  const database = await databaseReady;
+  try {
+    const database = await databaseReady;
+    const todoInputContainer = createTodoInput(database);
+    appElement.appendChild(todoInputContainer);
 
-  // Remove loading spinner
-  hideLoading(loadingDiv);
+    const input = todoInputContainer.querySelector('input')!;
+    input.focus();
 
-  const todoInputContainer = createTodoInput(database);
-  appElement.appendChild(todoInputContainer);
-
-  const input = todoInputContainer.querySelector('input')!;
-  input.focus();
-
-  appElement.appendChild(createTodoList(database));
+    appElement.appendChild(createTodoList(database));
+  } catch (error) {
+    const message = createError();
+    message.id = 'startupError';
+    showError(message, error, 'Could not open your todos.');
+    appElement.append(
+      message,
+      createButton('Retry', () => location.reload(), 'primary'),
+    );
+  } finally {
+    hideLoading(loadingDiv);
+  }
 };

package/templates/client/src/button.css.hbs

@@ -14,6 +14,11 @@ button:hover {
   border-color: #7c3aed;
 }
 
+button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
 button.primary {
   background: #7c3aed;
   border: none;

package/templates/client/src/database.ts.hbs

@@ -1,4 +1,4 @@
-import {create, type Client} from 'tinyjoin';
+import {create, ClientError, type Client} from 'tinyjoin';
 
 export type TodoRow = {
   id: string;
@@ -18,39 +18,49 @@ export const DATA_DIR = 'memory://';
 export const createTodosDatabase = async (): Promise<TodosDatabase> => {
   const database = await create(DATA_DIR);
 
-  // Create the table, and add the starter todos, only on the first visit.
-  if (!(await hasTodosTable(database))) {
+  try {
+    await initializeTodos(database);
+    return database;
+  } catch (error) {
+    await database.close().catch(() => undefined);
+    throw error;
+  }
+};
+
+const initializeTodos = async (database: TodosDatabase): Promise<void> => {
+  try {
+    // One atomic script creates and seeds the table. Concurrent tabs can race
+    // to initialize it, but only the tab that creates the table adds examples.
     await database.exec(`
-      CREATE TABLE IF NOT EXISTS todos (
+      CREATE TABLE todos (
         id TEXT PRIMARY KEY,
         text TEXT NOT NULL,
         completed BOOLEAN NOT NULL DEFAULT false,
         created INTEGER NOT NULL DEFAULT 0
-      )
+      );
+      INSERT INTO todos (id, text, completed, created)
+      VALUES ('1', 'Learn TinyJoin', false, 1), ('2', 'Build an app', false, 2)
     `);
-    await database.query(
-      `INSERT INTO todos (id, text, completed, created)
-       VALUES ($1, $2, $3, $4), ($5, $6, $7, $8)`,
-      ['1', 'Learn TinyJoin', false, 1, '2', 'Build an app', false, 2],
-    );
-  }
-
-  return database;
-};
-
-const hasTodosTable = async (database: TodosDatabase): Promise<boolean> => {
-  try {
-    await database.query('SELECT id FROM todos LIMIT 1');
-    return true;
-  } catch {
-    return false;
+  } catch (error) {
+    if (!(error instanceof ClientError && error.code === 'TABLE_ALREADY_EXISTS')) {
+      throw error;
+    }
   }
 };
 
 export const databaseReady = createTodosDatabase();
+// Startup can reject before the page's load event. app() presents the failure.
+void databaseReady.catch(() => undefined);
 
 addEventListener(
   'pagehide',
-  () => void databaseReady.then((database) => database.close()),
+  () => void databaseReady.then((database) => database.close()).catch(() => undefined),
   {once: true},
 );
+
+// A restored page must not reuse the client closed during pagehide.
+addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    location.reload();
+  }
+});

package/templates/client/src/error.css.hbs

@@ -0,0 +1,6 @@
+.error {
+  color: #fca5a5;
+  line-height: 1.5;
+  margin: 0 0 1rem;
+  user-select: text;
+}

package/templates/client/src/error.ts.hbs

@@ -0,0 +1,39 @@
+import {ClientError} from 'tinyjoin';
+import './error.css';
+
+export const createError = (): HTMLParagraphElement => {
+  const element = document.createElement('p');
+  element.className = 'error';
+  element.setAttribute('role', 'alert');
+  element.hidden = true;
+  return element;
+};
+
+export const clearError = (element: HTMLElement): void => {
+  element.hidden = true;
+  element.textContent = '';
+};
+
+export const showError = (
+  element: HTMLElement,
+  error: unknown,
+  fallback: string,
+): void => {
+  let message = error instanceof Error ? `${fallback} ${error.message}` : fallback;
+  if (error instanceof ClientError) {
+    if (error.code === 'STORAGE_LOCKED') {
+      message = 'The saved database is busy. Close older versions of this app, then select Retry.';
+    } else if ([
+      'RECOVERY_REQUIRED',
+      'STORAGE_COMMIT_OUTCOME_UNKNOWN',
+      'STORAGE_ENGINE_POISONED',
+      'WORKER_ERROR',
+      'WORKER_MESSAGE_ERROR',
+      'WORKER_TERMINATED',
+    ].includes(error.code)) {
+      message = 'The change may have been saved. Reload this page and check your todos before trying again.';
+    }
+  }
+  element.textContent = message;
+  element.hidden = false;
+};

package/templates/client/src/index.ts.hbs

@@ -3,5 +3,5 @@ import {app} from './app';
 const root = document.getElementById('root')!;
 
 addEventListener('load', () => {
-  app(root);
+  void app(root);
 });

package/templates/client/src/todoInput.css.hbs

@@ -1,9 +1,16 @@
 #todoInput {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1.5rem;
 }
 
 #todoInput input {
   flex: 1;
+  min-width: 0;
+}
+
+#todoInput .error {
+  flex-basis: 100%;
+  margin: 0;
 }

package/templates/client/src/todoInput.ts.hbs

@@ -2,35 +2,49 @@ import './todoInput.css';
 import {type TodosDatabase} from './database';
 import {createButton} from './button';
 import {createInput} from './input';
+import {createError, clearError, showError} from './error';
 
 export const createTodoInput = (database: TodosDatabase): HTMLFormElement => {
   const container = document.createElement('form');
   container.id = 'todoInput';
 
   const input = createInput('What needs to be done?');
+  const addButton = createButton('Add', null, 'primary', 'submit');
+  const error = createError();
+  let pending = false;
 
-  const addTodo = () => {
+  const addTodo = async () => {
     const text = input.value.trim();
-    if (text) {
-      void database.query(
+    if (!text || pending) {
+      return;
+    }
+    pending = true;
+    input.disabled = true;
+    addButton.disabled = true;
+    clearError(error);
+    try {
+      await database.query(
         `INSERT INTO todos (id, text, completed, created)
          VALUES ($1, $2, $3, $4)`,
         [crypto.randomUUID(), text, false, Date.now()],
       );
       input.value = '';
+    } catch (failure) {
+      showError(error, failure, 'Could not add this todo.');
+    } finally {
+      pending = false;
+      input.disabled = false;
+      addButton.disabled = false;
       input.focus();
     }
   };
 
   container.addEventListener('submit', (event) => {
     event.preventDefault();
-    addTodo();
+    void addTodo();
   });
 
-  const addButton = createButton('Add', null, 'primary', 'submit');
-
-  container.appendChild(input);
-  container.appendChild(addButton);
+  container.append(input, addButton, error);
 
   return container;
 };

package/templates/client/src/todoItem.ts.hbs

@@ -5,7 +5,7 @@ export const createTodoItem = (
   id: string,
   text: string,
   completed: boolean,
-  onToggle: () => void,
+  onToggle: (checkbox: HTMLInputElement) => void,
   onDelete: () => void,
 ): HTMLDivElement => {
   const item = document.createElement('div');
@@ -15,7 +15,7 @@ export const createTodoItem = (
   checkbox.type = 'checkbox';
   checkbox.checked = completed;
   checkbox.id = `todo-${id}`;
-  checkbox.addEventListener('change', onToggle);
+  checkbox.addEventListener('change', () => onToggle(checkbox));
 
   const label = document.createElement('label');
   label.textContent = text;

package/templates/client/src/todoList.ts.hbs

@@ -1,38 +1,89 @@
 import './todoList.css';
 import {type TodosDatabase, type TodoRow} from './database';
 import {createTodoItem} from './todoItem';
+import {createError, clearError, showError} from './error';
 
 export const createTodoList = (database: TodosDatabase): HTMLDivElement => {
+  const container = document.createElement('div');
+  const error = createError();
   const list = document.createElement('div');
   list.id = 'todoList';
+  container.append(error, list);
+  let pending = false;
+  let mutationFailed = false;
+  let renderGeneration = 0;
+
+  const setDisabled = (disabled: boolean) => {
+    list.querySelectorAll<HTMLInputElement | HTMLButtonElement>('input, button')
+      .forEach((control) => { control.disabled = disabled; });
+  };
+
+  const mutate = async (
+    operation: () => Promise<unknown>,
+    restore?: () => void,
+  ) => {
+    if (pending) {
+      return;
+    }
+    pending = true;
+    mutationFailed = false;
+    setDisabled(true);
+    clearError(error);
+    try {
+      await operation();
+    } catch (failure) {
+      restore?.();
+      mutationFailed = true;
+      showError(error, failure, 'Could not save this change.');
+    } finally {
+      // Refresh reads only: a rejected write may already have committed.
+      await render();
+      pending = false;
+      setDisabled(false);
+    }
+  };
 
   const render = async () => {
-    const {rows} = await database.query<TodoRow>(
-      'SELECT id, text, completed, created FROM todos ORDER BY created, id',
-    );
+    const generation = ++renderGeneration;
+    try {
+      const {rows} = await database.query<TodoRow>(
+        'SELECT id, text, completed, created FROM todos ORDER BY created, id',
+      );
+      if (generation !== renderGeneration) {
+        return;
+      }
+      if (!mutationFailed) {
+        clearError(error);
+      }
 
-    list.innerHTML = '';
-    rows.forEach((todo) => {
-      const item = createTodoItem(
+      const items = rows.map((todo) => createTodoItem(
         todo.id,
         todo.text,
         todo.completed,
-        () => {
-          void database.query('UPDATE todos SET completed = $1 WHERE id = $2', [
-            !todo.completed,
-            todo.id,
-          ]);
+        (checkbox) => {
+          void mutate(
+            () => database.query('UPDATE todos SET completed = $1 WHERE id = $2', [
+              !todo.completed,
+              todo.id,
+            ]),
+            () => { checkbox.checked = todo.completed; },
+          );
         },
         () => {
-          void database.query('DELETE FROM todos WHERE id = $1', [todo.id]);
+          void mutate(() => database.query('DELETE FROM todos WHERE id = $1', [todo.id]));
         },
-      );
-      list.appendChild(item);
-    });
+      ));
+      list.replaceChildren(...items);
+      setDisabled(pending);
+    } catch (failure) {
+      if (generation === renderGeneration && !mutationFailed) {
+        showError(error, failure, 'Could not refresh your todos. Reload to try again.');
+      }
+    }
   };
 
   database.subscribe({tables: ['todos']}, () => void render());
   void render();
 
-  return list;
+  return container;
 };

package/templates/client/vite.config.ts.hbs

@@ -0,0 +1,6 @@
+import {tinyjoinOffline} from 'tinyjoin/vite';
+import {defineConfig} from 'vite';
+
+export default defineConfig({
+  plugins: [tinyjoinOffline()],
+});