create-tinyjoin 0.0.5 → 0.0.6

package/README.md

@@ -1,20 +1,34 @@
 # create-tinyjoin
 
-Scaffold a small local todo app with TinyJoin, TypeScript, and Vite:
+Scaffold a small local todo app with TinyJoin and Vite:
 
 ```sh
 npm create tinyjoin@latest
 ```
 
 The generated project is ready to run at its root and needs no database server,
-account, or credentials. Choose whether its todos should remain after reloads or
-start fresh each time.
+account, or credentials. Choose TypeScript or JavaScript, and whether its todos
+should remain after reloads or start fresh each time.
+
+Your app should look something like this:
+
+![Todo App](screenshots/todos.png)
+
+- Task list with add/complete/delete
+- Single TinyJoin database with one `todos` table
+- Demonstrates basic CRUD operations in SQL
+- 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.
 
 For agents and CI, every option can be supplied non-interactively:
 
 ```sh
 npm create tinyjoin@latest -- --non-interactive \
   --projectName my-tinyjoin-app \
+  --language typescript \
   --storage opfs \
   --installAndRun false
 ```
@@ -25,15 +39,49 @@ usage.
 `npm run build` assembles the publishable `create-tinyjoin` package under
 `dist/`.
 
+## Generated structure
+
+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.
+- `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
+  starter todos on the first visit.
+- `src/todoInput.ts`, `src/todoList.ts`, and `src/todoItem.ts` are the todo
+  interface, each with a colocated stylesheet.
+- `src/topBar.ts`, `src/title.ts`, `src/info.ts`, `src/loading.ts`,
+  `src/button.ts`, and `src/input.ts` are the shared interface pieces.
+
+## TypeScript and JavaScript
+
+The templates are written once, in TypeScript. Choosing JavaScript strips their
+types with `ts-blank-space` and renames the outputs to `.js`, exactly as
+`create-tinybase` does: `getFiles` marks each `.ts` template `transpile` when
+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.
+
 ## Development
 
 ```sh
+npm run spell           # cspell over the sources, templates, and docs
 npm run typecheck       # generator and test TypeScript
-npm test                # CLI, template, and package-boundary tests
+npm test                # CLI, template, snapshot, and package-boundary tests
 npm run test:generated  # generated apps against published TinyJoin
 npm run test:e2e        # real generated-app behavior in Chromium
 ```
 
+`npm run publishPackage` runs all of the above before publishing. Add project
+vocabulary to `cspell.json` rather than disabling the check.
+
+`npm test` compares every generated file, for both languages and both storage
+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.
+
 Run the local generator from this repository's parent directory with:
 
 ```sh

package/cli.js

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

package/package.json

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

package/templates/AGENTS.md.hbs

@@ -1,15 +1,52 @@
-# {{projectName}}
+# TinyJoin Application Guide
 
-This is a generated TinyJoin TypeScript/Vite starter.
+This project was generated by `create-tinyjoin`. Preserve its working data
+lifecycle while adapting the application to the user's requirements.
 
-- Run the app from this directory with `npm run dev`.
-- Keep database setup in `src/database.ts` and application UI in `src/main.ts`.
-- Keep schema setup safe to run again when the app reloads.
-- Use TinyJoin's `sql` tagged template or parameter arrays for application
-  values. Do not concatenate user input into SQL.
-- Generate stable row identifiers in application code.
-- Keep the database client open while the app is running and close it during
-  page teardown.
-- Validate changes with `npm run build`.
+## Selected Architecture
 
-Current TinyJoin documentation: https://tinyjoin.org
+- **Application**: todo list
+- **Language**: {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
+- **UI**: Vanilla JS
+- **Data**: TinyJoin relational database in the browser
+- **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 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.
+
+## Key Files
+
+- `README.md` explains how to run the generated project.
+- `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.
+
+## 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
+   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.
+6. Keep the database client open while the app is running and close it during
+   page teardown.
+7. Run the build after edits.
+
+## Verification
+
+Run:
+
+```sh
+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}}.
+
+Current TinyJoin documentation: https://tinyjoin.org/llms.txt

package/templates/README.md.hbs

@@ -1,29 +1,54 @@
 # {{projectName}}
 
-A small local todo app built with TinyJoin, TypeScript, and Vite.
+A TinyJoin todo app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and Vanilla JS.
 
-## Start it
+## Getting Started
 
-```sh
+To start the web client with Vite, run the following commands:
+
+```bash
 npm install
 npm run dev
 ```
 
-Your app will open at the address Vite prints in the terminal. It needs no
-database server, account, or credentials.
+PNPM, Yarn, and Bun should also work. Your app will be available at
+`http://localhost:5173`, or whichever port Vite specifies in the console. It
+needs no database server, account, or credentials.
+
+After that, start hacking!
+
+## Structure
+
+This project is a single web application, built with Vite and
+{{#if typescript}}TypeScript{{else}}JavaScript{{/if}}.
+
+### Key Files
+
+- **`index.html`**: The main HTML file that loads your app
+- **`src/index.{{ext}}`**: Entry point that bootstraps the app
+- **`src/app.{{ext}}`**: Main application logic
+- **`src/database.{{ext}}`**: TinyJoin database and `todos` table setup
+- **`src/todoInput.{{ext}}`**, **`src/todoList.{{ext}}`**,
+  **`src/todoItem.{{ext}}`**: The todo interface
+- **`src/topBar.{{ext}}`**, **`src/button.{{ext}}`**, **`src/input.{{ext}}`**,
+  **`src/loading.{{ext}}`**: Shared interface pieces
+
+#### How It Works
+
+The app uses **TinyJoin** to keep application state in a small relational
+database that runs entirely in the browser. The interface reads rows with
+ordinary SQL queries, writes them with parameterized statements, and subscribes
+to the `todos` table so that every change re-renders the list.
 
 {{#if usesOpfs}}
-Todos are saved locally in this browser and remain after a reload.
+**Persistence** is enabled. Your data is automatically saved and restored when
+you reload the page.
 {{else}}
-Todos are kept for the current visit and start fresh after a reload.
+**Persistence** is not enabled. Your todos are kept for the current visit and
+start fresh after a reload.
 {{/if}}
 
-## Start editing
-
-- `src/database.ts` opens the database and defines the `todos` table.
-- `src/main.ts` contains the todo UI and its queries.
-- `src/style.css` contains the app styles.
-
-Run `npm run build` to check the TypeScript and create a production build.
+## Learn More
 
-Learn more at [tinyjoin.org](https://tinyjoin.org).
+- [TinyJoin Documentation](https://tinyjoin.org)
+- [TinyJoin Demos](https://tinyjoin.org/demos/)

package/templates/client/index.html.hbs

@@ -1,51 +1,57 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="A small local todo app built with TinyJoin"
-    />
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <main>
-      <header>
-        <p class="eyebrow">TinyJoin starter</p>
-        <h1>Todos</h1>
-        <p class="intro">
-          {{#if usesOpfs}}Your list is saved locally in this browser.{{else}}Your list starts fresh each time you load the app.{{/if}}
-        </p>
-      </header>
 
-      <form data-testid="todo-form">
-        <label for="todo-title">What needs doing?</label>
-        <div class="composer">
-          <input
-            id="todo-title"
-            data-testid="todo-title"
-            name="title"
-            type="text"
-            maxlength="120"
-            placeholder="Add a todo"
-            autocomplete="off"
-            required
-          />
-          <button type="submit">Add</button>
-        </div>
-      </form>
+<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>
+    * {
+      box-sizing: border-box;
+    }
 
-      <p class="status" data-testid="status" role="status" aria-live="polite">
-        Opening your todos…
-      </p>
-      <p class="error" data-testid="error" role="alert" hidden></p>
-      <ul data-testid="todos" aria-live="polite" aria-busy="true"></ul>
+    body {
+      user-select: none;
+      margin: 0;
+      padding: 0;
+      font-family: 'Inter', sans-serif;
+    }
+
+    #root {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    #app {
+      max-width: 60rem;
+      width: 100%;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+
+    body {
+      --hue: 270;
+      --fg: oklch(85% 0.01 var(--hue));
+      --fg2: oklch(60% 0.01 var(--hue));
+      --bg: oklch(20% 0.01 var(--hue));
+      --bg2: oklch(25% 0.01 var(--hue));
+      --border: oklch(30% 0.01 var(--hue));
+      --bg-header: oklch(30% 0.008 var(--hue) / 0.5);
+      --accent: #7c3aed;
+      color: var(--fg);
+      background: var(--bg);
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.{{ext}}"></script>
+</body>
 
-      <footer>
-        Built with <a href="https://tinyjoin.org">TinyJoin</a>.
-      </footer>
-    </main>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
 </html>

package/templates/client/package.json.hbs

@@ -8,14 +8,16 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc --noEmit && vite build",
+    "build": "{{#if typescript}}tsc --noEmit && {{/if}}vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "tinyjoin": "{{tinyjoinDependency}}"
   },
   "devDependencies": {
+{{#if typescript}}
     "typescript": "^7.0.2",
+{{/if}}
     "vite": "^8.2.1"
   }
 }

package/templates/client/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 1200 1200" stroke-linejoin="round" stroke="#fff" stroke-width="50">
+  <path d="M0 150a500 150 0 00223 125 100 100 0 0179 84l48 291v250a100 100 0 00100 100h100a100 100 0 00100-100V650l48-291a100 100 0 0179-84 500 150 0 00223-125A500 150 0 000 150z" fill="#7C3AED" />
+  <path
+    d="M0 150a500 150 0 00223 125 100 100 0 0179 84 700 700 0 01-12.5 160A500 150 0 010 383zm0 233a500 150 0 00289.5 136A700 700 0 01206 738.5 500 150 0 010 617zm0 234a500 150 0 00206 121.5 700 700 0 01-81 81.5 500 500 0 00225-90v170a100 100 0 00100 100A500 150 0 010 850zm1000-467a500 150 0 01-223 125 100 100 0 00-79 84 700 700 0 0012.5 160A500 150 0 001000 383zm0 233a500 150 0 01-289.5 136A700 700 0 00794 738.5 500 150 0 001000 617zm0 234a500 150 0 01-206 121.5 700 700 0 0081 81.5 500 500 0 01-225-90v170a100 100 0 01-100 100 500 150 0 00450-150z" />
+  <path d="M350 730a500 500 0 01-225 90 700 700 0 00177-461l48 291zm300 0a500 500 0 00225 90 700 700 0 01-177-461l-48 291z" fill="#fff" />
+</svg>

package/templates/client/public/js.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+  <rect width="630" height="630" fill="#f7df1e" />
+  <path
+    d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z" />
+</svg>

package/templates/client/public/ts.svg

@@ -0,0 +1,6 @@
+<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
+  <rect fill="#3178c6" height="512" width="512" />
+  <path clip-rule="evenodd"
+    d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
+    fill="#fff" fill-rule="evenodd" />
+</svg>

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

@@ -0,0 +1,28 @@
+import {databaseReady} from './database';
+import {createTopBar} from './topBar';
+import {showLoading, hideLoading} from './loading';
+import {createTodoInput} from './todoInput';
+import {createTodoList} from './todoList';
+
+export const app = async (root: HTMLElement) => {
+  const appElement = document.createElement('div');
+  appElement.id = 'app';
+  root.replaceChildren(createTopBar(), appElement);
+
+  // Show loading spinner
+  const loadingDiv = showLoading(appElement);
+
+  // Wait for the database to be ready
+  const database = await databaseReady;
+
+  // Remove loading spinner
+  hideLoading(loadingDiv);
+
+  const todoInputContainer = createTodoInput(database);
+  appElement.appendChild(todoInputContainer);
+
+  const input = todoInputContainer.querySelector('input')!;
+  input.focus();
+
+  appElement.appendChild(createTodoList(database));
+};

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

@@ -0,0 +1,25 @@
+button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #666;
+  border-radius: 0.25rem;
+  background: #222;
+  color: #fff;
+  font-family: inherit;
+  font-weight: 800;
+  cursor: pointer;
+  margin: 0.5rem;
+}
+
+button:hover {
+  border-color: #7c3aed;
+}
+
+button.primary {
+  background: #7c3aed;
+  border: none;
+  padding: 0.75rem 1.5rem;
+}
+
+button.primary:hover {
+  background: #6d28d9;
+}

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

@@ -0,0 +1,19 @@
+import './button.css';
+
+export const createButton = (
+  text: string,
+  onClick: (() => void) | null,
+  variant: 'default' | 'primary' = 'default',
+  type: 'button' | 'submit' = 'button',
+): HTMLButtonElement => {
+  const button = document.createElement('button');
+  button.textContent = text;
+  button.type = type;
+  if (variant === 'primary') {
+    button.className = 'primary';
+  }
+  if (onClick) {
+    button.addEventListener('click', onClick);
+  }
+  return button;
+};

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

@@ -1,29 +1,56 @@
-import {create} from 'tinyjoin';
+import {create, type Client} from 'tinyjoin';
 
-export type Todo = {
+export type TodoRow = {
   id: string;
-  title: string;
-  done: boolean;
+  text: string;
+  completed: boolean;
+  created: number;
 };
 
-export type Database = Awaited<ReturnType<typeof create>>;
-
-export async function openDatabase(): Promise<Database> {
-  const database = await create(
-    {{#if usesOpfs}}
-    'opfs://{{storageName}}',
-    {{else}}
-    'memory://',
-    {{/if}}
-  );
-
-  await database.exec(`
-    CREATE TABLE IF NOT EXISTS todos (
-      id TEXT PRIMARY KEY,
-      title TEXT NOT NULL,
-      done BOOLEAN NOT NULL DEFAULT false
-    )
-  `);
+export type TodosDatabase = Client;
+
+{{#if usesOpfs}}
+export const DATA_DIR = 'opfs://{{storageName}}';
+{{else}}
+export const DATA_DIR = 'memory://';
+{{/if}}
+
+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))) {
+    await database.exec(`
+      CREATE TABLE IF NOT EXISTS todos (
+        id TEXT PRIMARY KEY,
+        text TEXT NOT NULL,
+        completed BOOLEAN NOT NULL DEFAULT false,
+        created INTEGER NOT NULL DEFAULT 0
+      )
+    `);
+    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;
+  }
+};
+
+export const databaseReady = createTodosDatabase();
+
+addEventListener(
+  'pagehide',
+  () => void databaseReady.then((database) => database.close()),
+  {once: true},
+);

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

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