[docs] Home & readme

Author: jamesgpearce

docs/guides/releases/article.html

@@ -1,4 +1,28 @@
-<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-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">
+<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">
+  <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>
+
+  <span class="keyword">const</span> store <span class="operator">=</span> <span class="function"><a href="/api/the-essentials/creating-stores/createstore/">createStore</a></span><span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="function"><a href="/api/store/interfaces/store/store/methods/setter/settable/">setTable</a></span><span class="punctuation">(</span><span class="string">'pets'</span><span class="punctuation">,</span> <span class="punctuation">{</span>
+    <span class="literal-property">fido</span><span class="operator">:</span> <span class="punctuation">{</span><span class="literal-property">species</span><span class="operator">:</span> <span class="string">'dog'</span><span class="punctuation">,</span> <span class="literal-property">color</span><span class="operator">:</span> <span class="string">'brown'</span><span class="punctuation">}</span><span class="punctuation">,</span>
+    <span class="literal-property">felix</span><span class="operator">:</span> <span class="punctuation">{</span><span class="literal-property">species</span><span class="operator">:</span> <span class="string">'cat'</span><span class="punctuation">,</span> <span class="literal-property">color</span><span class="operator">:</span> <span class="string">'black'</span><span class="punctuation">}</span><span class="punctuation">,</span>
+  <span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">;</span>
+</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">
+  <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>
+
+  <span class="keyword">const</span> store <span class="operator">=</span> <span class="function"><a href="/api/the-essentials/creating-stores/createstore/">createStore</a></span><span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="function"><a href="/api/store/interfaces/store/store/methods/setter/settable/">setTable</a></span><span class="punctuation">(</span><span class="string">'pets'</span><span class="punctuation">,</span> <span class="punctuation">{</span>
+    <span class="literal-property">fido</span><span class="operator">:</span> <span class="punctuation">{</span><span class="literal-property">species</span><span class="operator">:</span> <span class="string">'dog'</span><span class="punctuation">}</span><span class="punctuation">,</span>
+  <span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">;</span>
+</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>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">
   <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>