create-tinybase 0.1.5 → 0.2.1

package/templates/client/src/todos/TodoList.tsx.hbs

@@ -0,0 +1,18 @@
+{{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
+import './todoList.css';
+import {useRowIds, STORE_ID} from './Store';
+
+{{includeFile template="client/src/todos/TodoItem.tsx.hbs" output="client/src/TodoItem.{{ext}}"}}
+import {TodoItem} from './TodoItem';
+
+export const TodoList = () => {
+const todoIds = useRowIds('todos', STORE_ID);
+
+return (
+<div id="todoList">
+  {todoIds.map((id) => (
+  <TodoItem key={id} rowId={id} />
+  ))}
+</div>
+);
+};

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

@@ -0,0 +1,23 @@
+{{includeFile template="client/src/todos/store.ts.hbs" output="client/src/store.ts"}}
+import {store} from './store';
+
+{{includeFile template="client/src/todos/todoInput.ts.hbs" output="client/src/todoInput.{{ext}}"}}
+import {createTodoInput} from './todoInput';
+
+{{includeFile template="client/src/todos/todoList.ts.hbs" output="client/src/todoList.{{ext}}"}}
+import {createTodoList} from './todoList';
+
+const app = () => {
+const appContainer = document.getElementById('app')!;
+
+const todoInputContainer = createTodoInput(store);
+appContainer.appendChild(todoInputContainer);
+
+// Focus the input after it's in the DOM
+const input = todoInputContainer.querySelector('input')!;
+input.focus();
+
+appContainer.appendChild(createTodoList(store));
+};
+
+export {app};

package/templates/client/src/todos/store.ts.hbs

@@ -0,0 +1,49 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+{{/if}}
+
+const STORE_ID = 'todos';
+
+{{#if schemas}}
+  const TODOS_SCHEMA = {
+  todos: {
+  text: {type: 'string'},
+  completed: {type: 'boolean'},
+  },
+  } as const;
+
+{{/if}}
+export const store = createMergeableStore(STORE_ID){{#if schemas}}
+  .setTablesSchema(TODOS_SCHEMA){{/if}}
+.setDefaultContent([
+{
+todos: {
+'1': {text: 'Learn TinyBase', completed: false},
+'2': {text: 'Build an app', completed: false},
+},
+},
+{},
+]);
+
+{{#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(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  ).then(async (synchronizer) => {
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+  });
+{{/if}}
+
+export type TodosStore = typeof store;

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

@@ -0,0 +1,9 @@
+#todoInput {
+display: flex;
+gap: 0.5rem;
+margin-bottom: 1.5rem;
+}
+
+#todoInput input {
+flex: 1;
+}

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

@@ -0,0 +1,38 @@
+{{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
+import './todoInput.css';
+import {type TodosStore} from './store';
+
+{{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';
+
+export const createTodoInput = (store: TodosStore): HTMLDivElement => {
+const container = document.createElement('div');
+container.id = 'todoInput';
+
+const input = createInput('What needs to be done?');
+
+const addTodo = () => {
+const text = input.value.trim();
+if (text) {
+store.addRow('todos', {text, completed: false});
+input.value = '';
+input.focus();
+}
+};
+
+input.addEventListener('keypress', (e) => {
+if (e.key === 'Enter') {
+addTodo();
+}
+});
+
+const addButton = createButton('Add', addTodo, 'primary');
+
+container.appendChild(input);
+container.appendChild(addButton);
+
+return container;
+};

package/templates/client/src/todos/todoItem.css.hbs

@@ -0,0 +1,33 @@
+.todoItem {
+display: flex;
+align-items: center;
+gap: 0.75rem;
+padding: 0.75rem;
+border-bottom: 1px solid var(--border);
+}
+
+.todoItem:last-child {
+border-bottom: none;
+}
+
+.todoItem input[type="checkbox"] {
+width: 1.25rem;
+height: 1.25rem;
+cursor: pointer;
+flex-shrink: 0;
+}
+
+.todoItem label {
+flex: 1;
+cursor: pointer;
+user-select: none;
+}
+
+.todoItem.completed label {
+text-decoration: line-through;
+opacity: 0.6;
+}
+
+.todoItem button {
+flex-shrink: 0;
+}

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

@@ -0,0 +1,28 @@
+{{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
+import './todoItem.css';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+export const createTodoItem = (id: string, text: string, completed: boolean, onToggle: () => void, onDelete: () => void): HTMLDivElement => {
+const item = document.createElement('div');
+item.className = `todoItem${completed ? ' completed' : ''}`;
+
+const checkbox = document.createElement('input');
+checkbox.type = 'checkbox';
+checkbox.checked = completed;
+checkbox.id = `todo-${id}`;
+checkbox.addEventListener('change', onToggle);
+
+const label = document.createElement('label');
+label.textContent = text;
+label.htmlFor = `todo-${id}`;
+
+const deleteBtn = createButton('Delete', onDelete);
+
+item.appendChild(checkbox);
+item.appendChild(label);
+item.appendChild(deleteBtn);
+
+return item;
+};

package/templates/client/src/todos/todoList.css.hbs

@@ -0,0 +1,14 @@
+#todoList {
+border: 1px solid var(--border);
+border-radius: 0.375rem;
+overflow: hidden;
+background: var(--bg2);
+}
+
+#todoList:empty::before {
+content: 'No todos yet. Add one above!';
+display: block;
+padding: 2rem;
+text-align: center;
+color: var(--fg2);
+}

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

@@ -0,0 +1,38 @@
+{{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
+import './todoList.css';
+import {type TodosStore} from './store';
+
+{{includeFile template="client/src/todos/todoItem.ts.hbs" output="client/src/todoItem.{{ext}}"}}
+import {createTodoItem} from './todoItem';
+
+export const createTodoList = (store: TodosStore): HTMLDivElement => {
+const list = document.createElement('div');
+list.id = 'todoList';
+
+const render = () => {
+const todos = store.getTable('todos');
+const todoIds = Object.keys(todos);
+
+list.innerHTML = '';
+todoIds.forEach((id) => {
+const todo = todos[id];
+const item = createTodoItem(
+id,
+todo.text,
+todo.completed,
+() => {
+store.setPartialRow('todos', id, {completed: !todo.completed});
+},
+() => {
+store.delRow('todos', id);
+}
+);
+list.appendChild(item);
+});
+};
+
+store.addTablesListener(render);
+render();
+
+return list;
+};

package/templates/package.json.hbs

@@ -1,73 +1,38 @@
+{{includeFile template="README.md.hbs" output="README.md"}}
 {
 "name": "{{projectName}}",
 "version": "1.0.0",
+"private": true,
 "scripts": {
 {{#list}}
-  {{includeFile template="index.html.hbs" output="index.html"}}
-  "dev": "vite"
-  {{#if typescript}}
-    "build": "tsc && vite build"
+  {{#if server}}
+    "dev": "concurrently \"npm run dev -w client\" \"npm run dev -w server\""
+    "dev:client": "npm run dev -w client"
+    "dev:server": "npm run dev -w server"
   {{else}}
-    "build": "vite build"
-  {{/if}}
-  "preview": "vite preview"
-  {{#if prettier}}
-    "format": "prettier --write ."
-    "format:check": "prettier --check ."
-  {{/if}}
-  {{#if eslint}}
-    "lint": "eslint ."
+    "dev": "npm run dev -w client"
   {{/if}}
+  "build": "npm run build -w client"
+  "preview": "npm run preview -w client"
 {{/list}}
 },
+{{#if server}}
+  "workspaces": ["client", "server"],
+{{else}}
+  "workspaces": ["client"],
+{{/if}}
 "devDependencies": {
 {{#list}}
-  "vite": "^7.1.3"
-  {{#if typescript}}
-    "typescript": "^5.9.3"
-    "@types/node": "^25.0.3"
-    {{#if react}}
-      "@types/react": "^19.2.7"
-      "@types/react-dom": "^19.2.3"
-    {{/if}}
-  {{/if}}
-  {{#if react}}
-    "@vitejs/plugin-react": "^4.3.4"
-  {{/if}}
-  {{#if prettier}}
-    "prettier": "^3.7.4"
-  {{/if}}
-  {{#if eslint}}
-    "eslint": "^9.39.2"
-    {{#if typescript}}
-      "typescript-eslint": "^8.51.0"
-    {{/if}}
-    {{#if react}}
-      "eslint-plugin-react": "7.37.5"
-      "eslint-plugin-react-hooks": "^7.0.1"
-    {{/if}}
-  {{/if}}
-{{/list}}
-},
-"dependencies": {
-{{#list}}
-  "tinybase": "^7.3.1"
-  {{#if react}}
-    "react": "^19.2.3"
-    "react-dom": "^19.2.3"
+  {{#if server}}
+    "concurrently": "^9.1.2"
   {{/if}}
 {{/list}}
 }
 }
-{{#if prettier}}
-  {{includeFile template=".prettierrc.hbs" output=".prettierrc"}}
-{{/if}}
-{{#if eslint}}
-  {{includeFile template="eslint.config.js.hbs" output="eslint.config.js"}}
+{{#if server}}
+  {{includeFile template="server/package.json.hbs" output="server/package.json"}}
 {{/if}}
-{{#if react}}
-  {{includeFile template="vite.config.js.hbs" output="vite.config.js"}}
+{{#if prettier}}
+  {{includeFile template="client/.prettierrc.hbs" output=".prettierrc"}}
 {{/if}}
-{{#if typescript}}
-  {{includeFile template="tsconfig.json.hbs" output="tsconfig.json"}}
-{{/if}}
+{{includeFile template="client/package.json.hbs" output="client/package.json"}}

package/templates/server/index-do.ts.hbs

@@ -0,0 +1,22 @@
+import {Id, IdAddedOrRemoved} from 'tinybase';
+import {
+getWsServerDurableObjectFetch,
+WsServerDurableObject,
+} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
+
+export class TinyBaseDurableObject extends WsServerDurableObject {
+onPathId(pathId: Id, addedOrRemoved: IdAddedOrRemoved) {
+console.info((addedOrRemoved ? 'Added' : 'Removed') + ` path ${pathId}`);
+}
+
+onClientId(pathId: Id, clientId: Id, addedOrRemoved: IdAddedOrRemoved) {
+console.info(
+(addedOrRemoved ? 'Added' : 'Removed') +
+` client ${clientId} on path ${pathId}`,
+);
+}
+}
+
+export default {
+fetch: getWsServerDurableObjectFetch('TinyBaseDurableObjects'),
+};

package/templates/server/index-node.ts.hbs

@@ -0,0 +1,8 @@
+import {createWsServer} from 'tinybase/synchronizers/synchronizer-ws-server';
+import {WebSocketServer} from 'ws';
+
+const PORT = 8043;
+
+const wsServer = createWsServer(new WebSocketServer({port: PORT}));
+
+console.log(`WebSocket server running on ws://localhost:${PORT}`);

package/templates/server/package.json.hbs

@@ -0,0 +1,51 @@
+{
+"name": "{{projectName}}-server",
+"version": "1.0.0",
+"type": "module",
+"main": "index.ts",
+"scripts": {
+{{#list}}
+  {{#if (eq serverType "node")}}
+    {{includeFile template="server/index-node.ts.hbs" output="server/index.ts"}}
+    "dev": "tsx watch index.ts"
+    "start": "node index.js"
+  {{else}}
+    {{includeFile template="server/index-do.ts.hbs" output="server/index.ts"}}
+    {{includeFile template="server/wrangler.toml.hbs" output="server/wrangler.toml"}}
+    {{#if typescript}}
+      {{includeFile template="server/tsconfig.json.hbs" output="server/tsconfig.json"}}
+    {{/if}}
+    "deploy": "wrangler deploy"
+    "dev": "wrangler dev"
+    "start": "wrangler dev"
+  {{/if}}
+{{/list}}
+},
+"dependencies": {
+{{#list}}
+  "tinybase": "^7.3.1"
+  {{#if (eq serverType "node")}}
+    "ws": "^8.18.3"
+  {{/if}}
+{{/list}}
+},
+"devDependencies": {
+{{#list}}
+  {{#if (eq serverType "node")}}
+    "@types/ws": "^8.18.1"
+  {{else}}
+    "@cloudflare/workers-types": "^4.20250828.1"
+  {{/if}}
+  {{#if typescript}}
+    "typescript": "^5.9.3"
+    {{#if (eq serverType "node")}}
+      "tsx": "^4.19.3"
+    {{/if}}
+  {{/if}}
+  {{#if (eq serverType "durable-objects")}}
+    "wrangler": "^4.33.1"
+  {{/if}}
+{{/list}}
+}
+}
+}

package/templates/server/tsconfig.json.hbs

@@ -0,0 +1,13 @@
+{
+"compilerOptions": {
+"target": "ES2020",
+"module": "ES2020",
+"lib": ["ES2020"],
+"types": ["@cloudflare/workers-types"],
+"moduleResolution": "node",
+"esModuleInterop": true,
+"skipLibCheck": true,
+"strict": true
+},
+"include": ["index.ts"]
+}

package/templates/server/wrangler.toml.hbs

@@ -0,0 +1,12 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "{{projectName}}-server"
+main = "index.ts"
+compatibility_date = "2024-10-11"
+
+[[durable_objects.bindings]]
+name = "TinyBaseDurableObjects"
+class_name = "TinyBaseDurableObject"
+
+[[migrations]]
+tag = "v1"
+new_classes = ["TinyBaseDurableObject"]

package/templates/index.html.hbs

@@ -1,55 +0,0 @@
-<!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="public/favicon.svg" output="public/favicon.svg"}}
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <title>
-    TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}{{#if react}} + React{{/if}}
-  </title>
-</head>
-
-<body>
-  {{#if react}}
-    <div id="app"></div>
-  {{else}}
-    <div id="app">
-      <header>
-        <h1>
-          <img src="/favicon.svg" />
-          TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
-        </h1>
-      </header>
-      <p>
-        This is more or less the simplest TinyBase app you could imagine. It
-        contains a handful of key-values and tables which are mutated with the
-        buttons below. There's no fancy rendering - just the raw JSON of the
-        underlying store. See the full set of
-        <a href="https://tinybase.org/demos/">TinyBase demos</a> for more
-        interesting examples!
-      </p>
-      <div id="buttons">
-        <button id="countButton">Increment number</button>
-        <button id="randomButton">Random number</button>
-        <button id="addPetButton">Add a pet</button>
-      </div>
-      <details open>
-        <summary>Values</summary>
-        <pre id="valuesJson"></pre>
-      </details>
-      <details open>
-        <summary>Tables</summary>
-        <pre id="tablesJson"></pre>
-      </details>
-    </div>
-  {{/if}}
-  {{includeFile template="src/index.tsx.hbs" output="src/index.{{ext}}"}}
-  <script type="module" src="/src/index.{{ext}}"></script>
-</body>
-
-</html>

package/templates/src/App.tsx.hbs

@@ -1,52 +0,0 @@
-import {StrictMode} from 'react';
-import {createStore} from 'tinybase';
-import {Provider, useCreateStore} from 'tinybase/ui-react';
-import {SortedTableInHtmlTable, ValuesInHtmlTable} from 'tinybase/ui-react-dom';
-import {Inspector} from 'tinybase/ui-react-inspector';
-import {Buttons} from './Buttons';
-
-export const App = () => {
-const store = useCreateStore(() => {
-// Create the TinyBase Store and initialize the Store's data
-return createStore()
-.setValue('counter', 0)
-.setRow('pets', '0', {name: 'fido', species: 'dog'})
-.setTable('species', {
-dog: {price: 5},
-cat: {price: 4},
-fish: {price: 2},
-worm: {price: 1},
-parrot: {price: 3},
-});
-});
-
-return (
-<StrictMode>
-  <Provider store={store}>
-    <header>
-      <h1>
-        <img src="/favicon.svg" />
-        TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} + React
-      </h1>
-    </header>
-    <p>
-      This is more or less the simplest TinyBase app you could imagine. It
-      contains a handful of key-values and tables which are mutated with the
-      buttons below, and rendered with plain table components. See the full
-      set of <a href="https://tinybase.org/demos/">TinyBase demos</a> for
-      more interesting examples!
-    </p>
-    <Buttons />
-    <div>
-      <h2>Values</h2>
-      <ValuesInHtmlTable />
-    </div>
-    <div>
-      <h2>Pets Table</h2>
-      <SortedTableInHtmlTable tableId="pets" cellId="name" limit={5} sortOnClick={true} className="sortedTable" paginator={true} />
-    </div>
-    <Inspector />
-  </Provider>
-</StrictMode>
-);
-};

package/templates/src/Buttons.tsx.hbs

@@ -1,26 +0,0 @@
-import {useAddRowCallback, useSetValueCallback} from 'tinybase/ui-react';
-import type {ValueOrUndefined} from 'tinybase';
-
-// Convenience function for generating a random integer
-const getRandom = (max = 100) => Math.floor(Math.random() * max);
-
-export const Buttons = () => {
-// Attach events to the buttons to mutate the data in the TinyBase Store
-const handleCount = useSetValueCallback(
-'counter',
-() => (value: ValueOrUndefined) => ((value ?? 0) as number) + 1,
-);
-const handleRandom = useSetValueCallback('random', () => getRandom());
-const handleAddPet = useAddRowCallback('pets', (_, store) => ({
-name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
-species: store.getRowIds('species')[getRandom(5)],
-}));
-
-return (
-<div id="buttons">
-  <button onClick={handleCount}>Increment number</button>
-  <button onClick={handleRandom}>Random number</button>
-  <button onClick={handleAddPet}>Add a pet</button>
-</div>
-);
-};

package/templates/src/app.ts.hbs

@@ -1,36 +0,0 @@
-import {createStore} from 'tinybase';
-
-const onClick = (id: string, onClick: () => void) =>
-document.getElementById(id)!.addEventListener('click', onClick);
-
-const updateJson = (id: string, content: unknown) =>
-(document.getElementById(id)!.innerText = JSON.stringify(content, null, 2));
-
-const getRandom = (max = 100) => Math.floor(Math.random() * max);
-
-export const app = () => {
-const store = createStore();
-
-onClick('countButton', () => store.setValue('counter', (value) => value + 1));
-onClick('randomButton', () => store.setValue('random', getRandom()));
-onClick('addPetButton', () =>
-store.addRow('pets', {
-name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
-species: store.getRowIds('species')[getRandom(5)],
-}),
-);
-
-store.addValuesListener(() => updateJson('valuesJson', store.getValues()));
-store.addTablesListener(() => updateJson('tablesJson', store.getTables()));
-
-store
-.setValue('counter', 0)
-.setRow('pets', '0', {name: 'fido', species: 'dog'})
-.setTable('species', {
-dog: {price: 5},
-cat: {price: 4},
-fish: {price: 2},
-worm: {price: 1},
-parrot: {price: 3},
-});
-};