create-tinybase 0.1.4 → 0.2.0

package/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import{dirname as c,join as p}from"path";import{createCLI as l}from"tinycreate";import{fileURLToPath as u}from"url";const m=c(u(import.meta.url)),g={welcomeMessage:`\u{1F389} Welcome to TinyBase!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>e.length>0?!0:"Project name is required"},{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:"confirm",name:"prettier",message:"Include Prettier?",initial:!1},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!1}],createContext:e=>{const{projectName:r,language:s,framework:i,prettier:n,eslint:a}=e,t=s==="typescript",o=i==="react";return{projectName:r,language:s,framework:i,prettier:n,eslint:a,typescript:t,react:o,ext:t?o?"tsx":"ts":o?"jsx":"js"}},createDirectories:async e=>{const{mkdir:r}=await import("fs/promises"),{join:s}=await import("path");await r(s(e,"src"),{recursive:!0}),await r(s(e,"public"),{recursive:!0})},getFiles:e=>{const{typescript:r,react:s,ext:i,prettier:n,eslint:a}=e,t=[{template:"base/package.json.hbs",output:"package.json",prettier:!0},{template:"base/index.html.hbs",output:"index.html",prettier:!0},{template:"base/README.md.hbs",output:"README.md",prettier:!0},{template:"src/index.css.hbs",output:"src/index.css",prettier:!0},{template:"src/index.tsx.hbs",output:`src/index.${i}`,prettier:!0,transpile:!0}];return n&&t.push({template:"base/.prettierrc.hbs",output:".prettierrc",prettier:!0}),a&&t.push({template:"base/eslint.config.js.hbs",output:"eslint.config.js",prettier:!0}),s&&t.push({template:"src/App.tsx.hbs",output:`src/App.${i}`,prettier:!0,transpile:!0},{template:"base/vite.config.js.hbs",output:"vite.config.js",prettier:!0}),r&&t.push({template:"base/tsconfig.json.hbs",output:"tsconfig.json",prettier:!0},{template:"base/tsconfig.node.json.hbs",output:"tsconfig.node.json",prettier:!0}),t},templateRoot:p(m,"templates"),onSuccess:e=>{console.log("Next steps:"),console.log(`  cd ${e}`),console.log("  npm install"),console.log("  npm run dev")}};l(g).catch(e=>{console.error(e),process.exit(1)});
+import{existsSync as v}from"fs";import{dirname as y,join as p}from"path";import{createCLI as f}from"tinycreate";import{fileURLToPath as h}from"url";const w=y(h(import.meta.url)),j={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=p(process.cwd(),e);return v(t)?`Directory "${e}" already exists. Please choose a different name.`:!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:"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:(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:!1},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!1}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:u,schemas:o,sync:c,server:l,serverType:g}=e,a=s==="typescript",d=!a,i=n==="react";return{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:u,schemas:a&&(o===!0||o==="true"),sync:c===!0||c==="true",server:l===!0||l==="true",serverType:g||"node",typescript:a,javascript:d,react:i,ext:a?i?"tsx":"ts":i?"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:e=>{const t=e.server,s=[{template:"README.md.hbs",output:"README.md",prettier:!0},{template:"client/package.json.hbs",output:"client/package.json",prettier:!0}];return t&&s.push({template:"package.json.hbs",output:"package.json",prettier:!0}),s},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:p(w,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",onSuccess:e=>{console.log("Next steps:"),console.log(`  cd ${e}/client`),console.log("  npm install"),console.log("  npm run dev")}};f(j).catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinybase",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "create-tinybase": "cli.js"
   },
   "dependencies": {
-    "tinycreate": "^0.1.0"
+    "tinycreate": "^1.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

package/templates/{base/README.md.hbs → README.md.hbs}

@@ -5,6 +5,7 @@ A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
 ## Getting Started
 
 ```bash
+cd client
 npm install
 npm run dev
 ```

package/templates/{base → client}/eslint.config.js.hbs

@@ -9,6 +9,11 @@
 export default [
 {{#if typescript}}
   ...tseslint.configs.recommended,
+  {
+  rules: {
+  '@typescript-eslint/no-unused-vars': 'warn',
+  },
+  },
 {{else}}
   {
   rules: {

package/templates/client/index.html.hbs

@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+
+<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" />
+  {{includeFile template="client/public/favicon.svg" output="client/public/favicon.svg"}}
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <title>
+    TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
+  </title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    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: #d81b60;
+      color: var(--fg);
+      background: var(--bg);
+      font-family: 'Inter', sans-serif;
+      user-select: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    #appContainer {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    #topBar {
+      background: var(--bg-header);
+      border-bottom: 1px solid var(--border);
+      box-shadow: 0 1px 2px 0 #0007;
+      padding: 0.75rem 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      backdrop-filter: blur(4px);
+    }
+
+    #topBarLogo {
+      height: 2rem;
+      width: 2rem;
+      flex-shrink: 0;
+    }
+
+    #topBarTitle {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #fff;
+      flex: 1;
+    }
+
+    #topBarInfo {
+      position: relative;
+    }
+
+    #infoIcon {
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid var(--fg2);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 800;
+      color: var(--fg2);
+      cursor: help;
+      transition: all 0.2s;
+      user-select: none;
+    }
+
+    #infoIcon:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    #infoIcon:hover #infoTooltip {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    #infoTooltip {
+      position: absolute;
+      right: 0;
+      top: calc(100% + 0.5rem);
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 0.375rem;
+      padding: 0.75rem 1rem;
+      font-size: 0.85rem;
+      font-weight: 400;
+      width: 20rem;
+      white-space: normal;
+      color: var(--fg);
+      line-height: 1.5;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-0.25rem);
+      transition: all 0.2s;
+      pointer-events: none;
+      box-shadow: 0 1px 2px 0 #0007;
+    }
+
+    #infoTooltip a {
+      color: var(--fg);
+      text-decoration: underline;
+    }
+
+    #infoTooltip::before {
+      content: '';
+      position: absolute;
+      right: 0.75rem;
+      top: -0.375rem;
+      width: 0.75rem;
+      height: 0.75rem;
+      background: var(--bg2);
+      border-left: 1px solid var(--border);
+      border-top: 1px solid var(--border);
+      transform: rotate(45deg);
+    }
+
+    #app {
+      max-width: 60rem;
+      width: 100%;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="appContainer">
+    <div id="topBar">
+      <img src="/favicon.svg" id="topBarLogo" alt="TinyBase" />
+      <div id="topBarTitle">
+        TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
+      </div>
+      <div id="topBarInfo">
+        <div id="infoIcon">
+          i
+          <div id="infoTooltip">
+            {{#if (eq appType "todos")}}
+              A simple todo list application demonstrating TinyBase's reactive data management with CRUD operations.
+            {{else if (eq appType "chat")}}
+              A real-time chat application demonstrating TinyBase's reactive data management.
+            {{else if (eq appType "drawing")}}
+              A collaborative drawing canvas showcasing TinyBase's state synchronization.
+            {{else if (eq appType "game")}}
+              A tic-tac-toe game demonstrating turn-based logic and computed game state.
+            {{/if}}
+            <br><br>
+            Built with {{#if typescript}}TypeScript{{#if schemas}} (using typed store schemas){{/if}}{{else}}JavaScript{{/if}}{{#if react}} and React{{/if}}.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="app"></div>
+  </div>
+  {{includeFile template="client/src/index.tsx.hbs" output="client/src/index.{{ext}}"}}
+  <script type="module" src="/src/index.{{ext}}"></script>
+</body>
+
+</html>

package/templates/{base → client}/package.json.hbs

@@ -1,8 +1,9 @@
 {
-"name": "{{projectName}}",
+"name": "{{projectName}}{{#if server}}-client{{/if}}",
 "version": "1.0.0",
 "scripts": {
 {{#list}}
+  {{includeFile template="client/index.html.hbs" output="client/index.html"}}
   "dev": "vite"
   {{#if typescript}}
     "build": "tsc && vite build"
@@ -55,6 +56,21 @@
     "react": "^19.2.3"
     "react-dom": "^19.2.3"
   {{/if}}
+  {{#if sync}}
+    "reconnecting-websocket": "^4.4.0"
+  {{/if}}
 {{/list}}
 }
-}
+}
+{{#if prettier}}
+  {{includeFile template="client/.prettierrc.hbs" output="client/.prettierrc"}}
+{{/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"}}
+{{/if}}
+{{#if typescript}}
+  {{includeFile template="client/tsconfig.json.hbs" output="client/tsconfig.json"}}
+{{/if}}

package/templates/client/public/favicon.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg" style="width:680px;height:680px">
+  <path stroke="#fff" stroke-width="80" fill="none"
+    d="M340 617a84 241 90 11.01 0zM131 475a94 254 70 10428-124 114 286 70 01-428 124zm0-140a94 254 70 10428-124 114 286 70 01-428 124zm-12-127a94 254 70 00306 38 90 260 90 01-306-38zm221 3a74 241 90 11.01 0z" />
+  <path fill="#d81b60"
+    d="M131 475a94 254 70 10428-124 114 286 70 01-428 124zm0-140a94 254 70 10428-124 114 286 70 01-428 124z" />
+  <path
+    d="M249 619a94 240 90 00308-128 114 289 70 01-308 128zM119 208a94 254 70 00306 38 90 260 90 01-306-38zm221 3a74 241 90 11.01 0z" />
+</svg>

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

@@ -0,0 +1,40 @@
+import {StrictMode} from 'react';
+
+{{#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';
+
+{{includeFile template="client/src/chat/SettingsStore.tsx.hbs" output="client/src/SettingsStore.{{ext}}"}}
+import {SettingsStore} from './SettingsStore';
+
+{{includeFile template="client/src/chat/ChatStore.tsx.hbs" output="client/src/ChatStore.{{ext}}"}}
+import {ChatStore} from './ChatStore';
+
+{{includeFile template="client/src/chat/UsernameInput.tsx.hbs" output="client/src/UsernameInput.{{ext}}"}}
+import {UsernameInput} from './UsernameInput';
+
+{{includeFile template="client/src/chat/Messages.tsx.hbs" output="client/src/Messages.{{ext}}"}}
+import {Messages} from './Messages';
+
+{{includeFile template="client/src/chat/MessageInput.tsx.hbs" output="client/src/MessageInput.{{ext}}"}}
+import {MessageInput} from './MessageInput';
+
+const App = () => {
+return (
+<StrictMode>
+  <Provider>
+    <SettingsStore />
+    <ChatStore />
+    <UsernameInput />
+    <Messages />
+    <MessageInput />
+    <Inspector />
+  </Provider>
+</StrictMode>
+);
+};
+
+export {App};

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

@@ -0,0 +1,70 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoValuesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'chat';
+
+{{#if schemas}}
+  const TABLES_SCHEMA = {
+  messages: {
+  username: {type: 'string'},
+  text: {type: 'string'},
+  timestamp: {type: 'number'},
+  },
+  } as const;
+
+  type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
+
+  const {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useAddRowCallback, useRow, useRowIds, useStore};
+
+export const ChatStore = () => {
+const store = useCreateStore(() =>
+createMergeableStore(STORE_ID){{#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},
+},
+},
+{},
+]),
+);
+
+useProvideStore(STORE_ID, store);
+
+{{#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';"}}
+
+  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  const serverPathId = location.pathname;
+  const synchronizer = await createWsSynchronizer(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  );
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+
+  return synchronizer;
+  });
+{{/if}}
+
+return null;
+};

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

@@ -0,0 +1,21 @@
+import {useRow, STORE_ID} from './ChatStore';
+
+{{includeFile template="client/src/chat/message.css.hbs" output="client/src/message.css"}}
+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();
+
+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>
+</div>
+);
+};

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

@@ -0,0 +1,42 @@
+{{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';
+
+{{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
+import {Button} from './Button';
+
+{{includeFile template="client/src/shared/Input.tsx.hbs" output="client/src/Input.{{ext}}"}}
+import {Input} from './Input';
+
+export const MessageInput = () => {
+const [message, setMessage] = useState('');
+const username = useValue('username', SETTINGS_STORE_ID) || 'Anonymous';
+
+const handleSend = useAddRowCallback(
+'messages',
+() => ({
+username,
+text: message,
+timestamp: Date.now(),
+}),
+[message, username],
+CHAT_STORE_ID,
+);
+
+const onSubmit = (e: React.FormEvent) => {
+e.preventDefault();
+if (message.trim()) {
+handleSend();
+setMessage('');
+}
+};
+
+return (
+<form onSubmit={onSubmit} id="messageInput">
+  <Input value={message} onChange={setMessage} placeholder="Type a message..." autoFocus />
+  <Button type="submit" variant="primary">Send</Button>
+</form>
+);
+};

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

@@ -0,0 +1,29 @@
+import {useMemo} from 'react';
+import {useRowIds, useStore, STORE_ID} from './ChatStore';
+
+{{includeFile template="client/src/chat/messages.css.hbs" output="client/src/messages.css"}}
+import './messages.css';
+
+{{includeFile template="client/src/chat/Message.tsx.hbs" output="client/src/Message.{{ext}}"}}
+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]);
+
+return (
+<div id="messages">
+  {sortedIds.map((id) => (
+  <Message key={id} rowId={id} />
+  ))}
+</div>
+);
+};

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

@@ -0,0 +1,34 @@
+{{#if schemas}}
+  import {createStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoTablesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useValue, useSetValueCallback} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'settings';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  username: {type: 'string'},
+  } as const;
+
+  type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+
+  const {useCreateStore, useProvideStore, useValue, useSetValueCallback} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useValue, useSetValueCallback};
+
+export const SettingsStore = () => {
+const store = useCreateStore(() =>
+createStore(){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setValue('username', 'Carol'),
+);
+
+useProvideStore(STORE_ID, store);
+
+return null;
+};

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

@@ -0,0 +1,22 @@
+{{includeFile template="client/src/chat/usernameInput.css.hbs" output="client/src/usernameInput.css"}}
+import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
+import './usernameInput.css';
+
+{{includeFile template="client/src/shared/Input.tsx.hbs" output="client/src/Input.{{ext}}"}}
+import {Input} from './Input';
+
+export const UsernameInput = () => {
+const username = useValue('username', STORE_ID) || '';
+const setUsername = useSetValueCallback(
+'username',
+(_e) => _e,[],
+STORE_ID,
+);
+
+return (
+<div id="usernameInput">
+  <label>Your name:</label>
+  <Input value={username} onChange={setUsername} placeholder="Enter your name" />
+</div>
+);
+};

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

@@ -0,0 +1,39 @@
+{{includeFile template="client/src/chat/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
+import {settingsStore} from './settingsStore';
+
+{{includeFile template="client/src/chat/chatStore.ts.hbs" output="client/src/chatStore.ts"}}
+import {chatStore} from './chatStore';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+{{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
+import {createInput} from './input';
+
+{{includeFile template="client/src/chat/message.ts.hbs" output="client/src/message.{{ext}}"}}
+import {createMessage} from './message';
+
+{{includeFile template="client/src/chat/messages.ts.hbs" output="client/src/messages.{{ext}}"}}
+import {createMessages} from './messages';
+
+{{includeFile template="client/src/chat/usernameInput.ts.hbs" output="client/src/usernameInput.{{ext}}"}}
+import {createUsernameInput} from './usernameInput';
+
+{{includeFile template="client/src/chat/messageInput.ts.hbs" output="client/src/messageInput.{{ext}}"}}
+import {createMessageInput} from './messageInput';
+
+const app = () => {
+const appContainer = document.getElementById('app')!;
+
+appContainer.appendChild(createUsernameInput(settingsStore, chatStore));
+appContainer.appendChild(createMessages(chatStore));
+
+const messageInputContainer = createMessageInput(settingsStore, chatStore);
+appContainer.appendChild(messageInputContainer);
+
+// Focus the input after it's in the DOM
+const messageInput = messageInputContainer.querySelector('input')!;
+messageInput.focus();
+};
+
+export {app};

package/templates/client/src/chat/chatStore.ts.hbs

@@ -0,0 +1,50 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+{{/if}}
+
+const STORE_ID = 'chat';
+
+{{#if schemas}}
+  const TABLES_SCHEMA = {
+  messages: {
+  username: {type: 'string'},
+  text: {type: 'string'},
+  timestamp: {type: 'number'},
+  },
+  } as const;
+
+{{/if}}
+export const chatStore = createMergeableStore(STORE_ID){{#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},
+},
+},
+{},
+]);
+
+{{#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';"}}
+
+  const serverPathId = location.pathname;
+  createWsSynchronizer(
+  chatStore,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  ).then(async (synchronizer) => {
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+  });
+{{/if}}
+
+export type ChatStore = typeof chatStore;

package/templates/client/src/chat/message.css.hbs

@@ -0,0 +1,20 @@
+.message {
+margin-bottom: 0.75rem;
+display: flex;
+flex-wrap: wrap;
+gap: 0.5rem;
+}
+
+.message .username {
+font-weight: 800;
+color: #d81b60;
+}
+
+.message .text {
+flex: 1;
+}
+
+.message .time {
+font-size: 0.8rem;
+color: #666;
+}