[svelte] Tidy up readme

jamesgpearce · jamesgpearce · commit ca1ef749175a · 2026-03-14T14:00:57.000+13:00
diff --git a/src/cli.ts b/src/cli.ts
@@ -170,6 +170,55 @@ const config = {
     const persistSqlite = normalizedPersistenceType === 'sqlite';
     const persistPglite = normalizedPersistenceType === 'pglite';
     const needsViteConfig = react || svelte || persistSqlite || persistPglite;
+    const appSurface =
+      appType === 'chat'
+        ? 'chat interface'
+        : appType === 'drawing'
+          ? 'drawing canvas'
+          : appType === 'game'
+            ? 'game'
+            : 'todo list';
+    const frameworkName = react ? 'React' : vanilla ? 'Vanilla JS' : 'Svelte';
+    const clientFrameworkDescription = react
+      ? 'React-based'
+      : vanilla
+        ? 'vanilla JavaScript'
+        : 'Svelte-based';
+    const entryFileDescription = react
+      ? 'Entry point that bootstraps and renders the React app'
+      : svelte
+        ? 'Entry point that bootstraps and mounts the Svelte app'
+        : 'Entry point that bootstraps the app';
+    const appFileStem = vanilla ? 'app' : 'App';
+    const appFileExt = vanilla ? scriptExt : componentExt;
+    const appFileDescription = react
+      ? `Main React component that renders the ${appSurface}`
+      : vanilla
+        ? 'Main application logic'
+        : `Main Svelte component that renders the ${appSurface}`;
+    const primaryStoreStem = react
+      ? appType === 'chat'
+        ? 'ChatStore'
+        : appType === 'drawing'
+          ? 'CanvasStore'
+          : 'Store'
+      : appType === 'chat'
+        ? 'chatStore'
+        : appType === 'drawing'
+          ? 'canvasStore'
+          : 'store';
+    const primaryStoreExt = react ? componentExt : scriptExt;
+    const primaryStoreDescription = `TinyBase ${
+      appType === 'chat'
+        ? 'chat messages'
+        : appType === 'drawing'
+          ? 'drawing canvas'
+          : 'main'
+    } store configuration`;
+    const needsSettingsStore = appType === 'chat' || appType === 'drawing';
+    const settingsStoreStem = react ? 'SettingsStore' : 'settingsStore';
+    const settingsStoreExt = react ? componentExt : scriptExt;
+    const configExt = react ? componentExt : scriptExt;
 
     return {
       projectName,
@@ -190,6 +239,19 @@ const config = {
       persistSqlite,
       persistPglite,
       needsViteConfig,
+      frameworkName,
+      clientFrameworkDescription,
+      entryFileDescription,
+      appFileStem,
+      appFileExt,
+      appFileDescription,
+      primaryStoreStem,
+      primaryStoreExt,
+      primaryStoreDescription,
+      needsSettingsStore,
+      settingsStoreStem,
+      settingsStoreExt,
+      configExt,
       installAndRun: installAndRun === true || installAndRun === 'true',
       typescript,
       javascript,
diff --git a/templates/README.md.hbs b/templates/README.md.hbs
@@ -5,7 +5,7 @@
 
 # {{projectName}}
 
-A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and {{#if react}}React{{/if}}{{#if vanilla}}Vanilla JS{{/if}}{{#if svelte}}Svelte{{/if}}.
+A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and {{frameworkName}}.
 
 ## Getting Started
 
@@ -43,26 +43,19 @@ This project is organized into {{#if server}}two main directories{{else}}a singl
 
 ### Client
 
-The `client` directory contains your {{#if react}}React-based{{/if}}{{#if vanilla}}vanilla JavaScript{{/if}}{{#if svelte}}Svelte-based{{/if}} web application,
+The `client` directory contains your {{clientFrameworkDescription}} 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.{{entryExt}}`** - Entry point that bootstraps the application{{#if react}} and renders the React component tree{{/if}}{{#if svelte}} and mounts the Svelte app{{/if}}
-- **`src/{{#if react}}App{{/if}}{{#if vanilla}}app{{/if}}{{#if svelte}}App{{/if}}.{{#if vanilla}}{{scriptExt}}{{else}}{{componentExt}}{{/if}}`** - {{#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}}
-{{/if}}{{#if vanilla}}Main application logic{{/if}}{{#if svelte}}Main Svelte 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}}{{/if}}
--
-**`src/{{#if react}}{{#if (eq appType "chat")}}ChatStore{{else if (eq appType "drawing")}}CanvasStore{{else}}Store{{/if}}{{/if}}{{#if vanilla}}{{#if (eq appType "chat")}}chatStore{{else if (eq appType "drawing")}}canvasStore{{else}}store{{/if}}{{/if}}{{#if svelte}}{{#if (eq appType "chat")}}chatStore{{else if (eq appType "drawing")}}canvasStore{{else}}store{{/if}}{{/if}}.{{#if react}}{{componentExt}}{{else}}{{scriptExt}}{{/if}}`**
-- 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{{/if}}{{#if vanilla}}settingsStore{{/if}}{{#if svelte}}settingsStore{{/if}}.{{#if react}}{{componentExt}}{{else}}{{scriptExt}}{{/if}}`** - TinyBase settings store (not synchronized)
+- **`index.html`**: The main HTML file that loads your app
+- **`src/index.{{entryExt}}`**: {{entryFileDescription}}
+- **`src/{{appFileStem}}.{{appFileExt}}`**: {{appFileDescription}}
+- **`src/{{primaryStoreStem}}.{{primaryStoreExt}}`**: {{primaryStoreDescription}}
+{{#if needsSettingsStore}}
+  - **`src/{{settingsStoreStem}}.{{settingsStoreExt}}`**: TinyBase settings store (not synchronized)
 {{/if}}
-{{#if (eq appType "drawing")}}
-  - **`src/{{#if react}}SettingsStore{{/if}}{{#if vanilla}}settingsStore{{/if}}{{#if svelte}}settingsStore{{/if}}.{{#if react}}{{componentExt}}{{else}}{{scriptExt}}{{/if}}`** - TinyBase settings store (not synchronized)
-{{/if}}
-- **`src/config.{{#if react}}{{componentExt}}{{else}}{{scriptExt}}{{/if}}`** - Configuration settings{{#if server}} (including server connection URL){{/if}}
+- **`src/config.{{configExt}}`**: Configuration settings{{#if server}} (including server connection URL){{/if}}
 
 #### How It Works
 
@@ -101,7 +94,7 @@ The app uses **TinyBase** to manage application state in a reactive data store.
 
 {{/if}}
 {{#if react}}
-  **React Integration** - TinyBase provides React hooks that automatically subscribe
+  **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.
 
@@ -114,7 +107,7 @@ The app uses **TinyBase** to manage application state in a reactive data store.
 
 {{/if}}
 {{#if svelte}}
-  **Svelte Integration** - TinyBase provides Svelte stores and helpers that keep the
+  **Svelte Integration**: TinyBase provides Svelte stores and helpers that keep the
   UI reactive as data changes. Components subscribe declaratively so the interface
   stays synchronized with the underlying TinyBase store.
 
@@ -126,7 +119,7 @@ The app uses **TinyBase** to manage application state in a reactive data store.
 
   #### Key Files
 
-  - **`index.{{ext}}`** - Server entry point
+  - **`index.{{ext}}`**: Server entry point
 
   #### How It Works
 
diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap
