create-tinybase 0.2.4 → 0.3.0

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

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

@@ -1,21 +1,18 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-{{else}}
-  import {createMergeableStore} from 'tinybase';
-{{/if}}
-
-const STORE_ID = 'todos';
-
-{{#if schemas}}
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
   const TODOS_SCHEMA = {
   todos: {
-  text: {type: 'string'},
-  completed: {type: 'boolean'},
+  text: {type: 'string', default: ''},
+  completed: {type: 'boolean', default: false},
   },
   } as const;
-
+{{else}}
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
 {{/if}}
-export const store = createMergeableStore(STORE_ID){{#if schemas}}
+
+export type TodoRow = {{#if schemas}}Row<typeof TODOS_SCHEMA, 'todos'>{{else}}{text: string; completed: boolean}{{/if}};
+
+export const store = createMergeableStore(){{#if schemas}}
   .setTablesSchema(TODOS_SCHEMA){{/if}}
 .setDefaultContent([
 {
@@ -27,23 +24,90 @@ todos: {
 {},
 ]);
 
-{{#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 TodosStore = 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, 'todos');
+      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, 'todos');
+      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, 'todos').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 TodosStore = typeof store;

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

@@ -1,12 +1,10 @@
 {{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
-import './todoInput.css';
-import {type TodosStore} from './store';
-
+{{addImport "import './todoInput.css';"}}
+{{addImport "import {type TodosStore} 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/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
-import {createInput} from './input';
+{{addImport "import {createInput} from './input';"}}
 
 export const createTodoInput = (store: TodosStore): HTMLDivElement => {
 const container = document.createElement('div');
@@ -19,7 +17,6 @@ const text = input.value.trim();
 if (text) {
 store.addRow('todos', {text, completed: false});
 input.value = '';
-input.focus();
 }
 };
 
@@ -35,4 +32,4 @@ container.appendChild(input);
 container.appendChild(addButton);
 
 return container;
-};
+};

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

@@ -1,8 +1,7 @@
 {{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
-import './todoItem.css';
-
+{{addImport "import './todoItem.css';"}}
 {{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
-import {createButton} from './button';
+{{addImport "import {createButton} from './button';"}}
 
 export const createTodoItem = (id: string, text: string, completed: boolean, onToggle: () => void, onDelete: () => void): HTMLDivElement => {
 const item = document.createElement('div');
@@ -25,4 +24,4 @@ item.appendChild(label);
 item.appendChild(deleteBtn);
 
 return item;
-};
+};

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

@@ -1,21 +1,19 @@
 {{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
-import './todoList.css';
-import {type TodosStore} from './store';
-
+{{addImport "import './todoList.css';"}}
+{{addImport "import {type TodosStore, type TodoRow} from './store';"}}
 {{includeFile template="client/src/todos/todoItem.ts.hbs" output="client/src/todoItem.{{ext}}"}}
-import {createTodoItem} from './todoItem';
+{{addImport "import {createTodoItem} from './todoItem';"}}
 
 export const createTodoList = (store: TodosStore): HTMLDivElement => {
 const list = document.createElement('div');
 list.id = 'todoList';
 
 const render = () => {
-const todos = store.getTable('todos');
-const todoIds = Object.keys(todos);
+const todoIds = store.getSortedRowIds('todos');
 
 list.innerHTML = '';
 todoIds.forEach((id) => {
-const todo = todos[id];
+const todo = store.getRow('todos', id) as TodoRow;
 const item = createTodoItem(
 id,
 todo.text,
@@ -35,4 +33,4 @@ store.addTablesListener(render);
 render();
 
 return list;
-};
+};

package/templates/client/vite-env.d.ts.hbs

@@ -0,0 +1,4 @@
+declare module '*.css' {
+const content: string;
+export default content;
+}

package/templates/client/vite.config.js.hbs

@@ -2,11 +2,61 @@
 {{#if react}}
   {{addImport "import react from '@vitejs/plugin-react';"}}
 {{/if}}
+{{#if persistSqlite}}
+  {{addImport "import {viteStaticCopy} from 'vite-plugin-static-copy';"}}
+{{/if}}
+{{#if persistPglite}}
+  {{addImport "import {viteStaticCopy} from 'vite-plugin-static-copy';"}}
+{{/if}}
 
 export default defineConfig({
+plugins: [
 {{#if react}}
-  plugins: [react({
-    jsxRuntime: 'automatic',
-  })],
+  react({
+  jsxRuntime: 'automatic',
+  }),
+{{/if}}
+{{#if persistSqlite}}
+  viteStaticCopy({
+  targets: [
+  {
+  src: 'node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
+  dest: '.'
+  }
+  ]
+  }),
+{{/if}}
+{{#if persistPglite}}
+  viteStaticCopy({
+  targets: [
+  {
+  src: 'node_modules/@electric-sql/pglite/dist/*.wasm',
+  dest: '.'
+  }
+  ]
+  }),
+{{/if}}
+],
+{{#if persistSqlite}}
+  server: {
+  headers: {
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  },
+  },
+  optimizeDeps: {
+  exclude: ['@sqlite.org/sqlite-wasm'],
+  },
+{{/if}}
+{{#if persistPglite}}
+  server: {
+  headers: {
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  },
+  },
+  optimizeDeps: {
+  exclude: ['@electric-sql/pglite'],
+  },
 {{/if}}
 });