2 lines
5.5 KiB
JavaScript
2 lines
5.5 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"}'),d={name:"api/quick.md"};function o(i,t,s,r,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.</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;"><code>$(val, key?)</code></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;"><code>$(fn)</code></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;"><code>$.effect(fn)</code></td><td style="text-align:left;"><code>(function) => stopFn</code></td><td style="text-align:left;">Runs a side-effect that tracks signals. Returns a function to manually stop it.</td></tr><tr><td style="text-align:left;"><code>$.html(tag, props, children)</code></td><td style="text-align:left;"><code>(string, object, any) => HTMLElement</code></td><td style="text-align:left;">The low-level DOM factory powering all tag constructors.</td></tr><tr><td style="text-align:left;"><code>$.router(routes)</code></td><td style="text-align:left;"><code>(Array) => HTMLElement</code></td><td style="text-align:left;">Initializes the hash-based router for SPAs.</td></tr><tr><td style="text-align:left;"><code>$.go(path)</code></td><td style="text-align:left;"><code>(string) => void</code></td><td style="text-align:left;">Programmatic navigation (e.g., <code>$.go('/home')</code>).</td></tr><tr><td style="text-align:left;"><code>$.mount(comp, target)</code></td><td style="text-align:left;"><code>(any, string|Node) => Runtime</code></td><td style="text-align:left;">Mounts the application into the specified DOM element.</td></tr><tr><td style="text-align:left;"><code>$.ignore(fn)</code></td><td style="text-align:left;"><code>(function) => any</code></td><td style="text-align:left;">Executes code without tracking any signals inside it.</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 when <code>isLoading()</code> changes.</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;">Syncs input with signal <strong>both ways</strong> (Binding Operator).</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 whenever <code>count</code> changes.</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(d,[["render",o]]);export{f as __pageData,u as default};
|