8 lines
13 KiB
JavaScript
8 lines
13 KiB
JavaScript
import{_ as e,o as s,c as i,ae as a}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Quick API Reference ⚡","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),l={name:"api/quick.md"};function n(d,t,o,r,h,g){return s(),i("div",null,[...t[0]||(t[0]=[a(`<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>This is a high-level summary of the <strong>SigPro</strong> core API. For detailed guides and edge cases, please refer to the specific documentation for each module.</p><h2 id="_1-core-reactivity" tabindex="-1">1. Core Reactivity: <code>$( )</code> <a class="header-anchor" href="#_1-core-reactivity" aria-label="Permalink to "1. Core Reactivity: \`$( )\`""></a></h2><p>The <code>$</code> function is a polymorphic constructor. It creates <strong>Signals</strong> (state) or <strong>Computed Effects</strong> (logic) based on the input type.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Usage</th><th style="text-align:left;">Input Type</th><th style="text-align:left;">Returns</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">A getter/setter for reactive state.</td></tr><tr><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">A read-only signal that auto-updates when its dependencies change.</td></tr></tbody></table><p><strong>Example:</strong></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;"> $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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Signal</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $double</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:#D73A49;--shiki-dark:#F97583;">=></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;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Computed</span></span></code></pre></div><hr><h2 id="_2-rendering-engine-html" tabindex="-1">2. Rendering Engine: <code>$.html</code> <a class="header-anchor" href="#_2-rendering-engine-html" aria-label="Permalink to "2. Rendering Engine: \`$.html\`""></a></h2><p>SigPro uses a hyperscript-style engine to create live DOM nodes.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Argument</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;">Yes</td><td style="text-align:left;">Standard HTML tag (e.g., 'div', 'button').</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 (<code>id</code>), Events (<code>onclick</code>), or Reactive Props (<code>$value</code>).</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;">String, Node, Array, or Reactive Function.</td></tr></tbody></table><p><strong>Example:</strong></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:#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;">'button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</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;"> alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hi!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Click Me'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_3-global-helpers-tag-proxies" tabindex="-1">3. Global Helpers (Tag Proxies) <a class="header-anchor" href="#_3-global-helpers-tag-proxies" aria-label="Permalink to "3. Global Helpers (Tag Proxies)""></a></h2><p>To keep your code clean, SigPro automatically exposes common HTML tags to the global scope.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Available Tags</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Layout</strong></td><td style="text-align:left;"><code>div</code>, <code>section</code>, <code>main</code>, <code>nav</code>, <code>header</code>, <code>footer</code>, <code>span</code></td></tr><tr><td style="text-align:left;"><strong>Typography</strong></td><td style="text-align:left;"><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>p</code>, <code>label</code>, <code>a</code>, <code>li</code>, <code>ul</code>, <code>ol</code></td></tr><tr><td style="text-align:left;"><strong>Forms</strong></td><td style="text-align:left;"><code>input</code>, <code>button</code>, <code>form</code>, <code>select</code>, <code>option</code></td></tr><tr><td style="text-align:left;"><strong>Media</strong></td><td style="text-align:left;"><code>img</code>, <code>video</code>, <code>audio</code>, <code>canvas</code></td></tr></tbody></table><p><strong>Example:</strong></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;">// No imports needed!</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>
|
||
<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;">"Title"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Ok"</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="_4-mounting-plugins" tabindex="-1">4. Mounting & Plugins <a class="header-anchor" href="#_4-mounting-plugins" aria-label="Permalink to "4. Mounting & Plugins""></a></h2><p>Methods to initialize your application and extend the engine.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Method</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>$.mount</code></strong></td><td style="text-align:left;"><code>(node, target)</code></td><td style="text-align:left;">Wipes the target (default: <code>body</code>) and renders the component.</td></tr><tr><td style="text-align:left;"><strong><code>$.plugin</code></strong></td><td style="text-align:left;"><code>(source)</code></td><td style="text-align:left;">Registers a function or loads external <code>.js</code> scripts as plugins.</td></tr></tbody></table><p><strong>Example:</strong></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:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, Router]);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#root'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-reactive-syntax-cheat-sheet" tabindex="-1">5. Reactive Syntax Cheat Sheet <a class="header-anchor" href="#_5-reactive-syntax-cheat-sheet" aria-label="Permalink to "5. Reactive Syntax Cheat Sheet""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Syntax</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Text Binding</strong></td><td style="text-align:left;"><code>p(["Value: ", $sig])</code></td><td style="text-align:left;">Updates text content automatically.</td></tr><tr><td style="text-align:left;"><strong>Attributes</strong></td><td style="text-align:left;"><code>div({ id: $sig })</code></td><td style="text-align:left;">Static attribute assignment.</td></tr><tr><td style="text-align:left;"><strong>Reactive Attr</strong></td><td style="text-align:left;"><code>div({ $class: $sig })</code></td><td style="text-align:left;">Attribute updates when <code>$sig</code> changes.</td></tr><tr><td style="text-align:left;"><strong>Two-way Binding</strong></td><td style="text-align:left;"><code>input({ $value: $sig })</code></td><td style="text-align:left;">Syncs input value and signal automatically.</td></tr><tr><td style="text-align:left;"><strong>Conditional</strong></td><td style="text-align:left;"><code>div(() => $sig() > 0 ? "Yes" : "No")</code></td><td style="text-align:left;">Re-renders only the content when the condition changes.</td></tr></tbody></table><hr><h2 id="summary-table" tabindex="-1">Summary Table <a class="header-anchor" href="#summary-table" aria-label="Permalink to "Summary Table""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">SigPro Approach</th><th style="text-align:left;">Benefit</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Update Logic</strong></td><td style="text-align:left;">Fine-grained (Surgical)</td><td style="text-align:left;">Blazing fast updates.</td></tr><tr><td style="text-align:left;"><strong>DOM</strong></td><td style="text-align:left;">Native Nodes</td><td style="text-align:left;">Zero abstraction cost.</td></tr><tr><td style="text-align:left;"><strong>Syntax</strong></td><td style="text-align:left;">Pure JavaScript</td><td style="text-align:left;">No build-tool lock-in.</td></tr><tr><td style="text-align:left;"><strong>Footprint</strong></td><td style="text-align:left;">Modular</td><td style="text-align:left;">Load only what you use.</td></tr></tbody></table>`,31)])])}const k=e(l,[["render",n]]);export{c as __pageData,k as default};
|