create-tinybase 0.2.5 → 0.3.1

package/templates/client/src/chat/ChatStore.tsx.hbs

@@ -1,56 +1,130 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoValuesSchema} from 'tinybase/with-schemas';
+  {{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';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} from 'tinybase/ui-react';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useAddRowCallback, useRow, useSortedRowIds, useStore} from 'tinybase/ui-react';"}}
 {{/if}}
 
+{{includeFile template="client/src/chat/utils.ts.hbs" output="client/src/utils.{{ext}}"}}
+{{addImport "import {getDefaultContent} from './utils';"}}
+
 export const STORE_ID = 'chat';
 
 {{#if schemas}}
   const TABLES_SCHEMA = {
   messages: {
-  username: {type: 'string'},
-  text: {type: 'string'},
-  timestamp: {type: 'number'},
+  username: {type: 'string', default: ''},
+  text: {type: 'string', default: ''},
+  timestamp: {type: 'number', default: 0},
   },
   } as const;
 
   type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
 
-  const {useCreateStore, useProvideStore, useAddRowCallback, useRow, useRowIds, useStore} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useAddRowCallback, useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useRow, useSortedRowIds, useStore} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useAddRowCallback, useRow, useRowIds, useStore};
+export type MessageRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'messages'>{{else}}{username: string; text: string; timestamp: number}{{/if}};
+
+export {useAddRowCallback, useRow, useSortedRowIds, useStore};
 
-export const ChatStore = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export const ChatStore = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
   .setTablesSchema(TABLES_SCHEMA){{/if}}
-.setDefaultContent([
-{
-messages: {
-'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},
-'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},
-},
-},
-{},
-]),
+.setDefaultContent(getDefaultContent()),
 );
 
 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, 'chat');
+    },
+    [],
+    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,
@@ -59,12 +133,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/chat/Message.tsx.hbs

@@ -1,21 +1,20 @@
-import {useRow, STORE_ID} from './ChatStore';
+{{addImport "import {useRow, type MessageRow, STORE_ID} from './ChatStore';"}}
 
 {{includeFile template="client/src/chat/message.css.hbs" output="client/src/message.css"}}
-import './message.css';
+{{addImport "import './message.css';"}}
 
 interface MessageProps {
 rowId: string;
 }
 
 export const Message = ({rowId}: MessageProps) => {
-const row = useRow('messages', rowId, 'chat');
-const time = new Date((row as any).timestamp).toLocaleTimeString();
+const {username, text, timestamp} = useRow('messages', rowId, STORE_ID) as MessageRow;
 
 return (
 <div className="message">
-  <span className="username">{(row as any).username}:</span>
-  <span className="text">{(row as any).text}</span>
-  <span className="time">{time}</span>
+  <span className="username">{username}:</span>
+  <span className="text">{text}</span>
+  <span className="time">{new Date(timestamp).toLocaleTimeString()}</span>
 </div>
-);
-};
+)
+};

package/templates/client/src/chat/MessageInput.tsx.hbs

@@ -1,14 +1,14 @@
 {{includeFile template="client/src/chat/messageInput.css.hbs" output="client/src/messageInput.css"}}
-import {useState} from 'react';
-import {useAddRowCallback, STORE_ID as CHAT_STORE_ID} from './ChatStore';
-import {useValue, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';
-import './messageInput.css';
+{{addImport "import {useState} from 'react';"}}
+{{addImport "import {useAddRowCallback, STORE_ID as CHAT_STORE_ID} from './ChatStore';"}}
+{{addImport "import {useValue, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';"}}
+{{addImport "import './messageInput.css';"}}
 
 {{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 MessageInput = () => {
 const [message, setMessage] = useState('');
@@ -39,4 +39,4 @@ return (
   <Button type="submit" variant="primary">Send</Button>
 </form>
 );
-};
+};

package/templates/client/src/chat/Messages.tsx.hbs

@@ -1,23 +1,13 @@
-import {useMemo} from 'react';
-import {useRowIds, useStore, STORE_ID} from './ChatStore';
+{{addImport "import {useSortedRowIds, STORE_ID} from './ChatStore';"}}
 
 {{includeFile template="client/src/chat/messages.css.hbs" output="client/src/messages.css"}}
-import './messages.css';
+{{addImport "import './messages.css';"}}
 
 {{includeFile template="client/src/chat/Message.tsx.hbs" output="client/src/Message.{{ext}}"}}
-import {Message} from './Message';
+{{addImport "import {Message} from './Message';"}}
 
 export const Messages = () => {
-const store = useStore(STORE_ID);
-const messageIds = useRowIds('messages', STORE_ID);
-
-const sortedIds = useMemo(() => {
-return [...messageIds].sort((a, b) => {
-const rowA = store.getRow('messages', a) as any;
-const rowB = store.getRow('messages', b) as any;
-return rowA.timestamp - rowB.timestamp;
-});
-}, [messageIds, store]);
+const sortedIds = useSortedRowIds('messages', 'timestamp', false, 0, undefined, STORE_ID);
 
 return (
 <div id="messages">
@@ -26,4 +16,4 @@ return (
   ))}
 </div>
 );
-};
+};

package/templates/client/src/chat/SettingsStore.tsx.hbs

@@ -1,12 +1,15 @@
 {{#if schemas}}
-  import {createStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoTablesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createStore} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
+  {{addImport "import {type NoTablesSchema} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useValue, useSetValueCallback} from 'tinybase/ui-react';
+  {{addImport "import {createStore} from 'tinybase';"}}
+  {{addImport "import {useCreateStore, useProvideStore, useValue, useValueState} from 'tinybase/ui-react';"}}
 {{/if}}
 
+{{includeFile template="client/src/chat/utils.ts.hbs" output="client/src/utils.{{ext}}"}}
+{{addImport "import {getRandomName} from './utils';"}}
+
 export const STORE_ID = 'settings';
 
 {{#if schemas}}
@@ -16,19 +19,93 @@ export const STORE_ID = 'settings';
 
   type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
 
-  const {useCreateStore, useProvideStore, useValue, useSetValueCallback} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCreateStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useValue, useValueState} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useValue, useSetValueCallback};
+export {useValue, useValueState};
 
-export const SettingsStore = () => {
+export const SettingsStore = ({onReady}: {onReady?: () => void}) => {
 const store = useCreateStore(() =>
 createStore(){{#if schemas}}
   .setValuesSchema(VALUES_SCHEMA){{/if}}
-.setValue('username', 'Carol'),
+.setValue('username', getRandomName()),
 );
 
 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}}
+
+{{#unless persist}}{{#unless sync}}
+    onReady?.();
+  {{/unless}}{{/unless}}
+
 return null;
 };

package/templates/client/src/chat/UsernameInput.tsx.hbs

@@ -1,22 +1,17 @@
 {{includeFile template="client/src/chat/usernameInput.css.hbs" output="client/src/usernameInput.css"}}
-import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
-import './usernameInput.css';
+{{addImport "import {useValueState, STORE_ID} from './SettingsStore';"}}
+{{addImport "import './usernameInput.css';"}}
 
 {{includeFile template="client/src/shared/Input.tsx.hbs" output="client/src/Input.{{ext}}"}}
-import {Input} from './Input';
+{{addImport "import {Input} from './Input';"}}
 
 export const UsernameInput = () => {
-const username = useValue('username', STORE_ID) || '';
-const setUsername = useSetValueCallback(
-'username',
-(_e) => _e,[],
-STORE_ID,
-);
+const [username, setUsername] = useValueState('username', STORE_ID);
 
 return (
 <div id="usernameInput">
   <label>Your name:</label>
-  <Input value={username} onChange={setUsername} placeholder="Enter your name" />
+  <Input value={username + '' } onChange={setUsername} placeholder="Enter your name" />
 </div>
 );
-};
+};

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

@@ -1,39 +1,39 @@
 {{includeFile template="client/src/chat/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
-import {settingsStore} from './settingsStore';
+{{addImport "import {settingsStore, settingsStoreReady} from './settingsStore';"}}
 
 {{includeFile template="client/src/chat/chatStore.ts.hbs" output="client/src/chatStore.ts"}}
-import {chatStore} from './chatStore';
+{{addImport "import {chatStore, chatStoreReady} from './chatStore';"}}
 
-{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
-import {createButton} from './button';
-
-{{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
-import {createInput} from './input';
-
-{{includeFile template="client/src/chat/message.ts.hbs" output="client/src/message.{{ext}}"}}
-import {createMessage} from './message';
+{{includeFile template="client/src/shared/loading.ts.hbs" output="client/src/loading.{{ext}}"}}
+{{addImport "import {showLoading, hideLoading} from './loading';"}}
 
 {{includeFile template="client/src/chat/messages.ts.hbs" output="client/src/messages.{{ext}}"}}
-import {createMessages} from './messages';
+{{addImport "import {createMessages} from './messages';"}}
 
 {{includeFile template="client/src/chat/usernameInput.ts.hbs" output="client/src/usernameInput.{{ext}}"}}
-import {createUsernameInput} from './usernameInput';
+{{addImport "import {createUsernameInput} from './usernameInput';"}}
 
 {{includeFile template="client/src/chat/messageInput.ts.hbs" output="client/src/messageInput.{{ext}}"}}
-import {createMessageInput} from './messageInput';
+{{addImport "import {createMessageInput} from './messageInput';"}}
 
-const app = () => {
+export const app = async () => {
 const appContainer = document.getElementById('app')!;
 
+// Show loading spinner
+const loadingDiv = showLoading(appContainer);
+
+// Wait for stores to be ready
+await Promise.all([settingsStoreReady, chatStoreReady]);
+
+// Remove loading spinner
+hideLoading(loadingDiv);
+
 appContainer.appendChild(createUsernameInput(settingsStore, chatStore));
 appContainer.appendChild(createMessages(chatStore));
 
 const messageInputContainer = createMessageInput(settingsStore, chatStore);
 appContainer.appendChild(messageInputContainer);
 
-// Focus the input after it's in the DOM
 const messageInput = messageInputContainer.querySelector('input')!;
 messageInput.focus();
-};
-
-export {app};
+};

package/templates/client/src/chat/chatStore.ts.hbs

@@ -1,50 +1,112 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
 {{/if}}
 
-const STORE_ID = 'chat';
+{{includeFile template="client/src/chat/utils.ts.hbs" output="client/src/utils.ts"}}
+{{addImport "import {getDefaultContent} from './utils';"}}
 
 {{#if schemas}}
   const TABLES_SCHEMA = {
   messages: {
-  username: {type: 'string'},
-  text: {type: 'string'},
-  timestamp: {type: 'number'},
+  username: {type: 'string', default: ''},
+  text: {type: 'string', default: ''},
+  timestamp: {type: 'number', default: 0},
   },
   } as const;
 
 {{/if}}
-export const chatStore = createMergeableStore(STORE_ID){{#if schemas}}
+export const chatStore = createMergeableStore(){{#if schemas}}
   .setTablesSchema(TABLES_SCHEMA){{/if}}
-.setDefaultContent([
-{
-messages: {
-'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},
-'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},
-},
-},
-{},
-]);
-
-{{#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(
-  chatStore,
-  new ReconnectingWebSocket(SERVER + serverPathId),
-  ).then(async (synchronizer) => {
-  await synchronizer.startSync();
-
-  synchronizer.getWebSocket().addEventListener('open', () => {
-  synchronizer.load().then(() => synchronizer.save());
-  });
+.setDefaultContent(getDefaultContent());
+
+export type MessageRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'messages'>{{else}}{username: string; text: string; timestamp: number}{{/if}};
+
+let resolveChatReady: () => void;
+export const chatStoreReady = new Promise<void>((resolve) => {
+  resolveChatReady = resolve;
   });
-{{/if}}
 
-export type ChatStore = typeof chatStore;
+  {{#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 chatPersister = createLocalPersister(chatStore, 'chat');
+      chatPersister.load().then(() => {
+      chatPersister.startAutoSave();
+      resolveChatReady();
+      });
+    {{/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 chatPersister = createSqliteWasmPersister(chatStore, sqlite3, db, 'chat');
+      chatPersister.load().then(() => {
+      chatPersister.startAutoSave();
+      resolveChatReady();
+      });
+      });
+    {{/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(chatStore, pgLite, 'chat').then((chatPersister) => {
+      chatPersister.load().then(() => {
+      chatPersister.startAutoSave();
+      resolveChatReady();
+      });
+      });
+      });
+    {{/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(
+    chatStore,
+    new ReconnectingWebSocket(SERVER + serverPathId),
+    ).then(async (synchronizer) => {
+    await synchronizer.startSync();
+
+    synchronizer.getWebSocket().addEventListener('open', () => {
+    synchronizer.load().then(() => {
+    synchronizer.save();
+    {{#unless persist}}resolveChatReady();{{/unless}}
+    });
+    });
+    });
+  {{/if}}
+
+  {{#unless persist}}{{#unless sync}}
+      resolveChatReady();
+    {{/unless}}{{/unless}}
+
+  export type ChatStore = typeof chatStore;

package/templates/client/src/chat/message.ts.hbs

@@ -1,7 +1,8 @@
 {{includeFile template="client/src/chat/message.css.hbs" output="client/src/message.css"}}
-import './message.css';
+{{addImport "import './message.css';"}}
+{{addImport "import type {MessageRow} from './chatStore';"}}
 
-export const createMessage = (username: string, text: string, timestamp: number): HTMLDivElement => {
+export const createMessage = ({username, text, timestamp}: MessageRow): HTMLDivElement => {
 const time = new Date(timestamp).toLocaleTimeString();
 
 const messageDiv = document.createElement('div');
@@ -24,4 +25,4 @@ messageDiv.appendChild(textSpan);
 messageDiv.appendChild(timeSpan);
 
 return messageDiv;
-};
+};

package/templates/client/src/chat/messageInput.css.hbs

@@ -3,4 +3,4 @@ display: flex;
 gap: 0.5rem;
 padding: 1rem;
 border-top: 1px solid var(--border);
-}
+}