create-tinybase 0.1.5 → 0.2.0

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},
-});
-};

package/templates/src/index.css.hbs

@@ -1,138 +0,0 @@
-body {
-color: #bbb;
-background: #111;
-font-family: 'Inter', sans-serif;
-user-select: none;
-}
-
-#app {
-max-width: 40rem;
-margin: 2rem auto;
-display: grid;
-grid-template-columns: 1fr;
-column-gap: 2rem;
-align-items: start;
-row-gap: 1rem;
-}
-
-a {
-color: #bbb;
-}
-
-h1 {
-font-weight: 600;
-img {
-margin-right: 1rem;
-height: 2.5rem;
-vertical-align: text-bottom;
-}
-}
-
-h2 {
-font-weight: 800;
-font-size: 1.3rem;
-margin: 1rem 0 0;
-}
-
-p {
-margin: 0 0 1rem;
-line-height: 1.5;
-}
-
-details {
-border: 1px solid #333;
-border-radius: 0.25rem;
-padding: 0.5rem;
-}
-
-details summary {
-cursor: pointer;
-font-weight: 800;
-margin: -0.5rem -0.5rem 0;
-padding: 0.5rem;
-}
-
-details[open] summary {
-margin-bottom: 0.5rem;
-border-bottom: 1px solid #333;
-}
-
-pre {
-margin: 0;
-white-space: pre-wrap;
-word-wrap: break-word;
-}
-
-#buttons {
-border: solid #666;
-border-width: 1px 0;
-text-align: center;
-}
-
-#buttons button {
-border: 1px solid #666;
-border-radius: 0.25rem;
-padding: 0.5rem 1rem;
-background: #222;
-color: #fff;
-font-family: inherit;
-font-weight: 800;
-font-size: 0.8rem;
-width: 10rem;
-margin: 1rem;
-}
-#buttons button:hover {
-border-color: #d81b60;
-}
-
-table {
-border-collapse: collapse;
-font-size: inherit;
-line-height: inherit;
-margin-top: 0.5rem;
-table-layout: fixed;
-width: 100%;
-margin-bottom: 2rem;
-caption-side: bottom;
-}
-table caption {
-text-align: left;
-button {
-border: 0;
-margin-right: 0.25rem;
-}
-}
-table caption button {
-line-height: 0.7rem;
-margin: 0 0.25rem 0 0;
-vertical-align: middle;
-}
-th,
-td {
-padding: 0.25rem 0.5rem 0.25rem 0;
-text-align: left;
-}
-thead th,
-thead td {
-border: solid #999;
-border-width: 1px 0;
-}
-tbody th,
-tbody td {
-border-bottom: 1px solid #333;
-}
-
-table.sortedTable thead th {
-cursor: pointer;
-}
-
-@media (min-width: 40rem) {
-#app {
-grid-template-columns: 1fr 1fr;
-}
-header,
-p,
-#buttons {
-grid-column: span 2;
-}
-}

package/templates/src/index.tsx.hbs

@@ -1,18 +0,0 @@
-{{includeFile template="src/index.css.hbs" output="src/index.css"}}
-import './index.css';
-{{#if react}}
-  import ReactDOM from 'react-dom/client';
-  import {App} from './App';
-  {{includeFile template="src/App.tsx.hbs" output="src/App.{{ext}}"}}
-  {{includeFile template="src/Buttons.tsx.hbs" output="src/Buttons.{{ext}}"}}
-
-  addEventListener('load', () =>
-  ReactDOM.createRoot(document.getElementById('app')!).render(
-  <App />),
-  );
-{{else}}
-  import {app} from './app';
-  {{includeFile template="src/app.ts.hbs" output="src/app.{{ext}}"}}
-
-  addEventListener('load', app);
-{{/if}}