natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
natxocc
2026-03-22 01:20:35 +01:00
parent 36b853a673
commit 99c5625b43
38 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/$.html
View File

@@ -45,7 +45,7 @@
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Logs: Theme updated to: dark</span></span></code></pre></div><hr><h2 id="_5-summary-table-usage-guide" tabindex="-1">5. Summary Table: Usage Guide <a class="header-anchor" href="#_5-summary-table-usage-guide" aria-label="Permalink to &quot;5. Summary Table: Usage Guide&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Primitive</th><th style="text-align:left;">Logic Type</th><th style="text-align:left;">Returns Value?</th><th style="text-align:left;">Typical Use Case</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;">Static</td><td style="text-align:left;">Yes (Mutable)</td><td style="text-align:left;"><code>const $user = $(&quot;Guest&quot;)</code></td></tr><tr><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;">Read-only</td><td style="text-align:left;">Yes (Automatic)</td><td style="text-align:left;"><code>const $isLoggedIn = $(() =&gt; $user() !== &quot;Guest&quot;)</code></td></tr><tr><td style="text-align:left;"><strong>Effect</strong></td><td style="text-align:left;">Imperative</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() =&gt; localStorage.setItem(&#39;user&#39;, $user()))</code></td></tr></tbody></table><hr><h2 id="💡-pro-tip-naming-convention" tabindex="-1">💡 Pro Tip: Naming Convention <a class="header-anchor" href="#💡-pro-tip-naming-convention" aria-label="Permalink to &quot;💡 Pro Tip: Naming Convention&quot;">​</a></h2><p>In SigPro, we use the <strong><code>$</code> prefix</strong> (e.g., <code>$count</code>) for variables that hold a reactive function. This makes it easy to distinguish between a standard variable and a reactive one at a glance:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Static</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Reactive (Function)</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/quick.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Quick Start</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/html.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$.html</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"Ch1qUgrw\",\"guide_getting-started.md\":\"RUz_X0AL\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BX4IouPL\",\"plugins_core.debug.md\":\"BRT_r6k8\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"CWklH7Gb\",\"plugins_core.storage.md\":\"lAkbO1ib\",\"plugins_core.ui.md\":\"DAV-GYyQ\",\"plugins_custom.md\":\"DZNaLrm0\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CtukKq_1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/html.html
View File

@@ -40,7 +40,7 @@
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;High Score!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Keep going...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="the-guillotine-performance-tip" tabindex="-1">The &quot;Guillotine&quot; (Performance Tip) <a class="header-anchor" href="#the-guillotine-performance-tip" aria-label="Permalink to &quot;The &quot;Guillotine&quot; (Performance Tip)&quot;">​</a></h3><p>When a reactive function in the content returns a <strong>new Node</strong>, SigPro uses <code>replaceWith()</code> to swap the old node for the new one. This ensures that:</p><ol><li>The update is nearly instantaneous.</li><li>The old node is correctly garbage-collected.</li></ol><hr><h2 id="_6-summary-content-types" tabindex="-1">6. Summary: Content Types <a class="header-anchor" href="#_6-summary-content-types" aria-label="Permalink to &quot;6. Summary: Content Types&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Input</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>String / Number</strong></td><td style="text-align:left;">Appended as a TextNode.</td></tr><tr><td style="text-align:left;"><strong>HTMLElement</strong></td><td style="text-align:left;">Appended directly to the parent.</td></tr><tr><td style="text-align:left;"><strong>Array</strong></td><td style="text-align:left;">Each item is processed and appended in order.</td></tr><tr><td style="text-align:left;"><strong>Function <code>() =&gt; ...</code></strong></td><td style="text-align:left;">Creates a <strong>live reactive zone</strong> that updates automatically.</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/$.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/mount.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$.mount</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"Ch1qUgrw\",\"guide_getting-started.md\":\"RUz_X0AL\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BX4IouPL\",\"plugins_core.debug.md\":\"BRT_r6k8\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"CWklH7Gb\",\"plugins_core.storage.md\":\"lAkbO1ib\",\"plugins_core.ui.md\":\"DAV-GYyQ\",\"plugins_custom.md\":\"DZNaLrm0\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CtukKq_1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/mount.html
View File

@@ -46,7 +46,7 @@
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myNode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Local Widget&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myNode, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#widget-target&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h3 id="summary-cheat-sheet" tabindex="-1">Summary Cheat Sheet <a class="header-anchor" href="#summary-cheat-sheet" aria-label="Permalink to &quot;Summary Cheat Sheet&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to ID</strong></td><td style="text-align:left;"><code>$.mount(App, &#39;#id&#39;)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to Element</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Reactive Widget</strong></td><td style="text-align:left;"><code>$.mount(() =&gt; div(&quot;Hi&quot;), &#39;#widget&#39;)</code></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/html.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.html</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/tags.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Tags</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"Ch1qUgrw\",\"guide_getting-started.md\":\"RUz_X0AL\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BX4IouPL\",\"plugins_core.debug.md\":\"BRT_r6k8\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"CWklH7Gb\",\"plugins_core.storage.md\":\"lAkbO1ib\",\"plugins_core.ui.md\":\"DAV-GYyQ\",\"plugins_custom.md\":\"DZNaLrm0\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CtukKq_1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/quick.html
View File

@@ -25,7 +25,7 @@
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Ok&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="_4-mounting-plugins" tabindex="-1">4. Mounting &amp; Plugins <a class="header-anchor" href="#_4-mounting-plugins" aria-label="Permalink to &quot;4. Mounting &amp; Plugins&quot;">​</a></h2><p>Methods to initialize your application and extend the engine.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Method</th><th style="text-align:left;">Signature</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>$.mount</code></strong></td><td style="text-align:left;"><code>(node, target)</code></td><td style="text-align:left;">Wipes the target (default: <code>body</code>) and renders the component.</td></tr><tr><td style="text-align:left;"><strong><code>$.plugin</code></strong></td><td style="text-align:left;"><code>(source)</code></td><td style="text-align:left;">Registers a function or loads external <code>.js</code> scripts as plugins.</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, Router]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-reactive-syntax-cheat-sheet" tabindex="-1">5. Reactive Syntax Cheat Sheet <a class="header-anchor" href="#_5-reactive-syntax-cheat-sheet" aria-label="Permalink to &quot;5. Reactive Syntax Cheat Sheet&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Syntax</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Text Binding</strong></td><td style="text-align:left;"><code>p([&quot;Value: &quot;, $sig])</code></td><td style="text-align:left;">Updates text content automatically.</td></tr><tr><td style="text-align:left;"><strong>Attributes</strong></td><td style="text-align:left;"><code>div({ id: $sig })</code></td><td style="text-align:left;">Static attribute assignment.</td></tr><tr><td style="text-align:left;"><strong>Reactive Attr</strong></td><td style="text-align:left;"><code>div({ $class: $sig })</code></td><td style="text-align:left;">Attribute updates when <code>$sig</code> changes.</td></tr><tr><td style="text-align:left;"><strong>Two-way Binding</strong></td><td style="text-align:left;"><code>input({ $value: $sig })</code></td><td style="text-align:left;">Syncs input value and signal automatically.</td></tr><tr><td style="text-align:left;"><strong>Conditional</strong></td><td style="text-align:left;"><code>div(() =&gt; $sig() &gt; 0 ? &quot;Yes&quot; : &quot;No&quot;)</code></td><td style="text-align:left;">Re-renders only the content when the condition changes.</td></tr></tbody></table><hr><h2 id="summary-table" tabindex="-1">Summary Table <a class="header-anchor" href="#summary-table" aria-label="Permalink to &quot;Summary Table&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">SigPro Approach</th><th style="text-align:left;">Benefit</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Update Logic</strong></td><td style="text-align:left;">Fine-grained (Surgical)</td><td style="text-align:left;">Blazing fast updates.</td></tr><tr><td style="text-align:left;"><strong>DOM</strong></td><td style="text-align:left;">Native Nodes</td><td style="text-align:left;">Zero abstraction cost.</td></tr><tr><td style="text-align:left;"><strong>Syntax</strong></td><td style="text-align:left;">Pure JavaScript</td><td style="text-align:left;">No build-tool lock-in.</td></tr><tr><td style="text-align:left;"><strong>Footprint</strong></td><td style="text-align:left;">Modular</td><td style="text-align:left;">Load only what you use.</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/guide/getting-started.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Guide</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/$.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"Ch1qUgrw\",\"guide_getting-started.md\":\"RUz_X0AL\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BX4IouPL\",\"plugins_core.debug.md\":\"BRT_r6k8\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"CWklH7Gb\",\"plugins_core.storage.md\":\"lAkbO1ib\",\"plugins_core.ui.md\":\"DAV-GYyQ\",\"plugins_custom.md\":\"DZNaLrm0\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CtukKq_1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

6
docs/api/tags.html
View File

@@ -13,7 +13,7 @@
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
<link rel="modulepreload" href="/sigpro/assets/api_tags.md.bOhL_sXH.lean.js">
<link rel="modulepreload" href="/sigpro/assets/api_tags.md.Ch1qUgrw.lean.js">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
@@ -41,7 +41,7 @@
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;hero&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fast. Atomic. Simple.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Built with SigPro.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span></code></pre></div><hr><h2 id="_6-full-comparison-sigpro-vs-standard-html" tabindex="-1">6. Full Comparison: SigPro vs. Standard HTML <a class="header-anchor" href="#_6-full-comparison-sigpro-vs-standard-html" aria-label="Permalink to &quot;6. Full Comparison: SigPro vs. Standard HTML&quot;">​</a></h2><p>To better understand the translation, here is a complete example of a <strong>User Card</strong> component. Notice how <strong>SigPro</strong> attributes with the <code>$</code> prefix map to reactive behavior, while standard attributes remain static.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Z53-s" id="tab-yaQU48e" checked><label data-title="SigPro (JS)" for="tab-yaQU48e">SigPro (JS)</label><input type="radio" name="group-Z53-s" id="tab-9unLkL1"><label data-title="Equivalent HTML Structure" for="tab-9unLkL1">Equivalent HTML Structure</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $online</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span></code></pre></div><hr><h2 id="_6-full-comparison-sigpro-vs-standard-html" tabindex="-1">6. Full Comparison: SigPro vs. Standard HTML <a class="header-anchor" href="#_6-full-comparison-sigpro-vs-standard-html" aria-label="Permalink to &quot;6. Full Comparison: SigPro vs. Standard HTML&quot;">​</a></h2><p>To better understand the translation, here is a complete example of a <strong>User Card</strong> component. Notice how <strong>SigPro</strong> attributes with the <code>$</code> prefix map to reactive behavior, while standard attributes remain static.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-0LmsX" id="tab-6Sl0zYV" checked><label data-title="SigPro (JS)" for="tab-6Sl0zYV">SigPro (JS)</label><input type="radio" name="group-0LmsX" id="tab-LBRgFCJ"><label data-title="Equivalent HTML Structure" for="tab-LBRgFCJ">Equivalent HTML Structure</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $online</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserCard</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user-card&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
@@ -73,7 +73,7 @@
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Toggle Status&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div><h3 id="what-is-happening-here" tabindex="-1">What is happening here? <a class="header-anchor" href="#what-is-happening-here" aria-label="Permalink to &quot;What is happening here?&quot;">​</a></h3><ol><li><strong>Structure:</strong> The hierarchy is identical. <code>div([...])</code> in JS translates directly to nested tags in HTML.</li><li><strong>Attributes:</strong> <code>class</code> is set once. <code>$class</code> is &quot;live&quot;; SigPro listens to the <code>$online</code> signal and updates the class name without re-rendering the whole card.</li><li><strong>Content:</strong> The array <code>[...]</code> in SigPro is the equivalent of the children inside an HTML tag.</li><li><strong>Reactivity:</strong> The function <code>() =&gt; $online() ? ...</code> creates a <strong>TextNode</strong> in the HTML that changes its text content surgically whenever the signal toggles.</li></ol><hr><h2 id="💡-best-practices" tabindex="-1">💡 Best Practices <a class="header-anchor" href="#💡-best-practices" aria-label="Permalink to &quot;💡 Best Practices&quot;">​</a></h2><ol><li><strong>Destructuring:</strong> If you prefer not to rely on global variables, you can destructure them from <code>window</code> or <code>$</code> (though in SigPro, using them globally is the intended &quot;clean&quot; way).</li><li><strong>Custom Tags:</strong> If you need a tag that isn&#39;t in the default list (like a Web Component), you can still use the base engine: <code>$.html(&#39;my-custom-element&#39;, { ... })</code>.</li></ol></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/mount.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.mount</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/plugins/quick.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Quick Start</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"Ch1qUgrw\",\"guide_getting-started.md\":\"RUz_X0AL\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BX4IouPL\",\"plugins_core.debug.md\":\"BRT_r6k8\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"CWklH7Gb\",\"plugins_core.storage.md\":\"lAkbO1ib\",\"plugins_core.ui.md\":\"DAV-GYyQ\",\"plugins_custom.md\":\"DZNaLrm0\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CtukKq_1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>