tinybase 8.1.0-beta.4 → 8.1.0

package/releases.md

@@ -1,30 +1,38 @@
-<link rel="preload" as="image" href="https://beta.tinybase.org/inspector.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/partykit.gif"><link rel="preload" as="image" href="https://beta.tinybase.org/ui-react-dom.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/store-inspector.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/car-analysis.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/movie-database.webp"><p>This is a reverse chronological list of the major TinyBase releases, with highlighted features.</p><hr><h1 id="v8-1">v8.1</h1><h2 id="svelte-support">Svelte Support</h2><p>This highly-anticipated release introduces the new <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module, bringing native Svelte 5 runes-based reactive bindings to TinyBase. The module provides hooks and view components for building reactive UIs without any additional state management.</p><p>Hooks return a reactive <code>{current}</code> object backed by Svelte&#x27;s <code>$state</code> rune. Any component that reads <code>hook.current</code> will automatically re-render when the underlying TinyBase data changes:</p>
+<link rel="preload" as="image" href="https://beta.tinybase.org/inspector.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/partykit.gif"><link rel="preload" as="image" href="https://beta.tinybase.org/ui-react-dom.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/store-inspector.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/car-analysis.webp"><link rel="preload" as="image" href="https://beta.tinybase.org/movie-database.webp"><p>This is a reverse chronological list of the major TinyBase releases, with highlighted features.</p><hr><h1 id="v8-1">v8.1</h1><h2 id="svelte-support">Svelte Support</h2><p>This highly-anticipated release introduces the new <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module, bringing native Svelte 5 runes-based reactive bindings to TinyBase. The module provides reactive functions and view components for building reactive UIs without any additional state management.</p><p>Reactive functions return a reactive object backed by Svelte&#x27;s reactivity. Any component that reads <code>current</code> from it will automatically re-render when the underlying TinyBase data changes:</p>
 
 ```svelte
 <script>
   import {createStore} from 'tinybase';
-  import {useCell} from 'tinybase/ui-svelte';
+  import {getCell} from 'tinybase/ui-svelte';
 
   const store = createStore().setCell('pets', 'fido', 'color', 'brown');
-  const color = useCell('pets', 'fido', 'color', store);
+  const color = getCell('pets', 'fido', 'color', store);
 </script>
 
 <p>Color: {color.current}</p>
 ```
 
-<p>The <a href="https://beta.tinybase.org/api/ui-svelte/functions/hook/usebindablecell/"><code>useBindableCell</code></a> hook and <a href="https://beta.tinybase.org/api/ui-svelte/functions/hook/usebindablevalue/"><code>useBindableValue</code></a> hook go further, providing a writable <code>current</code> property that pairs naturally with Svelte&#x27;s <code>bind:</code> directive for two-way data binding:</p>
+<p>The <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/getcell/"><code>getCell</code></a> function and the <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/getvalue/"><code>getValue</code></a> function provide a writable <code>current</code> property that pairs naturally with Svelte&#x27;s <code>bind:</code> directive for two-way data binding:</p>
 
 ```svelte
 <script>
-  import {useBindableCell} from 'tinybase/ui-svelte';
+  import {getCell} from 'tinybase/ui-svelte';
 
-  const color = useBindableCell('pets', 'fido', 'color', store);
+  const color = getCell('pets', 'fido', 'color', store);
 </script>
 
 <input bind:value={color.current} />
 ```
 
-<p>All hooks accept reactive getter functions as parameters — the <a href="https://beta.tinybase.org/api/ui-svelte/type-aliases/identity/maybegetter/"><code>MaybeGetter</code></a> type (<code>T | (() =&gt; T)</code>) — so passing <code>() =&gt; rowId</code> from a <code>$state</code> variable causes the hook to reactively track which row it reads, without unmounting and remounting.</p><p>The module further includes a provider component and context helpers for sharing TinyBase objects across a component tree, and many built-in view components for assembling UIs directly from <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> data.</p><p>Read more in the <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module documentation and the <a href="https://beta.tinybase.org/guides/building-uis/building-uis-with-svelte/">Building UIs With Svelte</a> guide.</p><h2 id="breaking-change">Breaking Change</h2><p>This release contains a minor breaking change. The <code>tinybase/omni</code> module no longer includes the <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module, <a href="https://beta.tinybase.org/api/ui-react-dom/"><code>ui-react-dom</code></a> module, or <a href="https://beta.tinybase.org/api/ui-react-inspector/"><code>ui-react-inspector</code></a> module. Since the <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module exports many of the same names, including both in a single flat namespace would cause silent name collisions.</p><p>If you were importing React UI helpers from <code>tinybase/omni</code>, update your imports:</p>
+<p>All reactive functions accept reactive getter functions as parameters — the <a href="https://beta.tinybase.org/api/ui-svelte/type-aliases/identity/maybegetter/"><code>MaybeGetter</code></a> type (<code>T | (() =&gt; T)</code>) — so passing <code>() =&gt; rowId</code> from a <code>$state</code> variable causes the function to reactively track which row it reads, without unmounting and remounting.</p><p>The module further includes a provider component and context helpers for sharing TinyBase objects across a component tree, and many built-in view components for assembling UIs directly from <a href="https://beta.tinybase.org/api/the-essentials/creating-stores/store/"><code>Store</code></a> data.</p><p>Read more in the <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module documentation and the <a href="https://beta.tinybase.org/guides/building-uis/building-uis-with-svelte/">Building UIs With Svelte</a> guide.</p><h2 id="new-demos">New <a href="https://beta.tinybase.org/demos/">Demos</a></h2><p>To showcase the new Svelte support, we have created two new Svelte-specific demos: a <a href="https://beta.tinybase.org/demos/hello-world/hello-world-svelte/">Hello World (Svelte)</a> demo and a <a href="https://beta.tinybase.org/demos/countries/countries-svelte/">Countries (Svelte)</a> demo. Check them out to see the new module in action.</p><p>The <code>create-tinybase</code> CLI tool also now includes an option to create a Svelte demo project, so you can easily get started with Svelte and TinyBase in exactly the same way you can with React:</p>
+
+```bash
+> npm create tinybase@latest
+
+📦 Creating your project...
+```
+
+<h2 id="breaking-changes">Breaking <a href="https://beta.tinybase.org/api/store/type-aliases/transaction/changes/"><code>Changes</code></a></h2><p>If you tried the <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module in earlier beta releases, there are some intentional breaking changes made to ensure the API is more idiomatic for Svelte. What was <code>useX</code> is now a reactive <code>getX</code> or <code>hasX</code> function, so for example <code>useCell</code> has become the <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/getcell/"><code>getCell</code></a> function and <code>useHasCell</code> has become the <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/hascell/"><code>hasCell</code></a> function. Context lookups also use <code>getX</code>, as with the <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/getmetrics/"><code>getMetrics</code></a> function, but those return TinyBase objects directly from Provider context rather than reactive <code>current</code>-based wrappers. Listener functions now use <code>onX</code>; so for example <code>useCellListener</code> has become the <a href="https://beta.tinybase.org/api/ui-svelte/functions/listener/oncell/"><code>onCell</code></a> function. The old <code>useBindableCell</code> and <code>useBindableValue</code> beta names have also gone away because the <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/getcell/"><code>getCell</code></a> function and <a href="https://beta.tinybase.org/api/ui-svelte/functions/getter/getvalue/"><code>getValue</code></a> function expose the writable scalar accessors directly.</p><p>This release also contains a minor breaking change since v8.0. The <code>tinybase/omni</code> module no longer includes the <a href="https://beta.tinybase.org/api/ui-react/"><code>ui-react</code></a> module, <a href="https://beta.tinybase.org/api/ui-react-dom/"><code>ui-react-dom</code></a> module, or <a href="https://beta.tinybase.org/api/ui-react-inspector/"><code>ui-react-inspector</code></a> module. Since the <a href="https://beta.tinybase.org/api/ui-svelte/"><code>ui-svelte</code></a> module exports many of the same names, including both in a single flat namespace would cause silent name collisions.</p><p>If you were importing React UI helpers from <code>tinybase/omni</code>, update your imports:</p>
 
 ```js yolo
 // Before