[action] Mirrored from tinybase beta branch.

Author: tinyplexbot

docs/guides/releases/article.html

@@ -1,4 +1,4 @@
-<link rel="preload" as="image" href="/inspector.webp"><link rel="preload" as="image" href="/partykit.gif"><link rel="preload" as="image" href="/ui-react-dom.webp"><link rel="preload" as="image" href="/store-inspector.webp"><link rel="preload" as="image" href="/car-analysis.webp"><link rel="preload" as="image" href="/movie-database.webp"><nav><ul><li><a href="/">TinyBase</a></li><li><a href="/guides/">Guides</a></li><li><a href="/guides/releases/">Releases</a></li></ul></nav><section class="s1" id="/guides/releases/" data-id="R"><h1>Releases</h1><p>This is a reverse chronological list of the major TinyBase releases, with highlighted features.</p><hr><h2 id="v8-2">v8.2</h2><h3 id="svelte-dom-components-and-inspector">Svelte DOM Components And Inspector</h3><p>This release completes TinyBase&#x27;s Svelte support with two new published modules: <code>ui-svelte-dom</code> and <code>ui-svelte-inspector</code>.</p><p>The <code>ui-svelte-dom</code> module provides browser-ready Svelte components for rendering and editing TinyBase data as HTML tables. They mirror the React DOM components, but use Svelte component composition and props throughout:</p><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span><span class="punctuation">></span></span><span class="script"><span class="language-javascript">
+<link rel="preload" as="image" href="/inspector.webp"><link rel="preload" as="image" href="/partykit.gif"><link rel="preload" as="image" href="/ui-react-dom.webp"><link rel="preload" as="image" href="/store-inspector.webp"><link rel="preload" as="image" href="/car-analysis.webp"><link rel="preload" as="image" href="/movie-database.webp"><nav><ul><li><a href="/">TinyBase</a></li><li><a href="/guides/">Guides</a></li><li><a href="/guides/releases/">Releases</a></li></ul></nav><section class="s1" id="/guides/releases/" data-id="R"><h1>Releases</h1><p>This is a reverse chronological list of the major TinyBase releases, with highlighted features.</p><hr><h2 id="v8-2">v8.2</h2><h3 id="svelte-dom-components-and-inspector">Svelte DOM Components And Inspector</h3><p>This release completes TinyBase&#x27;s Svelte support with two new additions: the <a href="/api/ui-svelte-dom/"><code>ui-svelte-dom</code></a> module and the <a href="/api/ui-svelte-inspector/"><code>ui-svelte-inspector</code></a> module.</p><p>The <a href="/api/ui-svelte-dom/"><code>ui-svelte-dom</code></a> module provides browser-ready Svelte components for rendering and editing TinyBase data as HTML tables. They mirror the React DOM components, but use Svelte component composition and props throughout:</p><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span><span class="punctuation">></span></span><span class="script"><span class="language-javascript">
   <span class="keyword">import</span> <span class="punctuation">{</span>createStore<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase'</span><span class="punctuation">;</span>
   <span class="keyword">import</span> <span class="punctuation">{</span>TableInHtmlTable<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/ui-svelte-dom'</span><span class="punctuation">;</span>
 
@@ -9,7 +9,7 @@
 </span></span><span class="tag"><span class="tag"><span class="punctuation">&lt;/</span>script</span><span class="punctuation">></span></span>
 
 <span class="tag"><span class="tag"><span class="punctuation">&lt;</span>TableInHtmlTable</span> <span class="attr-name">tableId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">"</span>pets<span class="punctuation">"</span></span> <span class="language-javascript"><span class="punctuation">{</span>store<span class="punctuation">}</span></span> <span class="attr-name">editable</span> <span class="punctuation">/></span></span>
-</code></pre><p>Alongside the table components, the new <code>ui-svelte-inspector</code> module brings the TinyBase development inspector to Svelte apps too, making it easy to inspect and edit Stores, <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a>, <a href="/api/relationships/interfaces/relationships/relationships/"><code>Relationships</code></a>, and <a href="/api/queries/interfaces/queries/queries/"><code>Queries</code></a> during development:</p><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span><span class="punctuation">></span></span><span class="script"><span class="language-javascript">
+</code></pre><p>Alongside the table components, the new <a href="/api/ui-svelte-inspector/"><code>ui-svelte-inspector</code></a> module brings the TinyBase development inspector to Svelte apps too, making it easy to inspect and edit Stores, <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a>, <a href="/api/relationships/interfaces/relationships/relationships/"><code>Relationships</code></a>, and <a href="/api/queries/interfaces/queries/queries/"><code>Queries</code></a> during development:</p><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span><span class="punctuation">></span></span><span class="script"><span class="language-javascript">
   <span class="keyword">import</span> <span class="punctuation">{</span>createStore<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase'</span><span class="punctuation">;</span>
   <span class="keyword">import</span> <span class="punctuation">{</span>Provider<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/ui-svelte'</span><span class="punctuation">;</span>
   <span class="keyword">import</span> <span class="punctuation">{</span>Inspector<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/ui-svelte-inspector'</span><span class="punctuation">;</span>
@@ -22,7 +22,7 @@
 <span class="tag"><span class="tag"><span class="punctuation">&lt;</span>Provider</span> <span class="language-javascript"><span class="punctuation">{</span>store<span class="punctuation">}</span></span><span class="punctuation">></span></span>
   <span class="tag"><span class="tag"><span class="punctuation">&lt;</span>Inspector</span> <span class="punctuation">/></span></span>
 <span class="tag"><span class="tag"><span class="punctuation">&lt;/</span>Provider</span><span class="punctuation">></span></span>
-</code></pre><p>Read more in the <a href="/guides/building-uis/using-svelte-dom-components/">Using Svelte DOM Components</a> guide and the <a href="/guides/inspecting-data/">Inspecting Data</a> guide, and explore the <a href="/demos/ui-components-svelte/">UI Components (Svelte)</a> demos to see the new modules in action.</p><h3 id="new-demos">New <a href="/demos/">Demos</a></h3><p>This release also adds a complete set of Svelte UI component demos, plus an Inspector demo, so you can see the new modules working across Stores, <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a>, <a href="/api/relationships/interfaces/relationships/relationships/"><code>Relationships</code></a>, <a href="/api/queries/interfaces/queries/queries/"><code>Queries</code></a>, and editable views.</p><p>These demos intentionally mirror the React set where possible, making it easier to compare implementation patterns across frameworks.</p><p>There are no intended breaking changes in this release. If you spot any issues with the new Svelte DOM components or the Svelte inspector, please let us know!</p><hr><h2 id="v8-1">v8.1</h2><h3 id="svelte-support">Svelte Support</h3><p>This highly-anticipated release introduces the new <a href="/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><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span><span class="punctuation">></span></span><span class="script"><span class="language-javascript">
+</code></pre><p>Read more in the <a href="/guides/building-uis/using-svelte-dom-components/">Using Svelte DOM Components</a> guide and the <a href="/guides/inspecting-data/">Inspecting Data</a> guide.</p><h3 id="new-demos">New <a href="/demos/">Demos</a></h3><p>This release also adds a complete set of Svelte UI component demos, plus an Inspector demo, so you can see the new modules working across Stores, <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a>, <a href="/api/relationships/interfaces/relationships/relationships/"><code>Relationships</code></a>, <a href="/api/queries/interfaces/queries/queries/"><code>Queries</code></a>, and editable views.</p><p>These demos intentionally mirror the React set where possible, making it easier to compare implementation patterns across frameworks.</p><p>There are no intended breaking changes in this release. If you spot any issues with the new Svelte DOM components or the Svelte inspector, please let us know!</p><hr><h2 id="v8-1">v8.1</h2><h3 id="svelte-support">Svelte Support</h3><p>This highly-anticipated release introduces the new <a href="/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><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span><span class="punctuation">></span></span><span class="script"><span class="language-javascript">
   <span class="keyword">import</span> <span class="punctuation">{</span>createStore<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase'</span><span class="punctuation">;</span>
   <span class="keyword">import</span> <span class="punctuation">{</span>getCell<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/ui-svelte'</span><span class="punctuation">;</span>