create-tinybase 0.2.5 → 0.3.1

package/templates/client/src/drawing/settingsStore.ts.hbs

@@ -1,11 +1,9 @@
 {{#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';
-
 {{#if schemas}}
   const VALUES_SCHEMA = {
   brushColor: {type: 'string'},
@@ -14,8 +12,65 @@ const STORE_ID = 'settings';
 
 {{/if}}
 export const settingsStore = createStore(){{#if schemas}}
-  .setValuesSchema(VALUES_SCHEMA){{/if}}
-.setValue('brushColor', '#d81b60')
-.setValue('brushSize', 5);
+  .setValuesSchema(VALUES_SCHEMA){{/if}};
+
+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([{}, {brushColor: '#d81b60', brushSize: 5}]).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([{}, {brushColor: '#d81b60', brushSize: 5}]).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([{}, {brushColor: '#d81b60', brushSize: 5}]).then(() => {
+      settingsPersister.startAutoSave();
+      resolveSettingsReady();
+      });
+      });
+      });
+    {{/if}}
+  {{else}}
+    settingsStore.setValue('brushColor', '#d81b60').setValue('brushSize', 5);
+    resolveSettingsReady();
+  {{/if}}
 
-export type SettingsStore = typeof settingsStore;
+  export type SettingsStore = typeof settingsStore;

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

@@ -1,28 +1,32 @@
-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/game/Store.tsx.hbs" output="client/src/Store.{{ext}}"}}
-import {Store} from './Store';
+{{addImport "import {Store} from './Store';"}}
 
 {{includeFile template="client/src/game/Game.tsx.hbs" output="client/src/Game.{{ext}}"}}
-import {Game} from './Game';
+{{addImport "import {Game} from './Game';"}}
+
+export const App = () => {
+const [loading, setLoading] = useState(true);
 
-const App = () => {
 return (
 <StrictMode>
   <Provider>
-    <Store />
-    <Game />
-    <Inspector />
+    <Store onReady={()=> setLoading(false)} />
+      {loading ? (
+      <Loading />
+      ) : (
+      <>
+        <Game />
+        <Inspector />
+      </>
+      )}
   </Provider>
 </StrictMode>
 );
-};
-
-export {App};
+};

package/templates/client/src/game/Board.tsx.hbs

@@ -1,18 +1,18 @@
 {{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
-import './board.css';
-import {useMemo} from 'react';
-import {useValue, STORE_ID} from './Store';
+{{addImport "import './board.css';"}}
+{{addImport "import {useMemo} from 'react';"}}
+{{addImport "import {useValue, STORE_ID} from './Store';"}}
 
 {{includeFile template="client/src/game/Square.tsx.hbs" output="client/src/Square.{{ext}}"}}
-import {Square} from './Square';
+{{addImport "import {Square} from './Square';"}}
 
 export const Board = () => {
 const gameStatus = useValue('gameStatus', STORE_ID);
 const winningLine = useValue('winningLine', STORE_ID);
 
 const winningPositions = useMemo(() => {
-if (!winningLine) return new Set();
-return new Set(winningLine.split(',').map(Number));
+if (!winningLine || typeof winningLine !== 'string') return new Set();
+return new Set(winningLine.split(','));
 }, [winningLine]);
 
 const disabled = gameStatus !== 'playing';
@@ -20,8 +20,8 @@ const disabled = gameStatus !== 'playing';
 return (
 <div id="board">
   {Array.from({length: 9}, (_, i) => (
-  <Square key={i} position={i} disabled={disabled} winning={winningPositions.has(i)} />
+  <Square key={i} position={i.toString()} disabled={disabled} winning={winningPositions.has(i.toString())} />
   ))}
 </div>
 );
-};
+};

package/templates/client/src/game/Game.tsx.hbs

@@ -1,37 +1,32 @@
-import {useStore, useSetValuesCallback, useTableListener, STORE_ID} from './Store';
+{{addImport "import {useSetValuesCallback, useTableListener, 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/game/Board.tsx.hbs" output="client/src/Board.{{ext}}"}}
-import {Board} from './Board';
+{{addImport "import {Board} from './Board';"}}
 
 {{includeFile template="client/src/game/GameStatus.tsx.hbs" output="client/src/GameStatus.{{ext}}"}}
-import {GameStatus} from './GameStatus';
+{{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 = () => {
-const store = useStore(STORE_ID);
-
 useTableListener(
 'board',
-() => {
+(store) => {
 const gameStatus = store.getValue('gameStatus');
 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;
-const cellB = board[b]?.value;
-const cellC = board[c]?.value;
+const cellA = store.getCell('board', a, 'value');
+const cellB = store.getCell('board', b, 'value');
+const cellC = store.getCell('board', c, 'value');
 
 if (cellA && cellA === cellB && cellA === cellC) {
 store.setValue('gameStatus', 'won');
@@ -41,14 +36,11 @@ return;
 }
 }
 
-// Check for draw
-const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
-if (filledCells === 9) {
+if (store.getRowCount('board') === 9) {
 store.setValue('gameStatus', 'draw');
 return;
 }
 
-// Switch player after each move
 const currentPlayer = store.getValue('currentPlayer');
 store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
 },
@@ -57,13 +49,14 @@ true,
 STORE_ID,);
 
 const resetGame = useSetValuesCallback(
-() => {
+(_, store) => {
 store.delTable('board');
 return {currentPlayer: 'X',
 gameStatus: 'playing',
 };
 },
 [],
+STORE_ID,
 );
 
 return (

package/templates/client/src/game/GameStatus.tsx.hbs

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/game/gameStatus.css.hbs" output="client/src/gameStatus.css"}}
-import './gameStatus.css';
-import {useValue, STORE_ID} from './Store';
+{{addImport "import './gameStatus.css';"}}
+{{addImport "import {useValue, STORE_ID} from './Store';"}}
 
 export const GameStatus = () => {
 const gameStatus = useValue('gameStatus', STORE_ID);
@@ -10,12 +10,12 @@ const winner = useValue('winner', STORE_ID);
 return (
 <div id="gameStatus">
   {gameStatus === 'playing' && (
-  <>Player <span className="player">{currentPlayer}</span>'s turn</>
+  <>Player <span className="player">{currentPlayer}</span>&apos;s turn</>
   )}
   {gameStatus === 'won' && (
   <>Player <span className="winner">{winner}</span> wins!</>
   )}
-  {gameStatus === 'draw' && <>It's a draw!</>}
+  {gameStatus === 'draw' && <>It&apos;s a draw!</>}
 </div>
 );
-};
+};

package/templates/client/src/game/Square.tsx.hbs

@@ -1,23 +1,18 @@
 {{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
-import './square.css';
-import {useCell, useStore, useValue, STORE_ID} from './Store';
+{{addImport "import './square.css';"}}
+{{addImport "import {useCell, useSetCellCallback, useValue, STORE_ID} from './Store';"}}
 
-export const Square = ({position, disabled, winning}: {position: number; disabled: boolean; winning: boolean}) => {
-const store = useStore(STORE_ID);
-const value = useCell('board', position.toString(), 'value', STORE_ID);
+export const Square = ({position, disabled, winning}: {position: string; disabled: boolean; winning: boolean}) => {
+const value = useCell('board', position, 'value', STORE_ID);
 const currentPlayer = useValue('currentPlayer', STORE_ID);
 
 const isDisabled = disabled || !!value;
 
-const handleClick = () => {
-if (!isDisabled) {
-store.setCell('board', position.toString(), 'value', currentPlayer);
-}
-};
+const handleClick = useSetCellCallback('board', position, 'value', () => currentPlayer || 'X', [currentPlayer], STORE_ID);
 
 return (
 <button className={`square${isDisabled ? ' disabled' : '' }${winning ? ' winning' : '' }`} onClick={handleClick} disabled={isDisabled}>
   {value || ''}
 </button>
 );
-};
+};

package/templates/client/src/game/Store.tsx.hbs

@@ -1,15 +1,20 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoTablesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} from 'tinybase/ui-react';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useStore, useSetValuesCallback, useSetCellCallback, useTableListener, useCell, useValue} from 'tinybase/ui-react';"}}
 {{/if}}
 
 export const STORE_ID = 'game';
 
 {{#if schemas}}
+  const TABLES_SCHEMA = {
+  board: {
+  value: {type: 'string', default: ''},
+  },
+  } as const;
+
   const VALUES_SCHEMA = {
   currentPlayer: {type: 'string'},
   gameStatus: {type: 'string'},
@@ -17,16 +22,17 @@ export const STORE_ID = 'game';
   winningLine: {type: 'string', default: ''},
   } as const;
 
-  type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+  type Schemas = [typeof TABLES_SCHEMA, typeof VALUES_SCHEMA];
 
-  const {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCell, useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useSetCellCallback, useSetValuesCallback, useStore, useTableListener, useValue} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useStore, useSetValuesCallback, useTableListener, useCell, useValue};
+export {useStore, useSetValuesCallback, useSetCellCallback, useTableListener, useCell, useValue};
 
-export const Store = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export const Store = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
+  .setTablesSchema(TABLES_SCHEMA)
   .setValuesSchema(VALUES_SCHEMA){{/if}}
 .setDefaultContent([
 {},
@@ -39,15 +45,92 @@ gameStatus: 'playing',
 
 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, 'game');
+    },
+    [],
+    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,
@@ -56,12 +139,19 @@ useProvideStore(STORE_ID, store);
   await synchronizer.startSync();
 
   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/game/app.ts.hbs

@@ -1,12 +1,23 @@
 {{includeFile template="client/src/game/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/game/game.ts.hbs" output="client/src/game.{{ext}}"}}
-import {createGame} from './game';
+{{addImport "import {createGame} from './game';"}}
 
-const app = () => {
+export const app = async () => {
 const appContainer = document.getElementById('app')!;
-appContainer.appendChild(createGame(store));
-};
 
-export {app};
+// Show loading spinner
+const loadingDiv = showLoading(appContainer);
+
+// Wait for store to be ready
+await storeReady;
+
+// Remove loading spinner
+hideLoading(loadingDiv);
+
+appContainer.appendChild(createGame(store));
+};

package/templates/client/src/game/board.ts.hbs

@@ -1,9 +1,9 @@
 {{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
-import './board.css';
-import type {GameStore} from './store';
+{{addImport "import './board.css';"}}
+{{addImport "import type {GameStore} from './store';"}}
 
 {{includeFile template="client/src/game/square.ts.hbs" output="client/src/square.{{ext}}"}}
-import {createSquare} from './square';
+{{addImport "import {createSquare} from './square';"}}
 
 export const createBoard = (store: GameStore): HTMLDivElement => {
 const board = document.createElement('div');
@@ -14,13 +14,13 @@ const gameStatus = store.getValue('gameStatus');
 const winningLine = store.getValue('winningLine');
 const currentPlayer = store.getValue('currentPlayer');
 const winningPositions = new Set(
-winningLine ? winningLine.split(',').map(Number) : []
+winningLine && typeof winningLine === 'string' ? winningLine.split(',').map(Number) : []
 );
 const disabled = gameStatus !== 'playing';
 
 board.innerHTML = '';
-for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'value' ); const square=createSquare( i, cell, ()=> {
-  if (gameStatus === 'playing' && !cell) {
+for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'value' ); const square=createSquare(cell as string, ()=> {
+  if (gameStatus === 'playing' && !cell && currentPlayer) {
   store.setCell('board', i.toString(), 'value', currentPlayer);
   }
   },
@@ -36,4 +36,4 @@ for (let i = 0; i < 9; i++) { const cell=store.getCell('board', i.toString(), 'v
   render();
 
   return board;
-  };
+  };

package/templates/client/src/game/game.ts.hbs

@@ -1,18 +1,18 @@
-import type {GameStore} from './store';
+{{addImport "import type {GameStore} 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/game/board.ts.hbs" output="client/src/board.{{ext}}"}}
-import {createBoard} from './board';
+{{addImport "import {createBoard} from './board';"}}
 
 {{includeFile template="client/src/game/gameStatus.ts.hbs" output="client/src/gameStatus.{{ext}}"}}
-import {createGameStatus} from './gameStatus';
+{{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 => {
@@ -20,14 +20,11 @@ const checkGameState = () => {
 const gameStatus = store.getValue('gameStatus');
 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;
-const cellB = board[b]?.value;
-const cellC = board[c]?.value;
+const cellA = store.getCell('board', a, 'value');
+const cellB = store.getCell('board', b, 'value');
+const cellC = store.getCell('board', c, 'value');
 
 if (cellA && cellA === cellB && cellA === cellC) {
 store.setValue('gameStatus', 'won');
@@ -37,14 +34,11 @@ return;
 }
 }
 
-// Check for draw
-const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
-if (filledCells === 9) {
+if (store.getRowCount('board') === 9) {
 store.setValue('gameStatus', 'draw');
 return;
 }
 
-// Switch player after each move
 const currentPlayer = store.getValue('currentPlayer');
 store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
 };
@@ -71,4 +65,4 @@ buttonContainer.appendChild(createButton('New Game', resetGame, 'primary'));
 gameContainer.appendChild(buttonContainer);
 
 return gameContainer;
-};
+};

package/templates/client/src/game/gameStatus.ts.hbs

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/game/gameStatus.css.hbs" output="client/src/gameStatus.css"}}
-import './gameStatus.css';
-import type {GameStore} from './store';
+{{addImport "import './gameStatus.css';"}}
+{{addImport "import type {GameStore} from './store';"}}
 
 export const createGameStatus = (store: GameStore): HTMLDivElement => {
 const status = document.createElement('div');
@@ -24,4 +24,4 @@ store.addValuesListener(render);
 render();
 
 return status;
-};
+};

package/templates/client/src/game/square.ts.hbs

@@ -1,11 +1,11 @@
 {{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
-import './square.css';
+{{addImport "import './square.css';"}}
 
-export const createSquare = (position: number, value: string | undefined, onClick: () => void, disabled: boolean, winning: boolean): HTMLButtonElement => {
+export const createSquare = (value: string | undefined, onClick: () => void, disabled: boolean, winning: boolean): HTMLButtonElement => {
 const square = document.createElement('button');
 square.className = `square${disabled ? ' disabled' : ''}${winning ? ' winning' : ''}`;
-square.textContent = value || '';
+square.textContent = value ?? '';
 square.disabled = disabled;
 square.addEventListener('click', onClick);
 return square;
-};
+};