create-tinybase 1.0.1 → 1.1.0

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