20 lines
14 KiB
JavaScript
20 lines
14 KiB
JavaScript
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 "♻️ Reactive Lists: \`$for( )\`""></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 "🛠️ Function Signature""></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;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">any[]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></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;">=></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;">=></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;">): 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>source</code></strong></td><td style="text-align:left;"><code>Signal</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">The reactive array to iterate over.</td></tr><tr><td style="text-align:left;"><strong><code>render</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A function that returns a component or Node for each item.</td></tr><tr><td style="text-align:left;"><strong><code>keyFn</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A function to extract a <strong>unique ID</strong> for each item (crucial for performance).</td></tr></tbody></table><p><strong>Returns:</strong> A <code>div</code> element with <code>display: contents</code> containing the live list.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to "📖 Usage Patterns""></a></h2><h3 id="_1-basic-keyed-list" tabindex="-1">1. Basic Keyed List <a class="header-anchor" href="#_1-basic-keyed-list" aria-label="Permalink to "1. Basic Keyed List""></a></h3><p>Always use a unique property (like an <code>id</code>) as a key to ensure SigPro doesn't recreate nodes unnecessarily.</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;"> users</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>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { id: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Alice"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { id: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Bob"</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:#6F42C1;--shiki-dark:#B392F0;">Ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"list"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</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;">=></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;">"p-2"</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;">=></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></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 "2. Handling Primitive Arrays""></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;">"Tech"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"JS"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Web"</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex gap-1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</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;">=></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;">=></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 "🏗️ How it Works (The Reconciliation)""></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'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 "💡 Performance Tips""></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 "🧪 Summary Comparison""></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};
|