More tweaks

jamesgpearce · jamesgpearce · commit 5544b9b9c04e · 2026-01-20T11:22:07.000+13:00
diff --git a/CONVENTIONS.md b/CONVENTIONS.md
@@ -41,8 +41,8 @@ This document defines the consistent patterns and conventions used across all Ti
 ### React Components
 
 ```typescript
-// Define component
-const App = () => {
+// Define and export component
+export const App = () => {
   return (
     <StrictMode>
       <Provider>
@@ -51,9 +51,6 @@ const App = () => {
     </StrictMode>
   );
 };
-
-// Export at end of file
-export {App};
 ```
 
 ### Vanilla Functions
@@ -82,7 +79,7 @@ export /* re-export hooks */ {};
 
 export const Store = () => {
   const store = useCreateStore(() =>
-    createMergeableStore(STORE_ID).setTable('todos', {
+    createMergeableStore().setTable('todos', {
       /* ... */
     }),
   );
@@ -114,7 +111,7 @@ const STORE_ID = 'chat'; // or 'canvas'
 
 export const ChatStore = () => {
   const store = useCreateStore(() =>
-    createMergeableStore(STORE_ID).setTable('messages', {}),
+    createMergeableStore().setTable('messages', {}),
   );
 
   useProvideStore(STORE_ID, store);
@@ -132,7 +129,7 @@ import {createMergeableStore} from 'tinybase';
 
 const STORE_ID = 'todos'; // or 'game'
 
-export const store = createMergeableStore(STORE_ID).setTable('todos', {
+export const store = createMergeableStore().setTable('todos', {
   /* ... */
 });
 
@@ -152,10 +149,7 @@ export type SettingsStore = typeof settingsStore;
 // chatStore.ts or canvasStore.ts
 const STORE_ID = 'chat'; // or 'canvas'
 
-export const chatStore = createMergeableStore(STORE_ID).setTable(
-  'messages',
-  {},
-);
+export const chatStore = createMergeableStore().setTable('messages', {});
 
 export type ChatStore = typeof chatStore; // or CanvasStore
 ```
@@ -284,7 +278,7 @@ Both React and vanilla support schema typing via conditionals:
   import {createMergeableStore} from 'tinybase';
 {{/if}}
 
-export const store = createMergeableStore(STORE_ID){{#if schemas}}
+export const store = createMergeableStore(){{#if schemas}}
   .setTablesSchema(SCHEMA){{/if}};
 ```
 
diff --git a/screenshots/chat.png b/screenshots/chat.png
diff --git a/screenshots/drawing.png b/screenshots/drawing.png
diff --git a/screenshots/todos.png b/screenshots/todos.png
diff --git a/src/cli.ts b/src/cli.ts
@@ -182,10 +182,8 @@ const config = {
   processIncludedFile: (file: FileConfig, context: TemplateContext) => {
     const {javascript} = context;
 
-    // Apply smart defaults based on file extension
     const prettier =
       file.prettier ?? /\.(js|jsx|ts|tsx|css|json|html|md)$/.test(file.output);
-    // Transpile if the template is TypeScript but we're generating JavaScript
     const transpile =
       file.transpile ??
       (/\.(ts|tsx)\.hbs$/.test(file.template) && javascript === true);
diff --git a/templates/client/src/chat/App.tsx.hbs b/templates/client/src/chat/App.tsx.hbs
@@ -22,7 +22,7 @@
 {{includeFile template="client/src/chat/MessageInput.tsx.hbs" output="client/src/MessageInput.{{ext}}"}}
 {{addImport "import {MessageInput} from './MessageInput';"}}
 
-const App = () => {
+export const App = () => {
 return (
 <StrictMode>
   <Provider>
@@ -35,6 +35,4 @@ return (
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};
diff --git a/templates/client/src/chat/app.ts.hbs b/templates/client/src/chat/app.ts.hbs
@@ -22,7 +22,7 @@
 {{includeFile template="client/src/chat/messageInput.ts.hbs" output="client/src/messageInput.{{ext}}"}}
 {{addImport "import {createMessageInput} from './messageInput';"}}
 
-const app = () => {
+export const app = () => {
 const appContainer = document.getElementById('app')!;
 
 appContainer.appendChild(createUsernameInput(settingsStore, chatStore));
@@ -31,9 +31,6 @@ 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};
+};
diff --git a/templates/client/src/chat/messages.ts.hbs b/templates/client/src/chat/messages.ts.hbs
@@ -23,10 +23,8 @@ messagesContainer.appendChild(messageElement);
 });
 };
 
-// Initial render
 updateMessages();
 
-// Listen for changes
 store.addTablesListener(updateMessages);
 
 return messagesContainer;
diff --git a/templates/client/src/drawing/App.tsx.hbs b/templates/client/src/drawing/App.tsx.hbs
@@ -19,7 +19,7 @@
 {{includeFile template="client/src/drawing/Canvas.tsx.hbs" output="client/src/Canvas.{{ext}}"}}
 {{addImport "import {Canvas} from './Canvas';"}}
 
-const App = () => {
+export const App = () => {
 return (
 <StrictMode>
   <Provider>
@@ -31,6 +31,4 @@ return (
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};
diff --git a/templates/client/src/drawing/app.ts.hbs b/templates/client/src/drawing/app.ts.hbs
@@ -10,11 +10,9 @@
 {{includeFile template="client/src/drawing/canvas.ts.hbs" output="client/src/canvas.{{ext}}"}}
 {{addImport "import {createCanvas} from './canvas';"}}
 
-const app = () => {
+export const app = () => {
 const appContainer = document.getElementById('app')!;
 
 appContainer.appendChild(createDrawingControls(settingsStore, canvasStore));
 appContainer.appendChild(createCanvas(settingsStore, canvasStore));
-};
-
-export {app};
+};
diff --git a/templates/client/src/game/App.tsx.hbs b/templates/client/src/game/App.tsx.hbs
@@ -13,7 +13,7 @@
 {{includeFile template="client/src/game/Game.tsx.hbs" output="client/src/Game.{{ext}}"}}
 {{addImport "import {Game} from './Game';"}}
 
-const App = () => {
+export const App = () => {
 return (
 <StrictMode>
   <Provider>
@@ -23,6 +23,4 @@ return (
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};
diff --git a/templates/client/src/game/Game.tsx.hbs b/templates/client/src/game/Game.tsx.hbs
@@ -10,9 +10,9 @@
 {{addImport "import {GameStatus} from './GameStatus';"}}
 
 const WINNING_LINES = [
-[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
-[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
-[0, 4, 8], [2, 4, 6], // diagonals
+[0, 1, 2], [3, 4, 5], [6, 7, 8],
+[0, 3, 6], [1, 4, 7], [2, 5, 8],
+[0, 4, 8], [2, 4, 6],
 ];
 
 export const Game = () => {
@@ -26,7 +26,6 @@ if (gameStatus !== 'playing') return;
 
 const board = store.getTable('board');
 
-// Check for winner
 for (const line of WINNING_LINES) {
 const [a, b, c] = line;
 const cellA = board[a]?.value;
@@ -41,14 +40,12 @@ return;
 }
 }
 
-// Check for draw
 const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
 if (filledCells === 9) {
 store.setValue('gameStatus', 'draw');
 return;
 }
 
-// Switch player after each move
 const currentPlayer = store.getValue('currentPlayer');
 store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
 },
diff --git a/templates/client/src/game/app.ts.hbs b/templates/client/src/game/app.ts.hbs
@@ -4,9 +4,7 @@
 {{includeFile template="client/src/game/game.ts.hbs" output="client/src/game.{{ext}}"}}
 {{addImport "import {createGame} from './game';"}}
 
-const app = () => {
+export const app = () => {
 const appContainer = document.getElementById('app')!;
 appContainer.appendChild(createGame(store));
-};
-
-export {app};
+};
diff --git a/templates/client/src/game/game.ts.hbs b/templates/client/src/game/game.ts.hbs
@@ -10,9 +10,9 @@
 {{addImport "import {createGameStatus} from './gameStatus';"}}
 
 const WINNING_LINES = [
-[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
-[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
-[0, 4, 8], [2, 4, 6], // diagonals
+[0, 1, 2], [3, 4, 5], [6, 7, 8],
+[0, 3, 6], [1, 4, 7], [2, 5, 8],
+[0, 4, 8], [2, 4, 6],
 ];
 
 export const createGame = (store: GameStore): HTMLDivElement => {
@@ -22,7 +22,6 @@ if (gameStatus !== 'playing') return;
 
 const board = store.getTable('board');
 
-// Check for winner
 for (const line of WINNING_LINES) {
 const [a, b, c] = line;
 const cellA = board[a]?.value;
@@ -37,14 +36,12 @@ return;
 }
 }
 
-// Check for draw
 const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
 if (filledCells === 9) {
 store.setValue('gameStatus', 'draw');
 return;
 }
 
-// Switch player after each move
 const currentPlayer = store.getValue('currentPlayer');
 store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
 };
diff --git a/templates/client/src/todos/App.tsx.hbs b/templates/client/src/todos/App.tsx.hbs
@@ -12,7 +12,7 @@
 {{includeFile template="client/src/todos/TodoList.tsx.hbs" output="client/src/TodoList.{{ext}}"}}
 {{addImport "import {TodoList} from './TodoList';"}}
 
-const App = () => {
+export const App = () => {
 return (
 <StrictMode>
   <Provider>
@@ -23,6 +23,4 @@ return (
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};
diff --git a/templates/client/src/todos/Store.tsx.hbs b/templates/client/src/todos/Store.tsx.hbs
@@ -55,7 +55,6 @@ 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());
   });
diff --git a/templates/client/src/todos/app.ts.hbs b/templates/client/src/todos/app.ts.hbs
@@ -5,17 +5,14 @@
 {{includeFile template="client/src/todos/todoList.ts.hbs" output="client/src/todoList.{{ext}}"}}
 {{addImport "import {createTodoList} from './todoList';"}}
 
-const app = () => {
+export const app = () => {
 const appContainer = document.getElementById('app')!;
 
 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};
+};
diff --git a/test/__snapshots__/cli.test.js.snap b/test/__snapshots__/cli.test.js.snap
diff --git a/test/e2e.test.js b/test/e2e.test.js
