Update new version

docs/assets/api_if.md.2-2cm9cb.js

@@ -0,0 +1,19 @@
+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;">  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;">): 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>condition</code></strong></td><td style="text-align:left;"><code>Signal</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A reactive source that determines which branch to render.</td></tr><tr><td style="text-align:left;"><strong><code>thenVal</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">The content to show when the condition is <strong>truthy</strong>.</td></tr><tr><td style="text-align:left;"><strong><code>otherwiseVal</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">The content to show when the condition is <strong>falsy</strong> (defaults to null).</td></tr></tbody></table><p><strong>Returns:</strong> A <code>div</code> element with <code>display: contents</code> that acts as a reactive portal for the branches.</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-simple-toggle" tabindex="-1">1. Simple Toggle <a class="header-anchor" href="#_1-simple-toggle" aria-label="Permalink to &quot;1. Simple Toggle&quot;">​</a></h3><p>The most common use case is showing or hiding a single element based on a 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:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isVisible</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;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></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;">([</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:#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 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></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;"> 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:#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:#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};