create-tinybase 1.0.1 → 1.1.1

package/templates/client/src/shared/Loading.svelte.hbs

@@ -0,0 +1,7 @@
+<script>
+import './loading.css';
+</script>
+
+{{includeFile template="client/src/shared/loading.css.hbs" output="client/src/loading.css"}}
+
+<div id="loading"></div>

package/templates/client/src/shared/sqlite.ts.hbs

@@ -2,10 +2,13 @@
 
 let sqlite3Promise: Promise<Sqlite3Static> | null = null;
   let db: Database | null = null;
+  const initSqlite = sqlite3InitModule as (config?: {
+  locateFile?: () => string;
+  }) => Promise<Sqlite3Static>;
 
   export const getDb = async () => {
   if (!sqlite3Promise) {
-  sqlite3Promise = sqlite3InitModule({
+  sqlite3Promise = initSqlite({
   locateFile: () => '/sqlite3.wasm',
   });
   }
@@ -14,4 +17,4 @@ let sqlite3Promise: Promise<Sqlite3Static> | null = null;
   db = new sqlite3.oo1.DB('file:local?vfs=kvvfs', 'c');
   }
   return {sqlite3: await sqlite3Promise, db};
-  };
+  };

package/templates/client/src/todos/App.svelte.hbs

@@ -0,0 +1,26 @@
+{{includeFile template="client/src/todos/store.ts.hbs" output="client/src/store.ts"}}
+{{includeFile template="client/src/shared/Loading.svelte.hbs" output="client/src/Loading.svelte"}}
+{{includeFile template="client/src/todos/TodoInput.svelte.hbs" output="client/src/TodoInput.svelte"}}
+{{includeFile template="client/src/todos/TodoList.svelte.hbs" output="client/src/TodoList.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import {onMount} from 'svelte';
+import Loading from './Loading.svelte';
+import TodoInput from './TodoInput.svelte';
+import TodoList from './TodoList.svelte';
+import {storeReady} from './store';
+
+let loading = $state(true);
+
+onMount(async () => {
+await storeReady;
+loading = false;
+});
+</script>
+
+{#if loading}
+  <Loading />
+{:else}
+  <TodoInput />
+  <TodoList />
+{/if}

package/templates/client/src/todos/TodoInput.svelte.hbs

@@ -0,0 +1,45 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+{{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
+{{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './button.css';
+import './input.css';
+import './todoInput.css';
+import {onMount} from 'svelte';
+import {store} from './store';
+
+let text = $state('');
+let input{{#if typescript}}: HTMLInputElement | undefined{{/if}};
+
+const addTodo = () => {
+const trimmedText = text.trim();
+if (trimmedText) {
+store.addRow('todos', {text: trimmedText, completed: false});
+text = '';
+input?.focus();
+}
+};
+
+const handleKeyDown = (event{{#if typescript}}: KeyboardEvent{{/if}}) => {
+if (event.key === 'Enter') {
+event.preventDefault();
+addTodo();
+}
+};
+
+onMount(() => {
+input?.focus();
+});
+</script>
+
+<div id="todoInput">
+  <input
+    bind:this={input}
+    bind:value={text}
+    type="text"
+    placeholder="What needs to be done?"
+    onkeydown={handleKeyDown}
+  />
+  <button class="primary" onclick={addTodo}>Add</button>
+</div>

package/templates/client/src/todos/TodoItem.svelte.hbs

@@ -0,0 +1,47 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+{{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './button.css';
+import './todoItem.css';
+import {useRow} from 'tinybase/ui-svelte';
+import {store} from './store';
+{{#if typescript}}
+  {{#if schemas}}
+    import type {Store as TinyBaseStore} from 'tinybase';
+  {{/if}}
+  import type {TodoRow} from './store';
+{{/if}}
+
+let {rowId}{{#if typescript}}: {rowId: string}{{/if}} = $props();
+
+const todo = useRow(
+'todos',
+() => rowId,
+{{#if schemas}}store as unknown as TinyBaseStore{{else}}store{{/if}},
+){{#if typescript}} as {readonly current: TodoRow}{{/if}};
+
+const toggleTodo = (event{{#if typescript}}: Event{{/if}}) => {
+  {{#if typescript}}
+    const input = event.currentTarget as HTMLInputElement;
+    store.setPartialRow('todos', rowId, {completed: input.checked});
+  {{else}}
+    store.setPartialRow('todos', rowId, {completed: event.currentTarget.checked});
+  {{/if}}
+};
+
+const deleteTodo = () => {
+store.delRow('todos', rowId);
+};
+</script>
+
+<div class="todoItem" class:completed={todo.current.completed}>
+  <input
+    id={`todo-${rowId}`}
+    type="checkbox"
+    checked={todo.current.completed}
+    onchange={toggleTodo}
+  />
+  <label for={`todo-${rowId}`}>{todo.current.text}</label>
+  <button onclick={deleteTodo}>Delete</button>
+</div>

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

@@ -0,0 +1,29 @@
+{{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
+{{includeFile template="client/src/todos/TodoItem.svelte.hbs" output="client/src/TodoItem.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './todoList.css';
+import {useSortedRowIds} from 'tinybase/ui-svelte';
+import TodoItem from './TodoItem.svelte';
+import {store} from './store';
+{{#if schemas}}
+  {{#if typescript}}
+    import type {Store as TinyBaseStore} from 'tinybase';
+  {{/if}}
+{{/if}}
+
+const todoIds = useSortedRowIds(
+'todos',
+undefined,
+false,
+0,
+undefined,
+{{#if schemas}}store as unknown as TinyBaseStore{{else}}store{{/if}},
+);
+</script>
+
+<div id="todoList">
+  {#each todoIds.current as rowId (rowId)}
+    <TodoItem {rowId} />
+  {/each}
+</div>

package/templates/client/tsconfig.json.hbs

@@ -1,4 +1,7 @@
 {
+{{#if svelte}}
+"extends": "@tsconfig/svelte/tsconfig.json",
+{{/if}}
 "compilerOptions": {
 "target": "ES2020",
 "useDefineForClassFields": true,
@@ -8,6 +11,9 @@
 "moduleResolution": "bundler",
 "allowImportingTsExtensions": true,
 "isolatedModules": true,
+{{#if svelte}}
+"verbatimModuleSyntax": true,
+{{/if}}
 "moduleDetection": "force",
 "noEmit": true,
 {{#if react}}
@@ -20,4 +26,4 @@
 "noUncheckedSideEffectImports": true
 },
 "include": ["src"]
-}
+}

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

@@ -1,4 +1,14 @@
+{{#if svelte}}
+/// <reference types="vite/client" />
+
+declare module '*.svelte' {
+import type {Component} from 'svelte';
+const component: Component<Record<string, never>>;
+export default component;
+}
+
+{{/if}}
 declare module '*.css' {
 const content: string;
 export default content;
-}
+}

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

@@ -2,6 +2,9 @@
 {{#if react}}
   {{addImport "import react from '@vitejs/plugin-react';"}}
 {{/if}}
+{{#if svelte}}
+  {{addImport "import {svelte} from '@sveltejs/vite-plugin-svelte';"}}
+{{/if}}
 {{#if persistSqlite}}
   {{addImport "import {viteStaticCopy} from 'vite-plugin-static-copy';"}}
 {{/if}}
@@ -16,6 +19,9 @@ plugins: [
   jsxRuntime: 'automatic',
   }),
 {{/if}}
+{{#if svelte}}
+  svelte(),
+{{/if}}
 {{#if persistSqlite}}
   viteStaticCopy({
   targets: [
@@ -59,4 +65,4 @@ plugins: [
   exclude: ['@electric-sql/pglite'],
   },
 {{/if}}
-});
+});

package/templates/server/package.json.hbs

@@ -22,7 +22,7 @@
 },
 "dependencies": {
 {{#list}}
-  "tinybase": "^8.0.0"
+  "tinybase": "^8.0.2"
   {{#if (eq serverType "node")}}
     "ws": "^8.19.0"
   {{/if}}
@@ -33,7 +33,7 @@
   {{#if (eq serverType "node")}}
     "@types/ws": "^8.18.1"
   {{else}}
-    "@cloudflare/workers-types": "^4.20260307.1"
+    "@cloudflare/workers-types": "^4.20260317.1"
   {{/if}}
   {{#if typescript}}
     "typescript": "^5.9.3"
@@ -42,7 +42,7 @@
     {{/if}}
   {{/if}}
   {{#if (eq serverType "durable-objects")}}
-    "wrangler": "^4.71.0"
+    "wrangler": "^4.75.0"
   {{/if}}
 {{/list}}
 }