create-tinybase 0.2.5 → 0.3.0

package/README.md

@@ -22,8 +22,8 @@ This will prompt you with questions to configure your new TinyBase app:
 - **Framework** - React or Vanilla JS
 - **App type** - Todo app, Chat app, Drawing app, or Tic-tac-toe game
 - **Store schemas** - TypeScript type safety for stores (TypeScript only)
-- **Synchronization** - Enable real-time sync between clients
-- **Server code** - Include Node.js or Cloudflare Durable Objects server
+- **Synchronization** - None, remote demo server, local Node server, or local Durable Objects server
+- **Persistence** - None, Local Storage, SQLite, or PGLite
 - **Prettier** - Include Prettier for code formatting
 - **ESLint** - Include ESLint for code linting
 
@@ -146,44 +146,88 @@ Schemas define:
 
 ### Synchronization
 
-**Enabled** (default):
+Choose from four synchronization options:
 
-- Real-time sync between browser tabs
-- WebSocket-based synchronization
-- Connects to demo server by default (wss://vite.tinybase.org)
-- MergeableStore for conflict-free replication
-- Automatic reconnection handling
-
-**Disabled**:
+**None**:
 
 - Local-only data storage
 - No network dependencies
 - Simpler architecture
 - Still uses MergeableStore for consistency
 
-### Server Code
+**Via remote demo server (stateless)** (default):
 
-When synchronization is enabled, you can include server code:
+- Real-time sync between browser tabs
+- WebSocket-based synchronization
+- Connects to demo server (wss://vite.tinybase.org)
+- MergeableStore for conflict-free replication
+- Automatic reconnection handling
+- Great for prototyping
+- No local server management needed
 
-**Node.js Server** (port 8043):
+**Via local node server (stateless)** (port 8043):
 
+- Real-time sync with local Node.js server
 - WebSocket server using `ws` library
 - TinyBase server synchronizer
 - Runs with `npm run dev` in server directory
+- Stateless - no data persistence
 - Easy to deploy to any Node.js host
+- Full control over server code
 
-**Cloudflare Durable Objects** (port 8787):
+**Via local DurableObjects server (stateful)** (port 8787):
 
+- Real-time sync with Cloudflare Durable Objects
 - Serverless WebSocket server
 - Edge computing with Durable Objects
+- Stateful - data persists in Durable Objects storage
 - Global distribution
 - Runs locally with Wrangler
+- Designed for production deployment
 
-**No Server**:
+### Persistence
 
-- Connects to public demo server
-- Great for prototyping
-- No local server management needed
+Choose how to persist store data on the client:
+
+**None**:
+
+- No client-side persistence
+- Data lost on page refresh
+- Simplest option for demos
+- Still works with synchronization
+
+**Local Storage** (default):
+
+- Browser localStorage persistence
+- Data persists across sessions
+- Simple and widely supported
+- Automatic load/save with `createLocalPersister`
+- Best for most use cases
+
+**SQLite**:
+
+- Browser-based SQLite via WebAssembly
+- Structured database storage
+- Uses `@sqlite.org/sqlite-wasm` package
+- IndexedDB-backed (`:local:` prefix)
+- Good for complex data structures
+- Slightly larger bundle size
+
+**PGLite**:
+
+- PostgreSQL in the browser
+- Full PostgreSQL compatibility
+- Uses `@electric-sql/pglite` package
+- IndexedDB-backed (`idb://` prefix)
+- Advanced SQL features
+- Larger bundle size
+
+**Important Notes:**
+
+- Persistence is configured **before** synchronization to avoid race conditions
+- Works with all sync types (or no sync)
+- In multi-store apps, all stores get persistence
+- Data is automatically loaded on app start and saved on changes
 
 ### Prettier & ESLint
 

package/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import{existsSync as y}from"fs";import{dirname as w,join as u}from"path";import{createCLI as f,detectPackageManager as h}from"tinycreate";import{fileURLToPath as k}from"url";const j=w(k(import.meta.url)),x={welcomeMessage:`\u{1F389} Welcome to TinyBase!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=u(process.cwd(),e);return y(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:(e,t)=>t.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"confirm",name:"sync",message:"Enable synchronization?",initial:!0},{type:(e,t)=>t.sync?"confirm":null,name:"server",message:"Add code for server?",initial:!1},{type:(e,t)=>t.server?"select":null,name:"serverType",message:"Server type:",choices:[{title:"Node",value:"node"},{title:"Durable Objects",value:"durable-objects"}],initial:0},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!0},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!0},{type:(e,t)=>t.server?null:"confirm",name:"installAndRun",message:"Install dependencies and start dev server?",initial:!0}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:g,schemas:i,sync:c,server:l,serverType:d,installAndRun:p}=e,a=s==="typescript",v=!a,o=n==="react";return{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:g,schemas:a&&(i===!0||i==="true"),sync:c===!0||c==="true",server:l===!0||l==="true",serverType:d||"node",installAndRun:p===!0||p==="true",typescript:a,javascript:v,react:o,ext:a?o?"tsx":"ts":o?"jsx":"js"}},createDirectories:async(e,t)=>{const{mkdir:s}=await import("fs/promises"),{join:n}=await import("path"),r=t.server;await s(n(e,"client/src"),{recursive:!0}),await s(n(e,"client/public"),{recursive:!0}),r&&await s(n(e,"server"),{recursive:!0})},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),r=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:r}},templateRoot:u(j,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:"client",onSuccess:(e,t)=>{const s=t.server,n=h();console.log("Next steps:"),console.log(),s&&(console.log("To run the server:"),console.log(`  cd ${e}/server`),console.log(`  ${n} install`),console.log(`  ${n} run dev`),console.log()),console.log("To run the client:"),console.log(`  cd ${e}/client`),console.log(`  ${n} install`),console.log(`  ${n} run dev`)}};f(x).catch(e=>{console.error(e),process.exit(1)});
+import{existsSync as w}from"fs";import{dirname as f,join as u}from"path";import{createCLI as k,detectPackageManager as x}from"tinycreate";import{fileURLToPath as R}from"url";const S=f(R(import.meta.url)),P={welcomeMessage:`\u{1F389} Welcome to TinyBase!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=u(process.cwd(),e);return w(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:(e,t)=>t.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"select",name:"syncType",message:"Synchronization:",choices:[{title:"None",value:"none"},{title:"Via remote demo server (stateless)",value:"remote"},{title:"Via local node server (stateless)",value:"node"},{title:"Via local DurableObjects server (stateful)",value:"durable-objects"}],initial:1},{type:"select",name:"persistenceType",message:"Persistence:",choices:[{title:"None",value:"none"},{title:"Local Storage",value:"local-storage"},{title:"SQLite",value:"sqlite"},{title:"PGlite",value:"pglite"}],initial:1},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!0},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!0},{type:(e,t)=>t.syncType!=="node"&&t.syncType!=="durable-objects"?"confirm":null,name:"installAndRun",message:"Install dependencies and start dev server?",initial:!0}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:o,prettier:m,eslint:g,schemas:l,syncType:d,persistenceType:y,installAndRun:p}=e,i=s==="typescript",v=!i,c=n==="react",T=i?c?"tsx":"ts":c?"jsx":"js",a=d||"remote",h=a!=="none",b=a==="node"||a==="durable-objects",j=a==="durable-objects"?"durable-objects":"node",r=y||"local-storage";return{projectName:t,language:s,framework:n,appType:o,prettier:m,eslint:g,schemas:i&&(l===!0||l==="true"),syncType:a,sync:h,server:b,serverType:j,persistenceType:r,persist:r!=="none",persistLocalStorage:r==="local-storage",persistSqlite:r==="sqlite",persistPglite:r==="pglite",installAndRun:p===!0||p==="true",typescript:i,javascript:v,react:c,ext:T}},createDirectories:async(e,t)=>{const{mkdir:s}=await import("fs/promises"),{join:n}=await import("path"),o=t.server;await s(n(e,"client/src"),{recursive:!0}),await s(n(e,"client/public"),{recursive:!0}),o&&await s(n(e,"server"),{recursive:!0})},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),o=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:o}},templateRoot:u(S,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:"client",onSuccess:(e,t)=>{const s=t.syncType,n=s==="node"||s==="durable-objects",o=x();console.log("Next steps:"),console.log(),n&&(console.log("To run the server:"),console.log(`  cd ${e}/server`),console.log(`  ${o} install`),console.log(`  ${o} run dev`),console.log()),console.log("To run the client:"),console.log(`  cd ${e}/client`),console.log(`  ${o} install`),console.log(`  ${o} run dev`)}};k(P).catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinybase",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",
@@ -8,7 +8,7 @@
   },
   "license": "MIT",
   "homepage": "https://tinybase.org",
-  "description": "The CLI to build a new app using TinyBase, a reactive data store and sync engine.",
+  "description": "The CLI to build new apps using TinyBase, a reactive data store and sync engine.",
   "keywords": [
     "tiny",
     "sync engine",
@@ -23,7 +23,7 @@
     "create-tinybase": "cli.js"
   },
   "dependencies": {
-    "tinycreate": "^1.0.3"
+    "tinycreate": "^1.0.4"
   },
   "engines": {
     "node": ">=18.0.0"

package/templates/README.md.hbs

@@ -5,13 +5,12 @@
 
 # {{projectName}}
 
-A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
-and {{#if react}}React{{else}}Vanilla JS{{/if}}.
+A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and {{#if react}}React{{else}}Vanilla JS{{/if}}.
 
 ## Getting Started
 
-Alongside this file, you will see a directory called `client` (and optionally
-one called `server` if you included server code).
+Alongside this file, you will see a directory called `client`{{#if server}} (and optionally
+one called `server` for your {{#if (eq syncType "node")}}local Node.js server{{else if (eq syncType "durable-objects")}}local Cloudflare Durable Objects server{{/if}}){{/if}}.
 
 To start the web client with Vite, run the following commands:
 
@@ -24,16 +23,18 @@ npm run dev
 PNPM, Yarn, and Bun should also work. Your app will be available at
 `http://localhost:5173`, or whichever port Vite specifies in the console.
 
-If you included server code, start the server in a separate terminal, ideally
-before starting the client:
+{{#if server}}
+  If you included server code, start the server in a separate terminal, ideally
+  before starting the client:
 
-```bash
-# In a separate terminal
-cd server
-npm install
-npm run dev
-```
+  ```bash
+  # In a separate terminal
+  cd server
+  npm install
+  npm run dev
+  ```
 
+{{/if}}
 After that, start hacking!
 
 ## Learn More

package/templates/client/eslint.config.js.hbs

@@ -5,13 +5,20 @@
   {{addImport "import pluginReact from 'eslint-plugin-react';"}}
   {{addImport "import pluginReactHooks from 'eslint-plugin-react-hooks';"}}
 {{/if}}
+{{addImport "import globals from 'globals';"}}
 
 export default [
+{
+languageOptions: {
+globals: globals.browser,
+},
+},
 {{#if typescript}}
   ...tseslint.configs.recommended,
   {
   rules: {
   '@typescript-eslint/no-unused-vars': 'warn',
+  '@typescript-eslint/no-explicit-any': 'warn',
   },
   },
 {{else}}

package/templates/client/package.json.hbs

@@ -22,25 +22,31 @@
 },
 "devDependencies": {
 {{#list}}
-  "vite": "^7.1.3"
+  "vite": "^7.3.1"
   {{#if typescript}}
     "typescript": "^5.9.3"
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.0.9"
     {{#if react}}
-      "@types/react": "^19.2.7"
+      "@types/react": "^19.2.8"
       "@types/react-dom": "^19.2.3"
     {{/if}}
   {{/if}}
   {{#if react}}
-    "@vitejs/plugin-react": "^4.3.4"
+    "@vitejs/plugin-react": "^5.1.2"
+  {{/if}}
+  {{#if persistSqlite}}
+    "vite-plugin-static-copy": "^3.2.0"
+  {{/if}}
+  {{#if persistPglite}}
+    "vite-plugin-static-copy": "^3.2.0"
   {{/if}}
   {{#if prettier}}
-    "prettier": "^3.7.4"
+    "prettier": "^3.8.0"
   {{/if}}
   {{#if eslint}}
     "eslint": "^9.39.2"
     {{#if typescript}}
-      "typescript-eslint": "^8.51.0"
+      "typescript-eslint": "^8.53.1"
     {{/if}}
     {{#if react}}
       "eslint-plugin-react": "7.37.5"
@@ -51,7 +57,7 @@
 },
 "dependencies": {
 {{#list}}
-  "tinybase": "^7.3.1"
+  "tinybase": "^7.3.2"
   {{#if react}}
     "react": "^19.2.3"
     "react-dom": "^19.2.3"
@@ -59,18 +65,32 @@
   {{#if sync}}
     "reconnecting-websocket": "^4.4.0"
   {{/if}}
+  {{#if persistSqlite}}
+    "@sqlite.org/sqlite-wasm": "^3.50.4-build1"
+  {{/if}}
+  {{#if persistPglite}}
+    "@electric-sql/pglite": "^0.3.15"
+  {{/if}}
 {{/list}}
 }
 }
 {{#if prettier}}
-  {{includeFile template="client/.prettierrc.hbs" output="client/.prettierrc"}}
+  {{includeFile template="client/.prettierrc.json.hbs" output="client/.prettierrc.json"}}
 {{/if}}
 {{#if eslint}}
   {{includeFile template="client/eslint.config.js.hbs" output="client/eslint.config.js"}}
 {{/if}}
 {{#if react}}
   {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+{{else}}
+  {{#if persistSqlite}}
+    {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+  {{/if}}
+  {{#if persistPglite}}
+    {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+  {{/if}}
 {{/if}}
 {{#if typescript}}
   {{includeFile template="client/tsconfig.json.hbs" output="client/tsconfig.json"}}
+  {{includeFile template="client/vite-env.d.ts.hbs" output="client/src/vite-env.d.ts"}}
 {{/if}}

package/templates/client/src/chat/App.tsx.hbs

@@ -1,40 +1,46 @@
-import {StrictMode} from 'react';
+{{addImport "import {StrictMode, useState} from 'react';"}}
+{{includeFile template="client/src/shared/Loading.tsx.hbs" output="client/src/Loading.{{ext}}"}}
+{{addImport "import {Loading} from './Loading';"}}
 
-{{#if schemas}}
-  import {Provider} from 'tinybase/ui-react/with-schemas';
-{{else}}
-  import {Provider} from 'tinybase/ui-react';
-{{/if}}
-import {Inspector} from 'tinybase/ui-react-inspector';
+{{addImport "import {Provider} from 'tinybase/ui-react';"}}
+{{addImport "import {Inspector} from 'tinybase/ui-react-inspector';"}}
 
 {{includeFile template="client/src/chat/SettingsStore.tsx.hbs" output="client/src/SettingsStore.{{ext}}"}}
-import {SettingsStore} from './SettingsStore';
+{{addImport "import {SettingsStore} from './SettingsStore';"}}
 
 {{includeFile template="client/src/chat/ChatStore.tsx.hbs" output="client/src/ChatStore.{{ext}}"}}
-import {ChatStore} from './ChatStore';
+{{addImport "import {ChatStore} from './ChatStore';"}}
 
 {{includeFile template="client/src/chat/UsernameInput.tsx.hbs" output="client/src/UsernameInput.{{ext}}"}}
-import {UsernameInput} from './UsernameInput';
+{{addImport "import {UsernameInput} from './UsernameInput';"}}
 
 {{includeFile template="client/src/chat/Messages.tsx.hbs" output="client/src/Messages.{{ext}}"}}
-import {Messages} from './Messages';
+{{addImport "import {Messages} from './Messages';"}}
 
 {{includeFile template="client/src/chat/MessageInput.tsx.hbs" output="client/src/MessageInput.{{ext}}"}}
-import {MessageInput} from './MessageInput';
+{{addImport "import {MessageInput} from './MessageInput';"}}
+
+export const App = () => {
+const [settingsReady, setSettingsReady] = useState(false);
+const [chatReady, setChatReady] = useState(false);
+const loading = !settingsReady || !chatReady;
 
-const App = () => {
 return (
 <StrictMode>
   <Provider>
-    <SettingsStore />
-    <ChatStore />
-    <UsernameInput />
-    <Messages />
-    <MessageInput />
-    <Inspector />
+    <SettingsStore onReady={()=> setSettingsReady(true)} />
+      <ChatStore onReady={()=> setChatReady(true)} />
+        {loading ? (
+        <Loading />
+        ) : (
+        <>
+          <UsernameInput />
+          <Messages />
+          <MessageInput />
+          <Inspector />
+        </>
+        )}
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};

package/templates/client/src/chat/ChatStore.tsx.hbs

@@ -1,56 +1,130 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoValuesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
+  {{addImport "import {type NoValuesSchema} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} from 'tinybase/ui-react';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useAddRowCallback, useRow, useSortedRowIds, useStore} from 'tinybase/ui-react';"}}
 {{/if}}
 
+{{includeFile template="client/src/chat/utils.ts.hbs" output="client/src/utils.{{ext}}"}}
+{{addImport "import {getDefaultContent} from './utils';"}}
+
 export const STORE_ID = 'chat';
 
 {{#if schemas}}
   const TABLES_SCHEMA = {
   messages: {
-  username: {type: 'string'},
-  text: {type: 'string'},
-  timestamp: {type: 'number'},
+  username: {type: 'string', default: ''},
+  text: {type: 'string', default: ''},
+  timestamp: {type: 'number', default: 0},
   },
   } as const;
 
   type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
 
-  const {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useAddRowCallback, useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useRow, useSortedRowIds, useStore} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useAddRowCallback, useRow, useRowIds, useStore};
+export type MessageRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'messages'>{{else}}{username: string; text: string; timestamp: number}{{/if}};
+
+export {useAddRowCallback, useRow, useSortedRowIds, useStore};
 
-export const ChatStore = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export const ChatStore = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
   .setTablesSchema(TABLES_SCHEMA){{/if}}
-.setDefaultContent([
-{
-messages: {
-'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},
-'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},
-},
-},
-{},
-]),
+.setDefaultContent(getDefaultContent()),
 );
 
 useProvideStore(STORE_ID, store);
 
+{{#if persist}}
+  {{#if persistLocalStorage}}
+    {{#if schemas}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+
+    useCreatePersister(
+    store,
+    (store) => createLocalPersister(store, STORE_ID),
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistSqlite}}
+    {{#if schemas}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.{{ext}}"}}
+    {{addImport "import {getDb} from './sqlite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const {sqlite3, db} = await getDb();
+    return createSqliteWasmPersister(store, sqlite3, db, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistPglite}}
+    {{#if schemas}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+    {{addImport "import {getPgLite} from './pglite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const pgLite = await getPgLite();
+    return await createPglitePersister(store, pgLite, 'chat');
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+{{/if}}
+
 {{#if sync}}
   {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
   {{addImport "import {SERVER} from './config';"}}
   {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
-  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
-  {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
-  {{addImport "import type {MergeableStore} from 'tinybase';"}}
+  {{#if schemas}}
+    {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client/with-schemas';"}}
+  {{else}}
+    {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+  {{/if}}
+  {{#if schemas}}
+    {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react/with-schemas';"}}
+  {{else}}
+    {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
+  {{/if}}
 
-  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  useCreateSynchronizer(store, async (store) => {
   const serverPathId = location.pathname;
   const synchronizer = await createWsSynchronizer(
   store,
@@ -59,12 +133,19 @@ useProvideStore(STORE_ID, store);
   await synchronizer.startSync();
 
   synchronizer.getWebSocket().addEventListener('open', () => {
-  synchronizer.load().then(() => synchronizer.save());
+  synchronizer.load().then(() => {
+  synchronizer.save();
+  {{#unless persist}}onReady?.();{{/unless}}
+  });
   });
 
   return synchronizer;
   });
 {{/if}}
 
+{{#unless persist}}{{#unless sync}}
+    onReady?.();
+  {{/unless}}{{/unless}}
+
 return null;
 };

package/templates/client/src/chat/Message.tsx.hbs

@@ -1,21 +1,20 @@
-import {useRow, STORE_ID} from './ChatStore';
+{{addImport "import {useRow, type MessageRow, STORE_ID} from './ChatStore';"}}
 
 {{includeFile template="client/src/chat/message.css.hbs" output="client/src/message.css"}}
-import './message.css';
+{{addImport "import './message.css';"}}
 
 interface MessageProps {
 rowId: string;
 }
 
 export const Message = ({rowId}: MessageProps) => {
-const row = useRow('messages', rowId, 'chat');
-const time = new Date((row as any).timestamp).toLocaleTimeString();
+const {username, text, timestamp} = useRow('messages', rowId, STORE_ID) as MessageRow;
 
 return (
 <div className="message">
-  <span className="username">{(row as any).username}:</span>
-  <span className="text">{(row as any).text}</span>
-  <span className="time">{time}</span>
+  <span className="username">{username}:</span>
+  <span className="text">{text}</span>
+  <span className="time">{new Date(timestamp).toLocaleTimeString()}</span>
 </div>
-);
-};
+)
+};

package/templates/client/src/chat/MessageInput.tsx.hbs

@@ -1,14 +1,14 @@
 {{includeFile template="client/src/chat/messageInput.css.hbs" output="client/src/messageInput.css"}}
-import {useState} from 'react';
-import {useAddRowCallback, STORE_ID as CHAT_STORE_ID} from './ChatStore';
-import {useValue, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';
-import './messageInput.css';
+{{addImport "import {useState} from 'react';"}}
+{{addImport "import {useAddRowCallback, STORE_ID as CHAT_STORE_ID} from './ChatStore';"}}
+{{addImport "import {useValue, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';"}}
+{{addImport "import './messageInput.css';"}}
 
 {{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
-import {Button} from './Button';
+{{addImport "import {Button} from './Button';"}}
 
 {{includeFile template="client/src/shared/Input.tsx.hbs" output="client/src/Input.{{ext}}"}}
-import {Input} from './Input';
+{{addImport "import {Input} from './Input';"}}
 
 export const MessageInput = () => {
 const [message, setMessage] = useState('');
@@ -39,4 +39,4 @@ return (
   <Button type="submit" variant="primary">Send</Button>
 </form>
 );
-};
+};

package/templates/client/src/chat/Messages.tsx.hbs

@@ -1,23 +1,13 @@
-import {useMemo} from 'react';
-import {useRowIds, useStore, STORE_ID} from './ChatStore';
+{{addImport "import {useSortedRowIds, STORE_ID} from './ChatStore';"}}
 
 {{includeFile template="client/src/chat/messages.css.hbs" output="client/src/messages.css"}}
-import './messages.css';
+{{addImport "import './messages.css';"}}
 
 {{includeFile template="client/src/chat/Message.tsx.hbs" output="client/src/Message.{{ext}}"}}
-import {Message} from './Message';
+{{addImport "import {Message} from './Message';"}}
 
 export const Messages = () => {
-const store = useStore(STORE_ID);
-const messageIds = useRowIds('messages', STORE_ID);
-
-const sortedIds = useMemo(() => {
-return [...messageIds].sort((a, b) => {
-const rowA = store.getRow('messages', a) as any;
-const rowB = store.getRow('messages', b) as any;
-return rowA.timestamp - rowB.timestamp;
-});
-}, [messageIds, store]);
+const sortedIds = useSortedRowIds('messages', 'timestamp', false, 0, undefined, STORE_ID);
 
 return (
 <div id="messages">
@@ -26,4 +16,4 @@ return (
   ))}
 </div>
 );
-};
+};