natxocc/sigpro_old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
sigpro_old/docs/assets/api_html.md.-lEpgX-Z.js
natxocc 7c400ad227 New docs
2026-03-22 00:44:55 +01:00

23 lines
14 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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};
Reference in New Issue View Git Blame Copy Permalink