create-tinybase 0.2.5 → 0.3.1

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

@@ -1,21 +1,18 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-{{else}}
-  import {createMergeableStore} from 'tinybase';
-{{/if}}
-
-const STORE_ID = 'todos';
-
-{{#if schemas}}
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
   const TODOS_SCHEMA = {
   todos: {
-  text: {type: 'string'},
-  completed: {type: 'boolean'},
+  text: {type: 'string', default: ''},
+  completed: {type: 'boolean', default: false},
   },
   } as const;
-
+{{else}}
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
 {{/if}}
-export const store = createMergeableStore(STORE_ID){{#if schemas}}
+
+export type TodoRow = {{#if schemas}}Row<typeof TODOS_SCHEMA, 'todos'>{{else}}{text: string; completed: boolean}{{/if}};
+
+export const store = createMergeableStore(){{#if schemas}}
   .setTablesSchema(TODOS_SCHEMA){{/if}}
 .setDefaultContent([
 {
@@ -27,23 +24,90 @@ todos: {
 {},
 ]);
 
-{{#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());
-  });
+let resolveReady: () => void;
+export const storeReady = new Promise<void>((resolve) => {
+  resolveReady = resolve;
   });
-{{/if}}
 
-export type TodosStore = typeof 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';"}}
+      {{/if}}
+
+      const persister = createLocalPersister(store, 'todos');
+      persister.load().then(() => {
+      persister.startAutoSave();
+      resolveReady();
+      });
+    {{/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';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.ts"}}
+      {{addImport "import {getDb} from './sqlite';"}}
+
+      getDb().then(({sqlite3, db}) => {
+      const persister = createSqliteWasmPersister(store, sqlite3, db, 'todos');
+      persister.load().then(() => {
+      persister.startAutoSave();
+      resolveReady();
+      });
+      });
+    {{/if}}
+    {{#if persistPglite}}
+      {{#if schemas}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+      {{addImport "import {getPgLite} from './pglite';"}}
+
+      getPgLite().then((pgLite) => {
+      createPglitePersister(store, pgLite, 'todos').then((persister) => {
+      persister.load().then(() => {
+      persister.startAutoSave();
+      resolveReady();
+      });
+      });
+      });
+    {{/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';"}}
+    {{#if schemas}}
+      {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+    {{/if}}
+
+    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();
+    {{#unless persist}}resolveReady();{{/unless}}
+    });
+    });
+    });
+  {{/if}}
+
+  {{#unless persist}}{{#unless sync}}
+      resolveReady();
+    {{/unless}}{{/unless}}
+
+  export type TodosStore = typeof store;

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

@@ -1,12 +1,10 @@
 {{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
-import './todoInput.css';
-import {type TodosStore} from './store';
-
+{{addImport "import './todoInput.css';"}}
+{{addImport "import {type TodosStore} from './store';"}}
 {{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
-import {createButton} from './button';
-
+{{addImport "import {createButton} from './button';"}}
 {{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
-import {createInput} from './input';
+{{addImport "import {createInput} from './input';"}}
 
 export const createTodoInput = (store: TodosStore): HTMLDivElement => {
 const container = document.createElement('div');
@@ -19,7 +17,6 @@ const text = input.value.trim();
 if (text) {
 store.addRow('todos', {text, completed: false});
 input.value = '';
-input.focus();
 }
 };
 
@@ -35,4 +32,4 @@ container.appendChild(input);
 container.appendChild(addButton);
 
 return container;
-};
+};

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

@@ -1,8 +1,7 @@
 {{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
-import './todoItem.css';
-
+{{addImport "import './todoItem.css';"}}
 {{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
-import {createButton} from './button';
+{{addImport "import {createButton} from './button';"}}
 
 export const createTodoItem = (id: string, text: string, completed: boolean, onToggle: () => void, onDelete: () => void): HTMLDivElement => {
 const item = document.createElement('div');
@@ -25,4 +24,4 @@ item.appendChild(label);
 item.appendChild(deleteBtn);
 
 return item;
-};
+};

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

@@ -1,21 +1,19 @@
 {{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
-import './todoList.css';
-import {type TodosStore} from './store';
-
+{{addImport "import './todoList.css';"}}
+{{addImport "import {type TodosStore, type TodoRow} from './store';"}}
 {{includeFile template="client/src/todos/todoItem.ts.hbs" output="client/src/todoItem.{{ext}}"}}
-import {createTodoItem} from './todoItem';
+{{addImport "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);
+const todoIds = store.getSortedRowIds('todos');
 
 list.innerHTML = '';
 todoIds.forEach((id) => {
-const todo = todos[id];
+const todo = store.getRow('todos', id) as TodoRow;
 const item = createTodoItem(
 id,
 todo.text,
@@ -35,4 +33,4 @@ store.addTablesListener(render);
 render();
 
 return list;
-};
+};

package/templates/client/vite-env.d.ts.hbs

@@ -0,0 +1,4 @@
+declare module '*.css' {
+const content: string;
+export default content;
+}

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

@@ -2,11 +2,61 @@
 {{#if react}}
   {{addImport "import react from '@vitejs/plugin-react';"}}
 {{/if}}
+{{#if persistSqlite}}
+  {{addImport "import {viteStaticCopy} from 'vite-plugin-static-copy';"}}
+{{/if}}
+{{#if persistPglite}}
+  {{addImport "import {viteStaticCopy} from 'vite-plugin-static-copy';"}}
+{{/if}}
 
 export default defineConfig({
+plugins: [
 {{#if react}}
-  plugins: [react({
-    jsxRuntime: 'automatic',
-  })],
+  react({
+  jsxRuntime: 'automatic',
+  }),
+{{/if}}
+{{#if persistSqlite}}
+  viteStaticCopy({
+  targets: [
+  {
+  src: 'node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
+  dest: '.'
+  }
+  ]
+  }),
+{{/if}}
+{{#if persistPglite}}
+  viteStaticCopy({
+  targets: [
+  {
+  src: 'node_modules/@electric-sql/pglite/dist/*.wasm',
+  dest: '.'
+  }
+  ]
+  }),
+{{/if}}
+],
+{{#if persistSqlite}}
+  server: {
+  headers: {
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  },
+  },
+  optimizeDeps: {
+  exclude: ['@sqlite.org/sqlite-wasm'],
+  },
+{{/if}}
+{{#if persistPglite}}
+  server: {
+  headers: {
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  },
+  },
+  optimizeDeps: {
+  exclude: ['@electric-sql/pglite'],
+  },
 {{/if}}
 });

package/templates/server/index.ts.hbs

@@ -0,0 +1,43 @@
+{{#if isDurableObject}}
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {createDurableObjectSqlStoragePersister} from 'tinybase/persisters/persister-durable-object-sql-storage';"}}
+  {{addImport "import {getWsServerDurableObjectFetch, WsServerDurableObject} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';"}}
+
+  export class TinyBaseDurableObject extends WsServerDurableObject {
+  createPersister() {
+  const store = createMergeableStore();
+  const persister = createDurableObjectSqlStoragePersister(
+  store,
+  this.ctx.storage.sql,
+  );
+  return persister;
+  }
+
+  onClientId(
+  pathId: string,
+  clientId: string,
+  addedOrRemoved: IdAddedOrRemoved,
+  ) {
+  console.log(
+  `Client ${clientId} ${addedOrRemoved == 1 ? 'joined' : 'left'} /${pathId}`,
+  );
+  }
+  }
+
+  export default {
+  fetch: getWsServerDurableObjectFetch('TinyBaseDurableObjects'),
+  };
+{{else}}
+  {{addImport "import {createWsServer} from 'tinybase/synchronizers/synchronizer-ws-server';"}}
+  {{addImport "import {WebSocketServer} from 'ws';"}}
+
+  const PORT = 8043;
+
+  const wsServer = createWsServer(new WebSocketServer({port: PORT}));
+
+  wsServer.addClientIdsListener(null, (wsServer, pathId, clientId, addedOrRemoved) => {
+  console.log(`Client ${clientId} ${addedOrRemoved == 1 ? 'joined' : 'left'} /${pathId}`);
+  });
+
+  console.log(`WebSocket server running on ws://localhost:${PORT}`);
+{{/if}}

package/templates/server/package.json.hbs

@@ -5,12 +5,11 @@
 "main": "index.ts",
 "scripts": {
 {{#list}}
+  {{includeFile template="server/index.ts.hbs" output="server/index.ts"}}
   {{#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"}}
@@ -23,9 +22,9 @@
 },
 "dependencies": {
 {{#list}}
-  "tinybase": "^7.3.1"
+  "tinybase": "^7.3.2"
   {{#if (eq serverType "node")}}
-    "ws": "^8.18.3"
+    "ws": "^8.19.0"
   {{/if}}
 {{/list}}
 },
@@ -34,16 +33,16 @@
   {{#if (eq serverType "node")}}
     "@types/ws": "^8.18.1"
   {{else}}
-    "@cloudflare/workers-types": "^4.20250828.1"
+    "@cloudflare/workers-types": "^4.20260120.0"
   {{/if}}
   {{#if typescript}}
     "typescript": "^5.9.3"
     {{#if (eq serverType "node")}}
-      "tsx": "^4.19.3"
+      "tsx": "^4.21.0"
     {{/if}}
   {{/if}}
   {{#if (eq serverType "durable-objects")}}
-    "wrangler": "^4.33.1"
+    "wrangler": "^4.59.2"
   {{/if}}
 {{/list}}
 }

package/templates/server/wrangler.toml.hbs

@@ -9,4 +9,4 @@ class_name = "TinyBaseDurableObject"
 
 [[migrations]]
 tag = "v1"
-new_classes = ["TinyBaseDurableObject"]
+new_sqlite_classes = ["TinyBaseDurableObject"]

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

@@ -1,22 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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}`);