create-tinybase 0.2.4 → 0.3.0

package/templates/client/src/game/Square.tsx.hbs

@@ -1,23 +1,18 @@
 {{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
-import './square.css';
-import {useCell, useStore, useValue, STORE_ID} from './Store';
+{{addImport "import './square.css';"}}
+{{addImport "import {useCell, useSetCellCallback, useValue, STORE_ID} from './Store';"}}
 
-export const Square = ({position, disabled, winning}: {position: number; disabled: boolean; winning: boolean}) => {
-const store = useStore(STORE_ID);
-const value = useCell('board', position.toString(), 'value', STORE_ID);
+export const Square = ({position, disabled, winning}: {position: string; disabled: boolean; winning: boolean}) => {
+const value = useCell('board', position, 'value', STORE_ID);
 const currentPlayer = useValue('currentPlayer', STORE_ID);
 
 const isDisabled = disabled || !!value;
 
-const handleClick = () => {
-if (!isDisabled) {
-store.setCell('board', position.toString(), 'value', currentPlayer);
-}
-};
+const handleClick = useSetCellCallback('board', position, 'value', () => currentPlayer || 'X', [currentPlayer], STORE_ID);
 
 return (
 <button className={`square${isDisabled ? ' disabled' : '' }${winning ? ' winning' : '' }`} onClick={handleClick} disabled={isDisabled}>
   {value || ''}
 </button>
 );
-};
+};

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

@@ -1,15 +1,20 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoTablesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} from 'tinybase/ui-react';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useStore, useSetValuesCallback, useSetCellCallback, useTableListener, useCell, useValue} from 'tinybase/ui-react';"}}
 {{/if}}
 
 export 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'},
@@ -17,16 +22,17 @@ export const STORE_ID = 'game';
   winningLine: {type: 'string', default: ''},
   } as const;
 
-  type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+  type Schemas = [typeof TABLES_SCHEMA, typeof VALUES_SCHEMA];
 
-  const {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCell, useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useSetCellCallback, useSetValuesCallback, useStore, useTableListener, useValue} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useStore, useSetValuesCallback, useTableListener, useCell, useValue};
+export {useStore, useSetValuesCallback, useSetCellCallback, useTableListener, useCell, useValue};
 
-export const Store = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export const Store = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
+  .setTablesSchema(TABLES_SCHEMA)
   .setValuesSchema(VALUES_SCHEMA){{/if}}
 .setDefaultContent([
 {},
@@ -39,15 +45,92 @@ gameStatus: 'playing',
 
 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, 'game');
+    },
+    [],
+    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,
@@ -56,12 +139,19 @@ useProvideStore(STORE_ID, store);
   await synchronizer.startSync();
 
   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/game/app.ts.hbs

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

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

@@ -1,9 +1,9 @@
 {{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
-import './board.css';
-import type {GameStore} from './store';
+{{addImport "import './board.css';"}}
+{{addImport "import type {GameStore} from './store';"}}
 
 {{includeFile template="client/src/game/square.ts.hbs" output="client/src/square.{{ext}}"}}
-import {createSquare} from './square';
+{{addImport "import {createSquare} from './square';"}}
 
 export const createBoard = (store: GameStore): HTMLDivElement => {
 const board = document.createElement('div');
@@ -14,13 +14,13 @@ const gameStatus = store.getValue('gameStatus');
 const winningLine = store.getValue('winningLine');
 const currentPlayer = store.getValue('currentPlayer');
 const winningPositions = new Set(
-winningLine ? winningLine.split(',').map(Number) : []
+winningLine && typeof winningLine === 'string' ? winningLine.split(',').map(Number) : []
 );
 const disabled = gameStatus !== 'playing';
 
 board.innerHTML = '';
-for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'value' ); const square=createSquare( i, cell, ()=> {
-  if (gameStatus === 'playing' && !cell) {
+for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'value' ); const square=createSquare(cell as string, ()=> {
+  if (gameStatus === 'playing' && !cell && currentPlayer) {
   store.setCell('board', i.toString(), 'value', currentPlayer);
   }
   },
@@ -36,4 +36,4 @@ for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'v
   render();
 
   return board;
-  };
+  };

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

@@ -1,18 +1,18 @@
-import type {GameStore} from './store';
+{{addImport "import type {GameStore} 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/game/board.ts.hbs" output="client/src/board.{{ext}}"}}
-import {createBoard} from './board';
+{{addImport "import {createBoard} from './board';"}}
 
 {{includeFile template="client/src/game/gameStatus.ts.hbs" output="client/src/gameStatus.{{ext}}"}}
-import {createGameStatus} from './gameStatus';
+{{addImport "import {createGameStatus} from './gameStatus';"}}
 
 const WINNING_LINES = [
-[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
-[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
-[0, 4, 8], [2, 4, 6], // diagonals
+['0', '1', '2'], ['3', '4', '5'], ['6', '7', '8'],
+['0', '3', '6'], ['1', '4', '7'], ['2', '5', '8'],
+['0', '4', '8'], ['2', '4', '6'],
 ];
 
 export const createGame = (store: GameStore): HTMLDivElement => {
@@ -20,14 +20,11 @@ const checkGameState = () => {
 const gameStatus = store.getValue('gameStatus');
 if (gameStatus !== 'playing') return;
 
-const board = store.getTable('board');
-
-// Check for winner
 for (const line of WINNING_LINES) {
 const [a, b, c] = line;
-const cellA = board[a]?.value;
-const cellB = board[b]?.value;
-const cellC = board[c]?.value;
+const cellA = store.getCell('board', a, 'value');
+const cellB = store.getCell('board', b, 'value');
+const cellC = store.getCell('board', c, 'value');
 
 if (cellA && cellA === cellB && cellA === cellC) {
 store.setValue('gameStatus', 'won');
@@ -37,14 +34,11 @@ return;
 }
 }
 
-// Check for draw
-const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
-if (filledCells === 9) {
+if (store.getRowCount('board') === 9) {
 store.setValue('gameStatus', 'draw');
 return;
 }
 
-// Switch player after each move
 const currentPlayer = store.getValue('currentPlayer');
 store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
 };
@@ -71,4 +65,4 @@ buttonContainer.appendChild(createButton('New Game', resetGame, 'primary'));
 gameContainer.appendChild(buttonContainer);
 
 return gameContainer;
-};
+};

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

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/game/gameStatus.css.hbs" output="client/src/gameStatus.css"}}
-import './gameStatus.css';
-import type {GameStore} from './store';
+{{addImport "import './gameStatus.css';"}}
+{{addImport "import type {GameStore} from './store';"}}
 
 export const createGameStatus = (store: GameStore): HTMLDivElement => {
 const status = document.createElement('div');
@@ -24,4 +24,4 @@ store.addValuesListener(render);
 render();
 
 return status;
-};
+};

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

@@ -1,11 +1,11 @@
 {{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
-import './square.css';
+{{addImport "import './square.css';"}}
 
-export const createSquare = (position: number, value: string | undefined, onClick: () => void, disabled: boolean, winning: boolean): HTMLButtonElement => {
+export const createSquare = (value: string | undefined, onClick: () => void, disabled: boolean, winning: boolean): HTMLButtonElement => {
 const square = document.createElement('button');
 square.className = `square${disabled ? ' disabled' : ''}${winning ? ' winning' : ''}`;
-square.textContent = value || '';
+square.textContent = value ?? '';
 square.disabled = disabled;
 square.addEventListener('click', onClick);
 return square;
-};
+};

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