New docs
This commit is contained in:
22
docs/404.html
Normal file
22
docs/404.html
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>404 | SigPro</title>
|
||||||
|
<meta name="description" content="Not Found">
|
||||||
|
<meta name="generator" content="VitePress v1.6.4">
|
||||||
|
<link rel="preload stylesheet" href="/sigpro/assets/style.7j_EAAZ2.css" as="style">
|
||||||
|
<link rel="preload stylesheet" href="/sigpro/vp-icons.css" as="style">
|
||||||
|
|
||||||
|
<script type="module" src="/sigpro/assets/app.DtmzNmNl.js"></script>
|
||||||
|
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||||
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||||
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
docs/api/$.html
Normal file
51
docs/api/$.html
Normal file
File diff suppressed because one or more lines are too long
46
docs/api/html.html
Normal file
46
docs/api/html.html
Normal file
File diff suppressed because one or more lines are too long
52
docs/api/mount.html
Normal file
52
docs/api/mount.html
Normal file
File diff suppressed because one or more lines are too long
31
docs/api/quick.html
Normal file
31
docs/api/quick.html
Normal file
File diff suppressed because one or more lines are too long
79
docs/api/tags.html
Normal file
79
docs/api/tags.html
Normal file
File diff suppressed because one or more lines are too long
27
docs/assets/api__.md.BVVMY-2O.js
Normal file
27
docs/assets/api__.md.BVVMY-2O.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
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 "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 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 "1. The Constructor: \`$( input )\`""></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 "2. Signal (State)""></a></h2><p>A <strong>Signal</strong> is a "box" 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 "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;"> $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;">"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;">// 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;">// "Alice"</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;">"Bob"</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;"> =></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;"> " Smith"</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> 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 = $(() => 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;">// 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;">=></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 "4. Effects (Side Effects)""></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>$(() => { 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;"> $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;">"light"</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;">=></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;">"Theme updated to:"</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;">"dark"</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 "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;">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 = $("Guest")</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 = $(() => $user() !== "Guest")</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>$(() => localStorage.setItem('user', $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 "💡 Pro Tip: Naming Convention""></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};
|
||||||
1
docs/assets/api__.md.BVVMY-2O.lean.js
Normal file
1
docs/assets/api__.md.BVVMY-2O.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
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("",30)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||||
22
docs/assets/api_html.md.-lEpgX-Z.js
Normal file
22
docs/assets/api_html.md.-lEpgX-Z.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Rendering Engine: $.html","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,t,r,d,p,o){return i(),a("div",null,[...t[0]||(t[0]=[e(`<h1 id="rendering-engine-html" tabindex="-1">Rendering Engine: <code>$.html</code> <a class="header-anchor" href="#rendering-engine-html" aria-label="Permalink to "Rendering Engine: \`$.html\`""></a></h1><p>The <code>$.html</code> function is the architect of your UI. It creates standard HTML elements and wires them directly to your signals without the need for a Virtual DOM.</p><h2 id="_1-syntax-html-tag-props-content" tabindex="-1">1. Syntax: <code>$.html(tag, [props], [content])</code> <a class="header-anchor" href="#_1-syntax-html-tag-props-content" aria-label="Permalink to "1. Syntax: \`$.html(tag, [props], [content])\`""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</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;"><strong>Yes</strong></td><td style="text-align:left;">Any valid HTML5 tag (e.g., <code>'div'</code>, <code>'button'</code>, <code>'input'</code>).</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, event listeners, and reactive bindings.</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;">Text, Nodes, Arrays, or Reactive Functions.</td></tr></tbody></table><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;"> myButton</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><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;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-primary'</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="_2-global-tag-helpers" tabindex="-1">2. Global Tag Helpers <a class="header-anchor" href="#_2-global-tag-helpers" aria-label="Permalink to "2. Global Tag Helpers""></a></h2><p>To avoid repetitive <code>$.html</code> calls, SigPro automatically exposes common tags to the global <code>window</code> object. This allows for a clean, declarative syntax.</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;">// Instead of $.html('div', ...), just use:</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'wrapper'</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;">"Welcome"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This is SigPro."</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="_3-handling-properties-attributes" tabindex="-1">3. Handling Properties & Attributes <a class="header-anchor" href="#_3-handling-properties-attributes" aria-label="Permalink to "3. Handling Properties & Attributes""></a></h2><p>SigPro distinguishes between static attributes and reactive bindings using the <strong><code>$</code> prefix</strong>.</p><h3 id="static-vs-reactive-attributes" tabindex="-1">Static vs. Reactive Attributes <a class="header-anchor" href="#static-vs-reactive-attributes" aria-label="Permalink to "Static vs. Reactive Attributes""></a></h3><ul><li><strong>Static:</strong> Applied once during creation.</li><li><strong>Reactive (<code>$</code>):</strong> Automatically updates the DOM when the signal changes.</li></ul><table tabindex="0"><thead><tr><th style="text-align:left;">Property</th><th style="text-align:left;">Syntax</th><th style="text-align:left;">Result</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Attribute</strong></td><td style="text-align:left;"><code>{ id: 'main' }</code></td><td style="text-align:left;"><code>id="main"</code></td></tr><tr><td style="text-align:left;"><strong>Event</strong></td><td style="text-align:left;"><code>{ onclick: fn }</code></td><td style="text-align:left;">Adds an event listener.</td></tr><tr><td style="text-align:left;"><strong>Reactive Attr</strong></td><td style="text-align:left;"><code>{ $class: $theme }</code></td><td style="text-align:left;">Updates <code>class</code> whenever <code>$theme()</code> changes.</td></tr><tr><td style="text-align:left;"><strong>Boolean Attr</strong></td><td style="text-align:left;"><code>{ $disabled: $isBusy }</code></td><td style="text-align:left;">Toggles the <code>disabled</code> attribute automatically.</td></tr></tbody></table><hr><h2 id="_4-two-way-data-binding" tabindex="-1">4. Two-Way Data Binding <a class="header-anchor" href="#_4-two-way-data-binding" aria-label="Permalink to "4. Two-Way Data Binding""></a></h2><p>For form inputs, SigPro provides a powerful shortcut using <code>$value</code> or <code>$checked</code>. It automatically handles the event listening and the value synchronization.</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;"> $text</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;">"Type here..."</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;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $text </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Syncs input -> signal and signal -> input</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;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"You typed: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $text]);</span></span></code></pre></div><hr><h2 id="_5-reactive-content-dynamic-children" tabindex="-1">5. Reactive Content (Dynamic Children) <a class="header-anchor" href="#_5-reactive-content-dynamic-children" aria-label="Permalink to "5. Reactive Content (Dynamic Children)""></a></h2><p>The <code>content</code> argument is incredibly flexible. If you pass a <strong>function</strong>, SigPro treats it as a reactive "portal" that re-renders only that specific part of the DOM.</p><h3 id="text-nodes" tabindex="-1">Text & Nodes <a class="header-anchor" href="#text-nodes" aria-label="Permalink to "Text & Nodes""></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;"> $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>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Text node updates surgically</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Count: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $count]); </span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Conditional rendering with a function</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 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:#D73A49;--shiki-dark:#F97583;"> return</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;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><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;">"High Score!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Keep going..."</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><h3 id="the-guillotine-performance-tip" tabindex="-1">The "Guillotine" (Performance Tip) <a class="header-anchor" href="#the-guillotine-performance-tip" aria-label="Permalink to "The "Guillotine" (Performance Tip)""></a></h3><p>When a reactive function in the content returns a <strong>new Node</strong>, SigPro uses <code>replaceWith()</code> to swap the old node for the new one. This ensures that:</p><ol><li>The update is nearly instantaneous.</li><li>The old node is correctly garbage-collected.</li></ol><hr><h2 id="_6-summary-content-types" tabindex="-1">6. Summary: Content Types <a class="header-anchor" href="#_6-summary-content-types" aria-label="Permalink to "6. Summary: Content Types""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Input</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>String / Number</strong></td><td style="text-align:left;">Appended as a TextNode.</td></tr><tr><td style="text-align:left;"><strong>HTMLElement</strong></td><td style="text-align:left;">Appended directly to the parent.</td></tr><tr><td style="text-align:left;"><strong>Array</strong></td><td style="text-align:left;">Each item is processed and appended in order.</td></tr><tr><td style="text-align:left;"><strong>Function <code>() => ...</code></strong></td><td style="text-align:left;">Creates a <strong>live reactive zone</strong> that updates automatically.</td></tr></tbody></table>`,31)])])}const g=s(n,[["render",l]]);export{c as __pageData,g as default};
|
||||||
1
docs/assets/api_html.md.-lEpgX-Z.lean.js
Normal file
1
docs/assets/api_html.md.-lEpgX-Z.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Rendering Engine: $.html","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,t,r,d,p,o){return i(),a("div",null,[...t[0]||(t[0]=[e("",31)])])}const g=s(n,[["render",l]]);export{c as __pageData,g as default};
|
||||||
28
docs/assets/api_mount.md.eGRwkZvh.js
Normal file
28
docs/assets/api_mount.md.eGRwkZvh.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Application Mounter: $.mount","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,o,r,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="application-mounter-mount" tabindex="-1">Application Mounter: <code>$.mount</code> <a class="header-anchor" href="#application-mounter-mount" aria-label="Permalink to "Application Mounter: \`$.mount\`""></a></h1><p>The <code>$.mount</code> function is the entry point of your reactive world. It takes a <strong>SigPro component</strong> (or a plain DOM node) and injects it into the real document.</p><h2 id="_1-syntax-mount-node-target" tabindex="-1">1. Syntax: <code>$.mount(node, [target])</code> <a class="header-anchor" href="#_1-syntax-mount-node-target" aria-label="Permalink to "1. Syntax: \`$.mount(node, [target])\`""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>node</strong></td><td style="text-align:left;"><code>HTMLElement</code> or <code>Function</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component or element to render.</td></tr><tr><td style="text-align:left;"><strong>target</strong></td><td style="text-align:left;"><code>string</code> or <code>HTMLElement</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">Where to mount the app (CSS selector or Element).</td></tr></tbody></table><hr><h2 id="_2-usage-scenarios" tabindex="-1">2. Usage Scenarios <a class="header-anchor" href="#_2-usage-scenarios" aria-label="Permalink to "2. Usage Scenarios""></a></h2><h3 id="a-the-clean-slate-main-entry" tabindex="-1">A. The "Clean Slate" (Main Entry) <a class="header-anchor" href="#a-the-clean-slate-main-entry" aria-label="Permalink to "A. The "Clean Slate" (Main Entry)""></a></h3><p>In a modern app (like our <code>main.js</code> example), you usually want to control the entire page. By default, <code>$.mount</code> clears the target's existing HTML before mounting.</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;">// src/main.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'SigPro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './App.js'</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;">$.</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:#6A737D;--shiki-dark:#6A737D;">// Mounts to <body> by default</span></span></code></pre></div><h3 id="b-targeting-a-specific-container" tabindex="-1">B. Targeting a Specific Container <a class="header-anchor" href="#b-targeting-a-specific-container" aria-label="Permalink to "B. Targeting a Specific Container""></a></h3><p>If you have an existing HTML structure and only want <strong>SigPro</strong> to manage a specific part (like a <code>#root</code> div), pass a CSS selector or a reference.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"sidebar"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"app-root"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><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;">// Local mount to a specific ID</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;">(MyComponent, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app-root'</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;">// Or using a direct DOM reference</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sidebar</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'sidebar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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;">(SidebarComponent, sidebar);</span></span></code></pre></div><hr><h2 id="_3-mounting-with-pure-html" tabindex="-1">3. Mounting with Pure HTML <a class="header-anchor" href="#_3-mounting-with-pure-html" aria-label="Permalink to "3. Mounting with Pure HTML""></a></h2><p>One of SigPro's strengths is that it works perfectly alongside "Old School" HTML. You can create a reactive "island" inside a static page.</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;">// A small reactive widget in a static .js file</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CounterWidget</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $c</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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;"> $c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">v</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> v </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, [</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Clicks: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $c</span></span>
|
||||||
|
<span class="line"><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:#6A737D;--shiki-dark:#6A737D;">// Mount it into an existing div in your HTML</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;">(CounterWidget, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#counter-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-how-it-works-the-wipe-logic" tabindex="-1">4. How it Works (The "Wipe" Logic) <a class="header-anchor" href="#_4-how-it-works-the-wipe-logic" aria-label="Permalink to "4. How it Works (The "Wipe" Logic)""></a></h2><p>When <code>$.mount</code> is called, it performs two critical steps:</p><ol><li><strong>Clearance:</strong> It sets <code>target.innerHTML = ''</code>. This ensures no "zombie" HTML from previous renders or static placeholders interferes with your app.</li><li><strong>Injection:</strong> It appends your component. If you passed a <strong>Function</strong>, it executes it first to get the DOM node.</li></ol><hr><h2 id="_5-global-vs-local-scope" tabindex="-1">5. Global vs. Local Scope <a class="header-anchor" href="#_5-global-vs-local-scope" aria-label="Permalink to "5. Global vs. Local Scope""></a></h2><h3 id="global-the-framework-way" tabindex="-1">Global (The "Framework" Way) <a class="header-anchor" href="#global-the-framework-way" aria-label="Permalink to "Global (The "Framework" Way)""></a></h3><p>In a standard Vite/ESM project, you initialize SigPro globally in <code>main.js</code>. This makes the <code>$</code> and the tag helpers (<code>div</code>, <code>button</code>, etc.) available everywhere in your project.</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;">// main.js - Global Initialization</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'SigPro'</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;">// Now any other file can just use:</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;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><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;">"Global App"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span></code></pre></div><h3 id="local-the-library-way" tabindex="-1">Local (The "Library" Way) <a class="header-anchor" href="#local-the-library-way" aria-label="Permalink to "Local (The "Library" Way)""></a></h3><p>If you are worried about polluting the global <code>window</code> object, you can import and use SigPro locally within a specific module.</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;">// widget.js - Local usage</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'SigPro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myNode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><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;">'div'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Local Widget'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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;">(myNode, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#widget-target'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h3 id="summary-cheat-sheet" tabindex="-1">Summary Cheat Sheet <a class="header-anchor" href="#summary-cheat-sheet" aria-label="Permalink to "Summary Cheat Sheet""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to ID</strong></td><td style="text-align:left;"><code>$.mount(App, '#id')</code></td></tr><tr><td style="text-align:left;"><strong>Mount to Element</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Reactive Widget</strong></td><td style="text-align:left;"><code>$.mount(() => div("Hi"), '#widget')</code></td></tr></tbody></table>`,32)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||||
1
docs/assets/api_mount.md.eGRwkZvh.lean.js
Normal file
1
docs/assets/api_mount.md.eGRwkZvh.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Application Mounter: $.mount","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,o,r,k){return a(),t("div",null,[...s[0]||(s[0]=[e("",32)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||||
7
docs/assets/api_quick.md.Cy_XozKR.js
Normal file
7
docs/assets/api_quick.md.Cy_XozKR.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/api_quick.md.Cy_XozKR.lean.js
Normal file
1
docs/assets/api_quick.md.Cy_XozKR.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
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("",31)])])}const k=e(l,[["render",n]]);export{c as __pageData,k as default};
|
||||||
55
docs/assets/api_tags.md.33XeBTH-.js
Normal file
55
docs/assets/api_tags.md.33XeBTH-.js
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"Global Tag Helpers","description":"","frontmatter":{},"headers":[],"relativePath":"api/tags.md","filePath":"api/tags.md"}'),e={name:"api/tags.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="global-tag-helpers" tabindex="-1">Global Tag Helpers <a class="header-anchor" href="#global-tag-helpers" aria-label="Permalink to "Global Tag Helpers""></a></h1><p>In <strong>SigPro</strong>, you don't need to write <code>$.html('div', ...)</code> every time. To keep your code clean and readable, the engine automatically generates global helper functions for all standard HTML tags.</p><h2 id="_1-how-it-works" tabindex="-1">1. How it Works <a class="header-anchor" href="#_1-how-it-works" aria-label="Permalink to "1. How it Works""></a></h2><p>When SigPro initializes, it runs a proxy loop that creates a function for every common HTML tag and attaches it to the <code>window</code> object.</p><ul><li><strong>Traditional:</strong> <code>$.html('button', { onclick: ... }, 'Click')</code></li><li><strong>SigPro Style:</strong> <code>button({ onclick: ... }, 'Click')</code></li></ul><p>This approach gives you a "DSL" (Domain Specific Language) that feels like HTML but is actually <strong>pure JavaScript</strong>.</p><hr><h2 id="_2-the-global-registry" tabindex="-1">2. The Global Registry <a class="header-anchor" href="#_2-the-global-registry" aria-label="Permalink to "2. The Global Registry""></a></h2><p>The following tags are available globally by default:</p><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Available Functions</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Layout</strong></td><td style="text-align:left;"><code>div</code>, <code>span</code>, <code>section</code>, <code>main</code>, <code>nav</code>, <code>header</code>, <code>footer</code>, <code>article</code>, <code>aside</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>ul</code>, <code>ol</code>, <code>li</code>, <code>a</code>, <code>label</code>, <code>strong</code>, <code>em</code></td></tr><tr><td style="text-align:left;"><strong>Forms</strong></td><td style="text-align:left;"><code>form</code>, <code>input</code>, <code>button</code>, <code>select</code>, <code>option</code>, <code>textarea</code></td></tr><tr><td style="text-align:left;"><strong>Table</strong></td><td style="text-align:left;"><code>table</code>, <code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</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>, <code>svg</code></td></tr></tbody></table><hr><h2 id="_3-usage-patterns" tabindex="-1">3. Usage Patterns <a class="header-anchor" href="#_3-usage-patterns" aria-label="Permalink to "3. Usage Patterns""></a></h2><p>The tag functions are highly flexible and accept arguments in different orders to suit your coding style.</p><h3 id="a-attributes-content" tabindex="-1">A. Attributes + Content <a class="header-anchor" href="#a-attributes-content" aria-label="Permalink to "A. Attributes + Content""></a></h3><p>The most common pattern.</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:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'card'</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;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Description"</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><h3 id="b-content-only" tabindex="-1">B. Content Only <a class="header-anchor" href="#b-content-only" aria-label="Permalink to "B. Content Only""></a></h3><p>If you don't need attributes, you can skip the object entirely.</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:#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;">"Just Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"No attributes object needed here."</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><h3 id="c-simple-text" tabindex="-1">C. Simple Text <a class="header-anchor" href="#c-simple-text" aria-label="Permalink to "C. Simple Text""></a></h3><p>For elements that only contain a string.</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:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Submit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Equivalent to <button>Submit</button></span></span></code></pre></div><hr><h2 id="_4-reactive-tags" tabindex="-1">4. Reactive Tags <a class="header-anchor" href="#_4-reactive-tags" aria-label="Permalink to "4. Reactive Tags""></a></h2><p>Since these helpers are just wrappers around <code>$.html</code>, they support full reactivity out of the box.</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;"> $loading</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;">true</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;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $loading</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;"> span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Loading..."</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;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Data Ready!"</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $disabled: $loading, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Reactive attribute</span></span>
|
||||||
|
<span class="line"><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;"> $loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Stop Loading"</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-under-the-hood" tabindex="-1">5. Under the Hood <a class="header-anchor" href="#_5-under-the-hood" aria-label="Permalink to "5. Under the Hood""></a></h2><p>If you are curious about how this happens without a compiler, here is the logic inside the SigPro core:</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;"> tags</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'div'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'span'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'p'</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:#D73A49;--shiki-dark:#F97583;">...</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;">tags.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forEach</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</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;"> window[tag] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">content</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tag, props, content);</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>Because these are attached to <code>window</code>, they are available in any file in your project as soon as SigPro is loaded, making your components look like this:</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 required for tags!</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</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:#6F42C1;--shiki-dark:#B392F0;"> section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'hero'</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;">"Fast. Atomic. Simple."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Built with SigPro."</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="_6-full-comparison-sigpro-vs-standard-html" tabindex="-1">6. Full Comparison: SigPro vs. Standard HTML <a class="header-anchor" href="#_6-full-comparison-sigpro-vs-standard-html" aria-label="Permalink to "6. Full Comparison: SigPro vs. Standard HTML""></a></h2><p>To better understand the translation, here is a complete example of a <strong>User Card</strong> component. Notice how <strong>SigPro</strong> attributes with the <code>$</code> prefix map to reactive behavior, while standard attributes remain static.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-cTrOE" id="tab-pVocvfy" checked><label data-title="SigPro (JS)" for="tab-pVocvfy">SigPro (JS)</label><input type="radio" name="group-cTrOE" id="tab-QTuKdwh"><label data-title="Equivalent HTML Structure" for="tab-QTuKdwh">Equivalent HTML Structure</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><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;"> $online</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;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserCard</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user-card'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ src: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'avatar.png'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, alt: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'User'</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'info'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"John Doe"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $class</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;"> $online</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'status-on'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'status-off'</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $online</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Online"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Offline"</span></span>
|
||||||
|
<span class="line"><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 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>
|
||||||
|
<span class="line"><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;"> $online</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;">$online</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Toggle 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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"user-card"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"avatar.png"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"User"</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"info"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>John Doe</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"status-on"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Status: Online</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle Status</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div><h3 id="what-is-happening-here" tabindex="-1">What is happening here? <a class="header-anchor" href="#what-is-happening-here" aria-label="Permalink to "What is happening here?""></a></h3><ol><li><strong>Structure:</strong> The hierarchy is identical. <code>div([...])</code> in JS translates directly to nested tags in HTML.</li><li><strong>Attributes:</strong> <code>class</code> is set once. <code>$class</code> is "live"; SigPro listens to the <code>$online</code> signal and updates the class name without re-rendering the whole card.</li><li><strong>Content:</strong> The array <code>[...]</code> in SigPro is the equivalent of the children inside an HTML tag.</li><li><strong>Reactivity:</strong> The function <code>() => $online() ? ...</code> creates a <strong>TextNode</strong> in the HTML that changes its text content surgically whenever the signal toggles.</li></ol><hr><h2 id="💡-best-practices" tabindex="-1">💡 Best Practices <a class="header-anchor" href="#💡-best-practices" aria-label="Permalink to "💡 Best Practices""></a></h2><ol><li><strong>Destructuring:</strong> If you prefer not to rely on global variables, you can destructure them from <code>window</code> or <code>$</code> (though in SigPro, using them globally is the intended "clean" way).</li><li><strong>Custom Tags:</strong> If you need a tag that isn't in the default list (like a Web Component), you can still use the base engine: <code>$.html('my-custom-element', { ... })</code>.</li></ol>`,41)])])}const g=i(e,[["render",l]]);export{E as __pageData,g as default};
|
||||||
1
docs/assets/api_tags.md.33XeBTH-.lean.js
Normal file
1
docs/assets/api_tags.md.33XeBTH-.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"Global Tag Helpers","description":"","frontmatter":{},"headers":[],"relativePath":"api/tags.md","filePath":"api/tags.md"}'),e={name:"api/tags.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",41)])])}const g=i(e,[["render",l]]);export{E as __pageData,g as default};
|
||||||
1
docs/assets/app.DtmzNmNl.js
Normal file
1
docs/assets/app.DtmzNmNl.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{t as p}from"./chunks/theme.yfWKMLQM.js";import{R as s,a0 as i,a1 as u,a2 as c,a3 as l,a4 as f,a5 as d,a6 as m,a7 as h,a8 as g,a9 as A,d as v,u as y,v as C,s as P,aa as b,ab as w,ac as R,ad as E}from"./chunks/framework.C8AWLET_.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),R(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=_(),a=D();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function D(){return A(S)}function _(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
|
||||||
19
docs/assets/chunks/framework.C8AWLET_.js
Normal file
19
docs/assets/chunks/framework.C8AWLET_.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/chunks/theme.yfWKMLQM.js
Normal file
1
docs/assets/chunks/theme.yfWKMLQM.js
Normal file
File diff suppressed because one or more lines are too long
26
docs/assets/guide_getting-started.md.D_gqopPp.js
Normal file
26
docs/assets/guide_getting-started.md.D_gqopPp.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),e={name:"guide/getting-started.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting Started""></a></h1><p><strong>SigPro</strong> is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to "1. Installation""></a></h2><p>You can install SigPro via your favorite package manager:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-7OfYr" id="tab-azmGxBV" checked><label data-title="npm" for="tab-azmGxBV">npm</label><input type="radio" name="group-7OfYr" id="tab-0XBcK_h"><label data-title="pnpm" for="tab-0XBcK_h">pnpm</label><input type="radio" name="group-7OfYr" id="tab-F_8pQtk"><label data-title="yarn" for="tab-F_8pQtk">yarn</label><input type="radio" name="group-7OfYr" id="tab-dBoFLSk"><label data-title="bun" for="tab-dBoFLSk">bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div></div></div><h2 id="_2-basic-usage" tabindex="-1">2. Basic Usage <a class="header-anchor" href="#_2-basic-usage" aria-label="Permalink to "2\\. Basic Usage""></a></h2><p>The core of SigPro is the <code>$</code> function, which creates reactive state (Signals) and computed effects.</p><p>Create a <code>main.js</code> file and try this:</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'SigPro'</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;">// 1. Create a reactive signal</span></span>
|
||||||
|
<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;">"World"</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;">// 2. Define a reactive component</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'container'</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;">"Hello, "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $name, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"!"</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $name, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Two-way binding</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> placeholder: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Enter your name...'</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 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>
|
||||||
|
<span class="line"><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;"> $name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"SigPro"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Set to SigPro"</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:#6A737D;--shiki-dark:#6A737D;">// 3. Mount the application</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;">'#app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="_3-how-it-works" tabindex="-1">3. How it Works <a class="header-anchor" href="#_3-how-it-works" aria-label="Permalink to "3\\. How it Works""></a></h2><p>SigPro doesn't use a Virtual DOM. Instead, it creates real DOM nodes and binds them directly to your data:</p><ol><li><strong>Signals</strong>: <code>$(value)</code> creates a getter/setter function.</li><li><strong>Reactivity</strong>: When you pass a signal or a function to a DOM element, SigPro automatically creates a subscription.</li><li><strong>Fine-Grained Updates</strong>: Only the specific text node or attribute linked to the signal updates when the value changes.</li></ol><h2 id="_4-global-tags" tabindex="-1">4. Global Tags <a class="header-anchor" href="#_4-global-tags" aria-label="Permalink to "4\\. Global Tags""></a></h2><p>By default, SigPro exports common HTML tags to the global scope (<code>window</code>) when initialized. This allows you to write clean, declarative UI without importing every single tag:</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;">// Instead of $.html('div', ...), just use:</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;">"Clean Syntax"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"No more boilerplate."</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>`,15)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
||||||
1
docs/assets/guide_getting-started.md.D_gqopPp.lean.js
Normal file
1
docs/assets/guide_getting-started.md.D_gqopPp.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),e={name:"guide/getting-started.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",15)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
||||||
7
docs/assets/guide_why.md.lyU7T5_c.js
Normal file
7
docs/assets/guide_why.md.lyU7T5_c.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import{_ as e,o as i,c as a,ae as s}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Why SigPro?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/why.md","filePath":"guide/why.md"}'),l={name:"guide/why.md"};function n(r,t,o,h,d,g){return i(),a("div",null,[...t[0]||(t[0]=[s(`<h1 id="why-sigpro" tabindex="-1">Why SigPro? <a class="header-anchor" href="#why-sigpro" aria-label="Permalink to "Why SigPro?""></a></h1><p>After years of building applications with React, Vue, and Svelte—investing countless hours mastering unique mental models, proprietary syntaxes, and complex build tools—we reached a realization: the web platform has evolved, but frameworks have become layers of abstraction that often move us further away from the browser.</p><p><strong>SigPro</strong> is the answer to a simple question: <strong>Why fight the platform when we can embrace it?</strong></p><h2 id="the-modern-web-is-ready" tabindex="-1">The Modern Web is Ready <a class="header-anchor" href="#the-modern-web-is-ready" aria-label="Permalink to "The Modern Web is Ready""></a></h2><p>SigPro bypasses the overhead of the Virtual DOM and heavy compilers by using modern browser primitives. It treats the DOM as a first-class citizen, not as a side effect of a state change.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Browser Primitive</th><th style="text-align:left;">What It Enables</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Closures & Proxies</strong></td><td style="text-align:left;">Automatic dependency tracking without heavy overhead.</td></tr><tr><td style="text-align:left;"><strong>ES Modules</strong></td><td style="text-align:left;">Native modularity and lazy loading without complex bundlers.</td></tr><tr><td style="text-align:left;"><strong>Direct DOM APIs</strong></td><td style="text-align:left;">Surgical updates that are faster than any reconciliation algorithm.</td></tr><tr><td style="text-align:left;"><strong>Microtask Queues</strong></td><td style="text-align:left;">Batching updates efficiently to ensure 60fps performance.</td></tr></tbody></table><hr><h2 id="the-sigpro-philosophy" tabindex="-1">The SigPro Philosophy <a class="header-anchor" href="#the-sigpro-philosophy" aria-label="Permalink to "The SigPro Philosophy""></a></h2><p>SigPro strips away the complexity, delivering a reactive programming model that feels like a framework but stays remarkably close to Vanilla JS:</p><ul><li><strong>No JSX transformations</strong> – Pure JavaScript functions.</li><li><strong>No Virtual DOM</strong> – Direct, fine-grained DOM manipulation.</li><li><strong>No proprietary syntax</strong> – If you know JS, you know SigPro.</li><li><strong>Zero Build Step Required</strong> – It can run directly in the browser via ESM.</li></ul><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;">// Pure, Atomic, Reactive.</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>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Count: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $count]),</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:#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;"> $count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Increment"</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="performance-comparison" tabindex="-1">Performance Comparison <a class="header-anchor" href="#performance-comparison" aria-label="Permalink to "Performance Comparison""></a></h2><p>SigPro isn't just lighter; it's architecturally faster because it skips the "diffing" phase entirely.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Metric</th><th style="text-align:left;">SigPro</th><th style="text-align:left;">SolidJS</th><th style="text-align:left;">Svelte</th><th style="text-align:left;">Vue</th><th style="text-align:left;">React</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Bundle Size (gzip)</strong></td><td style="text-align:left;">🥇 <strong>< 2KB</strong></td><td style="text-align:left;">🥈 7KB</td><td style="text-align:left;">🥉 16KB</td><td style="text-align:left;">20KB</td><td style="text-align:left;">45KB</td></tr><tr><td style="text-align:left;"><strong>Architecture</strong></td><td style="text-align:left;"><strong>Atomic</strong></td><td style="text-align:left;"><strong>Atomic</strong></td><td style="text-align:left;"><strong>Compiled</strong></td><td style="text-align:left;"><strong>V-DOM</strong></td><td style="text-align:left;"><strong>V-DOM</strong></td></tr><tr><td style="text-align:left;"><strong>Initial Render</strong></td><td style="text-align:left;">🥇 <strong>Fastest</strong></td><td style="text-align:left;">🥈 Fast</td><td style="text-align:left;">🥉 Fast</td><td style="text-align:left;">Average</td><td style="text-align:left;">Slow</td></tr><tr><td style="text-align:left;"><strong>Update Perf</strong></td><td style="text-align:left;">🥇 <strong>Surgical</strong></td><td style="text-align:left;">🥇 Surgical</td><td style="text-align:left;">🥈 Fast</td><td style="text-align:left;">🥉 Average</td><td style="text-align:left;">Slow</td></tr><tr><td style="text-align:left;"><strong>Dependencies</strong></td><td style="text-align:left;">🥇 <strong>0</strong></td><td style="text-align:left;">🥇 0</td><td style="text-align:left;">🥇 0</td><td style="text-align:left;">🥈 2</td><td style="text-align:left;">🥉 5+</td></tr><tr><td style="text-align:left;"><strong>Build Step</strong></td><td style="text-align:left;">🥇 <strong>Optional</strong></td><td style="text-align:left;">🥈 Required</td><td style="text-align:left;">🥈 Required</td><td style="text-align:left;">🥇 Optional</td><td style="text-align:left;">🥈 Required</td></tr></tbody></table><hr><h2 id="🔑-core-principles" tabindex="-1">🔑 Core Principles <a class="header-anchor" href="#🔑-core-principles" aria-label="Permalink to "🔑 Core Principles""></a></h2><p>SigPro is built on four fundamental pillars:</p><h3 id="📡-atomic-reactivity" tabindex="-1">📡 Atomic Reactivity <a class="header-anchor" href="#📡-atomic-reactivity" aria-label="Permalink to "📡 Atomic Reactivity""></a></h3><p>Automatic dependency tracking with no manual subscriptions. When a signal changes, only the <strong>exact</strong> text nodes or attributes that depend on it update—instantly and surgically.</p><h3 id="⚡-surgical-dom-updates" tabindex="-1">⚡ Surgical DOM Updates <a class="header-anchor" href="#⚡-surgical-dom-updates" aria-label="Permalink to "⚡ Surgical DOM Updates""></a></h3><p>No Virtual DOM diffing. No tree reconciliation. We don't guess what changed; we know exactly where the update needs to happen. Performance scales with your data, not the size of your component tree.</p><h3 id="🧩-plugin-first-architecture" tabindex="-1">🧩 Plugin-First Architecture <a class="header-anchor" href="#🧩-plugin-first-architecture" aria-label="Permalink to "🧩 Plugin-First Architecture""></a></h3><p>The core is a tiny, powerful engine. Need Routing? Fetching? Global UI? Just plug it in. This keeps your production bundles "pay-only-for-what-you-use."</p><h3 id="🔬-predictable-transparent" tabindex="-1">🔬 Predictable & Transparent <a class="header-anchor" href="#🔬-predictable-transparent" aria-label="Permalink to "🔬 Predictable & Transparent""></a></h3><p>There is no "magic" hidden in a black-box compiler. What you write is what the browser executes. Debugging is straightforward because there is no framework layer between your code and the DevTools.</p><hr><blockquote><p>"SigPro returns the joy of web development by making the browser the hero again."</p></blockquote>`,28)])])}const y=e(l,[["render",n]]);export{c as __pageData,y as default};
|
||||||
1
docs/assets/guide_why.md.lyU7T5_c.lean.js
Normal file
1
docs/assets/guide_why.md.lyU7T5_c.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as e,o as i,c as a,ae as s}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Why SigPro?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/why.md","filePath":"guide/why.md"}'),l={name:"guide/why.md"};function n(r,t,o,h,d,g){return i(),a("div",null,[...t[0]||(t[0]=[s("",28)])])}const y=e(l,[["render",n]]);export{c as __pageData,y as default};
|
||||||
17
docs/assets/index.md.BWH7zN4c.js
Normal file
17
docs/assets/index.md.BWH7zN4c.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import{_ as s,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SigPro","text":"Atomic Unified Reactive Engine","tagline":"Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.","image":{"src":"/logo.png","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://git.natxocc.com/sigpro/"}]},"features":[{"title":"Atomic Reactivity","details":"Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders."},{"title":"Zero Dependencies","details":"Written in pure Vanilla JS. Maximum performance with the smallest footprint possible."},{"title":"Modular Ecosystem","details":"Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(h,i,p,r,k,o){return a(),t("div",null,[...i[0]||(i[0]=[e(`<h2 id="why-sigpro" tabindex="-1">Why SigPro? <a class="header-anchor" href="#why-sigpro" aria-label="Permalink to "Why SigPro?""></a></h2><p>SigPro isn't just another framework; it's a high-performance engine. It strips away the complexity of massive bundles and returns to the essence of the web, enhanced with reactive superpowers.</p><h3 id="the-core-in-action" tabindex="-1">The Core in Action <a class="header-anchor" href="#the-core-in-action" aria-label="Permalink to "The Core in Action""></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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro2'</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;">// A reactive state Signal</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>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// A Computed signal that updates automatically</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>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// UI that breathes with your data</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;"> 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;">"Count: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $count]),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Double: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $double]),</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:#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;"> $count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Increment"</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:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter);</span></span></code></pre></div><hr><h3 id="key-features" tabindex="-1">Key Features <a class="header-anchor" href="#key-features" aria-label="Permalink to "Key Features""></a></h3><h4 id="⚡️-fine-grained-reactivity" tabindex="-1">⚡️ Fine-Grained Reactivity <a class="header-anchor" href="#⚡️-fine-grained-reactivity" aria-label="Permalink to "⚡️ Fine-Grained Reactivity""></a></h4><p>Unlike frameworks that diff complex trees (V-DOM), SigPro binds your signals directly to real DOM text nodes and attributes. If the data changes, the node changes. Period.</p><h4 id="🔌-polymorphic-plugin-system" tabindex="-1">🔌 Polymorphic Plugin System <a class="header-anchor" href="#🔌-polymorphic-plugin-system" aria-label="Permalink to "🔌 Polymorphic Plugin System""></a></h4><p>Extend core capabilities in a single line. Add global UI helpers, routing, or state persistence seamlessly.</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI, Router } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<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></code></pre></div><h4 id="📂-file-based-routing" tabindex="-1">📂 File-Based Routing <a class="header-anchor" href="#📂-file-based-routing" aria-label="Permalink to "📂 File-Based Routing""></a></h4><p>With our dedicated Vite plugin, manage your routes simply by creating files in <code>src/pages/</code>. It supports native <strong>Lazy Loading</strong> out of the box for lightning-fast initial loads.</p><hr><h3 id="quick-install" tabindex="-1">Quick Install <a class="header-anchor" href="#quick-install" aria-label="Permalink to "Quick Install""></a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-3fEVp" id="tab-dydZTrS" checked><label data-title="npm" for="tab-dydZTrS">npm</label><input type="radio" name="group-3fEVp" id="tab-yCPkQZQ"><label data-title="pnpm" for="tab-yCPkQZQ">pnpm</label><input type="radio" name="group-3fEVp" id="tab-Z0nuZ0h"><label data-title="yarn" for="tab-Z0nuZ0h">yarn</label><input type="radio" name="group-3fEVp" id="tab-kBgm0UA"><label data-title="bun" for="tab-kBgm0UA">bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="community-support" tabindex="-1">Community & Support <a class="header-anchor" href="#community-support" aria-label="Permalink to "Community & Support""></a></h2><p>SigPro is an open-source project. Whether you want to contribute, report a bug, or just talk about reactivity, join us on our official repository.</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>Built with ❤️ by NatxoCC</span></span></code></pre></div>`,20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
||||||
1
docs/assets/index.md.BWH7zN4c.lean.js
Normal file
1
docs/assets/index.md.BWH7zN4c.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as s,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SigPro","text":"Atomic Unified Reactive Engine","tagline":"Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.","image":{"src":"/logo.png","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://git.natxocc.com/sigpro/"}]},"features":[{"title":"Atomic Reactivity","details":"Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders."},{"title":"Zero Dependencies","details":"Written in pure Vanilla JS. Maximum performance with the smallest footprint possible."},{"title":"Modular Ecosystem","details":"Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(h,i,p,r,k,o){return a(),t("div",null,[...i[0]||(i[0]=[e("",20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
||||||
BIN
docs/assets/inter-italic-cyrillic-ext.r48I6akx.woff2
Normal file
BIN
docs/assets/inter-italic-cyrillic-ext.r48I6akx.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-italic-cyrillic.By2_1cv3.woff2
Normal file
BIN
docs/assets/inter-italic-cyrillic.By2_1cv3.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-italic-greek-ext.1u6EdAuj.woff2
Normal file
BIN
docs/assets/inter-italic-greek-ext.1u6EdAuj.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-italic-greek.DJ8dCoTZ.woff2
Normal file
BIN
docs/assets/inter-italic-greek.DJ8dCoTZ.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-italic-latin-ext.CN1xVJS-.woff2
Normal file
BIN
docs/assets/inter-italic-latin-ext.CN1xVJS-.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-italic-latin.C2AdPX0b.woff2
Normal file
BIN
docs/assets/inter-italic-latin.C2AdPX0b.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-italic-vietnamese.BSbpV94h.woff2
Normal file
BIN
docs/assets/inter-italic-vietnamese.BSbpV94h.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2
Normal file
BIN
docs/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-cyrillic.C5lxZ8CY.woff2
Normal file
BIN
docs/assets/inter-roman-cyrillic.C5lxZ8CY.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-greek-ext.CqjqNYQ-.woff2
Normal file
BIN
docs/assets/inter-roman-greek-ext.CqjqNYQ-.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-greek.BBVDIX6e.woff2
Normal file
BIN
docs/assets/inter-roman-greek.BBVDIX6e.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-latin-ext.4ZJIpNVo.woff2
Normal file
BIN
docs/assets/inter-roman-latin-ext.4ZJIpNVo.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-latin.Di8DUHzh.woff2
Normal file
BIN
docs/assets/inter-roman-latin.Di8DUHzh.woff2
Normal file
Binary file not shown.
BIN
docs/assets/inter-roman-vietnamese.BjW4sHH5.woff2
Normal file
BIN
docs/assets/inter-roman-vietnamese.BjW4sHH5.woff2
Normal file
Binary file not shown.
27
docs/assets/plugins_core.debug.md.CVHw_PN0.js
Normal file
27
docs/assets/plugins_core.debug.md.CVHw_PN0.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Development Tool: _debug","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.debug.md","filePath":"plugins/core.debug.md"}'),e={name:"plugins/core.debug.md"};function l(h,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="development-tool-debug" tabindex="-1">Development Tool: <code>_debug</code> <a class="header-anchor" href="#development-tool-debug" aria-label="Permalink to "Development Tool: \`_debug\`""></a></h1><p>The <strong>Debug Plugin</strong> is a lightweight reactive listener. Once attached to a signal or a computed function, it automatically monitors changes, compares values, and formats the output in the browser console.</p><h2 id="_1-core-features" tabindex="-1">1. Core Features <a class="header-anchor" href="#_1-core-features" aria-label="Permalink to "1. Core Features""></a></h2><ul><li><strong>Reactive Tracking:</strong> Automatically logs whenever the tracked signal updates.</li><li><strong>Visual Grouping:</strong> Uses styled console groups to keep your dev tools organized.</li><li><strong>Object Inspection:</strong> Automatically uses <code>console.table()</code> when the signal contains an object or array.</li><li><strong>Efficient Comparison:</strong> Uses <code>Object.is</code> to prevent redundant logging if the value hasn't actually changed.</li></ul><hr><h2 id="_2-installation" tabindex="-1">2. Installation <a class="header-anchor" href="#_2-installation" aria-label="Permalink to "2. Installation""></a></h2><p>To use <code>_debug</code>, you only need the SigPro core. Register the plugin in your <code>main.js</code>. You can conditionally load it so it only runs during development.</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Debug } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</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;">// Only load Debug in development mode</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> plugins</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:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEV</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) plugins.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Debug);</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<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;">(plugins).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><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.default));</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Sp89o" id="tab-TKkcTHw" checked><label data-title="NPM" for="tab-TKkcTHw">NPM</label><input type="radio" name="group-Sp89o" id="tab-IttJyEH"><label data-title="PNPM" for="tab-IttJyEH">PNPM</label><input type="radio" name="group-Sp89o" id="tab-CBu-sMI"><label data-title="Yarn" for="tab-CBu-sMI">Yarn</label><input type="radio" name="group-Sp89o" id="tab-GjQF4LV"><label data-title="Bun" for="tab-GjQF4LV">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>Call <code>_debug</code> anywhere in your component. It stays active in the background, watching the signal's lifecycle.</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;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</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:#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>
|
||||||
|
<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;">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Guest"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Viewer"</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;"> // Start tracking</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($count, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Main Counter"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($user, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"User Session"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><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;"> 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;"> $count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Increment"</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:#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;"> $user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Admin"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Super"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Promote"</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-console-output-breakdown" tabindex="-1">4. Console Output Breakdown <a class="header-anchor" href="#_4-console-output-breakdown" aria-label="Permalink to "4. Console Output Breakdown""></a></h2><p>When a signal changes, the console displays a structured block:</p><ol><li><strong>Header:</strong> A styled badge with the name (e.g., <code>SigPro Debug: Main Counter</code>).</li><li><strong>Previous Value:</strong> The value before the update (in red).</li><li><strong>Current Value:</strong> The new value (in green).</li><li><strong>Table View:</strong> If the value is an object, a formatted table appears automatically.</li></ol><hr><h2 id="_5-debugging-computed-values" tabindex="-1">5. Debugging Computed Values <a class="header-anchor" href="#_5-debugging-computed-values" aria-label="Permalink to "5. Debugging Computed Values""></a></h2><p>You can also debug <strong>computed functions</strong> to see exactly when derived state is recalculated.</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;"> $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;"> $tax</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.21</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;"> $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:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $tax</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;">// Monitor the result of the calculation</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($total, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Final Invoice Total"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_6-why-use-debug" tabindex="-1">6. Why use <code>_debug</code>? <a class="header-anchor" href="#_6-why-use-debug" aria-label="Permalink to "6. Why use \`_debug\`?""></a></h2><ol><li><strong>Clean Logic:</strong> No need to scatter <code>console.log</code> inside your reactive functions.</li><li><strong>State History:</strong> Instantly see the "Before" and "After" of any user action.</li><li><strong>No-Noise:</strong> It only logs when a real change occurs, keeping the console clean.</li><li><strong>Deep Inspection:</strong> The automatic <code>console.table</code> makes debugging large API responses much faster.</li></ol>`,24)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
|
||||||
1
docs/assets/plugins_core.debug.md.CVHw_PN0.lean.js
Normal file
1
docs/assets/plugins_core.debug.md.CVHw_PN0.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Development Tool: _debug","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.debug.md","filePath":"plugins/core.debug.md"}'),e={name:"plugins/core.debug.md"};function l(h,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",24)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
|
||||||
30
docs/assets/plugins_core.fetch.md.BIc8aMQh.js
Normal file
30
docs/assets/plugins_core.fetch.md.BIc8aMQh.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Data Fetching: _fetch","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.fetch.md","filePath":"plugins/core.fetch.md"}'),e={name:"plugins/core.fetch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="data-fetching-fetch" tabindex="-1">Data Fetching: <code>_fetch</code> <a class="header-anchor" href="#data-fetching-fetch" aria-label="Permalink to "Data Fetching: \`_fetch\`""></a></h1><p>The <strong>Fetch Plugin</strong> provides a reactive wrapper around the native browser Fetch API. Instead of managing complex <code>async/await</code> flows within your UI, <code>_fetch</code> returns a "Reactive Tripod" (Data, Loading, and Error) that your components can listen to automatically.</p><h2 id="_1-core-concept" tabindex="-1">1. Core Concept <a class="header-anchor" href="#_1-core-concept" aria-label="Permalink to "1. Core Concept""></a></h2><p>When you call <code>_fetch</code>, it returns three signals immediately. Your UI declares how to react to these signals as they change from their initial state to the final response.</p><ul><li><strong><code>$data</code></strong>: Initialized as <code>null</code>. Automatically holds the JSON response on success.</li><li><strong><code>$loading</code></strong>: Initialized as <code>true</code>. Flips to <code>false</code> once the request settles.</li><li><strong><code>$error</code></strong>: Initialized as <code>null</code>. Holds the error message if the request fails.</li></ul><hr><h2 id="_2-installation" tabindex="-1">2. Installation <a class="header-anchor" href="#_2-installation" aria-label="Permalink to "2. Installation""></a></h2><p>Register the <code>Fetch</code> plugin in your <code>main.js</code>. By convention, we load it alongside the UI and Router to have the full SigPro ecosystem ready.</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Fetch } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</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;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([Fetch]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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:#6A737D;--shiki-dark:#6A737D;"> // Now _fetch() is available globally</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><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.default));</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>Use <code>_fetch</code> inside your component to get live updates. The UI updates surgically whenever a signal changes.</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;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</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:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">$data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">$loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">$error</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;"> _fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://api.github.com/users/octocat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'p-6 flex flex-col gap-4'</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;">"Profile Details"</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 1. Loading State (using SigPro UI button)</span></span>
|
||||||
|
<span class="line"><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;"> $loading</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;"> _button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ $loading: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Fetching..."</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;"> // 2. Error State</span></span>
|
||||||
|
<span class="line"><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;"> $error</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;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'alert alert-error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$error</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;"> // 3. Success State</span></span>
|
||||||
|
<span class="line"><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;"> $data</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;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'card bg-base-200 p-4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ src: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().avatar_url, class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'w-16 rounded-full'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().name),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().bio)</span></span>
|
||||||
|
<span class="line"><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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-advanced-configuration" tabindex="-1">4. Advanced Configuration <a class="header-anchor" href="#_4-advanced-configuration" aria-label="Permalink to "4. Advanced Configuration""></a></h2><p><code>_fetch</code> accepts the same <code>RequestInit</code> options as the standard <code>fetch()</code> (methods, headers, body, etc.).</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:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">$data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">$loading</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;"> _fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/api/v1/update'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> method: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'PATCH'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> headers: { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Content-Type'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'application/json'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> body: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">JSON</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stringify</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'active'</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-why-use-fetch-instead-of-native-fetch" tabindex="-1">5. Why use <code>_fetch</code> instead of native Fetch? <a class="header-anchor" href="#_5-why-use-fetch-instead-of-native-fetch" aria-label="Permalink to "5. Why use \`_fetch\` instead of native Fetch?""></a></h2><ol><li><strong>Declarative UI</strong>: You define the "Loading", "Error", and "Success" templates once, and they swap automatically.</li><li><strong>No <code>useEffect</code> required</strong>: Since SigPro is natively reactive, you don't need lifecycle hooks to trigger re-renders; the signals handle it.</li><li><strong>Consistency</strong>: It follows the same <code>_prefix</code> pattern as the rest of the official plugin ecosystem.</li><li><strong>Automatic JSON Parsing</strong>: It assumes JSON by default and handles 404/500 errors by populating the <code>$error</code> signal.</li></ol>`,20)])])}const c=i(e,[["render",h]]);export{o as __pageData,c as default};
|
||||||
1
docs/assets/plugins_core.fetch.md.BIc8aMQh.lean.js
Normal file
1
docs/assets/plugins_core.fetch.md.BIc8aMQh.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Data Fetching: _fetch","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.fetch.md","filePath":"plugins/core.fetch.md"}'),e={name:"plugins/core.fetch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",20)])])}const c=i(e,[["render",h]]);export{o as __pageData,c as default};
|
||||||
31
docs/assets/plugins_core.router.md.bGFltJyy.js
Normal file
31
docs/assets/plugins_core.router.md.bGFltJyy.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/plugins_core.router.md.bGFltJyy.lean.js
Normal file
1
docs/assets/plugins_core.router.md.bGFltJyy.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"Navigation Plugin: Router","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.router.md","filePath":"plugins/core.router.md"}'),e={name:"plugins/core.router.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",24)])])}const g=i(e,[["render",h]]);export{E as __pageData,g as default};
|
||||||
29
docs/assets/plugins_core.storage.md.Bgu1q6YH.js
Normal file
29
docs/assets/plugins_core.storage.md.Bgu1q6YH.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Persistence Tool: _storage","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.storage.md","filePath":"plugins/core.storage.md"}'),e={name:"plugins/core.storage.md"};function h(l,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="persistence-tool-storage" tabindex="-1">Persistence Tool: <code>_storage</code> <a class="header-anchor" href="#persistence-tool-storage" aria-label="Permalink to "Persistence Tool: \`_storage\`""></a></h1><p>The Storage plugin synchronizes a signal with a specific key in your browser's <code>localStorage</code>. It handles both the <strong>initial hydration</strong> (loading data when the app starts) and <strong>automatic saving</strong> whenever the signal's value changes.</p><h2 id="_1-core-concept" tabindex="-1">1. Core Concept <a class="header-anchor" href="#_1-core-concept" aria-label="Permalink to "1. Core Concept""></a></h2><p>When you "attach" a signal to <code>_storage</code>, two things happen:</p><ol><li><strong>Hydration:</strong> The plugin checks if the key already exists in <code>localStorage</code>. If it does, it parses the JSON and updates the signal immediately.</li><li><strong>Reactive Sync:</strong> It creates a reactive watcher that stringifies and saves the signal's value to the disk every time it is updated.</li></ol><hr><h2 id="_2-installation" tabindex="-1">2. Installation <a class="header-anchor" href="#_2-installation" aria-label="Permalink to "2. Installation""></a></h2><p>Register the <code>Storage</code> plugin in your <code>main.js</code>. Since this is a logic-only plugin, it doesn't require any CSS or UI dependencies.</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Storage } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</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;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Storage).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><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.default));</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ve29n" id="tab-r-zQL8a" checked><label data-title="NPM" for="tab-r-zQL8a">NPM</label><input type="radio" name="group-ve29n" id="tab-EpinxCs"><label data-title="PNPM" for="tab-EpinxCs">PNPM</label><input type="radio" name="group-ve29n" id="tab-68POdFk"><label data-title="Yarn" for="tab-68POdFk">Yarn</label><input type="radio" name="group-ve29n" id="tab-mjku06r"><label data-title="Bun" for="tab-mjku06r">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>You can wrap any signal with <code>_storage</code>. It is common practice to do this right after creating the signal.</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;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</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:#6A737D;--shiki-dark:#6A737D;"> // 1. Create a signal with a default value</span></span>
|
||||||
|
<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;">'light'</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;"> // 2. Persist it. If 'user_theme' exists in localStorage, </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // $theme will be updated to that value instantly.</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _storage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($theme, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user_theme'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`app-\${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</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;">\`Current Theme: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</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>
|
||||||
|
<span class="line"><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;"> $theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">t</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> t </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Toggle 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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-complex-data-objects-arrays" tabindex="-1">4. Complex Data (Objects & Arrays) <a class="header-anchor" href="#_4-complex-data-objects-arrays" aria-label="Permalink to "4. Complex Data (Objects & Arrays)""></a></h2><p>Since the plugin uses <code>JSON.parse</code> and <code>JSON.stringify</code> internally, it works perfectly with complex state structures.</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;"> $settings</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> notifications: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fontSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</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:#6A737D;--shiki-dark:#6A737D;">// Automatically saves the whole object whenever any property changes</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_storage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($settings, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'app_settings'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-why-use-storage" tabindex="-1">5. Why use <code>_storage</code>? <a class="header-anchor" href="#_5-why-use-storage" aria-label="Permalink to "5. Why use \`_storage\`?""></a></h2><ol><li><strong>Zero Boilerplate:</strong> You don't need to manually write <code>localStorage.getItem</code> or <code>setItem</code> logic inside your components.</li><li><strong>Chaining:</strong> Because <code>_storage</code> returns the signal, you can persist it inline.</li><li><strong>Error Resilience:</strong> It includes a built-in <code>try/catch</code> block to prevent your app from crashing if the stored JSON is corrupted.</li><li><strong>Surgical Persistence:</strong> Only the signals you explicitly mark for storage are saved, keeping your <code>localStorage</code> clean.</li></ol><hr><h2 id="_6-pro-tip-combining-with-debug" tabindex="-1">6. Pro Tip: Combining with Debug <a class="header-anchor" href="#_6-pro-tip-combining-with-debug" aria-label="Permalink to "6. Pro Tip: Combining with Debug""></a></h2><p>You can chain plugins to create a fully monitored and persistent state:</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;"> $score</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _storage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</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:#032F62;--shiki-dark:#9ECBFF;">'high_score'</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;">// Now it's saved to disk AND logged to console on every change</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($score, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Game Score"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,25)])])}const c=i(e,[["render",h]]);export{g as __pageData,c as default};
|
||||||
1
docs/assets/plugins_core.storage.md.Bgu1q6YH.lean.js
Normal file
1
docs/assets/plugins_core.storage.md.Bgu1q6YH.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Persistence Tool: _storage","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.storage.md","filePath":"plugins/core.storage.md"}'),e={name:"plugins/core.storage.md"};function h(l,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",25)])])}const c=i(e,[["render",h]]);export{g as __pageData,c as default};
|
||||||
30
docs/assets/plugins_core.ui.md.DDLum7rv.js
Normal file
30
docs/assets/plugins_core.ui.md.DDLum7rv.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/plugins_core.ui.md.DDLum7rv.lean.js
Normal file
1
docs/assets/plugins_core.ui.md.DDLum7rv.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Official UI Plugin: UI","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.ui.md","filePath":"plugins/core.ui.md"}'),n={name:"plugins/core.ui.md"};function l(h,s,p,o,d,r){return t(),a("div",null,[...s[0]||(s[0]=[e("",40)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};
|
||||||
48
docs/assets/plugins_custom.md.D2KGTblR.js
Normal file
48
docs/assets/plugins_custom.md.D2KGTblR.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Creating Custom Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/custom.md","filePath":"plugins/custom.md"}'),l={name:"plugins/custom.md"};function h(e,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="creating-custom-plugins" tabindex="-1">Creating Custom Plugins <a class="header-anchor" href="#creating-custom-plugins" aria-label="Permalink to "Creating Custom Plugins""></a></h1><p>There are two main ways to expose a plugin's functionality: <strong>Static/Manual Imports</strong> (cleaner for large projects) or <strong>Global/Automatic Window Injection</strong> (easier for quick scripts and global helpers).</p><h2 id="_1-the-anatomy-of-a-plugin" tabindex="-1">1. The Anatomy of a Plugin <a class="header-anchor" href="#_1-the-anatomy-of-a-plugin" aria-label="Permalink to "1. The Anatomy of a Plugin""></a></h2><p>A plugin is a standard JavaScript function. By convention, if a plugin adds a global helper or component, it should be prefixed with an underscore (<code>_</code>).</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;">// plugins/my-utils.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyUtils</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$</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;"> </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 1. Attach to the SigPro instance</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">capitalize</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">str</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;"> str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">charAt</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:#6F42C1;--shiki-dark:#B392F0;">toUpperCase</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;"> str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">slice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</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;"> // 2. Attach to the Window (Global access)</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_hello</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">name</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;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Hello, \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">capitalize</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">name</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}!\`</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 3. You can also return values if needed</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'1.0.0'</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="_2-integration-strategies" tabindex="-1">2. Integration Strategies <a class="header-anchor" href="#_2-integration-strategies" aria-label="Permalink to "2. Integration Strategies""></a></h2><h3 id="option-a-manual-import-recommended" tabindex="-1">Option A: Manual Import (Recommended) <a class="header-anchor" href="#option-a-manual-import-recommended" aria-label="Permalink to "Option A: Manual Import (Recommended)""></a></h3><p>This approach keeps your global namespace clean. You import the logic only where you need it, but the plugin still initializes the core <code>$</code> extensions.</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;">// main.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyUtils } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './plugins/my-utils.js'</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;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyUtils);</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</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:#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:#032F62;--shiki-dark:#9ECBFF;"> "sigpro"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // $.capitalize was added by the plugin</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">capitalize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name)); </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><h3 id="option-b-automatic-window-injection" tabindex="-1">Option B: Automatic Window Injection <a class="header-anchor" href="#option-b-automatic-window-injection" aria-label="Permalink to "Option B: Automatic Window Injection""></a></h3><p>If your plugin defines global tags (like <code>_button</code> or <code>_hello</code>), you should attach them to the <code>window</code> object inside the plugin function. This makes them available everywhere without imports.</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;">// plugins/theme.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$</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:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $dark</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;">false</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;"> window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_themeToggle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||||
|
<span class="line"><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;"> $dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">v</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">v),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</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;"> $dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'bg-black text-white'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'bg-white text-black'</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Toggle Mode"</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:#6A737D;--shiki-dark:#6A737D;">// main.js</span></span>
|
||||||
|
<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;">(Theme).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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:#6A737D;--shiki-dark:#6A737D;"> // _themeToggle is now a global function</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_3-asynchronous-plugins" tabindex="-1">3. Asynchronous Plugins <a class="header-anchor" href="#_3-asynchronous-plugins" aria-label="Permalink to "3. Asynchronous Plugins""></a></h2><p>If your plugin needs to load external data or scripts before the app starts, make it <code>async</code>. SigPro will wait for it.</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;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ConfigLoader</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$</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:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> res</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/config.json'</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;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> res.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.config </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Attach loaded config to SigPro</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:#6A737D;--shiki-dark:#6A737D;">// Usage</span></span>
|
||||||
|
<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;">(ConfigLoader).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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;">"Config loaded:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $.config);</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_4-best-practices-for-plugin-authors" tabindex="-1">4. Best Practices for Plugin Authors <a class="header-anchor" href="#_4-best-practices-for-plugin-authors" aria-label="Permalink to "4. Best Practices for Plugin Authors""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Rule</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Prefixing</strong></td><td style="text-align:left;">Use <code>_</code> for UI components (<code>_modal</code>) and <code>$.</code> for logic (<code>$.fetch</code>).</td></tr><tr><td style="text-align:left;"><strong>Idempotency</strong></td><td style="text-align:left;">Ensure calling <code>$.plugin(MyPlugin)</code> twice doesn't break the app.</td></tr><tr><td style="text-align:left;"><strong>Encapsulation</strong></td><td style="text-align:left;">Use the <code>$</code> instance passed as an argument rather than importing it again inside the plugin.</td></tr><tr><td style="text-align:left;"><strong>Reactivity</strong></td><td style="text-align:left;">Always use <code>$(...)</code> for internal state so the app stays reactive.</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><p>Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-BH7JQ" id="tab-QW4EYdy" checked><label data-title="NPM" for="tab-QW4EYdy">NPM</label><input type="radio" name="group-BH7JQ" id="tab-tWt-JWH"><label data-title="PNPM" for="tab-tWt-JWH">PNPM</label><input type="radio" name="group-BH7JQ" id="tab-VAxdkNa"><label data-title="Yarn" for="tab-VAxdkNa">Yarn</label><input type="radio" name="group-BH7JQ" id="tab-3QjUdhj"><label data-title="Bun" for="tab-3QjUdhj">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div>`,24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
|
||||||
1
docs/assets/plugins_custom.md.D2KGTblR.lean.js
Normal file
1
docs/assets/plugins_custom.md.D2KGTblR.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Creating Custom Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/custom.md","filePath":"plugins/custom.md"}'),l={name:"plugins/custom.md"};function h(e,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t("",24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
|
||||||
36
docs/assets/plugins_quick.md.ODjl7edh.js
Normal file
36
docs/assets/plugins_quick.md.ODjl7edh.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Extending SigPro: $.plugin","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/quick.md","filePath":"plugins/quick.md"}'),e={name:"plugins/quick.md"};function l(h,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="extending-sigpro-plugin" tabindex="-1">Extending SigPro: <code>$.plugin</code> <a class="header-anchor" href="#extending-sigpro-plugin" aria-label="Permalink to "Extending SigPro: \`$.plugin\`""></a></h1><p>The plugin system is the engine's way of growing. It allows you to inject new functionality directly into the <code>$</code> object or load external resources.</p><h2 id="_1-how-plugins-work" tabindex="-1">1. How Plugins Work <a class="header-anchor" href="#_1-how-plugins-work" aria-label="Permalink to "1. How Plugins Work""></a></h2><p>A plugin in <strong>SigPro</strong> is simply a function that receives the core instance. When you run <code>$.plugin(MyPlugin)</code>, the engine hands over the <code>$</code> object so the plugin can attach new methods or register global tags (like <code>div()</code>, <code>span()</code>, etc.).</p><h3 id="functional-plugin-example" tabindex="-1">Functional Plugin Example <a class="header-anchor" href="#functional-plugin-example" aria-label="Permalink to "Functional Plugin 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:#6A737D;--shiki-dark:#6A737D;">// A plugin that adds a simple logger to any signal</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Logger</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$</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;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Log"</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:#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;"> 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;">\`[\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">label</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}]:\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">target</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Activation</span></span>
|
||||||
|
<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;">(Logger);</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($count, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Counter"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Now available globally via $</span></span></code></pre></div><hr><h2 id="_2-initialization-patterns" tabindex="-1">2. Initialization Patterns <a class="header-anchor" href="#_2-initialization-patterns" aria-label="Permalink to "2. Initialization Patterns""></a></h2><p>Since plugins often set up global variables (like the HTML tags), the order of initialization is critical. Here are the two ways to start your app:</p><h3 id="option-a-the-safe-async-start-recommended" tabindex="-1">Option A: The "Safe" Async Start (Recommended) <a class="header-anchor" href="#option-a-the-safe-async-start-recommended" aria-label="Permalink to "Option A: The "Safe" Async Start (Recommended)""></a></h3><p>This is the most robust way. It ensures all global tags (<code>div</code>, <code>button</code>, etc.) are created <strong>before</strong> your App code is even read by the browser.</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;">// main.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI, Router } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</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;">// 1. Load plugins first</span></span>
|
||||||
|
<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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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;"> </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 2. Import your app only after the environment is ready</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">appFile</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:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> MyApp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> appFile.default;</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;">(MyApp, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</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:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="option-b-static-start-no-global-tags" tabindex="-1">Option B: Static Start (No Global Tags) <a class="header-anchor" href="#option-b-static-start-no-global-tags" aria-label="Permalink to "Option B: Static Start (No Global Tags)""></a></h3><p>Use this only if you prefer <strong>not</strong> to use global tags and want to use <code>$.html</code> directly in your components. This allows for standard static imports.</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;">// main.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyApp </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Static import works here</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<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;">);</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;">(MyApp, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><blockquote><p><strong>Warning:</strong> In this mode, if <code>App.js</code> uses <code>div()</code> instead of <code>$.html('div')</code>, it will throw a <code>ReferenceError</code>.</p></blockquote><hr><h2 id="_3-resource-plugins-external-scripts" tabindex="-1">3. Resource Plugins (External Scripts) <a class="header-anchor" href="#_3-resource-plugins-external-scripts" aria-label="Permalink to "3. Resource Plugins (External Scripts)""></a></h2><p>You can pass a <strong>URL</strong> or an <strong>Array of URLs</strong>. SigPro will inject them as <code><script></code> tags and return a Promise that resolves when the scripts are fully loaded and executed.</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;">// Loading external libraries as plugins</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><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>
|
||||||
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'https://cdn.jsdelivr.net/npm/chart.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'https://cdn.example.com/custom-ui-lib.js'</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:#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;">"External resources are ready to use!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-polymorphic-loading-reference" tabindex="-1">4. Polymorphic Loading Reference <a class="header-anchor" href="#_4-polymorphic-loading-reference" aria-label="Permalink to "4. Polymorphic Loading Reference""></a></h2><p>The <code>$.plugin</code> method adapts to whatever you throw at it:</p><table tabindex="0"><thead><tr><th style="text-align:left;">Input Type</th><th style="text-align:left;">Action</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Function</strong></td><td style="text-align:left;">Executes <code>fn($)</code></td><td style="text-align:left;">Synchronous / Immediate</td></tr><tr><td style="text-align:left;"><strong>String (URL)</strong></td><td style="text-align:left;">Injects <code><script src="..."></code></td><td style="text-align:left;">Asynchronous (Returns Promise)</td></tr><tr><td style="text-align:left;"><strong>Array</strong></td><td style="text-align:left;">Processes each item in the list</td><td style="text-align:left;">Returns Promise if any item is Async</td></tr></tbody></table><hr><h2 id="💡-pro-tip-why-the-then" tabindex="-1">💡 Pro Tip: Why the <code>.then()</code>? <a class="header-anchor" href="#💡-pro-tip-why-the-then" aria-label="Permalink to "💡 Pro Tip: Why the \`.then()\`?""></a></h2><p>Using <code>$.plugin([...]).then(...)</code> is like giving your app a "Pre-flight Check". It guarantees that:</p><ol><li>All reactive methods are attached.</li><li>Global HTML tags are defined.</li><li>External libraries (like Chart.js) are loaded.</li><li><strong>The result:</strong> Your components are cleaner, smaller, and error-free.</li></ol>`,28)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
|
||||||
1
docs/assets/plugins_quick.md.ODjl7edh.lean.js
Normal file
1
docs/assets/plugins_quick.md.ODjl7edh.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Extending SigPro: $.plugin","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/quick.md","filePath":"plugins/quick.md"}'),e={name:"plugins/quick.md"};function l(h,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",28)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
|
||||||
1
docs/assets/style.7j_EAAZ2.css
Normal file
1
docs/assets/style.7j_EAAZ2.css
Normal file
File diff suppressed because one or more lines are too long
50
docs/assets/vite_plugin.md.4TJA8cv0.js
Normal file
50
docs/assets/vite_plugin.md.4TJA8cv0.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Vite Plugin: File-based Routing","description":"","frontmatter":{},"headers":[],"relativePath":"vite/plugin.md","filePath":"vite/plugin.md"}'),e={name:"vite/plugin.md"};function p(l,s,h,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="vite-plugin-file-based-routing" tabindex="-1">Vite Plugin: File-based Routing <a class="header-anchor" href="#vite-plugin-file-based-routing" aria-label="Permalink to "Vite Plugin: File-based Routing""></a></h1><p>The <code>sigproRouter</code> plugin for Vite automates route generation by scanning your pages directory. It creates a <strong>virtual module</strong> that you can import directly into your code, eliminating the need to maintain a manual routes array.</p><h2 id="_1-project-structure" tabindex="-1">1. Project Structure <a class="header-anchor" href="#_1-project-structure" aria-label="Permalink to "1. Project Structure""></a></h2><p>To use the plugin, organize your files within the <code>src/pages</code> directory. The folder hierarchy directly determines your application's URL structure.</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>my-sigpro-app/</span></span>
|
||||||
|
<span class="line"><span>├── src/</span></span>
|
||||||
|
<span class="line"><span>│ ├── pages/</span></span>
|
||||||
|
<span class="line"><span>│ │ ├── index.js → #/</span></span>
|
||||||
|
<span class="line"><span>│ │ ├── about.js → #/about</span></span>
|
||||||
|
<span class="line"><span>│ │ ├── users/</span></span>
|
||||||
|
<span class="line"><span>│ │ │ └── [id].js → #/users/:id</span></span>
|
||||||
|
<span class="line"><span>│ │ └── blog/</span></span>
|
||||||
|
<span class="line"><span>│ │ ├── index.js → #/blog</span></span>
|
||||||
|
<span class="line"><span>│ │ └── [slug].js → #/blog/:slug</span></span>
|
||||||
|
<span class="line"><span>│ ├── App.js (Optional App Shell)</span></span>
|
||||||
|
<span class="line"><span>│ └── main.js (Entry Point)</span></span>
|
||||||
|
<span class="line"><span>├── vite.config.js</span></span>
|
||||||
|
<span class="line"><span>└── package.json</span></span></code></pre></div><hr><h2 id="_2-setup-configuration" tabindex="-1">2. Setup & Configuration <a class="header-anchor" href="#_2-setup-configuration" aria-label="Permalink to "2. Setup & Configuration""></a></h2><p>Add the plugin to your <code>vite.config.js</code>.</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;">// vite.config.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vite'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { sigproRouter } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/vite'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sigproRouter</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="_3-implementation" tabindex="-1">3. Implementation <a class="header-anchor" href="#_3-implementation" aria-label="Permalink to "3. Implementation""></a></h2><p>You can implement the router either directly in your entry point or inside an App component to support persistent layouts (like a navbar that doesn't re-render).</p><h3 id="option-a-direct-in-main-js" tabindex="-1">Option A: Direct in <code>main.js</code> <a class="header-anchor" href="#option-a-direct-in-main-js" aria-label="Permalink to "Option A: Direct in \`main.js\`""></a></h3><p>Best for simple apps where the router occupies the entire viewport.</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;">// src/main.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Router } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { routes } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'virtual:sigpro-routes'</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;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Router).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes), </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</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><h3 id="option-b-inside-app-js-with-layout" tabindex="-1">Option B: Inside <code>App.js</code> (With Layout) <a class="header-anchor" href="#option-b-inside-app-js-with-layout" aria-label="Permalink to "Option B: Inside \`App.js\` (With Layout)""></a></h3><p>Recommended for apps with a fixed Sidebar or Navbar.</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;">// src/main.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Router } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</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;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Router).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</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:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><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.default, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</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:#6A737D;--shiki-dark:#6A737D;">// src/App.js</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { routes } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'virtual:sigpro-routes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</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:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'layout'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> header</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;">"SigPro App"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ href: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Home"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ href: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#/blog'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Blog"</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]),</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The router only swaps the content inside this <main> tag</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes))</span></span>
|
||||||
|
<span class="line"><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-route-mapping-reference" tabindex="-1">4. Route Mapping Reference <a class="header-anchor" href="#_4-route-mapping-reference" aria-label="Permalink to "4. Route Mapping Reference""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">File Path</th><th style="text-align:left;">Generated Route</th><th style="text-align:left;">Logic</th></tr></thead><tbody><tr><td style="text-align:left;"><code>index.js</code></td><td style="text-align:left;"><code>/</code></td><td style="text-align:left;">Home page</td></tr><tr><td style="text-align:left;"><code>about.js</code></td><td style="text-align:left;"><code>/about</code></td><td style="text-align:left;">Static path</td></tr><tr><td style="text-align:left;"><code>[id].js</code></td><td style="text-align:left;"><code>/:id</code></td><td style="text-align:left;">Dynamic parameter</td></tr><tr><td style="text-align:left;"><code>blog/index.js</code></td><td style="text-align:left;"><code>/blog</code></td><td style="text-align:left;">Folder index</td></tr><tr><td style="text-align:left;"><code>_utils.js</code></td><td style="text-align:left;"><em>Ignored</em></td><td style="text-align:left;">Files starting with <code>_</code> are skipped</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-6P_e6" id="tab-qlMEoLm" checked><label data-title="NPM" for="tab-qlMEoLm">NPM</label><input type="radio" name="group-6P_e6" id="tab-nbzPVp3"><label data-title="PNPM" for="tab-nbzPVp3">PNPM</label><input type="radio" name="group-6P_e6" id="tab-csqvPLb"><label data-title="Yarn" for="tab-csqvPLb">Yarn</label><input type="radio" name="group-6P_e6" id="tab-18Y2ZQS"><label data-title="Bun" for="tab-18Y2ZQS">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div>`,24)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||||
1
docs/assets/vite_plugin.md.4TJA8cv0.lean.js
Normal file
1
docs/assets/vite_plugin.md.4TJA8cv0.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Vite Plugin: File-based Routing","description":"","frontmatter":{},"headers":[],"relativePath":"vite/plugin.md","filePath":"vite/plugin.md"}'),e={name:"vite/plugin.md"};function p(l,s,h,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",24)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||||
50
docs/guide/getting-started.html
Normal file
50
docs/guide/getting-started.html
Normal file
File diff suppressed because one or more lines are too long
31
docs/guide/why.html
Normal file
31
docs/guide/why.html
Normal file
File diff suppressed because one or more lines are too long
1
docs/hashmap.json
Normal file
1
docs/hashmap.json
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"api__.md":"BVVMY-2O","api_html.md":"-lEpgX-Z","api_mount.md":"eGRwkZvh","api_quick.md":"Cy_XozKR","api_tags.md":"33XeBTH-","guide_getting-started.md":"D_gqopPp","guide_why.md":"lyU7T5_c","index.md":"BWH7zN4c","plugins_core.debug.md":"CVHw_PN0","plugins_core.fetch.md":"BIc8aMQh","plugins_core.router.md":"bGFltJyy","plugins_core.storage.md":"Bgu1q6YH","plugins_core.ui.md":"DDLum7rv","plugins_custom.md":"D2KGTblR","plugins_quick.md":"ODjl7edh","vite_plugin.md":"4TJA8cv0"}
|
||||||
41
docs/index.html
Normal file
41
docs/index.html
Normal file
File diff suppressed because one or more lines are too long
118
docs/logo.svg
Normal file
118
docs/logo.svg
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="600.000000pt" height="591.000000pt" viewBox="0 0 600.000000 591.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<g transform="translate(0.000000,591.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M1130 3454 c-44 -9 -84 -27 -123 -57 -97 -76 -91 -242 12 -310 34
|
||||||
|
-23 60 -32 193 -71 58 -17 78 -36 78 -74 0 -28 -24 -44 -74 -49 -65 -8 -137
|
||||||
|
20 -181 68 l-36 40 -27 -33 c-15 -18 -37 -43 -50 -56 -26 -27 -20 -40 35 -86
|
||||||
|
65 -55 118 -71 233 -71 89 1 112 4 152 24 94 46 137 146 108 252 -20 71 -81
|
||||||
|
112 -224 152 -124 35 -150 64 -101 112 42 43 147 25 203 -35 18 -20 19 -19 70
|
||||||
|
30 47 45 51 53 40 69 -22 31 -71 67 -108 80 -39 13 -161 22 -200 15z m193 -36
|
||||||
|
c56 -23 97 -54 97 -73 0 -7 -17 -27 -37 -44 -36 -30 -37 -31 -57 -13 -12 10
|
||||||
|
-34 24 -51 31 -34 14 -148 24 -140 11 2 -4 -4 -10 -15 -13 -32 -8 -43 -52 -24
|
||||||
|
-93 9 -19 19 -32 22 -30 2 3 17 -1 33 -9 15 -8 39 -15 54 -15 14 0 25 -5 25
|
||||||
|
-11 0 -6 9 -8 20 -4 11 4 20 2 20 -4 0 -6 9 -11 21 -11 37 0 114 -59 133 -103
|
||||||
|
24 -55 15 -138 -18 -182 -28 -37 -101 -79 -123 -71 -9 4 -11 1 -7 -5 5 -8 -22
|
||||||
|
-10 -94 -7 -85 3 -106 7 -131 26 -17 12 -37 22 -46 22 -8 0 -15 3 -15 8 0 4
|
||||||
|
-10 12 -22 17 -41 19 -44 40 -12 77 17 19 37 32 45 30 27 -9 69 -44 64 -53 -4
|
||||||
|
-5 2 -6 11 -2 11 4 15 3 11 -4 -5 -7 1 -9 15 -5 12 3 19 1 15 -4 -3 -6 25 -11
|
||||||
|
68 -13 69 -2 77 0 100 23 14 14 31 26 38 27 9 0 9 2 0 6 -7 2 -13 16 -13 29 0
|
||||||
|
33 -38 66 -91 81 -24 6 -71 18 -104 27 -32 9 -63 23 -68 31 -4 8 -12 13 -17
|
||||||
|
10 -4 -3 -23 13 -40 36 -28 34 -33 48 -33 97 0 60 35 138 56 125 5 -3 7 -1 3
|
||||||
|
5 -8 13 2 20 69 49 68 30 168 31 238 1z"/>
|
||||||
|
<path d="M1031 3144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
|
||||||
|
<path d="M945 2900 c-6 -9 11 -50 21 -50 2 0 0 9 -6 20 -6 11 -8 25 -5 30 3 6
|
||||||
|
4 10 1 10 -3 0 -8 -4 -11 -10z"/>
|
||||||
|
<path d="M2428 3445 c-154 -39 -259 -173 -261 -333 -2 -111 21 -177 86 -248
|
||||||
|
77 -85 134 -108 267 -108 86 -1 113 3 151 20 114 53 169 139 177 276 l5 88
|
||||||
|
-167 0 -166 0 0 -66 0 -65 85 3 c74 3 85 1 85 -14 0 -27 -48 -76 -87 -89 -49
|
||||||
|
-16 -133 -6 -176 22 -40 27 -82 89 -91 137 -8 44 10 119 37 159 64 94 220 110
|
||||||
|
304 31 l23 -22 56 56 56 56 -43 32 c-44 32 -97 59 -131 65 -65 13 -159 13
|
||||||
|
-210 0z m202 -16 c8 -2 17 -7 20 -10 3 -3 21 -10 40 -15 19 -5 35 -15 35 -21
|
||||||
|
0 -6 4 -15 9 -20 5 -5 6 -3 2 5 -4 6 -3 12 3 12 6 0 15 -9 22 -21 9 -17 7 -24
|
||||||
|
-10 -40 -11 -10 -24 -27 -30 -36 -9 -17 -13 -16 -59 9 -62 34 -139 53 -157 38
|
||||||
|
-8 -6 -29 -12 -48 -13 -19 -1 -33 -5 -30 -9 2 -5 -3 -8 -12 -8 -9 0 -14 -4
|
||||||
|
-10 -9 3 -5 -4 -12 -15 -16 -11 -3 -20 -13 -20 -22 0 -14 -2 -14 -19 1 -13 12
|
||||||
|
-21 14 -26 6 -3 -6 -1 -9 6 -8 6 2 14 -3 17 -11 2 -8 0 -11 -6 -7 -6 4 -8 -1
|
||||||
|
-5 -13 3 -10 0 -22 -6 -25 -13 -9 -15 -129 -2 -173 12 -42 76 -107 125 -127
|
||||||
|
78 -32 198 -9 226 43 5 11 17 27 26 35 10 11 11 16 3 16 -7 0 -9 3 -6 7 4 3 2
|
||||||
|
12 -4 20 -8 8 -35 13 -79 13 l-68 0 -3 44 -4 44 124 1 c69 1 129 5 134 8 6 4
|
||||||
|
7 1 2 -7 -6 -9 -4 -12 6 -8 10 4 14 -4 14 -31 0 -20 -4 -42 -9 -50 -6 -10 -6
|
||||||
|
-12 3 -7 8 6 10 -4 5 -36 -7 -45 -72 -142 -110 -162 -10 -6 -21 -14 -24 -17
|
||||||
|
-21 -27 -213 -47 -265 -27 -75 28 -115 50 -110 58 3 6 0 7 -8 4 -14 -5 -87 72
|
||||||
|
-87 92 0 5 5 2 10 -6 7 -12 9 -10 8 7 -1 11 -7 19 -14 16 -12 -4 -27 34 -28
|
||||||
|
74 -1 12 -4 25 -8 29 -12 11 -10 64 2 64 6 0 10 5 10 11 0 5 -5 7 -11 3 -8 -5
|
||||||
|
-8 -1 0 14 6 11 11 34 11 51 0 17 4 31 9 31 8 0 24 35 23 50 0 3 19 28 44 55
|
||||||
|
25 29 42 41 38 30 l-6 -20 13 20 c6 11 13 21 15 23 1 2 32 13 68 26 62 20 174
|
||||||
|
28 226 15z"/>
|
||||||
|
<path d="M4670 3451 c-19 -4 -56 -18 -82 -31 -145 -72 -217 -236 -178 -409 14
|
||||||
|
-64 64 -147 106 -179 16 -12 34 -26 41 -32 6 -5 39 -18 72 -30 114 -38 243
|
||||||
|
-22 338 44 205 141 184 489 -37 606 -64 33 -178 47 -260 31z m177 -22 c23 -6
|
||||||
|
40 -16 37 -21 -4 -6 2 -7 15 -3 14 4 23 2 27 -9 3 -9 12 -12 21 -9 11 4 14 2
|
||||||
|
9 -5 -4 -7 -1 -12 8 -12 21 0 85 -89 86 -117 0 -13 4 -23 8 -23 16 0 30 -74
|
||||||
|
26 -130 -7 -100 -11 -119 -24 -135 -7 -8 -9 -15 -6 -15 10 0 -52 -85 -78 -107
|
||||||
|
-20 -16 -50 -32 -116 -61 -31 -14 -161 -10 -219 7 -24 7 -61 23 -81 36 -48 30
|
||||||
|
-114 110 -104 126 5 8 3 9 -6 4 -10 -6 -12 -3 -8 13 4 12 2 22 -2 22 -4 0 -11
|
||||||
|
27 -15 60 -8 71 2 143 18 134 8 -5 7 -2 0 7 -16 16 -17 33 -1 23 6 -4 8 -3 5
|
||||||
|
3 -10 16 13 74 26 66 6 -3 7 -1 3 6 -9 14 57 82 106 108 73 40 189 54 265 32z"/>
|
||||||
|
<path d="M4676 3307 c-22 -10 -47 -28 -57 -40 -10 -12 -18 -18 -19 -14 0 4 -6
|
||||||
|
2 -14 -5 -7 -7 -11 -19 -8 -27 3 -8 1 -12 -5 -8 -11 7 -16 -28 -16 -113 0 -74
|
||||||
|
6 -109 17 -102 5 3 7 -2 3 -11 -4 -10 -2 -16 6 -14 7 1 11 -4 9 -11 -1 -8 2
|
||||||
|
-11 8 -7 5 3 10 -1 10 -10 0 -8 16 -23 35 -32 19 -9 33 -19 31 -22 -2 -3 27
|
||||||
|
-6 64 -6 37 0 66 4 63 8 -3 5 1 7 8 6 23 -4 65 18 87 45 11 14 25 26 32 26 6
|
||||||
|
0 10 6 8 12 -3 7 1 18 7 25 15 15 16 195 2 186 -5 -3 -8 0 -5 7 5 15 -62 84
|
||||||
|
-102 105 -45 23 -118 24 -164 2z m164 -26 c19 -10 49 -37 65 -60 27 -39 30
|
||||||
|
-50 30 -119 0 -65 -4 -83 -25 -114 -36 -53 -85 -78 -156 -78 -68 0 -107 20
|
||||||
|
-149 74 -40 52 -46 146 -15 210 49 102 149 137 250 87z"/>
|
||||||
|
<path d="M1619 3443 c0 -2 0 -33 -1 -70 l0 -68 58 1 59 0 -2 -205 -2 -205 -58
|
||||||
|
3 -58 2 0 -70 0 -71 203 0 202 0 0 70 0 70 -77 -1 c-43 -1 -68 -4 -55 -6 12
|
||||||
|
-2 22 -7 22 -11 0 -4 19 -7 42 -7 l43 0 3 -48 3 -48 -165 3 c-92 2 -166 -1
|
||||||
|
-166 -5 0 -4 -9 -3 -21 3 -16 9 -19 19 -17 53 l3 41 47 1 c76 2 76 -1 76 223
|
||||||
|
1 109 -3 203 -7 211 -5 8 -29 14 -57 15 -32 1 -49 5 -48 14 1 6 2 28 3 47 l1
|
||||||
|
35 176 0 176 0 -4 -47 -3 -48 -42 -1 c-73 -1 -73 -2 -72 -220 1 -107 5 -194
|
||||||
|
10 -194 5 0 9 90 9 199 l0 199 60 -5 61 -6 -3 72 -3 72 -198 2 c-108 1 -197 1
|
||||||
|
-198 0z"/>
|
||||||
|
<path d="M3018 3102 l-3 -342 85 0 85 0 0 112 0 113 105 5 c113 6 145 17 192
|
||||||
|
67 57 60 76 188 39 261 -26 51 -77 99 -118 113 -19 6 -112 12 -208 12 l-175 2
|
||||||
|
-2 -343z m375 307 c20 -5 37 -14 37 -19 0 -6 6 -10 14 -10 8 0 18 -5 22 -12 5
|
||||||
|
-7 3 -8 -6 -3 -9 5 -11 4 -6 -3 4 -7 13 -12 19 -12 7 0 20 -20 30 -45 23 -54
|
||||||
|
19 -135 -8 -197 -4 -10 -11 -15 -16 -12 -5 3 -6 -2 -3 -10 4 -10 -10 -24 -43
|
||||||
|
-43 -53 -31 -55 -32 -167 -38 -107 -5 -112 -12 -106 -131 4 -83 3 -94 -12 -98
|
||||||
|
-10 -2 -18 -1 -18 3 0 3 -20 5 -45 3 l-45 -4 0 321 0 321 158 0 c86 0 174 -5
|
||||||
|
195 -11z"/>
|
||||||
|
<path d="M3187 3308 c-27 -20 -34 -173 -9 -183 26 -10 151 -11 144 -1 -3 5 5
|
||||||
|
7 16 4 12 -4 20 -3 18 1 -3 4 4 15 15 24 29 25 26 100 -5 134 -20 21 -35 26
|
||||||
|
-92 30 -50 3 -74 1 -87 -9z m157 -29 c32 -25 36 -84 7 -120 -16 -20 -30 -24
|
||||||
|
-93 -27 l-74 -4 0 86 1 86 66 0 c52 0 72 -4 93 -21z"/>
|
||||||
|
<path d="M3710 3103 l0 -343 83 0 82 0 -3 120 -3 120 45 0 c44 0 45 -1 79 -57
|
||||||
|
19 -32 49 -86 67 -120 l32 -62 95 -3 c52 -2 97 -1 99 1 7 7 -18 31 -27 25 -5
|
||||||
|
-3 -7 1 -4 8 3 7 -22 59 -55 116 -60 103 -68 122 -51 122 16 0 86 80 98 112
|
||||||
|
39 108 -9 228 -110 277 -37 18 -65 21 -235 23 l-192 3 0 -342z m385 313 c26
|
||||||
|
-5 74 -37 71 -49 -1 -6 -1 -9 1 -4 18 31 73 -77 73 -143 0 -56 -36 -127 -78
|
||||||
|
-155 -17 -11 -35 -30 -41 -42 -9 -19 -6 -27 14 -47 14 -14 25 -32 25 -41 0 -8
|
||||||
|
5 -15 11 -15 6 0 8 -9 4 -20 -4 -13 -2 -19 4 -18 12 3 68 -88 60 -96 -4 -4
|
||||||
|
-77 -7 -120 -5 -17 0 -54 64 -52 87 0 7 -1 11 -5 8 -6 -7 -32 41 -32 61 0 8
|
||||||
|
-4 12 -8 9 -4 -3 -17 11 -27 31 -21 38 -55 58 -67 39 -6 -8 -10 -8 -16 1 -6 9
|
||||||
|
-13 9 -32 0 -27 -14 -27 -12 -29 -150 l-1 -88 -57 2 -58 2 3 316 c2 235 6 317
|
||||||
|
15 323 10 6 301 1 342 -6z"/>
|
||||||
|
<path d="M3886 3328 c3 -4 -1 -8 -9 -8 -22 0 -37 -128 -21 -187 6 -22 11 -23
|
||||||
|
101 -23 91 0 96 1 124 29 41 41 43 113 5 146 -51 44 -67 55 -79 55 -8 0 -7 -4
|
||||||
|
3 -10 11 -7 -4 -10 -48 -10 -35 0 -61 4 -58 8 3 5 -1 9 -9 9 -8 0 -12 -4 -9
|
||||||
|
-9z m180 -49 c43 -43 31 -133 -19 -143 -12 -3 -57 -7 -99 -8 l-78 -3 0 93 0
|
||||||
|
94 85 -3 c75 -4 87 -7 111 -30z"/>
|
||||||
|
<path d="M4167 3099 c7 -7 15 -10 18 -7 3 3 -2 9 -12 12 -14 6 -15 5 -6 -5z"/>
|
||||||
|
<path d="M3986 3017 c3 -10 9 -15 12 -12 3 3 0 11 -7 18 -10 9 -11 8 -5 -6z"/>
|
||||||
|
<path d="M1643 2830 c0 -25 2 -35 4 -22 2 12 2 32 0 45 -2 12 -4 2 -4 -23z"/>
|
||||||
|
<path d="M2923 2373 c13 -4 17 -15 17 -59 0 -60 -16 -77 -51 -55 -11 6 -19 7
|
||||||
|
-19 2 0 -6 6 -13 13 -18 45 -28 81 10 75 82 -2 33 1 46 12 49 8 2 -3 4 -25 4
|
||||||
|
-22 0 -32 -2 -22 -5z"/>
|
||||||
|
<path d="M3072 2368 c-24 -24 -13 -49 28 -65 27 -11 40 -22 38 -32 -4 -20 -44
|
||||||
|
-27 -64 -10 -8 6 -17 9 -20 6 -3 -3 5 -12 18 -21 37 -24 87 -7 88 30 0 15 -19
|
||||||
|
29 -55 41 -34 11 -39 30 -13 47 13 8 23 8 38 -2 27 -16 35 -15 20 3 -15 18
|
||||||
|
-61 20 -78 3z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.8 KiB |
51
docs/plugins/core.debug.html
Normal file
51
docs/plugins/core.debug.html
Normal file
File diff suppressed because one or more lines are too long
54
docs/plugins/core.fetch.html
Normal file
54
docs/plugins/core.fetch.html
Normal file
File diff suppressed because one or more lines are too long
55
docs/plugins/core.router.html
Normal file
55
docs/plugins/core.router.html
Normal file
File diff suppressed because one or more lines are too long
53
docs/plugins/core.storage.html
Normal file
53
docs/plugins/core.storage.html
Normal file
File diff suppressed because one or more lines are too long
54
docs/plugins/core.ui.html
Normal file
54
docs/plugins/core.ui.html
Normal file
File diff suppressed because one or more lines are too long
72
docs/plugins/custom.html
Normal file
72
docs/plugins/custom.html
Normal file
File diff suppressed because one or more lines are too long
60
docs/plugins/quick.html
Normal file
60
docs/plugins/quick.html
Normal file
File diff suppressed because one or more lines are too long
74
docs/vite/plugin.html
Normal file
74
docs/vite/plugin.html
Normal file
File diff suppressed because one or more lines are too long
1
docs/vp-icons.css
Normal file
1
docs/vp-icons.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
.vpi-social-github{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}
|
||||||
2
index.js
2
index.js
@@ -1,2 +1,2 @@
|
|||||||
// index.js
|
// index.js
|
||||||
export * from './src/sigpro/sigpro.js';
|
export * from './sigpro/sigpro.js';
|
||||||
|
|||||||
11
package.json
11
package.json
@@ -3,6 +3,11 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"exports": {
|
||||||
|
".": "./index.js",
|
||||||
|
"./plugins": "./plugins/index.js",
|
||||||
|
"./vite/*": "./vite/*.js"
|
||||||
|
},
|
||||||
"homepage": "https://git.natxocc.com/sigpro2/",
|
"homepage": "https://git.natxocc.com/sigpro2/",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -12,9 +17,9 @@
|
|||||||
"url": "https://git.natxocc.com/natxocc/sigpro2/issues"
|
"url": "https://git.natxocc.com/natxocc/sigpro2/issues"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"docs:dev": "vitepress dev packages/docs",
|
"docs:dev": "vitepress dev src/docs",
|
||||||
"docs:build": "vitepress build packages/docs",
|
"docs:build": "vitepress build src/docs",
|
||||||
"docs:preview": "vitepress preview packages/docs"
|
"docs:preview": "vitepress preview src/docs"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vitepress": "^1.6.4"
|
"vitepress": "^1.6.4"
|
||||||
|
|||||||
@@ -1,2 +0,0 @@
|
|||||||
// index.js
|
|
||||||
export * from './plugin.js';
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import fs from 'fs';
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
export default function sigproRouter() {
|
|
||||||
const virtualModuleId = 'virtual:sigpro-routes';
|
|
||||||
const resolvedVirtualModuleId = '\0' + virtualModuleId;
|
|
||||||
|
|
||||||
const getFiles = (dir) => {
|
|
||||||
if (!fs.existsSync(dir)) return [];
|
|
||||||
return fs.readdirSync(dir, { recursive: true })
|
|
||||||
.filter(file => /\.(js|jsx)$/.test(file))
|
|
||||||
.map(file => path.join(dir, file));
|
|
||||||
};
|
|
||||||
|
|
||||||
const pathToUrl = (pagesDir, filePath) => {
|
|
||||||
const relative = path.relative(pagesDir, filePath)
|
|
||||||
.replace(/\\/g, '/')
|
|
||||||
.replace(/\.(js|jsx)$/, '')
|
|
||||||
.replace(/\/index$/, '')
|
|
||||||
.replace(/^index$/, '/');
|
|
||||||
|
|
||||||
return ('/' + relative)
|
|
||||||
.replace(/\/+/g, '/')
|
|
||||||
.replace(/\[\.\.\.([^\]]+)\]/g, '*')
|
|
||||||
.replace(/\[([^\]]+)\]/g, ':$1')
|
|
||||||
.replace(/\/$/, '') || '/';
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
name: 'sigpro-router',
|
|
||||||
resolveId(id) {
|
|
||||||
if (id === virtualModuleId) return resolvedVirtualModuleId;
|
|
||||||
},
|
|
||||||
load(id) {
|
|
||||||
if (id !== resolvedVirtualModuleId) return;
|
|
||||||
|
|
||||||
const pagesDir = path.resolve(process.cwd(), 'src/pages');
|
|
||||||
const files = getFiles(pagesDir).sort((a, b) => b.length - a.length);
|
|
||||||
|
|
||||||
let imports = '';
|
|
||||||
let routeEntries = '';
|
|
||||||
|
|
||||||
files.forEach((fullPath, i) => {
|
|
||||||
const urlPath = pathToUrl(pagesDir, fullPath);
|
|
||||||
const varName = `Page_${i}`;
|
|
||||||
const importPath = fullPath.replace(/\\/g, '/');
|
|
||||||
|
|
||||||
imports += `import ${varName} from '${importPath}';\n`;
|
|
||||||
routeEntries += ` { path: '${urlPath}', component: ${varName} },\n`;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!routeEntries.includes("path: '*'")) {
|
|
||||||
routeEntries += ` { path: '*', component: () => _h1('404') },\n`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${imports}\nexport const routes = [\n${routeEntries}];`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
* SigPro Debug Plugin
|
* SigPro Debug Plugin
|
||||||
* Reactive state logger for signals and computed values.
|
* Reactive state logger for signals and computed values.
|
||||||
*/
|
*/
|
||||||
$.plugin(($) => {
|
export const Debug = ($) => {
|
||||||
/**
|
/**
|
||||||
* Tracks a signal and logs every state change to the browser console.
|
* Tracks a signal and logs every state change to the browser console.
|
||||||
* @param {Function} $sig - The reactive signal or computed function to monitor.
|
* @param {Function} $sig - The reactive signal or computed function to monitor.
|
||||||
@@ -12,7 +12,7 @@ $.plugin(($) => {
|
|||||||
* $.debug($count, "Counter");
|
* $.debug($count, "Counter");
|
||||||
* $count(1); // Logs: Counter | Old: 0 | New: 1
|
* $count(1); // Logs: Counter | Old: 0 | New: 1
|
||||||
*/
|
*/
|
||||||
$.debug = ($sig, name = "Signal") => {
|
_debug = ($sig, name = "Signal") => {
|
||||||
if (typeof $sig !== 'function') {
|
if (typeof $sig !== 'function') {
|
||||||
return console.warn(`[SigPro Debug] Cannot track "${name}": Not a function/signal.`);
|
return console.warn(`[SigPro Debug] Cannot track "${name}": Not a function/signal.`);
|
||||||
}
|
}
|
||||||
@@ -38,4 +38,4 @@ $.plugin(($) => {
|
|||||||
prev = next;
|
prev = next;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
});
|
};
|
||||||
@@ -1,8 +1,9 @@
|
|||||||
/**
|
/**
|
||||||
* SigPro Fetch Plugin
|
* SigPro Fetch Plugin
|
||||||
* Adds reactive data fetching capabilities to the SigPro instance.
|
* Adds reactive data fetching capabilities to the SigPro instance.
|
||||||
|
* @param {SigPro} $ - The SigPro core instance.
|
||||||
*/
|
*/
|
||||||
$.plugin(($) => {
|
export const Fetch = ($) => {
|
||||||
/**
|
/**
|
||||||
* Performs a reactive asynchronous fetch request.
|
* Performs a reactive asynchronous fetch request.
|
||||||
* @param {string} url - The URL of the resource to fetch.
|
* @param {string} url - The URL of the resource to fetch.
|
||||||
@@ -16,7 +17,7 @@ $.plugin(($) => {
|
|||||||
* () => $error() && span({ class: 'text-red' }, $error())
|
* () => $error() && span({ class: 'text-red' }, $error())
|
||||||
* ]);
|
* ]);
|
||||||
*/
|
*/
|
||||||
$.fetch = (url, options = {}) => {
|
_fetch = (url, options = {}) => {
|
||||||
const $data = $(null);
|
const $data = $(null);
|
||||||
const $loading = $(true);
|
const $loading = $(true);
|
||||||
const $error = $(null);
|
const $error = $(null);
|
||||||
@@ -35,4 +36,4 @@ $.plugin(($) => {
|
|||||||
|
|
||||||
return { $data, $loading, $error };
|
return { $data, $loading, $error };
|
||||||
};
|
};
|
||||||
});
|
};
|
||||||
6
plugins/index.js
Normal file
6
plugins/index.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
// /plugins/index.js
|
||||||
|
export { UI } from './ui.js';
|
||||||
|
export { Fetch } from './fetch.js';
|
||||||
|
export { Storage } from './storage.js';
|
||||||
|
export { Debug } from './debug.js';
|
||||||
|
export { Router } from './router.js';
|
||||||
44
plugins/router.js
Normal file
44
plugins/router.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
// plugins/router.js
|
||||||
|
export const Router = ($) => {
|
||||||
|
|
||||||
|
$.router = (routes) => {
|
||||||
|
const sPath = $(window.location.hash.replace(/^#/, "") || "/");
|
||||||
|
window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
|
||||||
|
|
||||||
|
return div([
|
||||||
|
() => {
|
||||||
|
const current = sPath();
|
||||||
|
const route = routes.find(r => {
|
||||||
|
const rP = r.path.split('/').filter(Boolean);
|
||||||
|
const cP = current.split('/').filter(Boolean);
|
||||||
|
if (rP.length !== cP.length) return false;
|
||||||
|
return rP.every((part, i) => part.startsWith(':') || part === cP[i]);
|
||||||
|
}) || routes.find(r => r.path === "*");
|
||||||
|
|
||||||
|
if (!route) return h1("404 - Not Found");
|
||||||
|
|
||||||
|
// --- LA MEJORA AQUÍ ---
|
||||||
|
const result = typeof route.component === 'function' ? route.component() : route.component;
|
||||||
|
|
||||||
|
// Si el componente es una Promesa (Lazy Loading de Vite), esperamos
|
||||||
|
if (result instanceof Promise) {
|
||||||
|
const $lazyNode = $(span("Cargando página..."));
|
||||||
|
result.then(m => {
|
||||||
|
// Si el módulo tiene un .default (export default), lo usamos
|
||||||
|
const comp = typeof m === 'function' ? m() : (m.default ? m.default() : m);
|
||||||
|
$lazyNode(comp);
|
||||||
|
});
|
||||||
|
return () => $lazyNode();
|
||||||
|
}
|
||||||
|
|
||||||
|
return result instanceof Node ? result : span(String(result));
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
$.router.go = (path) => {
|
||||||
|
window.location.hash = path.startsWith('/') ? path : `/${path}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
window._router = $.router;
|
||||||
|
};
|
||||||
31
plugins/storage.js
Normal file
31
plugins/storage.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* SigPro Storage Plugin
|
||||||
|
* Automatically synchronizes signals with localStorage.
|
||||||
|
*/
|
||||||
|
export const Storage = ($) => {
|
||||||
|
/**
|
||||||
|
* Persists a signal's value in localStorage.
|
||||||
|
* @param {Function} $sig - The signal to persist.
|
||||||
|
* @param {string} key - The localStorage key name.
|
||||||
|
* @returns {Function} The same signal for chaining.
|
||||||
|
*/
|
||||||
|
_storage = ($sig, key) => {
|
||||||
|
// 1. Initial Load: If there's data in storage, update the signal immediately
|
||||||
|
const saved = localStorage.getItem(key);
|
||||||
|
if (saved !== null) {
|
||||||
|
try {
|
||||||
|
$sig(JSON.parse(saved));
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`[SigPro Storage] Error parsing key "${key}":`, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Auto-Save: Every time the signal changes, update localStorage
|
||||||
|
$(() => {
|
||||||
|
const val = $sig();
|
||||||
|
localStorage.setItem(key, JSON.stringify(val));
|
||||||
|
});
|
||||||
|
|
||||||
|
return $sig;
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -2,7 +2,8 @@
|
|||||||
* SigPro UI 2.0 - daisyUI v5 & Tailwind v4 Plugin
|
* SigPro UI 2.0 - daisyUI v5 & Tailwind v4 Plugin
|
||||||
* Provides a set of reactive functional components.
|
* Provides a set of reactive functional components.
|
||||||
*/
|
*/
|
||||||
$.plugin(($) => {
|
|
||||||
|
export const UI = ($) => {
|
||||||
const ui = {};
|
const ui = {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -145,7 +146,7 @@ $.plugin(($) => {
|
|||||||
ui._tabs = (p) => div({ role: 'tablist', class: parseClass('tabs tabs-lifted', p.$class || p.class) },
|
ui._tabs = (p) => div({ role: 'tablist', class: parseClass('tabs tabs-lifted', p.$class || p.class) },
|
||||||
(p.items || []).map(it => a({
|
(p.items || []).map(it => a({
|
||||||
role: 'tab',
|
role: 'tab',
|
||||||
class: () => `tab ${ (typeof it.active === 'function' ? it.active() : it.active) ? 'tab-active' : '' }`,
|
class: () => `tab ${(typeof it.active === 'function' ? it.active() : it.active) ? 'tab-active' : ''}`,
|
||||||
onclick: it.onclick
|
onclick: it.onclick
|
||||||
}, it.label))
|
}, it.label))
|
||||||
);
|
);
|
||||||
@@ -172,7 +173,7 @@ $.plugin(($) => {
|
|||||||
(p.items || []).map(it => li({}, a({
|
(p.items || []).map(it => li({}, a({
|
||||||
class: () => (typeof it.active === 'function' ? it.active() : it.active) ? 'active' : '',
|
class: () => (typeof it.active === 'function' ? it.active() : it.active) ? 'active' : '',
|
||||||
onclick: it.onclick
|
onclick: it.onclick
|
||||||
}, [it.icon && span({class:'mr-2'}, it.icon), it.label])))
|
}, [it.icon && span({ class: 'mr-2' }, it.icon), it.label])))
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -203,4 +204,4 @@ $.plugin(($) => {
|
|||||||
window[key] = ui[key];
|
window[key] = ui[key];
|
||||||
$[key] = ui[key];
|
$[key] = ui[key];
|
||||||
});
|
});
|
||||||
});
|
};
|
||||||
@@ -129,42 +129,6 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Reactive Client-side Hash Router.
|
|
||||||
* @param {Array<{path: string, component: function|HTMLElement}>} routes - Route definitions.
|
|
||||||
* @returns {HTMLElement} A container that swaps content based on window.location.hash.
|
|
||||||
*/
|
|
||||||
$.router = (routes) => {
|
|
||||||
const sPath = $(window.location.hash.replace(/^#/, "") || "/");
|
|
||||||
window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
|
|
||||||
|
|
||||||
return $.html('div', [
|
|
||||||
() => {
|
|
||||||
const current = sPath();
|
|
||||||
const route = routes.find(r => {
|
|
||||||
const rP = r.path.split('/').filter(Boolean);
|
|
||||||
const cP = current.split('/').filter(Boolean);
|
|
||||||
if (rP.length !== cP.length) return false;
|
|
||||||
return rP.every((part, i) => part.startsWith(':') || part === cP[i]);
|
|
||||||
}) || routes.find(r => r.path === "*");
|
|
||||||
|
|
||||||
const component = route
|
|
||||||
? (typeof route.component === 'function' ? route.component() : route.component)
|
|
||||||
: $.html('h1', "404 - Not Found");
|
|
||||||
|
|
||||||
return component instanceof Node ? component : $.html('span', String(component));
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Programmatic navigation for the SigPro Router.
|
|
||||||
* @param {string} path - The path to navigate to (e.g., '/dashboard').
|
|
||||||
*/
|
|
||||||
$.router.go = (path) => {
|
|
||||||
window.location.hash = path.startsWith('/') ? path : `/${path}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Polymorphic Plugin System.
|
* Polymorphic Plugin System.
|
||||||
* Registers internal functions or loads external .js files as plugins.
|
* Registers internal functions or loads external .js files as plugins.
|
||||||
275
src/docs/.vitepress/cache/deps/@theme_index.js
vendored
Normal file
275
src/docs/.vitepress/cache/deps/@theme_index.js
vendored
Normal file
@@ -0,0 +1,275 @@
|
|||||||
|
import {
|
||||||
|
useMediaQuery
|
||||||
|
} from "./chunk-RLEUDPPB.js";
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
ref,
|
||||||
|
shallowRef,
|
||||||
|
watch
|
||||||
|
} from "./chunk-3S55Y3P7.js";
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/index.js
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/without-fonts.js
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/base.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/icons.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
|
||||||
|
import "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
|
||||||
|
import VPBadge from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
|
||||||
|
import Layout from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/Layout.vue";
|
||||||
|
import { default as default2 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
|
||||||
|
import { default as default3 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPButton.vue";
|
||||||
|
import { default as default4 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
|
||||||
|
import { default as default5 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPFeatures.vue";
|
||||||
|
import { default as default6 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPHomeContent.vue";
|
||||||
|
import { default as default7 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
|
||||||
|
import { default as default8 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
|
||||||
|
import { default as default9 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
|
||||||
|
import { default as default10 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPImage.vue";
|
||||||
|
import { default as default11 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPLink.vue";
|
||||||
|
import { default as default12 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue";
|
||||||
|
import { default as default13 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPSocialLink.vue";
|
||||||
|
import { default as default14 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPSocialLinks.vue";
|
||||||
|
import { default as default15 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPSponsors.vue";
|
||||||
|
import { default as default16 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
|
||||||
|
import { default as default17 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
|
||||||
|
import { default as default18 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
|
||||||
|
import { default as default19 } from "/config/workspace/sigpro/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/composables/local-nav.js
|
||||||
|
import { onContentUpdated } from "vitepress";
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/composables/outline.js
|
||||||
|
import { getScrollOffset } from "vitepress";
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/support/utils.js
|
||||||
|
import { withBase } from "vitepress";
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/composables/data.js
|
||||||
|
import { useData as useData$ } from "vitepress";
|
||||||
|
var useData = useData$;
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/support/utils.js
|
||||||
|
function ensureStartingSlash(path) {
|
||||||
|
return path.startsWith("/") ? path : `/${path}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/support/sidebar.js
|
||||||
|
function getSidebar(_sidebar, path) {
|
||||||
|
if (Array.isArray(_sidebar))
|
||||||
|
return addBase(_sidebar);
|
||||||
|
if (_sidebar == null)
|
||||||
|
return [];
|
||||||
|
path = ensureStartingSlash(path);
|
||||||
|
const dir = Object.keys(_sidebar).sort((a, b) => {
|
||||||
|
return b.split("/").length - a.split("/").length;
|
||||||
|
}).find((dir2) => {
|
||||||
|
return path.startsWith(ensureStartingSlash(dir2));
|
||||||
|
});
|
||||||
|
const sidebar = dir ? _sidebar[dir] : [];
|
||||||
|
return Array.isArray(sidebar) ? addBase(sidebar) : addBase(sidebar.items, sidebar.base);
|
||||||
|
}
|
||||||
|
function getSidebarGroups(sidebar) {
|
||||||
|
const groups = [];
|
||||||
|
let lastGroupIndex = 0;
|
||||||
|
for (const index in sidebar) {
|
||||||
|
const item = sidebar[index];
|
||||||
|
if (item.items) {
|
||||||
|
lastGroupIndex = groups.push(item);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (!groups[lastGroupIndex]) {
|
||||||
|
groups.push({ items: [] });
|
||||||
|
}
|
||||||
|
groups[lastGroupIndex].items.push(item);
|
||||||
|
}
|
||||||
|
return groups;
|
||||||
|
}
|
||||||
|
function addBase(items, _base) {
|
||||||
|
return [...items].map((_item) => {
|
||||||
|
const item = { ..._item };
|
||||||
|
const base = item.base || _base;
|
||||||
|
if (base && item.link)
|
||||||
|
item.link = base + item.link;
|
||||||
|
if (item.items)
|
||||||
|
item.items = addBase(item.items, base);
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/composables/sidebar.js
|
||||||
|
function useSidebar() {
|
||||||
|
const { frontmatter, page, theme: theme2 } = useData();
|
||||||
|
const is960 = useMediaQuery("(min-width: 960px)");
|
||||||
|
const isOpen = ref(false);
|
||||||
|
const _sidebar = computed(() => {
|
||||||
|
const sidebarConfig = theme2.value.sidebar;
|
||||||
|
const relativePath = page.value.relativePath;
|
||||||
|
return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : [];
|
||||||
|
});
|
||||||
|
const sidebar = ref(_sidebar.value);
|
||||||
|
watch(_sidebar, (next, prev) => {
|
||||||
|
if (JSON.stringify(next) !== JSON.stringify(prev))
|
||||||
|
sidebar.value = _sidebar.value;
|
||||||
|
});
|
||||||
|
const hasSidebar = computed(() => {
|
||||||
|
return frontmatter.value.sidebar !== false && sidebar.value.length > 0 && frontmatter.value.layout !== "home";
|
||||||
|
});
|
||||||
|
const leftAside = computed(() => {
|
||||||
|
if (hasAside)
|
||||||
|
return frontmatter.value.aside == null ? theme2.value.aside === "left" : frontmatter.value.aside === "left";
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
const hasAside = computed(() => {
|
||||||
|
if (frontmatter.value.layout === "home")
|
||||||
|
return false;
|
||||||
|
if (frontmatter.value.aside != null)
|
||||||
|
return !!frontmatter.value.aside;
|
||||||
|
return theme2.value.aside !== false;
|
||||||
|
});
|
||||||
|
const isSidebarEnabled = computed(() => hasSidebar.value && is960.value);
|
||||||
|
const sidebarGroups = computed(() => {
|
||||||
|
return hasSidebar.value ? getSidebarGroups(sidebar.value) : [];
|
||||||
|
});
|
||||||
|
function open() {
|
||||||
|
isOpen.value = true;
|
||||||
|
}
|
||||||
|
function close() {
|
||||||
|
isOpen.value = false;
|
||||||
|
}
|
||||||
|
function toggle() {
|
||||||
|
isOpen.value ? close() : open();
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
isOpen,
|
||||||
|
sidebar,
|
||||||
|
sidebarGroups,
|
||||||
|
hasSidebar,
|
||||||
|
hasAside,
|
||||||
|
leftAside,
|
||||||
|
isSidebarEnabled,
|
||||||
|
open,
|
||||||
|
close,
|
||||||
|
toggle
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/composables/outline.js
|
||||||
|
var ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/;
|
||||||
|
var resolvedHeaders = [];
|
||||||
|
function getHeaders(range) {
|
||||||
|
const headers = [
|
||||||
|
...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")
|
||||||
|
].filter((el) => el.id && el.hasChildNodes()).map((el) => {
|
||||||
|
const level = Number(el.tagName[1]);
|
||||||
|
return {
|
||||||
|
element: el,
|
||||||
|
title: serializeHeader(el),
|
||||||
|
link: "#" + el.id,
|
||||||
|
level
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return resolveHeaders(headers, range);
|
||||||
|
}
|
||||||
|
function serializeHeader(h) {
|
||||||
|
let ret = "";
|
||||||
|
for (const node of h.childNodes) {
|
||||||
|
if (node.nodeType === 1) {
|
||||||
|
if (ignoreRE.test(node.className))
|
||||||
|
continue;
|
||||||
|
ret += node.textContent;
|
||||||
|
} else if (node.nodeType === 3) {
|
||||||
|
ret += node.textContent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ret.trim();
|
||||||
|
}
|
||||||
|
function resolveHeaders(headers, range) {
|
||||||
|
if (range === false) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const levelsRange = (typeof range === "object" && !Array.isArray(range) ? range.level : range) || 2;
|
||||||
|
const [high, low] = typeof levelsRange === "number" ? [levelsRange, levelsRange] : levelsRange === "deep" ? [2, 6] : levelsRange;
|
||||||
|
return buildTree(headers, high, low);
|
||||||
|
}
|
||||||
|
function buildTree(data, min, max) {
|
||||||
|
resolvedHeaders.length = 0;
|
||||||
|
const result = [];
|
||||||
|
const stack = [];
|
||||||
|
data.forEach((item) => {
|
||||||
|
const node = { ...item, children: [] };
|
||||||
|
let parent = stack[stack.length - 1];
|
||||||
|
while (parent && parent.level >= node.level) {
|
||||||
|
stack.pop();
|
||||||
|
parent = stack[stack.length - 1];
|
||||||
|
}
|
||||||
|
if (node.element.classList.contains("ignore-header") || parent && "shouldIgnore" in parent) {
|
||||||
|
stack.push({ level: node.level, shouldIgnore: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.level > max || node.level < min)
|
||||||
|
return;
|
||||||
|
resolvedHeaders.push({ element: node.element, link: node.link });
|
||||||
|
if (parent)
|
||||||
|
parent.children.push(node);
|
||||||
|
else
|
||||||
|
result.push(node);
|
||||||
|
stack.push(node);
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/composables/local-nav.js
|
||||||
|
function useLocalNav() {
|
||||||
|
const { theme: theme2, frontmatter } = useData();
|
||||||
|
const headers = shallowRef([]);
|
||||||
|
const hasLocalNav = computed(() => {
|
||||||
|
return headers.value.length > 0;
|
||||||
|
});
|
||||||
|
onContentUpdated(() => {
|
||||||
|
headers.value = getHeaders(frontmatter.value.outline ?? theme2.value.outline);
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
headers,
|
||||||
|
hasLocalNav
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// node_modules/vitepress/dist/client/theme-default/without-fonts.js
|
||||||
|
var theme = {
|
||||||
|
Layout,
|
||||||
|
enhanceApp: ({ app }) => {
|
||||||
|
app.component("Badge", VPBadge);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var without_fonts_default = theme;
|
||||||
|
export {
|
||||||
|
default2 as VPBadge,
|
||||||
|
default3 as VPButton,
|
||||||
|
default4 as VPDocAsideSponsors,
|
||||||
|
default5 as VPFeatures,
|
||||||
|
default6 as VPHomeContent,
|
||||||
|
default7 as VPHomeFeatures,
|
||||||
|
default8 as VPHomeHero,
|
||||||
|
default9 as VPHomeSponsors,
|
||||||
|
default10 as VPImage,
|
||||||
|
default11 as VPLink,
|
||||||
|
default12 as VPNavBarSearch,
|
||||||
|
default13 as VPSocialLink,
|
||||||
|
default14 as VPSocialLinks,
|
||||||
|
default15 as VPSponsors,
|
||||||
|
default16 as VPTeamMembers,
|
||||||
|
default17 as VPTeamPage,
|
||||||
|
default18 as VPTeamPageSection,
|
||||||
|
default19 as VPTeamPageTitle,
|
||||||
|
without_fonts_default as default,
|
||||||
|
useLocalNav,
|
||||||
|
useSidebar
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=@theme_index.js.map
|
||||||
7
src/docs/.vitepress/cache/deps/@theme_index.js.map
vendored
Normal file
7
src/docs/.vitepress/cache/deps/@theme_index.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
40
src/docs/.vitepress/cache/deps/_metadata.json
vendored
Normal file
40
src/docs/.vitepress/cache/deps/_metadata.json
vendored
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"hash": "0412844f",
|
||||||
|
"configHash": "5a0057cf",
|
||||||
|
"lockfileHash": "e3b0c442",
|
||||||
|
"browserHash": "d3515516",
|
||||||
|
"optimized": {
|
||||||
|
"vue": {
|
||||||
|
"src": "../../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
|
||||||
|
"file": "vue.js",
|
||||||
|
"fileHash": "5e2bcecf",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > @vue/devtools-api": {
|
||||||
|
"src": "../../../../../node_modules/@vue/devtools-api/dist/index.js",
|
||||||
|
"file": "vitepress___@vue_devtools-api.js",
|
||||||
|
"fileHash": "604942f7",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > @vueuse/core": {
|
||||||
|
"src": "../../../../../node_modules/@vueuse/core/index.mjs",
|
||||||
|
"file": "vitepress___@vueuse_core.js",
|
||||||
|
"fileHash": "f08e5a15",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"@theme/index": {
|
||||||
|
"src": "../../../../../node_modules/vitepress/dist/client/theme-default/index.js",
|
||||||
|
"file": "@theme_index.js",
|
||||||
|
"fileHash": "442c9e5b",
|
||||||
|
"needsInterop": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"chunk-RLEUDPPB": {
|
||||||
|
"file": "chunk-RLEUDPPB.js"
|
||||||
|
},
|
||||||
|
"chunk-3S55Y3P7": {
|
||||||
|
"file": "chunk-3S55Y3P7.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12951
src/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js
vendored
Normal file
12951
src/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
src/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js.map
vendored
Normal file
7
src/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
9719
src/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js
vendored
Normal file
9719
src/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
src/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js.map
vendored
Normal file
7
src/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
3
src/docs/.vitepress/cache/deps/package.json
vendored
Normal file
3
src/docs/.vitepress/cache/deps/package.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
4505
src/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
vendored
Normal file
4505
src/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
src/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
vendored
Normal file
7
src/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
583
src/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
vendored
Normal file
583
src/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
vendored
Normal file
@@ -0,0 +1,583 @@
|
|||||||
|
import {
|
||||||
|
DefaultMagicKeysAliasMap,
|
||||||
|
StorageSerializers,
|
||||||
|
TransitionPresets,
|
||||||
|
assert,
|
||||||
|
breakpointsAntDesign,
|
||||||
|
breakpointsBootstrapV5,
|
||||||
|
breakpointsElement,
|
||||||
|
breakpointsMasterCss,
|
||||||
|
breakpointsPrimeFlex,
|
||||||
|
breakpointsQuasar,
|
||||||
|
breakpointsSematic,
|
||||||
|
breakpointsTailwind,
|
||||||
|
breakpointsVuetify,
|
||||||
|
breakpointsVuetifyV2,
|
||||||
|
breakpointsVuetifyV3,
|
||||||
|
bypassFilter,
|
||||||
|
camelize,
|
||||||
|
clamp,
|
||||||
|
cloneFnJSON,
|
||||||
|
computedAsync,
|
||||||
|
computedEager,
|
||||||
|
computedInject,
|
||||||
|
computedWithControl,
|
||||||
|
containsProp,
|
||||||
|
controlledRef,
|
||||||
|
createEventHook,
|
||||||
|
createFetch,
|
||||||
|
createFilterWrapper,
|
||||||
|
createGlobalState,
|
||||||
|
createInjectionState,
|
||||||
|
createRef,
|
||||||
|
createReusableTemplate,
|
||||||
|
createSharedComposable,
|
||||||
|
createSingletonPromise,
|
||||||
|
createTemplatePromise,
|
||||||
|
createUnrefFn,
|
||||||
|
customStorageEventName,
|
||||||
|
debounceFilter,
|
||||||
|
defaultDocument,
|
||||||
|
defaultLocation,
|
||||||
|
defaultNavigator,
|
||||||
|
defaultWindow,
|
||||||
|
executeTransition,
|
||||||
|
extendRef,
|
||||||
|
formatDate,
|
||||||
|
formatTimeAgo,
|
||||||
|
get,
|
||||||
|
getLifeCycleTarget,
|
||||||
|
getSSRHandler,
|
||||||
|
hasOwn,
|
||||||
|
hyphenate,
|
||||||
|
identity,
|
||||||
|
increaseWithUnit,
|
||||||
|
injectLocal,
|
||||||
|
invoke,
|
||||||
|
isClient,
|
||||||
|
isDef,
|
||||||
|
isDefined,
|
||||||
|
isIOS,
|
||||||
|
isObject,
|
||||||
|
isWorker,
|
||||||
|
makeDestructurable,
|
||||||
|
mapGamepadToXbox360Controller,
|
||||||
|
noop,
|
||||||
|
normalizeDate,
|
||||||
|
notNullish,
|
||||||
|
now,
|
||||||
|
objectEntries,
|
||||||
|
objectOmit,
|
||||||
|
objectPick,
|
||||||
|
onClickOutside,
|
||||||
|
onElementRemoval,
|
||||||
|
onKeyDown,
|
||||||
|
onKeyPressed,
|
||||||
|
onKeyStroke,
|
||||||
|
onKeyUp,
|
||||||
|
onLongPress,
|
||||||
|
onStartTyping,
|
||||||
|
pausableFilter,
|
||||||
|
promiseTimeout,
|
||||||
|
provideLocal,
|
||||||
|
provideSSRWidth,
|
||||||
|
pxValue,
|
||||||
|
rand,
|
||||||
|
reactify,
|
||||||
|
reactifyObject,
|
||||||
|
reactiveComputed,
|
||||||
|
reactiveOmit,
|
||||||
|
reactivePick,
|
||||||
|
refAutoReset,
|
||||||
|
refDebounced,
|
||||||
|
refDefault,
|
||||||
|
refThrottled,
|
||||||
|
refWithControl,
|
||||||
|
resolveRef,
|
||||||
|
resolveUnref,
|
||||||
|
set,
|
||||||
|
setSSRHandler,
|
||||||
|
syncRef,
|
||||||
|
syncRefs,
|
||||||
|
templateRef,
|
||||||
|
throttleFilter,
|
||||||
|
timestamp,
|
||||||
|
toArray,
|
||||||
|
toReactive,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
tryOnBeforeMount,
|
||||||
|
tryOnBeforeUnmount,
|
||||||
|
tryOnMounted,
|
||||||
|
tryOnScopeDispose,
|
||||||
|
tryOnUnmounted,
|
||||||
|
unrefElement,
|
||||||
|
until,
|
||||||
|
useActiveElement,
|
||||||
|
useAnimate,
|
||||||
|
useArrayDifference,
|
||||||
|
useArrayEvery,
|
||||||
|
useArrayFilter,
|
||||||
|
useArrayFind,
|
||||||
|
useArrayFindIndex,
|
||||||
|
useArrayFindLast,
|
||||||
|
useArrayIncludes,
|
||||||
|
useArrayJoin,
|
||||||
|
useArrayMap,
|
||||||
|
useArrayReduce,
|
||||||
|
useArraySome,
|
||||||
|
useArrayUnique,
|
||||||
|
useAsyncQueue,
|
||||||
|
useAsyncState,
|
||||||
|
useBase64,
|
||||||
|
useBattery,
|
||||||
|
useBluetooth,
|
||||||
|
useBreakpoints,
|
||||||
|
useBroadcastChannel,
|
||||||
|
useBrowserLocation,
|
||||||
|
useCached,
|
||||||
|
useClipboard,
|
||||||
|
useClipboardItems,
|
||||||
|
useCloned,
|
||||||
|
useColorMode,
|
||||||
|
useConfirmDialog,
|
||||||
|
useCountdown,
|
||||||
|
useCounter,
|
||||||
|
useCssVar,
|
||||||
|
useCurrentElement,
|
||||||
|
useCycleList,
|
||||||
|
useDark,
|
||||||
|
useDateFormat,
|
||||||
|
useDebounceFn,
|
||||||
|
useDebouncedRefHistory,
|
||||||
|
useDeviceMotion,
|
||||||
|
useDeviceOrientation,
|
||||||
|
useDevicePixelRatio,
|
||||||
|
useDevicesList,
|
||||||
|
useDisplayMedia,
|
||||||
|
useDocumentVisibility,
|
||||||
|
useDraggable,
|
||||||
|
useDropZone,
|
||||||
|
useElementBounding,
|
||||||
|
useElementByPoint,
|
||||||
|
useElementHover,
|
||||||
|
useElementSize,
|
||||||
|
useElementVisibility,
|
||||||
|
useEventBus,
|
||||||
|
useEventListener,
|
||||||
|
useEventSource,
|
||||||
|
useEyeDropper,
|
||||||
|
useFavicon,
|
||||||
|
useFetch,
|
||||||
|
useFileDialog,
|
||||||
|
useFileSystemAccess,
|
||||||
|
useFocus,
|
||||||
|
useFocusWithin,
|
||||||
|
useFps,
|
||||||
|
useFullscreen,
|
||||||
|
useGamepad,
|
||||||
|
useGeolocation,
|
||||||
|
useIdle,
|
||||||
|
useImage,
|
||||||
|
useInfiniteScroll,
|
||||||
|
useIntersectionObserver,
|
||||||
|
useInterval,
|
||||||
|
useIntervalFn,
|
||||||
|
useKeyModifier,
|
||||||
|
useLastChanged,
|
||||||
|
useLocalStorage,
|
||||||
|
useMagicKeys,
|
||||||
|
useManualRefHistory,
|
||||||
|
useMediaControls,
|
||||||
|
useMediaQuery,
|
||||||
|
useMemoize,
|
||||||
|
useMemory,
|
||||||
|
useMounted,
|
||||||
|
useMouse,
|
||||||
|
useMouseInElement,
|
||||||
|
useMousePressed,
|
||||||
|
useMutationObserver,
|
||||||
|
useNavigatorLanguage,
|
||||||
|
useNetwork,
|
||||||
|
useNow,
|
||||||
|
useObjectUrl,
|
||||||
|
useOffsetPagination,
|
||||||
|
useOnline,
|
||||||
|
usePageLeave,
|
||||||
|
useParallax,
|
||||||
|
useParentElement,
|
||||||
|
usePerformanceObserver,
|
||||||
|
usePermission,
|
||||||
|
usePointer,
|
||||||
|
usePointerLock,
|
||||||
|
usePointerSwipe,
|
||||||
|
usePreferredColorScheme,
|
||||||
|
usePreferredContrast,
|
||||||
|
usePreferredDark,
|
||||||
|
usePreferredLanguages,
|
||||||
|
usePreferredReducedMotion,
|
||||||
|
usePreferredReducedTransparency,
|
||||||
|
usePrevious,
|
||||||
|
useRafFn,
|
||||||
|
useRefHistory,
|
||||||
|
useResizeObserver,
|
||||||
|
useSSRWidth,
|
||||||
|
useScreenOrientation,
|
||||||
|
useScreenSafeArea,
|
||||||
|
useScriptTag,
|
||||||
|
useScroll,
|
||||||
|
useScrollLock,
|
||||||
|
useSessionStorage,
|
||||||
|
useShare,
|
||||||
|
useSorted,
|
||||||
|
useSpeechRecognition,
|
||||||
|
useSpeechSynthesis,
|
||||||
|
useStepper,
|
||||||
|
useStorage,
|
||||||
|
useStorageAsync,
|
||||||
|
useStyleTag,
|
||||||
|
useSupported,
|
||||||
|
useSwipe,
|
||||||
|
useTemplateRefsList,
|
||||||
|
useTextDirection,
|
||||||
|
useTextSelection,
|
||||||
|
useTextareaAutosize,
|
||||||
|
useThrottleFn,
|
||||||
|
useThrottledRefHistory,
|
||||||
|
useTimeAgo,
|
||||||
|
useTimeout,
|
||||||
|
useTimeoutFn,
|
||||||
|
useTimeoutPoll,
|
||||||
|
useTimestamp,
|
||||||
|
useTitle,
|
||||||
|
useToNumber,
|
||||||
|
useToString,
|
||||||
|
useToggle,
|
||||||
|
useTransition,
|
||||||
|
useUrlSearchParams,
|
||||||
|
useUserMedia,
|
||||||
|
useVModel,
|
||||||
|
useVModels,
|
||||||
|
useVibrate,
|
||||||
|
useVirtualList,
|
||||||
|
useWakeLock,
|
||||||
|
useWebNotification,
|
||||||
|
useWebSocket,
|
||||||
|
useWebWorker,
|
||||||
|
useWebWorkerFn,
|
||||||
|
useWindowFocus,
|
||||||
|
useWindowScroll,
|
||||||
|
useWindowSize,
|
||||||
|
watchArray,
|
||||||
|
watchAtMost,
|
||||||
|
watchDebounced,
|
||||||
|
watchDeep,
|
||||||
|
watchIgnorable,
|
||||||
|
watchImmediate,
|
||||||
|
watchOnce,
|
||||||
|
watchPausable,
|
||||||
|
watchThrottled,
|
||||||
|
watchTriggerable,
|
||||||
|
watchWithFilter,
|
||||||
|
whenever
|
||||||
|
} from "./chunk-RLEUDPPB.js";
|
||||||
|
import "./chunk-3S55Y3P7.js";
|
||||||
|
export {
|
||||||
|
DefaultMagicKeysAliasMap,
|
||||||
|
StorageSerializers,
|
||||||
|
TransitionPresets,
|
||||||
|
assert,
|
||||||
|
computedAsync as asyncComputed,
|
||||||
|
refAutoReset as autoResetRef,
|
||||||
|
breakpointsAntDesign,
|
||||||
|
breakpointsBootstrapV5,
|
||||||
|
breakpointsElement,
|
||||||
|
breakpointsMasterCss,
|
||||||
|
breakpointsPrimeFlex,
|
||||||
|
breakpointsQuasar,
|
||||||
|
breakpointsSematic,
|
||||||
|
breakpointsTailwind,
|
||||||
|
breakpointsVuetify,
|
||||||
|
breakpointsVuetifyV2,
|
||||||
|
breakpointsVuetifyV3,
|
||||||
|
bypassFilter,
|
||||||
|
camelize,
|
||||||
|
clamp,
|
||||||
|
cloneFnJSON,
|
||||||
|
computedAsync,
|
||||||
|
computedEager,
|
||||||
|
computedInject,
|
||||||
|
computedWithControl,
|
||||||
|
containsProp,
|
||||||
|
computedWithControl as controlledComputed,
|
||||||
|
controlledRef,
|
||||||
|
createEventHook,
|
||||||
|
createFetch,
|
||||||
|
createFilterWrapper,
|
||||||
|
createGlobalState,
|
||||||
|
createInjectionState,
|
||||||
|
reactify as createReactiveFn,
|
||||||
|
createRef,
|
||||||
|
createReusableTemplate,
|
||||||
|
createSharedComposable,
|
||||||
|
createSingletonPromise,
|
||||||
|
createTemplatePromise,
|
||||||
|
createUnrefFn,
|
||||||
|
customStorageEventName,
|
||||||
|
debounceFilter,
|
||||||
|
refDebounced as debouncedRef,
|
||||||
|
watchDebounced as debouncedWatch,
|
||||||
|
defaultDocument,
|
||||||
|
defaultLocation,
|
||||||
|
defaultNavigator,
|
||||||
|
defaultWindow,
|
||||||
|
computedEager as eagerComputed,
|
||||||
|
executeTransition,
|
||||||
|
extendRef,
|
||||||
|
formatDate,
|
||||||
|
formatTimeAgo,
|
||||||
|
get,
|
||||||
|
getLifeCycleTarget,
|
||||||
|
getSSRHandler,
|
||||||
|
hasOwn,
|
||||||
|
hyphenate,
|
||||||
|
identity,
|
||||||
|
watchIgnorable as ignorableWatch,
|
||||||
|
increaseWithUnit,
|
||||||
|
injectLocal,
|
||||||
|
invoke,
|
||||||
|
isClient,
|
||||||
|
isDef,
|
||||||
|
isDefined,
|
||||||
|
isIOS,
|
||||||
|
isObject,
|
||||||
|
isWorker,
|
||||||
|
makeDestructurable,
|
||||||
|
mapGamepadToXbox360Controller,
|
||||||
|
noop,
|
||||||
|
normalizeDate,
|
||||||
|
notNullish,
|
||||||
|
now,
|
||||||
|
objectEntries,
|
||||||
|
objectOmit,
|
||||||
|
objectPick,
|
||||||
|
onClickOutside,
|
||||||
|
onElementRemoval,
|
||||||
|
onKeyDown,
|
||||||
|
onKeyPressed,
|
||||||
|
onKeyStroke,
|
||||||
|
onKeyUp,
|
||||||
|
onLongPress,
|
||||||
|
onStartTyping,
|
||||||
|
pausableFilter,
|
||||||
|
watchPausable as pausableWatch,
|
||||||
|
promiseTimeout,
|
||||||
|
provideLocal,
|
||||||
|
provideSSRWidth,
|
||||||
|
pxValue,
|
||||||
|
rand,
|
||||||
|
reactify,
|
||||||
|
reactifyObject,
|
||||||
|
reactiveComputed,
|
||||||
|
reactiveOmit,
|
||||||
|
reactivePick,
|
||||||
|
refAutoReset,
|
||||||
|
refDebounced,
|
||||||
|
refDefault,
|
||||||
|
refThrottled,
|
||||||
|
refWithControl,
|
||||||
|
resolveRef,
|
||||||
|
resolveUnref,
|
||||||
|
set,
|
||||||
|
setSSRHandler,
|
||||||
|
syncRef,
|
||||||
|
syncRefs,
|
||||||
|
templateRef,
|
||||||
|
throttleFilter,
|
||||||
|
refThrottled as throttledRef,
|
||||||
|
watchThrottled as throttledWatch,
|
||||||
|
timestamp,
|
||||||
|
toArray,
|
||||||
|
toReactive,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
tryOnBeforeMount,
|
||||||
|
tryOnBeforeUnmount,
|
||||||
|
tryOnMounted,
|
||||||
|
tryOnScopeDispose,
|
||||||
|
tryOnUnmounted,
|
||||||
|
unrefElement,
|
||||||
|
until,
|
||||||
|
useActiveElement,
|
||||||
|
useAnimate,
|
||||||
|
useArrayDifference,
|
||||||
|
useArrayEvery,
|
||||||
|
useArrayFilter,
|
||||||
|
useArrayFind,
|
||||||
|
useArrayFindIndex,
|
||||||
|
useArrayFindLast,
|
||||||
|
useArrayIncludes,
|
||||||
|
useArrayJoin,
|
||||||
|
useArrayMap,
|
||||||
|
useArrayReduce,
|
||||||
|
useArraySome,
|
||||||
|
useArrayUnique,
|
||||||
|
useAsyncQueue,
|
||||||
|
useAsyncState,
|
||||||
|
useBase64,
|
||||||
|
useBattery,
|
||||||
|
useBluetooth,
|
||||||
|
useBreakpoints,
|
||||||
|
useBroadcastChannel,
|
||||||
|
useBrowserLocation,
|
||||||
|
useCached,
|
||||||
|
useClipboard,
|
||||||
|
useClipboardItems,
|
||||||
|
useCloned,
|
||||||
|
useColorMode,
|
||||||
|
useConfirmDialog,
|
||||||
|
useCountdown,
|
||||||
|
useCounter,
|
||||||
|
useCssVar,
|
||||||
|
useCurrentElement,
|
||||||
|
useCycleList,
|
||||||
|
useDark,
|
||||||
|
useDateFormat,
|
||||||
|
refDebounced as useDebounce,
|
||||||
|
useDebounceFn,
|
||||||
|
useDebouncedRefHistory,
|
||||||
|
useDeviceMotion,
|
||||||
|
useDeviceOrientation,
|
||||||
|
useDevicePixelRatio,
|
||||||
|
useDevicesList,
|
||||||
|
useDisplayMedia,
|
||||||
|
useDocumentVisibility,
|
||||||
|
useDraggable,
|
||||||
|
useDropZone,
|
||||||
|
useElementBounding,
|
||||||
|
useElementByPoint,
|
||||||
|
useElementHover,
|
||||||
|
useElementSize,
|
||||||
|
useElementVisibility,
|
||||||
|
useEventBus,
|
||||||
|
useEventListener,
|
||||||
|
useEventSource,
|
||||||
|
useEyeDropper,
|
||||||
|
useFavicon,
|
||||||
|
useFetch,
|
||||||
|
useFileDialog,
|
||||||
|
useFileSystemAccess,
|
||||||
|
useFocus,
|
||||||
|
useFocusWithin,
|
||||||
|
useFps,
|
||||||
|
useFullscreen,
|
||||||
|
useGamepad,
|
||||||
|
useGeolocation,
|
||||||
|
useIdle,
|
||||||
|
useImage,
|
||||||
|
useInfiniteScroll,
|
||||||
|
useIntersectionObserver,
|
||||||
|
useInterval,
|
||||||
|
useIntervalFn,
|
||||||
|
useKeyModifier,
|
||||||
|
useLastChanged,
|
||||||
|
useLocalStorage,
|
||||||
|
useMagicKeys,
|
||||||
|
useManualRefHistory,
|
||||||
|
useMediaControls,
|
||||||
|
useMediaQuery,
|
||||||
|
useMemoize,
|
||||||
|
useMemory,
|
||||||
|
useMounted,
|
||||||
|
useMouse,
|
||||||
|
useMouseInElement,
|
||||||
|
useMousePressed,
|
||||||
|
useMutationObserver,
|
||||||
|
useNavigatorLanguage,
|
||||||
|
useNetwork,
|
||||||
|
useNow,
|
||||||
|
useObjectUrl,
|
||||||
|
useOffsetPagination,
|
||||||
|
useOnline,
|
||||||
|
usePageLeave,
|
||||||
|
useParallax,
|
||||||
|
useParentElement,
|
||||||
|
usePerformanceObserver,
|
||||||
|
usePermission,
|
||||||
|
usePointer,
|
||||||
|
usePointerLock,
|
||||||
|
usePointerSwipe,
|
||||||
|
usePreferredColorScheme,
|
||||||
|
usePreferredContrast,
|
||||||
|
usePreferredDark,
|
||||||
|
usePreferredLanguages,
|
||||||
|
usePreferredReducedMotion,
|
||||||
|
usePreferredReducedTransparency,
|
||||||
|
usePrevious,
|
||||||
|
useRafFn,
|
||||||
|
useRefHistory,
|
||||||
|
useResizeObserver,
|
||||||
|
useSSRWidth,
|
||||||
|
useScreenOrientation,
|
||||||
|
useScreenSafeArea,
|
||||||
|
useScriptTag,
|
||||||
|
useScroll,
|
||||||
|
useScrollLock,
|
||||||
|
useSessionStorage,
|
||||||
|
useShare,
|
||||||
|
useSorted,
|
||||||
|
useSpeechRecognition,
|
||||||
|
useSpeechSynthesis,
|
||||||
|
useStepper,
|
||||||
|
useStorage,
|
||||||
|
useStorageAsync,
|
||||||
|
useStyleTag,
|
||||||
|
useSupported,
|
||||||
|
useSwipe,
|
||||||
|
useTemplateRefsList,
|
||||||
|
useTextDirection,
|
||||||
|
useTextSelection,
|
||||||
|
useTextareaAutosize,
|
||||||
|
refThrottled as useThrottle,
|
||||||
|
useThrottleFn,
|
||||||
|
useThrottledRefHistory,
|
||||||
|
useTimeAgo,
|
||||||
|
useTimeout,
|
||||||
|
useTimeoutFn,
|
||||||
|
useTimeoutPoll,
|
||||||
|
useTimestamp,
|
||||||
|
useTitle,
|
||||||
|
useToNumber,
|
||||||
|
useToString,
|
||||||
|
useToggle,
|
||||||
|
useTransition,
|
||||||
|
useUrlSearchParams,
|
||||||
|
useUserMedia,
|
||||||
|
useVModel,
|
||||||
|
useVModels,
|
||||||
|
useVibrate,
|
||||||
|
useVirtualList,
|
||||||
|
useWakeLock,
|
||||||
|
useWebNotification,
|
||||||
|
useWebSocket,
|
||||||
|
useWebWorker,
|
||||||
|
useWebWorkerFn,
|
||||||
|
useWindowFocus,
|
||||||
|
useWindowScroll,
|
||||||
|
useWindowSize,
|
||||||
|
watchArray,
|
||||||
|
watchAtMost,
|
||||||
|
watchDebounced,
|
||||||
|
watchDeep,
|
||||||
|
watchIgnorable,
|
||||||
|
watchImmediate,
|
||||||
|
watchOnce,
|
||||||
|
watchPausable,
|
||||||
|
watchThrottled,
|
||||||
|
watchTriggerable,
|
||||||
|
watchWithFilter,
|
||||||
|
whenever
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=vitepress___@vueuse_core.js.map
|
||||||
7
src/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
vendored
Normal file
7
src/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"sources": [],
|
||||||
|
"sourcesContent": [],
|
||||||
|
"mappings": "",
|
||||||
|
"names": []
|
||||||
|
}
|
||||||
347
src/docs/.vitepress/cache/deps/vue.js
vendored
Normal file
347
src/docs/.vitepress/cache/deps/vue.js
vendored
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
import {
|
||||||
|
BaseTransition,
|
||||||
|
BaseTransitionPropsValidators,
|
||||||
|
Comment,
|
||||||
|
DeprecationTypes,
|
||||||
|
EffectScope,
|
||||||
|
ErrorCodes,
|
||||||
|
ErrorTypeStrings,
|
||||||
|
Fragment,
|
||||||
|
KeepAlive,
|
||||||
|
ReactiveEffect,
|
||||||
|
Static,
|
||||||
|
Suspense,
|
||||||
|
Teleport,
|
||||||
|
Text,
|
||||||
|
TrackOpTypes,
|
||||||
|
Transition,
|
||||||
|
TransitionGroup,
|
||||||
|
TriggerOpTypes,
|
||||||
|
VueElement,
|
||||||
|
assertNumber,
|
||||||
|
callWithAsyncErrorHandling,
|
||||||
|
callWithErrorHandling,
|
||||||
|
camelize,
|
||||||
|
capitalize,
|
||||||
|
cloneVNode,
|
||||||
|
compatUtils,
|
||||||
|
compile,
|
||||||
|
computed,
|
||||||
|
createApp,
|
||||||
|
createBaseVNode,
|
||||||
|
createBlock,
|
||||||
|
createCommentVNode,
|
||||||
|
createElementBlock,
|
||||||
|
createHydrationRenderer,
|
||||||
|
createPropsRestProxy,
|
||||||
|
createRenderer,
|
||||||
|
createSSRApp,
|
||||||
|
createSlots,
|
||||||
|
createStaticVNode,
|
||||||
|
createTextVNode,
|
||||||
|
createVNode,
|
||||||
|
customRef,
|
||||||
|
defineAsyncComponent,
|
||||||
|
defineComponent,
|
||||||
|
defineCustomElement,
|
||||||
|
defineEmits,
|
||||||
|
defineExpose,
|
||||||
|
defineModel,
|
||||||
|
defineOptions,
|
||||||
|
defineProps,
|
||||||
|
defineSSRCustomElement,
|
||||||
|
defineSlots,
|
||||||
|
devtools,
|
||||||
|
effect,
|
||||||
|
effectScope,
|
||||||
|
getCurrentInstance,
|
||||||
|
getCurrentScope,
|
||||||
|
getCurrentWatcher,
|
||||||
|
getTransitionRawChildren,
|
||||||
|
guardReactiveProps,
|
||||||
|
h,
|
||||||
|
handleError,
|
||||||
|
hasInjectionContext,
|
||||||
|
hydrate,
|
||||||
|
hydrateOnIdle,
|
||||||
|
hydrateOnInteraction,
|
||||||
|
hydrateOnMediaQuery,
|
||||||
|
hydrateOnVisible,
|
||||||
|
initCustomFormatter,
|
||||||
|
initDirectivesForSSR,
|
||||||
|
inject,
|
||||||
|
isMemoSame,
|
||||||
|
isProxy,
|
||||||
|
isReactive,
|
||||||
|
isReadonly,
|
||||||
|
isRef,
|
||||||
|
isRuntimeOnly,
|
||||||
|
isShallow,
|
||||||
|
isVNode,
|
||||||
|
markRaw,
|
||||||
|
mergeDefaults,
|
||||||
|
mergeModels,
|
||||||
|
mergeProps,
|
||||||
|
nextTick,
|
||||||
|
nodeOps,
|
||||||
|
normalizeClass,
|
||||||
|
normalizeProps,
|
||||||
|
normalizeStyle,
|
||||||
|
onActivated,
|
||||||
|
onBeforeMount,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onBeforeUpdate,
|
||||||
|
onDeactivated,
|
||||||
|
onErrorCaptured,
|
||||||
|
onMounted,
|
||||||
|
onRenderTracked,
|
||||||
|
onRenderTriggered,
|
||||||
|
onScopeDispose,
|
||||||
|
onServerPrefetch,
|
||||||
|
onUnmounted,
|
||||||
|
onUpdated,
|
||||||
|
onWatcherCleanup,
|
||||||
|
openBlock,
|
||||||
|
patchProp,
|
||||||
|
popScopeId,
|
||||||
|
provide,
|
||||||
|
proxyRefs,
|
||||||
|
pushScopeId,
|
||||||
|
queuePostFlushCb,
|
||||||
|
reactive,
|
||||||
|
readonly,
|
||||||
|
ref,
|
||||||
|
registerRuntimeCompiler,
|
||||||
|
render,
|
||||||
|
renderList,
|
||||||
|
renderSlot,
|
||||||
|
resolveComponent,
|
||||||
|
resolveDirective,
|
||||||
|
resolveDynamicComponent,
|
||||||
|
resolveFilter,
|
||||||
|
resolveTransitionHooks,
|
||||||
|
setBlockTracking,
|
||||||
|
setDevtoolsHook,
|
||||||
|
setTransitionHooks,
|
||||||
|
shallowReactive,
|
||||||
|
shallowReadonly,
|
||||||
|
shallowRef,
|
||||||
|
ssrContextKey,
|
||||||
|
ssrUtils,
|
||||||
|
stop,
|
||||||
|
toDisplayString,
|
||||||
|
toHandlerKey,
|
||||||
|
toHandlers,
|
||||||
|
toRaw,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
transformVNodeArgs,
|
||||||
|
triggerRef,
|
||||||
|
unref,
|
||||||
|
useAttrs,
|
||||||
|
useCssModule,
|
||||||
|
useCssVars,
|
||||||
|
useHost,
|
||||||
|
useId,
|
||||||
|
useModel,
|
||||||
|
useSSRContext,
|
||||||
|
useShadowRoot,
|
||||||
|
useSlots,
|
||||||
|
useTemplateRef,
|
||||||
|
useTransitionState,
|
||||||
|
vModelCheckbox,
|
||||||
|
vModelDynamic,
|
||||||
|
vModelRadio,
|
||||||
|
vModelSelect,
|
||||||
|
vModelText,
|
||||||
|
vShow,
|
||||||
|
version,
|
||||||
|
warn,
|
||||||
|
watch,
|
||||||
|
watchEffect,
|
||||||
|
watchPostEffect,
|
||||||
|
watchSyncEffect,
|
||||||
|
withAsyncContext,
|
||||||
|
withCtx,
|
||||||
|
withDefaults,
|
||||||
|
withDirectives,
|
||||||
|
withKeys,
|
||||||
|
withMemo,
|
||||||
|
withModifiers,
|
||||||
|
withScopeId
|
||||||
|
} from "./chunk-3S55Y3P7.js";
|
||||||
|
export {
|
||||||
|
BaseTransition,
|
||||||
|
BaseTransitionPropsValidators,
|
||||||
|
Comment,
|
||||||
|
DeprecationTypes,
|
||||||
|
EffectScope,
|
||||||
|
ErrorCodes,
|
||||||
|
ErrorTypeStrings,
|
||||||
|
Fragment,
|
||||||
|
KeepAlive,
|
||||||
|
ReactiveEffect,
|
||||||
|
Static,
|
||||||
|
Suspense,
|
||||||
|
Teleport,
|
||||||
|
Text,
|
||||||
|
TrackOpTypes,
|
||||||
|
Transition,
|
||||||
|
TransitionGroup,
|
||||||
|
TriggerOpTypes,
|
||||||
|
VueElement,
|
||||||
|
assertNumber,
|
||||||
|
callWithAsyncErrorHandling,
|
||||||
|
callWithErrorHandling,
|
||||||
|
camelize,
|
||||||
|
capitalize,
|
||||||
|
cloneVNode,
|
||||||
|
compatUtils,
|
||||||
|
compile,
|
||||||
|
computed,
|
||||||
|
createApp,
|
||||||
|
createBlock,
|
||||||
|
createCommentVNode,
|
||||||
|
createElementBlock,
|
||||||
|
createBaseVNode as createElementVNode,
|
||||||
|
createHydrationRenderer,
|
||||||
|
createPropsRestProxy,
|
||||||
|
createRenderer,
|
||||||
|
createSSRApp,
|
||||||
|
createSlots,
|
||||||
|
createStaticVNode,
|
||||||
|
createTextVNode,
|
||||||
|
createVNode,
|
||||||
|
customRef,
|
||||||
|
defineAsyncComponent,
|
||||||
|
defineComponent,
|
||||||
|
defineCustomElement,
|
||||||
|
defineEmits,
|
||||||
|
defineExpose,
|
||||||
|
defineModel,
|
||||||
|
defineOptions,
|
||||||
|
defineProps,
|
||||||
|
defineSSRCustomElement,
|
||||||
|
defineSlots,
|
||||||
|
devtools,
|
||||||
|
effect,
|
||||||
|
effectScope,
|
||||||
|
getCurrentInstance,
|
||||||
|
getCurrentScope,
|
||||||
|
getCurrentWatcher,
|
||||||
|
getTransitionRawChildren,
|
||||||
|
guardReactiveProps,
|
||||||
|
h,
|
||||||
|
handleError,
|
||||||
|
hasInjectionContext,
|
||||||
|
hydrate,
|
||||||
|
hydrateOnIdle,
|
||||||
|
hydrateOnInteraction,
|
||||||
|
hydrateOnMediaQuery,
|
||||||
|
hydrateOnVisible,
|
||||||
|
initCustomFormatter,
|
||||||
|
initDirectivesForSSR,
|
||||||
|
inject,
|
||||||
|
isMemoSame,
|
||||||
|
isProxy,
|
||||||
|
isReactive,
|
||||||
|
isReadonly,
|
||||||
|
isRef,
|
||||||
|
isRuntimeOnly,
|
||||||
|
isShallow,
|
||||||
|
isVNode,
|
||||||
|
markRaw,
|
||||||
|
mergeDefaults,
|
||||||
|
mergeModels,
|
||||||
|
mergeProps,
|
||||||
|
nextTick,
|
||||||
|
nodeOps,
|
||||||
|
normalizeClass,
|
||||||
|
normalizeProps,
|
||||||
|
normalizeStyle,
|
||||||
|
onActivated,
|
||||||
|
onBeforeMount,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onBeforeUpdate,
|
||||||
|
onDeactivated,
|
||||||
|
onErrorCaptured,
|
||||||
|
onMounted,
|
||||||
|
onRenderTracked,
|
||||||
|
onRenderTriggered,
|
||||||
|
onScopeDispose,
|
||||||
|
onServerPrefetch,
|
||||||
|
onUnmounted,
|
||||||
|
onUpdated,
|
||||||
|
onWatcherCleanup,
|
||||||
|
openBlock,
|
||||||
|
patchProp,
|
||||||
|
popScopeId,
|
||||||
|
provide,
|
||||||
|
proxyRefs,
|
||||||
|
pushScopeId,
|
||||||
|
queuePostFlushCb,
|
||||||
|
reactive,
|
||||||
|
readonly,
|
||||||
|
ref,
|
||||||
|
registerRuntimeCompiler,
|
||||||
|
render,
|
||||||
|
renderList,
|
||||||
|
renderSlot,
|
||||||
|
resolveComponent,
|
||||||
|
resolveDirective,
|
||||||
|
resolveDynamicComponent,
|
||||||
|
resolveFilter,
|
||||||
|
resolveTransitionHooks,
|
||||||
|
setBlockTracking,
|
||||||
|
setDevtoolsHook,
|
||||||
|
setTransitionHooks,
|
||||||
|
shallowReactive,
|
||||||
|
shallowReadonly,
|
||||||
|
shallowRef,
|
||||||
|
ssrContextKey,
|
||||||
|
ssrUtils,
|
||||||
|
stop,
|
||||||
|
toDisplayString,
|
||||||
|
toHandlerKey,
|
||||||
|
toHandlers,
|
||||||
|
toRaw,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
transformVNodeArgs,
|
||||||
|
triggerRef,
|
||||||
|
unref,
|
||||||
|
useAttrs,
|
||||||
|
useCssModule,
|
||||||
|
useCssVars,
|
||||||
|
useHost,
|
||||||
|
useId,
|
||||||
|
useModel,
|
||||||
|
useSSRContext,
|
||||||
|
useShadowRoot,
|
||||||
|
useSlots,
|
||||||
|
useTemplateRef,
|
||||||
|
useTransitionState,
|
||||||
|
vModelCheckbox,
|
||||||
|
vModelDynamic,
|
||||||
|
vModelRadio,
|
||||||
|
vModelSelect,
|
||||||
|
vModelText,
|
||||||
|
vShow,
|
||||||
|
version,
|
||||||
|
warn,
|
||||||
|
watch,
|
||||||
|
watchEffect,
|
||||||
|
watchPostEffect,
|
||||||
|
watchSyncEffect,
|
||||||
|
withAsyncContext,
|
||||||
|
withCtx,
|
||||||
|
withDefaults,
|
||||||
|
withDirectives,
|
||||||
|
withKeys,
|
||||||
|
withMemo,
|
||||||
|
withModifiers,
|
||||||
|
withScopeId
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=vue.js.map
|
||||||
7
src/docs/.vitepress/cache/deps/vue.js.map
vendored
Normal file
7
src/docs/.vitepress/cache/deps/vue.js.map
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"sources": [],
|
||||||
|
"sourcesContent": [],
|
||||||
|
"mappings": "",
|
||||||
|
"names": []
|
||||||
|
}
|
||||||
@@ -38,13 +38,22 @@ export default defineConfig({
|
|||||||
text: 'API Reference',
|
text: 'API Reference',
|
||||||
items: [
|
items: [
|
||||||
{ text: 'Quick Start', link: '/api/quick' },
|
{ text: 'Quick Start', link: '/api/quick' },
|
||||||
{ text: 'Signals', link: '/api/signals' },
|
{ text: '$', link: '/api/$' },
|
||||||
{ text: 'Effects', link: '/api/effects' },
|
{ text: '$.html', link: '/api/html' },
|
||||||
{ text: 'Storage', link: '/api/storage' },
|
{ text: '$.mount', link: '/api/mount' },
|
||||||
{ text: 'Fetch', link: '/api/fetch' },
|
{ text: 'Tags', link: '/api/tags' },
|
||||||
{ text: 'Pages', link: '/api/pages' },
|
]
|
||||||
{ text: 'Components', link: '/api/components' },
|
},
|
||||||
{ text: 'Routing', link: '/api/routing' },
|
{
|
||||||
|
text: 'Plugins',
|
||||||
|
items: [
|
||||||
|
{ text: 'Quick Start', link: '/plugins/quick' },
|
||||||
|
{ text: '@core Router Plugin', link: '/plugins/core.router' },
|
||||||
|
{ text: '@core UI Plugin', link: '/plugins/core.ui' },
|
||||||
|
{ text: '@core UI Fetch', link: '/plugins/core.fetch' },
|
||||||
|
{ text: '@core UI Storage', link: '/plugins/core.storage' },
|
||||||
|
{ text: '@core UI Debug', link: '/plugins/core.debug' },
|
||||||
|
{ text: 'Custom', link: '/plugins/custom' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
101
src/docs/api/$.md
Normal file
101
src/docs/api/$.md
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
# The Reactive Core: `$( )`
|
||||||
|
|
||||||
|
The `$` function is the heart of **SigPro**. It is a **Unified Reactive Constructor** that handles state, derivations, and side effects through a single, consistent interface.
|
||||||
|
|
||||||
|
## 1. The Constructor: `$( input )`
|
||||||
|
|
||||||
|
Depending on what you pass into `$( )`, SigPro creates a different type of reactive primitive:
|
||||||
|
|
||||||
|
| Input Type | Result | Internal Behavior |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Value** (String, Number, Object...) | **Signal** | Creates a piece of mutable state. |
|
||||||
|
| **Function** | **Computed / Effect** | Creates a derived value that tracks dependencies. |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Signal (State)
|
||||||
|
|
||||||
|
A **Signal** is a "box" that holds a value. It provides a getter/setter function to interact with that value.
|
||||||
|
|
||||||
|
* **When to use:** For data that changes over time (counters, user input, toggle states, API data).
|
||||||
|
* **Syntax:** `const $state = $(initialValue);`
|
||||||
|
|
||||||
|
### Example:
|
||||||
|
```javascript
|
||||||
|
const $name = $("Alice");
|
||||||
|
|
||||||
|
// Read the value (Getter)
|
||||||
|
console.log($name()); // "Alice"
|
||||||
|
|
||||||
|
// Update the value (Setter)
|
||||||
|
$name("Bob");
|
||||||
|
|
||||||
|
// Update based on previous value
|
||||||
|
$name(current => current + " Smith");
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Computed (Derived State)
|
||||||
|
|
||||||
|
When you pass a **function** to `$( )` that **returns a value**, SigPro creates a **Computed Signal**. It automatically tracks which signals are used inside it and re-runs only when they change.
|
||||||
|
|
||||||
|
* **When to use:** For values that depend on other signals (totals, filtered lists, formatted strings).
|
||||||
|
* **Syntax:** `const $derived = $(() => logic);`
|
||||||
|
|
||||||
|
### Example:
|
||||||
|
```javascript
|
||||||
|
const $price = $(100);
|
||||||
|
const $qty = $(2);
|
||||||
|
|
||||||
|
// Automatically tracks $price and $qty
|
||||||
|
const $total = $(() => $price() * $qty());
|
||||||
|
|
||||||
|
console.log($total()); // 200
|
||||||
|
|
||||||
|
$qty(3); // $total updates to 300 automatically
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Effects (Side Effects)
|
||||||
|
|
||||||
|
An **Effect** is a function passed to `$( )` that **does not return a value** (or returns `undefined`). SigPro treats this as a subscription that performs an action whenever its dependencies change.
|
||||||
|
|
||||||
|
* **When to use:** For DOM manipulations, logging, or syncing with external APIs (LocalStorage, Fetch).
|
||||||
|
* **Syntax:** `$(() => { action });`
|
||||||
|
|
||||||
|
### Example:
|
||||||
|
```javascript
|
||||||
|
const $theme = $("light");
|
||||||
|
|
||||||
|
// This effect runs every time $theme changes
|
||||||
|
$(() => {
|
||||||
|
document.body.className = $theme();
|
||||||
|
console.log("Theme updated to:", $theme());
|
||||||
|
});
|
||||||
|
|
||||||
|
$theme("dark"); // Logs: Theme updated to: dark
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Summary Table: Usage Guide
|
||||||
|
|
||||||
|
| Primitive | Logic Type | Returns Value? | Typical Use Case |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| **Signal** | Static | Yes (Mutable) | `const $user = $("Guest")` |
|
||||||
|
| **Computed** | Read-only | Yes (Automatic) | `const $isLoggedIn = $(() => $user() !== "Guest")` |
|
||||||
|
| **Effect** | Imperative | No | `$(() => localStorage.setItem('user', $user()))` |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 Pro Tip: Naming Convention
|
||||||
|
In SigPro, we use the **`$` prefix** (e.g., `$count`) for variables that hold a reactive function. This makes it easy to distinguish between a standard variable and a reactive one at a glance:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let count = 0; // Static
|
||||||
|
const $count = $(0); // Reactive (Function)
|
||||||
|
```
|
||||||
103
src/docs/api/html.md
Normal file
103
src/docs/api/html.md
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
# Rendering Engine: `$.html`
|
||||||
|
|
||||||
|
The `$.html` function is the architect of your UI. It creates standard HTML elements and wires them directly to your signals without the need for a Virtual DOM.
|
||||||
|
|
||||||
|
## 1. Syntax: `$.html(tag, [props], [content])`
|
||||||
|
|
||||||
|
| Parameter | Type | Required | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| **tag** | `string` | **Yes** | Any valid HTML5 tag (e.g., `'div'`, `'button'`, `'input'`). |
|
||||||
|
| **props** | `Object` | No | Attributes, event listeners, and reactive bindings. |
|
||||||
|
| **content** | `any` | No | Text, Nodes, Arrays, or Reactive Functions. |
|
||||||
|
|
||||||
|
### Example:
|
||||||
|
```javascript
|
||||||
|
const myButton = $.html('button', { class: 'btn-primary' }, 'Click me');
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Global Tag Helpers
|
||||||
|
|
||||||
|
To avoid repetitive `$.html` calls, SigPro automatically exposes common tags to the global `window` object. This allows for a clean, declarative syntax.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Instead of $.html('div', ...), just use:
|
||||||
|
div({ id: 'wrapper' }, [
|
||||||
|
h1("Welcome"),
|
||||||
|
p("This is SigPro.")
|
||||||
|
]);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Handling Properties & Attributes
|
||||||
|
|
||||||
|
SigPro distinguishes between static attributes and reactive bindings using the **`$` prefix**.
|
||||||
|
|
||||||
|
### Static vs. Reactive Attributes
|
||||||
|
* **Static:** Applied once during creation.
|
||||||
|
* **Reactive (`$`):** Automatically updates the DOM when the signal changes.
|
||||||
|
|
||||||
|
| Property | Syntax | Result |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Attribute** | `{ id: 'main' }` | `id="main"` |
|
||||||
|
| **Event** | `{ onclick: fn }` | Adds an event listener. |
|
||||||
|
| **Reactive Attr** | `{ $class: $theme }` | Updates `class` whenever `$theme()` changes. |
|
||||||
|
| **Boolean Attr** | `{ $disabled: $isBusy }` | Toggles the `disabled` attribute automatically. |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Two-Way Data Binding
|
||||||
|
|
||||||
|
For form inputs, SigPro provides a powerful shortcut using `$value` or `$checked`. It automatically handles the event listening and the value synchronization.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const $text = $("Type here...");
|
||||||
|
|
||||||
|
input({
|
||||||
|
type: 'text',
|
||||||
|
$value: $text // Syncs input -> signal and signal -> input
|
||||||
|
});
|
||||||
|
|
||||||
|
p(["You typed: ", $text]);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Reactive Content (Dynamic Children)
|
||||||
|
|
||||||
|
The `content` argument is incredibly flexible. If you pass a **function**, SigPro treats it as a reactive "portal" that re-renders only that specific part of the DOM.
|
||||||
|
|
||||||
|
### Text & Nodes
|
||||||
|
```javascript
|
||||||
|
const $count = $(0);
|
||||||
|
|
||||||
|
// Text node updates surgically
|
||||||
|
div(["Count: ", $count]);
|
||||||
|
|
||||||
|
// Conditional rendering with a function
|
||||||
|
div(() => {
|
||||||
|
return $count() > 10
|
||||||
|
? h1("High Score!")
|
||||||
|
: p("Keep going...");
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### The "Guillotine" (Performance Tip)
|
||||||
|
When a reactive function in the content returns a **new Node**, SigPro uses `replaceWith()` to swap the old node for the new one. This ensures that:
|
||||||
|
1. The update is nearly instantaneous.
|
||||||
|
2. The old node is correctly garbage-collected.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Summary: Content Types
|
||||||
|
|
||||||
|
| Input | Behavior |
|
||||||
|
| :--- | :--- |
|
||||||
|
| **String / Number** | Appended as a TextNode. |
|
||||||
|
| **HTMLElement** | Appended directly to the parent. |
|
||||||
|
| **Array** | Each item is processed and appended in order. |
|
||||||
|
| **Function `() => ...`** | Creates a **live reactive zone** that updates automatically. |
|
||||||
108
src/docs/api/mount.md
Normal file
108
src/docs/api/mount.md
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
# Application Mounter: `$.mount`
|
||||||
|
|
||||||
|
The `$.mount` function is the entry point of your reactive world. It takes a **SigPro component** (or a plain DOM node) and injects it into the real document.
|
||||||
|
|
||||||
|
## 1. Syntax: `$.mount(node, [target])`
|
||||||
|
|
||||||
|
| Parameter | Type | Default | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| **node** | `HTMLElement` or `Function` | **Required** | The component or element to render. |
|
||||||
|
| **target** | `string` or `HTMLElement` | `document.body` | Where to mount the app (CSS selector or Element). |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Usage Scenarios
|
||||||
|
|
||||||
|
### A. The "Clean Slate" (Main Entry)
|
||||||
|
In a modern app (like our `main.js` example), you usually want to control the entire page. By default, `$.mount` clears the target's existing HTML before mounting.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// src/main.js
|
||||||
|
import { $ } from 'SigPro';
|
||||||
|
import App from './App.js';
|
||||||
|
|
||||||
|
$.mount(App); // Mounts to <body> by default
|
||||||
|
```
|
||||||
|
|
||||||
|
### B. Targeting a Specific Container
|
||||||
|
If you have an existing HTML structure and only want **SigPro** to manage a specific part (like a `#root` div), pass a CSS selector or a reference.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="sidebar"></div>
|
||||||
|
<div id="app-root"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Local mount to a specific ID
|
||||||
|
$.mount(MyComponent, '#app-root');
|
||||||
|
|
||||||
|
// Or using a direct DOM reference
|
||||||
|
const sidebar = document.getElementById('sidebar');
|
||||||
|
$.mount(SidebarComponent, sidebar);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Mounting with Pure HTML
|
||||||
|
One of SigPro's strengths is that it works perfectly alongside "Old School" HTML. You can create a reactive "island" inside a static page.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// A small reactive widget in a static .js file
|
||||||
|
const CounterWidget = () => {
|
||||||
|
const $c = $(0);
|
||||||
|
return button({ onclick: () => $c(v => v + 1) }, [
|
||||||
|
"Clicks: ", $c
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mount it into an existing div in your HTML
|
||||||
|
$.mount(CounterWidget, '#counter-container');
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. How it Works (The "Wipe" Logic)
|
||||||
|
When `$.mount` is called, it performs two critical steps:
|
||||||
|
|
||||||
|
1. **Clearance:** It sets `target.innerHTML = ''`. This ensures no "zombie" HTML from previous renders or static placeholders interferes with your app.
|
||||||
|
2. **Injection:** It appends your component. If you passed a **Function**, it executes it first to get the DOM node.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Global vs. Local Scope
|
||||||
|
|
||||||
|
### Global (The "Framework" Way)
|
||||||
|
In a standard Vite/ESM project, you initialize SigPro globally in `main.js`. This makes the `$` and the tag helpers (`div`, `button`, etc.) available everywhere in your project.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// main.js - Global Initialization
|
||||||
|
import 'SigPro';
|
||||||
|
|
||||||
|
// Now any other file can just use:
|
||||||
|
$.mount(() => h1("Global App"));
|
||||||
|
```
|
||||||
|
|
||||||
|
### Local (The "Library" Way)
|
||||||
|
If you are worried about polluting the global `window` object, you can import and use SigPro locally within a specific module.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// widget.js - Local usage
|
||||||
|
import { $ } from 'SigPro';
|
||||||
|
|
||||||
|
const myNode = $.html('div', 'Local Widget');
|
||||||
|
$.mount(myNode, '#widget-target');
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Summary Cheat Sheet
|
||||||
|
|
||||||
|
| Goal | Code |
|
||||||
|
| :--- | :--- |
|
||||||
|
| **Mount to body** | `$.mount(App)` |
|
||||||
|
| **Mount to ID** | `$.mount(App, '#id')` |
|
||||||
|
| **Mount to Element** | `$.mount(App, myElement)` |
|
||||||
|
| **Reactive Widget** | `$.mount(() => div("Hi"), '#widget')` |
|
||||||
|
|
||||||
99
src/docs/api/quick.md
Normal file
99
src/docs/api/quick.md
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
# Quick API Reference ⚡
|
||||||
|
|
||||||
|
This is a high-level summary of the **SigPro** core API. For detailed guides and edge cases, please refer to the specific documentation for each module.
|
||||||
|
|
||||||
|
## 1. Core Reactivity: `$( )`
|
||||||
|
|
||||||
|
The `$` function is a polymorphic constructor. It creates **Signals** (state) or **Computed Effects** (logic) based on the input type.
|
||||||
|
|
||||||
|
| Usage | Input Type | Returns | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| **Signal** | `any` | `Function` | A getter/setter for reactive state. |
|
||||||
|
| **Computed** | `Function` | `Function` | A read-only signal that auto-updates when its dependencies change. |
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```javascript
|
||||||
|
const $count = $(0); // Signal
|
||||||
|
const $double = $(() => $count() * 2); // Computed
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Rendering Engine: `$.html`
|
||||||
|
|
||||||
|
SigPro uses a hyperscript-style engine to create live DOM nodes.
|
||||||
|
|
||||||
|
| Argument | Type | Required | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| **tag** | `string` | Yes | Standard HTML tag (e.g., 'div', 'button'). |
|
||||||
|
| **props** | `Object` | No | Attributes (`id`), Events (`onclick`), or Reactive Props (`$value`). |
|
||||||
|
| **content** | `any` | No | String, Node, Array, or Reactive Function. |
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```javascript
|
||||||
|
$.html('button', { onclick: () => alert('Hi!') }, 'Click Me');
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Global Helpers (Tag Proxies)
|
||||||
|
|
||||||
|
To keep your code clean, SigPro automatically exposes common HTML tags to the global scope.
|
||||||
|
|
||||||
|
| Category | Available Tags |
|
||||||
|
| :--- | :--- |
|
||||||
|
| **Layout** | `div`, `section`, `main`, `nav`, `header`, `footer`, `span` |
|
||||||
|
| **Typography** | `h1`, `h2`, `h3`, `p`, `label`, `a`, `li`, `ul`, `ol` |
|
||||||
|
| **Forms** | `input`, `button`, `form`, `select`, `option` |
|
||||||
|
| **Media** | `img`, `video`, `audio`, `canvas` |
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```javascript
|
||||||
|
// No imports needed!
|
||||||
|
div([
|
||||||
|
h1("Title"),
|
||||||
|
button("Ok")
|
||||||
|
]);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Mounting & Plugins
|
||||||
|
|
||||||
|
Methods to initialize your application and extend the engine.
|
||||||
|
|
||||||
|
| Method | Signature | Description |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **`$.mount`** | `(node, target)` | Wipes the target (default: `body`) and renders the component. |
|
||||||
|
| **`$.plugin`** | `(source)` | Registers a function or loads external `.js` scripts as plugins. |
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```javascript
|
||||||
|
$.plugin([UI, Router]);
|
||||||
|
$.mount(App, '#root');
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Reactive Syntax Cheat Sheet
|
||||||
|
|
||||||
|
| Feature | Syntax | Description |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Text Binding** | `p(["Value: ", $sig])` | Updates text content automatically. |
|
||||||
|
| **Attributes** | `div({ id: $sig })` | Static attribute assignment. |
|
||||||
|
| **Reactive Attr** | `div({ $class: $sig })` | Attribute updates when `$sig` changes. |
|
||||||
|
| **Two-way Binding**| `input({ $value: $sig })`| Syncs input value and signal automatically. |
|
||||||
|
| **Conditional** | `div(() => $sig() > 0 ? "Yes" : "No")` | Re-renders only the content when the condition changes. |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Summary Table
|
||||||
|
|
||||||
|
| Feature | SigPro Approach | Benefit |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Update Logic** | Fine-grained (Surgical) | Blazing fast updates. |
|
||||||
|
| **DOM** | Native Nodes | Zero abstraction cost. |
|
||||||
|
| **Syntax** | Pure JavaScript | No build-tool lock-in. |
|
||||||
|
| **Footprint** | Modular | Load only what you use. |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user