create-tinybase 0.1.5 → 0.2.1

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

@@ -0,0 +1,67 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoTablesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'game';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  currentPlayer: {type: 'string'},
+  gameStatus: {type: 'string'},
+  winner: {type: 'string', default: ''},
+  winningLine: {type: 'string', default: ''},
+  } as const;
+
+  type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+
+  const {useCreateStore, useProvideStore, useStore, useSetValuesCallback, useTableListener, useCell, useValue} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useStore, useSetValuesCallback, useTableListener, useCell, useValue};
+
+export const Store = () => {
+const store = useCreateStore(() =>
+createMergeableStore(STORE_ID){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setDefaultContent([
+{},
+{
+currentPlayer: 'X',
+gameStatus: 'playing',
+},
+]),
+);
+
+useProvideStore(STORE_ID, store);
+
+{{#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';"}}
+
+  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  const serverPathId = location.pathname;
+  const synchronizer = await createWsSynchronizer(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  );
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+
+  return synchronizer;
+  });
+{{/if}}
+
+return null;
+};

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

@@ -0,0 +1,12 @@
+{{includeFile template="client/src/game/store.ts.hbs" output="client/src/store.ts"}}
+import {store} from './store';
+
+{{includeFile template="client/src/game/game.ts.hbs" output="client/src/game.{{ext}}"}}
+import {createGame} from './game';
+
+const app = () => {
+const appContainer = document.getElementById('app')!;
+appContainer.appendChild(createGame(store));
+};
+
+export {app};

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

@@ -0,0 +1,13 @@
+#board {
+display: grid;
+grid-template-columns: repeat(3, 100px);
+grid-template-rows: repeat(3, 100px);
+gap: 1px;
+background: var(--border);
+border: 2px solid var(--border);
+border-radius: 0.5rem;
+overflow: hidden;
+margin: 0 auto 2rem;
+width: fit-content;
+padding: 1px;
+}

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

@@ -0,0 +1,39 @@
+{{includeFile template="client/src/game/board.css.hbs" output="client/src/board.css"}}
+import './board.css';
+import type {GameStore} from './store';
+
+{{includeFile template="client/src/game/square.ts.hbs" output="client/src/square.{{ext}}"}}
+import {createSquare} from './square';
+
+export const createBoard = (store: GameStore): HTMLDivElement => {
+const board = document.createElement('div');
+board.id = 'board';
+
+const render = () => {
+const gameStatus = store.getValue('gameStatus');
+const winningLine = store.getValue('winningLine');
+const currentPlayer = store.getValue('currentPlayer');
+const winningPositions = new Set(
+winningLine ? 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) {
+  store.setCell('board', i.toString(), 'value', currentPlayer);
+  }
+  },
+  disabled || !!cell,
+  winningPositions.has(i)
+  );
+  board.appendChild(square);
+  }
+  };
+
+  store.addValuesListener(render);
+  store.addTableListener('board', render);
+  render();
+
+  return board;
+  };

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

@@ -0,0 +1,74 @@
+import type {GameStore} from './store';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+{{includeFile template="client/src/game/board.ts.hbs" output="client/src/board.{{ext}}"}}
+import {createBoard} from './board';
+
+{{includeFile template="client/src/game/gameStatus.ts.hbs" output="client/src/gameStatus.{{ext}}"}}
+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
+];
+
+export const createGame = (store: GameStore): HTMLDivElement => {
+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;
+
+if (cellA && cellA === cellB && cellA === cellC) {
+store.setValue('gameStatus', 'won');
+store.setValue('winner', cellA);
+store.setValue('winningLine', line.join(','));
+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');
+};
+
+store.addTableListener('board', checkGameState, true);
+
+const resetGame = () => {
+store.delTable('board');
+store.setValues({
+currentPlayer: 'X',
+gameStatus: 'playing',
+});
+};
+
+const gameContainer = document.createElement('div');
+
+gameContainer.appendChild(createGameStatus(store));
+gameContainer.appendChild(createBoard(store));
+
+const buttonContainer = document.createElement('div');
+buttonContainer.style.textAlign = 'center';
+buttonContainer.style.marginTop = '2rem';
+buttonContainer.appendChild(createButton('New Game', resetGame, 'primary'));
+gameContainer.appendChild(buttonContainer);
+
+return gameContainer;
+};

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

@@ -0,0 +1,21 @@
+#gameStatus {
+text-align: center;
+font-size: 1.5rem;
+font-weight: 800;
+margin: 2rem 0 1rem;
+color: var(--accent);
+}
+
+#gameStatus .winner {
+color: var(--accent);
+animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+0%, 100% {
+opacity: 1;
+}
+50% {
+opacity: 0.7;
+}
+}

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

@@ -0,0 +1,27 @@
+{{includeFile template="client/src/game/gameStatus.css.hbs" output="client/src/gameStatus.css"}}
+import './gameStatus.css';
+import type {GameStore} from './store';
+
+export const createGameStatus = (store: GameStore): HTMLDivElement => {
+const status = document.createElement('div');
+status.id = 'gameStatus';
+
+const render = () => {
+const gameStatus = store.getValue('gameStatus');
+const currentPlayer = store.getValue('currentPlayer');
+const winner = store.getValue('winner');
+
+if (gameStatus === 'playing') {
+status.innerHTML = `Player <span class="player">${currentPlayer}</span>'s turn`;
+} else if (gameStatus === 'won') {
+status.innerHTML = `Player <span class="winner">${winner}</span> wins!`;
+} else if (gameStatus === 'draw') {
+status.textContent = "It's a draw!";
+}
+};
+
+store.addValuesListener(render);
+render();
+
+return status;
+};

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

@@ -0,0 +1,38 @@
+.square {
+width: 100px;
+height: 100px;
+background: var(--bg2);
+border: none;
+font-size: 2.5rem;
+font-weight: 800;
+color: var(--fg);
+cursor: pointer;
+transition: all 0.15s ease;
+display: flex;
+align-items: center;
+justify-content: center;
+padding: 0;
+margin: 0;
+}
+
+.square:hover:not(.square.disabled) {
+background: var(--bg);
+outline: 2px solid var(--accent);
+outline-offset: -2px;
+z-index: 1;
+position: relative;
+}
+
+.square:disabled {
+cursor: not-allowed;
+}
+
+.square.disabled {
+cursor: not-allowed;
+opacity: 0.7;
+}
+
+.square.winning {
+background: var(--accent);
+color: var(--bg);
+}

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

@@ -0,0 +1,11 @@
+{{includeFile template="client/src/game/square.css.hbs" output="client/src/square.css"}}
+import './square.css';
+
+export const createSquare = (position: number, 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.disabled = disabled;
+square.addEventListener('click', onClick);
+return square;
+};

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

@@ -0,0 +1,47 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+{{/if}}
+
+const STORE_ID = 'game';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  currentPlayer: {type: 'string'},
+  gameStatus: {type: 'string'},
+  winner: {type: 'string', default: ''},
+  winningLine: {type: 'string', default: ''},
+  } as const;
+
+{{/if}}
+export const store = createMergeableStore(STORE_ID){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setDefaultContent([
+{},
+{
+currentPlayer: 'X',
+gameStatus: 'playing',
+},
+]);
+
+{{#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(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  ).then(async (synchronizer) => {
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+  });
+{{/if}}
+
+export type GameStore = typeof store;

package/templates/client/src/index.tsx.hbs

@@ -0,0 +1,24 @@
+{{#if sync}}
+  import {getUniqueId} from 'tinybase';
+
+  if (location.pathname === '/') {
+  location.assign('/' + getUniqueId());
+  }
+{{/if}}
+{{#if react}}
+  import ReactDOM from 'react-dom/client';
+  import {App} from './App';
+  {{includeFile template="client/src/{{appType}}/App.tsx.hbs" output="client/src/App.{{ext}}"}}
+
+  addEventListener('load', () => {
+  ReactDOM.createRoot(document.getElementById('app')!).render(
+  <App />);
+  });
+{{else}}
+  import {app} from './app';
+  {{includeFile template="client/src/{{appType}}/app.ts.hbs" output="client/src/app.{{ext}}"}}
+
+  addEventListener('load', () => {
+  app();
+  });
+{{/if}}

package/templates/client/src/shared/Button.tsx.hbs

@@ -0,0 +1,16 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+import './button.css';
+import {ReactNode} from 'react';
+
+interface ButtonProps {
+children: ReactNode;
+onClick?: () => void;
+variant?: 'default' | 'primary';
+type?: 'button' | 'submit';
+}
+
+export const Button = ({children, onClick, variant = 'default', type = 'button'}: ButtonProps) => (
+<button onClick={onClick} type={type} className={variant==='primary' ? 'primary' : undefined}>
+  {children}
+</button>
+);

package/templates/client/src/shared/Input.tsx.hbs

@@ -0,0 +1,16 @@
+{{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
+import './input.css';
+
+interface InputProps {
+value: string;
+onChange: (value: string) => void;
+placeholder?: string;
+autoFocus?: boolean;
+}
+
+export const Input = ({value, onChange, placeholder = '', autoFocus = false}: InputProps) => (
+<input type="text" value={value} onChange={(e)=> onChange(e.target.value)}
+placeholder={placeholder}
+autoFocus={autoFocus}
+/>
+);

package/templates/client/src/shared/button.css.hbs

@@ -0,0 +1,25 @@
+button {
+padding: 0.5rem 1rem;
+border: 1px solid #666;
+border-radius: 0.25rem;
+background: #222;
+color: #fff;
+font-family: inherit;
+font-weight: 800;
+cursor: pointer;
+margin: 0.5rem;
+}
+
+button:hover {
+border-color: #d81b60;
+}
+
+button.primary {
+background: #d81b60;
+border: none;
+padding: 0.75rem 1.5rem;
+}
+
+button.primary:hover {
+background: #c2185b;
+}

package/templates/client/src/shared/button.ts.hbs

@@ -0,0 +1,16 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+import './button.css';
+
+export const createButton = (
+text: string,
+onClick: () => void,
+variant: 'default' | 'primary' = 'default',
+): HTMLButtonElement => {
+const button = document.createElement('button');
+button.textContent = text;
+if (variant === 'primary') {
+button.className = 'primary';
+}
+button.addEventListener('click', onClick);
+return button;
+};

package/templates/client/src/shared/config.ts.hbs

@@ -0,0 +1,9 @@
+{{#if server}}
+  {{#if (eq serverType "node")}}
+    export const SERVER = 'ws://localhost:8043';
+  {{else}}
+    export const SERVER = 'ws://localhost:8787';
+  {{/if}}
+{{else}}
+  export const SERVER = 'wss://vite.tinybase.org';
+{{/if}}

package/templates/client/src/shared/input.css.hbs

@@ -0,0 +1,22 @@
+input[type="text"] {
+padding: 0.5rem 0.75rem;
+background: var(--bg);
+border: 1px solid var(--border);
+border-radius: 0.375rem;
+color: var(--fg);
+font-family: inherit;
+font-size: 1rem;
+line-height: 1.5;
+width: 100%;
+box-sizing: border-box;
+align-self: center;
+}
+
+input[type="text"]:focus {
+outline: none;
+border-color: var(--accent);
+}
+
+input[type="text"]::placeholder {
+color: var(--fg2);
+}

package/templates/client/src/shared/input.ts.hbs

@@ -0,0 +1,17 @@
+{{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
+import './input.css';
+
+export const createInput = (
+placeholder: string = '',
+value: string = '',
+onInput?: (value: string) => void,
+): HTMLInputElement => {
+const input = document.createElement('input');
+input.type = 'text';
+input.placeholder = placeholder;
+input.value = value;
+if (onInput) {
+input.addEventListener('input', () => onInput(input.value));
+}
+return input;
+};

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

@@ -0,0 +1,32 @@
+import {StrictMode} from 'react';
+
+{{#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';
+
+{{includeFile template="client/src/todos/Store.tsx.hbs" output="client/src/Store.{{ext}}"}}
+import {Store} from './Store';
+
+{{includeFile template="client/src/todos/TodoInput.tsx.hbs" output="client/src/TodoInput.{{ext}}"}}
+import {TodoInput} from './TodoInput';
+
+{{includeFile template="client/src/todos/TodoList.tsx.hbs" output="client/src/TodoList.{{ext}}"}}
+import {TodoList} from './TodoList';
+
+const App = () => {
+return (
+<StrictMode>
+  <Provider>
+    <Store />
+    <TodoInput />
+    <TodoList />
+    <Inspector />
+  </Provider>
+</StrictMode>
+);
+};
+
+export {App};

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

@@ -0,0 +1,70 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoValuesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useAddRowCallback, useDelRowCallback, useRow, useRowIds, useSetPartialRowCallback} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'todos';
+
+{{#if schemas}}
+  const TODOS_SCHEMA = {
+  todos: {
+  text: {type: 'string'},
+  completed: {type: 'boolean'},
+  },
+  } as const;
+
+  type Schemas = [typeof TODOS_SCHEMA, NoValuesSchema];
+
+  const {useCreateStore, useProvideStore, useAddRowCallback, useDelRowCallback, useRow, useRowIds, useSetPartialRowCallback} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useAddRowCallback, useDelRowCallback, useRow, useRowIds, useSetPartialRowCallback};
+
+export const Store = () => {
+const store = useCreateStore(() =>
+createMergeableStore(STORE_ID){{#if schemas}}
+  .setTablesSchema(TODOS_SCHEMA){{/if}}
+.setDefaultContent([
+{
+todos: {
+'1': {text: 'Learn TinyBase', completed: false},
+'2': {text: 'Build an app', completed: false},
+},
+},
+{},
+]),
+);
+
+useProvideStore(STORE_ID, store);
+
+{{#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';"}}
+
+  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  const serverPathId = location.pathname;
+  const synchronizer = await createWsSynchronizer(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  );
+  await synchronizer.startSync();
+
+  // If the websocket reconnects in the future, do another explicit sync.
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+
+  return synchronizer;
+  });
+{{/if}}
+
+return null;
+};

package/templates/client/src/todos/TodoInput.tsx.hbs

@@ -0,0 +1,30 @@
+{{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
+import './todoInput.css';
+import {useState} from 'react';
+import {useAddRowCallback, STORE_ID} from './Store';
+
+{{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
+import {Button} from './Button';
+
+{{includeFile template="client/src/shared/Input.tsx.hbs" output="client/src/Input.{{ext}}"}}
+import {Input} from './Input';
+
+export const TodoInput = () => {
+const [text, setText] = useState('');
+const addRow = useAddRowCallback('todos', () => ({text, completed: false}), [text], STORE_ID);
+
+const handleSubmit = (e: React.FormEvent) => {
+e.preventDefault();
+if (text.trim()) {
+addRow();
+setText('');
+}
+};
+
+return (
+<form id="todoInput" onSubmit={handleSubmit}>
+  <Input value={text} onChange={setText} placeholder="What needs to be done?" autoFocus />
+  <Button type="submit" variant="primary">Add</Button>
+</form>
+);
+};

package/templates/client/src/todos/TodoItem.tsx.hbs

@@ -0,0 +1,20 @@
+{{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
+import './todoItem.css';
+import {useDelRowCallback, useRow, useSetPartialRowCallback, STORE_ID} from './Store';
+
+{{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
+import {Button} from './Button';
+
+export const TodoItem = ({rowId}: {rowId: string}) => {
+const todo = useRow('todos', rowId, STORE_ID);
+const setPartialRow = useSetPartialRowCallback('todos', rowId, (e: React.ChangeEvent<HTMLInputElement>) => ({completed: e.target.checked}), [], STORE_ID);
+  const delRow = useDelRowCallback('todos', rowId, STORE_ID);
+
+  return (
+  <div className={`todoItem${todo.completed ? ' completed' : '' }`}>
+    <input type="checkbox" checked={todo.completed} onChange={setPartialRow} id={`todo-${rowId}`} />
+    <label htmlFor={`todo-${rowId}`}>{todo.text}</label>
+    <Button onClick={delRow}>Delete</Button>
+  </div>
+  );
+  };