-</code></pre><p>Read more in the <a href="/guides/building-uis-with-solid/using-solid-dom-components/">Using Solid DOM Components</a> guide and the <a href="/demos/ui-components-solid/inspector-solid/"><inspector>(Solid)</inspector></a>demo.</p><h2 id="new-solid-demos">New Solid <a href="/demos/">Demos</a></h2><p>This release also adds a complete set of Solid 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><img src="/shots/editablevalueview-solid-demo.png" alt="EditableValueView (Solid)" title="EditableValueView (Solid)"></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 Solid DOM components or the Solid inspector, please let us know!</p><hr><h1 id="v8-3">v8.3</h1><h2 id="solid-support">Solid Support</h2><p>This release adds the new <a href="/api/ui-solid/"><code>ui-solid</code></a> module, bringing TinyBase's reactive <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> bindings to Solid apps. It provides Solid primitives that return Accessor functions, listener primitives that clean up with Solid's lifecycle, Provider context helpers, and view components for rendering <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> data directly in a Solid component tree.</p><p>The primitives follow Solid's fine-grained reactivity model. They read TinyBase data immediately, then update the Accessor when the underlying <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> data changes:</p><pre><code><span class="keyword">const</span> solidStore <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/the-essentials/setting-data/setcell/">setCell</a></span><span class="punctuation">(</span><span class="string">'pets'</span><span class="punctuation">,</span> <span class="string">'fido'</span><span class="punctuation">,</span> <span class="string">'color'</span><span class="punctuation">,</span> <span class="string">'brown'</span><span class="punctuation">)</span><span class="punctuation">;</span>
0 commit comments