sigpro/docs/assets/api_html.md.-lEpgX-Z.js

import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Rendering Engine: $.html","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,t,r,d,p,o){return i(),a("div",null,[...t[0]||(t[0]=[e(`<h1 id="rendering-engine-html" tabindex="-1">Rendering Engine: <code>$.html</code> <a class="header-anchor" href="#rendering-engine-html" aria-label="Permalink to &quot;Rendering Engine: \`$.html\`&quot;">​</a></h1><p>The <code>$.html</code> function is the architect of your UI. It creates standard HTML elements and wires them directly to your signals without the need for a Virtual DOM.</p><h2 id="_1-syntax-html-tag-props-content" tabindex="-1">1. Syntax: <code>$.html(tag, [props], [content])</code> <a class="header-anchor" href="#_1-syntax-html-tag-props-content" aria-label="Permalink to &quot;1. Syntax: \`$.html(tag, [props], [content])\`&quot;">​</a></h2><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>tag</strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;"><strong>Yes</strong></td><td style="text-align:left;">Any valid HTML5 tag (e.g., <code>&#39;div&#39;</code>, <code>&#39;button&#39;</code>, <code>&#39;input&#39;</code>).</td></tr><tr><td style="text-align:left;"><strong>props</strong></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Attributes, event listeners, and reactive bindings.</td></tr><tr><td style="text-align:left;"><strong>content</strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Text, Nodes, Arrays, or Reactive Functions.</td></tr></tbody></table><h3 id="example" tabindex="-1">Example: <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example:&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:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myButton</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;btn-primary&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Click me&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_2-global-tag-helpers" tabindex="-1">2. Global Tag Helpers <a class="header-anchor" href="#_2-global-tag-helpers" aria-label="Permalink to &quot;2. Global Tag Helpers&quot;">​</a></h2><p>To avoid repetitive <code>$.html</code> calls, SigPro automatically exposes common tags to the global <code>window</code> object. This allows for a clean, declarative syntax.</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;">// Instead of $.html(&#39;div&#39;, ...), just use:</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;wrapper&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Welcome&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;This is SigPro.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="_3-handling-properties-attributes" tabindex="-1">3. Handling Properties &amp; Attributes <a class="header-anchor" href="#_3-handling-properties-attributes" aria-label="Permalink to &quot;3. Handling Properties &amp; Attributes&quot;">​</a></h2><p>SigPro distinguishes between static attributes and reactive bindings using the <strong><code>$</code> prefix</strong>.</p><h3 id="static-vs-reactive-attributes" tabindex="-1">Static vs. Reactive Attributes <a class="header-anchor" href="#static-vs-reactive-attributes" aria-label="Permalink to &quot;Static vs. Reactive Attributes&quot;">​</a></h3><ul><li><strong>Static:</strong> Applied once during creation.</li><li><strong>Reactive (<code>$</code>):</strong> Automatically updates the DOM when the signal changes.</li></ul><table tabindex="0"><thead><tr><th style="text-align:left;">Property</th><th style="text-align:left;">Syntax</th><th style="text-align:left;">Result</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Attribute</strong></td><td style="text-align:left;"><code>{ id: &#39;main&#39; }</code></td><td style="text-align:left;"><code>id=&quot;main&quot;</code></td></tr><tr><td style="text-align:left;"><strong>Event</strong></td><td style="text-align:left;"><code>{ onclick: fn }</code></td><td style="text-align:left;">Adds an event listener.</td></tr><tr><td style="text-align:left;"><strong>Reactive Attr</strong></td><td style="text-align:left;"><code>{ $class: $theme }</code></td><td style="text-align:left;">Updates <code>class</code> whenever <code>$theme()</code> changes.</td></tr><tr><td style="text-align:left;"><strong>Boolean Attr</strong></td><td style="text-align:left;"><code>{ $disabled: $isBusy }</code></td><td style="text-align:left;">Toggles the <code>disabled</code> attribute automatically.</td></tr></tbody></table><hr><h2 id="_4-two-way-data-binding" tabindex="-1">4. Two-Way Data Binding <a class="header-anchor" href="#_4-two-way-data-binding" aria-label="Permalink to &quot;4. Two-Way Data Binding&quot;">​</a></h2><p>For form inputs, SigPro provides a powerful shortcut using <code>$value</code> or <code>$checked</code>. It automatically handles the event listening and the value synchronization.</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;"> $text</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;Type here...&quot;</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;">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;">&#39;text&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  $value: $text </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Syncs input -&gt; signal and signal -&gt; input</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;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;You typed: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $text]);</span></span></code></pre></div><hr><h2 id="_5-reactive-content-dynamic-children" tabindex="-1">5. Reactive Content (Dynamic Children) <a class="header-anchor" href="#_5-reactive-content-dynamic-children" aria-label="Permalink to &quot;5. Reactive Content (Dynamic Children)&quot;">​</a></h2><p>The <code>content</code> argument is incredibly flexible. If you pass a <strong>function</strong>, SigPro treats it as a reactive &quot;portal&quot; that re-renders only that specific part of the DOM.</p><h3 id="text-nodes" tabindex="-1">Text &amp; Nodes <a class="header-anchor" href="#text-nodes" aria-label="Permalink to &quot;Text &amp; Nodes&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:#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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Text node updates surgically</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Count: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $count]); </span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Conditional rendering with a function</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 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;"> $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:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    ?</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;High Score!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Keep going...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="the-guillotine-performance-tip" tabindex="-1">The &quot;Guillotine&quot; (Performance Tip) <a class="header-anchor" href="#the-guillotine-performance-tip" aria-label="Permalink to &quot;The &quot;Guillotine&quot; (Performance Tip)&quot;">​</a></h3><p>When a reactive function in the content returns a <strong>new Node</strong>, SigPro uses <code>replaceWith()</code> to swap the old node for the new one. This ensures that:</p><ol><li>The update is nearly instantaneous.</li><li>The old node is correctly garbage-collected.</li></ol><hr><h2 id="_6-summary-content-types" tabindex="-1">6. Summary: Content Types <a class="header-anchor" href="#_6-summary-content-types" aria-label="Permalink to &quot;6. Summary: Content Types&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Input</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>String / Number</strong></td><td style="text-align:left;">Appended as a TextNode.</td></tr><tr><td style="text-align:left;"><strong>HTMLElement</strong></td><td style="text-align:left;">Appended directly to the parent.</td></tr><tr><td style="text-align:left;"><strong>Array</strong></td><td style="text-align:left;">Each item is processed and appended in order.</td></tr><tr><td style="text-align:left;"><strong>Function <code>() =&gt; ...</code></strong></td><td style="text-align:left;">Creates a <strong>live reactive zone</strong> that updates automatically.</td></tr></tbody></table>`,31)])])}const g=s(n,[["render",l]]);export{c as __pageData,g as default};