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

Update new version

Browse Source
This commit is contained in:
natxocc
2026-03-26 19:57:31 +01:00
parent 656dde09ba
commit ffbf7c9c5e
66 changed files with 344 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
UI/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/404.html
View File

@@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_for.md\":\"CGMDz0Px\",\"api_html.md\":\"DSCIaSlE\",\"api_if.md\":\"C-36XjK0\",\"api_mount.md\":\"CoM2SFqU\",\"api_quick.md\":\"D3C2EJww\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"BKWIb8mV\",\"api_watch.md\":\"BEM6Qssx\",\"index.md\":\"By6smViD\",\"install.md\":\"C1tyiPaQ\",\"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\":\"$.if\",\"link\":\"/api/if\"},{\"text\":\"$.for\",\"link\":\"/api/for\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"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_for.md\":\"3GRpYy3h\",\"api_html.md\":\"QmhwKd7f\",\"api_if.md\":\"2-2cm9cb\",\"api_mount.md\":\"B3RUsjff\",\"api_quick.md\":\"Coriz0Dx\",\"api_router.md\":\"DxC_B3iU\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"BPbc38UO\",\"api_watch.md\":\"Dc5wZqk9\",\"index.md\":\"By6smViD\",\"install.md\":\"CrzPbqO_\",\"ui_quick.md\":\"CL4k0g3a\",\"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\":\"$ signals\",\"link\":\"/api/signal\"},{\"text\":\"$watch\",\"link\":\"/api/watch\"},{\"text\":\"$if\",\"link\":\"/api/if\"},{\"text\":\"$for\",\"link\":\"/api/for\"},{\"text\":\"$router\",\"link\":\"/api/router\"},{\"text\":\"$mount\",\"link\":\"/api/mount\"},{\"text\":\"$html\",\"link\":\"/api/html\"},{\"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> </body>
</html> </html>

14
docs/api/for.html
View File

File diff suppressed because one or more lines are too long

32
docs/api/html.html
View File

File diff suppressed because one or more lines are too long

16
docs/api/if.html
View File

File diff suppressed because one or more lines are too long

14
docs/api/mount.html
View File

File diff suppressed because one or more lines are too long

6
docs/api/quick.html
View File

File diff suppressed because one or more lines are too long

37
docs/api/router.html
View File

File diff suppressed because one or more lines are too long

6
docs/api/signal.html
View File

File diff suppressed because one or more lines are too long

32
docs/api/tags.html
View File

File diff suppressed because one or more lines are too long

26
docs/api/watch.html
View File

File diff suppressed because one or more lines are too long

8
docs/assets/api_for.md.CGMDz0Px.js → docs/assets/api_for.md.3GRpYy3h.js
View File

@@ -1,4 +1,4 @@
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"♻️ Reactive Lists: $.for( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/for.md","filePath":"api/for.md"}'),n={name:"api/for.md"};function l(h,s,r,p,k,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="♻️-reactive-lists-for" tabindex="-1">♻️ Reactive Lists: <code>$.for( )</code> <a class="header-anchor" href="#♻️-reactive-lists-for" aria-label="Permalink to &quot;♻️ Reactive Lists: \`$.for( )\`&quot;">​</a></h1><p>The <code>$.for</code> function is a high-performance list renderer. It maps an array (or a Signal containing an array) to DOM nodes. Unlike a simple <code>.map()</code>, <code>$.for</code> is <strong>keyed</strong>, meaning it only updates, moves, or deletes the specific items that changed.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span> import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"♻️ Reactive Lists: $for( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/for.md","filePath":"api/for.md"}'),n={name:"api/for.md"};function l(h,s,r,p,k,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="♻️-reactive-lists-for" tabindex="-1">♻️ Reactive Lists: <code>$for( )</code> <a class="header-anchor" href="#♻️-reactive-lists-for" aria-label="Permalink to &quot;♻️ Reactive Lists: \`$for( )\`&quot;">​</a></h1><p>The <code>$for</code> function is a high-performance list renderer. It maps an array (or a Signal containing an array) to DOM nodes. Unlike a simple <code>.map()</code>, <code>$for</code> is <strong>keyed</strong>, meaning it only updates, moves, or deletes the specific items that changed.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">$for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> source: Signal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">any[]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[], </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> source: Signal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">any[]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[], </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> render: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</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;"> HTMLElement, </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> render: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</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;"> HTMLElement, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> keyFn: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</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;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> keyFn: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</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;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number</span></span>
@@ -8,12 +8,12 @@ import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g
<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>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list&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;">for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(users, </span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(users, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, user.name),</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, user.name),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">user</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;"> user.id</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">user</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;"> user.id</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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-handling-primitive-arrays" tabindex="-1">2. Handling Primitive Arrays <a class="header-anchor" href="#_2-handling-primitive-arrays" aria-label="Permalink to &quot;2. Handling Primitive Arrays&quot;">​</a></h3><p>If your array contains simple strings or numbers, you can use the value itself or the index as a key (though the index is less efficient for reordering).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tags</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tech&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;JS&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Web&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-handling-primitive-arrays" tabindex="-1">2. Handling Primitive Arrays <a class="header-anchor" href="#_2-handling-primitive-arrays" aria-label="Permalink to &quot;2. Handling Primitive Arrays&quot;">​</a></h3><p>If your array contains simple strings or numbers, you can use the value itself or the index as a key (though the index is less efficient for reordering).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tags</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tech&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;JS&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Web&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex gap-1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex gap-1&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;">for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tags, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tag), (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</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;"> tag)</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tags, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tag), (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</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;"> tag)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🏗️-how-it-works-the-reconciliation" tabindex="-1">🏗️ How it Works (The Reconciliation) <a class="header-anchor" href="#🏗️-how-it-works-the-reconciliation" aria-label="Permalink to &quot;🏗️ How it Works (The Reconciliation)&quot;">​</a></h2><p>When the <code>source</code> signal changes, <code>$.for</code> performs the following steps:</p><ol><li><strong>Key Diffing</strong>: It compares the new keys with the previous ones stored in an internal <code>Map</code>.</li><li><strong>Node Reuse</strong>: If a key already exists, the DOM node is <strong>reused</strong> and moved to its new position. No new elements are created.</li><li><strong>Cleanup</strong>: If a key disappears from the list, SigPro calls <code>.destroy()</code> on that specific item&#39;s instance. This stops all its internal watchers and removes its DOM nodes.</li></ol><hr><h2 id="💡-performance-tips" tabindex="-1">💡 Performance Tips <a class="header-anchor" href="#💡-performance-tips" aria-label="Permalink to &quot;💡 Performance Tips&quot;">​</a></h2><ul><li><strong>Stable Keys</strong>: Never use <code>Math.random()</code> as a key. This will force SigPro to destroy and recreate the entire list on every update, killing performance.</li><li><strong>Component Encapsulation</strong>: If each item in your list has its own complex internal state, <code>$.for</code> ensures that state is preserved even if the list is reordered, as long as the key remains the same.</li></ul><hr><h2 id="🧪-summary-comparison" tabindex="-1">🧪 Summary Comparison <a class="header-anchor" href="#🧪-summary-comparison" aria-label="Permalink to &quot;🧪 Summary Comparison&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Standard <code>Array.map</code></th><th style="text-align:left;">SigPro <code>$.for</code></th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Re-render</strong></td><td style="text-align:left;">Re-renders everything</td><td style="text-align:left;">Only updates changes</td></tr><tr><td style="text-align:left;"><strong>DOM Nodes</strong></td><td style="text-align:left;">Re-created every time</td><td style="text-align:left;"><strong>Reused via Keys</strong></td></tr><tr><td style="text-align:left;"><strong>Memory</strong></td><td style="text-align:left;">Potential leaks</td><td style="text-align:left;"><strong>Automatic Cleanup</strong></td></tr><tr><td style="text-align:left;"><strong>State</strong></td><td style="text-align:left;">Lost on re-render</td><td style="text-align:left;"><strong>Preserved per item</strong></td></tr></tbody></table>`,24)])])}const E=i(n,[["render",l]]);export{g as __pageData,E as default}; <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🏗️-how-it-works-the-reconciliation" tabindex="-1">🏗️ How it Works (The Reconciliation) <a class="header-anchor" href="#🏗️-how-it-works-the-reconciliation" aria-label="Permalink to &quot;🏗️ How it Works (The Reconciliation)&quot;">​</a></h2><p>When the <code>source</code> signal changes, <code>$for</code> performs the following steps:</p><ol><li><strong>Key Diffing</strong>: It compares the new keys with the previous ones stored in an internal <code>Map</code>.</li><li><strong>Node Reuse</strong>: If a key already exists, the DOM node is <strong>reused</strong> and moved to its new position. No new elements are created.</li><li><strong>Cleanup</strong>: If a key disappears from the list, SigPro calls <code>.destroy()</code> on that specific item&#39;s instance. This stops all its internal watchers and removes its DOM nodes.</li></ol><hr><h2 id="💡-performance-tips" tabindex="-1">💡 Performance Tips <a class="header-anchor" href="#💡-performance-tips" aria-label="Permalink to &quot;💡 Performance Tips&quot;">​</a></h2><ul><li><strong>Stable Keys</strong>: Never use <code>Math.random()</code> as a key. This will force SigPro to destroy and recreate the entire list on every update, killing performance.</li><li><strong>Component Encapsulation</strong>: If each item in your list has its own complex internal state, <code>$for</code> ensures that state is preserved even if the list is reordered, as long as the key remains the same.</li></ul><hr><h2 id="🧪-summary-comparison" tabindex="-1">🧪 Summary Comparison <a class="header-anchor" href="#🧪-summary-comparison" aria-label="Permalink to &quot;🧪 Summary Comparison&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Standard <code>Array.map</code></th><th style="text-align:left;">SigPro <code>$for</code></th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Re-render</strong></td><td style="text-align:left;">Re-renders everything</td><td style="text-align:left;">Only updates changes</td></tr><tr><td style="text-align:left;"><strong>DOM Nodes</strong></td><td style="text-align:left;">Re-created every time</td><td style="text-align:left;"><strong>Reused via Keys</strong></td></tr><tr><td style="text-align:left;"><strong>Memory</strong></td><td style="text-align:left;">Potential leaks</td><td style="text-align:left;"><strong>Automatic Cleanup</strong></td></tr><tr><td style="text-align:left;"><strong>State</strong></td><td style="text-align:left;">Lost on re-render</td><td style="text-align:left;"><strong>Preserved per item</strong></td></tr></tbody></table>`,24)])])}const E=i(n,[["render",l]]);export{g as __pageData,E as default};

1
docs/assets/api_for.md.3GRpYy3h.lean.js Normal file
View File

@@ -0,0 +1 @@
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"♻️ Reactive Lists: $for( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/for.md","filePath":"api/for.md"}'),n={name:"api/for.md"};function l(h,s,r,p,k,d){return t(),a("div",null,[...s[0]||(s[0]=[e("",24)])])}const E=i(n,[["render",l]]);export{g as __pageData,E as default};

1
docs/assets/api_for.md.CGMDz0Px.lean.js
View File

@@ -1 +0,0 @@
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"♻️ Reactive Lists: $.for( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/for.md","filePath":"api/for.md"}'),n={name:"api/for.md"};function l(h,s,r,p,k,d){return t(),a("div",null,[...s[0]||(s[0]=[e("",24)])])}const E=i(n,[["render",l]]);export{g as __pageData,E as default};

24
docs/assets/api_html.md.DSCIaSlE.js
View File

@@ -1,24 +0,0 @@
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🏗️ The DOM Factory: $.html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,p,r,o,k){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🏗️-the-dom-factory-html" tabindex="-1">🏗️ The DOM Factory: <code>$.html( )</code> <a class="header-anchor" href="#🏗️-the-dom-factory-html" aria-label="Permalink to &quot;🏗️ The DOM Factory: \`$.html( )\`&quot;">​</a></h1><p><code>$.html</code> is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses <code>$.watch</code> to maintain a live, high-performance link between your Signals and the Document Object Model.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tagName: string, props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object, children</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>tagName</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">Valid HTML tag name (e.g., <code>&quot;div&quot;</code>, <code>&quot;button&quot;</code>).</td></tr><tr><td style="text-align:left;"><strong><code>props</code></strong></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">No</td><td style="text-align:left;">HTML attributes, event listeners, and reactive bindings.</td></tr><tr><td style="text-align:left;"><strong><code>children</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Nested elements, text strings, or reactive functions.</td></tr></tbody></table><hr><h2 id="📖-key-features" tabindex="-1">📖 Key Features <a class="header-anchor" href="#📖-key-features" aria-label="Permalink to &quot;📖 Key Features&quot;">​</a></h2><h3 id="_1-attribute-handling" tabindex="-1">1. Attribute Handling <a class="header-anchor" href="#_1-attribute-handling" aria-label="Permalink to &quot;1. Attribute Handling&quot;">​</a></h3><p>SigPro intelligently decides how to apply each property:</p><ul><li><strong>Standard Props</strong>: Applied via <code>setAttribute</code> or direct property assignment.</li><li><strong>Boolean Props</strong>: Uses <code>toggleAttribute</code> (e.g., <code>checked</code>, <code>disabled</code>, <code>hidden</code>).</li><li><strong>Class Names</strong>: Supports <code>class</code> or <code>className</code> interchangeably.</li></ul><h3 id="_2-event-listeners-modifiers" tabindex="-1">2. Event Listeners &amp; Modifiers <a class="header-anchor" href="#_2-event-listeners-modifiers" aria-label="Permalink to &quot;2. Event Listeners &amp; Modifiers&quot;">​</a></h3><p>Events are defined by the <code>on</code> prefix. SigPro supports <strong>Dot Notation</strong> for common event operations:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // e.preventDefault() is called automatically</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;onsubmit.prevent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> save</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e), </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;"> // e.stopPropagation() is called automatically</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;onclick.stop&quot;</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;No bubbling&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>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // { once: true } listener option</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;onclick.once&quot;</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Runs only once&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:#032F62;--shiki-dark:#9ECBFF;">&quot;Click Me&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_3-reactive-attributes" tabindex="-1">3. Reactive Attributes <a class="header-anchor" href="#_3-reactive-attributes" aria-label="Permalink to &quot;3. Reactive Attributes&quot;">​</a></h3><p>If an attribute value is a <strong>function</strong> (like a Signal), <code>$.html</code> creates an internal <strong><code>$.watch</code></strong> to keep the DOM in sync with the state.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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;">, {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Updates the class whenever &#39;theme()&#39; changes</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;dark&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;bg-black&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;bg-white&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_4-reactive-children" tabindex="-1">4. Reactive Children <a class="header-anchor" href="#_4-reactive-children" aria-label="Permalink to &quot;4. Reactive Children&quot;">​</a></h3><p>Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using <code>$.watch</code> for that specific part of the DOM.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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;">, {}, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Static Title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only this text node re-renders when &#39;count&#39; changes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`Current count: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🔄-two-way-binding-operator" tabindex="-1">🔄 Two-Way Binding Operator (<code>$</code>) <a class="header-anchor" href="#🔄-two-way-binding-operator" aria-label="Permalink to &quot;🔄 Two-Way Binding Operator (\`$\`)&quot;">​</a></h2><p>When a property starts with <code>$</code>, <code>$.html</code> enables bidirectional synchronization. This is primarily used for form inputs.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;input&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: username </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Syncs input value &lt;-&gt; signal</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="🧹-memory-management-internal" tabindex="-1">🧹 Memory Management (Internal) <a class="header-anchor" href="#🧹-memory-management-internal" aria-label="Permalink to &quot;🧹 Memory Management (Internal)&quot;">​</a></h2><p>Every element created with <code>$.html</code> is &quot;self-aware&quot; regarding its reactive dependencies.</p><ul><li><strong><code>._cleanups</code></strong>: A hidden <code>Set</code> attached to the element that stores all <code>stop()</code> functions from its internal <code>$.watch</code> calls and event listeners.</li><li><strong>Lifecycle</strong>: When an element is removed by a Controller (<code>$.If</code>, <code>$.For</code>, or <code>$.router</code>), SigPro performs a recursive &quot;sweep&quot; to execute these cleanups, ensuring <strong>zero memory leaks</strong>.</li></ul><hr><h2 id="💡-tag-constructors-the-shortcuts" tabindex="-1">💡 Tag Constructors (The Shortcuts) <a class="header-anchor" href="#💡-tag-constructors-the-shortcuts" aria-label="Permalink to &quot;💡 Tag Constructors (The Shortcuts)&quot;">​</a></h2><p>Instead of writing <code>$.html(&quot;div&quot;, ...)</code> every time, SigPro provides PascalCase global functions:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This:</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wrapper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Span</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>
<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>`,30)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

1
docs/assets/api_html.md.DSCIaSlE.lean.js
View File

@@ -1 +0,0 @@
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🏗️ The DOM Factory: $.html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,p,r,o,k){return t(),a("div",null,[...s[0]||(s[0]=[e("",30)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

18
docs/assets/api_html.md.QmhwKd7f.js Normal file
View File

@@ -0,0 +1,18 @@
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🏗️ The DOM Factory: $html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,r,o,p,d){return i(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🏗️-the-dom-factory-html" tabindex="-1">🏗️ The DOM Factory: <code>$html( )</code> <a class="header-anchor" href="#🏗️-the-dom-factory-html" aria-label="Permalink to &quot;🏗️ The DOM Factory: \`$html( )\`&quot;">​</a></h1><p><code>$html</code> is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses <code>$.watch</code> to maintain a live, high-performance link between your Signals and the Document Object Model.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">$html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tagName: string, props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object, children</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>tagName</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">Valid HTML tag name (e.g., <code>&quot;div&quot;</code>, <code>&quot;button&quot;</code>).</td></tr><tr><td style="text-align:left;"><strong><code>props</code></strong></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">No</td><td style="text-align:left;">HTML attributes, event listeners, and reactive bindings.</td></tr><tr><td style="text-align:left;"><strong><code>children</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Nested elements, text strings, or reactive functions.</td></tr></tbody></table><hr><h2 id="📖-key-features" tabindex="-1">📖 Key Features <a class="header-anchor" href="#📖-key-features" aria-label="Permalink to &quot;📖 Key Features&quot;">​</a></h2><h3 id="_1-attribute-handling" tabindex="-1">1. Attribute Handling <a class="header-anchor" href="#_1-attribute-handling" aria-label="Permalink to &quot;1. Attribute Handling&quot;">​</a></h3><p>SigPro intelligently decides how to apply each property:</p><ul><li><strong>Standard Props</strong>: Applied via <code>setAttribute</code> or direct property assignment.</li><li><strong>Class Names</strong>: Supports <code>class</code> or <code>className</code> interchangeably.</li><li><strong>Boolean Props</strong>: Automatic handling for <code>checked</code>, <code>disabled</code>, <code>hidden</code>, etc.</li></ul><h3 id="_2-event-listeners" tabindex="-1">2. Event Listeners <a class="header-anchor" href="#_2-event-listeners" aria-label="Permalink to &quot;2. Event Listeners&quot;">​</a></h3><p>Events are defined by the <code>on</code> prefix. SigPro automatically registers the listener and ensures it is cleaned up when the element is destroyed.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Clicked!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, e),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Click Me&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_3-reactive-attributes-one-way" tabindex="-1">3. Reactive Attributes (One-Way) <a class="header-anchor" href="#_3-reactive-attributes-one-way" aria-label="Permalink to &quot;3. Reactive Attributes (One-Way)&quot;">​</a></h3><p>If an attribute value is a <strong>function</strong> (like a Signal), <code>$html</code> creates an internal <strong><code>$.watch</code></strong> to keep the DOM in sync with the state.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Updates the class whenever &#39;theme()&#39; changes</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;dark&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;bg-black&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;bg-white&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_4-smart-two-way-binding-automatic" tabindex="-1">4. Smart Two-Way Binding (Automatic) <a class="header-anchor" href="#_4-smart-two-way-binding-automatic" aria-label="Permalink to &quot;4. Smart Two-Way Binding (Automatic)&quot;">​</a></h3><p>SigPro automatically enables <strong>bidirectional synchronization</strong> when it detects a <strong>Signal</strong> assigned to a form-capable attribute (<code>value</code> or <code>checked</code>) on an input element (<code>input</code>, <code>textarea</code>, <code>select</code>).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Syncs input value &lt;-&gt; signal automatically</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: username </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// No special symbols needed!</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><blockquote><p><strong>Note:</strong> To use a Signal as <strong>read-only</strong> in an input, wrap it in an anonymous function: <code>value: () =&gt; username()</code>.</p></blockquote><h3 id="_5-reactive-children" tabindex="-1">5. Reactive Children <a class="header-anchor" href="#_5-reactive-children" aria-label="Permalink to &quot;5. Reactive Children&quot;">​</a></h3><p>Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using <code>$.watch</code> for that specific part of the DOM.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({}, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Static Title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only this text node re-renders when &#39;count&#39; changes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`Current count: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🧹-memory-management-internal" tabindex="-1">🧹 Memory Management (Internal) <a class="header-anchor" href="#🧹-memory-management-internal" aria-label="Permalink to &quot;🧹 Memory Management (Internal)&quot;">​</a></h2><p>Every element created with <code>$html</code> is &quot;self-aware&quot; regarding its reactive dependencies.</p><ul><li><strong><code>._cleanups</code></strong>: A hidden <code>Set</code> attached to the element that stores all <code>stop()</code> functions from its internal <code>$.watch</code> calls and event listeners.</li><li><strong>Lifecycle</strong>: When an element is removed by a Controller (<code>$.if</code>, <code>$.for</code>, or <code>$.router</code>), SigPro performs a recursive <strong>&quot;sweep&quot;</strong> to execute these cleanups, ensuring <strong>zero memory leaks</strong>.</li></ul><hr><h2 id="💡-tag-constructors-the-shortcuts" tabindex="-1">💡 Tag Constructors (The Shortcuts) <a class="header-anchor" href="#💡-tag-constructors-the-shortcuts" aria-label="Permalink to &quot;💡 Tag Constructors (The Shortcuts)&quot;">​</a></h2><p>Instead of writing <code>$html(&quot;div&quot;, ...)</code> every time, SigPro provides PascalCase global functions for all standard HTML tags:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This:</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wrapper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Span</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>
<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:#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>`,31)])])}const g=t(n,[["render",l]]);export{k as __pageData,g as default};

1
docs/assets/api_html.md.QmhwKd7f.lean.js Normal file
View File

@@ -0,0 +1 @@
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🏗️ The DOM Factory: $html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,r,o,p,d){return i(),a("div",null,[...s[0]||(s[0]=[e("",31)])])}const g=t(n,[["render",l]]);export{k as __pageData,g as default};

10
docs/assets/api_if.md.C-36XjK0.js → docs/assets/api_if.md.2-2cm9cb.js
View File

@@ -1,4 +1,4 @@
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🔀 Reactive Branching: $.if( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/if.md","filePath":"api/if.md"}'),n={name:"api/if.md"};function l(h,s,p,r,o,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🔀-reactive-branching-if" tabindex="-1">🔀 Reactive Branching: <code>$.if( )</code> <a class="header-anchor" href="#🔀-reactive-branching-if" aria-label="Permalink to &quot;🔀 Reactive Branching: \`$.if( )\`&quot;">​</a></h1><p>The <code>$.if</code> function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span> import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🔀 Reactive Branching: $if( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/if.md","filePath":"api/if.md"}'),n={name:"api/if.md"};function l(h,s,p,r,o,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🔀-reactive-branching-if" tabindex="-1">🔀 Reactive Branching: <code>$if( )</code> <a class="header-anchor" href="#🔀-reactive-branching-if" aria-label="Permalink to &quot;🔀 Reactive Branching: \`$if( )\`&quot;">​</a></h1><p>The <code>$if</code> function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">$if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> condition: Signal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Function, </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> condition: Signal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Function, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thenVal: Component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Node, </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thenVal: Component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Node, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> otherwiseVal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Node</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> otherwiseVal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Node</span></span>
@@ -7,13 +7,13 @@ import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> isVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Toggle Message&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> isVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Toggle Message&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> <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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(isVisible, </span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(isVisible, </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Now you see me!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Now you see me!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Now you don&#39;t...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Now you don&#39;t...&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> <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><h3 id="_2-lazy-component-loading" tabindex="-1">2. Lazy Component Loading <a class="header-anchor" href="#_2-lazy-component-loading" aria-label="Permalink to &quot;2. Lazy Component Loading&quot;">​</a></h3><p>Unlike using a hidden class (CSS <code>display: none</code>), <code>$.if</code> is <strong>lazy</strong>. The branch that isn&#39;t active <strong>is never created</strong>. This saves memory and initial processing time.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">if</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;"> user.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLogged</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-lazy-component-loading" tabindex="-1">2. Lazy Component Loading <a class="header-anchor" href="#_2-lazy-component-loading" aria-label="Permalink to &quot;2. Lazy Component Loading&quot;">​</a></h3><p>Unlike using a hidden class (CSS <code>display: none</code>), <code>$if</code> is <strong>lazy</strong>. The branch that isn&#39;t active <strong>is never created</strong>. This saves memory and initial processing time.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$if</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;"> user.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLogged</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:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Dashboard</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only executed if logged in</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Dashboard</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only executed if logged in</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LoginGate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only executed if guest</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LoginGate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only executed if guest</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><hr><h2 id="🧹-automatic-cleanup" tabindex="-1">🧹 Automatic Cleanup <a class="header-anchor" href="#🧹-automatic-cleanup" aria-label="Permalink to &quot;🧹 Automatic Cleanup&quot;">​</a></h2><p>One of the core strengths of <code>$.if</code> is its integrated <strong>Cleanup</strong> logic. SigPro ensures that when a branch is swapped out, it is completely purged.</p><ol><li><strong>Stop Watchers</strong>: All <code>$.watch</code> calls inside the inactive branch are permanently stopped.</li><li><strong>Unbind Events</strong>: Event listeners attached via <code>$.html</code> are removed.</li><li><strong>Recursive Sweep</strong>: SigPro performs a deep &quot;sweep&quot; of the removed branch to ensure no nested reactive effects remain active.</li></ol><hr><h2 id="💡-best-practices" tabindex="-1">💡 Best Practices <a class="header-anchor" href="#💡-best-practices" aria-label="Permalink to &quot;💡 Best Practices&quot;">​</a></h2><ul><li><strong>Function Wrappers</strong>: If your branches are heavy (e.g., they contain complex components), wrap them in a function <code>() =&gt; MyComponent()</code>. This prevents the component from being initialized until the condition actually meets its requirement.</li><li><strong>Logical Expressions</strong>: You can pass a complex computed function as the condition:<div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &amp;&amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ready&#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></code></pre></div><hr><h2 id="🧹-automatic-cleanup" tabindex="-1">🧹 Automatic Cleanup <a class="header-anchor" href="#🧹-automatic-cleanup" aria-label="Permalink to &quot;🧹 Automatic Cleanup&quot;">​</a></h2><p>One of the core strengths of <code>$if</code> is its integrated <strong>Cleanup</strong> logic. SigPro ensures that when a branch is swapped out, it is completely purged.</p><ol><li><strong>Stop Watchers</strong>: All <code>$.watch</code> calls inside the inactive branch are permanently stopped.</li><li><strong>Unbind Events</strong>: Event listeners attached via <code>$.html</code> are removed.</li><li><strong>Recursive Sweep</strong>: SigPro performs a deep &quot;sweep&quot; of the removed branch to ensure no nested reactive effects remain active.</li></ol><hr><h2 id="💡-best-practices" tabindex="-1">💡 Best Practices <a class="header-anchor" href="#💡-best-practices" aria-label="Permalink to &quot;💡 Best Practices&quot;">​</a></h2><ul><li><strong>Function Wrappers</strong>: If your branches are heavy (e.g., they contain complex components), wrap them in a function <code>() =&gt; MyComponent()</code>. This prevents the component from being initialized until the condition actually meets its requirement.</li><li><strong>Logical Expressions</strong>: You can pass a complex computed function as the condition:<div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &amp;&amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Threshold reached!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Threshold reached!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></li></ul><hr><h2 id="🏗️-technical-comparison" tabindex="-1">🏗️ Technical Comparison <a class="header-anchor" href="#🏗️-technical-comparison" aria-label="Permalink to &quot;🏗️ Technical Comparison&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Standard CSS <code>hidden</code></th><th style="text-align:left;">SigPro <code>$.if</code></th></tr></thead><tbody><tr><td style="text-align:left;"><strong>DOM Presence</strong></td><td style="text-align:left;">Always present</td><td style="text-align:left;">Only if active</td></tr><tr><td style="text-align:left;"><strong>Reactivity</strong></td><td style="text-align:left;">Still processing in background</td><td style="text-align:left;"><strong>Paused/Destroyed</strong></td></tr><tr><td style="text-align:left;"><strong>Memory usage</strong></td><td style="text-align:left;">Higher</td><td style="text-align:left;"><strong>Optimized</strong></td></tr><tr><td style="text-align:left;"><strong>Cleanup</strong></td><td style="text-align:left;">Manual</td><td style="text-align:left;"><strong>Automatic</strong></td></tr></tbody></table>`,24)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default}; <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></li></ul><hr><h2 id="🏗️-technical-comparison" tabindex="-1">🏗️ Technical Comparison <a class="header-anchor" href="#🏗️-technical-comparison" aria-label="Permalink to &quot;🏗️ Technical Comparison&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Standard CSS <code>hidden</code></th><th style="text-align:left;">SigPro <code>$if</code></th></tr></thead><tbody><tr><td style="text-align:left;"><strong>DOM Presence</strong></td><td style="text-align:left;">Always present</td><td style="text-align:left;">Only if active</td></tr><tr><td style="text-align:left;"><strong>Reactivity</strong></td><td style="text-align:left;">Still processing in background</td><td style="text-align:left;"><strong>Paused/Destroyed</strong></td></tr><tr><td style="text-align:left;"><strong>Memory usage</strong></td><td style="text-align:left;">Higher</td><td style="text-align:left;"><strong>Optimized</strong></td></tr><tr><td style="text-align:left;"><strong>Cleanup</strong></td><td style="text-align:left;">Manual</td><td style="text-align:left;"><strong>Automatic</strong></td></tr></tbody></table>`,24)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};

1
docs/assets/api_if.md.2-2cm9cb.lean.js Normal file
View File

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

1
docs/assets/api_if.md.C-36XjK0.lean.js
View File

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

16
docs/assets/api_mount.md.B3RUsjff.js Normal file
View File

@@ -0,0 +1,16 @@
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e(`<h1 id="🔌-application-mounter-mount" tabindex="-1">🔌 Application Mounter: <code>$mount( )</code> <a class="header-anchor" href="#🔌-application-mounter-mount" aria-label="Permalink to &quot;🔌 Application Mounter: \`$mount( )\`&quot;">​</a></h1><p>The <code>$mount</code> function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser&#39;s Real DOM by injecting a component into the document and initializing its reactive lifecycle.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">$mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node: Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement): RuntimeObject</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>node</code></strong></td><td style="text-align:left;"><code>Function</code> or <code>Node</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component function or DOM element to render.</td></tr><tr><td style="text-align:left;"><strong><code>target</code></strong></td><td style="text-align:left;"><code>string</code> or <code>Node</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">CSS selector or DOM element where the app will live.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>Runtime</code> object containing the <code>container</code> and a <code>destroy()</code> method to wipe all reactivity and DOM nodes.</p><hr><h2 id="📖-common-usage-scenarios" tabindex="-1">📖 Common Usage Scenarios <a class="header-anchor" href="#📖-common-usage-scenarios" aria-label="Permalink to &quot;📖 Common Usage Scenarios&quot;">​</a></h2><h3 id="_1-the-spa-entry-point" tabindex="-1">1. The SPA Entry Point <a class="header-anchor" href="#_1-the-spa-entry-point" aria-label="Permalink to &quot;1. The SPA Entry Point&quot;">​</a></h3><p>In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">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.js&#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;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mounts your main App component</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#app-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_2-reactive-islands" tabindex="-1">2. Reactive &quot;Islands&quot; <a class="header-anchor" href="#_2-reactive-islands" aria-label="Permalink to &quot;2. Reactive &quot;Islands&quot;&quot;">​</a></h3><p>SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</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:#032F62;--shiki-dark:#9ECBFF;"> &quot;Clicks: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, count</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>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount only the counter into a specific sidebar div</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#sidebar-widget&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="🔄-how-it-works-lifecycle-cleanup" tabindex="-1">🔄 How it Works (Lifecycle &amp; Cleanup) <a class="header-anchor" href="#🔄-how-it-works-lifecycle-cleanup" aria-label="Permalink to &quot;🔄 How it Works (Lifecycle &amp; Cleanup)&quot;">​</a></h2><p>When <code>$mount</code> is executed, it performs these critical steps to ensure a leak-free environment:</p><ol><li><strong>Duplicate Detection</strong>: If you call <code>$mount</code> on a target that already has a SigPro instance, it automatically calls <code>.destroy()</code> on the previous instance. This prevents &quot;Zombie Effects&quot; from stacking in memory.</li><li><strong>Internal Scoping</strong>: It executes the component function inside an internal <strong>Reactive Owner</strong>. This captures every <code>$watch</code> and event listener created during the render.</li><li><strong>Target Injection</strong>: It clears the target using <code>replaceChildren()</code> and appends the new component.</li><li><strong>Runtime Creation</strong>: It returns a control object: <ul><li><code>container</code>: The actual DOM element created.</li><li><code>destroy()</code>: The &quot;kill switch&quot; that runs all cleanups, stops all watchers, and removes the element from the DOM.</li></ul></li></ol><hr><h2 id="🛑-manual-unmounting" tabindex="-1">🛑 Manual Unmounting <a class="header-anchor" href="#🛑-manual-unmounting" aria-label="Permalink to &quot;🛑 Manual Unmounting&quot;">​</a></h2><p>While SigPro handles most cleanups automatically (via <code>$if</code>, <code>$for</code>, and <code>$router</code>), you can manually destroy any mounted instance. This is vital for imperatively managed UI like <strong>Toasts</strong> or <strong>Modals</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> instance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyToast, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toast-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<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 Cleanup</strong></td><td style="text-align:left;"><code>const app = $mount(App); app.destroy();</code></td></tr></tbody></table>`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};

1
docs/assets/api_mount.md.B3RUsjff.lean.js Normal file
View File

@@ -0,0 +1 @@
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e("",25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};

16
docs/assets/api_mount.md.CoM2SFqU.js
View File

@@ -1,16 +0,0 @@
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $.mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e(`<h1 id="🔌-application-mounter-mount" tabindex="-1">🔌 Application Mounter: <code>$.mount( )</code> <a class="header-anchor" href="#🔌-application-mounter-mount" aria-label="Permalink to &quot;🔌 Application Mounter: \`$.mount( )\`&quot;">​</a></h1><p>The <code>$.mount</code> function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser&#39;s Real DOM by injecting a component into the document and initializing its reactive lifecycle.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node: Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement): RuntimeObject</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>node</code></strong></td><td style="text-align:left;"><code>Function</code> or <code>Node</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component function or DOM element to render.</td></tr><tr><td style="text-align:left;"><strong><code>target</code></strong></td><td style="text-align:left;"><code>string</code> or <code>Node</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">CSS selector or DOM element where the app will live.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>Runtime</code> object containing the <code>container</code> and a <code>destroy()</code> method to wipe all reactivity and DOM nodes.</p><hr><h2 id="📖-common-usage-scenarios" tabindex="-1">📖 Common Usage Scenarios <a class="header-anchor" href="#📖-common-usage-scenarios" aria-label="Permalink to &quot;📖 Common Usage Scenarios&quot;">​</a></h2><h3 id="_1-the-spa-entry-point" tabindex="-1">1. The SPA Entry Point <a class="header-anchor" href="#_1-the-spa-entry-point" aria-label="Permalink to &quot;1. The SPA Entry Point&quot;">​</a></h3><p>In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">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.js&#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;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mounts your main App component</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#app-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_2-reactive-islands" tabindex="-1">2. Reactive &quot;Islands&quot; <a class="header-anchor" href="#_2-reactive-islands" aria-label="Permalink to &quot;2. Reactive &quot;Islands&quot;&quot;">​</a></h3><p>SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</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:#032F62;--shiki-dark:#9ECBFF;"> &quot;Clicks: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, count</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>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount only the counter into a specific sidebar div</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#sidebar-widget&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="🔄-how-it-works-lifecycle-cleanup" tabindex="-1">🔄 How it Works (Lifecycle &amp; Cleanup) <a class="header-anchor" href="#🔄-how-it-works-lifecycle-cleanup" aria-label="Permalink to &quot;🔄 How it Works (Lifecycle &amp; Cleanup)&quot;">​</a></h2><p>When <code>$.mount</code> is executed, it performs these critical steps to ensure a leak-free environment:</p><ol><li><strong>Duplicate Detection</strong>: If you call <code>$.mount</code> on a target that already has a SigPro instance, it automatically calls <code>.destroy()</code> on the previous instance. This prevents &quot;Zombie Effects&quot; from stacking in memory.</li><li><strong>Internal Scoping</strong>: It executes the component function inside an internal <strong>Reactive Owner</strong>. This captures every <code>$.watch</code> and event listener created during the render.</li><li><strong>Target Injection</strong>: It clears the target using <code>replaceChildren()</code> and appends the new component.</li><li><strong>Runtime Creation</strong>: It returns a control object: <ul><li><code>container</code>: The actual DOM element created.</li><li><code>destroy()</code>: The &quot;kill switch&quot; that runs all cleanups, stops all watchers, and removes the element from the DOM.</li></ul></li></ol><hr><h2 id="🛑-manual-unmounting" tabindex="-1">🛑 Manual Unmounting <a class="header-anchor" href="#🛑-manual-unmounting" aria-label="Permalink to &quot;🛑 Manual Unmounting&quot;">​</a></h2><p>While SigPro handles most cleanups automatically (via <code>$.If</code>, <code>$.For</code>, and <code>$.router</code>), you can manually destroy any mounted instance. This is vital for imperatively managed UI like <strong>Toasts</strong> or <strong>Modals</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> instance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyToast, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toast-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<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 Cleanup</strong></td><td style="text-align:left;"><code>const app = $.mount(App); app.destroy();</code></td></tr></tbody></table>`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};

1
docs/assets/api_mount.md.CoM2SFqU.lean.js
View File

@@ -1 +0,0 @@
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $.mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e("",25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};

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

File diff suppressed because one or more lines are too long

0
docs/assets/api_quick.md.D3C2EJww.lean.js → docs/assets/api_quick.md.Coriz0Dx.lean.js
View File

1
docs/assets/api_quick.md.D3C2EJww.js
View File

File diff suppressed because one or more lines are too long

22
docs/assets/api_router.md.Cn98LjXO.js
View File

@@ -1,22 +0,0 @@
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🚦 Routing: $.router( ) & $.go( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="🚦-routing-router-go" tabindex="-1">🚦 Routing: <code>$.router( )</code> &amp; <code>$.go( )</code> <a class="header-anchor" href="#🚦-routing-router-go" aria-label="Permalink to &quot;🚦 Routing: \`$.router( )\` &amp; \`$.go( )\`&quot;">​</a></h1><p>SigPro includes a built-in, lightweight <strong>Hash Router</strong> to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically.</p><h2 id="🛠-router-signature" tabindex="-1">🛠 Router Signature <a class="header-anchor" href="#🛠-router-signature" aria-label="Permalink to &quot;🛠 Router Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes: Route[]): HTMLElement</span></span></code></pre></div><h3 id="route-object" tabindex="-1">Route Object <a class="header-anchor" href="#route-object" aria-label="Permalink to &quot;Route Object&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Property</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>path</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">The URL fragment (e.g., <code>&quot;/home&quot;</code>, <code>&quot;/user/:id&quot;</code>, or <code>&quot;*&quot;</code>).</td></tr><tr><td style="text-align:left;"><strong><code>component</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">A function that returns a Tag or a <code>$.view</code>.</td></tr></tbody></table><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-defining-routes" tabindex="-1">1. Defining Routes <a class="header-anchor" href="#_1-defining-routes" aria-label="Permalink to &quot;1. Defining Routes&quot;">​</a></h3><p>The router returns a <code>div</code> element with the class <code>.router-outlet</code>. When the hash changes, the router destroys the previous view and mounts the new one inside this container.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">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:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;app-layout&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Navbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The router outlet is placed here</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, component: Home },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/profile/:id&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, component: UserProfile },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;*&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, component: NotFound }</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><h3 id="_2-dynamic-segments-id" tabindex="-1">2. Dynamic Segments (<code>:id</code>) <a class="header-anchor" href="#_2-dynamic-segments-id" aria-label="Permalink to &quot;2. Dynamic Segments (\`:id\`)&quot;">​</a></h3><p>When a path contains a colon (e.g., <code>:id</code>), the router parses that segment and passes it as an object to the component function.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If the URL is #/profile/42</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`User ID is: \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">params</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Displays &quot;User ID is: 42&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="🏎-programmatic-navigation-go" tabindex="-1">🏎 Programmatic Navigation: <code>$.go( )</code> <a class="header-anchor" href="#🏎-programmatic-navigation-go" aria-label="Permalink to &quot;🏎 Programmatic Navigation: \`$.go( )\`&quot;">​</a></h2><p>To navigate between pages without using an <code>&lt;a&gt;</code> tag, use <code>$.go</code>. This function updates the browser&#39;s hash, which in turn triggers the router to swap components.</p><h3 id="signature" tabindex="-1">Signature <a class="header-anchor" href="#signature" aria-label="Permalink to &quot;Signature&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(path: string): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h3 id="examples" tabindex="-1">Examples <a class="header-anchor" href="#examples" aria-label="Permalink to &quot;Examples&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Navigate to a static path</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Navigate to a dynamic path</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onclick</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`/profile/\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">user</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</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:#032F62;--shiki-dark:#9ECBFF;">&quot;View Profile&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><hr><h2 id="⚡-technical-behavior" tabindex="-1">⚡ Technical Behavior <a class="header-anchor" href="#⚡-technical-behavior" aria-label="Permalink to &quot;⚡ Technical Behavior&quot;">​</a></h2><ul><li><strong>Automatic Cleanup</strong>: Every time you navigate, the router calls <code>.destroy()</code> on the previous <code>$.view</code>. This ensures that all <strong>signals, effects, and event listeners</strong> from the old page are purged from memory.</li><li><strong>Hash-Based</strong>: By using <code>window.location.hash</code>, SigPro works out-of-the-box on any static hosting (like GitHub Pages or Vercel) without needing server-side redirects.</li><li><strong>Initial Load</strong>: On the first execution, <code>$.router</code> automatically reads the current hash or defaults to <code>/</code> if empty.</li></ul><hr><h2 id="🎨-styling-the-outlet" tabindex="-1">🎨 Styling the Outlet <a class="header-anchor" href="#🎨-styling-the-outlet" aria-label="Permalink to &quot;🎨 Styling the Outlet&quot;">​</a></h2><p>Since the router returns a standard DOM element, you can style the transition or the container easily:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">.router-outlet</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> flex</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:#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>`,28)])])}const c=i(n,[["render",h]]);export{g as __pageData,c as default};

1
docs/assets/api_router.md.Cn98LjXO.lean.js
View File

@@ -1 +0,0 @@
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🚦 Routing: $.router( ) & $.go( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e("",28)])])}const c=i(n,[["render",h]]);export{g as __pageData,c as default};

23
docs/assets/api_router.md.DxC_B3iU.js Normal file
View File

@@ -0,0 +1,23 @@
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"🚦 Routing: $router() & Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,k,o){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="🚦-routing-router-utilities" tabindex="-1">🚦 Routing: <code>$router()</code> &amp; Utilities <a class="header-anchor" href="#🚦-routing-router-utilities" aria-label="Permalink to &quot;🚦 Routing: \`$router()\` &amp; Utilities&quot;">​</a></h1><p>SigPro includes a built-in, lightweight <strong>Hash Router</strong> to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically.</p><h2 id="🛠-router-signature" tabindex="-1">🛠 Router Signature <a class="header-anchor" href="#🛠-router-signature" aria-label="Permalink to &quot;🛠 Router Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">$router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes: Route[]): HTMLElement</span></span></code></pre></div><h3 id="route-object" tabindex="-1">Route Object <a class="header-anchor" href="#route-object" aria-label="Permalink to &quot;Route Object&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Property</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>path</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">The URL fragment (e.g., <code>&quot;/&quot;</code>, <code>&quot;/user/:id&quot;</code>, or <code>&quot;*&quot;</code>).</td></tr><tr><td style="text-align:left;"><strong><code>component</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">A function that returns a Node, a String, or a reactive View.</td></tr></tbody></table><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-defining-routes" tabindex="-1">1. Defining Routes <a class="header-anchor" href="#_1-defining-routes" aria-label="Permalink to &quot;1. Defining Routes&quot;">​</a></h3><p>The <code>$router</code> returns a <code>div</code> element with the class <code>.router-outlet</code>. When the hash changes, the router destroys the previous view and mounts the new one inside this container.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">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:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;app-layout&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Navbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The router outlet is placed here</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, component: Home },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/profile/:id&quot;</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:#E36209;--shiki-dark:#FFAB70;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserProfile</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(params.id) },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;*&quot;</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:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;404 Not Found&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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-dynamic-segments-id" tabindex="-1">2. Dynamic Segments (<code>:id</code>) <a class="header-anchor" href="#_2-dynamic-segments-id" aria-label="Permalink to &quot;2. Dynamic Segments (\`:id\`)&quot;">​</a></h3><p>The router automatically parses URL parameters (like <code>:id</code>) and passes them as an object to the component function. You can also access them globally via <code>$router.params()</code>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If the URL is #/profile/42</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`User ID is: \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">params</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Displays &quot;User ID is: 42&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="🏎-navigation-utilities" tabindex="-1">🏎 Navigation Utilities <a class="header-anchor" href="#🏎-navigation-utilities" aria-label="Permalink to &quot;🏎 Navigation Utilities&quot;">​</a></h2><p>SigPro provides a set of programmatic methods to control the history and read the state.</p><h3 id="router-to-path" tabindex="-1"><code>$router.to(path)</code> <a class="header-anchor" href="#router-to-path" aria-label="Permalink to &quot;\`$router.to(path)\`&quot;">​</a></h3><p>Navigates to a specific path. It automatically formats the hash (e.g., <code>/home</code> becomes <code>#/home</code>).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</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;"> $router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/dashboard&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Go to Dashboard&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="router-back" tabindex="-1"><code>$router.back()</code> <a class="header-anchor" href="#router-back" aria-label="Permalink to &quot;\`$router.back()\`&quot;">​</a></h3><p>Goes back to the previous page in the browser history.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</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;"> $router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">back</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Back&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="router-path" tabindex="-1"><code>$router.path()</code> <a class="header-anchor" href="#router-path" aria-label="Permalink to &quot;\`$router.path()\`&quot;">​</a></h3><p>Returns the current path (without the <code>#</code>).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Current path is:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="⚡-technical-behavior" tabindex="-1">⚡ Technical Behavior <a class="header-anchor" href="#⚡-technical-behavior" aria-label="Permalink to &quot;⚡ Technical Behavior&quot;">​</a></h2><ul><li><strong>Automatic Cleanup</strong>: Every time you navigate, the router calls <code>.destroy()</code> on the previous view. This ensures that all <strong>signals, effects, and event listeners</strong> from the old page are purged from memory.</li><li><strong>Reactive Params</strong>: <code>$router.params</code> is a signal (<code>$</code>). You can react to parameter changes without re-mounting the entire router outlet.</li><li><strong>Hash-Based</strong>: By using <code>window.location.hash</code>, SigPro works out-of-the-box on any static hosting (like GitHub Pages or Vercel) without needing server-side redirects.</li></ul><hr><h2 id="🎨-styling-the-outlet" tabindex="-1">🎨 Styling the Outlet <a class="header-anchor" href="#🎨-styling-the-outlet" aria-label="Permalink to &quot;🎨 Styling the Outlet&quot;">​</a></h2><p>The router returns a standard <code>div</code> with the <code>.router-outlet</code> class. You can easily style it or add transitions:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">.router-outlet</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> min-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">vh</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.3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ease</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>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@keyframes</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> fadeIn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">opacity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translateY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">opacity</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 style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translateY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,33)])])}const g=i(n,[["render",h]]);export{E as __pageData,g as default};

1
docs/assets/api_router.md.DxC_B3iU.lean.js Normal file
View File

@@ -0,0 +1 @@
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"🚦 Routing: $router() & Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,k,o){return a(),t("div",null,[...s[0]||(s[0]=[e("",33)])])}const g=i(n,[["render",h]]);export{E as __pageData,g as default};

36
docs/assets/api_tags.md.BKWIb8mV.js
View File

File diff suppressed because one or more lines are too long

32
docs/assets/api_tags.md.BPbc38UO.js Normal file
View File

File diff suppressed because one or more lines are too long

2
docs/assets/api_tags.md.BKWIb8mV.lean.js → docs/assets/api_tags.md.BPbc38UO.lean.js
View File

@@ -1 +1 @@
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🎨 Global Tag Helpers","description":"","frontmatter":{},"headers":[],"relativePath":"api/tags.md","filePath":"api/tags.md"}'),n={name:"api/tags.md"};function l(h,s,o,p,r,d){return a(),t("div",null,[...s[0]||(s[0]=[e("",41)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default}; import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🎨 Global Tag Helpers","description":"","frontmatter":{},"headers":[],"relativePath":"api/tags.md","filePath":"api/tags.md"}'),n={name:"api/tags.md"};function l(h,s,o,p,d,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",37)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

1
docs/assets/api_watch.md.BEM6Qssx.lean.js
View File

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

18
docs/assets/api_watch.md.BEM6Qssx.js → docs/assets/api_watch.md.Dc5wZqk9.js
View File

@@ -1,32 +1,32 @@
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"⚡ Reactivity Control: $.watch( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/watch.md","filePath":"api/watch.md"}'),e={name:"api/watch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="⚡-reactivity-control-watch" tabindex="-1">⚡ Reactivity Control: <code>$.watch( )</code> <a class="header-anchor" href="#⚡-reactivity-control-watch" aria-label="Permalink to &quot;⚡ Reactivity Control: \`$.watch( )\`&quot;">​</a></h1><p>The <code>$.watch</code> function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. <code>$.watch</code> is <strong>polymorphic</strong>: it can track dependencies automatically or follow an explicit list.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">// Automatic Mode (Magic Tracking)</span></span> import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"⚡ Reactivity Control: $watch( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/watch.md","filePath":"api/watch.md"}'),e={name:"api/watch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="⚡-reactivity-control-watch" tabindex="-1">⚡ Reactivity Control: <code>$watch( )</code> <a class="header-anchor" href="#⚡-reactivity-control-watch" aria-label="Permalink to &quot;⚡ Reactivity Control: \`$watch( )\`&quot;">​</a></h1><p>The <code>$watch</code> function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. <code>$watch</code> is <strong>polymorphic</strong>: it can track dependencies automatically or follow an explicit list.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">// Automatic Mode (Magic Tracking)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(callback: Function): StopFunction</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(callback: Function): StopFunction</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Explicit Mode (Isolated Dependencies)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Explicit Mode (Isolated Dependencies)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(deps: Signal[], callback: Function): StopFunction</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>target / deps</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;"><code>Array</code></td><td style="text-align:left;">Yes</td></tr><tr><td style="text-align:left;"><strong><code>callback</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Only in Explicit</td><td style="text-align:left;">The code that will run when the <code>deps</code> change.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>StopFunction</code> that, when called, destroys the watcher and releases memory.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-automatic-mode-default" tabindex="-1">1. Automatic Mode (Default) <a class="header-anchor" href="#_1-automatic-mode-default" aria-label="Permalink to &quot;1. Automatic Mode (Default)&quot;">​</a></h3><p>Any signal you &quot;touch&quot; inside the callback becomes a dependency. SigPro tracks them behind the scenes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(deps: Signal[], callback: Function): StopFunction</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>target / deps</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;"><code>Array</code></td><td style="text-align:left;">Yes</td></tr><tr><td style="text-align:left;"><strong><code>callback</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Only in Explicit</td><td style="text-align:left;">The code that will run when the <code>deps</code> change.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>StopFunction</code> that, when called, destroys the watcher and releases memory.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-automatic-mode-default" tabindex="-1">1. Automatic Mode (Default) <a class="header-anchor" href="#_1-automatic-mode-default" aria-label="Permalink to &quot;1. Automatic Mode (Default)&quot;">​</a></h3><p>Any signal you &quot;touch&quot; inside the callback becomes a dependency. SigPro tracks them behind the scenes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Re-runs every time &#39;count&#39; changes</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Re-runs every time &#39;count&#39; changes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Count is: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Count is: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_2-explicit-mode-advanced-cleanup-🚀" tabindex="-1">2. Explicit Mode (Advanced Cleanup) 🚀 <a class="header-anchor" href="#_2-explicit-mode-advanced-cleanup-🚀" aria-label="Permalink to &quot;2. Explicit Mode (Advanced Cleanup) 🚀&quot;">​</a></h3><p>This mode <strong>isolates</strong> execution. The callback only triggers when the signals in the array change. Any other signal accessed <em>inside</em> the callback will NOT trigger a re-run. This is the &quot;gold standard&quot; for Routers and heavy components.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sPath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_2-explicit-mode-advanced-cleanup-🚀" tabindex="-1">2. Explicit Mode (Advanced Cleanup) 🚀 <a class="header-anchor" href="#_2-explicit-mode-advanced-cleanup-🚀" aria-label="Permalink to &quot;2. Explicit Mode (Advanced Cleanup) 🚀&quot;">​</a></h3><p>This mode <strong>isolates</strong> execution. The callback only triggers when the signals in the array change. Any other signal accessed <em>inside</em> the callback will NOT trigger a re-run. This is the &quot;gold standard&quot; for Routers and heavy components.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sPath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> user</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Admin&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> user</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Admin&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([sPath], () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([sPath], () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only triggers when &#39;sPath&#39; changes.</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only triggers when &#39;sPath&#39; changes.</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Changes to &#39;user&#39; will NOT trigger this, preventing accidental re-renders.</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Changes to &#39;user&#39; will NOT trigger this, preventing accidental re-renders.</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Navigating to \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">} as \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">user</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Navigating to \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">} as \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">user</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_3-automatic-cleanup" tabindex="-1">3. Automatic Cleanup <a class="header-anchor" href="#_3-automatic-cleanup" aria-label="Permalink to &quot;3. Automatic Cleanup&quot;">​</a></h3><p>If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as &quot;children&quot; of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_3-automatic-cleanup" tabindex="-1">3. Automatic Cleanup <a class="header-anchor" href="#_3-automatic-cleanup" aria-label="Permalink to &quot;3. Automatic Cleanup&quot;">​</a></h3><p>If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as &quot;children&quot; of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> timer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setInterval</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tick&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> timer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setInterval</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tick&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</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;"> </span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Register a manual cleanup if needed</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Register a manual cleanup if needed</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Or simply rely on SigPro to kill nested $.watch() calls</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Or simply rely on SigPro to kill nested $watch() calls</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(timer);</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(timer);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="🛑-stopping-a-watcher" tabindex="-1">🛑 Stopping a Watcher <a class="header-anchor" href="#🛑-stopping-a-watcher" aria-label="Permalink to &quot;🛑 Stopping a Watcher&quot;">​</a></h2><p>Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="🛑-stopping-a-watcher" tabindex="-1">🛑 Stopping a Watcher <a class="header-anchor" href="#🛑-stopping-a-watcher" aria-label="Permalink to &quot;🛑 Stopping a Watcher&quot;">​</a></h2><p>Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $watch</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later...</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later...</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The link between the signal and this code is physically severed.</span></span></code></pre></div><hr><h2 id="💡-pro-tip-the-microtask-queue" tabindex="-1">💡 Pro Tip: The Microtask Queue <a class="header-anchor" href="#💡-pro-tip-the-microtask-queue" aria-label="Permalink to &quot;💡 Pro Tip: The Microtask Queue&quot;">​</a></h2><p>SigPro batches updates. If you update multiple signals in the same execution block, the watcher will only fire <strong>once</strong> at the end of the task.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The link between the signal and this code is physically severed.</span></span></code></pre></div><hr><h2 id="💡-pro-tip-the-microtask-queue" tabindex="-1">💡 Pro Tip: The Microtask Queue <a class="header-anchor" href="#💡-pro-tip-the-microtask-queue" aria-label="Permalink to &quot;💡 Pro Tip: The Microtask Queue&quot;">​</a></h2><p>SigPro batches updates. If you update multiple signals in the same execution block, the watcher will only fire <strong>once</strong> at the end of the task.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> b</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> b</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
<span class="line"></span> <span class="line"></span>
<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:#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;">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>

1
docs/assets/api_watch.md.Dc5wZqk9.lean.js Normal file
View File

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

8
docs/assets/install.md.C1tyiPaQ.js → docs/assets/install.md.CrzPbqO_.js
View File

File diff suppressed because one or more lines are too long

0
docs/assets/install.md.C1tyiPaQ.lean.js → docs/assets/install.md.CrzPbqO_.lean.js
View File

8
docs/assets/ui_quick.md.CsppjR8J.js → docs/assets/ui_quick.md.CL4k0g3a.js
View File

@@ -1,4 +1,4 @@
import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t(`<h1 id="🧩-ui-components-wip" tabindex="-1">🧩 UI Components <code>(WIP)</code> <a class="header-anchor" href="#🧩-ui-components-wip" aria-label="Permalink to &quot;🧩 UI Components \`(WIP)\`&quot;">​</a></h1><blockquote><p><strong>Status: Work In Progress.</strong> &gt; These are high-level, complex visual components designed to speed up development. They replace native HTML elements with &quot;superpowered&quot; versions that handle their own internal logic, reactivity, and professional styling.</p></blockquote><h2 id="⚠️-prerequisites" tabindex="-1">⚠️ Prerequisites <a class="header-anchor" href="#⚠️-prerequisites" aria-label="Permalink to &quot;⚠️ Prerequisites&quot;">​</a></h2><p>To ensure all components render correctly with their reactive themes and states, your project <strong>must</strong> have the following versions installed:</p><ul><li><strong>Tailwind CSS v4+</strong>: For the new engine performance and modern CSS variables.</li><li><strong>DaisyUI v5+</strong>: Required for the updated theme-selectors and improved component classes used in the SigPro UI library.</li></ul><hr><h2 id="_1-what-are-ui-components" tabindex="-1">1. What are UI Components? <a class="header-anchor" href="#_1-what-are-ui-components" aria-label="Permalink to &quot;1. What are UI Components?&quot;">​</a></h2><p>Unlike <strong>Tag Helpers</strong> (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:</p><ul><li><strong>Stateful</strong>: They manage complex internal states (like date ranges, search filtering, or API lifecycles).</li><li><strong>Reactive</strong>: Attributes prefixed with <code>$</code> are automatically tracked via <code>$.watch</code>.</li><li><strong>Self-Sane</strong>: They automatically use <code>._cleanups</code> to destroy observers or event listeners when removed from the DOM.</li><li><strong>Themed</strong>: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.</li></ul><hr><h2 id="_2-the-ui-registry-available-now" tabindex="-1">2. The UI Registry (Available Now) <a class="header-anchor" href="#_2-the-ui-registry-available-now" aria-label="Permalink to &quot;2. The UI Registry (Available Now)&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Components</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Forms &amp; Inputs</strong></td><td style="text-align:left;"><code>Button</code>, <code>Input</code>, <code>Select</code>, <code>Autocomplete</code>, <code>Datepicker</code>, <code>Colorpicker</code>, <code>CheckBox</code>, <code>Radio</code>, <code>Range</code>, <code>Rating</code>, <code>Swap</code></td></tr><tr><td style="text-align:left;"><strong>Feedback</strong></td><td style="text-align:left;"><code>Alert</code>, <code>Toast</code>, <code>Modal</code>, <code>Loading</code>, <code>Badge</code>, <code>Tooltip</code>, <code>Indicator</code></td></tr><tr><td style="text-align:left;"><strong>Navigation</strong></td><td style="text-align:left;"><code>Navbar</code>, <code>Menu</code>, <code>Drawer</code>, <code>Tabs</code>, <code>Accordion</code>, <code>Dropdown</code></td></tr><tr><td style="text-align:left;"><strong>Data &amp; Layout</strong></td><td style="text-align:left;"><code>Request</code>, <code>Response</code>, <code>Grid</code> (AG-Grid), <code>List</code>, <code>Stack</code>, <code>Timeline</code>, <code>Stat</code>, <code>Fieldset</code>, <code>Fab</code></td></tr></tbody></table><hr><h2 id="_3-examples-with-superpowers" tabindex="-1">3. Examples with &quot;Superpowers&quot; <a class="header-anchor" href="#_3-examples-with-superpowers" aria-label="Permalink to &quot;3. Examples with &quot;Superpowers&quot;&quot;">​</a></h2><h3 id="a-the-declarative-api-flow-request-response" tabindex="-1">A. The Declarative API Flow (<code>Request</code> &amp; <code>Response</code>) <a class="header-anchor" href="#a-the-declarative-api-flow-request-response" aria-label="Permalink to &quot;A. The Declarative API Flow (\`Request\` &amp; \`Response\`)&quot;">​</a></h3><p>Instead of manually managing <code>loading</code> and <code>error</code> flags, use these together to handle data fetching elegantly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Define the request (it tracks dependencies automatically)</span></span> import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t(`<h1 id="🧩-ui-components-wip" tabindex="-1">🧩 UI Components <code>(WIP)</code> <a class="header-anchor" href="#🧩-ui-components-wip" aria-label="Permalink to &quot;🧩 UI Components \`(WIP)\`&quot;">​</a></h1><blockquote><p><strong>Status: Work In Progress.</strong> &gt; These are high-level, complex visual components designed to speed up development. They replace native HTML elements with &quot;superpowered&quot; versions that handle their own internal logic, reactivity, and professional styling.</p></blockquote><h2 id="⚠️-prerequisites" tabindex="-1">⚠️ Prerequisites <a class="header-anchor" href="#⚠️-prerequisites" aria-label="Permalink to &quot;⚠️ Prerequisites&quot;">​</a></h2><p>To ensure all components render correctly with their reactive themes and states, your project <strong>must</strong> have the following versions installed:</p><ul><li><strong>Tailwind CSS v4+</strong>: For the new engine performance and modern CSS variables.</li><li><strong>DaisyUI v5+</strong>: Required for the updated theme-selectors and improved component classes used in the SigPro UI library.</li></ul><hr><h2 id="_1-what-are-ui-components" tabindex="-1">1. What are UI Components? <a class="header-anchor" href="#_1-what-are-ui-components" aria-label="Permalink to &quot;1. What are UI Components?&quot;">​</a></h2><p>Unlike <strong>Tag Helpers</strong> (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:</p><ul><li><strong>Stateful</strong>: They manage complex internal states (like date ranges, search filtering, or API lifecycles).</li><li><strong>Reactive</strong>: Attributes prefixed with <code>$</code> are automatically tracked via <code>$watch</code>.</li><li><strong>Self-Sane</strong>: They automatically use <code>._cleanups</code> to destroy observers or event listeners when removed from the DOM.</li><li><strong>Themed</strong>: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.</li></ul><hr><h2 id="_2-the-ui-registry-available-now" tabindex="-1">2. The UI Registry (Available Now) <a class="header-anchor" href="#_2-the-ui-registry-available-now" aria-label="Permalink to &quot;2. The UI Registry (Available Now)&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Components</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Forms &amp; Inputs</strong></td><td style="text-align:left;"><code>Button</code>, <code>Input</code>, <code>Select</code>, <code>Autocomplete</code>, <code>Datepicker</code>, <code>Colorpicker</code>, <code>CheckBox</code>, <code>Radio</code>, <code>Range</code>, <code>Rating</code>, <code>Swap</code></td></tr><tr><td style="text-align:left;"><strong>Feedback</strong></td><td style="text-align:left;"><code>Alert</code>, <code>Toast</code>, <code>Modal</code>, <code>Loading</code>, <code>Badge</code>, <code>Tooltip</code>, <code>Indicator</code></td></tr><tr><td style="text-align:left;"><strong>Navigation</strong></td><td style="text-align:left;"><code>Navbar</code>, <code>Menu</code>, <code>Drawer</code>, <code>Tabs</code>, <code>Accordion</code>, <code>Dropdown</code></td></tr><tr><td style="text-align:left;"><strong>Data &amp; Layout</strong></td><td style="text-align:left;"><code>Request</code>, <code>Response</code>, <code>Grid</code> (AG-Grid), <code>List</code>, <code>Stack</code>, <code>Timeline</code>, <code>Stat</code>, <code>Fieldset</code>, <code>Fab</code></td></tr></tbody></table><hr><h2 id="_3-examples-with-superpowers" tabindex="-1">3. Examples with &quot;Superpowers&quot; <a class="header-anchor" href="#_3-examples-with-superpowers" aria-label="Permalink to &quot;3. Examples with &quot;Superpowers&quot;&quot;">​</a></h2><h3 id="a-the-declarative-api-flow-request-response" tabindex="-1">A. The Declarative API Flow (<code>Request</code> &amp; <code>Response</code>) <a class="header-anchor" href="#a-the-declarative-api-flow-request-response" aria-label="Permalink to &quot;A. The Declarative API Flow (\`Request\` &amp; \`Response\`)&quot;">​</a></h3><p>Instead of manually managing <code>loading</code> and <code>error</code> flags, use these together to handle data fetching elegantly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Define the request (it tracks dependencies automatically)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> userProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> userProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Request</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:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`https://api.example.com/user/\${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">userId</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`https://api.example.com/user/\${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">userId</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</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>
@@ -25,7 +25,7 @@ import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select Expiry Date&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select Expiry Date&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: myDate,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: myDate,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> range: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> range: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="d-imperative-toasts-modals" tabindex="-1">D. Imperative Toasts &amp; Modals <a class="header-anchor" href="#d-imperative-toasts-modals" aria-label="Permalink to &quot;D. Imperative Toasts &amp; Modals&quot;">​</a></h3><p>Trigger complex UI elements from your logic. These components use <code>$.mount</code> internally to ensure they are properly cleaned up from memory after they close.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show a notification (Self-destroying after 3s)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="d-imperative-toasts-modals" tabindex="-1">D. Imperative Toasts &amp; Modals <a class="header-anchor" href="#d-imperative-toasts-modals" aria-label="Permalink to &quot;D. Imperative Toasts &amp; Modals&quot;">​</a></h3><p>Trigger complex UI elements from your logic. These components use <code>$mount</code> internally to ensure they are properly cleaned up from memory after they close.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show a notification (Self-destroying after 3s)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings saved successfully!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;alert-success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings saved successfully!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;alert-success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span> <span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Control a modal with a simple signal</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Control a modal with a simple signal</span></span>
@@ -37,8 +37,8 @@ import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> buttons: [</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> buttons: [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;btn-error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onclick: doDelete }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Confirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;btn-error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onclick: doDelete }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Confirm&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> <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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This action cannot be undone.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-internationalization-i18n" tabindex="-1">4. Internationalization (i18n) <a class="header-anchor" href="#_4-internationalization-i18n" aria-label="Permalink to &quot;4. Internationalization (i18n)&quot;">​</a></h2><p>The UI library comes with a built-in locale system. It currently supports <code>es</code> and <code>en</code>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Set the global UI language</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This action cannot be undone.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-internationalization-i18n" tabindex="-1">4. Internationalization (i18n) <a class="header-anchor" href="#_4-internationalization-i18n" aria-label="Permalink to &quot;4. Internationalization (i18n)&quot;">​</a></h2><p>The UI library comes with a built-in locale system.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Set the global UI language</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SetLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SetLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span> <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:#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>`,33)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default}; <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>`,30)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};

2
docs/assets/ui_quick.md.CsppjR8J.lean.js → docs/assets/ui_quick.md.CL4k0g3a.lean.js
View File

@@ -1 +1 @@
import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t("",33)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default}; import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t("",30)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};

2
docs/hashmap.json
View File

@@ -1 +1 @@
{"api_for.md":"CGMDz0Px","api_html.md":"DSCIaSlE","api_if.md":"C-36XjK0","api_mount.md":"CoM2SFqU","api_quick.md":"D3C2EJww","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"BKWIb8mV","api_watch.md":"BEM6Qssx","index.md":"By6smViD","install.md":"C1tyiPaQ","ui_quick.md":"CsppjR8J","vite_plugin.md":"CTs8LDIL"} {"api_for.md":"3GRpYy3h","api_html.md":"QmhwKd7f","api_if.md":"2-2cm9cb","api_mount.md":"B3RUsjff","api_quick.md":"Coriz0Dx","api_router.md":"DxC_B3iU","api_signal.md":"BmorvARW","api_tags.md":"BPbc38UO","api_watch.md":"Dc5wZqk9","index.md":"By6smViD","install.md":"CrzPbqO_","ui_quick.md":"CL4k0g3a","vite_plugin.md":"CTs8LDIL"}

2
docs/index.html
View File

File diff suppressed because one or more lines are too long

12
docs/install.html
View File

File diff suppressed because one or more lines are too long

12
docs/ui/quick.html
View File

File diff suppressed because one or more lines are too long

4
docs/vite/plugin.html
View File

File diff suppressed because one or more lines are too long

2
sigpro/sigpro.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
src/docs/.vitepress/config.js
View File

@@ -40,13 +40,13 @@ export default defineConfig({
text: 'API Reference', text: 'API Reference',
items: [ items: [
{ text: 'Quick Start', link: '/api/quick' }, { text: 'Quick Start', link: '/api/quick' },
{ text: '$', link: '/api/signal' }, { text: '$ signals', link: '/api/signal' },
{ text: '$.watch', link: '/api/watch' }, { text: '$watch', link: '/api/watch' },
{ text: '$.if', link: '/api/if' }, { text: '$if', link: '/api/if' },
{ text: '$.for', link: '/api/for' }, { text: '$for', link: '/api/for' },
{ text: '$.router', link: '/api/router' }, { text: '$router', link: '/api/router' },
{ text: '$.mount', link: '/api/mount' }, { text: '$mount', link: '/api/mount' },
{ text: '$.html', link: '/api/html' }, { text: '$html', link: '/api/html' },
{ text: 'Tags', link: '/api/tags' }, { text: 'Tags', link: '/api/tags' },
] ]
}, },

16
src/docs/api/for.md
View File

@@ -1,11 +1,11 @@
# ♻️ Reactive Lists: `$.for( )` # ♻️ Reactive Lists: `$for( )`
The `$.for` function is a high-performance list renderer. It maps an array (or a Signal containing an array) to DOM nodes. Unlike a simple `.map()`, `$.for` is **keyed**, meaning it only updates, moves, or deletes the specific items that changed. The `$for` function is a high-performance list renderer. It maps an array (or a Signal containing an array) to DOM nodes. Unlike a simple `.map()`, `$for` is **keyed**, meaning it only updates, moves, or deletes the specific items that changed.
## 🛠️ Function Signature ## 🛠️ Function Signature
```typescript ```typescript
$.for( $for(
source: Signal<any[]> | Function | any[], source: Signal<any[]> | Function | any[],
render: (item: any, index: number) => HTMLElement, render: (item: any, index: number) => HTMLElement,
keyFn: (item: any, index: number) => string | number keyFn: (item: any, index: number) => string | number
@@ -34,7 +34,7 @@ const users = $([
]); ]);
Ul({ class: "list" }, [ Ul({ class: "list" }, [
$.for(users, $for(users,
(user) => Li({ class: "p-2" }, user.name), (user) => Li({ class: "p-2" }, user.name),
(user) => user.id (user) => user.id
) )
@@ -48,7 +48,7 @@ If your array contains simple strings or numbers, you can use the value itself o
const tags = $(["Tech", "JS", "Web"]); const tags = $(["Tech", "JS", "Web"]);
Div({ class: "flex gap-1" }, [ Div({ class: "flex gap-1" }, [
$.for(tags, (tag) => Badge(tag), (tag) => tag) $for(tags, (tag) => Badge(tag), (tag) => tag)
]); ]);
``` ```
@@ -56,7 +56,7 @@ Div({ class: "flex gap-1" }, [
## 🏗️ How it Works (The Reconciliation) ## 🏗️ How it Works (The Reconciliation)
When the `source` signal changes, `$.for` performs the following steps: When the `source` signal changes, `$for` performs the following steps:
1. **Key Diffing**: It compares the new keys with the previous ones stored in an internal `Map`. 1. **Key Diffing**: It compares the new keys with the previous ones stored in an internal `Map`.
2. **Node Reuse**: If a key already exists, the DOM node is **reused** and moved to its new position. No new elements are created. 2. **Node Reuse**: If a key already exists, the DOM node is **reused** and moved to its new position. No new elements are created.
@@ -69,13 +69,13 @@ When the `source` signal changes, `$.for` performs the following steps:
## 💡 Performance Tips ## 💡 Performance Tips
* **Stable Keys**: Never use `Math.random()` as a key. This will force SigPro to destroy and recreate the entire list on every update, killing performance. * **Stable Keys**: Never use `Math.random()` as a key. This will force SigPro to destroy and recreate the entire list on every update, killing performance.
* **Component Encapsulation**: If each item in your list has its own complex internal state, `$.for` ensures that state is preserved even if the list is reordered, as long as the key remains the same. * **Component Encapsulation**: If each item in your list has its own complex internal state, `$for` ensures that state is preserved even if the list is reordered, as long as the key remains the same.
--- ---
## 🧪 Summary Comparison ## 🧪 Summary Comparison
| Feature | Standard `Array.map` | SigPro `$.for` | | Feature | Standard `Array.map` | SigPro `$for` |
| :--- | :--- | :--- | | :--- | :--- | :--- |
| **Re-render** | Re-renders everything | Only updates changes | | **Re-render** | Re-renders everything | Only updates changes |
| **DOM Nodes** | Re-created every time | **Reused via Keys** | | **DOM Nodes** | Re-created every time | **Reused via Keys** |

14
src/docs/api/html.md
View File

@@ -1,11 +1,11 @@
# 🏗️ The DOM Factory: `$.html( )` # 🏗️ The DOM Factory: `$html( )`
`$.html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses `$.watch` to maintain a live, high-performance link between your Signals and the Document Object Model. `$html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses `$.watch` to maintain a live, high-performance link between your Signals and the Document Object Model.
## 🛠 Function Signature ## 🛠 Function Signature
```typescript ```typescript
$.html(tagName: string, props?: Object, children?: any[] | any): HTMLElement $html(tagName: string, props?: Object, children?: any[] | any): HTMLElement
``` ```
| Parameter | Type | Required | Description | | Parameter | Type | Required | Description |
@@ -34,7 +34,7 @@ Button({
``` ```
### 3. Reactive Attributes (One-Way) ### 3. Reactive Attributes (One-Way)
If an attribute value is a **function** (like a Signal), `$.html` creates an internal **`$.watch`** to keep the DOM in sync with the state. If an attribute value is a **function** (like a Signal), `$html` creates an internal **`$.watch`** to keep the DOM in sync with the state.
```javascript ```javascript
Div({ Div({
@@ -72,7 +72,7 @@ Div({}, [
--- ---
## 🧹 Memory Management (Internal) ## 🧹 Memory Management (Internal)
Every element created with `$.html` is "self-aware" regarding its reactive dependencies. Every element created with `$html` is "self-aware" regarding its reactive dependencies.
* **`._cleanups`**: A hidden `Set` attached to the element that stores all `stop()` functions from its internal `$.watch` calls and event listeners. * **`._cleanups`**: A hidden `Set` attached to the element that stores all `stop()` functions from its internal `$.watch` calls and event listeners.
* **Lifecycle**: When an element is removed by a Controller (`$.if`, `$.for`, or `$.router`), SigPro performs a recursive **"sweep"** to execute these cleanups, ensuring **zero memory leaks**. * **Lifecycle**: When an element is removed by a Controller (`$.if`, `$.for`, or `$.router`), SigPro performs a recursive **"sweep"** to execute these cleanups, ensuring **zero memory leaks**.
@@ -80,12 +80,12 @@ Every element created with `$.html` is "self-aware" regarding its reactive depen
## 💡 Tag Constructors (The Shortcuts) ## 💡 Tag Constructors (The Shortcuts)
Instead of writing `$.html("div", ...)` every time, SigPro provides PascalCase global functions for all standard HTML tags: Instead of writing `$html("div", ...)` every time, SigPro provides PascalCase global functions for all standard HTML tags:
```javascript ```javascript
// This: // This:
Div({ class: "wrapper" }, [ Span("Hello") ]) Div({ class: "wrapper" }, [ Span("Hello") ])
// Is exactly equivalent to: // Is exactly equivalent to:
$.html("div", { class: "wrapper" }, [ $.html("span", {}, "Hello") ]) $html("div", { class: "wrapper" }, [ $html("span", {}, "Hello") ])
``` ```

18
src/docs/api/if.md
View File

@@ -1,12 +1,12 @@
# 🔀 Reactive Branching: `$.if( )` # 🔀 Reactive Branching: `$if( )`
The `$.if` function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory. The `$if` function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.
## 🛠️ Function Signature ## 🛠️ Function Signature
```typescript ```typescript
$.if( $if(
condition: Signal<boolean> | Function, condition: Signal<boolean> | Function,
thenVal: Component | Node, thenVal: Component | Node,
otherwiseVal?: Component | Node otherwiseVal?: Component | Node
@@ -34,7 +34,7 @@ const isVisible = $(false);
Div([ Div([
Button({ onclick: () => isVisible(!isVisible()) }, "Toggle Message"), Button({ onclick: () => isVisible(!isVisible()) }, "Toggle Message"),
$.if(isVisible, $if(isVisible,
P("Now you see me!"), P("Now you see me!"),
P("Now you don't...") P("Now you don't...")
) )
@@ -42,10 +42,10 @@ Div([
``` ```
### 2. Lazy Component Loading ### 2. Lazy Component Loading
Unlike using a hidden class (CSS `display: none`), `$.if` is **lazy**. The branch that isn't active **is never created**. This saves memory and initial processing time. Unlike using a hidden class (CSS `display: none`), `$if` is **lazy**. The branch that isn't active **is never created**. This saves memory and initial processing time.
```javascript ```javascript
$.if(() => user.isLogged(), $if(() => user.isLogged(),
() => Dashboard(), // Only executed if logged in () => Dashboard(), // Only executed if logged in
() => LoginGate() // Only executed if guest () => LoginGate() // Only executed if guest
) )
@@ -55,7 +55,7 @@ $.if(() => user.isLogged(),
## 🧹 Automatic Cleanup ## 🧹 Automatic Cleanup
One of the core strengths of `$.if` is its integrated **Cleanup** logic. SigPro ensures that when a branch is swapped out, it is completely purged. One of the core strengths of `$if` is its integrated **Cleanup** logic. SigPro ensures that when a branch is swapped out, it is completely purged.
1. **Stop Watchers**: All `$.watch` calls inside the inactive branch are permanently stopped. 1. **Stop Watchers**: All `$.watch` calls inside the inactive branch are permanently stopped.
2. **Unbind Events**: Event listeners attached via `$.html` are removed. 2. **Unbind Events**: Event listeners attached via `$.html` are removed.
@@ -70,7 +70,7 @@ One of the core strengths of `$.if` is its integrated **Cleanup** logic. SigPro
* **Function Wrappers**: If your branches are heavy (e.g., they contain complex components), wrap them in a function `() => MyComponent()`. This prevents the component from being initialized until the condition actually meets its requirement. * **Function Wrappers**: If your branches are heavy (e.g., they contain complex components), wrap them in a function `() => MyComponent()`. This prevents the component from being initialized until the condition actually meets its requirement.
* **Logical Expressions**: You can pass a complex computed function as the condition: * **Logical Expressions**: You can pass a complex computed function as the condition:
```javascript ```javascript
$.if(() => count() > 10 && status() === 'ready', $if(() => count() > 10 && status() === 'ready',
Span("Threshold reached!") Span("Threshold reached!")
) )
``` ```
@@ -79,7 +79,7 @@ One of the core strengths of `$.if` is its integrated **Cleanup** logic. SigPro
## 🏗️ Technical Comparison ## 🏗️ Technical Comparison
| Feature | Standard CSS `hidden` | SigPro `$.if` | | Feature | Standard CSS `hidden` | SigPro `$if` |
| :--- | :--- | :--- | | :--- | :--- | :--- |
| **DOM Presence** | Always present | Only if active | | **DOM Presence** | Always present | Only if active |
| **Reactivity** | Still processing in background | **Paused/Destroyed** | | **Reactivity** | Still processing in background | **Paused/Destroyed** |

30
src/docs/api/mount.md
View File

@@ -1,11 +1,11 @@
# 🔌 Application Mounter: `$.mount( )` # 🔌 Application Mounter: `$mount( )`
The `$.mount` function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document and initializing its reactive lifecycle. The `$mount` function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document and initializing its reactive lifecycle.
## 🛠️ Function Signature ## 🛠️ Function Signature
```typescript ```typescript
$.mount(node: Function | HTMLElement, target?: string | HTMLElement): RuntimeObject $mount(node: Function | HTMLElement, target?: string | HTMLElement): RuntimeObject
``` ```
| Parameter | Type | Default | Description | | Parameter | Type | Default | Description |
@@ -27,7 +27,7 @@ import { $ } from './sigpro.js';
import App from './App.js'; import App from './App.js';
// Mounts your main App component // Mounts your main App component
$.mount(App, '#app-root'); $mount(App, '#app-root');
``` ```
### 2. Reactive "Islands" ### 2. Reactive "Islands"
@@ -42,17 +42,17 @@ const Counter = () => {
}; };
// Mount only the counter into a specific sidebar div // Mount only the counter into a specific sidebar div
$.mount(Counter, '#sidebar-widget'); $mount(Counter, '#sidebar-widget');
``` ```
--- ---
## 🔄 How it Works (Lifecycle & Cleanup) ## 🔄 How it Works (Lifecycle & Cleanup)
When `$.mount` is executed, it performs these critical steps to ensure a leak-free environment: When `$mount` is executed, it performs these critical steps to ensure a leak-free environment:
1. **Duplicate Detection**: If you call `$.mount` on a target that already has a SigPro instance, it automatically calls `.destroy()` on the previous instance. This prevents "Zombie Effects" from stacking in memory. 1. **Duplicate Detection**: If you call `$mount` on a target that already has a SigPro instance, it automatically calls `.destroy()` on the previous instance. This prevents "Zombie Effects" from stacking in memory.
2. **Internal Scoping**: It executes the component function inside an internal **Reactive Owner**. This captures every `$.watch` and event listener created during the render. 2. **Internal Scoping**: It executes the component function inside an internal **Reactive Owner**. This captures every `$watch` and event listener created during the render.
3. **Target Injection**: It clears the target using `replaceChildren()` and appends the new component. 3. **Target Injection**: It clears the target using `replaceChildren()` and appends the new component.
4. **Runtime Creation**: It returns a control object: 4. **Runtime Creation**: It returns a control object:
* `container`: The actual DOM element created. * `container`: The actual DOM element created.
@@ -62,10 +62,10 @@ When `$.mount` is executed, it performs these critical steps to ensure a leak-fr
## 🛑 Manual Unmounting ## 🛑 Manual Unmounting
While SigPro handles most cleanups automatically (via `$.If`, `$.For`, and `$.router`), you can manually destroy any mounted instance. This is vital for imperatively managed UI like **Toasts** or **Modals**. While SigPro handles most cleanups automatically (via `$if`, `$for`, and `$router`), you can manually destroy any mounted instance. This is vital for imperatively managed UI like **Toasts** or **Modals**.
```javascript ```javascript
const instance = $.mount(MyToast, '#toast-container'); const instance = $mount(MyToast, '#toast-container');
// Later, to remove the toast and kill its reactivity: // Later, to remove the toast and kill its reactivity:
instance.destroy(); instance.destroy();
@@ -77,9 +77,9 @@ instance.destroy();
| Goal | Code Pattern | | Goal | Code Pattern |
| :--- | :--- | | :--- | :--- |
| **Mount to body** | `$.mount(App)` | | **Mount to body** | `$mount(App)` |
| **Mount to CSS Selector** | `$.mount(App, '#root')` | | **Mount to CSS Selector** | `$mount(App, '#root')` |
| **Mount to DOM Node** | `$.mount(App, myElement)` | | **Mount to DOM Node** | `$mount(App, myElement)` |
| **Clean & Re-mount** | Calling `$.mount` again on the same target | | **Clean & Re-mount** | Calling `$mount` again on the same target |
| **Total Cleanup** | `const app = $.mount(App); app.destroy();` | | **Total Cleanup** | `const app = $mount(App); app.destroy();` |

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

@@ -8,13 +8,13 @@ SigPro is a high-performance micro-framework that updates the **Real DOM** surgi
| :--- | :--- | :--- | | :--- | :--- | :--- |
| **`$(val, key?)`** | `(any, string?) => Signal` | Creates a **Signal**. If `key` is provided, it persists in `localStorage`. | | **`$(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. | | **`$(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(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 Cleanup. | | **`$watch(deps, fn)`** | `(Array, function) => stopFn` | **Explicit Mode:** Only runs when signals in `deps` change. Used for Cleanup. |
| **`$.html(tag, props, kids)`** | `(string, obj, any) => Element` | The low-level DOM factory. Attaches `._cleanups` to every element. | | **`$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. | | **`$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. | | **`$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. | | **`$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. | | **`$mount(node, target)`** | `(any, string\|Node) => Runtime` | Entry point. Creates a root instance with `.destroy()` capabilities. |
--- ---
@@ -32,7 +32,7 @@ Tag({ attributes }, [children])
| Pattern | Code Example | Behavior | | Pattern | Code Example | Behavior |
| :--- | :--- | :--- | | :--- | :--- | :--- |
| **Static** | `class: "text-red"` | Standard HTML attribute string. | | **Static** | `class: "text-red"` | Standard HTML attribute string. |
| **Reactive** | `disabled: isLoading` | Updates automatically via internal `$.watch`. | | **Reactive** | `disabled: isLoading` | Updates automatically via internal `$watch`. |
| **Two-way** | `$value: username` | **Binding Operator**: Syncs input $\leftrightarrow$ signal both ways. | | **Two-way** | `$value: username` | **Binding Operator**: Syncs input $\leftrightarrow$ signal both ways. |
| **Text** | `P({}, () => count())` | Updates text node surgically without re-rendering the `P`. | | **Text** | `P({}, () => count())` | Updates text node surgically without re-rendering the `P`. |
| **Boolean** | `hidden: isHidden` | Toggles the attribute based on signal truthiness. | | **Boolean** | `hidden: isHidden` | Toggles the attribute based on signal truthiness. |

63
src/docs/api/router.md
View File

@@ -1,40 +1,40 @@
# 🚦 Routing: `$.router( )` & `$.go( )` # 🚦 Routing: `$router()` & Utilities
SigPro includes a built-in, lightweight **Hash Router** to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically. SigPro includes a built-in, lightweight **Hash Router** to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically.
## 🛠 Router Signature ## 🛠 Router Signature
```typescript ```typescript
$.router(routes: Route[]): HTMLElement $router(routes: Route[]): HTMLElement
``` ```
### Route Object ### Route Object
| Property | Type | Description | | Property | Type | Description |
| :--- | :--- | :--- | | :--- | :--- | :--- |
| **`path`** | `string` | The URL fragment (e.g., `"/home"`, `"/user/:id"`, or `"*"`). | | **`path`** | `string` | The URL fragment (e.g., `"/"`, `"/user/:id"`, or `"*"`). |
| **`component`** | `Function` | A function that returns a Tag or a `$.view`. | | **`component`** | `Function` | A function that returns a Node, a String, or a reactive View. |
--- ---
## 📖 Usage Patterns ## 📖 Usage Patterns
### 1. Defining Routes ### 1. Defining Routes
The router returns a `div` element with the class `.router-outlet`. When the hash changes, the router destroys the previous view and mounts the new one inside this container. The `$router` returns a `div` element with the class `.router-outlet`. When the hash changes, the router destroys the previous view and mounts the new one inside this container.
```javascript ```javascript
const App = () => Div({ class: "app-layout" }, [ const App = () => Div({ class: "app-layout" }, [
Navbar(), Navbar(),
// The router outlet is placed here // The router outlet is placed here
$.router([ $router([
{ path: "/", component: Home }, { path: "/", component: Home },
{ path: "/profile/:id", component: UserProfile }, { path: "/profile/:id", component: (params) => UserProfile(params.id) },
{ path: "*", component: NotFound } { path: "*", component: () => H1("404 Not Found") }
]) ])
]); ]);
``` ```
### 2. Dynamic Segments (`:id`) ### 2. Dynamic Segments (`:id`)
When a path contains a colon (e.g., `:id`), the router parses that segment and passes it as an object to the component function. The router automatically parses URL parameters (like `:id`) and passes them as an object to the component function. You can also access them globally via `$router.params()`.
```javascript ```javascript
// If the URL is #/profile/42 // If the URL is #/profile/42
@@ -45,43 +45,52 @@ const UserProfile = (params) => {
--- ---
## 🏎 Programmatic Navigation: `$.go( )` ## 🏎 Navigation Utilities
To navigate between pages without using an `<a>` tag, use `$.go`. This function updates the browser's hash, which in turn triggers the router to swap components. SigPro provides a set of programmatic methods to control the history and read the state.
### Signature ### `$router.to(path)`
```typescript Navigates to a specific path. It automatically formats the hash (e.g., `/home` becomes `#/home`).
$.go(path: string): void ```javascript
Button({ onclick: () => $router.to("/dashboard") }, "Go to Dashboard")
``` ```
### Examples ### `$router.back()`
Goes back to the previous page in the browser history.
```javascript ```javascript
// Navigate to a static path Button({ onclick: () => $router.back() }, "Back")
Button({ onclick: () => $.go("/") }, "Home") ```
// Navigate to a dynamic path ### `$router.path()`
Button({ Returns the current path (without the `#`).
onclick: () => $.go(`/profile/${user.id}`) ```javascript
}, "View Profile") $watch(() => {
console.log("Current path is:", $router.path());
});
``` ```
--- ---
## ⚡ Technical Behavior ## ⚡ Technical Behavior
* **Automatic Cleanup**: Every time you navigate, the router calls `.destroy()` on the previous `$.view`. This ensures that all **signals, effects, and event listeners** from the old page are purged from memory. * **Automatic Cleanup**: Every time you navigate, the router calls `.destroy()` on the previous view. This ensures that all **signals, effects, and event listeners** from the old page are purged from memory.
* **Reactive Params**: `$router.params` is a signal (`$`). You can react to parameter changes without re-mounting the entire router outlet.
* **Hash-Based**: By using `window.location.hash`, SigPro works out-of-the-box on any static hosting (like GitHub Pages or Vercel) without needing server-side redirects. * **Hash-Based**: By using `window.location.hash`, SigPro works out-of-the-box on any static hosting (like GitHub Pages or Vercel) without needing server-side redirects.
* **Initial Load**: On the first execution, `$.router` automatically reads the current hash or defaults to `/` if empty.
--- ---
## 🎨 Styling the Outlet ## 🎨 Styling the Outlet
Since the router returns a standard DOM element, you can style the transition or the container easily: The router returns a standard `div` with the `.router-outlet` class. You can easily style it or add transitions:
```css ```css
.router-outlet { .router-outlet {
flex: 1; display: block;
padding: 2rem; min-height: 100vh;
animation: fadeIn 0.2s ease-in; animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} }
``` ```

12
src/docs/api/tags.md
View File

@@ -1,12 +1,12 @@
# 🎨 Global Tag Helpers # 🎨 Global Tag Helpers
In **SigPro**, you don't need to manually type `$.html('div', ...)` for every element. To keep your code declarative and readable, the engine automatically generates **Global Helper Functions** for all standard HTML5 tags upon initialization. In **SigPro**, you don't need to manually type `$html('div', ...)` for every element. To keep your code declarative and readable, the engine automatically generates **Global Helper Functions** for all standard HTML5 tags upon initialization.
## 1. How it Works ## 1. How it Works
SigPro iterates through a manifest of standard HTML tags and attaches a wrapper function for each one directly to the `window` object. This creates a specialized **DSL** (Domain Specific Language) that looks like a template engine but is **100% standard JavaScript**. SigPro iterates through a manifest of standard HTML tags and attaches a wrapper function for each one directly to the `window` object. This creates a specialized **DSL** (Domain Specific Language) that looks like a template engine but is **100% standard JavaScript**.
* **Under the hood:** `$.html('button', { onclick: ... }, 'Click')` * **Under the hood:** `$html('button', { onclick: ... }, 'Click')`
* **SigPro Style:** `Button({ onclick: ... }, 'Click')` * **SigPro Style:** `Button({ onclick: ... }, 'Click')`
--- ---
@@ -51,10 +51,10 @@ Section([
## 4. Reactive Power ## 4. Reactive Power
These helpers are natively wired into SigPro's **`$.watch`** engine. These helpers are natively wired into SigPro's **`$watch`** engine.
### Reactive Attributes (One-Way) ### Reactive Attributes (One-Way)
Simply pass a Signal (function) to any attribute. SigPro creates an internal `$.watch` to keep the DOM in sync. Simply pass a Signal (function) to any attribute. SigPro creates an internal `$watch` to keep the DOM in sync.
```javascript ```javascript
const theme = $("light"); const theme = $("light");
@@ -80,12 +80,12 @@ Input({
> **Pro Tip:** If you want an input to be **read-only** but still reactive, wrap the signal in an anonymous function: `value: () => search()`. This prevents the "backwards" synchronization. > **Pro Tip:** If you want an input to be **read-only** but still reactive, wrap the signal in an anonymous function: `value: () => search()`. This prevents the "backwards" synchronization.
### Dynamic Flow & Cleanup ### Dynamic Flow & Cleanup
Combine tags with Core controllers. SigPro automatically cleans up the `$.watch` instances and event listeners when nodes are removed from the DOM. Combine tags with Core controllers. SigPro automatically cleans up the `$watch` instances and event listeners when nodes are removed from the DOM.
```javascript ```javascript
const items = $(["Apple", "Banana", "Cherry"]); const items = $(["Apple", "Banana", "Cherry"]);
Ul({ class: "list-disc" }, [ Ul({ class: "list-disc" }, [
$.for(items, (item) => Li(item), (item) => item) $for(items, (item) => Li(item), (item) => item)
]); ]);
``` ```

20
src/docs/api/watch.md
View File

@@ -1,15 +1,15 @@
# ⚡ Reactivity Control: `$.watch( )` # ⚡ Reactivity Control: `$watch( )`
The `$.watch` function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. `$.watch` is **polymorphic**: it can track dependencies automatically or follow an explicit list. The `$watch` function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. `$watch` is **polymorphic**: it can track dependencies automatically or follow an explicit list.
## 🛠 Function Signature ## 🛠 Function Signature
```typescript ```typescript
// Automatic Mode (Magic Tracking) // Automatic Mode (Magic Tracking)
$.watch(callback: Function): StopFunction $watch(callback: Function): StopFunction
// Explicit Mode (Isolated Dependencies) // Explicit Mode (Isolated Dependencies)
$.watch(deps: Signal[], callback: Function): StopFunction $watch(deps: Signal[], callback: Function): StopFunction
``` ```
| Parameter | Type | Required | Description | | Parameter | Type | Required | Description |
@@ -29,7 +29,7 @@ Any signal you "touch" inside the callback becomes a dependency. SigPro tracks t
```javascript ```javascript
const count = $(0); const count = $(0);
$.watch(() => { $watch(() => {
// Re-runs every time 'count' changes // Re-runs every time 'count' changes
console.log(`Count is: ${count()}`); console.log(`Count is: ${count()}`);
}); });
@@ -42,7 +42,7 @@ This mode **isolates** execution. The callback only triggers when the signals in
const sPath = $("/home"); const sPath = $("/home");
const user = $("Admin"); const user = $("Admin");
$.watch([sPath], () => { $watch([sPath], () => {
// Only triggers when 'sPath' changes. // Only triggers when 'sPath' changes.
// Changes to 'user' will NOT trigger this, preventing accidental re-renders. // Changes to 'user' will NOT trigger this, preventing accidental re-renders.
console.log(`Navigating to ${sPath()} as ${user()}`); console.log(`Navigating to ${sPath()} as ${user()}`);
@@ -53,11 +53,11 @@ $.watch([sPath], () => {
If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as "children" of the current watch. When the watcher re-runs or stops, it kills everything inside automatically. If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as "children" of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.
```javascript ```javascript
$.watch(() => { $watch(() => {
const timer = setInterval(() => console.log("Tick"), 1000); const timer = setInterval(() => console.log("Tick"), 1000);
// Register a manual cleanup if needed // Register a manual cleanup if needed
// Or simply rely on SigPro to kill nested $.watch() calls // Or simply rely on SigPro to kill nested $watch() calls
return () => clearInterval(timer); return () => clearInterval(timer);
}); });
``` ```
@@ -68,7 +68,7 @@ $.watch(() => {
Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes. Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.
```javascript ```javascript
const stop = $.watch(() => console.log(count())); const stop = $watch(() => console.log(count()));
// Later... // Later...
stop(); // The link between the signal and this code is physically severed. stop(); // The link between the signal and this code is physically severed.
@@ -83,7 +83,7 @@ SigPro batches updates. If you update multiple signals in the same execution blo
const a = $(0); const a = $(0);
const b = $(0); const b = $(0);
$.watch(() => console.log(a(), b())); $watch(() => console.log(a(), b()));
// This triggers only ONE re-run. // This triggers only ONE re-run.
a(1); a(1);

4
src/docs/install.md
View File

@@ -66,7 +66,7 @@ export const App = () => {
import { $ } from 'sigpro'; import { $ } from 'sigpro';
import { App } from './App.js'; import { App } from './App.js';
$.mount(App, '#app'); $mount(App, '#app');
``` ```
```html [Classic (Direct CDN)] ```html [Classic (Direct CDN)]
@@ -91,7 +91,7 @@ $.mount(App, '#app');
}) })
]); ]);
$.mount(App, '#app'); $mount(App, '#app');
</script> </script>
</body> </body>
</html> </html>

51
src/docs/ui/buttons.md
View File

@@ -1,51 +0,0 @@
# Buttons
The **SigPro** Button component wraps [DaisyUI 5](https://daisyui.com/components/button/) styles with native reactive logic.
## Basic Usage
<button class="btn btn-primary btn-secondary btn-accent btn-neutral btn-info btn-lg btn-sm btn-xs">Test</button>
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
if (typeof window === 'undefined') return;
const init = () => {
// 1. Esperamos a que el Core ($) y los helpers (Button, Div) existan
if (!window.$ || !window.Button || !window.Input) {
setTimeout(init, 100);
return;
}
// 2. Usamos las funciones tal cual las crea tu Core (con Mayúscula inicial)
const { $, Button, Input, Div, P, Span } = window;
const Mount = $.mount;
const HTML = $.html;
// --- DEMO REACTIVA ---
const nombre = $('Mundo');
return Mount(
Div({ class: 'flex flex-col gap-4' }, [
// Usamos el helper Input de tu librería
Input({
class: 'input input-bordered input-primary w-full max-w-xs',
value: nombre, // Tu Core maneja el binding si es una señal
placeholder: 'Escribe tu nombre...'
}),
// El P y el Span también son helpers de tu Core
P({ class: 'text-xl' }, [
'Hola ',
Span({ class: 'text-primary font-bold' }, nombre),
'!'
])
]),
'#demo-input-simple'
);
};
init();
})
</script>

13
src/docs/ui/quick.md
View File

@@ -17,7 +17,7 @@ To ensure all components render correctly with their reactive themes and states,
Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions: Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:
* **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles). * **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles).
* **Reactive**: Attributes prefixed with `$` are automatically tracked via `$.watch`. * **Reactive**: Attributes prefixed with `$` are automatically tracked via `$watch`.
* **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM. * **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM.
* **Themed**: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes. * **Themed**: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.
@@ -85,7 +85,7 @@ Datepicker({
``` ```
### D. Imperative Toasts & Modals ### D. Imperative Toasts & Modals
Trigger complex UI elements from your logic. These components use `$.mount` internally to ensure they are properly cleaned up from memory after they close. Trigger complex UI elements from your logic. These components use `$mount` internally to ensure they are properly cleaned up from memory after they close.
```javascript ```javascript
// Show a notification (Self-destroying after 3s) // Show a notification (Self-destroying after 3s)
@@ -107,7 +107,7 @@ Modal({
## 4. Internationalization (i18n) ## 4. Internationalization (i18n)
The UI library comes with a built-in locale system. It currently supports `es` and `en`. The UI library comes with a built-in locale system.
```javascript ```javascript
// Set the global UI language // Set the global UI language
@@ -117,11 +117,4 @@ SetLocale("en");
const t = tt("confirm"); const t = tt("confirm");
``` ```
---
## 5. Best Practices
* **Use `$` for Reactivity**: If a property starts with `$`, the component expects a Signal (e.g., `$value: mySignal`).
* **Automatic Cleaning**: You don't need to manually destroy these components if they are inside a `$.If` or `$.For`. SigPro's core will "sweep" their internal watchers automatically.
* **Manual Cleanups**: If you build custom components using `setInterval` or third-party observers, always add the stop functions to the element's `._cleanups` Set.

0
UI/aggrid/aggrid-lib.js → ui/aggrid/aggrid-lib.js
View File

0
UI/aggrid/aggrid.js → ui/aggrid/aggrid.js
View File

0
UI/aggrid/vite.config.js → ui/aggrid/vite.config.js
View File

0
UI/index.js → ui/index.js
View File

4
UI/sigpro-ui.js → ui/sigpro-ui.js
View File

@@ -2,8 +2,8 @@
* SigPro UI - daisyUI v5 & Tailwind v4 Plugin * SigPro UI - daisyUI v5 & Tailwind v4 Plugin
* Provides a set of reactive functional components, flow control and i18n. * Provides a set of reactive functional components, flow control and i18n.
*/ */
export const UI = (core, defaultLang = "es") => { import { $, $if, $for, $watch, $html, $mount } from './sigpro.js';
const { $, $if, $for, $watch, $html, $mount } = core; export const UI = (defaultLang = "es") => {
const ui = {}; const ui = {};
// --- I18N CORE --- // --- I18N CORE ---

1
ui/sigpro-ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long