tinybase 4.1.0-beta.0 → 4.1.0-beta.2

package/readme.md

@@ -1,4 +1,4 @@
-<section id="hero"><h2 id="the-reactive-data-store-for-local-first-apps">The <em>reactive</em> data store for <span>local-first apps</span>.</h2><p>Modern apps deserve better. Why trade reactive user experiences to be able to use relational data? Why sacrifice store features for bundle size? And why should the cloud do all the work <a href="https://localfirstweb.dev/" target="_blank">anyway</a>?</p><p><em>TinyBase is a smart new way to structure your local app data:</em></p><ul><li>Manage <a href="#start-with-a-simple-key-value-store">key-value data</a>, <a href="#level-up-to-use-tabular-data">tabular data</a> - or both - with optional <a href="#apply-schemas-to-tables-and-values">schematization</a> to model it.</li><li><a href="#register-listeners-at-any-granularity">Flexibly reactive</a> to reconciled updates, so you only spend cycles on things that change.</li><li><a href="#build-complex-queries-with-tinyql">Powerful query engine</a> to select, join, filter, group, sort and paginate data - reactively.</li><li><a href="#create-indexes-for-fast-lookups">Indexing</a>, <a href="#define-metrics-and-aggregations">metrics</a>, <a href="#configure-relationships-between-tables">relationships</a> - and even an <a href="#use-checkpoints-for-an-easy-undo-stack">undo stack</a> for your app state.</li><li><a href="#type-definitions-orm-like-apis">Type definitions &amp; ORM-like APIs</a> (<em>new!</em>), based on a schema or inference.</li><li>Easily <a href="#persist-to-storage-sqlite-or-crdts">sync your data</a> to storage, (<em>new!</em>) SQLite, or (<em>new!</em>) CRDTs.</li><li>Use idiomatic, optional, <a href="#call-hooks-to-bind-to-data">bindings to React</a> for a fully reactive UI.</li></ul><p><em>Tiny by name, tiny by nature</em>, TinyBase only costs <a href="#did-we-say-tiny">4.7kB - 8.9kB</a> when compressed, and has zero dependencies. And of course it&#x27;s <a href="#well-tested-and-documented">well tested</a>, <a href="https://beta.tinybase.org/guides/the-basics/getting-started/">fully documented</a>, and <a href="https://github.com/tinyplex/tinybase">open source</a>. Other <a href="https://beta.tinybase.org/guides/faq/">FAQs</a>?</p></section><p><a id="new" href="https://beta.tinybase.org/guides/releases/#v4-0"><em>NEW!</em> v4.0 release</a></p><hr><p><a class="start" href="https://beta.tinybase.org/guides/the-basics/getting-started/">Get started</a></p><p><a href="https://beta.tinybase.org/demos/">Try the demos</a></p><p><a href="https://beta.tinybase.org/api/store/interfaces/store/store/">Read the docs</a></p><hr><section><h3 id="proud-to-be-sponsored-by">Proud to be sponsored by:</h3><p><a href="https://github.com/expo" target="_blank"><img title="expo" src="https://github.com/expo.png?size=48" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img title="WonderPanda" src="https://github.com/WonderPanda.png?size=48" width="48" height="48"></a><a href="https://github.com/arpitBhalla" target="_blank"><img title="arpitBhalla" src="https://github.com/arpitBhalla.png?size=48" width="48" height="48"></a></p></section><section><h3 id="excited-to-be-used-by">Excited to be used by:</h3><p><a href="https://github.com/Apocalypsor" target="_blank"><img title="Apocalypsor" src="https://github.com/Apocalypsor.png?size=48" width="48" height="48"></a><a href="https://github.com/brentvatne" target="_blank"><img title="brentvatne" src="https://github.com/brentvatne.png?size=48" width="48" height="48"></a><a href="https://github.com/circadian-risk" target="_blank"><img title="circadian-risk" src="https://github.com/circadian-risk.png?size=48" width="48" height="48"></a><a href="https://github.com/cubecull" target="_blank"><img title="cubecull" src="https://github.com/cubecull.png?size=48" width="48" height="48"></a><a href="https://github.com/erwinkn" target="_blank"><img title="erwinkn" src="https://github.com/erwinkn.png?size=48" width="48" height="48"></a><a href="https://github.com/flaming-codes" target="_blank"><img title="flaming-codes" src="https://github.com/flaming-codes.png?size=48" width="48" height="48"></a><a href="https://github.com/generates" target="_blank"><img title="generates" src="https://github.com/generates.png?size=48" width="48" height="48"></a><a href="https://github.com/Giulio987" target="_blank"><img title="Giulio987" src="https://github.com/Giulio987.png?size=48" width="48" height="48"></a><a href="https://github.com/jaysc" target="_blank"><img title="jaysc" src="https://github.com/jaysc.png?size=48" width="48" height="48"></a><a href="https://github.com/Kayoo-asso" target="_blank"><img title="Kayoo-asso" src="https://github.com/Kayoo-asso.png?size=48" width="48" height="48"></a><a href="https://github.com/kotofurumiya" target="_blank"><img title="kotofurumiya" src="https://github.com/kotofurumiya.png?size=48" width="48" height="48"></a><a href="https://github.com/miking-the-viking" target="_blank"><img title="miking-the-viking" src="https://github.com/miking-the-viking.png?size=48" width="48" height="48"></a><a href="https://github.com/shaneosullivan" target="_blank"><img title="shaneosullivan" src="https://github.com/shaneosullivan.png?size=48" width="48" height="48"></a><a href="https://github.com/SuperSonicHub1" target="_blank"><img title="SuperSonicHub1" src="https://github.com/SuperSonicHub1.png?size=48" width="48" height="48"></a><a href="https://github.com/uptonking" target="_blank"><img title="uptonking" src="https://github.com/uptonking.png?size=48" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img title="WonderPanda" src="https://github.com/WonderPanda.png?size=48" width="48" height="48"></a></p></section><hr><section><h2 id="start-with-a-simple-key-value-store">Start with a simple key-value store.</h2><p>Creating a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a> requires just a simple call to the <a href="https://beta.tinybase.org/api/store/functions/creation/createstore/"><code>createStore</code></a> function. Once you have one, you can easily set <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in it by unique <a href="https://beta.tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a>. And of course you can easily get them back out again.</p><p>Read more about using keyed value data in <a href="https://beta.tinybase.org/guides/the-basics/">The Basics</a> guide.</p></section>
+<section id="hero"><h2 id="the-reactive-data-store-for-local-first-apps">The <em>reactive</em> data store for <span>local-first apps</span>.</h2><p>Modern apps deserve better. Why trade reactive user experiences to be able to use relational data? Why sacrifice features for bundle size? And why does the cloud do all the work <a href="https://localfirstweb.dev/" target="_blank">anyway</a>?</p><p><em>TinyBase is a smart new way to structure your local app data:</em></p><ul><li>Manage <a href="#start-with-a-simple-key-value-store">key-value data</a>, <a href="#level-up-to-use-tabular-data">tabular data</a> - or both - with optional <a href="#apply-schemas-to-tables-values">schematization</a> to model it.</li><li><a href="#register-listeners-at-any-granularity">Flexibly reactive</a> to reconciled updates, so you only spend cycles on things that change.</li><li><a href="#build-complex-queries-with-tinyql">Powerful query engine</a> to select, join, filter, group, sort and paginate data - reactively.</li><li><a href="#create-indexes-for-fast-lookups">Indexing</a>, <a href="#define-metrics-and-aggregations">metrics</a>, <a href="#model-relationships-between-tables">relationships</a> - and even an <a href="#use-checkpoints-for-an-easy-undo-stack">undo stack</a> for your app state.</li><li><a href="#type-definitions-orm-like-apis">Type definitions &amp; ORM-like APIs</a>, based on a schema or inference.</li><li>Easily <a href="#persist-to-storage-sqlite-or-crdts">sync your data</a> to storage, (<em>new!</em>) SQLite, or (<em>new!</em>) CRDTs.</li><li>Optional <a href="#call-hooks-to-bind-to-data">bindings to React</a> and (<em>new!</em>) <a href="#pre-built-reactive-components">pre-built components</a> for a fully reactive UI.</li></ul><p><em>Tiny by name, tiny by nature</em>, TinyBase only costs <a href="#did-we-say-tiny">4.7kB - 8.9kB</a> when compressed, and has zero dependencies. And of course it&#x27;s <a href="#well-tested-and-documented">well tested</a>, <a href="https://beta.tinybase.org/guides/the-basics/getting-started/">fully documented</a>, and <a href="https://github.com/tinyplex/tinybase">open source</a>.</p></section><p><a id="new" href="https://beta.tinybase.org/guides/releases/#v4-1"><em>NEW!</em> v4.1 release</a></p><hr><p><a class="start" href="https://beta.tinybase.org/guides/the-basics/getting-started/">Get started</a></p><p><a href="https://beta.tinybase.org/demos/">Try the demos</a></p><p><a href="https://beta.tinybase.org/api/store/interfaces/store/store/">Read the docs</a></p><hr><section><h3 id="proud-to-be-sponsored-by">Proud to be sponsored by:</h3><p><a href="https://github.com/expo" target="_blank"><img title="expo" src="https://github.com/expo.png?size=48" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img title="WonderPanda" src="https://github.com/WonderPanda.png?size=48" width="48" height="48"></a><a href="https://github.com/arpitBhalla" target="_blank"><img title="arpitBhalla" src="https://github.com/arpitBhalla.png?size=48" width="48" height="48"></a></p></section><section><h3 id="excited-to-be-used-by">Excited to be used by:</h3><p><a href="https://github.com/Apocalypsor" target="_blank"><img title="Apocalypsor" src="https://github.com/Apocalypsor.png?size=48" width="48" height="48"></a><a href="https://github.com/brentvatne" target="_blank"><img title="brentvatne" src="https://github.com/brentvatne.png?size=48" width="48" height="48"></a><a href="https://github.com/circadian-risk" target="_blank"><img title="circadian-risk" src="https://github.com/circadian-risk.png?size=48" width="48" height="48"></a><a href="https://github.com/cubecull" target="_blank"><img title="cubecull" src="https://github.com/cubecull.png?size=48" width="48" height="48"></a><a href="https://github.com/erwinkn" target="_blank"><img title="erwinkn" src="https://github.com/erwinkn.png?size=48" width="48" height="48"></a><a href="https://github.com/flaming-codes" target="_blank"><img title="flaming-codes" src="https://github.com/flaming-codes.png?size=48" width="48" height="48"></a><a href="https://github.com/generates" target="_blank"><img title="generates" src="https://github.com/generates.png?size=48" width="48" height="48"></a><a href="https://github.com/Giulio987" target="_blank"><img title="Giulio987" src="https://github.com/Giulio987.png?size=48" width="48" height="48"></a><a href="https://github.com/jaysc" target="_blank"><img title="jaysc" src="https://github.com/jaysc.png?size=48" width="48" height="48"></a><a href="https://github.com/Kayoo-asso" target="_blank"><img title="Kayoo-asso" src="https://github.com/Kayoo-asso.png?size=48" width="48" height="48"></a><a href="https://github.com/kotofurumiya" target="_blank"><img title="kotofurumiya" src="https://github.com/kotofurumiya.png?size=48" width="48" height="48"></a><a href="https://github.com/learn-anything" target="_blank"><img title="learn-anything" src="https://github.com/learn-anything.png?size=48" width="48" height="48"></a><a href="https://github.com/miking-the-viking" target="_blank"><img title="miking-the-viking" src="https://github.com/miking-the-viking.png?size=48" width="48" height="48"></a><a href="https://github.com/shaneosullivan" target="_blank"><img title="shaneosullivan" src="https://github.com/shaneosullivan.png?size=48" width="48" height="48"></a><a href="https://github.com/SuperSonicHub1" target="_blank"><img title="SuperSonicHub1" src="https://github.com/SuperSonicHub1.png?size=48" width="48" height="48"></a><a href="https://github.com/threepointone" target="_blank"><img title="threepointone" src="https://github.com/threepointone.png?size=48" width="48" height="48"></a><a href="https://github.com/uptonking" target="_blank"><img title="uptonking" src="https://github.com/uptonking.png?size=48" width="48" height="48"></a><a href="https://github.com/WonderPanda" target="_blank"><img title="WonderPanda" src="https://github.com/WonderPanda.png?size=48" width="48" height="48"></a></p></section><hr><section><h2 id="start-with-a-simple-key-value-store">Start with a simple key-value store.</h2><p>Creating a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a> requires just a simple call to the <a href="https://beta.tinybase.org/api/store/functions/creation/createstore/"><code>createStore</code></a> function. Once you have one, you can easily set <a href="https://beta.tinybase.org/api/store/type-aliases/store/values/"><code>Values</code></a> in it by unique <a href="https://beta.tinybase.org/api/common/type-aliases/identity/id/"><code>Id</code></a>. And of course you can easily get them back out again.</p><p>Read more about using keyed value data in <a href="https://beta.tinybase.org/guides/the-basics/">The Basics</a> guide.</p></section>
 
 ```js
 const store = createStore()
@@ -52,37 +52,42 @@ console.log(app.innerHTML);
 // -> 'Color: walnut'
 ```
 
-<section><h2 id="use-components-for-reactive-apps">Use components for reactive apps.</h2><p>The react module provides simple React components with bindings that make it easy to create a fully reactive user interface based on a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a>.</p><p>In this example, the library&#x27;s <a href="https://beta.tinybase.org/api/ui-react/functions/store-components/rowview/"><code>RowView</code></a> component just needs a reference to the <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a>, the <code>tableId</code>, and the <code>rowId</code> in order to render the contents of that row. An optional <code>cellComponent</code> prop lets you override how you want each <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> rendered. Again, all the listeners and updates are taken care of for you.</p><p>The module also includes a context Provider that sets up default for an entire app to use, reducing the need to drill all your props down into your app&#x27;s hierarchy.</p><p>Most of the demos showcase the use of these React hooks and components. Take a look at <a href="https://beta.tinybase.org/demos/todo-app/todo-app-v1-the-basics/">Todo App v1 (the basics)</a> to see these user interface binding patterns in action.</p><p>Read more about the <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module in the <a href="https://beta.tinybase.org/guides/building-uis/">Building UIs</a> guides.</p></section>
+<section><h2 id="pre-built-reactive-components">Pre-built reactive components.</h2><p>The <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module provides bare React components that let you build up a fully reactive user interface based on a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a>.</p><p>For web applications in particular, the new <a href="https://beta.tinybase.org/api/ui-react-dom/"><code>ui-react-dom</code></a> module provides pre-built components for tabular display of your data. This example demonstrates the fully-reactive <a href="https://beta.tinybase.org/api/ui-react-dom/functions/store-components/sortedtableinhtmltable/"><code>SortedTableInHtmlTable</code></a> component, which lets you customize the sorting and column settings - as well as much more!</p><p>The pre-built components in the new <a href="https://beta.tinybase.org/api/ui-react-dom/"><code>ui-react-dom</code></a> module are showcased in the <a href="https://beta.tinybase.org/demos/ui-components/">UI Components</a> demos, and you can read more about the underlying ui-react module in the <a href="https://beta.tinybase.org/guides/building-uis/">Building UIs</a> guides.</p></section>
 
 ```jsx
-const MyCellView = (props) => (
-  <>
-    {props.cellId}: <CellView {...props} />
-    <hr />
-  </>
-);
-
 const App2 = () => (
-  <RowView
+  <SortedTableInHtmlTable
     store={store}
     tableId="pets"
-    rowId="fido"
-    cellComponent={MyCellView}
+    cellId="color"
+    customCells={['color', 'sold']}
   />
 );
 
-root.render(<App2 />);
-console.log(app.innerHTML);
-// -> 'species: dog<hr>color: walnut<hr>sold: false<hr>'
+store.setRow('pets', 'felix', {
+  species: 'cat',
+  color: 'black',
+});
 
-store.setCell('pets', 'fido', 'sold', true);
+root.render(<App2 />);
 console.log(app.innerHTML);
-// -> 'species: dog<hr>color: walnut<hr>sold: true<hr>'
+// ->
+`
+<table>
+  <thead>
+    <tr><th>Id</th><th class="sorted ascending">color</th><th>sold</th></tr>
+  </thead>
+  <tbody>
+    <tr><th>felix</th><td>black</td><td></td></tr>
+    <tr><th>fido</th><td>walnut</td><td>false</td></tr>
+  </tbody>
+</table>
+`;
 
 root.unmount();
 ```
 
-<section><h2 id="apply-schemas-to-tables-and-values">Apply schemas to tables and values.</h2><p>By default, a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a> can contain any arbitrary <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a>, and a <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> can contain any arbitrary <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a>. But you can add a <a href="https://beta.tinybase.org/api/store/type-aliases/schema/valuesschema/"><code>ValuesSchema</code></a> or a <a href="https://beta.tinybase.org/api/store/type-aliases/schema/tablesschema/"><code>TablesSchema</code></a> to a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a> to ensure that the values are always what you expect: constraining their types, and providing defaults.</p><p>In this example, we set a second <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> without the <code>sold</code> <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> in it. The schema ensures it&#x27;s present with default of <code>false</code>.</p><p>Read more about schemas in the <a href="https://beta.tinybase.org/guides/schemas-and-persistence/using-schemas/">Using Schemas</a> guide.</p></section>
+<section><h2 id="apply-schemas-to-tables-values">Apply schemas to tables &amp; values.</h2><p>By default, a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a> can contain any arbitrary <a href="https://beta.tinybase.org/api/store/type-aliases/store/value/"><code>Value</code></a>, and a <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> can contain any arbitrary <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a>. But you can add a <a href="https://beta.tinybase.org/api/store/type-aliases/schema/valuesschema/"><code>ValuesSchema</code></a> or a <a href="https://beta.tinybase.org/api/store/type-aliases/schema/tablesschema/"><code>TablesSchema</code></a> to a <a href="https://beta.tinybase.org/api/store/interfaces/store/store/"><code>Store</code></a> to ensure that the values are always what you expect: constraining their types, and providing defaults.</p><p>In this example, we set a new <a href="https://beta.tinybase.org/api/store/type-aliases/store/row/"><code>Row</code></a> without the <code>sold</code> <a href="https://beta.tinybase.org/api/store/type-aliases/store/cell/"><code>Cell</code></a> in it. The schema ensures it&#x27;s present with default of <code>false</code>.</p><p>Read more about schemas in the <a href="https://beta.tinybase.org/guides/schemas-and-persistence/using-schemas/">Using Schemas</a> guide.</p></section>
 
 ```js
 store.setTablesSchema({
@@ -93,9 +98,9 @@ store.setTablesSchema({
   },
 });
 
-store.setRow('pets', 'felix', {species: 'cat'});
-console.log(store.getRow('pets', 'felix'));
-// -> {species: 'cat', sold: false}
+store.setRow('pets', 'polly', {species: 'parrot'});
+console.log(store.getRow('pets', 'polly'));
+// -> {species: 'parrot', sold: false}
 
 store.delTablesSchema();
 ```
@@ -107,7 +112,19 @@ const persister = createSessionPersister(store, 'demo');
 await persister.save();
 
 console.log(sessionStorage.getItem('demo'));
-// -> '[{"pets":{"fido":{"species":"dog","color":"walnut","sold":true},"felix":{"species":"cat","sold":false}}},{"employees":3,"open":true}]'
+// ->
+`
+[
+  {
+    "pets":{
+      "fido":{"species":"dog","color":"walnut","sold":false},
+      "felix":{"species":"cat","color":"black","sold":false},
+      "polly":{"species":"parrot","sold":false}
+    }
+  },
+  {"employees":3,"open":true}
+]
+`;
 
 persister.destroy();
 sessionStorage.clear();
@@ -247,7 +264,7 @@ console.log(store.getCell('pets', 'felix', 'sold'));
 // -> false
 ```
 
-<section><h2 id="type-definitions-orm-like-apis">Type definitions &amp; ORM-like APIs</h2><p>TinyBase has comprehensive type definitions, and even offers definitions that infer API types from the data schemas you apply.</p><p>Furthermore, you can easily create TypeScript <code>.d.ts</code> definitions that model your data and encourage type-safety when reading and writing data - as well as <code>.ts</code> implementations that provide ORM-like methods for your named tables.</p><p>Read more about the type support in the <a href="https://beta.tinybase.org/guides/the-basics/tinybase-and-typescript/">TinyBase and TypeScript</a> guide.</p></section>
+<section><h2 id="type-definitions-orm-like-apis">Type definitions &amp; ORM-like APIs</h2><p>TinyBase has comprehensive type definitions, and even offers definitions that infer API types from the data schemas you apply.</p><p>Furthermore, you can easily create TypeScript <code>.d.ts</code> definitions that model your data and encourage type-safety when reading and writing data - as well as <code>.ts</code> implementations that provide ORM-like methods for your named tables.</p><p>Read more about type support in the <a href="https://beta.tinybase.org/guides/the-basics/tinybase-and-typescript/">TinyBase and TypeScript</a> guide.</p></section>
 
 ```js yolo
 const tools = createTools(store);
@@ -266,4 +283,4 @@ export const createShop: typeof createShopDecl = () => {
 };
 ```
 
-<section><h2 id="did-we-say-tiny">Did we say tiny?</h2><p>If you use the basic <a href="https://beta.tinybase.org/api/store/"><code>store</code></a> module alone, you&#x27;ll only add a gzipped <em>4.7kB</em> to your app. Incrementally add the other modules as you need more functionality, or get it all for <em>8.9kB</em>.</p><p>The optional <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module is just another <em>3.4kB</em>, the auxiliary <a href="https://beta.tinybase.org/api/tools/"><code>tools</code></a> module is <em>10.3kB</em>, and everything is super fast. Life&#x27;s easy when you have zero dependencies!</p><p>Read more about how TinyBase is structured and packaged in the <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/architecture/">Architecture</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th width="30%"> </th><th>.js.gz</th><th>.js</th><th>debug.js</th><th>.d.ts</th></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/store/">store</a></th><td>4.7kB</td><td>11.1kB</td><td>47.8kB</td><td>212.9kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/metrics/">metrics</a></th><td>1.8kB</td><td>3.6kB</td><td>14.9kB</td><td>29.2kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/indexes/">indexes</a></th><td>1.9kB</td><td>3.7kB</td><td>16.7kB</td><td>33.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/relationships/">relationships</a></th><td>1.8kB</td><td>3.7kB</td><td>16.8kB</td><td>42.1kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/queries/">queries</a></th><td>2.7kB</td><td>5.5kB</td><td>25.0kB</td><td>112.7kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/checkpoints/">checkpoints</a></th><td>1.5kB</td><td>3.1kB</td><td>12.5kB</td><td>33.3kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/persisters/">persisters</a></th><td>0.6kB</td><td>1.2kB</td><td>3.9kB</td><td>41.9kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/common/">common</a></th><td>0.1kB</td><td>0.1kB</td><td>0.1kB</td><td>3.5kB</td></tr><tr><th class="right">tinybase (all)</th><td>8.9kB</td><td>21.9kB</td><td>95.0kB</td><td>0.3kB</td></tr></tbody></table></div><section><h2 id="well-tested-and-documented">Well tested and documented.</h2><p>TinyBase has <em>100.0%</em> test coverage, including the code throughout the documentation - even on this page! The guides, demos, and API examples are designed to make it as easy as possible to get up and running.</p><p>Read more about how TinyBase is tested in the Unit <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/testing/">Testing</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th width="30%"> </th><th>Total</th><th>Tested</th><th>Coverage</th></tr><tr><th class="right">Lines</th><td>1,817</td><td>1,817</td><td>100.0%</td></tr><tr><th class="right">Statements</th><td>1,959</td><td>1,959</td><td>100.0%</td></tr><tr><th class="right">Functions</th><td>777</td><td>777</td><td>100.0%</td></tr><tr><th class="right">Branches</th><td>669</td><td>669</td><td>100.0%</td></tr><tr><th class="right">Tests</th><td colspan="3">3,093</td></tr><tr><th class="right">Assertions</th><td colspan="3">14,355</td></tr></tbody></table></div><hr><p><a class="start" href="https://beta.tinybase.org/guides/the-basics/getting-started/">Get started</a></p><p><a href="https://beta.tinybase.org/demos/">Try the demos</a></p><p><a href="https://beta.tinybase.org/api/store/interfaces/store/store/">Read the docs</a></p><hr><section><h2 id="follow">Follow</h2><ul><li>News and updates on <a href="https://twitter.com/tinybasejs">Twitter</a>, <a href="https://discord.com/invite/mGz3mevwP8">Discord</a>, and <a href="https://facebook.com/tinybasejs">Facebook</a>.</li><li><a href="https://github.com/tinyplex/tinybase/discussions">Discussions</a> and <a href="https://github.com/tinyplex/tinybase/issues">issues</a> on <a href="https://github.com/tinyplex/tinybase">GitHub</a>.</li><li><a href="https://beta.tinybase.org/guides/releases/">Release notes</a> for each version.</li><li>Packages on <a href="https://www.npmjs.com/package/tinybase/v/4.1.0-beta.0">NPM</a>.</li></ul></section><section><h2 id="about">About</h2><p>Building TinyBase was originally an interesting exercise for <a rel="me" href="https://hachyderm.io/@jamesgpearce">me</a> in API design, minification, and documentation. It could not have been built without these great <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#giants">projects</a> and <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#and-friends">friends</a>, and I hope you enjoy using it!</p></section>
+<section><h2 id="did-we-say-tiny">Did we say tiny?</h2><p>If you use the basic <a href="https://beta.tinybase.org/api/store/"><code>store</code></a> module alone, you&#x27;ll only add a gzipped <em>4.7kB</em> to your app. Incrementally add the other modules as you need more functionality, or get it all for <em>8.9kB</em>.</p><p>The optional <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module is just another <em>3.5kB</em>, the auxiliary <a href="https://beta.tinybase.org/api/tools/"><code>tools</code></a> module is <em>10.4kB</em>, and everything is super fast. Life&#x27;s easy when you have zero dependencies!</p><p>Read more about how TinyBase is structured and packaged in the <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/architecture/">Architecture</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th width="30%"> </th><th>.js.gz</th><th>.js</th><th>debug.js</th><th>.d.ts</th></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/store/">store</a></th><td>4.7kB</td><td>11.1kB</td><td>47.8kB</td><td>212.9kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/metrics/">metrics</a></th><td>1.8kB</td><td>3.6kB</td><td>14.9kB</td><td>29.2kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/indexes/">indexes</a></th><td>1.9kB</td><td>3.7kB</td><td>16.7kB</td><td>33.8kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/relationships/">relationships</a></th><td>1.8kB</td><td>3.7kB</td><td>16.8kB</td><td>42.1kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/queries/">queries</a></th><td>2.7kB</td><td>5.6kB</td><td>25.0kB</td><td>115.0kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/checkpoints/">checkpoints</a></th><td>1.5kB</td><td>3.1kB</td><td>12.5kB</td><td>33.3kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/persisters/">persisters</a></th><td>0.6kB</td><td>1.2kB</td><td>3.9kB</td><td>41.9kB</td></tr><tr><th class="right"><a href="https://beta.tinybase.org/api/common/">common</a></th><td>0.1kB</td><td>0.1kB</td><td>0.1kB</td><td>3.5kB</td></tr><tr><th class="right">tinybase (all)</th><td>8.9kB</td><td>21.9kB</td><td>95.0kB</td><td>0.3kB</td></tr></tbody></table></div><section><h2 id="well-tested-and-documented">Well tested and documented.</h2><p>TinyBase has <em>100.0%</em> test coverage, including the code throughout the documentation - even on this page! The guides, demos, and API examples are designed to make it as easy as possible for you to get your TinyBase-powered app up and running.</p><p>Read more about how TinyBase is tested in the Unit <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/testing/">Testing</a> guide.</p></section><div class="table"><table class="fixed"><tbody><tr><th width="30%"> </th><th>Total</th><th>Tested</th><th>Coverage</th></tr><tr><th class="right">Lines</th><td>1,824</td><td>1,824</td><td>100.0%</td></tr><tr><th class="right">Statements</th><td>1,966</td><td>1,966</td><td>100.0%</td></tr><tr><th class="right">Functions</th><td>780</td><td>780</td><td>100.0%</td></tr><tr><th class="right">Branches</th><td>671</td><td>671</td><td>100.0%</td></tr><tr><th class="right">Tests</th><td colspan="3">3,146</td></tr><tr><th class="right">Assertions</th><td colspan="3">14,445</td></tr></tbody></table></div><hr><p><a class="start" href="https://beta.tinybase.org/guides/the-basics/getting-started/">Get started</a></p><p><a href="https://beta.tinybase.org/demos/">Try the demos</a></p><p><a href="https://beta.tinybase.org/api/store/interfaces/store/store/">Read the docs</a></p><hr><section><h2 id="follow">Follow</h2><ul><li>News and updates on <a href="https://twitter.com/tinybasejs">Twitter</a>, <a href="https://discord.com/invite/mGz3mevwP8">Discord</a>, and <a href="https://facebook.com/tinybasejs">Facebook</a>.</li><li><a href="https://github.com/tinyplex/tinybase/discussions">Discussions</a> and <a href="https://github.com/tinyplex/tinybase/issues">issues</a> on <a href="https://github.com/tinyplex/tinybase">GitHub</a>.</li><li><a href="https://beta.tinybase.org/guides/releases/">Release notes</a> for each version.</li><li>Packages on <a href="https://www.npmjs.com/package/tinybase/v/4.1.0-beta.2">NPM</a>.</li></ul></section><section><h2 id="about">About</h2><p>Building TinyBase was originally an interesting exercise for <a rel="me" href="https://hachyderm.io/@jamesgpearce">me</a> in API design, minification, and documentation. It could not have been built without these great <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#giants">projects</a> and <a href="https://beta.tinybase.org/guides/how-tinybase-is-built/credits/#and-friends">friends</a>, and I hope you enjoy using it as much as I do building it!</p></section>