create-tinybase 0.2.5 → 0.3.1

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

@@ -1,13 +1,13 @@
 {{includeFile template="client/src/chat/messageInput.css.hbs" output="client/src/messageInput.css"}}
-import './messageInput.css';
-import {type SettingsStore} from './settingsStore';
-import {type ChatStore} from './chatStore';
+{{addImport "import './messageInput.css';"}}
+{{addImport "import {type SettingsStore} from './settingsStore';"}}
+{{addImport "import {type ChatStore} from './chatStore';"}}
 
 {{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/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
-import {createInput} from './input';
+{{addImport "import {createInput} from './input';"}}
 
 export const createMessageInput = (settingsStore: SettingsStore, chatStore: ChatStore): HTMLDivElement => {
 const messageInputContainer = document.createElement('div');
@@ -20,12 +20,11 @@ const sendMessage = () => {
 const text = messageInput.value.trim();
 if (text) {
 chatStore.addRow('messages', {
-username: settingsStore.getValue('username'),
+username: settingsStore.getValue('username') || 'Anonymous',
 text,
 timestamp: Date.now(),
 });
 messageInput.value = '';
-messageInput.focus();
 }
 };
 
@@ -39,4 +38,4 @@ const sendButton = createButton('Send', sendMessage, 'primary');
 messageInputContainer.appendChild(sendButton);
 
 return messageInputContainer;
-};
+};

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

@@ -1,33 +1,28 @@
 {{includeFile template="client/src/chat/messages.css.hbs" output="client/src/messages.css"}}
-import './messages.css';
-import {type ChatStore} from './chatStore';
+{{addImport "import './messages.css';"}}
+{{addImport "import {type ChatStore, type MessageRow} from './chatStore';"}}
 
 {{includeFile template="client/src/chat/message.ts.hbs" output="client/src/message.{{ext}}"}}
-import {createMessage} from './message';
+{{addImport "import {createMessage} from './message';"}}
 
 export const createMessages = (store: ChatStore): HTMLDivElement => {
 const messagesContainer = document.createElement('div');
 messagesContainer.id = 'messages';
 
 const updateMessages = () => {
-const messageRows = store.getTable('messages');
-const sortedIds = Object.keys(messageRows).sort(
-(a, b) => messageRows[a].timestamp - messageRows[b].timestamp,
-);
+const sortedIds = store.getSortedRowIds('messages', 'timestamp');
 
 messagesContainer.innerHTML = '';
 sortedIds.forEach((id) => {
-const msg = messageRows[id];
-const messageElement = createMessage(msg.username, msg.text, msg.timestamp);
+const messageRow = store.getRow('messages', id) as MessageRow;
+const messageElement = createMessage(messageRow);
 messagesContainer.appendChild(messageElement);
 });
 };
 
-// Initial render
 updateMessages();
 
-// Listen for changes
 store.addTablesListener(updateMessages);
 
 return messagesContainer;
-};
+};

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

@@ -1,10 +1,11 @@
 {{#if schemas}}
-  import {createStore} from 'tinybase/with-schemas';
+  {{addImport "import {createStore} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createStore} from 'tinybase';
+  {{addImport "import {createStore} from 'tinybase';"}}
 {{/if}}
 
-const STORE_ID = 'settings';
+{{includeFile template="client/src/chat/utils.ts.hbs" output="client/src/utils.ts"}}
+{{addImport "import {getRandomName} from './utils';"}}
 
 {{#if schemas}}
   const VALUES_SCHEMA = {
@@ -13,7 +14,65 @@ const STORE_ID = 'settings';
 
 {{/if}}
 export const settingsStore = createStore(){{#if schemas}}
-  .setValuesSchema(VALUES_SCHEMA){{/if}}
-.setValue('username', 'Carol');
+  .setValuesSchema(VALUES_SCHEMA){{/if}};
 
-export type SettingsStore = typeof settingsStore;
+let resolveSettingsReady: () => void;
+export const settingsStoreReady = new Promise<void>((resolve) => {
+  resolveSettingsReady = resolve;
+  });
+
+  {{#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 settingsPersister = createLocalPersister(settingsStore, 'settings');
+      settingsPersister.load([{}, {username: getRandomName()}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+    {{/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 settingsPersister = createSqliteWasmPersister(settingsStore, sqlite3, db, 'settings');
+      settingsPersister.load([{}, {username: getRandomName()}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+      });
+    {{/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(settingsStore, pgLite, 'settings').then((settingsPersister) => {
+      settingsPersister.load([{}, {username: getRandomName()}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+      });
+      });
+    {{/if}}
+  {{else}}
+    settingsStore.setValue('username', getRandomName());
+    resolveSettingsReady();
+  {{/if}}
+
+  export type SettingsStore = typeof settingsStore;

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

@@ -11,4 +11,4 @@ white-space: nowrap;
 
 #usernameInput input {
 flex: 1;
-}
+}

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

@@ -1,12 +1,12 @@
 {{includeFile template="client/src/chat/usernameInput.css.hbs" output="client/src/usernameInput.css"}}
-import './usernameInput.css';
-import {type SettingsStore} from './settingsStore';
-import {type ChatStore} from './chatStore';
+{{addImport "import './usernameInput.css';"}}
+{{addImport "import {type SettingsStore} from './settingsStore';"}}
+{{addImport "import {type ChatStore} from './chatStore';"}}
 
 {{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
-import {createInput} from './input';
+{{addImport "import {createInput} from './input';"}}
 
-export const createUsernameInput = (settingsStore: SettingsStore, chatStore: ChatStore): HTMLDivElement => {
+export const createUsernameInput = (settingsStore: SettingsStore, _chatStore: ChatStore): HTMLDivElement => {
 const container = document.createElement('div');
 container.id = 'usernameInput';
 
@@ -27,4 +27,4 @@ usernameInput.value = settingsStore.getValue('username') as string;
 });
 
 return container;
-};
+};

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

@@ -0,0 +1,26 @@
+const NAMES = [
+'Carol',
+'Charlie',
+'Casey',
+'Cameron',
+'Chris',
+'Dana',
+'Dakota',
+'Drew',
+'Devon',
+'Dylan',
+];
+
+export const getRandomName = (): string =>
+NAMES[Math.floor(Math.random() * NAMES.length)];
+
+export const getDefaultContent = (): [any, any] =>
+[
+{
+messages: {
+'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},
+'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},
+},
+},
+{},
+];

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

@@ -1,36 +1,42 @@
-import {StrictMode} from 'react';
+{{addImport "import {StrictMode, useState} from 'react';"}}
+{{includeFile template="client/src/shared/Loading.tsx.hbs" output="client/src/Loading.{{ext}}"}}
+{{addImport "import {Loading} from './Loading';"}}
 
-{{#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 {Provider} from 'tinybase/ui-react';"}}
+{{addImport "import {Inspector} from 'tinybase/ui-react-inspector';"}}
 
 {{includeFile template="client/src/drawing/SettingsStore.tsx.hbs" output="client/src/SettingsStore.{{ext}}"}}
-import {SettingsStore} from './SettingsStore';
+{{addImport "import {SettingsStore} from './SettingsStore';"}}
 
 {{includeFile template="client/src/drawing/CanvasStore.tsx.hbs" output="client/src/CanvasStore.{{ext}}"}}
-import {CanvasStore} from './CanvasStore';
+{{addImport "import {CanvasStore} from './CanvasStore';"}}
 
 {{includeFile template="client/src/drawing/DrawingControls.tsx.hbs" output="client/src/DrawingControls.{{ext}}"}}
-import {DrawingControls} from './DrawingControls';
+{{addImport "import {DrawingControls} from './DrawingControls';"}}
 
 {{includeFile template="client/src/drawing/Canvas.tsx.hbs" output="client/src/Canvas.{{ext}}"}}
-import {Canvas} from './Canvas';
+{{addImport "import {Canvas} from './Canvas';"}}
+
+export const App = () => {
+const [settingsReady, setSettingsReady] = useState(false);
+const [canvasReady, setCanvasReady] = useState(false);
+const loading = !settingsReady || !canvasReady;
 
-const App = () => {
 return (
 <StrictMode>
   <Provider>
-    <SettingsStore />
-    <CanvasStore />
-    <DrawingControls />
-    <Canvas />
-    <Inspector />
+    <SettingsStore onReady={()=> setSettingsReady(true)} />
+      <CanvasStore onReady={()=> setCanvasReady(true)} />
+        {loading ? (
+        <Loading />
+        ) : (
+        <>
+          <DrawingControls />
+          <Canvas />
+          <Inspector />
+        </>
+        )}
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};

package/templates/client/src/drawing/BrushSize.tsx.hbs

@@ -1,22 +1,19 @@
 {{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
-import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
-import './brushSize.css';
+{{addImport "import {useValueState, STORE_ID} from './SettingsStore';"}}
+{{addImport "import './brushSize.css';"}}
 
 export const BrushSize = () => {
-const size = useValue('brushSize', STORE_ID) ?? 5;
+const [size, setSize] = useValueState('brushSize', STORE_ID);
 
-const setSize = useSetValueCallback(
-'brushSize',
-(e: React.ChangeEvent<HTMLInputElement>) => parseInt(e.target.value),
-  [],
-  STORE_ID,
-  );
+const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  setSize(parseInt(e.target.value));
+  };
 
   return (
   <div id="brushSize">
     <label>Size:</label>
-    <input type="range" min="1" max="50" value={size} onChange={setSize} />
+    <input type="range" min="1" max="50" value={(size as number) ?? 5} onChange={handleChange} />
     <span id="brushSizeValue">{size}</span>
   </div>
   );
-  };
+  };

package/templates/client/src/drawing/Canvas.tsx.hbs

@@ -1,16 +1,18 @@
 {{includeFile template="client/src/drawing/canvas.css.hbs" output="client/src/canvas.css"}}
-import {useCallback, useEffect, useRef} from 'react';
-import {useTable, useStore, STORE_ID as CANVAS_STORE_ID} from './CanvasStore';
-import {useValues, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';
-import {getUniqueId} from 'tinybase';
-import './canvas.css';
+{{addImport "import {useCallback, useEffect, useRef} from 'react';"}}
+{{addImport "import {useSortedRowIds, useTable, useStore, type StrokeRow, STORE_ID as CANVAS_STORE_ID} from './CanvasStore';"}}
+{{addImport "import {useValues, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';"}}
+{{addImport "import {getHlcFunctions} from 'tinybase';"}}
+{{addImport "import './canvas.css';"}}
+
+const [getNextHlc] = getHlcFunctions();
 
 export const Canvas = () => {
 const canvasRef = useRef<HTMLCanvasElement>(null);
   const isDrawing = useRef(false);
   const currentStrokeId = useRef<string | null>(null);
-    const pointIndex = useRef(0);
-    const brush = useValues(SETTINGS_STORE_ID);
+    const {brushColor, brushSize} = useValues(SETTINGS_STORE_ID);
+    const sortedIds = useSortedRowIds('strokes', undefined, false, 0, undefined, CANVAS_STORE_ID);
     const strokes = useTable('strokes', CANVAS_STORE_ID);
     const store = useStore(CANVAS_STORE_ID);
 
@@ -24,77 +26,67 @@ const canvasRef = useRef<HTMLCanvasElement>(null);
     ctx.fillStyle = '#111';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    Object.entries(strokes).forEach(([id, stroke]) => {
-    if (stroke) {
-    const points: Array<{x: number; y: number}> = [];
-      let i = 0;
-      while (stroke[`x${i}`] !== undefined && stroke[`y${i}`] !== undefined) {
-      points.push({x: stroke[`x${i}`] as number, y: stroke[`y${i}`] as number});
-      i++;
-      }
-      if (points.length > 0) {
-      ctx.strokeStyle = stroke.color as string;
-      ctx.lineWidth = (stroke.size as number) * 2;
-      ctx.lineCap = 'round';
-      ctx.lineJoin = 'round';
-      ctx.beginPath();
-      ctx.moveTo(points[0].x, points[0].y);
-      for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); } } }); }, [strokes]); useEffect(()=> {
-        draw();
-        }, [draw]);
-
-        const getPoint = (e: MouseEvent | TouchEvent) => {
-        const canvas = canvasRef.current;
-        if (!canvas) return null;
+    sortedIds.forEach((id) => {
+    const stroke = store?.getRow('strokes', id) as StrokeRow;
+    if (stroke?.points) {
+    const pointsArray = JSON.parse(stroke.points) as number[];
+    if (pointsArray.length >= 2) {
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.size * 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(pointsArray[0], pointsArray[1]);
+    for (let i = 2; i < pointsArray.length; i +=2) { ctx.lineTo(pointsArray[i], pointsArray[i + 1]); } ctx.stroke(); } } }); }, [sortedIds, strokes, store]); useEffect(()=> {
+      draw();
+      }, [draw]);
 
-        const rect = canvas.getBoundingClientRect();
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+      const getPoint = (e: MouseEvent | TouchEvent) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return null;
 
-        return {
-        x: clientX - rect.left,
-        y: clientY - rect.top,
-        };
-        };
+      const rect = canvas.getBoundingClientRect();
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
 
-        const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
-        isDrawing.current = true;
-        pointIndex.current = 0;
-        currentStrokeId.current = getUniqueId();
+      return {
+      x: clientX - rect.left,
+      y: clientY - rect.top,
+      };
+      };
 
-        store.setRow('strokes', currentStrokeId.current, {
-        color: brush.brushColor,
-        size: brush.brushSize,
-        });
+      const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
+      isDrawing.current = true;
+      currentStrokeId.current = getNextHlc();
 
-        const point = getPoint(e.nativeEvent);
-        if (point) {
-        store.setCell('strokes', currentStrokeId.current, 'x0', point.x);
-        store.setCell('strokes', currentStrokeId.current, 'y0', point.y);
-        pointIndex.current = 1;
-        }
-        };
+      const point = getPoint(e.nativeEvent);
+      if (point && store) {
+      store.setRow('strokes', currentStrokeId.current, {
+      color: brushColor,
+      size: brushSize,
+      points: JSON.stringify([point.x, point.y]),
+      });
+      }
+      };
 
-        const handleMove = (e: React.MouseEvent | React.TouchEvent) => {
-        if (isDrawing.current && currentStrokeId.current) {
-        const point = getPoint(e.nativeEvent);
-        if (point) {
-        const idx = pointIndex.current;
-        store.setCell('strokes', currentStrokeId.current, `x${idx}`, point.x);
-        store.setCell('strokes', currentStrokeId.current, `y${idx}`, point.y);
-        pointIndex.current++;
-        }
-        }
-        };
+      const handleMove = (e: React.MouseEvent | React.TouchEvent) => {
+      if (isDrawing.current && currentStrokeId.current && store) {
+      const point = getPoint(e.nativeEvent);
+      if (point) {
+      const pointsArray = JSON.parse(store.getCell('strokes', currentStrokeId.current, 'points') as string ?? '[]');
+      pointsArray.push(point.x, point.y);
+      store.setCell('strokes', currentStrokeId.current, 'points', JSON.stringify(pointsArray));
+      }
+      }
+      };
 
-        const handleEnd = () => {
-        isDrawing.current = false;
-        currentStrokeId.current = null;
-        pointIndex.current = 0;
-        };
+      const handleEnd = () => {
+      isDrawing.current = false;
+      currentStrokeId.current = null;
+      };
 
-        return (
-        <canvas ref={canvasRef} width={600} height={400} id="drawingCanvas" onMouseDown={handleStart} onMouseMove={handleMove} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchStart={handleStart} onTouchMove={handleMove}
-          onTouchEnd={handleEnd} />
-        );
-        };
+      return (
+      <canvas ref={canvasRef} width={600} height={400} id="drawingCanvas" onMouseDown={handleStart} onMouseMove={handleMove} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchStart={handleStart} onTouchMove={handleMove}
+        onTouchEnd={handleEnd} />
+      );
+      };

package/templates/client/src/drawing/CanvasStore.tsx.hbs

@@ -1,48 +1,127 @@
 {{#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, useDelTableCallback, useRow, useRowIds, useStore, useTable} from 'tinybase/ui-react';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useDelTableCallback, useRow, useSortedRowIds, useStore, useTable} from 'tinybase/ui-react';"}}
 {{/if}}
-import {getUniqueId} from 'tinybase';
 
 export const STORE_ID = 'canvas';
 
 {{#if schemas}}
   const TABLES_SCHEMA = {
   strokes: {
-  color: {type: 'string'},
-  size: {type: 'number'},
+  color: {type: 'string', default: ''},
+  size: {type: 'number', default: 1},
+  points: {type: 'string', default: '[]'},
   },
   } as const;
 
   type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
 
-  const {useCreateStore, useProvideStore, useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useDelTableCallback, useProvideStore, useRow, useSortedRowIds, useStore, useTable} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable};
+export type StrokeRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'strokes'>{{else}}{color: string; size: number; points: string}{{/if}};
 
-export const CanvasStore = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export {useDelTableCallback, useRow, useSortedRowIds, useStore, useTable};
+
+export const CanvasStore = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
   .setTablesSchema(TABLES_SCHEMA){{/if}}
 .setDefaultContent([{strokes: {}}, {}]),
 );
 
 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, 'canvas');
+    },
+    [],
+    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,
@@ -51,12 +130,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;
 };