You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<nav><ul><li><ahref="/">TinyBase</a></li><li><ahref="/demos/">Demos</a></li><li><ahref="/demos/hello-world/">Hello World</a></li><li><ahref="/demos/hello-world/hello-world-v5/">Hello World v5</a></li></ul></nav><sectionclass="s1" id="/demos/hello-world/hello-world-v5/" data-id="HW6"><h1>Hello World v5</h1><iframesrcdoc="<html><head><script type="importmap">{
if (compiled.css?.code != null && !cssPaths.has(path)) {
62
+
style.textContent += compiled.css.code;
63
+
cssPaths.add(path);
64
+
}
65
+
code = compiled.js.code;
66
+
}
67
+
code = await rewriteImports(code, path);
68
+
return URL.createObjectURL(
69
+
new Blob([code], {type: 'text/javascript'}),
70
+
);
71
+
})();
72
+
moduleUrls.set(path, promise);
73
+
return promise;
74
+
};
75
+
76
+
buildModule("src/main.js")
77
+
.then((url) => import(url))
78
+
.catch((error) => {
79
+
document.body.innerHTML =
80
+
'<pre>' +
81
+
String(error?.stack ?? error)
82
+
.replace(/&/g, '&amp;')
83
+
.replace(/</g, '&lt;')
84
+
.replace(/>/g, '&gt;') +
85
+
'</pre>';
86
+
});</script></html>"></iframe><p>In this demo, we use Svelte to render data in the Store object and then change the Cell to see the display update. We're making changes to the <ahref="/demos/hello-world/hello-world-v4/">Hello World v4</a> demo.</p><p>We swap the React imports for Svelte and the TinyBase Svelte module:</p><pre><code><spanclass="unchanged"><spanclass="prefix"></span><spanclass="tag"><spanclass="tag"><spanclass="punctuation"><</span>script</span><spanclass="attr-name">type</span><spanclass="attr-value"><spanclass="punctuation">=</span><spanclass="punctuation">"</span>importmap<spanclass="punctuation">"</span></span><spanclass="punctuation">></span></span>
</span></code></pre><p>The main entry point no longer needs the React imports:</p><pre><code><spanclass="unchanged"><spanclass="prefix"></span><spanclass="keyword">import</span><spanclass="punctuation">{</span>createStore<spanclass="punctuation">}</span><spanclass="keyword">from</span><spanclass="string">'tinybase'</span><spanclass="punctuation">;</span>
</span></code></pre><p>Instead of rendering a React tree, we mount a Svelte component and pass the Store in as a prop:</p><pre><code><spanclass="deleted-sign"><spanclass="prefix">-</span><spanclass="function">createRoot</span><spanclass="punctuation">(</span>document<spanclass="punctuation">.</span>body<spanclass="punctuation">)</span><spanclass="punctuation">.</span><spanclass="function">render</span><spanclass="punctuation">(</span>
</span></code></pre><p>The Svelte component uses the Provider and CellView components from the ui-svelte module:</p><pre><code><spanclass="tag"><spanclass="tag"><spanclass="punctuation"><</span>script</span><spanclass="punctuation">></span></span><spanclass="script"><spanclass="language-javascript">
</code></pre><p>Unlike the React version, there is not yet a Svelte Inspector component, so this demo just focuses on the live-updating Cell itself.</p><p>Next, we will use a Metrics object to keep a count (and a rolling average) of the values in each Cell in a Store. Please continue to the <ahref="/demos/rolling-dice/averaging-dice-rolls/">Averaging Dice Rolls</a> demo.</p></section>
0 commit comments