create-tinybase 0.2.4 → 0.3.0

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

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