23 lines
14 KiB
JavaScript
23 lines
14 KiB
JavaScript
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"The Reactive Core: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/$.md","filePath":"api/$.md"}'),n={name:"api/$.md"};function l(h,s,r,p,o,d){return i(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="the-reactive-core" tabindex="-1">The Reactive Core: <code>$( )</code> <a class="header-anchor" href="#the-reactive-core" aria-label="Permalink to "The Reactive Core: \`$( )\`""></a></h1><p>The <code>$</code> function is the heart of <strong>SigPro</strong>. It is a <strong>Unified Reactive Constructor</strong> that handles state, derivations, and automatic persistence through a single, consistent interface.</p><h2 id="_1-the-constructor-input-key" tabindex="-1">1. The Constructor: <code>$( input, [key] )</code> <a class="header-anchor" href="#_1-the-constructor-input-key" aria-label="Permalink to "1. The Constructor: \`$( input, [key] )\`""></a></h2><p>Depending on the arguments you pass, SigPro creates different reactive primitives:</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>input</strong></td><td style="text-align:left;"><code>Value</code> / <code>Function</code></td><td style="text-align:left;"><strong>Yes</strong></td><td style="text-align:left;">Initial state or reactive logic.</td></tr><tr><td style="text-align:left;"><strong>key</strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">No</td><td style="text-align:left;">If provided, the signal <strong>persists</strong> in <code>localStorage</code>.</td></tr></tbody></table><hr><h2 id="_2-signal-state-persistence" tabindex="-1">2. Signal (State & Persistence) <a class="header-anchor" href="#_2-signal-state-persistence" aria-label="Permalink to "2. Signal (State & Persistence)""></a></h2><p>A <strong>Signal</strong> is a reactive "box" for data. SigPro now supports <strong>Native Persistence</strong>: if you provide a second argument (the <code>key</code>), the signal will automatically sync with <code>localStorage</code>.</p><ul><li><strong>Standard:</strong> <code>const $count = $(0);</code></li><li><strong>Persistent:</strong> <code>const $theme = $("light", "app-theme");</code> (Restores value on page reload).</li></ul><h3 id="example" tabindex="-1">Example: <a class="header-anchor" href="#example" aria-label="Permalink to "Example:""></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;"> $user</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;">"Guest"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"session-user"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Automatically saved/loaded</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Read (Getter)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$user</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;">// Update (Setter + Auto-save to Disk)</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Alice"</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;">// Functional Update</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prev.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toUpperCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span></code></pre></div><hr><h2 id="_3-computed-derived-state" tabindex="-1">3. Computed (Derived State) <a class="header-anchor" href="#_3-computed-derived-state" aria-label="Permalink to "3. Computed (Derived State)""></a></h2><p>When you pass a <strong>function</strong> that <strong>returns a value</strong>, SigPro creates a <strong>Computed Signal</strong>. It tracks dependencies and recalculates only when necessary.</p><ul><li><strong>Syntax:</strong> <code>const $derived = $(() => logic);</code></li></ul><h3 id="example-1" tabindex="-1">Example: <a class="header-anchor" href="#example-1" aria-label="Permalink to "Example:""></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;"> $price</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;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $qty</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;">2</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;">// Auto-tracks $price and $qty</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $total</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;"> $price</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;"> $qty</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;">$qty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// $total updates to 300 automatically</span></span></code></pre></div><hr><h2 id="_4-effects-reactive-actions" tabindex="-1">4. Effects (Reactive Actions) <a class="header-anchor" href="#_4-effects-reactive-actions" aria-label="Permalink to "4. Effects (Reactive Actions)""></a></h2><p>An <strong>Effect</strong> is a function that <strong>does not return a value</strong>. It performs an action (side effect) whenever the signals it "touches" change.</p><ul><li><strong>When to use:</strong> Logging, manual DOM tweaks, or syncing with external APIs.</li><li><strong>Syntax:</strong> <code>$(() => { action });</code></li></ul><h3 id="example-2" tabindex="-1">Example: <a class="header-anchor" href="#example-2" aria-label="Permalink to "Example:""></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;"> $status</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;">"online"</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;">// Runs every time $status changes</span></span>
|
||
<span class="line"><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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"System status is now:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$status</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="_5-summary-table-usage-guide" tabindex="-1">5. Summary Table: Usage Guide <a class="header-anchor" href="#_5-summary-table-usage-guide" aria-label="Permalink to "5. Summary Table: Usage Guide""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Primitive</th><th style="text-align:left;">Logic Type</th><th style="text-align:left;">Persistence?</th><th style="text-align:left;">Typical Use Case</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;">Mutable State</td><td style="text-align:left;"><strong>Yes</strong> (Optional)</td><td style="text-align:left;"><code>$(0, 'counter')</code></td></tr><tr><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;">Derived / Read-only</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() => $a() + $b())</code></td></tr><tr><td style="text-align:left;"><strong>Effect</strong></td><td style="text-align:left;">Imperative Action</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() => alert($msg()))</code></td></tr></tbody></table><hr><h2 id="💡-pro-tip-the-power-of-native-persistence" tabindex="-1">💡 Pro Tip: The Power of Native Persistence <a class="header-anchor" href="#💡-pro-tip-the-power-of-native-persistence" aria-label="Permalink to "💡 Pro Tip: The Power of Native Persistence""></a></h2><p>In SigPro, you don't need external plugins for basic storage. By using the <code>key</code> parameter in a Signal, you gain:</p><ol><li><strong>Zero Boilerplate:</strong> No more <code>JSON.parse(localStorage.getItem(...))</code>.</li><li><strong>Instant Hydration:</strong> The value is restored <strong>before</strong> the UI renders, preventing "flicker".</li><li><strong>Atomic Safety:</strong> Data is saved to disk exactly when the signal changes, ensuring your app state is always safe.</li></ol><hr><h3 id="naming-convention" tabindex="-1">Naming Convention <a class="header-anchor" href="#naming-convention" aria-label="Permalink to "Naming Convention""></a></h3><p>We use the <strong><code>$</code> prefix</strong> (e.g., <code>$count</code>) for reactive functions to distinguish them from static variables at a glance:</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;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</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;">// Static</span></span>
|
||
<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;">// Reactive Signal</span></span></code></pre></div>`,34)])])}const c=t(n,[["render",l]]);export{g as __pageData,c as default};
|