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

28 lines
15 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 i,o as t,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,p,r,k,d){return t(),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 &quot;The Reactive Core: \`$( )\`&quot;">​</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 side effects through a single, consistent interface.</p><h2 id="_1-the-constructor-input" tabindex="-1">1. The Constructor: <code>$( input )</code> <a class="header-anchor" href="#_1-the-constructor-input" aria-label="Permalink to &quot;1. The Constructor: \`$( input )\`&quot;">​</a></h2><p>Depending on what you pass into <code>$( )</code>, SigPro creates a different type of reactive primitive:</p><table tabindex="0"><thead><tr><th style="text-align:left;">Input Type</th><th style="text-align:left;">Result</th><th style="text-align:left;">Internal Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Value</strong> (String, Number, Object...)</td><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;">Creates a piece of mutable state.</td></tr><tr><td style="text-align:left;"><strong>Function</strong></td><td style="text-align:left;"><strong>Computed / Effect</strong></td><td style="text-align:left;">Creates a derived value that tracks dependencies.</td></tr></tbody></table><hr><h2 id="_2-signal-state" tabindex="-1">2. Signal (State) <a class="header-anchor" href="#_2-signal-state" aria-label="Permalink to &quot;2. Signal (State)&quot;">​</a></h2><p>A <strong>Signal</strong> is a &quot;box&quot; that holds a value. It provides a getter/setter function to interact with that value.</p><ul><li><strong>When to use:</strong> For data that changes over time (counters, user input, toggle states, API data).</li><li><strong>Syntax:</strong> <code>const $state = $(initialValue);</code></li></ul><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;"> $name</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;Alice&quot;</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;">// Read the value (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;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// &quot;Alice&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Update the value (Setter)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Bob&quot;</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 based on previous value</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">current</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> current </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot; Smith&quot;</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 &quot;3. Computed (Derived State)&quot;">​</a></h2><p>When you pass a <strong>function</strong> to <code>$( )</code> that <strong>returns a value</strong>, SigPro creates a <strong>Computed Signal</strong>. It automatically tracks which signals are used inside it and re-runs only when they change.</p><ul><li><strong>When to use:</strong> For values that depend on other signals (totals, filtered lists, formatted strings).</li><li><strong>Syntax:</strong> <code>const $derived = $(() =&gt; logic);</code></li></ul><h3 id="example-1" tabindex="-1">Example: <a class="header-anchor" href="#example-1" 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;"> $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;">// Automatically 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;">=&gt;</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:#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;">$total</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 200</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-side-effects" tabindex="-1">4. Effects (Side Effects) <a class="header-anchor" href="#_4-effects-side-effects" aria-label="Permalink to &quot;4. Effects (Side Effects)&quot;">​</a></h2><p>An <strong>Effect</strong> is a function passed to <code>$( )</code> that <strong>does not return a value</strong> (or returns <code>undefined</code>). SigPro treats this as a subscription that performs an action whenever its dependencies change.</p><ul><li><strong>When to use:</strong> For DOM manipulations, logging, or syncing with external APIs (LocalStorage, Fetch).</li><li><strong>Syntax:</strong> <code>$(() =&gt; { action });</code></li></ul><h3 id="example-2" tabindex="-1">Example: <a class="header-anchor" href="#example-2" 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;"> $theme</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;light&quot;</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;">// This effect runs every time $theme 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;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.body.className </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $theme</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;">&quot;Theme updated to:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</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;">$theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Logs: Theme updated to: dark</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 &quot;5. Summary Table: Usage Guide&quot;">​</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;">Returns Value?</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;">Static</td><td style="text-align:left;">Yes (Mutable)</td><td style="text-align:left;"><code>const $user = $(&quot;Guest&quot;)</code></td></tr><tr><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;">Read-only</td><td style="text-align:left;">Yes (Automatic)</td><td style="text-align:left;"><code>const $isLoggedIn = $(() =&gt; $user() !== &quot;Guest&quot;)</code></td></tr><tr><td style="text-align:left;"><strong>Effect</strong></td><td style="text-align:left;">Imperative</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() =&gt; localStorage.setItem(&#39;user&#39;, $user()))</code></td></tr></tbody></table><hr><h2 id="💡-pro-tip-naming-convention" tabindex="-1">💡 Pro Tip: Naming Convention <a class="header-anchor" href="#💡-pro-tip-naming-convention" aria-label="Permalink to &quot;💡 Pro Tip: Naming Convention&quot;">​</a></h2><p>In SigPro, we use the <strong><code>$</code> prefix</strong> (e.g., <code>$count</code>) for variables that hold a reactive function. This makes it easy to distinguish between a standard variable and a reactive one 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 (Function)</span></span></code></pre></div>`,30)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
Reference in New Issue View Git Blame Copy Permalink