create-tinybase 0.1.4 → 0.2.0

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

@@ -0,0 +1,38 @@
+{{includeFile template="client/src/todos/todoList.css.hbs" output="client/src/todoList.css"}}
+import './todoList.css';
+import {type TodosStore} from './store';
+
+{{includeFile template="client/src/todos/todoItem.ts.hbs" output="client/src/todoItem.{{ext}}"}}
+import {createTodoItem} from './todoItem';
+
+export const createTodoList = (store: TodosStore): HTMLDivElement => {
+const list = document.createElement('div');
+list.id = 'todoList';
+
+const render = () => {
+const todos = store.getTable('todos');
+const todoIds = Object.keys(todos);
+
+list.innerHTML = '';
+todoIds.forEach((id) => {
+const todo = todos[id];
+const item = createTodoItem(
+id,
+todo.text,
+todo.completed,
+() => {
+store.setPartialRow('todos', id, {completed: !todo.completed});
+},
+() => {
+store.delRow('todos', id);
+}
+);
+list.appendChild(item);
+});
+};
+
+store.addTablesListener(render);
+render();
+
+return list;
+};

package/templates/{base → client}/vite.config.js.hbs

@@ -1,10 +1,12 @@
 {{addImport "import {defineConfig} from 'vite';"}}
-{{#if isReact}}
+{{#if react}}
   {{addImport "import react from '@vitejs/plugin-react';"}}
 {{/if}}
 
 export default defineConfig({
-{{#if isReact}}
-  plugins: [react()],
+{{#if react}}
+  plugins: [react({
+    jsxRuntime: 'automatic',
+  })],
 {{/if}}
 });

package/templates/package.json.hbs

@@ -0,0 +1,38 @@
+{{includeFile template="README.md.hbs" output="README.md"}}
+{
+"name": "{{projectName}}",
+"version": "1.0.0",
+"private": true,
+"scripts": {
+{{#list}}
+  {{#if server}}
+    "dev": "concurrently \"npm run dev -w client\" \"npm run dev -w server\""
+    "dev:client": "npm run dev -w client"
+    "dev:server": "npm run dev -w server"
+  {{else}}
+    "dev": "npm run dev -w client"
+  {{/if}}
+  "build": "npm run build -w client"
+  "preview": "npm run preview -w client"
+{{/list}}
+},
+{{#if server}}
+  "workspaces": ["client", "server"],
+{{else}}
+  "workspaces": ["client"],
+{{/if}}
+"devDependencies": {
+{{#list}}
+  {{#if server}}
+    "concurrently": "^9.1.2"
+  {{/if}}
+{{/list}}
+}
+}
+{{#if server}}
+  {{includeFile template="server/package.json.hbs" output="server/package.json"}}
+{{/if}}
+{{#if prettier}}
+  {{includeFile template="client/.prettierrc.hbs" output=".prettierrc"}}
+{{/if}}
+{{includeFile template="client/package.json.hbs" output="client/package.json"}}

package/templates/server/index-do.ts.hbs

@@ -0,0 +1,22 @@
+import {Id, IdAddedOrRemoved} from 'tinybase';
+import {
+getWsServerDurableObjectFetch,
+WsServerDurableObject,
+} from 'tinybase/synchronizers/synchronizer-ws-server-durable-object';
+
+export class TinyBaseDurableObject extends WsServerDurableObject {
+onPathId(pathId: Id, addedOrRemoved: IdAddedOrRemoved) {
+console.info((addedOrRemoved ? 'Added' : 'Removed') + ` path ${pathId}`);
+}
+
+onClientId(pathId: Id, clientId: Id, addedOrRemoved: IdAddedOrRemoved) {
+console.info(
+(addedOrRemoved ? 'Added' : 'Removed') +
+` client ${clientId} on path ${pathId}`,
+);
+}
+}
+
+export default {
+fetch: getWsServerDurableObjectFetch('TinyBaseDurableObjects'),
+};

package/templates/server/index-node.ts.hbs

@@ -0,0 +1,8 @@
+import {createWsServer} from 'tinybase/synchronizers/synchronizer-ws-server';
+import {WebSocketServer} from 'ws';
+
+const PORT = 8043;
+
+const wsServer = createWsServer(new WebSocketServer({port: PORT}));
+
+console.log(`WebSocket server running on ws://localhost:${PORT}`);

package/templates/server/package.json.hbs

@@ -0,0 +1,51 @@
+{
+"name": "{{projectName}}-server",
+"version": "1.0.0",
+"type": "module",
+"main": "index.ts",
+"scripts": {
+{{#list}}
+  {{#if (eq serverType "node")}}
+    {{includeFile template="server/index-node.ts.hbs" output="server/index.ts"}}
+    "dev": "tsx watch index.ts"
+    "start": "node index.js"
+  {{else}}
+    {{includeFile template="server/index-do.ts.hbs" output="server/index.ts"}}
+    {{includeFile template="server/wrangler.toml.hbs" output="server/wrangler.toml"}}
+    {{#if typescript}}
+      {{includeFile template="server/tsconfig.json.hbs" output="server/tsconfig.json"}}
+    {{/if}}
+    "deploy": "wrangler deploy"
+    "dev": "wrangler dev"
+    "start": "wrangler dev"
+  {{/if}}
+{{/list}}
+},
+"dependencies": {
+{{#list}}
+  "tinybase": "^7.3.1"
+  {{#if (eq serverType "node")}}
+    "ws": "^8.18.3"
+  {{/if}}
+{{/list}}
+},
+"devDependencies": {
+{{#list}}
+  {{#if (eq serverType "node")}}
+    "@types/ws": "^8.18.1"
+  {{else}}
+    "@cloudflare/workers-types": "^4.20250828.1"
+  {{/if}}
+  {{#if typescript}}
+    "typescript": "^5.9.3"
+    {{#if (eq serverType "node")}}
+      "tsx": "^4.19.3"
+    {{/if}}
+  {{/if}}
+  {{#if (eq serverType "durable-objects")}}
+    "wrangler": "^4.33.1"
+  {{/if}}
+{{/list}}
+}
+}
+}

package/templates/server/tsconfig.json.hbs

@@ -0,0 +1,13 @@
+{
+"compilerOptions": {
+"target": "ES2020",
+"module": "ES2020",
+"lib": ["ES2020"],
+"types": ["@cloudflare/workers-types"],
+"moduleResolution": "node",
+"esModuleInterop": true,
+"skipLibCheck": true,
+"strict": true
+},
+"include": ["index.ts"]
+}

package/templates/server/wrangler.toml.hbs

@@ -0,0 +1,12 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "{{projectName}}-server"
+main = "index.ts"
+compatibility_date = "2024-10-11"
+
+[[durable_objects.bindings]]
+name = "TinyBaseDurableObjects"
+class_name = "TinyBaseDurableObject"
+
+[[migrations]]
+tag = "v1"
+new_classes = ["TinyBaseDurableObject"]

package/templates/base/index.html.hbs

@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>TinyBase</title>
-</head>
-
-<body>
-  {{#if react}}
-    <div id="app"></div>
-  {{/if}}
-  <script type="module" src="/src/index.{{ext}}"></script>
-</body>
-
-</html>

package/templates/base/tsconfig.node.json.hbs

@@ -1,9 +0,0 @@
-{
-"compilerOptions": {
-"module": "ESNext",
-"moduleResolution": "bundler",
-"allowSyntheticDefaultImports": true,
-"strict": true,
-"skipLibCheck": true
-}
-}

package/templates/src/App.tsx.hbs

@@ -1,24 +0,0 @@
-{{addImport "import {createStore} from 'tinybase';"}}
-{{addImport "import {Provider, useValue} from 'tinybase/ui-react';"}}
-
-const store = createStore().setValue('count', 0);
-
-export const App = () => (
-  <Provider store={store}>
-    <h1>TinyBase + React</h1>
-    <Counter />
-  </Provider>
-);
-
-const Counter = () => {
-  const count = useValue('count', store);
-
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <button onClick={() => store.setValue('count', (c: number) => c + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-};

package/templates/src/index.css.hbs

@@ -1,110 +0,0 @@
-body {
-  color: #bbb;
-  background: #111;
-  font-family: 'Inter', sans-serif;
-  user-select: none;
-}
-
-#app {
-  max-width: 40rem;
-  margin: 2rem auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  column-gap: 2rem;
-  align-items: start;
-  row-gap: 1rem;
-}
-
-a {
-  color: #bbb;
-}
-
-h1 {
-  font-weight: 600;
-  img {
-    margin-right: 1rem;
-    height: 2.5rem;
-    vertical-align: text-bottom;
-  }
-}
-
-h2 {
-  text-align: center;
-  font-weight: 800;
-  font-size: 1.3rem;
-  margin: 1rem 0 0;
-}
-
-#buttons {
-  border: solid #666;
-  border-width: 1px 0;
-  text-align: center;
-}
-
-#buttons button {
-  border: 1px solid #666;
-  border-radius: 0.25rem;
-  padding: 0.5rem 1rem;
-  background: #222;
-  color: #fff;
-  font-family: inherit;
-  font-weight: 800;
-  font-size: 0.8rem;
-  width: 10rem;
-  margin: 1rem;
-}
-#buttons button:hover {
-  border-color: #d81b60;
-}
-
-table {
-  border-collapse: collapse;
-  font-size: inherit;
-  line-height: inherit;
-  margin-top: 0.5rem;
-  table-layout: fixed;
-  width: 100%;
-  margin-bottom: 2rem;
-  caption-side: bottom;
-}
-table caption {
-  text-align: left;
-  button {
-    border: 0;
-    margin-right: 0.25rem;
-  }
-}
-table caption button {
-  line-height: 0.7rem;
-  margin: 0 0.25rem 0 0;
-  vertical-align: middle;
-}
-th,
-td {
-  padding: 0.25rem 0.5rem 0.25rem 0;
-  text-align: left;
-}
-thead th,
-thead td {
-  border: solid #999;
-  border-width: 1px 0;
-}
-tbody th,
-tbody td {
-  border-bottom: 1px solid #333;
-}
-
-table.sortedTable thead th {
-  cursor: pointer;
-}
-
-@media (min-width: 40rem) {
-  #app {
-    grid-template-columns: 1fr 1fr;
-  }
-  header,
-  p,
-  #buttons {
-    grid-column: span 2;
-  }
-}

package/templates/src/index.tsx.hbs

@@ -1,48 +0,0 @@
-{{addImport "import './index.css';"}}
-
-{{#if react}}
-  {{addImport "import ReactDOM from 'react-dom/client';"}}
-  {{addImport "import {App} from './App';"}}
-
-  addEventListener('load', () =>
-    ReactDOM.createRoot(document.getElementById('app')!).render(<App />),
-  );
-
-{{else}}
-  {{addImport "import {createStore} from 'tinybase';"}}
-
-  const onClick = (id: string, onClick: () => void) =>
-    document.getElementById(id)!.addEventListener('click', onClick);
-
-  const updateJson = (id: string, content: unknown) =>
-    (document.getElementById(id)!.innerText = JSON.stringify(content, null, 2));
-
-  const getRandom = (max = 100) => Math.floor(Math.random() * max);
-
-  addEventListener('load', () => {
-    const store = createStore();
-
-    onClick('countButton', () => store.setValue('counter', (value) => value + 1));
-    onClick('randomButton', () => store.setValue('random', getRandom()));
-    onClick('addPetButton', () =>
-      store.addRow('pets', {
-        name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
-        species: store.getRowIds('species')[getRandom(5)],
-      }),
-    );
-
-    store.addValuesListener(() => updateJson('valuesJson', store.getValues()));
-    store.addTablesListener(() => updateJson('tablesJson', store.getTables()));
-
-    store
-      .setValue('counter', 0)
-      .setRow('pets', '0', {name: 'fido', species: 'dog'})
-      .setTable('species', {
-        dog: {price: 5},
-        cat: {price: 4},
-        fish: {price: 2},
-        worm: {price: 1},
-        parrot: {price: 3},
-      });
-  });
-{{/if}}