v5.3.6

Author: jamesgpearce

coverage.json

@@ -1 +1 @@
-{"tests":7456,"assertions":33177,"lines":{"total":2285,"covered":2285,"skipped":0,"pct":100},"statements":{"total":2466,"covered":2466,"skipped":0,"pct":100},"functions":{"total":985,"covered":985,"skipped":0,"pct":100},"branches":{"total":853,"covered":853,"skipped":0,"pct":100},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}
+{"tests":7456,"assertions":33181,"lines":{"total":2284,"covered":2284,"skipped":0,"pct":100},"statements":{"total":2465,"covered":2465,"skipped":0,"pct":100},"functions":{"total":985,"covered":985,"skipped":0,"pct":100},"branches":{"total":851,"covered":851,"skipped":0,"pct":100},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}

docs/assets/genres.tsv

@@ -1,17 +1,17 @@
 id	name
-1	Drama
-2	Comedy
-3	Family
-4	Romance
-5	Animation
-6	Fantasy
-7	Western
-8	Thriller
-9	Adventure
-10	Action
-11	Horror
-12	Crime
-13	Music
-14	History
-15	Science Fiction
-16	Mystery
+g01	Drama
+g02	Comedy
+g03	Family
+g04	Romance
+g05	Animation
+g06	Fantasy
+g07	Western
+g08	Thriller
+g09	Adventure
+g10	Action
+g11	Horror
+g12	Crime
+g13	Music
+g14	History
+g15	Science Fiction
+g16	Mystery

docs/assets/movies.tsv

@@ -1,11 +1,11 @@
-<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li><li><a href="/demos/ui-components/">UI Components</a></li><li><a href="/demos/ui-components/editablecellview/">&lt;EditableCellView /&gt;</a></li></ul></nav><section class="s1" id="/demos/ui-components/editablecellview/" data-id="&lt;ECV"><h1>&lt;EditableCellView /&gt;</h1><iframe srcdoc="&lt;html&gt;&lt;head&gt;&lt;script src=&quot;/umd/react.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase/index.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase/ui-react/index.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase/ui-react-dom/index.js&quot;&gt;&lt;/script&gt;&lt;style&gt;#loading{animation:spin 1s infinite linear;height:2rem;margin:40vh auto;width:2rem}#loading::before{content:url(&#x27;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;2rem&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;path d=&quot;M50 10A40 40 0 1 1 10 50&quot; stroke=&quot;black&quot; fill=&quot;none&quot; stroke-width=&quot;4&quot; /&gt;&lt;/svg&gt;&#x27;)}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@font-face{font-family:Inter;src:url(https://tinybase.org/fonts/inter.woff2) format(&#x27;woff2&#x27;)}*{box-sizing:border-box}body{align-items:flex-start;color:#333;display:flex;font-family:Inter,sans-serif;font-size:.8rem;min-height:100vh;justify-content:space-around;letter-spacing:-.04rem;line-height:1.5rem;margin:0;user-select:none}table{background:#fff;border-collapse:collapse;box-shadow:0 0 1rem #0004;font-size:inherit;line-height:inherit;margin:2rem;table-layout:fixed}table td,table th{overflow:hidden;padding:.25rem .5rem;white-space:nowrap;border-width:1px 0;border-style:solid;border-color:#eee;text-align:left}table thead th{border-bottom-color:#ccc}table button,table input{border:1px solid #ccc}a{color:inherit}#edit{align-self:flex-start;background:#fff;box-shadow:0 0 1rem #0004;margin:2rem;min-width:16rem;padding:.5rem 1rem 1rem}.editableCell button{width:4rem;margin-right:.5rem}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;script&gt;(()=&gt;{let l=React.createElement,n=TinyBase.createStore,{Provider:s,useCreateStore:i}=TinyBaseUiReact,{EditableCellView:e,TableInHtmlTable:t}=TinyBaseUiReactDom,{useMemo:r,useState:d}=React,a=()=&gt;{let e=i(n),[t,a]=d(!0);return r(async()=&gt;{await b(e,&quot;genres&quot;),a(!1)},[]),l(s,{store:e},l(t?o:c,null))},o=(addEventListener(&quot;load&quot;,()=&gt;ReactDOM.createRoot(document.body).render(l(a,null))),()=&gt;l(&quot;div&quot;,{id:&quot;loading&quot;})),c=()=&gt;l(React.Fragment,null,l(t,{tableId:&quot;genres&quot;,editable:!0}),l(&quot;div&quot;,{id:&quot;edit&quot;},&quot;Genre 5 name:&quot;,l(e,{tableId:&quot;genres&quot;,rowId:&quot;5&quot;,cellId:&quot;name&quot;}))),h=/^[\d\.]+$/,b=async(l,n)=&gt;{l.startTransaction();let e=(await(await fetch(`https://tinybase.org/assets/${n}.tsv`)).text()).split(`
-`),s=e.shift().split(&quot;\t&quot;);e.forEach(e=&gt;{e=e.split(&quot;\t&quot;);if(e.length==s.length){let a=e.shift();e.forEach((e,t)=&gt;{&quot;&quot;!=e&amp;&amp;(h.test(e)&amp;&amp;(e=parseFloat(e)),l.setCell(n,a,s[t+1],e))})}}),l.finishTransaction()}})()&lt;/script&gt;&lt;/html&gt;"></iframe><p>In this demo, we showcase the <a href="/api/ui-react-dom/functions/store-components/editablecellview/"><code>EditableCellView</code></a> component, which allows you to edit <a href="/api/store/type-aliases/store/cell/"><code>Cell</code></a> values in the <a href="/api/store/interfaces/store/store/"><code>Store</code></a> in a web environment.</p><p>Rather than building the whole demo and boilerplate from scratch, we&#x27;re making changes to the <a href="/demos/ui-components/tableinhtmltable/">&lt;TableInHtmlTable /&gt;</a> demo to show this new component.</p><h3 id="set-up">Set Up</h3><p>We start off by simply adding the component to the imports:</p><pre><code><span class="deleted-sign"><span class="prefix">-</span><span class="keyword">const</span> <span class="punctuation">{</span>TableInHtmlTable<span class="punctuation">}</span> <span class="operator">=</span> TinyBaseUiReactDom<span class="punctuation">;</span>
+<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li><li><a href="/demos/ui-components/">UI Components</a></li><li><a href="/demos/ui-components/editablecellview/">&lt;EditableCellView /&gt;</a></li></ul></nav><section class="s1" id="/demos/ui-components/editablecellview/" data-id="&lt;ECV"><h1>&lt;EditableCellView /&gt;</h1><iframe srcdoc="&lt;html&gt;&lt;head&gt;&lt;script src=&quot;/umd/react.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase/index.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase/ui-react/index.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase/ui-react-dom/index.js&quot;&gt;&lt;/script&gt;&lt;style&gt;#loading{animation:spin 1s infinite linear;height:2rem;margin:40vh auto;width:2rem}#loading::before{content:url(&#x27;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;2rem&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;path d=&quot;M50 10A40 40 0 1 1 10 50&quot; stroke=&quot;black&quot; fill=&quot;none&quot; stroke-width=&quot;4&quot; /&gt;&lt;/svg&gt;&#x27;)}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@font-face{font-family:Inter;src:url(https://tinybase.org/fonts/inter.woff2) format(&#x27;woff2&#x27;)}*{box-sizing:border-box}body{align-items:flex-start;color:#333;display:flex;font-family:Inter,sans-serif;font-size:.8rem;min-height:100vh;justify-content:space-around;letter-spacing:-.04rem;line-height:1.5rem;margin:0;user-select:none}table{background:#fff;border-collapse:collapse;box-shadow:0 0 1rem #0004;font-size:inherit;line-height:inherit;margin:2rem;table-layout:fixed}table td,table th{overflow:hidden;padding:.25rem .5rem;white-space:nowrap;border-width:1px 0;border-style:solid;border-color:#eee;text-align:left}table thead th{border-bottom-color:#ccc}table button,table input{border:1px solid #ccc}a{color:inherit}#edit{align-self:flex-start;background:#fff;box-shadow:0 0 1rem #0004;margin:2rem;min-width:16rem;padding:.5rem 1rem 1rem}.editableCell button{width:4rem;margin-right:.5rem}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;script&gt;(()=&gt;{let l=React.createElement,n=TinyBase.createStore,{Provider:s,useCreateStore:i}=TinyBaseUiReact,{EditableCellView:e,TableInHtmlTable:t}=TinyBaseUiReactDom,{useMemo:r,useState:d}=React,a=()=&gt;{let e=i(n),[t,a]=d(!0);return r(async()=&gt;{await h(e,&quot;genres&quot;),a(!1)},[]),l(s,{store:e},l(t?o:c,null))},o=(addEventListener(&quot;load&quot;,()=&gt;ReactDOM.createRoot(document.body).render(l(a,null))),()=&gt;l(&quot;div&quot;,{id:&quot;loading&quot;})),c=()=&gt;l(React.Fragment,null,l(t,{tableId:&quot;genres&quot;,editable:!0}),l(&quot;div&quot;,{id:&quot;edit&quot;},&quot;Genre 5 name:&quot;,l(e,{tableId:&quot;genres&quot;,rowId:&quot;g05&quot;,cellId:&quot;name&quot;}))),g=/^[\d\.]+$/,h=async(l,n)=&gt;{l.startTransaction();let e=(await(await fetch(`https://tinybase.org/assets/${n}.tsv`)).text()).split(`
+`),s=e.shift().split(&quot;\t&quot;);e.forEach(e=&gt;{e=e.split(&quot;\t&quot;);if(e.length==s.length){let a=e.shift();e.forEach((e,t)=&gt;{&quot;&quot;!=e&amp;&amp;(g.test(e)&amp;&amp;(e=parseFloat(e)),l.setCell(n,a,s[t+1],e))})}}),l.finishTransaction()}})()&lt;/script&gt;&lt;/html&gt;"></iframe><p>In this demo, we showcase the <a href="/api/ui-react-dom/functions/store-components/editablecellview/"><code>EditableCellView</code></a> component, which allows you to edit <a href="/api/store/type-aliases/store/cell/"><code>Cell</code></a> values in the <a href="/api/store/interfaces/store/store/"><code>Store</code></a> in a web environment.</p><p>Rather than building the whole demo and boilerplate from scratch, we&#x27;re making changes to the <a href="/demos/ui-components/tableinhtmltable/">&lt;TableInHtmlTable /&gt;</a> demo to show this new component.</p><h3 id="set-up">Set Up</h3><p>We start off by simply adding the component to the imports:</p><pre><code><span class="deleted-sign"><span class="prefix">-</span><span class="keyword">const</span> <span class="punctuation">{</span>TableInHtmlTable<span class="punctuation">}</span> <span class="operator">=</span> TinyBaseUiReactDom<span class="punctuation">;</span>
 </span><span class="inserted-sign"><span class="prefix">+</span><span class="keyword">const</span> <span class="punctuation">{</span>EditableCellView<span class="punctuation">,</span> TableInHtmlTable<span class="punctuation">}</span> <span class="operator">=</span> TinyBaseUiReactDom<span class="punctuation">;</span>
 </span></code></pre><h3 id="using-the-editablecellview-component">Using the <a href="/api/ui-react-dom/functions/store-components/editablecellview/"><code>EditableCellView</code></a> Component</h3><p>The <a href="/api/ui-react-dom/functions/store-components/editablecellview/"><code>EditableCellView</code></a> component simply needs a tableId, rowId, and cellId to render the <a href="/api/store/type-aliases/store/cell/"><code>Cell</code></a> and make it editable. We replace two of the tables from the original demo to add the control:</p><pre><code><span class="deleted-sign"><span class="prefix">-</span>      <span class="tag"><span class="tag"><span class="punctuation">&lt;</span><span class="class-name"><a href="/api/ui-react-dom/functions/store-components/tableinhtmltable/">TableInHtmlTable</a></span></span> <span class="attr-name">tableId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>genres<span class="punctuation">'</span></span> <span class="attr-name">headerRow</span><span class="script"><span class="script-punctuation">=</span><span class="punctuation">{</span><span class="boolean">false</span><span class="punctuation">}</span></span> <span class="attr-name">idColumn</span><span class="script"><span class="script-punctuation">=</span><span class="punctuation">{</span><span class="boolean">false</span><span class="punctuation">}</span></span> <span class="punctuation">/></span></span>
 <span class="prefix">-</span>      <span class="tag"><span class="tag"><span class="punctuation">&lt;</span><span class="class-name"><a href="/api/ui-react-dom/functions/store-components/tableinhtmltable/">TableInHtmlTable</a></span></span> <span class="attr-name">tableId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>genres<span class="punctuation">'</span></span> <span class="attr-name">customCells</span><span class="script"><span class="script-punctuation">=</span><span class="punctuation">{</span>customCells<span class="punctuation">}</span></span> <span class="punctuation">/></span></span>
 </span><span class="inserted-sign"><span class="prefix">+</span>     <span class="tag"><span class="tag"><span class="punctuation">&lt;</span>div</span> <span class="attr-name">id</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>edit<span class="punctuation">'</span></span><span class="punctuation">></span></span><span class="plain-text">
 <span class="prefix">+</span>       Genre 5 name:
-<span class="prefix">+</span>       </span><span class="tag"><span class="tag"><span class="punctuation">&lt;</span><span class="class-name"><a href="/api/ui-react-dom/functions/store-components/editablecellview/">EditableCellView</a></span></span> <span class="attr-name">tableId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>genres<span class="punctuation">'</span></span> <span class="attr-name">rowId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>5<span class="punctuation">'</span></span> <span class="attr-name">cellId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>name<span class="punctuation">'</span></span> <span class="punctuation">/></span></span><span class="plain-text">
+<span class="prefix">+</span>       </span><span class="tag"><span class="tag"><span class="punctuation">&lt;</span><span class="class-name"><a href="/api/ui-react-dom/functions/store-components/editablecellview/">EditableCellView</a></span></span> <span class="attr-name">tableId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>genres<span class="punctuation">'</span></span> <span class="attr-name">rowId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>g05<span class="punctuation">'</span></span> <span class="attr-name">cellId</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">'</span>name<span class="punctuation">'</span></span> <span class="punctuation">/></span></span><span class="plain-text">
 <span class="prefix">+</span>     </span><span class="tag"><span class="tag"><span class="punctuation">&lt;/</span>div</span><span class="punctuation">></span></span>
 </span><span class="unchanged"><span class="prefix"> </span>    <span class="tag"><span class="tag"><span class="punctuation">&lt;/</span></span><span class="punctuation">></span></span>
 <span class="prefix"> </span>  <span class="punctuation">)</span><span class="punctuation">;</span>