create-tinybase 0.1.3 → 0.1.5

package/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import{dirname as c,join as p}from"path";import{createCLI as l}from"tinycreate";import{fileURLToPath as u}from"url";const m=c(u(import.meta.url)),g={welcomeMessage:`\u{1F389} Welcome to TinyBase!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>e.length>0?!0:"Project name is required"},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!1},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!1}],createContext:e=>{const{projectName:r,language:s,framework:i,prettier:n,eslint:a}=e,t=s==="typescript",o=i==="react";return{projectName:r,language:s,framework:i,prettier:n,eslint:a,typescript:t,react:o,ext:t?o?"tsx":"ts":o?"jsx":"js"}},createDirectories:async e=>{const{mkdir:r}=await import("fs/promises"),{join:s}=await import("path");await r(s(e,"src"),{recursive:!0}),await r(s(e,"public"),{recursive:!0})},getFiles:e=>{const{typescript:r,react:s,ext:i,prettier:n,eslint:a}=e,t=[{template:"base/package.json.hbs",output:"package.json",prettier:!0},{template:"base/index.html.hbs",output:"index.html",prettier:!0},{template:"base/README.md.hbs",output:"README.md",prettier:!0},{template:"src/index.css.hbs",output:"src/index.css",prettier:!0},{template:"src/index.tsx.hbs",output:`src/index.${i}`,prettier:!0,transpile:!0}];return n&&t.push({template:"base/.prettierrc.hbs",output:".prettierrc",prettier:!0}),a&&t.push({template:"base/eslint.config.js.hbs",output:"eslint.config.js",prettier:!0}),s&&t.push({template:"src/App.tsx.hbs",output:`src/App.${i}`,prettier:!0,transpile:!0},{template:"base/vite.config.js.hbs",output:"vite.config.js",prettier:!0}),r&&t.push({template:"base/tsconfig.json.hbs",output:"tsconfig.json",prettier:!0},{template:"base/tsconfig.node.json.hbs",output:"tsconfig.node.json",prettier:!0}),t},templateRoot:p(m,"templates"),onSuccess:e=>{console.log("Next steps:"),console.log(`  cd ${e}`),console.log("  npm install"),console.log("  npm run dev")}};l(g).catch(e=>{console.error(e),process.exit(1)});
+import{existsSync as p}from"fs";import{dirname as m,join as o}from"path";import{createCLI as u}from"tinycreate";import{fileURLToPath as g}from"url";const d=m(g(import.meta.url)),y={welcomeMessage:`\u{1F389} Welcome to TinyBase!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=o(process.cwd(),e);return p(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!1},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!1}],createContext:e=>{const{projectName:t,language:s,framework:n,prettier:r,eslint:c}=e,a=s==="typescript",l=!a,i=n==="react";return{projectName:t,language:s,framework:n,prettier:r,eslint:c,typescript:a,javascript:l,react:i,ext:a?i?"tsx":"ts":i?"jsx":"js"}},createDirectories:async e=>{const{mkdir:t}=await import("fs/promises"),{join:s}=await import("path");await t(s(e,"src"),{recursive:!0}),await t(s(e,"public"),{recursive:!0})},getFiles:()=>[{template:"package.json.hbs",output:"package.json",prettier:!0},{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),r=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:r}},templateRoot:o(d,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",onSuccess:e=>{console.log("Next steps:"),console.log(`  cd ${e}`),console.log("  npm install"),console.log("  npm run dev")}};u(y).catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinybase",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "create-tinybase": "cli.js"
   },
   "dependencies": {
-    "tinycreate": "^0.1.0"
+    "tinycreate": "^0.1.1"
   },
   "engines": {
     "node": ">=18.0.0"

package/templates/index.html.hbs

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" />
+  {{includeFile template="public/favicon.svg" output="public/favicon.svg"}}
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <title>
+    TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}{{#if react}} + React{{/if}}
+  </title>
+</head>
+
+<body>
+  {{#if react}}
+    <div id="app"></div>
+  {{else}}
+    <div id="app">
+      <header>
+        <h1>
+          <img src="/favicon.svg" />
+          TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
+        </h1>
+      </header>
+      <p>
+        This is more or less the simplest TinyBase app you could imagine. It
+        contains a handful of key-values and tables which are mutated with the
+        buttons below. There's no fancy rendering - just the raw JSON of the
+        underlying store. See the full set of
+        <a href="https://tinybase.org/demos/">TinyBase demos</a> for more
+        interesting examples!
+      </p>
+      <div id="buttons">
+        <button id="countButton">Increment number</button>
+        <button id="randomButton">Random number</button>
+        <button id="addPetButton">Add a pet</button>
+      </div>
+      <details open>
+        <summary>Values</summary>
+        <pre id="valuesJson"></pre>
+      </details>
+      <details open>
+        <summary>Tables</summary>
+        <pre id="tablesJson"></pre>
+      </details>
+    </div>
+  {{/if}}
+  {{includeFile template="src/index.tsx.hbs" output="src/index.{{ext}}"}}
+  <script type="module" src="/src/index.{{ext}}"></script>
+</body>
+
+</html>

package/templates/{base/package.json.hbs → package.json.hbs}

@@ -3,6 +3,7 @@
 "version": "1.0.0",
 "scripts": {
 {{#list}}
+  {{includeFile template="index.html.hbs" output="index.html"}}
   "dev": "vite"
   {{#if typescript}}
     "build": "tsc && vite build"
@@ -26,8 +27,8 @@
     "typescript": "^5.9.3"
     "@types/node": "^25.0.3"
     {{#if react}}
-      "@types/react": "^18.3.18"
-      "@types/react-dom": "^18.3.5"
+      "@types/react": "^19.2.7"
+      "@types/react-dom": "^19.2.3"
     {{/if}}
   {{/if}}
   {{#if react}}
@@ -42,19 +43,31 @@
       "typescript-eslint": "^8.51.0"
     {{/if}}
     {{#if react}}
-      "eslint-plugin-react": "^7.37.3"
-      "eslint-plugin-react-hooks": "^5.1.0"
+      "eslint-plugin-react": "7.37.5"
+      "eslint-plugin-react-hooks": "^7.0.1"
     {{/if}}
   {{/if}}
 {{/list}}
 },
 "dependencies": {
 {{#list}}
-  "tinybase": "^6.6.0"
+  "tinybase": "^7.3.1"
   {{#if react}}
-    "react": "^18.3.1"
-    "react-dom": "^18.3.1"
+    "react": "^19.2.3"
+    "react-dom": "^19.2.3"
   {{/if}}
 {{/list}}
 }
-}
+}
+{{#if prettier}}
+  {{includeFile template=".prettierrc.hbs" output=".prettierrc"}}
+{{/if}}
+{{#if eslint}}
+  {{includeFile template="eslint.config.js.hbs" output="eslint.config.js"}}
+{{/if}}
+{{#if react}}
+  {{includeFile template="vite.config.js.hbs" output="vite.config.js"}}
+{{/if}}
+{{#if typescript}}
+  {{includeFile template="tsconfig.json.hbs" output="tsconfig.json"}}
+{{/if}}

package/templates/public/favicon.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg" style="width:680px;height:680px">
+  <path stroke="#fff" stroke-width="80" fill="none"
+    d="M340 617a84 241 90 11.01 0zM131 475a94 254 70 10428-124 114 286 70 01-428 124zm0-140a94 254 70 10428-124 114 286 70 01-428 124zm-12-127a94 254 70 00306 38 90 260 90 01-306-38zm221 3a74 241 90 11.01 0z" />
+  <path fill="#d81b60"
+    d="M131 475a94 254 70 10428-124 114 286 70 01-428 124zm0-140a94 254 70 10428-124 114 286 70 01-428 124z" />
+  <path
+    d="M249 619a94 240 90 00308-128 114 289 70 01-308 128zM119 208a94 254 70 00306 38 90 260 90 01-306-38zm221 3a74 241 90 11.01 0z" />
+</svg>

package/templates/src/App.tsx.hbs

@@ -1,24 +1,52 @@
-{{addImport "import {createStore} from 'tinybase';"}}
-{{addImport "import {Provider, useValue} from 'tinybase/ui-react';"}}
+import {StrictMode} from 'react';
+import {createStore} from 'tinybase';
+import {Provider, useCreateStore} from 'tinybase/ui-react';
+import {SortedTableInHtmlTable, ValuesInHtmlTable} from 'tinybase/ui-react-dom';
+import {Inspector} from 'tinybase/ui-react-inspector';
+import {Buttons} from './Buttons';
 
-const store = createStore().setValue('count', 0);
+export const App = () => {
+const store = useCreateStore(() => {
+// Create the TinyBase Store and initialize the Store's data
+return createStore()
+.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},
+});
+});
 
-export const App = () => (
+return (
+<StrictMode>
   <Provider store={store}>
-    <h1>TinyBase + React</h1>
-    <Counter />
-  </Provider>
-);
-
-const Counter = () => {
-  const count = useValue('count', store);
-
-  return (
+    <header>
+      <h1>
+        <img src="/favicon.svg" />
+        TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} + React
+      </h1>
+    </header>
+    <p>
+      This is more or less the simplest TinyBase app you could imagine. It
+      contains a handful of key-values and tables which are mutated with the
+      buttons below, and rendered with plain table components. See the full
+      set of <a href="https://tinybase.org/demos/">TinyBase demos</a> for
+      more interesting examples!
+    </p>
+    <Buttons />
     <div>
-      <p>Count: {count}</p>
-      <button onClick={() => store.setValue('count', (c: number) => c + 1)}>
-        Increment
-      </button>
+      <h2>Values</h2>
+      <ValuesInHtmlTable />
     </div>
-  );
-};
+    <div>
+      <h2>Pets Table</h2>
+      <SortedTableInHtmlTable tableId="pets" cellId="name" limit={5} sortOnClick={true} className="sortedTable" paginator={true} />
+    </div>
+    <Inspector />
+  </Provider>
+</StrictMode>
+);
+};

package/templates/src/Buttons.tsx.hbs

@@ -0,0 +1,26 @@
+import {useAddRowCallback, useSetValueCallback} from 'tinybase/ui-react';
+import type {ValueOrUndefined} from 'tinybase';
+
+// Convenience function for generating a random integer
+const getRandom = (max = 100) => Math.floor(Math.random() * max);
+
+export const Buttons = () => {
+// Attach events to the buttons to mutate the data in the TinyBase Store
+const handleCount = useSetValueCallback(
+'counter',
+() => (value: ValueOrUndefined) => ((value ?? 0) as number) + 1,
+);
+const handleRandom = useSetValueCallback('random', () => getRandom());
+const handleAddPet = useAddRowCallback('pets', (_, store) => ({
+name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
+species: store.getRowIds('species')[getRandom(5)],
+}));
+
+return (
+<div id="buttons">
+  <button onClick={handleCount}>Increment number</button>
+  <button onClick={handleRandom}>Random number</button>
+  <button onClick={handleAddPet}>Add a pet</button>
+</div>
+);
+};

package/templates/src/app.ts.hbs

@@ -0,0 +1,36 @@
+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);
+
+export const app = () => {
+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},
+});
+};

package/templates/src/index.css.hbs

@@ -1,110 +1,138 @@
 body {
-  color: #bbb;
-  background: #111;
-  font-family: 'Inter', sans-serif;
-  user-select: none;
+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;
+max-width: 40rem;
+margin: 2rem auto;
+display: grid;
+grid-template-columns: 1fr;
+column-gap: 2rem;
+align-items: start;
+row-gap: 1rem;
 }
 
 a {
-  color: #bbb;
+color: #bbb;
 }
 
 h1 {
-  font-weight: 600;
-  img {
-    margin-right: 1rem;
-    height: 2.5rem;
-    vertical-align: text-bottom;
-  }
+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;
+font-weight: 800;
+font-size: 1.3rem;
+margin: 1rem 0 0;
+}
+
+p {
+margin: 0 0 1rem;
+line-height: 1.5;
+}
+
+details {
+border: 1px solid #333;
+border-radius: 0.25rem;
+padding: 0.5rem;
+}
+
+details summary {
+cursor: pointer;
+font-weight: 800;
+margin: -0.5rem -0.5rem 0;
+padding: 0.5rem;
+}
+
+details[open] summary {
+margin-bottom: 0.5rem;
+border-bottom: 1px solid #333;
+}
+
+pre {
+margin: 0;
+white-space: pre-wrap;
+word-wrap: break-word;
 }
 
 #buttons {
-  border: solid #666;
-  border-width: 1px 0;
-  text-align: center;
+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;
+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;
+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;
+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;
-  }
+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;
+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;
+padding: 0.25rem 0.5rem 0.25rem 0;
+text-align: left;
 }
 thead th,
 thead td {
-  border: solid #999;
-  border-width: 1px 0;
+border: solid #999;
+border-width: 1px 0;
 }
 tbody th,
 tbody td {
-  border-bottom: 1px solid #333;
+border-bottom: 1px solid #333;
 }
 
 table.sortedTable thead th {
-  cursor: pointer;
+cursor: pointer;
 }
 
 @media (min-width: 40rem) {
-  #app {
-    grid-template-columns: 1fr 1fr;
-  }
-  header,
-  p,
-  #buttons {
-    grid-column: span 2;
-  }
+#app {
+grid-template-columns: 1fr 1fr;
+}
+header,
+p,
+#buttons {
+grid-column: span 2;
 }
+}

package/templates/src/index.tsx.hbs

@@ -1,48 +1,18 @@
-{{addImport "import './index.css';"}}
-
+{{includeFile template="src/index.css.hbs" output="src/index.css"}}
+import './index.css';
 {{#if react}}
-  {{addImport "import ReactDOM from 'react-dom/client';"}}
-  {{addImport "import {App} from './App';"}}
+  import ReactDOM from 'react-dom/client';
+  import {App} from './App';
+  {{includeFile template="src/App.tsx.hbs" output="src/App.{{ext}}"}}
+  {{includeFile template="src/Buttons.tsx.hbs" output="src/Buttons.{{ext}}"}}
 
   addEventListener('load', () =>
-    ReactDOM.createRoot(document.getElementById('app')!).render(<App />),
+  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()));
+  import {app} from './app';
+  {{includeFile template="src/app.ts.hbs" output="src/app.{{ext}}"}}
 
-    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}}
+  addEventListener('load', app);
+{{/if}}

package/templates/{base/vite.config.js.hbs → 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/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
-}
-}