create-tinybase 0.2.5 → 0.3.1

package/README.md

@@ -22,8 +22,8 @@ This will prompt you with questions to configure your new TinyBase app:
 - **Framework** - React or Vanilla JS
 - **App type** - Todo app, Chat app, Drawing app, or Tic-tac-toe game
 - **Store schemas** - TypeScript type safety for stores (TypeScript only)
-- **Synchronization** - Enable real-time sync between clients
-- **Server code** - Include Node.js or Cloudflare Durable Objects server
+- **Synchronization** - None, remote demo server, local Node server, or local Durable Objects server
+- **Persistence** - None, Local Storage, SQLite, or PGLite
 - **Prettier** - Include Prettier for code formatting
 - **ESLint** - Include ESLint for code linting
 
@@ -146,44 +146,88 @@ Schemas define:
 
 ### Synchronization
 
-**Enabled** (default):
+Choose from four synchronization options:
 
-- Real-time sync between browser tabs
-- WebSocket-based synchronization
-- Connects to demo server by default (wss://vite.tinybase.org)
-- MergeableStore for conflict-free replication
-- Automatic reconnection handling
-
-**Disabled**:
+**None**:
 
 - Local-only data storage
 - No network dependencies
 - Simpler architecture
 - Still uses MergeableStore for consistency
 
-### Server Code
+**Via remote demo server (stateless)** (default):
 
-When synchronization is enabled, you can include server code:
+- Real-time sync between browser tabs
+- WebSocket-based synchronization
+- Connects to demo server (wss://vite.tinybase.org)
+- MergeableStore for conflict-free replication
+- Automatic reconnection handling
+- Great for prototyping
+- No local server management needed
 
-**Node.js Server** (port 8043):
+**Via local node server (stateless)** (port 8043):
 
+- Real-time sync with local Node.js server
 - WebSocket server using `ws` library
 - TinyBase server synchronizer
 - Runs with `npm run dev` in server directory
+- Stateless - no data persistence
 - Easy to deploy to any Node.js host
+- Full control over server code
 
-**Cloudflare Durable Objects** (port 8787):
+**Via local DurableObjects server (stateful)** (port 8787):
 
+- Real-time sync with Cloudflare Durable Objects
 - Serverless WebSocket server
 - Edge computing with Durable Objects
+- Stateful - data persists in Durable Objects storage
 - Global distribution
 - Runs locally with Wrangler
+- Designed for production deployment
 
-**No Server**:
+### Persistence
 
-- Connects to public demo server
-- Great for prototyping
-- No local server management needed
+Choose how to persist store data on the client:
+
+**None**:
+
+- No client-side persistence
+- Data lost on page refresh
+- Simplest option for demos
+- Still works with synchronization
+
+**Local Storage** (default):
+
+- Browser localStorage persistence
+- Data persists across sessions
+- Simple and widely supported
+- Automatic load/save with `createLocalPersister`
+- Best for most use cases
+
+**SQLite**:
+
+- Browser-based SQLite via WebAssembly
+- Structured database storage
+- Uses `@sqlite.org/sqlite-wasm` package
+- IndexedDB-backed (`:local:` prefix)
+- Good for complex data structures
+- Slightly larger bundle size
+
+**PGLite**:
+
+- PostgreSQL in the browser
+- Full PostgreSQL compatibility
+- Uses `@electric-sql/pglite` package
+- IndexedDB-backed (`idb://` prefix)
+- Advanced SQL features
+- Larger bundle size
+
+**Important Notes:**
+
+- Persistence is configured **before** synchronization to avoid race conditions
+- Works with all sync types (or no sync)
+- In multi-store apps, all stores get persistence
+- Data is automatically loaded on app start and saved on changes
 
 ### Prettier & ESLint
 

package/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import{existsSync as y}from"fs";import{dirname as w,join as u}from"path";import{createCLI as f,detectPackageManager as h}from"tinycreate";import{fileURLToPath as k}from"url";const j=w(k(import.meta.url)),x={welcomeMessage:`\u{1F389} Welcome to TinyBase!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=u(process.cwd(),e);return y(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:(e,t)=>t.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"confirm",name:"sync",message:"Enable synchronization?",initial:!0},{type:(e,t)=>t.sync?"confirm":null,name:"server",message:"Add code for server?",initial:!1},{type:(e,t)=>t.server?"select":null,name:"serverType",message:"Server type:",choices:[{title:"Node",value:"node"},{title:"Durable Objects",value:"durable-objects"}],initial:0},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!0},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!0},{type:(e,t)=>t.server?null:"confirm",name:"installAndRun",message:"Install dependencies and start dev server?",initial:!0}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:g,schemas:i,sync:c,server:l,serverType:d,installAndRun:p}=e,a=s==="typescript",v=!a,o=n==="react";return{projectName:t,language:s,framework:n,appType:r,prettier:m,eslint:g,schemas:a&&(i===!0||i==="true"),sync:c===!0||c==="true",server:l===!0||l==="true",serverType:d||"node",installAndRun:p===!0||p==="true",typescript:a,javascript:v,react:o,ext:a?o?"tsx":"ts":o?"jsx":"js"}},createDirectories:async(e,t)=>{const{mkdir:s}=await import("fs/promises"),{join:n}=await import("path"),r=t.server;await s(n(e,"client/src"),{recursive:!0}),await s(n(e,"client/public"),{recursive:!0}),r&&await s(n(e,"server"),{recursive:!0})},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),r=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:r}},templateRoot:u(j,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:"client",onSuccess:(e,t)=>{const s=t.server,n=h();console.log("Next steps:"),console.log(),s&&(console.log("To run the server:"),console.log(`  cd ${e}/server`),console.log(`  ${n} install`),console.log(`  ${n} run dev`),console.log()),console.log("To run the client:"),console.log(`  cd ${e}/client`),console.log(`  ${n} install`),console.log(`  ${n} run dev`)}};f(x).catch(e=>{console.error(e),process.exit(1)});
+import{existsSync as f}from"fs";import{dirname as k,join as u}from"path";import{createCLI as x,detectPackageManager as R}from"tinycreate";import{fileURLToPath as S}from"url";const P=k(S(import.meta.url)),C={welcomeMessage:`\u{1F389} Welcome to TinyBase!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=u(process.cwd(),e);return f(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:(e,t)=>t.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"select",name:"syncType",message:"Synchronization:",choices:[{title:"None",value:"none"},{title:"Via remote demo server (stateless)",value:"remote"},{title:"Via local node server (stateless)",value:"node"},{title:"Via local DurableObjects server (stateful)",value:"durable-objects"}],initial:1},{type:"select",name:"persistenceType",message:"Persistence:",choices:[{title:"None",value:"none"},{title:"Local Storage",value:"local-storage"},{title:"SQLite",value:"sqlite"},{title:"PGlite",value:"pglite"}],initial:1},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!0},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!0},{type:(e,t)=>t.syncType!=="node"&&t.syncType!=="durable-objects"?"confirm":null,name:"installAndRun",message:"Install dependencies and start dev server?",initial:!0}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:o,prettier:m,eslint:g,schemas:l,syncType:d,persistenceType:y,installAndRun:p}=e,i=s==="typescript",v=!i,c=n==="react",b=i?c?"tsx":"ts":c?"jsx":"js",a=d||"remote",T=a!=="none",h=a==="node"||a==="durable-objects",j=a==="durable-objects"?"durable-objects":"node",w=a==="durable-objects",r=y||"local-storage";return{projectName:t,language:s,framework:n,appType:o,prettier:m,eslint:g,schemas:i&&(l===!0||l==="true"),syncType:a,sync:T,server:h,serverType:j,isDurableObject:w,persistenceType:r,persist:r!=="none",persistLocalStorage:r==="local-storage",persistSqlite:r==="sqlite",persistPglite:r==="pglite",installAndRun:p===!0||p==="true",typescript:i,javascript:v,react:c,ext:b}},createDirectories:async(e,t)=>{const{mkdir:s}=await import("fs/promises"),{join:n}=await import("path"),o=t.server;await s(n(e,"client/src"),{recursive:!0}),await s(n(e,"client/public"),{recursive:!0}),o&&await s(n(e,"server"),{recursive:!0})},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),o=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:o}},templateRoot:u(P,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:"client",onSuccess:(e,t)=>{const s=t.syncType,n=s==="node"||s==="durable-objects",o=R();console.log("Next steps:"),console.log(),n&&(console.log("To run the server:"),console.log(`  cd ${e}/server`),console.log(`  ${o} install`),console.log(`  ${o} run dev`),console.log()),console.log("To run the client:"),console.log(`  cd ${e}/client`),console.log(`  ${o} install`),console.log(`  ${o} run dev`)}};x(C).catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinybase",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",
@@ -8,7 +8,7 @@
   },
   "license": "MIT",
   "homepage": "https://tinybase.org",
-  "description": "The CLI to build a new app using TinyBase, a reactive data store and sync engine.",
+  "description": "The CLI to build new apps using TinyBase, a reactive data store and sync engine.",
   "keywords": [
     "tiny",
     "sync engine",
@@ -16,14 +16,17 @@
     "reactive",
     "state",
     "data",
-    "react"
+    "react",
+    "sqlite",
+    "pglite",
+    "durable-objects"
   ],
   "type": "module",
   "bin": {
     "create-tinybase": "cli.js"
   },
   "dependencies": {
-    "tinycreate": "^1.0.3"
+    "tinycreate": "^1.0.4"
   },
   "engines": {
     "node": ">=18.0.0"

package/templates/README.md.hbs

@@ -5,13 +5,12 @@
 
 # {{projectName}}
 
-A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
-and {{#if react}}React{{else}}Vanilla JS{{/if}}.
+A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and {{#if react}}React{{else}}Vanilla JS{{/if}}.
 
 ## Getting Started
 
-Alongside this file, you will see a directory called `client` (and optionally
-one called `server` if you included server code).
+Alongside this file, you will see a directory called `client`{{#if server
+}} (and one called `server` for your {{#if (eq syncType "node")}}local Node.js server{{else if (eq syncType "durable-objects")}}local Cloudflare Durable Objects server{{/if}}){{/if}}.
 
 To start the web client with Vite, run the following commands:
 
@@ -24,18 +23,137 @@ npm run dev
 PNPM, Yarn, and Bun should also work. Your app will be available at
 `http://localhost:5173`, or whichever port Vite specifies in the console.
 
-If you included server code, start the server in a separate terminal, ideally
-before starting the client:
+{{#if server}}
+  If you included server code, start the server in a separate terminal, ideally
+  before starting the client:
 
-```bash
-# In a separate terminal
-cd server
-npm install
-npm run dev
-```
+  ```bash
+  # In a separate terminal
+  cd server
+  npm install
+  npm run dev
+  ```
 
+{{/if}}
 After that, start hacking!
 
+## Structure
+
+This project is organized into {{#if server}}two main directories{{else}}a single `client` directory{{/if}}:
+
+### Client
+
+The `client` directory contains your {{#if react}}React-based{{else}}vanilla JavaScript{{/if}} web application,
+built with Vite and {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}.
+
+#### Key Files
+
+- **`index.html`** - The main HTML file that loads your app
+- **`src/index.{{ext}}`** - Entry point that bootstraps the application{{#if react}} and renders the React component tree{{/if}}
+- **`src/{{#if react}}App{{else}}app{{/if}}.{{ext}}`** - {{#if react}}Main React component that renders the {{#if (eq appType "todos")}}todo list{{else if (eq appType "chat")}}chat interface{{else if (eq appType "drawing")}}drawing
+    canvas{{else if (eq appType "game")}}game{{/if}}
+{{else}}Main application logic{{/if}}
+-
+**`src/{{#if react}}{{#if (eq appType "chat")}}ChatStore{{else if (eq appType "drawing")}}CanvasStore{{else}}Store{{/if}}{{else}}{{#if (eq appType "chat")}}chatStore{{else if (eq appType "drawing")}}canvasStore{{else}}store{{/if}}{{/if}}.{{ext}}`**
+- TinyBase {{#if (eq appType "chat")}}chat messages{{else if (eq appType "drawing")}}drawing canvas{{else}}main{{/if}} store configuration
+{{#if (eq appType "chat")}}
+  - **`src/{{#if react}}SettingsStore{{else}}settingsStore{{/if}}.{{ext}}`** - TinyBase settings store (not synchronized)
+{{/if}}
+{{#if (eq appType "drawing")}}
+  - **`src/{{#if react}}SettingsStore{{else}}settingsStore{{/if}}.{{ext}}`** - TinyBase settings store (not synchronized)
+{{/if}}
+- **`src/config.{{ext}}`** - Configuration settings{{#if server}} (including server connection URL){{/if}}
+
+#### How It Works
+
+The app uses **TinyBase** to manage application state in a reactive data store.
+{{#if schemas}}Type-safe schemas define the structure of your data, providing autocomplete
+  and compile-time type checking.{{/if}}
+
+{{#if sync}}
+  The store is a **MergeableStore**, which supports real-time synchronization across
+  multiple clients. When you open the app, it generates a unique room ID in the URL
+  path (e.g., `/abc123`). Anyone who visits the same URL will share the same data
+  and see live updates from other users.
+
+{{/if}}
+{{#if persistLocalStorage}}
+  **Persistence** is enabled using browser LocalStorage.
+  Your data is automatically saved and restored when you reload the page.
+
+{{/if}}
+{{#if persistSqlite}}
+  **Persistence** is enabled using SQLite WASM (running entirely in the browser).
+  Your data is automatically saved and restored when you reload the page.
+
+{{/if}}
+{{#if persistPglite}}
+  **Persistence** is enabled using PGlite (Postgres WASM running entirely in the browser).
+  Your data is automatically saved and restored when you reload the page.
+
+{{/if}}
+{{#if sync}}
+  **Synchronization** is powered by TinyBase's WebSocket synchronizer{{#if server}}, connecting
+    to your {{#if (eq syncType "durable-objects")}}Cloudflare Durable Objects{{else}}Node.js{{/if}} server{{else}} (connecting to a demo server at vite.tinybase.org){{/if}}.
+  When data changes locally, it's sent to the server and broadcast to all other
+  clients in the same room. The MergeableStore handles conflict resolution using
+  CRDTs, ensuring all clients converge to the same state.
+
+{{/if}}
+{{#if react}}
+  **React Integration** - TinyBase provides React hooks that automatically subscribe
+  to store changes and trigger re-renders when data updates. This means your UI
+  stays in sync with your data with minimal boilerplate.
+
+  Components like {{#if (eq appType "todos")}}`TodoList` and `TodoItem` use hooks like `useSortedRowIds`, `useRow`, and
+    callback hooks like `useAddRowCallback` and `useDelRowCallback`
+  {{else if (eq appType "chat")}}`MessageList` and `MessageInput` use TinyBase hooks to display and send messages
+  {{else if (eq appType "drawing")}}`Canvas` uses TinyBase hooks to track drawing state across users
+  {{else}}`Game` uses TinyBase hooks to manage game state{{/if}} to interact
+  with the store.
+
+{{/if}}
+{{#if server}}
+  ### Server
+
+  The `server` directory contains your {{#if (eq syncType "durable-objects")}}Cloudflare Durable Objects{{else}}Node.js{{/if}} WebSocket server.
+
+  #### Key Files
+
+  - **`index.{{ext}}`** - Server entry point
+
+  #### How It Works
+
+  {{#if (eq syncType "durable-objects")}}
+    The server uses **Cloudflare Durable Objects** to provide persistent, distributed
+    synchronization. Each room (identified by the URL path) maps to a Durable Object
+    instance that:
+
+    - Maintains the canonical state in SQL storage (using Durable Object SQL Storage)
+    - Handles WebSocket connections from clients
+    - Broadcasts changes to all connected clients in the room
+    - Automatically persists data, ensuring durability across deployments
+
+    The `TinyBaseDurableObject` class extends `WsServerDurableObject` and creates a
+    MergeableStore with a SQL storage persister. Cloudflare's infrastructure ensures
+    that all clients connecting to the same path are routed to the same Durable
+    Object instance.
+
+    To deploy to Cloudflare Workers, you'll need to configure your `wrangler.toml`
+    file with your Durable Object bindings.
+  {{else}}
+    The server runs a **Node.js WebSocket server** using the `ws` library. It acts
+    as a relay between clients, broadcasting state changes to all connected clients
+    in the same room.
+
+    When a client connects to a path (e.g., `/abc123`), the server groups them with
+    other clients on the same path and ensures all changes are synchronized.
+
+    The server logs when clients join or leave rooms, helping you monitor activity
+    during development.
+  {{/if}}
+
+{{/if}}
 ## Learn More
 
 - [TinyBase Documentation](https://tinybase.org)

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

@@ -5,13 +5,20 @@
   {{addImport "import pluginReact from 'eslint-plugin-react';"}}
   {{addImport "import pluginReactHooks from 'eslint-plugin-react-hooks';"}}
 {{/if}}
+{{addImport "import globals from 'globals';"}}
 
 export default [
+{
+languageOptions: {
+globals: globals.browser,
+},
+},
 {{#if typescript}}
   ...tseslint.configs.recommended,
   {
   rules: {
   '@typescript-eslint/no-unused-vars': 'warn',
+  '@typescript-eslint/no-explicit-any': 'warn',
   },
   },
 {{else}}

package/templates/client/package.json.hbs

@@ -22,25 +22,31 @@
 },
 "devDependencies": {
 {{#list}}
-  "vite": "^7.1.3"
+  "vite": "^7.3.1"
   {{#if typescript}}
     "typescript": "^5.9.3"
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.0.9"
     {{#if react}}
-      "@types/react": "^19.2.7"
+      "@types/react": "^19.2.8"
       "@types/react-dom": "^19.2.3"
     {{/if}}
   {{/if}}
   {{#if react}}
-    "@vitejs/plugin-react": "^4.3.4"
+    "@vitejs/plugin-react": "^5.1.2"
+  {{/if}}
+  {{#if persistSqlite}}
+    "vite-plugin-static-copy": "^3.2.0"
+  {{/if}}
+  {{#if persistPglite}}
+    "vite-plugin-static-copy": "^3.2.0"
   {{/if}}
   {{#if prettier}}
-    "prettier": "^3.7.4"
+    "prettier": "^3.8.0"
   {{/if}}
   {{#if eslint}}
     "eslint": "^9.39.2"
     {{#if typescript}}
-      "typescript-eslint": "^8.51.0"
+      "typescript-eslint": "^8.53.1"
     {{/if}}
     {{#if react}}
       "eslint-plugin-react": "7.37.5"
@@ -51,7 +57,7 @@
 },
 "dependencies": {
 {{#list}}
-  "tinybase": "^7.3.1"
+  "tinybase": "^7.3.2"
   {{#if react}}
     "react": "^19.2.3"
     "react-dom": "^19.2.3"
@@ -59,18 +65,32 @@
   {{#if sync}}
     "reconnecting-websocket": "^4.4.0"
   {{/if}}
+  {{#if persistSqlite}}
+    "@sqlite.org/sqlite-wasm": "^3.50.4-build1"
+  {{/if}}
+  {{#if persistPglite}}
+    "@electric-sql/pglite": "^0.3.15"
+  {{/if}}
 {{/list}}
 }
 }
 {{#if prettier}}
-  {{includeFile template="client/.prettierrc.hbs" output="client/.prettierrc"}}
+  {{includeFile template="client/.prettierrc.json.hbs" output="client/.prettierrc.json"}}
 {{/if}}
 {{#if eslint}}
   {{includeFile template="client/eslint.config.js.hbs" output="client/eslint.config.js"}}
 {{/if}}
 {{#if react}}
   {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+{{else}}
+  {{#if persistSqlite}}
+    {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+  {{/if}}
+  {{#if persistPglite}}
+    {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
+  {{/if}}
 {{/if}}
 {{#if typescript}}
   {{includeFile template="client/tsconfig.json.hbs" output="client/tsconfig.json"}}
+  {{includeFile template="client/vite-env.d.ts.hbs" output="client/src/vite-env.d.ts"}}
 {{/if}}

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

@@ -1,40 +1,46 @@
-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/chat/SettingsStore.tsx.hbs" output="client/src/SettingsStore.{{ext}}"}}
-import {SettingsStore} from './SettingsStore';
+{{addImport "import {SettingsStore} from './SettingsStore';"}}
 
 {{includeFile template="client/src/chat/ChatStore.tsx.hbs" output="client/src/ChatStore.{{ext}}"}}
-import {ChatStore} from './ChatStore';
+{{addImport "import {ChatStore} from './ChatStore';"}}
 
 {{includeFile template="client/src/chat/UsernameInput.tsx.hbs" output="client/src/UsernameInput.{{ext}}"}}
-import {UsernameInput} from './UsernameInput';
+{{addImport "import {UsernameInput} from './UsernameInput';"}}
 
 {{includeFile template="client/src/chat/Messages.tsx.hbs" output="client/src/Messages.{{ext}}"}}
-import {Messages} from './Messages';
+{{addImport "import {Messages} from './Messages';"}}
 
 {{includeFile template="client/src/chat/MessageInput.tsx.hbs" output="client/src/MessageInput.{{ext}}"}}
-import {MessageInput} from './MessageInput';
+{{addImport "import {MessageInput} from './MessageInput';"}}
+
+export const App = () => {
+const [settingsReady, setSettingsReady] = useState(false);
+const [chatReady, setChatReady] = useState(false);
+const loading = !settingsReady || !chatReady;
 
-const App = () => {
 return (
 <StrictMode>
   <Provider>
-    <SettingsStore />
-    <ChatStore />
-    <UsernameInput />
-    <Messages />
-    <MessageInput />
-    <Inspector />
+    <SettingsStore onReady={()=> setSettingsReady(true)} />
+      <ChatStore onReady={()=> setChatReady(true)} />
+        {loading ? (
+        <Loading />
+        ) : (
+        <>
+          <UsernameInput />
+          <Messages />
+          <MessageInput />
+          <Inspector />
+        </>
+        )}
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};