Skip to content

Commit 9a26b98

Browse files
jamesgpearcejamesgpearce
committed
Restore tables
1 parent 81aad84 commit 9a26b98

6 files changed

Lines changed: 229 additions & 90 deletions

File tree

‎cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"jamesgpearce",
55
"PIDS",
66
"tinybase",
7+
"tinycreate",
78
"tinyplex"
89
]
910
}

‎src/cli.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#!/usr/bin/env node
22
import {existsSync} from 'fs';
33
import {dirname, join} from 'path';
4-
import {createCLI} from 'tinycreate';
4+
import {createCLI, type FileConfig, type TemplateContext} from 'tinycreate';
55
import {fileURLToPath} from 'url';
66

77
const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -160,7 +160,7 @@ const config = {
160160
return files;
161161
},
162162

163-
processIncludedFile: (file, context) => {
163+
processIncludedFile: (file: FileConfig, context: TemplateContext) => {
164164
const {javascript} = context;
165165

166166
// Apply smart defaults based on file extension

‎templates/src/App.tsx.hbs‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,49 @@
1-
{{addImport "import {createStore} from 'tinybase';"}}
2-
{{addImport "import {Provider, useValue} from 'tinybase/ui-react';"}}
1+
{{addImport "import {StrictMode} from 'react';"}}{{addImport "import {createStore} from 'tinybase';"}}{{addImport "import {Provider, useCreateStore} from 'tinybase/ui-react';"}}{{addImport "import {SortedTableInHtmlTable, ValuesInHtmlTable} from 'tinybase/ui-react-dom';"}}{{addImport "import {Buttons} from './Buttons';"}}{{#if typescript}}
2+
{{addImport "import {Inspector} from 'tinybase/ui-react-inspector';"}}{{/if}}
33

4-
const store = createStore().setValue('counter', 0);
5-
6-
export const App = () => (
7-
<Provider store={store}>
8-
<header>
9-
<h1>
10-
<img src="/favicon.svg" />
11-
TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} + React
12-
</h1>
13-
</header>
14-
<p>
15-
This is more or less the simplest TinyBase app you could imagine. It
16-
contains a handful of key-values and tables which are mutated with the
17-
buttons below. See the full set of{' '}
18-
<a href="https://tinybase.org/demos/">TinyBase demos</a> for more
19-
interesting examples!
20-
</p>
21-
<div id="buttons">
22-
<Counter />
23-
</div>
24-
</Provider>
25-
);
26-
27-
const Counter = () => {
28-
const counter = useValue('counter', store);
4+
export const App = () => {
5+
const store = useCreateStore(() => {
6+
// Create the TinyBase Store and initialize the Store's data
7+
return createStore()
8+
.setValue('counter', 0)
9+
.setRow('pets', '0', {name: 'fido', species: 'dog'})
10+
.setTable('species', {
11+
dog: {price: 5},
12+
cat: {price: 4},
13+
fish: {price: 2},
14+
worm: {price: 1},
15+
parrot: {price: 3},
16+
});
17+
});
2918

3019
return (
31-
<button onClick={()=> store.setValue('counter', (c: number) => c + 1)}>
32-
Increment counter: {counter}
33-
</button>
20+
<StrictMode>
21+
<Provider store={store}>
22+
<header>
23+
<h1>
24+
<img src="/favicon.svg" />
25+
TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} + React
26+
</h1>
27+
</header>
28+
<p>
29+
This is more or less the simplest TinyBase app you could imagine. It
30+
contains a handful of key-values and tables which are mutated with the
31+
buttons below, and rendered with plain table components. See the full
32+
set of <a href="https://tinybase.org/demos/">TinyBase demos</a> for
33+
more interesting examples!
34+
</p>
35+
<Buttons />
36+
<div>
37+
<h2>Values</h2>
38+
<ValuesInHtmlTable />
39+
</div>
40+
<div>
41+
<h2>Pets Table</h2>
42+
<SortedTableInHtmlTable tableId="pets" cellId="name" limit={5} sortOnClick={true} className="sortedTable" paginator={true} />
43+
</div>{{#if typescript}}
44+
<Inspector />
45+
{{/if}}
46+
</Provider>
47+
</StrictMode>
3448
);
3549
};

‎templates/src/Buttons.tsx.hbs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{{addImport "import {useAddRowCallback, useSetValueCallback} from 'tinybase/ui-react';"}}{{#if typescript}}
2+
{{addImport "import type {ValueOrUndefined} from 'tinybase';"}}
3+
{{/if}}
4+
5+
// Convenience function for generating a random integer
6+
const getRandom = (max = 100) => Math.floor(Math.random() * max);
7+
8+
export const Buttons = () => {
9+
// Attach events to the buttons to mutate the data in the TinyBase Store
10+
const handleCount = useSetValueCallback(
11+
'counter',
12+
() => (value{{#if typescript}}: ValueOrUndefined{{/if}}) => ((value ?? 0){{#if typescript}} as number{{/if}}) + 1,
13+
);
14+
const handleRandom = useSetValueCallback('random', () => getRandom());
15+
const handleAddPet = useAddRowCallback('pets', (_, store) => ({
16+
name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
17+
species: store.getRowIds('species')[getRandom(5)],
18+
}));
19+
20+
return (
21+
<div id="buttons">
22+
<button onClick={handleCount}>Increment number</button>
23+
<button onClick={handleRandom}>Random number</button>
24+
<button onClick={handleAddPet}>Add a pet</button>
25+
</div>
26+
);
27+
};

‎templates/src/index.tsx.hbs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
{{addImport "import ReactDOM from 'react-dom/client';"}}
44
{{addImport "import {App} from './App';"}}
55
{{includeFile template="src/App.tsx.hbs" output="src/App.{{ext}}"}}
6+
{{includeFile template="src/Buttons.tsx.hbs" output="src/Buttons.{{ext}}"}}
67

78
addEventListener('load', () =>
89
ReactDOM.createRoot(document.getElementById('app')!).render(

‎test/__snapshots__/cli.test.js.snap‎

Lines changed: 154 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -66,38 +66,83 @@ npm run dev
6666
<path
6767
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" />
6868
</svg>",
69-
"src/App.jsx": "import {createStore} from 'tinybase';
70-
import {Provider, useValue} from 'tinybase/ui-react';
71-
const store = createStore().setValue('counter', 0);
72-
const App = () => (
73-
<Provider store={store}>
74-
<header>
75-
<h1>
76-
<img src="/favicon.svg" />
77-
TinyBase / JavaScript + React
78-
</h1>
79-
</header>
80-
<p>
81-
This is more or less the simplest TinyBase app you could imagine. It
82-
contains a handful of key-values and tables which are mutated with the
83-
buttons below. See the full set of{' '}
84-
<a href="https://tinybase.org/demos/">TinyBase demos</a> for more
85-
interesting examples!
86-
</p>
87-
<div id="buttons">
88-
<Counter />
89-
</div>
90-
</Provider>
91-
);
92-
const Counter = () => {
93-
const counter = useValue('counter', store);
69+
"src/App.jsx": "import {StrictMode} from 'react';
70+
import {createStore} from 'tinybase';
71+
import {Provider, useCreateStore} from 'tinybase/ui-react';
72+
import {SortedTableInHtmlTable, ValuesInHtmlTable} from 'tinybase/ui-react-dom';
73+
import {Buttons} from './Buttons';
74+
const App = () => {
75+
const store = useCreateStore(() => {
76+
return createStore()
77+
.setValue('counter', 0)
78+
.setRow('pets', '0', {name: 'fido', species: 'dog'})
79+
.setTable('species', {
80+
dog: {price: 5},
81+
cat: {price: 4},
82+
fish: {price: 2},
83+
worm: {price: 1},
84+
parrot: {price: 3},
85+
});
86+
});
9487
return (
95-
<button onClick={() => store.setValue('counter', (c) => c + 1)}>
96-
Increment counter: {counter}
97-
</button>
88+
<StrictMode>
89+
<Provider store={store}>
90+
<header>
91+
<h1>
92+
<img src="/favicon.svg" />
93+
TinyBase / JavaScript + React
94+
</h1>
95+
</header>
96+
<p>
97+
This is more or less the simplest TinyBase app you could imagine. It
98+
contains a handful of key-values and tables which are mutated with the
99+
buttons below, and rendered with plain table components. See the full
100+
set of <a href="https://tinybase.org/demos/">TinyBase demos</a> for
101+
more interesting examples!
102+
</p>
103+
<Buttons />
104+
<div>
105+
<h2>Values</h2>
106+
<ValuesInHtmlTable />
107+
</div>
108+
<div>
109+
<h2>Pets Table</h2>
110+
<SortedTableInHtmlTable
111+
tableId="pets"
112+
cellId="name"
113+
limit={5}
114+
sortOnClick={true}
115+
className="sortedTable"
116+
paginator={true}
117+
/>
118+
</div>
119+
</Provider>
120+
</StrictMode>
98121
);
99122
};
100123
export {App};
124+
",
125+
"src/Buttons.jsx": "import {useAddRowCallback, useSetValueCallback} from 'tinybase/ui-react';
126+
const getRandom = (max = 100) => Math.floor(Math.random() * max);
127+
const Buttons = () => {
128+
const handleCount = useSetValueCallback(
129+
'counter',
130+
() => (value) => (value ?? 0) + 1,
131+
);
132+
const handleRandom = useSetValueCallback('random', () => getRandom());
133+
const handleAddPet = useAddRowCallback('pets', (_, store) => ({
134+
name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
135+
species: store.getRowIds('species')[getRandom(5)],
136+
}));
137+
return (
138+
<div id="buttons">
139+
<button onClick={handleCount}>Increment number</button>
140+
<button onClick={handleRandom}>Random number</button>
141+
<button onClick={handleAddPet}>Add a pet</button>
142+
</div>
143+
);
144+
};
145+
export {Buttons};
101146
",
102147
"src/index.css": "body {
103148
color: #bbb;
@@ -597,39 +642,90 @@ npm run dev
597642
<path
598643
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" />
599644
</svg>",
600-
"src/App.tsx": "import {createStore} from 'tinybase';
601-
import {Provider, useValue} from 'tinybase/ui-react';
602-
603-
const store = createStore().setValue('counter', 0);
604-
605-
export const App = () => (
606-
<Provider store={store}>
607-
<header>
608-
<h1>
609-
<img src="/favicon.svg" />
610-
TinyBase / TypeScript + React
611-
</h1>
612-
</header>
613-
<p>
614-
This is more or less the simplest TinyBase app you could imagine. It
615-
contains a handful of key-values and tables which are mutated with the
616-
buttons below. See the full set of{' '}
617-
<a href="https://tinybase.org/demos/">TinyBase demos</a> for more
618-
interesting examples!
619-
</p>
620-
<div id="buttons">
621-
<Counter />
622-
</div>
623-
</Provider>
624-
);
645+
"src/App.tsx": "import {StrictMode} from 'react';
646+
import {createStore} from 'tinybase';
647+
import {Provider, useCreateStore} from 'tinybase/ui-react';
648+
import {SortedTableInHtmlTable, ValuesInHtmlTable} from 'tinybase/ui-react-dom';
649+
import {Buttons} from './Buttons';
650+
import {Inspector} from 'tinybase/ui-react-inspector';
651+
652+
export const App = () => {
653+
const store = useCreateStore(() => {
654+
// Create the TinyBase Store and initialize the Store's data
655+
return createStore()
656+
.setValue('counter', 0)
657+
.setRow('pets', '0', {name: 'fido', species: 'dog'})
658+
.setTable('species', {
659+
dog: {price: 5},
660+
cat: {price: 4},
661+
fish: {price: 2},
662+
worm: {price: 1},
663+
parrot: {price: 3},
664+
});
665+
});
666+
667+
return (
668+
<StrictMode>
669+
<Provider store={store}>
670+
<header>
671+
<h1>
672+
<img src="/favicon.svg" />
673+
TinyBase / TypeScript + React
674+
</h1>
675+
</header>
676+
<p>
677+
This is more or less the simplest TinyBase app you could imagine. It
678+
contains a handful of key-values and tables which are mutated with the
679+
buttons below, and rendered with plain table components. See the full
680+
set of <a href="https://tinybase.org/demos/">TinyBase demos</a> for
681+
more interesting examples!
682+
</p>
683+
<Buttons />
684+
<div>
685+
<h2>Values</h2>
686+
<ValuesInHtmlTable />
687+
</div>
688+
<div>
689+
<h2>Pets Table</h2>
690+
<SortedTableInHtmlTable
691+
tableId="pets"
692+
cellId="name"
693+
limit={5}
694+
sortOnClick={true}
695+
className="sortedTable"
696+
paginator={true}
697+
/>
698+
</div>
699+
<Inspector />
700+
</Provider>
701+
</StrictMode>
702+
);
703+
};
704+
",
705+
"src/Buttons.tsx": "import {useAddRowCallback, useSetValueCallback} from 'tinybase/ui-react';
706+
import type {ValueOrUndefined} from 'tinybase';
707+
708+
// Convenience function for generating a random integer
709+
const getRandom = (max = 100) => Math.floor(Math.random() * max);
625710
626-
const Counter = () => {
627-
const counter = useValue('counter', store);
711+
export const Buttons = () => {
712+
// Attach events to the buttons to mutate the data in the TinyBase Store
713+
const handleCount = useSetValueCallback(
714+
'counter',
715+
() => (value: ValueOrUndefined) => ((value ?? 0) as number) + 1,
716+
);
717+
const handleRandom = useSetValueCallback('random', () => getRandom());
718+
const handleAddPet = useAddRowCallback('pets', (_, store) => ({
719+
name: ['fido', 'felix', 'bubbles', 'lowly', 'polly'][getRandom(5)],
720+
species: store.getRowIds('species')[getRandom(5)],
721+
}));
628722
629723
return (
630-
<button onClick={() => store.setValue('counter', (c: number) => c + 1)}>
631-
Increment counter: {counter}
632-
</button>
724+
<div id="buttons">
725+
<button onClick={handleCount}>Increment number</button>
726+
<button onClick={handleRandom}>Random number</button>
727+
<button onClick={handleAddPet}>Add a pet</button>
728+
</div>
633729
);
634730
};
635731
",

0 commit comments

Comments
 (0)