2 lines
6.1 KiB
JavaScript
2 lines
6.1 KiB
JavaScript
import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚡ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),o={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l('<h1 id="⚡-quick-api-reference" tabindex="-1">⚡ Quick API Reference <a class="header-anchor" href="#⚡-quick-api-reference" aria-label="Permalink to "⚡ Quick API Reference""></a></h1><p>SigPro is a high-performance micro-framework that updates the <strong>Real DOM</strong> surgically. No Virtual DOM, no unnecessary re-renders, and built-in <strong>Cleanup</strong> (memory cleanup).</p><h2 id="🟢-core-functions" tabindex="-1">🟢 Core Functions <a class="header-anchor" href="#🟢-core-functions" aria-label="Permalink to "🟢 Core Functions""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Function</th><th style="text-align:left;">Signature</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>$(val, key?)</code></strong></td><td style="text-align:left;"><code>(any, string?) => Signal</code></td><td style="text-align:left;">Creates a <strong>Signal</strong>. If <code>key</code> is provided, it persists in <code>localStorage</code>.</td></tr><tr><td style="text-align:left;"><strong><code>$(fn)</code></strong></td><td style="text-align:left;"><code>(function) => Computed</code></td><td style="text-align:left;">Creates a <strong>Computed Signal</strong> that auto-updates when its dependencies change.</td></tr><tr><td style="text-align:left;"><strong><code>$.watch(fn)</code></strong></td><td style="text-align:left;"><code>(function) => stopFn</code></td><td style="text-align:left;"><strong>Automatic Mode:</strong> Tracks any signal touched inside. Returns a stop function.</td></tr><tr><td style="text-align:left;"><strong><code>$.watch(deps, fn)</code></strong></td><td style="text-align:left;"><code>(Array, function) => stopFn</code></td><td style="text-align:left;"><strong>Explicit Mode:</strong> Only runs when signals in <code>deps</code> change. Used for Cleanup.</td></tr><tr><td style="text-align:left;"><strong><code>$.html(tag, props, kids)</code></strong></td><td style="text-align:left;"><code>(string, obj, any) => Element</code></td><td style="text-align:left;">The low-level DOM factory. Attaches <code>._cleanups</code> to every element.</td></tr><tr><td style="text-align:left;"><strong><code>$.if(cond, then, else?)</code></strong></td><td style="text-align:left;"><code>(Signal, fn, fn?) => Node</code></td><td style="text-align:left;">Reactive conditional. Automatically destroys the "else" branch memory.</td></tr><tr><td style="text-align:left;"><strong><code>$.for(list, itemFn)</code></strong></td><td style="text-align:left;"><code>(Signal, fn) => Node</code></td><td style="text-align:left;">Optimized list renderer. Manages individual item lifecycles.</td></tr><tr><td style="text-align:left;"><strong><code>$.router(routes)</code></strong></td><td style="text-align:left;"><code>(Array) => Element</code></td><td style="text-align:left;">Hash-based SPA router. Uses Explicit Watch to prevent memory leaks.</td></tr><tr><td style="text-align:left;"><strong><code>$.mount(node, target)</code></strong></td><td style="text-align:left;"><code>(any, string|Node) => Runtime</code></td><td style="text-align:left;">Entry point. Creates a root instance with <code>.destroy()</code> capabilities.</td></tr></tbody></table><hr><h2 id="🏗️-element-constructors-tags" tabindex="-1">🏗️ Element Constructors (Tags) <a class="header-anchor" href="#🏗️-element-constructors-tags" aria-label="Permalink to "🏗️ Element Constructors (Tags)""></a></h2><p>SigPro provides PascalCase wrappers for all standard HTML5 tags (e.g., <code>Div</code>, <code>Span</code>, <code>Button</code>).</p><h3 id="syntax-pattern" tabindex="-1">Syntax Pattern <a class="header-anchor" href="#syntax-pattern" aria-label="Permalink to "Syntax Pattern""></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:#6F42C1;--shiki-dark:#B392F0;">Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ attributes }, [children])</span></span></code></pre></div><h3 id="attribute-content-handling" tabindex="-1">Attribute & Content Handling <a class="header-anchor" href="#attribute-content-handling" aria-label="Permalink to "Attribute & Content Handling""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Pattern</th><th style="text-align:left;">Code Example</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Static</strong></td><td style="text-align:left;"><code>class: "text-red"</code></td><td style="text-align:left;">Standard HTML attribute string.</td></tr><tr><td style="text-align:left;"><strong>Reactive</strong></td><td style="text-align:left;"><code>disabled: isLoading</code></td><td style="text-align:left;">Updates automatically via internal <code>$.watch</code>.</td></tr><tr><td style="text-align:left;"><strong>Two-way</strong></td><td style="text-align:left;"><code>$value: username</code></td><td style="text-align:left;"><strong>Binding Operator</strong>: Syncs input $\\leftrightarrow$ signal both ways.</td></tr><tr><td style="text-align:left;"><strong>Text</strong></td><td style="text-align:left;"><code>P({}, () => count())</code></td><td style="text-align:left;">Updates text node surgically without re-rendering the <code>P</code>.</td></tr><tr><td style="text-align:left;"><strong>Boolean</strong></td><td style="text-align:left;"><code>hidden: isHidden</code></td><td style="text-align:left;">Toggles the attribute based on signal truthiness.</td></tr></tbody></table>',11)])])}const u=e(o,[["render",d]]);export{f as __pageData,u as default};
|