create-tinybase 0.2.5 → 0.3.1

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

@@ -1,12 +1,16 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
 {{/if}}
 
-const STORE_ID = 'game';
-
 {{#if schemas}}
+  const TABLES_SCHEMA = {
+  board: {
+  value: {type: 'string', default: ''},
+  },
+  } as const;
+
   const VALUES_SCHEMA = {
   currentPlayer: {type: 'string'},
   gameStatus: {type: 'string'},
@@ -15,7 +19,8 @@ const STORE_ID = 'game';
   } as const;
 
 {{/if}}
-export const store = createMergeableStore(STORE_ID){{#if schemas}}
+export const store = createMergeableStore(){{#if schemas}}
+  .setTablesSchema(TABLES_SCHEMA)
   .setValuesSchema(VALUES_SCHEMA){{/if}}
 .setDefaultContent([
 {},
@@ -25,23 +30,90 @@ gameStatus: 'playing',
 },
 ]);
 
-{{#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 GameStore = 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, 'game');
+      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, 'game');
+      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, 'game').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 GameStore = typeof store;

package/templates/client/src/index.tsx.hbs

@@ -1,23 +1,21 @@
 {{#if sync}}
-  import {getUniqueId} from 'tinybase';
-
+  {{addImport "import {getUniqueId} from 'tinybase';"}}
   if (location.pathname === '/') {
   location.assign('/' + getUniqueId());
   }
 {{/if}}
+
 {{#if react}}
-  import ReactDOM from 'react-dom/client';
-  import {App} from './App';
+  {{addImport "import ReactDOM from 'react-dom/client';"}}
+  {{addImport "import {App} from './App';"}}
   {{includeFile template="client/src/{{appType}}/App.tsx.hbs" output="client/src/App.{{ext}}"}}
-
   addEventListener('load', () => {
   ReactDOM.createRoot(document.getElementById('app')!).render(
   <App />);
   });
 {{else}}
-  import {app} from './app';
+  {{addImport "import {app} from './app';"}}
   {{includeFile template="client/src/{{appType}}/app.ts.hbs" output="client/src/app.{{ext}}"}}
-
   addEventListener('load', () => {
   app();
   });

package/templates/client/src/shared/Button.tsx.hbs

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
-import './button.css';
-import {ReactNode} from 'react';
+{{addImport "import './button.css';"}}
+{{addImport "import {ReactNode} from 'react';"}}
 
 interface ButtonProps {
 children: ReactNode;
@@ -13,4 +13,4 @@ export const Button = ({children, onClick, variant = 'default', type = 'button'}
 <button onClick={onClick} type={type} className={variant==='primary' ? 'primary' : undefined}>
   {children}
 </button>
-);
+);

package/templates/client/src/shared/Input.tsx.hbs

@@ -1,5 +1,5 @@
 {{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
-import './input.css';
+{{addImport "import './input.css';"}}
 
 interface InputProps {
 value: string;
@@ -13,4 +13,4 @@ export const Input = ({value, onChange, placeholder = '', autoFocus = false}: In
 placeholder={placeholder}
 autoFocus={autoFocus}
 />
-);
+);

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

@@ -0,0 +1,5 @@
+{{addImport "import './loading.css';"}}
+{{includeFile template="client/src/shared/loading.css.hbs" output="client/src/loading.css"}}
+
+export const Loading = () =>
+<div id="loading" />;

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

@@ -1,5 +1,5 @@
 {{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
-import './button.css';
+{{addImport "import './button.css';"}}
 
 export const createButton = (
 text: string,
@@ -13,4 +13,4 @@ button.className = 'primary';
 }
 button.addEventListener('click', onClick);
 return button;
-};
+};

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

@@ -1,9 +1,7 @@
-{{#if server}}
-  {{#if (eq serverType "node")}}
-    export const SERVER = 'ws://localhost:8043';
-  {{else}}
-    export const SERVER = 'ws://localhost:8787';
-  {{/if}}
+{{#if (eq syncType "node")}}
+  export const SERVER = 'ws://localhost:8043';
+{{else if (eq syncType "durable-objects")}}
+  export const SERVER = 'ws://localhost:8787';
 {{else}}
   export const SERVER = 'wss://vite.tinybase.org';
 {{/if}}

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

@@ -1,5 +1,5 @@
 {{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
-import './input.css';
+{{addImport "import './input.css';"}}
 
 export const createInput = (
 placeholder: string = '',
@@ -14,4 +14,4 @@ if (onInput) {
 input.addEventListener('input', () => onInput(input.value));
 }
 return input;
-};
+};

package/templates/client/src/shared/loading.css.hbs

@@ -0,0 +1,21 @@
+#loading {
+animation: spin 1s infinite linear;
+height: 2rem;
+margin: 40vh auto;
+width: 2rem;
+}
+
+#loading::before {
+content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 0 100 100">
+  <path d="M50 10A40 40 0 1 1 10 50" stroke="%23d81b60" fill="none" stroke-width="4" />
+</svg>');
+}
+
+@keyframes spin {
+from {
+transform: rotate(0);
+}
+to {
+transform: rotate(360deg);
+}
+}

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

@@ -0,0 +1,13 @@
+{{includeFile template="client/src/shared/loading.css.hbs" output="client/src/loading.css"}}
+{{addImport "import './loading.css';"}}
+
+export const showLoading = (container: HTMLElement): HTMLElement => {
+const loadingDiv = document.createElement('div');
+loadingDiv.id = 'loading';
+container.appendChild(loadingDiv);
+return loadingDiv;
+};
+
+export const hideLoading = (loadingDiv: HTMLElement): void => {
+loadingDiv.remove();
+};

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

@@ -0,0 +1,10 @@
+{{addImport "import {PGlite} from '@electric-sql/pglite';"}}
+
+let pgLitePromise: Promise<PGlite> | null = null;
+
+  export const getPgLite = async (): Promise<PGlite> => {
+    if (!pgLitePromise) {
+    pgLitePromise = PGlite.create('idb://local');
+    }
+    return await pgLitePromise;
+    };

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

@@ -0,0 +1,17 @@
+{{addImport "import sqlite3InitModule, {type Database, type Sqlite3Static} from '@sqlite.org/sqlite-wasm';"}}
+
+let sqlite3Promise: Promise<Sqlite3Static> | null = null;
+  let db: Database | null = null;
+
+  export const getDb = async () => {
+  if (!sqlite3Promise) {
+  sqlite3Promise = sqlite3InitModule({
+  locateFile: () => '/sqlite3.wasm',
+  });
+  }
+  if (!db) {
+  const sqlite3 = await sqlite3Promise;
+  db = new sqlite3.oo1.DB('file:local?vfs=kvvfs', 'c');
+  }
+  return {sqlite3: await sqlite3Promise, db};
+  };

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

@@ -1,32 +1,32 @@
-import {StrictMode} from 'react';
-
-{{#if schemas}}
-  import {Provider} from 'tinybase/ui-react/with-schemas';
-{{else}}
-  import {Provider} from 'tinybase/ui-react';
-{{/if}}
-import {Inspector} from 'tinybase/ui-react-inspector';
-
+{{addImport "import {StrictMode, useState} from 'react';"}}
+{{includeFile template="client/src/shared/Loading.tsx.hbs" output="client/src/Loading.{{ext}}"}}
+{{addImport "import {Loading} from './Loading';"}}
+{{addImport "import {Provider} from 'tinybase/ui-react';"}}
+{{addImport "import {Inspector} from 'tinybase/ui-react-inspector';"}}
 {{includeFile template="client/src/todos/Store.tsx.hbs" output="client/src/Store.{{ext}}"}}
-import {Store} from './Store';
-
+{{addImport "import {Store} from './Store';"}}
 {{includeFile template="client/src/todos/TodoInput.tsx.hbs" output="client/src/TodoInput.{{ext}}"}}
-import {TodoInput} from './TodoInput';
-
+{{addImport "import {TodoInput} from './TodoInput';"}}
 {{includeFile template="client/src/todos/TodoList.tsx.hbs" output="client/src/TodoList.{{ext}}"}}
-import {TodoList} from './TodoList';
+{{addImport "import {TodoList} from './TodoList';"}}
+
+export const App = () => {
+const [loading, setLoading] = useState(true);
 
-const App = () => {
 return (
 <StrictMode>
   <Provider>
-    <Store />
-    <TodoInput />
-    <TodoList />
-    <Inspector />
+    <Store onReady={()=> setLoading(false)} />
+      {loading ? (
+      <Loading />
+      ) : (
+      <>
+        <TodoInput />
+        <TodoList />
+        <Inspector />
+      </>
+      )}
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};

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

@@ -1,32 +1,32 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoValuesSchema} from 'tinybase/with-schemas';
-{{else}}
-  import {createMergeableStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useAddRowCallback, useDelRowCallback, useRow, useRowIds, useSetPartialRowCallback} from 'tinybase/ui-react';
-{{/if}}
-
-export const STORE_ID = 'todos';
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
+  {{addImport "import {type NoValuesSchema} from 'tinybase/with-schemas';"}}
 
-{{#if schemas}}
   const TODOS_SCHEMA = {
   todos: {
-  text: {type: 'string'},
-  completed: {type: 'boolean'},
+  text: {type: 'string', default: ''},
+  completed: {type: 'boolean', default: false},
   },
   } as const;
 
   type Schemas = [typeof TODOS_SCHEMA, NoValuesSchema];
 
-  const {useCreateStore, useProvideStore, useAddRowCallback, useDelRowCallback, useRow, useRowIds, useSetPartialRowCallback} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useAddRowCallback, useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useDelRowCallback, useProvideStore, useRow, useSetPartialRowCallback, useSortedRowIds} = UiReact as UiReact.WithSchemas<Schemas>;
+{{else}}
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useAddRowCallback, useDelRowCallback, useRow, useSortedRowIds, useSetPartialRowCallback} from 'tinybase/ui-react';"}}
 {{/if}}
 
-export {useAddRowCallback, useDelRowCallback, useRow, useRowIds, useSetPartialRowCallback};
+export type TodoRow = {{#if schemas}}Row<typeof TODOS_SCHEMA, 'todos'>{{else}}{text: string; completed: boolean}{{/if}};
+
+export {useAddRowCallback, useDelRowCallback, useRow, useSortedRowIds, useSetPartialRowCallback};
+
+export const STORE_ID = 'todos';
 
-export const Store = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export const Store = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
   .setTablesSchema(TODOS_SCHEMA){{/if}}
 .setDefaultContent([
 {
@@ -41,15 +41,92 @@ todos: {
 
 useProvideStore(STORE_ID, 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';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+
+    useCreatePersister(
+    store,
+    (store) => createLocalPersister(store, STORE_ID),
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/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';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.{{ext}}"}}
+    {{addImport "import {getDb} from './sqlite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const {sqlite3, db} = await getDb();
+    return createSqliteWasmPersister(store, sqlite3, db, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistPglite}}
+    {{#if schemas}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+    {{addImport "import {getPgLite} from './pglite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const pgLite = await getPgLite();
+    return await createPglitePersister(store, pgLite, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/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';"}}
-  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
-  {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
-  {{addImport "import type {MergeableStore} from 'tinybase';"}}
+  {{#if schemas}}
+    {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client/with-schemas';"}}
+  {{else}}
+    {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+  {{/if}}
+  {{#if schemas}}
+    {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react/with-schemas';"}}
+  {{else}}
+    {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
+  {{/if}}
 
-  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  useCreateSynchronizer(store, async (store) => {
   const serverPathId = location.pathname;
   const synchronizer = await createWsSynchronizer(
   store,
@@ -57,14 +134,20 @@ useProvideStore(STORE_ID, store);
   );
   await synchronizer.startSync();
 
-  // If the websocket reconnects in the future, do another explicit sync.
   synchronizer.getWebSocket().addEventListener('open', () => {
-  synchronizer.load().then(() => synchronizer.save());
+  synchronizer.load().then(() => {
+  synchronizer.save();
+  {{#unless persist}}onReady?.();{{/unless}}
+  });
   });
 
   return synchronizer;
   });
 {{/if}}
 
+{{#unless persist}}{{#unless sync}}
+    onReady?.();
+  {{/unless}}{{/unless}}
+
 return null;
 };

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

@@ -1,13 +1,11 @@
 {{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
-import './todoInput.css';
-import {useState} from 'react';
-import {useAddRowCallback, STORE_ID} from './Store';
-
+{{addImport "import './todoInput.css';"}}
+{{addImport "import {useState} from 'react';"}}
+{{addImport "import {useAddRowCallback, STORE_ID} from './Store';"}}
 {{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
-import {Button} from './Button';
-
+{{addImport "import {Button} from './Button';"}}
 {{includeFile template="client/src/shared/Input.tsx.hbs" output="client/src/Input.{{ext}}"}}
-import {Input} from './Input';
+{{addImport "import {Input} from './Input';"}}
 
 export const TodoInput = () => {
 const [text, setText] = useState('');
@@ -27,4 +25,4 @@ return (
   <Button type="submit" variant="primary">Add</Button>
 </form>
 );
-};
+};

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

@@ -1,12 +1,11 @@
 {{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
-import './todoItem.css';
-import {useDelRowCallback, useRow, useSetPartialRowCallback, STORE_ID} from './Store';
-
+{{addImport "import './todoItem.css';"}}
+{{addImport "import {useDelRowCallback, useRow, useSetPartialRowCallback, type TodoRow, STORE_ID} from './Store';"}}
 {{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
-import {Button} from './Button';
+{{addImport "import {Button} from './Button';"}}
 
 export const TodoItem = ({rowId}: {rowId: string}) => {
-const todo = useRow('todos', rowId, STORE_ID);
+const todo = useRow('todos', rowId, STORE_ID) as TodoRow;
 const setPartialRow = useSetPartialRowCallback('todos', rowId, (e: React.ChangeEvent<HTMLInputElement>) => ({completed: e.target.checked}), [], STORE_ID);
   const delRow = useDelRowCallback('todos', rowId, STORE_ID);
 
@@ -17,4 +16,4 @@ const setPartialRow = useSetPartialRowCallback('todos', rowId, (e: React.ChangeE
     <Button onClick={delRow}>Delete</Button>
   </div>
   );
-  };
+  };

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

@@ -1,12 +1,11 @@
 {{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
-import './todoList.css';
-import {useRowIds, STORE_ID} from './Store';
-
+{{addImport "import './todoList.css';"}}
+{{addImport "import {useSortedRowIds, STORE_ID} from './Store';"}}
 {{includeFile template="client/src/todos/TodoItem.tsx.hbs" output="client/src/TodoItem.{{ext}}"}}
-import {TodoItem} from './TodoItem';
+{{addImport "import {TodoItem} from './TodoItem';"}}
 
 export const TodoList = () => {
-const todoIds = useRowIds('todos', STORE_ID);
+const todoIds = useSortedRowIds('todos', undefined, false, 0, undefined, STORE_ID);
 
 return (
 <div id="todoList">
@@ -15,4 +14,4 @@ return (
   ))}
 </div>
 );
-};
+};

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

@@ -1,23 +1,29 @@
 {{includeFile template="client/src/todos/store.ts.hbs" output="client/src/store.ts"}}
-import {store} from './store';
-
+{{addImport "import {store, storeReady} from './store';"}}
+{{includeFile template="client/src/shared/loading.ts.hbs" output="client/src/loading.{{ext}}"}}
+{{addImport "import {showLoading, hideLoading} from './loading';"}}
 {{includeFile template="client/src/todos/todoInput.ts.hbs" output="client/src/todoInput.{{ext}}"}}
-import {createTodoInput} from './todoInput';
-
+{{addImport "import {createTodoInput} from './todoInput';"}}
 {{includeFile template="client/src/todos/todoList.ts.hbs" output="client/src/todoList.{{ext}}"}}
-import {createTodoList} from './todoList';
+{{addImport "import {createTodoList} from './todoList';"}}
 
-const app = () => {
+export const app = async () => {
 const appContainer = document.getElementById('app')!;
 
+// Show loading spinner
+const loadingDiv = showLoading(appContainer);
+
+// Wait for store to be ready
+await storeReady;
+
+// Remove loading spinner
+hideLoading(loadingDiv);
+
 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};
+};