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-26 14:11:32 +01:00
parent 876874c2f0
commit 5ab0837400
26 changed files with 47 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/404.html
View File

@@ -17,7 +17,7 @@
</head>
<body>
<div id="app"></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/html.html
View File

@@ -43,7 +43,7 @@
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Is exactly equivalent to:</span></span>
<span class="line"><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;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wrapper&quot;</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;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ])</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/watch.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.watch</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/router.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$.router</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/mount.html
View File

@@ -35,7 +35,7 @@
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later, to remove the toast and kill its reactivity:</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><hr><h2 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></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code Pattern</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 CSS Selector</strong></td><td style="text-align:left;"><code>$.mount(App, &#39;#root&#39;)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to DOM Node</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Clean &amp; Re-mount</strong></td><td style="text-align:left;">Calling <code>$.mount</code> again on the same target</td></tr><tr><td style="text-align:left;"><strong>Total Saneamiento</strong></td><td style="text-align:left;"><code>const app = $.mount(App); app.destroy();</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/router.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.router</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_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

8
docs/api/quick.html
View File

File diff suppressed because one or more lines are too long

2
docs/api/router.html
View File

@@ -41,7 +41,7 @@
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> animation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: fadeIn </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ease-in</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></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/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_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/signal.html
View File

@@ -33,7 +33,7 @@
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Adds &quot;C&quot; using the previous state</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prev, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</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/watch.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$.watch</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/tags.html
View File

@@ -55,7 +55,7 @@
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, name)</span></span>
<span class="line"><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><table tabindex="0"><thead><tr><th style="text-align:left;">State (<code>$online</code>)</th><th style="text-align:left;">Rendered HTML</th><th style="text-align:left;">Memory Management</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>true</code></strong></td><td style="text-align:left;"><code>&lt;div class=&quot;flex...&quot;&gt;&lt;span class=&quot;w-3...&quot;&gt;&lt;/span&gt;&lt;p class=&quot;text-bold&quot;&gt;John&lt;/p&gt;&lt;/div&gt;</code></td><td style="text-align:left;">Watcher active</td></tr><tr><td style="text-align:left;"><strong><code>false</code></strong></td><td style="text-align:left;"><code>&lt;div class=&quot;flex...&quot;&gt;&lt;span hidden class=&quot;w-3...&quot;&gt;&lt;/span&gt;&lt;p class=&quot;text-gray-400&quot;&gt;John&lt;/p&gt;&lt;/div&gt;</code></td><td style="text-align:left;">Attribute synced</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/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/ui/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_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/api/watch.html
View File

@@ -52,7 +52,7 @@
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This triggers only ONE re-run.</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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/signal.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/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_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

1
docs/assets/api_quick.md.4axUqmd3.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/api_quick.md.4axUqmd3.lean.js
View File

@@ -1 +0,0 @@
import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚡ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),d={name:"api/quick.md"};function o(i,t,s,r,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l("",11)])])}const u=e(d,[["render",o]]);export{f as __pageData,u as default};

1
docs/assets/api_quick.md.CVAmBRZF.js Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/assets/api_quick.md.CVAmBRZF.lean.js Normal file
View File

@@ -0,0 +1 @@
import{_ as e,o as a,c as n,ae as o}from"./chunks/framework.C8AWLET_.js";const h=JSON.parse('{"title":"⚡ Quick API Reference (V2)","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),l={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[o("",15)])])}const y=e(l,[["render",d]]);export{h as __pageData,y as default};

20
docs/assets/examples.md.Cy97nBRw.js
View File

@@ -1,20 +0,0 @@
import{_ as t,o as e,c as n,j as s,a as i,ae as l}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Live Playground","description":"","frontmatter":{},"headers":[],"relativePath":"examples.md","filePath":"examples.md"}'),h={name:"examples.md"};function p(k,a,r,d,o,E){return e(),n("div",null,[...a[0]||(a[0]=[s("h1",{id:"live-playground",tabindex:"-1"},[i("Live Playground "),s("a",{class:"header-anchor",href:"#live-playground","aria-label":'Permalink to "Live Playground"'},"​")],-1),s("p",null,[i("Experience "),s("strong",null,"SigPro's"),i(" fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!")],-1),s("iframe",{width:"100%",height:"600",src:"//jsfiddle.net/natxocc/spwran02/4/embedded/",frameborder:"0",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},null,-1),l(` \`\`\` <hr><h3 id="_2-best-practices-for-documentation" tabindex="-1">2. Best Practices for Documentation <a class="header-anchor" href="#_2-best-practices-for-documentation" aria-label="Permalink to &quot;2. Best Practices for Documentation&quot;">​</a></h3><ul><li><strong>Tab Selection:</strong> You can control which tabs are active by default by changing the URL segment after <code>/embedded/</code>. <ul><li><code>js,result</code>: Shows the logic and the output.</li><li><code>html,js,result</code>: Shows the base structure, the logic, and the output.</li></ul></li><li><strong>Height Management:</strong> For complex Store examples, increase the <code>height</code> attribute to <code>500</code> or <code>600</code> so the code is readable without internal scrolling.</li><li><strong>Responsive Width:</strong> Keeping <code>width=&quot;100%&quot;</code> ensures the fiddle scales correctly on tablets and mobile devices.</li></ul><hr><h3 id="_3-advanced-the-fiddle-component-optional" tabindex="-1">3. Advanced: The &quot;Fiddle&quot; Component (Optional) <a class="header-anchor" href="#_3-advanced-the-fiddle-component-optional" aria-label="Permalink to &quot;3. Advanced: The &quot;Fiddle&quot; Component (Optional)&quot;">​</a></h3><p>If you plan to have 10+ examples, you can create a global Vue component in VitePress. This keeps your Markdown files clean and allows you to change the theme or default height for all fiddles at once.</p><p><strong>Create <code>.vitepress/theme/components/Fiddle.vue</code>:</strong></p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</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:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fiddle-wrapper&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</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;">iframe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100%&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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;\`//jsfiddle.net/natxocc/\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/embedded/\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">tabs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/dark/\`&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> frameborder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lazy&quot;</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;">iframe</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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: String, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// e.g., &quot;spwran02/4&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: { default: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;400&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tabs: { default: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;js,result&#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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Usage in Markdown:</strong></p><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</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;">Check out this store example:</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Fiddle</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;spwran02/4&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><hr><h3 id="why-this-is-perfect-for-sigpro" tabindex="-1">Why this is perfect for SigPro: <a class="header-anchor" href="#why-this-is-perfect-for-sigpro" aria-label="Permalink to &quot;Why this is perfect for SigPro:&quot;">​</a></h3><p>Because SigPro is <strong>zero-dependency</strong> and runs directly in the browser, your JSFiddle code will be exactly what the user copies into their own <code>index.html</code>. There is no hidden &quot;build step&quot; confusing the learner.</p>`,14)])])}const y=t(h,[["render",p]]);export{c as __pageData,y as default};

1
docs/assets/examples.md.Cy97nBRw.lean.js
View File

@@ -1 +0,0 @@
import{_ as t,o as e,c as n,j as s,a as i,ae as l}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Live Playground","description":"","frontmatter":{},"headers":[],"relativePath":"examples.md","filePath":"examples.md"}'),h={name:"examples.md"};function p(k,a,r,d,o,E){return e(),n("div",null,[...a[0]||(a[0]=[s("h1",{id:"live-playground",tabindex:"-1"},[i("Live Playground "),s("a",{class:"header-anchor",href:"#live-playground","aria-label":'Permalink to "Live Playground"'},"​")],-1),s("p",null,[i("Experience "),s("strong",null,"SigPro's"),i(" fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!")],-1),s("iframe",{width:"100%",height:"600",src:"//jsfiddle.net/natxocc/spwran02/4/embedded/",frameborder:"0",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},null,-1),l("",14)])])}const y=t(h,[["render",p]]);export{c as __pageData,y as default};

4
docs/assets/install.md.C0utklUK.js → docs/assets/install.md.D5NkNmWr.js
View File

@@ -1,11 +1,11 @@
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="installation-setup" tabindex="-1">Installation &amp; Setup <a class="header-anchor" href="#installation-setup" aria-label="Permalink to &quot;Installation &amp; Setup&quot;">​</a></h1><p>SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to &quot;1. Installation&quot;">​</a></h2><p>Choose the method that best fits your workflow:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-rjoRp" id="tab-Bv7ZohN" checked><label data-title="npm" for="tab-Bv7ZohN">npm</label><input type="radio" name="group-rjoRp" id="tab-x3eVtcx"><label data-title="pnpm" for="tab-x3eVtcx">pnpm</label><input type="radio" name="group-rjoRp" id="tab--Uj8i8-"><label data-title="yarn" for="tab--Uj8i8-">yarn</label><input type="radio" name="group-rjoRp" id="tab-3TcO2BR"><label data-title="bun" for="tab-3TcO2BR">bun</label><input type="radio" name="group-rjoRp" id="tab-bK77GMA"><label data-title="CDN (ESM)" for="tab-bK77GMA">CDN (ESM)</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;module&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="installation-setup" tabindex="-1">Installation &amp; Setup <a class="header-anchor" href="#installation-setup" aria-label="Permalink to &quot;Installation &amp; Setup&quot;">​</a></h1><p>SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to &quot;1. Installation&quot;">​</a></h2><p>Choose the method that best fits your workflow:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-9As_h" id="tab-KhSMnCb" checked><label data-title="npm" for="tab-KhSMnCb">npm</label><input type="radio" name="group-9As_h" id="tab-GADWVCN"><label data-title="pnpm" for="tab-GADWVCN">pnpm</label><input type="radio" name="group-9As_h" id="tab-p1u12XM"><label data-title="yarn" for="tab-p1u12XM">yarn</label><input type="radio" name="group-9As_h" id="tab-vvadHd5"><label data-title="bun" for="tab-vvadHd5">bun</label><input type="radio" name="group-9As_h" id="tab-8KkCP1L"><label data-title="CDN (ESM)" for="tab-8KkCP1L">CDN (ESM)</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;module&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Import the core and UI components</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://cdn.jsdelivr.net/npm/sigpro@latest/+esm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm&#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>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Initialize UI components globally</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UI</span><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;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div><hr><h2 id="_2-quick-start-examples" tabindex="-1">2. Quick Start Examples <a class="header-anchor" href="#_2-quick-start-examples" aria-label="Permalink to &quot;2. Quick Start Examples&quot;">​</a></h2><p>SigPro uses <strong>PascalCase</strong> for Tag Helpers (e.g., <code>Div</code>, <code>Button</code>) to provide a clean, component-like syntax without needing JSX.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-XUScV" id="tab-CF8-JRl" checked><label data-title="Mainstream (Bundlers)" for="tab-CF8-JRl">Mainstream (Bundlers)</label><input type="radio" name="group-XUScV" id="tab-TeUyjzG"><label data-title="Classic (Direct CDN)" for="tab-TeUyjzG">Classic (Direct CDN)</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:#6A737D;--shiki-dark:#6A737D;">// File: App.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div><hr><h2 id="_2-quick-start-examples" tabindex="-1">2. Quick Start Examples <a class="header-anchor" href="#_2-quick-start-examples" aria-label="Permalink to &quot;2. Quick Start Examples&quot;">​</a></h2><p>SigPro uses <strong>PascalCase</strong> for Tag Helpers (e.g., <code>Div</code>, <code>Button</code>) to provide a clean, component-like syntax without needing JSX.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ONVnm" id="tab-BonIgag" checked><label data-title="Mainstream (Bundlers)" for="tab-BonIgag">Mainstream (Bundlers)</label><input type="radio" name="group-ONVnm" id="tab-yle21W3"><label data-title="Classic (Direct CDN)" for="tab-yle21W3">Classic (Direct CDN)</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:#6A737D;--shiki-dark:#6A737D;">// File: App.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;sigpro&#39;</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;"> App</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>

0
docs/assets/install.md.C0utklUK.lean.js → docs/assets/install.md.D5NkNmWr.lean.js
View File

45
docs/examples.html
View File

File diff suppressed because one or more lines are too long

2
docs/hashmap.json
View File

@@ -1 +1 @@
{"api_html.md":"BPbZMZR1","api_mount.md":"BiKjH18I","api_quick.md":"4axUqmd3","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"CW_zjfl9","api_watch.md":"D7sOEzCX","examples.md":"Cy97nBRw","index.md":"By6smViD","install.md":"C0utklUK","ui_quick.md":"CsppjR8J","vite_plugin.md":"CTs8LDIL"}
{"api_html.md":"BPbZMZR1","api_mount.md":"BiKjH18I","api_quick.md":"CVAmBRZF","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"CW_zjfl9","api_watch.md":"D7sOEzCX","index.md":"By6smViD","install.md":"D5NkNmWr","ui_quick.md":"CsppjR8J","vite_plugin.md":"CTs8LDIL"}

2
docs/index.html
View File

File diff suppressed because one or more lines are too long

8
docs/install.html
View File

File diff suppressed because one or more lines are too long

223
docs/sigpro.js
View File

@@ -1,223 +0,0 @@
/**
* SigPro - Atomic Unified Reactive Engine
* A lightweight, fine-grained reactivity system with built-in routing and plugin support.
* @author Gemini & User
*/
(() => {
/** @type {Function|null} Internal tracker for the currently executing reactive effect. */
let activeEffect = null;
/**
* @typedef {Object} SigPro
* @property {function(any|function, string=): Function} $ - Creates a Signal or Computed. Optional key for localStorage.
* @property {function(string, Object=, any=): HTMLElement} html - Creates a reactive HTML element.
* @property {function((HTMLElement|function), (HTMLElement|string)=): void} mount - Mounts a component to the DOM.
* @property {function(Array<Object>): HTMLElement} router - Initializes a hash-based router.
* @property {function(string): void} router.go - Programmatic navigation to a hash path.
* @property {function((function|string|Array<string>)): (Promise<SigPro>|SigPro)} plugin - Extends SigPro or loads external scripts.
*/
/**
* Creates a Signal (state) or a Computed/Effect (reaction).
* Supports optional persistence in localStorage.
* * @param {any|function} initial - Initial value or a function for computed logic.
* @param {string} [key] - Optional localStorage key for automatic state persistence.
* @returns {Function} A reactive accessor/mutator function.
*/
const $ = (initial, key) => {
const subs = new Set();
if (typeof initial === 'function') {
let cached;
const runner = () => {
const prev = activeEffect;
activeEffect = runner;
try {
const next = initial();
if (!Object.is(cached, next)) {
cached = next;
subs.forEach(s => s());
}
} finally { activeEffect = prev; }
};
runner();
return () => {
if (activeEffect) subs.add(activeEffect);
return cached;
};
}
if (key) {
const saved = localStorage.getItem(key);
if (saved !== null) {
try { initial = JSON.parse(saved); } catch (e) { }
}
}
return (...args) => {
if (args.length) {
const next = typeof args[0] === 'function' ? args[0](initial) : args[0];
if (!Object.is(initial, next)) {
initial = next;
if (key) localStorage.setItem(key, JSON.stringify(initial));
subs.forEach(s => s());
}
}
if (activeEffect) subs.add(activeEffect);
return initial;
};
};
/**
* Hyperscript engine to render reactive HTML nodes.
* @param {string} tag - The HTML tag name (e.g., 'div', 'button').
* @param {Object} [props] - Attributes, events (onclick), or reactive props ($value, $class).
* @param {any} [content] - String, Node, Array of nodes, or reactive function.
* @returns {HTMLElement} A live DOM element linked to SigPro signals.
*/
$.html = (tag, props = {}, content = []) => {
const el = document.createElement(tag);
if (typeof props !== 'object' || props instanceof Node || Array.isArray(props) || typeof props === 'function') {
content = props;
props = {};
}
for (let [key, val] of Object.entries(props)) {
if (key.startsWith('on')) {
el.addEventListener(key.toLowerCase().slice(2), val);
} else if (key.startsWith('$')) {
const attr = key.slice(1);
// Two-way binding for inputs
if ((attr === 'value' || attr === 'checked') && typeof val === 'function') {
const ev = attr === 'checked' ? 'change' : 'input';
el.addEventListener(ev, e => val(attr === 'checked' ? e.target.checked : e.target.value));
}
// Reactive attribute update
$(() => {
const v = typeof val === 'function' ? val() : val;
if (attr === 'value' || attr === 'checked') el[attr] = v;
else if (typeof v === 'boolean') el.toggleAttribute(attr, v);
else el.setAttribute(attr, v ?? '');
});
} else el.setAttribute(key, val);
}
const append = (c) => {
if (Array.isArray(c)) return c.forEach(append);
if (typeof c === 'function') {
const node = document.createTextNode('');
$(() => {
const res = c();
if (res instanceof Node) {
if (node.parentNode) node.replaceWith(res);
} else {
node.textContent = res ?? '';
}
});
return el.appendChild(node);
}
el.appendChild(c instanceof Node ? c : document.createTextNode(c ?? ''));
};
append(content);
return el;
};
const tags = ['div', 'span', 'p', 'button', 'h1', 'h2', 'h3', 'ul', 'ol', 'li', 'a', 'label', 'section', 'nav', 'main', 'header', 'footer', 'input', 'form', 'img', 'select', 'option', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'canvas', 'video', 'audio'];
tags.forEach(t => window[t] = (p, c) => $.html(t, p, c));
/**
* Application mounter.
* @param {HTMLElement|function} node - Root component or element to mount.
* @param {HTMLElement|string} [target=document.body] - Target element or CSS selector.
*/
$.mount = (node, target = document.body) => {
const el = typeof target === 'string' ? document.querySelector(target) : target;
if (el) {
el.innerHTML = '';
el.appendChild(typeof node === 'function' ? node() : node);
}
};
/**
* Initializes a reactive hash-based router.
* Maps URL hash changes to component rendering and supports Vite's dynamic imports.
* * @param {Array<{path: string, component: Function|Promise|HTMLElement}>} routes - Array of route objects.
* @returns {HTMLElement} A reactive div container that swaps content based on the current hash.
*/
$.router = (routes) => {
const sPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
return $.html('div', [
() => {
const current = sPath();
const cP = current.split('/').filter(Boolean);
const route = routes.find(r => {
const rP = r.path.split('/').filter(Boolean);
if (rP.length !== cP.length) return false;
return rP.every((part, i) => part.startsWith(':') || part === cP[i]);
}) || routes.find(r => r.path === "*");
if (!route) return $.html('h1', "404 - Not Found");
const rP = route.path.split('/').filter(Boolean);
const params = {};
rP.forEach((part, i) => {
if (part.startsWith(':')) params[part.slice(1)] = cP[i];
});
const result = typeof route.component === 'function' ? route.component(params) : route.component;
if (result instanceof Promise) {
const $lazyNode = $($.html('span', "Loading..."));
result.then(m => {
const content = m.default || m;
const finalView = typeof content === 'function' ? content(params) : content;
$lazyNode(finalView);
});
return () => $lazyNode();
}
return result instanceof Node ? result : $.html('span', String(result));
}
]);
};
/**
* Programmatically navigates to a specific path using the hash.
* * @param {string} path - The destination path (e.g., '/home' or 'settings').
* @example
* $.router.go('/profile/42');
*/
$.router.go = (path) => {
window.location.hash = path.startsWith('/') ? path : `/${path}`;
};
/**
* Polymorphic Plugin System.
* Registers internal functions or loads external .js files as plugins.
* @param {function|string|Array<string>} source - Plugin function or URL(s).
* @returns {Promise<SigPro>|SigPro} Resolves with the $ instance after loading or registering.
*/
$.plugin = (source) => {
if (typeof source === 'function') {
source($);
return $;
}
const urls = Array.isArray(source) ? source : [source];
return Promise.all(urls.map(url => new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.async = true;
script.onload = () => {
console.log(`%c[SigPro] Plugin Loaded: ${url}`, "color: #51cf66; font-weight: bold;");
resolve();
};
script.onerror = () => reject(new Error(`[SigPro] Failed to load: ${url}`));
document.head.appendChild(script);
}))).then(() => $);
};
window.$ = $;
})();

2
docs/ui/quick.html
View File

@@ -63,7 +63,7 @@
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Access translated strings (Returns a signal that tracks the current locale)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> t</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;confirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-best-practices" tabindex="-1">5. Best Practices <a class="header-anchor" href="#_5-best-practices" aria-label="Permalink to &quot;5. Best Practices&quot;">​</a></h2><ul><li><strong>Use <code>$</code> for Reactivity</strong>: If a property starts with <code>$</code>, the component expects a Signal (e.g., <code>$value: mySignal</code>).</li><li><strong>Automatic Cleaning</strong>: You don&#39;t need to manually destroy these components if they are inside a <code>$.If</code> or <code>$.For</code>. SigPro&#39;s core will &quot;sweep&quot; their internal watchers automatically.</li><li><strong>Manual Cleanups</strong>: If you build custom components using <code>setInterval</code> or third-party observers, always add the stop functions to the element&#39;s <code>._cleanups</code> Set.</li></ul></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/tags.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Tags</span><!--]--></a></div><div class="pager" data-v-4f9813fa><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

2
docs/vite/plugin.html
View File

@@ -68,7 +68,7 @@
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/users/:id&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/src/pages/users/[id].js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><p>Because it uses dynamic <code>import()</code>, Vite automatically performs <strong>Code Splitting</strong>, meaning each page is its own small JS file that only loads when the user navigates to it.</p></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/install.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Installation</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/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_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"CVAmBRZF\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"index.md\":\"By6smViD\",\"install.md\":\"D5NkNmWr\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>

37
src/docs/api/quick.md
View File

@@ -1,19 +1,20 @@
# ⚡ Quick API Reference
# ⚡ Quick API Reference (V2)
SigPro is a high-performance micro-framework that updates the **Real DOM** surgically. No Virtual DOM, no unnecessary re-renders.
SigPro is a high-performance micro-framework that updates the **Real DOM** surgically. No Virtual DOM, no unnecessary re-renders, and built-in **Saneamiento** (memory cleanup).
## 🟢 Core Functions
| Function | Signature | Description |
| :--- | :--- | :--- |
| `$(val, key?)` | `(any, string?) => Signal` | Creates a **Signal**. If `key` is provided, it persists in `localStorage`. |
| `$(fn)` | `(function) => Computed` | Creates a **Computed Signal** that auto-updates when its dependencies change. |
| `$.effect(fn)` | `(function) => stopFn` | Runs a side-effect that tracks signals. Returns a function to manually stop it. |
| `$.html(tag, props, children)` | `(string, object, any) => HTMLElement` | The low-level DOM factory powering all tag constructors. |
| `$.router(routes)` | `(Array) => HTMLElement` | Initializes the hash-based router for SPAs. |
| `$.go(path)` | `(string) => void` | Programmatic navigation (e.g., `$.go('/home')`). |
| `$.mount(comp, target)` | `(any, string\|Node) => Runtime` | Mounts the application into the specified DOM element. |
| `$.ignore(fn)` | `(function) => any` | Executes code without tracking any signals inside it. |
| **`$(val, key?)`** | `(any, string?) => Signal` | Creates a **Signal**. If `key` is provided, it persists in `localStorage`. |
| **`$(fn)`** | `(function) => Computed` | Creates a **Computed Signal** that auto-updates when its dependencies change. |
| **`$.watch(fn)`** | `(function) => stopFn` | **Automatic Mode:** Tracks any signal touched inside. Returns a stop function. |
| **`$.watch(deps, fn)`** | `(Array, function) => stopFn` | **Explicit Mode:** Only runs when signals in `deps` change. Used for Saneamiento. |
| **`$.html(tag, props, kids)`** | `(string, obj, any) => Element` | The low-level DOM factory. Attaches `._cleanups` to every element. |
| **`$.If(cond, then, else?)`** | `(Signal, fn, fn?) => Node` | Reactive conditional. Automatically destroys the "else" branch memory. |
| **`$.For(list, itemFn)`** | `(Signal, fn) => Node` | Optimized list renderer. Manages individual item lifecycles. |
| **`$.router(routes)`** | `(Array) => Element` | Hash-based SPA router. Uses Explicit Watch to prevent memory leaks. |
| **`$.mount(node, target)`** | `(any, string\|Node) => Runtime` | Entry point. Creates a root instance with `.destroy()` capabilities. |
---
@@ -31,8 +32,18 @@ Tag({ attributes }, [children])
| Pattern | Code Example | Behavior |
| :--- | :--- | :--- |
| **Static** | `class: "text-red"` | Standard HTML attribute string. |
| **Reactive** | `disabled: isLoading` | Updates automatically when `isLoading()` changes. |
| **Two-way** | `$value: username` | Syncs input with signal **both ways** (Binding Operator). |
| **Text** | `P({}, () => count())` | Updates text node whenever `count` changes. |
| **Reactive** | `disabled: isLoading` | Updates automatically via internal `$.watch`. |
| **Two-way** | `$value: username` | **Binding Operator**: Syncs input $\leftrightarrow$ signal both ways. |
| **Text** | `P({}, () => count())` | Updates text node surgically without re-rendering the `P`. |
| **Boolean** | `hidden: isHidden` | Toggles the attribute based on signal truthiness. |
---
## 🧹 Saneamiento (Memory Management)
In SigPro V2, you rarely need to clean up manually, but the tools are there if you build custom components:
* **Automatic**: Anything inside `$.If`, `$.For`, or `$.router` is "swept" when it disappears.
* **Manual**: Use `instance.destroy()` for apps or `$.cleanup(el)` for manual DOM injections.
* **Internal**: Every element carries a `._cleanups` Set with its own reactive "kill-switches".

55
src/docs/examples.md
View File

@@ -1,55 +0,0 @@
# Live Playground
Experience **SigPro's** fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!
<iframe width="100%" height="600" src="//jsfiddle.net/natxocc/spwran02/4/embedded/" frameborder="0" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
```
---
### 2. Best Practices for Documentation
* **Tab Selection:** You can control which tabs are active by default by changing the URL segment after `/embedded/`.
* `js,result`: Shows the logic and the output.
* `html,js,result`: Shows the base structure, the logic, and the output.
* **Height Management:** For complex Store examples, increase the `height` attribute to `500` or `600` so the code is readable without internal scrolling.
* **Responsive Width:** Keeping `width="100%"` ensures the fiddle scales correctly on tablets and mobile devices.
---
### 3. Advanced: The "Fiddle" Component (Optional)
If you plan to have 10+ examples, you can create a global Vue component in VitePress. This keeps your Markdown files clean and allows you to change the theme or default height for all fiddles at once.
**Create `.vitepress/theme/components/Fiddle.vue`:**
```vue
<template>
<div class="fiddle-wrapper" style="margin: 20px 0;">
<iframe
width="100%"
:height="height"
:src="`//jsfiddle.net/natxocc/${id}/embedded/${tabs}/dark/`"
frameborder="0"
loading="lazy">
</iframe>
</div>
</template>
<script setup>
defineProps({
id: String, // e.g., "spwran02/4"
height: { default: '400' },
tabs: { default: 'js,result' }
})
</script>
```
**Usage in Markdown:**
```markdown
Check out this store example:
<Fiddle id="spwran02/4" height="500" />
```
---
### Why this is perfect for SigPro:
Because SigPro is **zero-dependency** and runs directly in the browser, your JSFiddle code will be exactly what the user copies into their own `index.html`. There is no hidden "build step" confusing the learner.

223
src/docs/public/sigpro.js
View File

@@ -1,223 +0,0 @@
/**
* SigPro - Atomic Unified Reactive Engine
* A lightweight, fine-grained reactivity system with built-in routing and plugin support.
* @author Gemini & User
*/
(() => {
/** @type {Function|null} Internal tracker for the currently executing reactive effect. */
let activeEffect = null;
/**
* @typedef {Object} SigPro
* @property {function(any|function, string=): Function} $ - Creates a Signal or Computed. Optional key for localStorage.
* @property {function(string, Object=, any=): HTMLElement} html - Creates a reactive HTML element.
* @property {function((HTMLElement|function), (HTMLElement|string)=): void} mount - Mounts a component to the DOM.
* @property {function(Array<Object>): HTMLElement} router - Initializes a hash-based router.
* @property {function(string): void} router.go - Programmatic navigation to a hash path.
* @property {function((function|string|Array<string>)): (Promise<SigPro>|SigPro)} plugin - Extends SigPro or loads external scripts.
*/
/**
* Creates a Signal (state) or a Computed/Effect (reaction).
* Supports optional persistence in localStorage.
* * @param {any|function} initial - Initial value or a function for computed logic.
* @param {string} [key] - Optional localStorage key for automatic state persistence.
* @returns {Function} A reactive accessor/mutator function.
*/
const $ = (initial, key) => {
const subs = new Set();
if (typeof initial === 'function') {
let cached;
const runner = () => {
const prev = activeEffect;
activeEffect = runner;
try {
const next = initial();
if (!Object.is(cached, next)) {
cached = next;
subs.forEach(s => s());
}
} finally { activeEffect = prev; }
};
runner();
return () => {
if (activeEffect) subs.add(activeEffect);
return cached;
};
}
if (key) {
const saved = localStorage.getItem(key);
if (saved !== null) {
try { initial = JSON.parse(saved); } catch (e) { }
}
}
return (...args) => {
if (args.length) {
const next = typeof args[0] === 'function' ? args[0](initial) : args[0];
if (!Object.is(initial, next)) {
initial = next;
if (key) localStorage.setItem(key, JSON.stringify(initial));
subs.forEach(s => s());
}
}
if (activeEffect) subs.add(activeEffect);
return initial;
};
};
/**
* Hyperscript engine to render reactive HTML nodes.
* @param {string} tag - The HTML tag name (e.g., 'div', 'button').
* @param {Object} [props] - Attributes, events (onclick), or reactive props ($value, $class).
* @param {any} [content] - String, Node, Array of nodes, or reactive function.
* @returns {HTMLElement} A live DOM element linked to SigPro signals.
*/
$.html = (tag, props = {}, content = []) => {
const el = document.createElement(tag);
if (typeof props !== 'object' || props instanceof Node || Array.isArray(props) || typeof props === 'function') {
content = props;
props = {};
}
for (let [key, val] of Object.entries(props)) {
if (key.startsWith('on')) {
el.addEventListener(key.toLowerCase().slice(2), val);
} else if (key.startsWith('$')) {
const attr = key.slice(1);
// Two-way binding for inputs
if ((attr === 'value' || attr === 'checked') && typeof val === 'function') {
const ev = attr === 'checked' ? 'change' : 'input';
el.addEventListener(ev, e => val(attr === 'checked' ? e.target.checked : e.target.value));
}
// Reactive attribute update
$(() => {
const v = typeof val === 'function' ? val() : val;
if (attr === 'value' || attr === 'checked') el[attr] = v;
else if (typeof v === 'boolean') el.toggleAttribute(attr, v);
else el.setAttribute(attr, v ?? '');
});
} else el.setAttribute(key, val);
}
const append = (c) => {
if (Array.isArray(c)) return c.forEach(append);
if (typeof c === 'function') {
const node = document.createTextNode('');
$(() => {
const res = c();
if (res instanceof Node) {
if (node.parentNode) node.replaceWith(res);
} else {
node.textContent = res ?? '';
}
});
return el.appendChild(node);
}
el.appendChild(c instanceof Node ? c : document.createTextNode(c ?? ''));
};
append(content);
return el;
};
const tags = ['div', 'span', 'p', 'button', 'h1', 'h2', 'h3', 'ul', 'ol', 'li', 'a', 'label', 'section', 'nav', 'main', 'header', 'footer', 'input', 'form', 'img', 'select', 'option', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'canvas', 'video', 'audio'];
tags.forEach(t => window[t] = (p, c) => $.html(t, p, c));
/**
* Application mounter.
* @param {HTMLElement|function} node - Root component or element to mount.
* @param {HTMLElement|string} [target=document.body] - Target element or CSS selector.
*/
$.mount = (node, target = document.body) => {
const el = typeof target === 'string' ? document.querySelector(target) : target;
if (el) {
el.innerHTML = '';
el.appendChild(typeof node === 'function' ? node() : node);
}
};
/**
* Initializes a reactive hash-based router.
* Maps URL hash changes to component rendering and supports Vite's dynamic imports.
* * @param {Array<{path: string, component: Function|Promise|HTMLElement}>} routes - Array of route objects.
* @returns {HTMLElement} A reactive div container that swaps content based on the current hash.
*/
$.router = (routes) => {
const sPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
return $.html('div', [
() => {
const current = sPath();
const cP = current.split('/').filter(Boolean);
const route = routes.find(r => {
const rP = r.path.split('/').filter(Boolean);
if (rP.length !== cP.length) return false;
return rP.every((part, i) => part.startsWith(':') || part === cP[i]);
}) || routes.find(r => r.path === "*");
if (!route) return $.html('h1', "404 - Not Found");
const rP = route.path.split('/').filter(Boolean);
const params = {};
rP.forEach((part, i) => {
if (part.startsWith(':')) params[part.slice(1)] = cP[i];
});
const result = typeof route.component === 'function' ? route.component(params) : route.component;
if (result instanceof Promise) {
const $lazyNode = $($.html('span', "Loading..."));
result.then(m => {
const content = m.default || m;
const finalView = typeof content === 'function' ? content(params) : content;
$lazyNode(finalView);
});
return () => $lazyNode();
}
return result instanceof Node ? result : $.html('span', String(result));
}
]);
};
/**
* Programmatically navigates to a specific path using the hash.
* * @param {string} path - The destination path (e.g., '/home' or 'settings').
* @example
* $.router.go('/profile/42');
*/
$.router.go = (path) => {
window.location.hash = path.startsWith('/') ? path : `/${path}`;
};
/**
* Polymorphic Plugin System.
* Registers internal functions or loads external .js files as plugins.
* @param {function|string|Array<string>} source - Plugin function or URL(s).
* @returns {Promise<SigPro>|SigPro} Resolves with the $ instance after loading or registering.
*/
$.plugin = (source) => {
if (typeof source === 'function') {
source($);
return $;
}
const urls = Array.isArray(source) ? source : [source];
return Promise.all(urls.map(url => new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.async = true;
script.onload = () => {
console.log(`%c[SigPro] Plugin Loaded: ${url}`, "color: #51cf66; font-weight: bold;");
resolve();
};
script.onerror = () => reject(new Error(`[SigPro] Failed to load: ${url}`));
document.head.appendChild(script);
}))).then(() => $);
};
window.$ = $;
})();