create-tinybase 0.1.4 → 0.2.0

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>
+  );
+  };

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

@@ -0,0 +1,18 @@
+{{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
+import './todoList.css';
+import {useRowIds, STORE_ID} from './Store';
+
+{{includeFile template="client/src/todos/TodoItem.tsx.hbs" output="client/src/TodoItem.{{ext}}"}}
+import {TodoItem} from './TodoItem';
+
+export const TodoList = () => {
+const todoIds = useRowIds('todos', STORE_ID);
+
+return (
+<div id="todoList">
+  {todoIds.map((id) => (
+  <TodoItem key={id} rowId={id} />
+  ))}
+</div>
+);
+};

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

@@ -0,0 +1,23 @@
+{{includeFile template="client/src/todos/store.ts.hbs" output="client/src/store.ts"}}
+import {store} from './store';
+
+{{includeFile template="client/src/todos/todoInput.ts.hbs" output="client/src/todoInput.{{ext}}"}}
+import {createTodoInput} from './todoInput';
+
+{{includeFile template="client/src/todos/todoList.ts.hbs" output="client/src/todoList.{{ext}}"}}
+import {createTodoList} from './todoList';
+
+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};

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

@@ -0,0 +1,49 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+{{/if}}
+
+const STORE_ID = 'todos';
+
+{{#if schemas}}
+  const TODOS_SCHEMA = {
+  todos: {
+  text: {type: 'string'},
+  completed: {type: 'boolean'},
+  },
+  } as const;
+
+{{/if}}
+export const store = createMergeableStore(STORE_ID){{#if schemas}}
+  .setTablesSchema(TODOS_SCHEMA){{/if}}
+.setDefaultContent([
+{
+todos: {
+'1': {text: 'Learn TinyBase', completed: false},
+'2': {text: 'Build an app', completed: false},
+},
+},
+{},
+]);
+
+{{#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 TodosStore = typeof store;

package/templates/client/src/todos/todoInput.css.hbs

@@ -0,0 +1,9 @@
+#todoInput {
+display: flex;
+gap: 0.5rem;
+margin-bottom: 1.5rem;
+}
+
+#todoInput input {
+flex: 1;
+}

package/templates/client/src/todos/todoInput.ts.hbs

@@ -0,0 +1,38 @@
+{{includeFile template="client/src/todos/todoInput.css.hbs" output="client/src/todoInput.css"}}
+import './todoInput.css';
+import {type TodosStore} from './store';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+{{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
+import {createInput} from './input';
+
+export const createTodoInput = (store: TodosStore): HTMLDivElement => {
+const container = document.createElement('div');
+container.id = 'todoInput';
+
+const input = createInput('What needs to be done?');
+
+const addTodo = () => {
+const text = input.value.trim();
+if (text) {
+store.addRow('todos', {text, completed: false});
+input.value = '';
+input.focus();
+}
+};
+
+input.addEventListener('keypress', (e) => {
+if (e.key === 'Enter') {
+addTodo();
+}
+});
+
+const addButton = createButton('Add', addTodo, 'primary');
+
+container.appendChild(input);
+container.appendChild(addButton);
+
+return container;
+};

package/templates/client/src/todos/todoItem.css.hbs

@@ -0,0 +1,33 @@
+.todoItem {
+display: flex;
+align-items: center;
+gap: 0.75rem;
+padding: 0.75rem;
+border-bottom: 1px solid var(--border);
+}
+
+.todoItem:last-child {
+border-bottom: none;
+}
+
+.todoItem input[type="checkbox"] {
+width: 1.25rem;
+height: 1.25rem;
+cursor: pointer;
+flex-shrink: 0;
+}
+
+.todoItem label {
+flex: 1;
+cursor: pointer;
+user-select: none;
+}
+
+.todoItem.completed label {
+text-decoration: line-through;
+opacity: 0.6;
+}
+
+.todoItem button {
+flex-shrink: 0;
+}

package/templates/client/src/todos/todoItem.ts.hbs

@@ -0,0 +1,28 @@
+{{includeFile template="client/src/todos/todoItem.css.hbs" output="client/src/todoItem.css"}}
+import './todoItem.css';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+export const createTodoItem = (id: string, text: string, completed: boolean, onToggle: () => void, onDelete: () => void): HTMLDivElement => {
+const item = document.createElement('div');
+item.className = `todoItem${completed ? ' completed' : ''}`;
+
+const checkbox = document.createElement('input');
+checkbox.type = 'checkbox';
+checkbox.checked = completed;
+checkbox.id = `todo-${id}`;
+checkbox.addEventListener('change', onToggle);
+
+const label = document.createElement('label');
+label.textContent = text;
+label.htmlFor = `todo-${id}`;
+
+const deleteBtn = createButton('Delete', onDelete);
+
+item.appendChild(checkbox);
+item.appendChild(label);
+item.appendChild(deleteBtn);
+
+return item;
+};

package/templates/client/src/todos/todoList.css.hbs

@@ -0,0 +1,14 @@
+#todoList {
+border: 1px solid var(--border);
+border-radius: 0.375rem;
+overflow: hidden;
+background: var(--bg2);
+}
+
+#todoList:empty::before {
+content: 'No todos yet. Add one above!';
+display: block;
+padding: 2rem;
+text-align: center;
+color: var(--fg2);
+}