Update Docs
This commit is contained in:
@@ -17,7 +17,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"CJ6A9esy\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"DK1GUmQ8\",\"api_quick.md\":\"Cy_XozKR\",\"api_router.md\":\"BV6vPWg-\",\"api_tags.md\":\"BAYRMzRh\",\"guide_getting-started.md\":\"BJ3Lg3i9\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"DTGopCPx\",\"plugins_core.debug.md\":\"BKuhgPoj\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"Bg_zmVp3\",\"plugins_core.storage.md\":\"C6UMGg_o\",\"plugins_core.ui.md\":\"C434Uobv\",\"plugins_custom.md\":\"D6eJnwEa\",\"plugins_quick.md\":\"BBIL_nLZ\",\"ui_button.md\":\"B087poC6\",\"ui_form.md\":\"CZVTxszG\",\"ui_input.md\":\"mJqBxkG3\",\"ui_installation.md\":\"C7ubLVYa\",\"ui_introduction.md\":\"CpBz5t8n\",\"ui_layout.md\":\"DLaYXca7\",\"ui_modal.md\":\"Hjip_i1A\",\"ui_navigation.md\":\"CK3sbH-I\",\"vite_plugin.md\":\"BxGCvKkk\"}");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\"},{\"text\":\"UI\",\"link\":\"/ui/introduction\"}],\"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\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/ui/introduction\"},{\"text\":\"Installation\",\"link\":\"/ui/installation\"},{\"text\":\"Button\",\"link\":\"/ui/button\"},{\"text\":\"Input\",\"link\":\"/ui/input\"},{\"text\":\"Form Components\",\"link\":\"/ui/form\"},{\"text\":\"Modal & Drawer\",\"link\":\"/ui/modal\"},{\"text\":\"Navigation\",\"link\":\"/ui/navigation\"},{\"text\":\"Layout\",\"link\":\"/ui/layout\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BV8uIOD5\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"B9mWME6o\",\"api_quick.md\":\"OAEBn6rS\",\"api_router.md\":\"BV6vPWg-\",\"api_tags.md\":\"YLRdMyid\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"pJydCe65\",\"plugins_custom.md\":\"BuhVOLjH\",\"plugins_quick.md\":\"DOyIUaNj\",\"ui_button.md\":\"B087poC6\",\"ui_form.md\":\"CZVTxszG\",\"ui_input.md\":\"mJqBxkG3\",\"ui_installation.md\":\"C7ubLVYa\",\"ui_introduction.md\":\"CpBz5t8n\",\"ui_layout.md\":\"DLaYXca7\",\"ui_modal.md\":\"Hjip_i1A\",\"ui_navigation.md\":\"CK3sbH-I\",\"vite_plugin.md\":\"CTs8LDIL\"}");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\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Examples\",\"items\":[{\"text\":\"Demo Core\",\"link\":\"/examples\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
59
docs/assets/api__.md.BV8uIOD5.js
Normal file
59
docs/assets/api__.md.BV8uIOD5.js
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"The Reactive Core: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/$.md","filePath":"api/$.md"}'),e={name:"api/$.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<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 a <strong>Unified Reactive Constructor</strong>. It detects the type of input you provide and returns the appropriate reactive primitive.</p><hr><h2 id="_1-signals-atomic-state" tabindex="-1">1. Signals (Atomic State) <a class="header-anchor" href="#_1-signals-atomic-state" aria-label="Permalink to "1. Signals (Atomic State)""></a></h2><p>A <strong>Signal</strong> is the simplest form of reactivity. It holds a single value (string, number, boolean, null).</p><h3 id="option-a-standard-signal-ram" tabindex="-1"><strong>Option A: Standard Signal (RAM)</strong> <a class="header-anchor" href="#option-a-standard-signal-ram" aria-label="Permalink to "**Option A: Standard Signal (RAM)**""></a></h3><p>Ideal for volatile state that shouldn't persist after a page refresh.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
|
||||||
|
<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:#6F42C1;--shiki-dark:#B392F0;">$count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Getter: returns 0</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Setter: updates to 10</span></span>
|
||||||
|
<span class="line"><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:#6A737D;--shiki-dark:#6A737D;">// Functional update: updates to 11</span></span></code></pre></div><h3 id="option-b-persistent-signal-disk" tabindex="-1"><strong>Option B: Persistent Signal (Disk)</strong> <a class="header-anchor" href="#option-b-persistent-signal-disk" aria-label="Permalink to "**Option B: Persistent Signal (Disk)**""></a></h3><p>By adding a <code>key</code>, SigPro links the signal to <code>localStorage</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;">// Syntax: $(initialValue, "storage-key")</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"app-theme"</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;">// It restores the value from disk automatically on load.</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// When you update it, it saves to disk instantly:</span></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;">// localStorage.getItem("app-theme") is now "dark"</span></span></code></pre></div><hr><h2 id="_2-stores-reactive-objects" tabindex="-1">2. Stores (Reactive Objects) <a class="header-anchor" href="#_2-stores-reactive-objects" aria-label="Permalink to "2. Stores (Reactive Objects)""></a></h2><p>A <strong>Store</strong> is a proxy that wraps an <strong>Object</strong>. SigPro makes every property reactive recursively. You access and set properties as if they were individual signals.</p><h3 id="option-a-standard-store-ram" tabindex="-1"><strong>Option A: Standard Store (RAM)</strong> <a class="header-anchor" href="#option-a-standard-store-ram" aria-label="Permalink to "**Option A: Standard Store (RAM)**""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> user</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> profile: { bio: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Developer"</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;">// Getter: Call the property as a function</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;">(user.</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;">// Setter: Pass the value to the property function</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">user.</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;">"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;">// Nested updates work exactly the same:</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">user.profile.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Architect"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="option-b-persistent-store-disk" tabindex="-1"><strong>Option B: Persistent Store (Disk)</strong> <a class="header-anchor" href="#option-b-persistent-store-disk" aria-label="Permalink to "**Option B: Persistent Store (Disk)**""></a></h3><p>The most powerful way to save complex state. The <strong>entire object tree</strong> is serialized to JSON and kept in sync with the disk.</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;"> volume: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</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;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"user-settings"</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;">// Any change in the object triggers a disk sync:</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">settings.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">volume</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The whole JSON is updated in localStorage</span></span></code></pre></div><hr><h2 id="_3-stores-reactive-arrays" tabindex="-1">3. Stores (Reactive Arrays) <a class="header-anchor" href="#_3-stores-reactive-arrays" aria-label="Permalink to "3. Stores (Reactive Arrays)""></a></h2><p>When you pass an <strong>Array</strong>, SigPro tracks changes to the list. You can use standard methods or access indexes as reactive getters.</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;"> $list</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;">"Item 1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Item 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;">// Get by index</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;">($list[</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;">// "Item 1"</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Update by index</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$list[</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;">"Updated Item"</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;">// Note: For adding/removing items, use standard array methods </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// which SigPro makes reactive (push, pop, splice, etc.)</span></span></code></pre></div><hr><h2 id="_4-computed-derived-logic" tabindex="-1">4. Computed (Derived Logic) <a class="header-anchor" href="#_4-computed-derived-logic" aria-label="Permalink to "4. Computed (Derived Logic)""></a></h2><p>A <strong>Computed Signal</strong> is a read-only value that depends on other signals. It is defined by passing a <strong>function that returns a value</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $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>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This function HAS a return statement</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:#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;"> $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 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 (Read-only):</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;">$total</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 121</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$price</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</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:#6F42C1;--shiki-dark:#B392F0;">$total</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 242 (Auto-updated)</span></span></code></pre></div><hr><h2 id="_5-effects-reactive-actions" tabindex="-1">5. Effects (Reactive Actions) <a class="header-anchor" href="#_5-effects-reactive-actions" aria-label="Permalink to "5. Effects (Reactive Actions)""></a></h2><p>An <strong>Effect</strong> is used for side-effects. It is defined by passing a <strong>function that does NOT return a value</strong>. It runs once immediately and then re-runs whenever its dependencies change.</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;"> $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;">// This function has NO return statement (Side-effect)</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"The name changed to:"</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.title </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`Profile: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$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>
|
||||||
|
<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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Triggers the console.log and updates document.title</span></span></code></pre></div><hr><h2 id="_6-summary-input-mapping" tabindex="-1">6. Summary: Input Mapping <a class="header-anchor" href="#_6-summary-input-mapping" aria-label="Permalink to "6. Summary: Input Mapping""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">If you pass...</th><th style="text-align:left;">SigPro creates a...</th><th style="text-align:left;">Access Method</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>A Value</strong></td><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;"><code>$var()</code> / <code>$var(val)</code></td></tr><tr><td style="text-align:left;"><strong>An Object</strong></td><td style="text-align:left;"><strong>Store</strong></td><td style="text-align:left;"><code>obj.prop()</code> / <code>obj.prop(val)</code></td></tr><tr><td style="text-align:left;"><strong>An Array</strong></td><td style="text-align:left;"><strong>Array Store</strong></td><td style="text-align:left;"><code>arr[i]()</code> / <code>arr.push()</code></td></tr><tr><td style="text-align:left;"><strong>Function (returns)</strong></td><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;"><code>$comp()</code> (Read-only)</td></tr><tr><td style="text-align:left;"><strong>Function (no return)</strong></td><td style="text-align:left;"><strong>Effect</strong></td><td style="text-align:left;">Automatically executed</td></tr></tbody></table><hr><h2 id="💡-naming-convention-the-prefix" tabindex="-1">💡 Naming Convention: The <code>$</code> Prefix <a class="header-anchor" href="#💡-naming-convention-the-prefix" aria-label="Permalink to "💡 Naming Convention: The \`$\` Prefix""></a></h2><p>To keep your code clean, always prefix your reactive variables with <code>$</code>. This tells you at a glance that you need to call it as a function to get its value.</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;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Static"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Just a string</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;">"Alice"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// A Reactive Signal</span></span></code></pre></div>`,38)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
||||||
1
docs/assets/api__.md.BV8uIOD5.lean.js
Normal file
1
docs/assets/api__.md.BV8uIOD5.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":"The Reactive Core: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/$.md","filePath":"api/$.md"}'),e={name:"api/$.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",38)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"The Reactive Core: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/$.md","filePath":"api/$.md"}'),n={name:"api/$.md"};function l(h,s,r,p,o,d){return i(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="the-reactive-core" tabindex="-1">The Reactive Core: <code>$( )</code> <a class="header-anchor" href="#the-reactive-core" aria-label="Permalink to "The Reactive Core: \`$( )\`""></a></h1><p>The <code>$</code> function is the heart of <strong>SigPro</strong>. It is a <strong>Unified Reactive Constructor</strong> that handles state, derivations, and automatic persistence through a single, consistent interface.</p><h2 id="_1-the-constructor-input-key" tabindex="-1">1. The Constructor: <code>$( input, [key] )</code> <a class="header-anchor" href="#_1-the-constructor-input-key" aria-label="Permalink to "1. The Constructor: \`$( input, [key] )\`""></a></h2><p>Depending on the arguments you pass, SigPro creates different reactive primitives:</p><table tabindex="0"><thead><tr><th style="text-align:left;">Argument</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>input</strong></td><td style="text-align:left;"><code>Value</code> / <code>Function</code></td><td style="text-align:left;"><strong>Yes</strong></td><td style="text-align:left;">Initial state or reactive logic.</td></tr><tr><td style="text-align:left;"><strong>key</strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">No</td><td style="text-align:left;">If provided, the signal <strong>persists</strong> in <code>localStorage</code>.</td></tr></tbody></table><hr><h2 id="_2-signal-state-persistence" tabindex="-1">2. Signal (State & Persistence) <a class="header-anchor" href="#_2-signal-state-persistence" aria-label="Permalink to "2. Signal (State & Persistence)""></a></h2><p>A <strong>Signal</strong> is a reactive "box" for data. SigPro now supports <strong>Native Persistence</strong>: if you provide a second argument (the <code>key</code>), the signal will automatically sync with <code>localStorage</code>.</p><ul><li><strong>Standard:</strong> <code>const $count = $(0);</code></li><li><strong>Persistent:</strong> <code>const $theme = $("light", "app-theme");</code> (Restores value on page reload).</li></ul><h3 id="example" tabindex="-1">Example: <a class="header-anchor" href="#example" aria-label="Permalink to "Example:""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $user</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Guest"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"session-user"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Automatically saved/loaded</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Read (Getter)</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Update (Setter + Auto-save to Disk)</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Alice"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Functional Update</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prev.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toUpperCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span></code></pre></div><hr><h2 id="_3-computed-derived-state" tabindex="-1">3. Computed (Derived State) <a class="header-anchor" href="#_3-computed-derived-state" aria-label="Permalink to "3. Computed (Derived State)""></a></h2><p>When you pass a <strong>function</strong> that <strong>returns a value</strong>, SigPro creates a <strong>Computed Signal</strong>. It tracks dependencies and recalculates only when necessary.</p><ul><li><strong>Syntax:</strong> <code>const $derived = $(() => logic);</code></li></ul><h3 id="example-1" tabindex="-1">Example: <a class="header-anchor" href="#example-1" aria-label="Permalink to "Example:""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $price</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $qty</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Auto-tracks $price and $qty</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $total</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $price</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $qty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$qty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// $total updates to 300 automatically</span></span></code></pre></div><hr><h2 id="_4-effects-reactive-actions" tabindex="-1">4. Effects (Reactive Actions) <a class="header-anchor" href="#_4-effects-reactive-actions" aria-label="Permalink to "4. Effects (Reactive Actions)""></a></h2><p>An <strong>Effect</strong> is a function that <strong>does not return a value</strong>. It performs an action (side effect) whenever the signals it "touches" change.</p><ul><li><strong>When to use:</strong> Logging, manual DOM tweaks, or syncing with external APIs.</li><li><strong>Syntax:</strong> <code>$(() => { action });</code></li></ul><h3 id="example-2" tabindex="-1">Example: <a class="header-anchor" href="#example-2" aria-label="Permalink to "Example:""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $status</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"online"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Runs every time $status changes</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"System status is now:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_5-summary-table-usage-guide" tabindex="-1">5. Summary Table: Usage Guide <a class="header-anchor" href="#_5-summary-table-usage-guide" aria-label="Permalink to "5. Summary Table: Usage Guide""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Primitive</th><th style="text-align:left;">Logic Type</th><th style="text-align:left;">Persistence?</th><th style="text-align:left;">Typical Use Case</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;">Mutable State</td><td style="text-align:left;"><strong>Yes</strong> (Optional)</td><td style="text-align:left;"><code>$(0, 'counter')</code></td></tr><tr><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;">Derived / Read-only</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() => $a() + $b())</code></td></tr><tr><td style="text-align:left;"><strong>Effect</strong></td><td style="text-align:left;">Imperative Action</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() => alert($msg()))</code></td></tr></tbody></table><hr><h2 id="💡-pro-tip-the-power-of-native-persistence" tabindex="-1">💡 Pro Tip: The Power of Native Persistence <a class="header-anchor" href="#💡-pro-tip-the-power-of-native-persistence" aria-label="Permalink to "💡 Pro Tip: The Power of Native Persistence""></a></h2><p>In SigPro, you don't need external plugins for basic storage. By using the <code>key</code> parameter in a Signal, you gain:</p><ol><li><strong>Zero Boilerplate:</strong> No more <code>JSON.parse(localStorage.getItem(...))</code>.</li><li><strong>Instant Hydration:</strong> The value is restored <strong>before</strong> the UI renders, preventing "flicker".</li><li><strong>Atomic Safety:</strong> Data is saved to disk exactly when the signal changes, ensuring your app state is always safe.</li></ol><hr><h3 id="naming-convention" tabindex="-1">Naming Convention <a class="header-anchor" href="#naming-convention" aria-label="Permalink to "Naming Convention""></a></h3><p>We use the <strong><code>$</code> prefix</strong> (e.g., <code>$count</code>) for reactive functions to distinguish them from static variables at a glance:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Static</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Reactive Signal</span></span></code></pre></div>`,34)])])}const c=t(n,[["render",l]]);export{g as __pageData,c as default};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"The Reactive Core: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/$.md","filePath":"api/$.md"}'),n={name:"api/$.md"};function l(h,s,r,p,o,d){return i(),a("div",null,[...s[0]||(s[0]=[e("",34)])])}const c=t(n,[["render",l]]);export{g as __pageData,c as default};
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Application Mounter: $.router.mount (Core)","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,r,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="application-mounter-router-mount-core" tabindex="-1">Application Mounter: <code>$.router.mount</code> (Core) <a class="header-anchor" href="#application-mounter-router-mount-core" aria-label="Permalink to "Application Mounter: \`$.router.mount\` (Core)""></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, bridging the gap between your logic and the browser.</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, you usually want to control the entire page. By default, <code>$.mount</code> clears the target's existing HTML before mounting your application.</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>
|
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=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, bridging the gap between your logic and the browser.</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, you usually want to control the entire page. By default, <code>$.mount</code> clears the target's existing HTML before mounting your application.</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;"> { $ } </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 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>
|
||||||
1
docs/assets/api_mount.md.B9mWME6o.lean.js
Normal file
1
docs/assets/api_mount.md.B9mWME6o.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 c=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 g=i(n,[["render",l]]);export{c as __pageData,g as default};
|
||||||
@@ -1 +0,0 @@
|
|||||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Application Mounter: $.router.mount (Core)","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,r,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e("",32)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
|||||||
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};
|
|
||||||
68
docs/assets/api_quick.md.OAEBn6rS.js
Normal file
68
docs/assets/api_quick.md.OAEBn6rS.js
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),e={name:"api/quick.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="quick-api-reference" tabindex="-1">Quick API Reference <a class="header-anchor" href="#quick-api-reference" aria-label="Permalink to "Quick API Reference""></a></h1><p>SigPro is a minimal yet powerful engine. Here is a complete overview of its capabilities.</p><h2 id="_1-core-api-summary" tabindex="-1">1. Core API Summary <a class="header-anchor" href="#_1-core-api-summary" aria-label="Permalink to "1. Core API Summary""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Function</th><th style="text-align:left;">Description</th><th style="text-align:left;">Example</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>$(val, key?)</code></strong></td><td style="text-align:left;">Creates a Signal, Computed, or Store (with optional persistence).</td><td style="text-align:left;"><code>const $n = $(0)</code></td></tr><tr><td style="text-align:left;"><strong><code>$.html()</code></strong></td><td style="text-align:left;">The base engine to create reactive HTMLElements.</td><td style="text-align:left;"><code>$.html('div', {}, 'Hi')</code></td></tr><tr><td style="text-align:left;"><strong><code>Tags</code></strong></td><td style="text-align:left;">Global helpers (div, span, button, etc.) built on top of <code>$.html</code>.</td><td style="text-align:left;"><code>div("Hello SigPro")</code></td></tr><tr><td style="text-align:left;"><strong><code>$.mount()</code></strong></td><td style="text-align:left;">Mounts a component into a target element (clears target first).</td><td style="text-align:left;"><code>$.mount(App, '#app')</code></td></tr><tr><td style="text-align:left;"><strong><code>$.router()</code></strong></td><td style="text-align:left;">Hash-based router with dynamic params and lazy loading.</td><td style="text-align:left;"><code>$.router(routes)</code></td></tr><tr><td style="text-align:left;"><strong><code>$.plugin()</code></strong></td><td style="text-align:left;">Extends SigPro or loads external scripts/plugins.</td><td style="text-align:left;"><code>$.plugin(MyPlugin)</code></td></tr></tbody></table><hr><h2 id="_2-the-power-of-reactivity" tabindex="-1">2. The Power of <code>$</code> (Reactivity) <a class="header-anchor" href="#_2-the-power-of-reactivity" aria-label="Permalink to "2. The Power of \`$\` (Reactivity)""></a></h2><p>The <code>$</code> function adapts to whatever you pass to it:</p><h3 id="signals-persistent-state" tabindex="-1"><strong>Signals & Persistent State</strong> <a class="header-anchor" href="#signals-persistent-state" aria-label="Permalink to "**Signals & Persistent State**""></a></h3><p>Reactive values in RAM or synced with <code>localStorage</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:#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;">// Simple Signal</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;">'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'app-theme'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Persistent Signal (Disk)</span></span>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Update value</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;">$count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get value: 10</span></span></code></pre></div><h3 id="computed-signals" tabindex="-1"><strong>Computed Signals</strong> <a class="header-anchor" href="#computed-signals" aria-label="Permalink to "**Computed Signals**""></a></h3><p>Read-only signals that update automatically when their dependencies change.</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;"> $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></code></pre></div><h3 id="reactive-stores-objects-disk" tabindex="-1"><strong>Reactive Stores (Objects + Disk)</strong> <a class="header-anchor" href="#reactive-stores-objects-disk" aria-label="Permalink to "**Reactive Stores (Objects + Disk)**""></a></h3><p>Transforms an object into a reactive tree. If a <code>key</code> is provided, the <strong>entire structure</strong> persists.</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;">// Store in RAM + Disk (Auto-syncs nested properties)</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> state</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;"> user: { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Natxo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> settings: { dark: </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;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'my-app-state'</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;">// Accessing properties (they become signals)</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">state.user.</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;">// Get: 'Natxo'</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">state.user.</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;">'Guest'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Set & Sync to Disk: 'my-app-state_user_name'</span></span></code></pre></div><hr><h3 id="_3-ui-creation-constructor-vs-direct-tags" tabindex="-1"><strong>3. UI Creation: Constructor vs. Direct Tags</strong> <a class="header-anchor" href="#_3-ui-creation-constructor-vs-direct-tags" aria-label="Permalink to "**3. UI Creation: Constructor vs. Direct Tags**""></a></h3><p>SigPro provides the <code>$.html</code> engine for defining any element and global "Sugar Tags" for rapid development.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-80os2" id="tab-cIqat3-" checked><label data-title="Engine Constructor ($.html)" for="tab-cIqat3-">Engine Constructor ($.html)</label><input type="radio" name="group-80os2" id="tab-WzvT6Us"><label data-title="Global Helpers (Tags)" for="tab-WzvT6Us">Global Helpers (Tags)</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:#6A737D;--shiki-dark:#6A737D;">// 1. DEFINE: Create a custom piece of UI</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This returns a real DOM element ready to be used.</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> MyHero</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;">'section'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </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;">"Internal Title"</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;">// 2. USE: Nest it inside other elements like a standard tag</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Page</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:#24292E;--shiki-dark:#E1E4E8;"> MyHero, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// We just drop the variable here</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 paragraph is outside the Hero section."</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;">(Page, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</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;">// Use pre-defined global tags to compose layouts instantly.</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// No need to define them, just call them.</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;"> Page</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;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'main'</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;">({ class: </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;">"Direct Global Tag"</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;">"Building UI without 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>
|
||||||
|
<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;"> alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hi!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Click Me"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||||
|
<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;">(Page, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div></div></div><hr><h3 id="technical-breakdown" tabindex="-1"><strong>Technical Breakdown</strong> <a class="header-anchor" href="#technical-breakdown" aria-label="Permalink to "**Technical Breakdown**""></a></h3><ul><li><strong><code>$.html(tag, props, children)</code></strong>: This is the core factory. Use it when you need to create an element dynamically or when working with <strong>Custom Elements / Web Components</strong>.</li><li><strong><code>Global Tags (div, p, etc.)</code></strong>: These are shortcut functions that SigPro injects into the <code>window</code> object. They internally call <code>$.html</code> for you, making your component code much cleaner and easier to read.</li></ul><hr><h3 id="key-difference" tabindex="-1"><strong>Key Difference</strong> <a class="header-anchor" href="#key-difference" aria-label="Permalink to "**Key Difference**""></a></h3><ul><li><strong><code>$.html</code></strong>: Acts as a <strong>constructor</strong>. Use it when you want to "bake" a specific structure (like a Section that <em>always</em> contains an H1) into a single variable.</li><li><strong><code>Global Tags</code></strong>: Act as <strong>scaffolding</strong>. Use them to wrap different contents dynamically as you build your views.</li></ul><h3 id="global-tags-standard-syntax" tabindex="-1"><strong>Global Tags (Standard Syntax)</strong> <a class="header-anchor" href="#global-tags-standard-syntax" aria-label="Permalink to "**Global Tags (Standard Syntax)**""></a></h3><p>SigPro declares standard tags in the global scope so you don't have to import them.</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:#6F42C1;--shiki-dark:#B392F0;"> Card</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;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$val</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'</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;">(title),</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;">"Reactive content below:"</span><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;">'number'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $val, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Automatic Two-way binding</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $style</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;"> $val</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:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'color: red'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'color: green'</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-mounting-mount" tabindex="-1">4. Mounting: <code>$.mount</code> <a class="header-anchor" href="#_4-mounting-mount" aria-label="Permalink to "4. Mounting: \`$.mount\`""></a></h2><p>The entry point of your application. It links your JavaScript logic to a specific DOM element.</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;">"app"</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;">// In your main.js</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;"> main</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 to SigPro"</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;">"Everything here is reactive."</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;">// Usage: $.mount(component, selectorOrElement)</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><hr><h2 id="_5-navigation-router" tabindex="-1">5. Navigation: <code>$.router</code> <a class="header-anchor" href="#_5-navigation-router" aria-label="Permalink to "5. Navigation: \`$.router\`""></a></h2><p>A robust hash-based router (<code>#/path</code>) that handles view switching automatically.</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;"> routes</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;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, component: Home },</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/user/:id'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">params</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;">\`User ID: \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">params</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</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;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/admin'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><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;">'./Admin.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Native Lazy Loading</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </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;">component</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;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"404 - Not Found"</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;">// Initialize and mount the router</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($.</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Programmatic navigation</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/user/42'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_6-plugins-plugin" tabindex="-1">6. Plugins: <code>$.plugin</code> <a class="header-anchor" href="#_6-plugins-plugin" aria-label="Permalink to "6. Plugins: \`$.plugin\`""></a></h2><p>Extend the engine or load external 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:#6A737D;--shiki-dark:#6A737D;">// 1. Function-based plugin</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:#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;">myHelper</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;"> 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;">"Plugin 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>
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. Load external scripts</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://cdn.example.com/library.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,42)])])}const g=i(e,[["render",l]]);export{o as __pageData,g as default};
|
||||||
1
docs/assets/api_quick.md.OAEBn6rS.lean.js
Normal file
1
docs/assets/api_quick.md.OAEBn6rS.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":"Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),e={name:"api/quick.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",42)])])}const g=i(e,[["render",l]]);export{o as __pageData,g as default};
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
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-UcPkS" id="tab-mDWg2EP" checked><label data-title="SigPro (JS)" for="tab-mDWg2EP">SigPro (JS)</label><input type="radio" name="group-UcPkS" id="tab-KC-Xrxl"><label data-title="Equivalent HTML Structure" for="tab-KC-Xrxl">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 +0,0 @@
|
|||||||
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};
|
|
||||||
31
docs/assets/api_tags.md.YLRdMyid.js
Normal file
31
docs/assets/api_tags.md.YLRdMyid.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/api_tags.md.YLRdMyid.lean.js
Normal file
1
docs/assets/api_tags.md.YLRdMyid.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 c=JSON.parse('{"title":"Global Tag Helpers","description":"","frontmatter":{},"headers":[],"relativePath":"api/tags.md","filePath":"api/tags.md"}'),n={name:"api/tags.md"};function l(h,s,o,p,d,k){return a(),t("div",null,[...s[0]||(s[0]=[e("",36)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};
|
||||||
20
docs/assets/examples.md.Cy97nBRw.js
Normal file
20
docs/assets/examples.md.Cy97nBRw.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import{_ as t,o as e,c as n,j as s,a as i,ae as l}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Live Playground","description":"","frontmatter":{},"headers":[],"relativePath":"examples.md","filePath":"examples.md"}'),h={name:"examples.md"};function p(k,a,r,d,o,E){return e(),n("div",null,[...a[0]||(a[0]=[s("h1",{id:"live-playground",tabindex:"-1"},[i("Live Playground "),s("a",{class:"header-anchor",href:"#live-playground","aria-label":'Permalink to "Live Playground"'},"")],-1),s("p",null,[i("Experience "),s("strong",null,"SigPro's"),i(" fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!")],-1),s("iframe",{width:"100%",height:"600",src:"//jsfiddle.net/natxocc/spwran02/4/embedded/",frameborder:"0",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},null,-1),l(` \`\`\` <hr><h3 id="_2-best-practices-for-documentation" tabindex="-1">2. Best Practices for Documentation <a class="header-anchor" href="#_2-best-practices-for-documentation" aria-label="Permalink to "2. Best Practices for Documentation""></a></h3><ul><li><strong>Tab Selection:</strong> You can control which tabs are active by default by changing the URL segment after <code>/embedded/</code>. <ul><li><code>js,result</code>: Shows the logic and the output.</li><li><code>html,js,result</code>: Shows the base structure, the logic, and the output.</li></ul></li><li><strong>Height Management:</strong> For complex Store examples, increase the <code>height</code> attribute to <code>500</code> or <code>600</code> so the code is readable without internal scrolling.</li><li><strong>Responsive Width:</strong> Keeping <code>width="100%"</code> ensures the fiddle scales correctly on tablets and mobile devices.</li></ul><hr><h3 id="_3-advanced-the-fiddle-component-optional" tabindex="-1">3. Advanced: The "Fiddle" Component (Optional) <a class="header-anchor" href="#_3-advanced-the-fiddle-component-optional" aria-label="Permalink to "3. Advanced: The "Fiddle" Component (Optional)""></a></h3><p>If you plan to have 10+ examples, you can create a global Vue component in VitePress. This keeps your Markdown files clean and allows you to change the theme or default height for all fiddles at once.</p><p><strong>Create <code>.vitepress/theme/components/Fiddle.vue</code>:</strong></p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</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;">template</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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"fiddle-wrapper"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</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;">"</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;">iframe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"100%"</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;">height</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;">height</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 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;">"\`//jsfiddle.net/natxocc/\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/embedded/\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">tabs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/dark/\`"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> frameborder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"0"</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:#032F62;--shiki-dark:#9ECBFF;">"lazy"</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;">iframe</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 style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</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:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: String, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// e.g., "spwran02/4"</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: { default: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'400'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tabs: { default: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'js,result'</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;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p><strong>Usage in Markdown:</strong></p><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</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;">Check out this store example:</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Fiddle</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;">"spwran02/4"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"500"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><hr><h3 id="why-this-is-perfect-for-sigpro" tabindex="-1">Why this is perfect for SigPro: <a class="header-anchor" href="#why-this-is-perfect-for-sigpro" aria-label="Permalink to "Why this is perfect for SigPro:""></a></h3><p>Because SigPro is <strong>zero-dependency</strong> and runs directly in the browser, your JSFiddle code will be exactly what the user copies into their own <code>index.html</code>. There is no hidden "build step" confusing the learner.</p>`,14)])])}const y=t(h,[["render",p]]);export{c as __pageData,y as default};
|
||||||
1
docs/assets/examples.md.Cy97nBRw.lean.js
Normal file
1
docs/assets/examples.md.Cy97nBRw.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as t,o as e,c as n,j as s,a as i,ae as l}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Live Playground","description":"","frontmatter":{},"headers":[],"relativePath":"examples.md","filePath":"examples.md"}'),h={name:"examples.md"};function p(k,a,r,d,o,E){return e(),n("div",null,[...a[0]||(a[0]=[s("h1",{id:"live-playground",tabindex:"-1"},[i("Live Playground "),s("a",{class:"header-anchor",href:"#live-playground","aria-label":'Permalink to "Live Playground"'},"")],-1),s("p",null,[i("Experience "),s("strong",null,"SigPro's"),i(" fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!")],-1),s("iframe",{width:"100%",height:"600",src:"//jsfiddle.net/natxocc/spwran02/4/embedded/",frameborder:"0",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},null,-1),l("",14)])])}const y=t(h,[["render",p]]);export{c as __pageData,y as default};
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
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(p,s,h,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-bTX51" id="tab-MZH19tC" checked><label data-title="npm" for="tab-MZH19tC">npm</label><input type="radio" name="group-bTX51" id="tab-dewtg-P"><label data-title="pnpm" for="tab-dewtg-P">pnpm</label><input type="radio" name="group-bTX51" id="tab-AEzYwpZ"><label data-title="yarn" for="tab-AEzYwpZ">yarn</label><input type="radio" name="group-bTX51" id="tab-Zz567I2"><label data-title="bun" for="tab-Zz567I2">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 +0,0 @@
|
|||||||
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(p,s,h,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};
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
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 +0,0 @@
|
|||||||
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};
|
|
||||||
1
docs/assets/index.md.By6smViD.js
Normal file
1
docs/assets/index.md.By6smViD.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/index.md.By6smViD.lean.js
Normal file
1
docs/assets/index.md.By6smViD.lean.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import{_ as t,o as i,c as a,ae as o}from"./chunks/framework.C8AWLET_.js";const p=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SigPro","text":"Atomic Unified Reactive Engine","tagline":"High-precision atomic reactivity. No Virtual DOM. No compiler. No dependencies.","image":{"src":"/logo.svg","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/install"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/natxocc/sigpro"}]},"features":[{"title":"⚛️ Atomic Reactivity","details":"Powered by fine-grained Signals. Forget about whole-component re-renders; SigPro updates only the specific text node or attribute that changed."},{"title":"🚀 Zero Virtual DOM","details":"By eliminating the V-DOM diffing layer, SigPro performs surgical, direct manipulations on the real DOM, removing memory and CPU overhead."},{"title":"🛠️ No Compiler Required","details":"Pure Vanilla JS. No Babel, no JSX, no complex build steps. Standard JavaScript that runs natively in the browser with maximum performance."},{"title":"📦 Ultra-Lightweight","details":"The core engine—including reactivity, DOM creation, persistence, and routing—is under 2KB. Perfect for performance-critical applications."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function r(s,e,l,c,h,d){return i(),a("div",null,[...e[0]||(e[0]=[o("",19)])])}const g=t(n,[["render",r]]);export{p as __pageData,g as default};
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
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.svg","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/natxocc/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-_uRPJ" id="tab-TqWYun8" checked><label data-title="npm" for="tab-TqWYun8">npm</label><input type="radio" name="group-_uRPJ" id="tab-WJsjpf9"><label data-title="pnpm" for="tab-WJsjpf9">pnpm</label><input type="radio" name="group-_uRPJ" id="tab-Amek9mH"><label data-title="yarn" for="tab-Amek9mH">yarn</label><input type="radio" name="group-_uRPJ" id="tab-tN1uyX0"><label data-title="bun" for="tab-tN1uyX0">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 +0,0 @@
|
|||||||
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.svg","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/natxocc/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};
|
|
||||||
45
docs/assets/install.md.pJydCe65.js
Normal file
45
docs/assets/install.md.pJydCe65.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function p(h,s,e,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="installation-setup" tabindex="-1">Installation & Setup <a class="header-anchor" href="#installation-setup" aria-label="Permalink to "Installation & Setup""></a></h1><p>SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.</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>Choose the method that best fits your workflow:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-J8thX" id="tab--ihs43C" checked><label data-title="npm" for="tab--ihs43C">npm</label><input type="radio" name="group-J8thX" id="tab-V8UXNEW"><label data-title="pnpm" for="tab-V8UXNEW">pnpm</label><input type="radio" name="group-J8thX" id="tab-aiZQdNX"><label data-title="yarn" for="tab-aiZQdNX">yarn</label><input type="radio" name="group-J8thX" id="tab--ur-JOy"><label data-title="bun" for="tab--ur-JOy">bun</label><input type="radio" name="group-J8thX" id="tab-BvrtPFV"><label data-title="CDN (ESM)" for="tab-BvrtPFV">CDN (ESM)</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 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;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"module"</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:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'</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;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div><hr><h2 id="_2-quick-start-examples" tabindex="-1">2. Quick Start Examples <a class="header-anchor" href="#_2-quick-start-examples" aria-label="Permalink to "2\\. Quick Start Examples""></a></h2><p>Depending on your installation method, here is how you can get SigPro running in seconds.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-LRkr_" id="tab-hbFbch-" checked><label data-title="Mainstream (Bundlers)" for="tab-hbFbch-">Mainstream (Bundlers)</label><input type="radio" name="group-LRkr_" id="tab-Bj2yjfU"><label data-title="Classic (Direct CDN)" for="tab-Bj2yjfU">Classic (Direct CDN)</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:#6A737D;--shiki-dark:#6A737D;">// File: 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;"> { $ } </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;">export</span><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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // $ is global, but we import it for better IDE intellisense</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tags like div, h1, button are available globally</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;">'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;">"Count is: "</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>
|
||||||
|
<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;">// File: 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:#032F62;--shiki-dark:#9ECBFF;">'#app'</span><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;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</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;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"en"</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;">body</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"</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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"module"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||||
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Import directly from CDN</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;"> 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'</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;"> $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;">"Developer"</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;"> // No need to import div, section, h2, input... they are global!</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;"> section</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;">"Welcome, "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $name]),</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;">// Automatic 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;">'Type 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>
|
||||||
|
<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>
|
||||||
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</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;">body</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;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div><hr><h2 id="_3-global-by-design" tabindex="-1">3. Global by Design <a class="header-anchor" href="#_3-global-by-design" aria-label="Permalink to "3\\. Global by Design""></a></h2><p>One of SigPro's core strengths is its <strong>Global API</strong>.</p><ul><li><strong>The <code>$</code> Function:</strong> Once loaded, it attaches itself to <code>window.$</code>. While you can use <code>import</code> for better IDE support and type checking, it is accessible everywhere.</li><li><strong>HTML Tags:</strong> Common tags (<code>div</code>, <code>span</code>, <code>button</code>, etc.) are automatically registered in the global scope. This eliminates "Import Hell" and keeps your components clean and readable.</li></ul><h2 id="_4-why-no-build-step" tabindex="-1">4. Why no build step? <a class="header-anchor" href="#_4-why-no-build-step" aria-label="Permalink to "4\\. Why no build step?""></a></h2><p>Because SigPro uses <strong>native ES Modules</strong> and standard JavaScript functions to generate the DOM, you don't actually <em>need</em> a compiler like Babel or a loader for JSX.</p><ul><li><strong>Development:</strong> Just save and refresh. No complex HMR issues.</li><li><strong>Production:</strong> Use any bundler (Vite, esbuild, Rollup) to tree-shake and minify your final code for maximum performance.</li></ul>`,16)])])}const g=i(l,[["render",p]]);export{o as __pageData,g as default};
|
||||||
1
docs/assets/install.md.pJydCe65.lean.js
Normal file
1
docs/assets/install.md.pJydCe65.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":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function p(h,s,e,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t("",16)])])}const g=i(l,[["render",p]]);export{o as __pageData,g as default};
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import{_ as i,o as a,c as n,ae as t}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(),n("div",null,[...s[0]||(s[0]=[t(`<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-bJanl" id="tab-2F_dHwn" checked><label data-title="NPM" for="tab-2F_dHwn">NPM</label><input type="radio" name="group-bJanl" id="tab-7UCo2o1"><label data-title="PNPM" for="tab-7UCo2o1">PNPM</label><input type="radio" name="group-bJanl" id="tab-nNXSOp2"><label data-title="Yarn" for="tab-nNXSOp2">Yarn</label><input type="radio" name="group-bJanl" id="tab-tCFVhb3"><label data-title="Bun" for="tab-tCFVhb3">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 +0,0 @@
|
|||||||
import{_ as i,o as a,c as n,ae as t}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(),n("div",null,[...s[0]||(s[0]=[t("",24)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
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 +0,0 @@
|
|||||||
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};
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
|||||||
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};
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import{_ as i,o as a,c as t,ae as e}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"}'),n={name:"plugins/core.storage.md"};function h(l,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[e(`<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--vws8" id="tab-CGb_Wgq" checked><label data-title="NPM" for="tab-CGb_Wgq">NPM</label><input type="radio" name="group--vws8" id="tab-COa_HLR"><label data-title="PNPM" for="tab-COa_HLR">PNPM</label><input type="radio" name="group--vws8" id="tab-dmfQdb3"><label data-title="Yarn" for="tab-dmfQdb3">Yarn</label><input type="radio" name="group--vws8" id="tab-PqhxQfZ"><label data-title="Bun" for="tab-PqhxQfZ">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(n,[["render",h]]);export{g as __pageData,c as default};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
import{_ as i,o as a,c as t,ae as e}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"}'),n={name:"plugins/core.storage.md"};function h(l,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[e("",25)])])}const c=i(n,[["render",h]]);export{g as __pageData,c as default};
|
|
||||||
@@ -1,452 +0,0 @@
|
|||||||
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"SigPro UI Plugin - Complete Documentation","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.ui.md","filePath":"plugins/core.ui.md"}'),h={name:"plugins/core.ui.md"};function l(p,s,k,e,E,d){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="sigpro-ui-plugin-complete-documentation" tabindex="-1">SigPro UI Plugin - Complete Documentation <a class="header-anchor" href="#sigpro-ui-plugin-complete-documentation" aria-label="Permalink to "SigPro UI Plugin - Complete Documentation""></a></h1><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to "Overview""></a></h2><p>The <strong>SigPro UI</strong> plugin is a comprehensive, reactive component library built on SigPro's atomic reactivity system. It seamlessly integrates <strong>Tailwind CSS v4</strong> for utility-first styling and <strong>daisyUI v5</strong> for semantic, themeable components. Every component is reactive by nature, automatically responding to signal changes without manual DOM updates.</p><h2 id="table-of-contents" tabindex="-1">Table of Contents <a class="header-anchor" href="#table-of-contents" aria-label="Permalink to "Table of Contents""></a></h2><ol><li><a href="#installation--setup">Installation & Setup</a></li><li><a href="#core-concepts">Core Concepts</a></li><li><a href="#form-components">Form Components</a></li><li><a href="#action-components">Action Components</a></li><li><a href="#layout-components">Layout Components</a></li><li><a href="#navigation-components">Navigation Components</a></li><li><a href="#feedback-components">Feedback Components</a></li><li><a href="#container-components">Container Components</a></li><li><a href="#complete-examples">Complete Examples</a></li><li><a href="#styling-guide">Styling Guide</a></li><li><a href="#best-practices">Best Practices</a></li></ol><hr><h2 id="installation-setup" tabindex="-1">Installation & Setup <a class="header-anchor" href="#installation-setup" aria-label="Permalink to "Installation & Setup""></a></h2><h3 id="step-1-install-dependencies" tabindex="-1">Step 1: Install Dependencies <a class="header-anchor" href="#step-1-install-dependencies" aria-label="Permalink to "Step 1: Install Dependencies""></a></h3><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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tailwindcss/vite</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> daisyui@next</span></span></code></pre></div><h3 id="step-2-configure-tailwind-css-v4" tabindex="-1">Step 2: Configure Tailwind CSS v4 <a class="header-anchor" href="#step-2-configure-tailwind-css-v4" aria-label="Permalink to "Step 2: Configure Tailwind CSS v4""></a></h3><p>Create <code>src/app.css</code>:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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/app.css */</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "tailwindcss"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "daisyui";</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Optional: Custom themes */</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> --color-primary: oklch(0</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.65</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 0</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 250);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> --color-secondary: oklch(0</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 0</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 150);</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;">/* Dark mode support */</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@custom-variant</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dark (&:where(.dark, [data-theme="dark"], [data-theme="dark"] *)));</span></span></code></pre></div><h3 id="step-3-initialize-in-your-entry-point" tabindex="-1">Step 3: Initialize in Your Entry Point <a class="header-anchor" href="#step-3-initialize-in-your-entry-point" aria-label="Permalink to "Step 3: Initialize in Your Entry Point""></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;">// main.js</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './app.css'</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:#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>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Load the UI plugin - makes all _components globally available</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;">).</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;"> // All UI components are now registered</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="core-concepts" tabindex="-1">Core Concepts <a class="header-anchor" href="#core-concepts" aria-label="Permalink to "Core Concepts""></a></h2><h3 id="reactive-props" tabindex="-1">Reactive Props <a class="header-anchor" href="#reactive-props" aria-label="Permalink to "Reactive Props""></a></h3><p>All UI components accept reactive props using the <code>$</code> prefix. When you pass a signal, the component automatically updates:</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;"> $username</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;">'John'</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;"> $error</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;">null</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;">// Reactive input with two-way binding</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;"> $value: $username, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Auto-updates when signal changes</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $error: $error </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Shows error message when signal has value</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="the-parseclass-helper" tabindex="-1">The <code>parseClass</code> Helper <a class="header-anchor" href="#the-parseclass-helper" aria-label="Permalink to "The \`parseClass\` Helper""></a></h3><p>All components intelligently merge base classes with user-provided classes, supporting both static strings and reactive functions:</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;">// Static class merging</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_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>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Result: class="btn btn-primary"</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Reactive classes</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;">'btn-primary'</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;">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;"> $theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Dynamic Button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Updates when $theme changes</span></span></code></pre></div><hr><h2 id="form-components" tabindex="-1">Form Components <a class="header-anchor" href="#form-components" aria-label="Permalink to "Form Components""></a></h2><h3 id="input-smart-input-field" tabindex="-1"><code>_input</code> - Smart Input Field <a class="header-anchor" href="#input-smart-input-field" aria-label="Permalink to "\`_input\` - Smart Input Field""></a></h3><p>A complete input wrapper with label, tooltip, error handling, and two-way binding.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Field label text</td></tr><tr><td><code>tip</code></td><td><code>string</code></td><td>Tooltip text shown on hover of a "?" badge</td></tr><tr><td><code>$value</code></td><td><code>signal</code></td><td>Two-way bound value signal</td></tr><tr><td><code>$error</code></td><td><code>signal</code></td><td>Error message signal (shows red border + message)</td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Input type: 'text', 'email', 'password', etc.</td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Placeholder text</td></tr><tr><td><code>class</code></td><td><code>string|function</code></td><td>Additional CSS classes</td></tr></tbody></table><p><strong>Examples:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Basic usage</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $email</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;">''</span><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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Email Address'</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;">'email'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> placeholder: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user@example.com'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $email</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;">// With validation</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $password</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;">''</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;"> $passwordError</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;">null</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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Password'</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;">'password'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $password,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $error: $passwordError,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> oninput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</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;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (e.target.value.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $passwordError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Password must be at least 6 characters'</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;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $passwordError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</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:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="select-dropdown-selector" tabindex="-1"><code>_select</code> - Dropdown Selector <a class="header-anchor" href="#select-dropdown-selector" aria-label="Permalink to "\`_select\` - Dropdown Selector""></a></h3><p>Reactive select component with options array.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Field label</td></tr><tr><td><code>options</code></td><td><code>Array<{value: any, label: string}></code></td><td>Select options</td></tr><tr><td><code>$value</code></td><td><code>signal</code></td><td>Two-way bound selected value</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $role</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;">'user'</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;"> roles</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;"> { value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'admin'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Administrator'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Standard User'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'guest'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Guest'</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;">_select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'User Role'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: roles,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $role</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;">// Reactive selection</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;">$role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'user'</span></span></code></pre></div><h3 id="checkbox-toggle-checkbox" tabindex="-1"><code>_checkbox</code> - Toggle Checkbox <a class="header-anchor" href="#checkbox-toggle-checkbox" aria-label="Permalink to "\`_checkbox\` - Toggle Checkbox""></a></h3><p>Styled checkbox with label support.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Checkbox label text</td></tr><tr><td><code>$value</code></td><td><code>signal</code></td><td>Boolean signal for checked state</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $remember</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;">_checkbox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Remember me'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $remember</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="radio-radio-button-group" tabindex="-1"><code>_radio</code> - Radio Button Group <a class="header-anchor" href="#radio-radio-button-group" aria-label="Permalink to "\`_radio\` - Radio Button Group""></a></h3><p>Radio button with group value binding.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Radio option label</td></tr><tr><td><code>value</code></td><td><code>any</code></td><td>Value for this radio option</td></tr><tr><td><code>$value</code></td><td><code>signal</code></td><td>Group signal holding selected value</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $paymentMethod</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;">'credit'</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:#032F62;--shiki-dark:#9ECBFF;">'credit'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'paypal'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'crypto'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].</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;">method</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;"> _radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'payment'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: method.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toUpperCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: method,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $paymentMethod</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;">// Selected: $paymentMethod() === 'credit'</span></span></code></pre></div><h3 id="range-slider-control" tabindex="-1"><code>_range</code> - Slider Control <a class="header-anchor" href="#range-slider-control" aria-label="Permalink to "\`_range\` - Slider Control""></a></h3><p>Reactive range slider with optional label.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Slider label</td></tr><tr><td><code>min</code></td><td><code>number</code></td><td>Minimum value</td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Maximum value</td></tr><tr><td><code>step</code></td><td><code>number</code></td><td>Step increment</td></tr><tr><td><code>$value</code></td><td><code>signal</code></td><td>Current value signal</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $volume</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;">50</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;">_range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Volume'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> min: </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;"> max: </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:#24292E;--shiki-dark:#E1E4E8;"> step: </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:#24292E;--shiki-dark:#E1E4E8;"> $value: $volume</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;">// Display current value</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">span</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;"> \`Volume: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$volume</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></code></pre></div><hr><h2 id="action-components" tabindex="-1">Action Components <a class="header-anchor" href="#action-components" aria-label="Permalink to "Action Components""></a></h2><h3 id="button-smart-action-button" tabindex="-1"><code>_button</code> - Smart Action Button <a class="header-anchor" href="#button-smart-action-button" aria-label="Permalink to "\`_button\` - Smart Action Button""></a></h3><p>Feature-rich button with loading states, icons, and badges.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>$loading</code></td><td><code>signal</code></td><td>Shows spinner + disables when true</td></tr><tr><td><code>$disabled</code></td><td><code>signal</code></td><td>Manual disabled state</td></tr><tr><td><code>icon</code></td><td><code>string|HTMLElement</code></td><td>Icon element or emoji/unicode</td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>Badge text to display</td></tr><tr><td><code>badgeClass</code></td><td><code>string</code></td><td>Additional badge styling</td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Button type: 'button', 'submit', etc.</td></tr><tr><td><code>onclick</code></td><td><code>function</code></td><td>Click handler</td></tr></tbody></table><p><strong>Examples:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Basic button</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;"> alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Clicked!'</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>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Loading state</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $saving</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 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;"> $loading: $saving,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</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;"> $saving</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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> saveData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $saving</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>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Save Changes'</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;">// With badge notification</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;"> badge: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> badgeClass: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'badge-secondary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'🔔'</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Notifications'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><hr><h2 id="layout-components" tabindex="-1">Layout Components <a class="header-anchor" href="#layout-components" aria-label="Permalink to "Layout Components""></a></h2><h3 id="fieldset-form-section-group" tabindex="-1"><code>_fieldset</code> - Form Section Group <a class="header-anchor" href="#fieldset-form-section-group" aria-label="Permalink to "\`_fieldset\` - Form Section Group""></a></h3><p>Groups related form fields with a legend.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>legend</code></td><td><code>string</code></td><td>Fieldset title</td></tr><tr><td><code>class</code></td><td><code>string|function</code></td><td>Additional classes</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ legend: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Personal Information'</span><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;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'First Name'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $firstName }),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Last Name'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $lastName }),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Email'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'email'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $email })</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h3 id="accordion-collapsible-section" tabindex="-1"><code>_accordion</code> - Collapsible Section <a class="header-anchor" href="#accordion-collapsible-section" aria-label="Permalink to "\`_accordion\` - Collapsible Section""></a></h3><p>Expandable/collapsible content panel.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Accordion header text</td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional group name (radio behavior)</td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Initially open state</td></tr></tbody></table><p><strong>Examples:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Single accordion (checkbox behavior)</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Frequently Asked Questions'</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 the collapsible content...'</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;">// Grouped accordions (radio behavior - only one open)</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Section 1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'faq'</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;">'Content for section 1'</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;">_accordion</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Section 2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'faq'</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;">'Content for section 2'</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="drawer-sidebar-drawer" tabindex="-1"><code>_drawer</code> - Sidebar Drawer <a class="header-anchor" href="#drawer-sidebar-drawer" aria-label="Permalink to "\`_drawer\` - Sidebar Drawer""></a></h3><p>Responsive drawer component that can be toggled programmatically.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Unique ID for checkbox toggle</td></tr><tr><td><code>$open</code></td><td><code>signal</code></td><td>Boolean signal for drawer state</td></tr><tr><td><code>content</code></td><td><code>HTMLElement</code></td><td>Main content area</td></tr><tr><td><code>side</code></td><td><code>HTMLElement</code></td><td>Sidebar content</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $drawerOpen</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:#6F42C1;--shiki-dark:#B392F0;">_drawer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'main-drawer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $open: $drawerOpen,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [</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;"> $drawerOpen</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Open Menu'</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;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Main content goes 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>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> side: [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ items: [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Home'</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;"> $drawerOpen</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;"> { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Settings'</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;"> $drawerOpen</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>
|
|
||||||
<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="navigation-components" tabindex="-1">Navigation Components <a class="header-anchor" href="#navigation-components" aria-label="Permalink to "Navigation Components""></a></h2><h3 id="navbar-application-header" tabindex="-1"><code>_navbar</code> - Application Header <a class="header-anchor" href="#navbar-application-header" aria-label="Permalink to "\`_navbar\` - Application Header""></a></h3><p>Responsive navigation bar with built-in styling.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string|function</code></td><td>Additional classes</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_navbar</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;">'flex-1'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text-xl font-bold'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'MyApp'</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;">'flex-none'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-ghost btn-sm'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Login'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-primary btn-sm'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Sign Up'</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><h3 id="menu-vertical-navigation" tabindex="-1"><code>_menu</code> - Vertical Navigation <a class="header-anchor" href="#menu-vertical-navigation" aria-label="Permalink to "\`_menu\` - Vertical Navigation""></a></h3><p>Sidebar or dropdown menu with active state support.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>items</code></td><td><code>Array<{label: string, icon?: any, active?: boolean|function, onclick: function}></code></td><td>Menu items</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $currentPage</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;">'home'</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;">_menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ items: [</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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Dashboard'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> active</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;"> $currentPage</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;"> 'dashboard'</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;"> $currentPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'dashboard'</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:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Profile'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> active</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;"> $currentPage</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;"> 'profile'</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;"> $currentPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'profile'</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:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Settings'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> active</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;"> $currentPage</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;"> 'settings'</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;"> $currentPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'settings'</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><h3 id="tabs-tab-navigation" tabindex="-1"><code>_tabs</code> - Tab Navigation <a class="header-anchor" href="#tabs-tab-navigation" aria-label="Permalink to "\`_tabs\` - Tab Navigation""></a></h3><p>Horizontal tabs with lifted styling.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>items</code></td><td><code>Array<{label: string, active: boolean|function, onclick: function}></code></td><td>Tab items</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $activeTab</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;">'profile'</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;">_tabs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ items: [</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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Profile'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> active</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;"> $activeTab</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;"> 'profile'</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;"> $activeTab</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'profile'</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:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Settings'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> active</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;"> $activeTab</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;"> 'settings'</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;"> $activeTab</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'settings'</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="feedback-components" tabindex="-1">Feedback Components <a class="header-anchor" href="#feedback-components" aria-label="Permalink to "Feedback Components""></a></h2><h3 id="badge-status-indicator" tabindex="-1"><code>_badge</code> - Status Indicator <a class="header-anchor" href="#badge-status-indicator" aria-label="Permalink to "\`_badge\` - Status Indicator""></a></h3><p>Small badge for counts, statuses, or labels.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string|function</code></td><td>Badge style (badge-primary, badge-success, etc.)</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'badge-success'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </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:#6F42C1;--shiki-dark:#B392F0;">_badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'badge-error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'3 Errors'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'badge-warning'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Pending'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="tooltip-hover-information" tabindex="-1"><code>_tooltip</code> - Hover Information <a class="header-anchor" href="#tooltip-hover-information" aria-label="Permalink to "\`_tooltip\` - Hover Information""></a></h3><p>Wrapper that shows tooltip text on hover.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>tip</code></td><td><code>string</code></td><td>Tooltip text</td></tr><tr><td><code>position</code></td><td><code>string</code></td><td>Tooltip position (top, bottom, left, right)</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_tooltip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ tip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Click to save changes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'tooltip-primary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Save'</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;">_tooltip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ tip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Your email will not be shared'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'tooltip-bottom'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><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;">'ⓘ'</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="container-components" tabindex="-1">Container Components <a class="header-anchor" href="#container-components" aria-label="Permalink to "Container Components""></a></h2><h3 id="modal-dialog-window" tabindex="-1"><code>_modal</code> - Dialog Window <a class="header-anchor" href="#modal-dialog-window" aria-label="Permalink to "\`_modal\` - Dialog Window""></a></h3><p>Programmatically controlled modal dialog.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>$open</code></td><td><code>signal</code></td><td>Boolean signal controlling visibility</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Modal title</td></tr><tr><td><code>class</code></td><td><code>string|function</code></td><td>Additional styling</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $showModal</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:#6F42C1;--shiki-dark:#B392F0;">_modal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $open: $showModal, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Confirm Action'</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;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Are you sure you want to delete this item?'</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;">'flex gap-2 justify-end mt-4'</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;"> $showModal</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Cancel'</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;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-error'</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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> deleteItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $showModal</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>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Delete'</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;">// Trigger modal</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;"> $showModal</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Delete Item'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="dropdown-context-menu" tabindex="-1"><code>_dropdown</code> - Context Menu <a class="header-anchor" href="#dropdown-context-menu" aria-label="Permalink to "\`_dropdown\` - Context Menu""></a></h3><p>Dropdown menu that appears on click.</p><p><strong>Properties:</strong></p><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Dropdown trigger text</td></tr><tr><td><code>class</code></td><td><code>string|function</code></td><td>Additional classes</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_dropdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Options'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</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;"> edit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Edit'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)]),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</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;"> duplicate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Duplicate'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)]),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text-error'</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:#D73A49;--shiki-dark:#F97583;"> delete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Delete'</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="complete-examples" tabindex="-1">Complete Examples <a class="header-anchor" href="#complete-examples" aria-label="Permalink to "Complete Examples""></a></h2><h3 id="example-1-user-registration-form" tabindex="-1">Example 1: User Registration Form <a class="header-anchor" href="#example-1-user-registration-form" aria-label="Permalink to "Example 1: User Registration Form""></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;">// Signals</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $username</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;">''</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;"> $email</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;">''</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;"> $password</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;">''</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;"> $terms</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 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;">false</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;">// Validation signals</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $usernameError</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;">null</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;"> $emailError</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;">null</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;"> $passwordError</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;">null</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;">// Form submission</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleSubmit</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:#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;"> $loading</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Validate</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:#6F42C1;--shiki-dark:#B392F0;">$username</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$usernameError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Username too short'</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;">!</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$email</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</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;">)) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$emailError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Invalid email'</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:#6F42C1;--shiki-dark:#B392F0;">$password</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$passwordError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Password too short'</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;">!</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$terms</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Accept terms'</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:#D73A49;--shiki-dark:#F97583;"> if</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;">$usernameError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$emailError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$passwordError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> api.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> username: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$username</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> email: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$email</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> password: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$password</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:#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:#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>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Component</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;">'max-w-md mx-auto p-6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ legend: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Create Account'</span><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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Username'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $username,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $error: $usernameError,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> placeholder: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'johndoe'</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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Email'</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;">'email'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $email,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $error: $emailError,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> placeholder: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'john@example.com'</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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Password'</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;">'password'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $password,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $error: $passwordError</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;"> _checkbox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'I agree to the Terms of Service'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $terms</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:#24292E;--shiki-dark:#E1E4E8;"> $loading: $loading,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-primary w-full mt-4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> onclick: handleSubmit</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Sign Up'</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><h3 id="example-2-dashboard-with-router-integration" tabindex="-1">Example 2: Dashboard with Router Integration <a class="header-anchor" href="#example-2-dashboard-with-router-integration" aria-label="Permalink to "Example 2: Dashboard with Router Integration""></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;">// 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;"> $activeRoute</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;">'dashboard'</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:#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;">'min-h-screen'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _navbar</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;">'flex-1'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text-xl font-bold'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Dashboard'</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;"> _button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-ghost btn-circle'</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:#24292E;--shiki-dark:#E1E4E8;"> $.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/settings'</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;">'⚙️'</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;">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Sidebar</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;">'w-64 p-4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ items: [</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;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Dashboard'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> active</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;"> $activeRoute</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;"> 'dashboard'</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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $activeRoute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'dashboard'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</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;">);</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:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Analytics'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> active</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;"> $activeRoute</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;"> 'analytics'</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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $activeRoute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'analytics'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/analytics'</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:#24292E;--shiki-dark:#E1E4E8;"> { </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Settings'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </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;"> active</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;"> $activeRoute</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;"> 'settings'</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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $activeRoute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'settings'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/settings'</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:#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;"> // Main content</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;">'flex-1 p-6'</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;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </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;">component</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;"> DashboardComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() },</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/analytics'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</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;"> AnalyticsComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() },</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/settings'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</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;"> SettingsComponent</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:#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><h3 id="example-3-e-commerce-product-card" tabindex="-1">Example 3: E-commerce Product Card <a class="header-anchor" href="#example-3-e-commerce-product-card" aria-label="Permalink to "Example 3: E-commerce Product Card""></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:#6F42C1;--shiki-dark:#B392F0;"> ProductCard</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;">product</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;"> $quantity</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;">1</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;"> $inCart</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 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;">'card bg-base-100 shadow-xl'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> figure</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ src: product.image, alt: product.name })]),</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;">'card-body'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'card-title'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, product.name),</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(product.description),</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;">'flex justify-between items-center mt-4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text-2xl font-bold'</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;">product</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">price</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;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'flex gap-2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _range</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> min: </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:#24292E;--shiki-dark:#E1E4E8;"> max: </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:#24292E;--shiki-dark:#E1E4E8;"> $value: $quantity,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'w-32'</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:#24292E;--shiki-dark:#E1E4E8;"> $loading: $inCart,</span></span>
|
|
||||||
<span class="line"><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>
|
|
||||||
<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;">async</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;"> $inCart</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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> addToCart</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(product.id, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$quantity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $inCart</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>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Add to Cart'</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:#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="styling-guide" tabindex="-1">Styling Guide <a class="header-anchor" href="#styling-guide" aria-label="Permalink to "Styling Guide""></a></h2><h3 id="theme-configuration" tabindex="-1">Theme Configuration <a class="header-anchor" href="#theme-configuration" aria-label="Permalink to "Theme Configuration""></a></h3><p>DaisyUI v5 supports extensive theming. Configure in <code>tailwind.config.js</code> or CSS:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">/* app.css */</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "tailwindcss"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "daisyui";</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Custom theme */</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"corporate"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-primary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.6</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.2</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 250</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-secondary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.7</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.15</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 150</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-accent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.8</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.1</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-neutral</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.3</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.01</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 260</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-base-100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.98</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.01</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 260</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.65</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.2</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 220</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.65</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.2</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 140</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.7</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.2</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 85</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">oklch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.65</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.25</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 25</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="component-modifiers" tabindex="-1">Component Modifiers <a class="header-anchor" href="#component-modifiers" aria-label="Permalink to "Component Modifiers""></a></h3><p>Each component accepts Tailwind/daisyUI classes:</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;">// Button variants</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_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;">'Primary'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-secondary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Secondary'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-accent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Accent'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-outline'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Outline'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-ghost'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Ghost'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-sm'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Small'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-lg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Large'</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;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-block'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Full Width'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><hr><h2 id="best-practices" tabindex="-1">Best Practices <a class="header-anchor" href="#best-practices" aria-label="Permalink to "Best Practices""></a></h2><h3 id="_1-reactive-performance" tabindex="-1">1. Reactive Performance <a class="header-anchor" href="#_1-reactive-performance" aria-label="Permalink to "1. Reactive Performance""></a></h3><p>Always use signals for values that change, not direct variable assignments:</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;">// ❌ Bad</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'John'</span><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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$value</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;"> name }); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Won't update</span></span>
|
|
||||||
<span class="line"></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Good</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;">'John'</span><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;">({ $value: $name });</span></span></code></pre></div><h3 id="_2-error-handling" tabindex="-1">2. Error Handling <a class="header-anchor" href="#_2-error-handling" aria-label="Permalink to "2. Error Handling""></a></h3><p>Use <code>$error</code> signals with validation:</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;"> $error</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;">null</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;"> $error: $error,</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onchange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</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;"> if</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;">validate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e.target.value)) {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Invalid input'</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;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</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:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="_3-modal-management" tabindex="-1">3. Modal Management <a class="header-anchor" href="#_3-modal-management" aria-label="Permalink to "3. Modal Management""></a></h3><p>Keep modals conditionally rendered based on <code>$open</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;">// Modal only exists in DOM when open</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_modal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ $open: $showModal }, content)</span></span></code></pre></div><h3 id="_4-form-submissions" tabindex="-1">4. Form Submissions <a class="header-anchor" href="#_4-form-submissions" aria-label="Permalink to "4. Form Submissions""></a></h3><p>Combine loading states with error handling:</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;">false</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;"> $error</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;">null</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;">_button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $loading: $loading,</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;">async</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;"> $loading</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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> try</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> submit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</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;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (err) {</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(err.message);</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;"> $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>
|
|
||||||
<span class="line"><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></code></pre></div><h3 id="_5-component-composition" tabindex="-1">5. Component Composition <a class="header-anchor" href="#_5-component-composition" aria-label="Permalink to "5. Component Composition""></a></h3><p>Build reusable components by combining UI primitives:</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:#6F42C1;--shiki-dark:#B392F0;"> FormField</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;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'text'</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;"> _fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ legend: label }, [</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ type, $value, class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'w-full'</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;">// Usage</span></span>
|
|
||||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">FormField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Email'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $value: $email });</span></span></code></pre></div><hr><h2 id="api-reference" tabindex="-1">API Reference <a class="header-anchor" href="#api-reference" aria-label="Permalink to "API Reference""></a></h2><p>All components are globally available after plugin initialization:</p><table tabindex="0"><thead><tr><th>Component</th><th>Function Signature</th></tr></thead><tbody><tr><td><code>_button</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_input</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_select</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_checkbox</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_radio</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_range</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_fieldset</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_accordion</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_modal</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_drawer</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_navbar</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_menu</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_tabs</code></td><td><code>(props) => HTMLElement</code></td></tr><tr><td><code>_badge</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_tooltip</code></td><td><code>(props, children) => HTMLElement</code></td></tr><tr><td><code>_dropdown</code></td><td><code>(props, children) => HTMLElement</code></td></tr></tbody></table><hr><h2 id="troubleshooting" tabindex="-1">Troubleshooting <a class="header-anchor" href="#troubleshooting" aria-label="Permalink to "Troubleshooting""></a></h2><h3 id="styles-not-applying" tabindex="-1">Styles Not Applying <a class="header-anchor" href="#styles-not-applying" aria-label="Permalink to "Styles Not Applying""></a></h3><p>Ensure Tailwind CSS is properly configured and imported before your app 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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './app.css'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Must be first</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></code></pre></div><h3 id="components-not-found" tabindex="-1">Components Not Found <a class="header-anchor" href="#components-not-found" aria-label="Permalink to "Components Not Found""></a></h3><p>Verify plugin is loaded before using components:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</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;"> // Components are ready</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><h3 id="reactive-updates-not-working" tabindex="-1">Reactive Updates Not Working <a class="header-anchor" href="#reactive-updates-not-working" aria-label="Permalink to "Reactive Updates Not Working""></a></h3><p>Ensure you're using signals, not primitive values:</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;">// Wrong</span></span>
|
|
||||||
<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>
|
|
||||||
<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:#D73A49;--shiki-dark:#F97583;">=></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;">// Correct</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:#6F42C1;--shiki-dark:#B392F0;">_button</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></code></pre></div>`,178)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"SigPro UI Plugin - Complete Documentation","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.ui.md","filePath":"plugins/core.ui.md"}'),h={name:"plugins/core.ui.md"};function l(p,s,k,e,E,d){return a(),n("div",null,[...s[0]||(s[0]=[t("",178)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
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>
|
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Creating Custom Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/custom.md","filePath":"plugins/custom.md"}'),h={name:"plugins/custom.md"};function l(p,s,e,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:#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:#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:#6A737D;--shiki-dark:#6A737D;"> // 1. Attach to the SigPro instance</span></span>
|
||||||
@@ -45,4 +45,4 @@ import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o
|
|||||||
<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;">$.</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;"> 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 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-1CTmS" id="tab-4mHwMvk" checked><label data-title="NPM" for="tab-4mHwMvk">NPM</label><input type="radio" name="group-1CTmS" id="tab-yus8D07"><label data-title="PNPM" for="tab-yus8D07">PNPM</label><input type="radio" name="group-1CTmS" id="tab-nkXzLia"><label data-title="Yarn" for="tab-nkXzLia">Yarn</label><input type="radio" name="group-1CTmS" id="tab-bosDp15"><label data-title="Bun" for="tab-bosDp15">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};
|
<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>`,20)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};
|
||||||
1
docs/assets/plugins_custom.md.BuhVOLjH.lean.js
Normal file
1
docs/assets/plugins_custom.md.BuhVOLjH.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 g=JSON.parse('{"title":"Creating Custom Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/custom.md","filePath":"plugins/custom.md"}'),h={name:"plugins/custom.md"};function l(p,s,e,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t("",20)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};
|
||||||
@@ -1 +0,0 @@
|
|||||||
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};
|
|
||||||
@@ -10,11 +10,11 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
|
|||||||
<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;"> $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-sigpro" tabindex="-1">2. Initialization Patterns (SigPro) <a class="header-anchor" href="#_2-initialization-patterns-sigpro" aria-label="Permalink to "2. Initialization Patterns (SigPro)""></a></h2><p>Thanks to the <strong>Synchronous Tag Engine</strong>, you no longer need complex <code>import()</code> nesting. Global tags like <code>div()</code>, <code>span()</code>, and <code>button()</code> are ready the moment you import the Core.</p><h3 id="the-natural-start-recommended" tabindex="-1">The "Natural" Start (Recommended) <a class="header-anchor" href="#the-natural-start-recommended" aria-label="Permalink to "The "Natural" Start (Recommended)""></a></h3><p>This is the standard way to build apps. It's clean, readable, and supports standard ESM 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:#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-sigpro" tabindex="-1">2. Initialization Patterns (SigPro) <a class="header-anchor" href="#_2-initialization-patterns-sigpro" aria-label="Permalink to "2. Initialization Patterns (SigPro)""></a></h2><p>Thanks to the <strong>Synchronous Tag Engine</strong>, you no longer need complex <code>import()</code> nesting. Global tags like <code>div()</code>, <code>span()</code>, and <code>button()</code> are ready the moment you import the Core.</p><h3 id="the-natural-start-recommended" tabindex="-1">The "Natural" Start (Recommended) <a class="header-anchor" href="#the-natural-start-recommended" aria-label="Permalink to "The "Natural" Start (Recommended)""></a></h3><p>This is the standard way to build apps. It's clean, readable, and supports standard ESM 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;"> { $ } </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;"> { 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 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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Static import works perfectly!</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Static import works perfectly!</span></span>
|
||||||
<span class="line"></span>
|
<span class="line"></span>
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Register plugins</span></span>
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Register plugins</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;">);</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;">(Fetch);</span></span>
|
||||||
<span class="line"></span>
|
<span class="line"></span>
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. Mount your app directly</span></span>
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. Mount your app directly</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><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 <strong>Promise</strong> that resolves when the scripts are fully loaded. This is perfect for integrating heavy third-party libraries only when needed.</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:#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><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 <strong>Promise</strong> that resolves when the scripts are fully loaded. This is perfect for integrating heavy third-party libraries only when needed.</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>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
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 l(p,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 <code>pages</code> 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. SigPro uses brackets <code>[param]</code> for dynamic segments.</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>
|
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,o){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 <code>pages</code> 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. SigPro uses brackets <code>[param]</code> for dynamic segments.</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>├── src/</span></span>
|
||||||
<span class="line"><span>│ ├── pages/</span></span>
|
<span class="line"><span>│ ├── pages/</span></span>
|
||||||
<span class="line"><span>│ │ ├── index.js → #/</span></span>
|
<span class="line"><span>│ │ ├── index.js → #/</span></span>
|
||||||
@@ -46,4 +46,4 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
|
|||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </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;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><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;">'/src/pages/index.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </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;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><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;">'/src/pages/index.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/users/:id'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><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;">'/src/pages/users/[id].js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/users/:id'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><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;">'/src/pages/users/[id].js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
|
||||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
||||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><p>Because it uses dynamic <code>import()</code>, Vite automatically performs <strong>Code Splitting</strong>, meaning each page is its own small JS file that only loads when the user navigates to it.</p><hr><h2 id="_6-installation" tabindex="-1">6. Installation <a class="header-anchor" href="#_6-installation" aria-label="Permalink to "6. Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-UVQKM" id="tab--b-3t1a" checked><label data-title="NPM" for="tab--b-3t1a">NPM</label><input type="radio" name="group-UVQKM" id="tab-FTykCad"><label data-title="PNPM" for="tab-FTykCad">PNPM</label><input type="radio" name="group-UVQKM" id="tab-HShRHBY"><label data-title="Yarn" for="tab-HShRHBY">Yarn</label><input type="radio" name="group-UVQKM" id="tab-NA7keAQ"><label data-title="Bun" for="tab-NA7keAQ">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>`,30)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><p>Because it uses dynamic <code>import()</code>, Vite automatically performs <strong>Code Splitting</strong>, meaning each page is its own small JS file that only loads when the user navigates to it.</p>`,27)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||||
@@ -1 +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 l(p,s,h,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",30)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
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,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",27)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||||
45
docs/examples.html
Normal file
45
docs/examples.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
|||||||
{"api__.md":"CJ6A9esy","api_html.md":"-lEpgX-Z","api_mount.md":"DK1GUmQ8","api_quick.md":"Cy_XozKR","api_router.md":"BV6vPWg-","api_tags.md":"BAYRMzRh","guide_getting-started.md":"BJ3Lg3i9","guide_why.md":"lyU7T5_c","index.md":"DTGopCPx","plugins_core.debug.md":"BKuhgPoj","plugins_core.fetch.md":"BIc8aMQh","plugins_core.router.md":"Bg_zmVp3","plugins_core.storage.md":"C6UMGg_o","plugins_core.ui.md":"C434Uobv","plugins_custom.md":"D6eJnwEa","plugins_quick.md":"BBIL_nLZ","ui_button.md":"B087poC6","ui_form.md":"CZVTxszG","ui_input.md":"mJqBxkG3","ui_installation.md":"C7ubLVYa","ui_introduction.md":"CpBz5t8n","ui_layout.md":"DLaYXca7","ui_modal.md":"Hjip_i1A","ui_navigation.md":"CK3sbH-I","vite_plugin.md":"BxGCvKkk"}
|
{"api__.md":"BV8uIOD5","api_html.md":"-lEpgX-Z","api_mount.md":"B9mWME6o","api_quick.md":"OAEBn6rS","api_router.md":"BV6vPWg-","api_tags.md":"YLRdMyid","examples.md":"Cy97nBRw","index.md":"By6smViD","install.md":"pJydCe65","plugins_custom.md":"BuhVOLjH","plugins_quick.md":"DOyIUaNj","ui_button.md":"B087poC6","ui_form.md":"CZVTxszG","ui_input.md":"mJqBxkG3","ui_installation.md":"C7ubLVYa","ui_introduction.md":"CpBz5t8n","ui_layout.md":"DLaYXca7","ui_modal.md":"Hjip_i1A","ui_navigation.md":"CK3sbH-I","vite_plugin.md":"CTs8LDIL"}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
70
docs/install.html
Normal file
70
docs/install.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -9,15 +9,23 @@
|
|||||||
/** @type {Function|null} Internal tracker for the currently executing reactive effect. */
|
/** @type {Function|null} Internal tracker for the currently executing reactive effect. */
|
||||||
let activeEffect = null;
|
let activeEffect = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a reactive Signal or Computed value
|
* Creates a reactive Signal, Computed value, or Store (Object of signals)
|
||||||
* @param {any|Function} initial - Initial value or computed function
|
* @param {any|Function|Object} initial - Initial value, computed function, or state object
|
||||||
* @param {string} [key] - Optional localStorage key for persistence
|
* @param {string} [key] - Optional localStorage key for persistence
|
||||||
* @returns {Function} Reactive accessor/mutator function
|
* @returns {Function|Object} Reactive accessor/mutator or Store object
|
||||||
*/
|
*/
|
||||||
const $ = (initial, key) => {
|
const $ = (initial, key) => {
|
||||||
const subs = new Set();
|
const subs = new Set();
|
||||||
|
|
||||||
|
if (typeof initial === 'object' && initial !== null && !Array.isArray(initial) && typeof initial !== 'function' && !(initial instanceof Node)) {
|
||||||
|
const store = {};
|
||||||
|
for (let k in initial) {
|
||||||
|
store[k] = $(initial[k], key ? `${key}_${k}` : null);
|
||||||
|
}
|
||||||
|
return store;
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof initial === 'function') {
|
if (typeof initial === 'function') {
|
||||||
let cached;
|
let cached;
|
||||||
const runner = () => {
|
const runner = () => {
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ export default defineConfig({
|
|||||||
outDir: '../../docs',
|
outDir: '../../docs',
|
||||||
base: isDev ? '/absproxy/5174/sigpro/' : '/sigpro/',
|
base: isDev ? '/absproxy/5174/sigpro/' : '/sigpro/',
|
||||||
|
|
||||||
// AÑADIDO: Head para estilos
|
|
||||||
head: [
|
head: [
|
||||||
['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css' }]
|
['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css' }]
|
||||||
],
|
],
|
||||||
@@ -26,18 +25,15 @@ export default defineConfig({
|
|||||||
logo: '/logo.svg',
|
logo: '/logo.svg',
|
||||||
nav: [
|
nav: [
|
||||||
{ text: 'Home', link: '/' },
|
{ text: 'Home', link: '/' },
|
||||||
{ text: 'Guide', link: '/guide/getting-started' },
|
{ text: 'Install', link: '/install' },
|
||||||
{ text: 'Api', link: '/api/quick' },
|
{ text: 'Api', link: '/api/quick' },
|
||||||
// AÑADIDO: UI en nav
|
|
||||||
{ text: 'UI', link: '/ui/introduction' },
|
|
||||||
],
|
],
|
||||||
sidebar: [
|
sidebar: [
|
||||||
{
|
{
|
||||||
text: 'Introduction',
|
text: 'Introduction',
|
||||||
items: [
|
items: [
|
||||||
{ text: 'What is SigPro?', link: '/' },
|
{ text: 'Installation', link: '/install' },
|
||||||
{ text: 'Why', link: '/guide/why' },
|
{ text: 'Vite Plugin', link: '/vite/plugin' },
|
||||||
{ text: 'Guide', link: '/guide/getting-started' },
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -55,28 +51,13 @@ export default defineConfig({
|
|||||||
text: 'Plugins',
|
text: 'Plugins',
|
||||||
items: [
|
items: [
|
||||||
{ text: 'Quick Start', link: '/plugins/quick' },
|
{ text: 'Quick Start', link: '/plugins/quick' },
|
||||||
{ text: '@core UI Plugin', link: '/plugins/core.ui' },
|
|
||||||
{ text: '@core Debug', link: '/plugins/core.debug' },
|
|
||||||
{ text: 'Custom', link: '/plugins/custom' },
|
{ text: 'Custom', link: '/plugins/custom' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Vite Router Plugin',
|
text: 'Examples',
|
||||||
items: [
|
items: [
|
||||||
{ text: 'Vite Plugin', link: '/vite/plugin' },
|
{ text: 'Demo Core', link: '/examples' }
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'UI Components',
|
|
||||||
items: [
|
|
||||||
{ text: 'Introduction', link: '/ui/introduction' },
|
|
||||||
{ text: 'Installation', link: '/ui/installation' },
|
|
||||||
{ text: 'Button', link: '/ui/button' },
|
|
||||||
{ text: 'Input', link: '/ui/input' },
|
|
||||||
{ text: 'Form Components', link: '/ui/form' },
|
|
||||||
{ text: 'Modal & Drawer', link: '/ui/modal' },
|
|
||||||
{ text: 'Navigation', link: '/ui/navigation' },
|
|
||||||
{ text: 'Layout', link: '/ui/layout' },
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -1,102 +1,142 @@
|
|||||||
# The Reactive Core: `$( )`
|
# The Reactive Core: `$( )`
|
||||||
|
|
||||||
The `$` function is the heart of **SigPro**. It is a **Unified Reactive Constructor** that handles state, derivations, and automatic persistence through a single, consistent interface.
|
The `$` function is a **Unified Reactive Constructor**. It detects the type of input you provide and returns the appropriate reactive primitive.
|
||||||
|
|
||||||
## 1. The Constructor: `$( input, [key] )`
|
|
||||||
|
|
||||||
Depending on the arguments you pass, SigPro creates different reactive primitives:
|
|
||||||
|
|
||||||
| Argument | Type | Required | Description |
|
|
||||||
| :--- | :--- | :--- | :--- |
|
|
||||||
| **input** | `Value` / `Function` | **Yes** | Initial state or reactive logic. |
|
|
||||||
| **key** | `string` | No | If provided, the signal **persists** in `localStorage`. |
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. Signal (State & Persistence)
|
## 1. Signals (Atomic State)
|
||||||
|
A **Signal** is the simplest form of reactivity. It holds a single value (string, number, boolean, null).
|
||||||
|
|
||||||
A **Signal** is a reactive "box" for data. SigPro now supports **Native Persistence**: if you provide a second argument (the `key`), the signal will automatically sync with `localStorage`.
|
### **Option A: Standard Signal (RAM)**
|
||||||
|
Ideal for volatile state that shouldn't persist after a page refresh.
|
||||||
* **Standard:** `const $count = $(0);`
|
|
||||||
* **Persistent:** `const $theme = $("light", "app-theme");` (Restores value on page reload).
|
|
||||||
|
|
||||||
### Example:
|
|
||||||
```javascript
|
```javascript
|
||||||
const $user = $("Guest", "session-user"); // Automatically saved/loaded
|
const $count = $(0);
|
||||||
|
|
||||||
// Read (Getter)
|
// Usage:
|
||||||
console.log($user());
|
$count(); // Getter: returns 0
|
||||||
|
$count(10); // Setter: updates to 10
|
||||||
|
$count(c => c + 1); // Functional update: updates to 11
|
||||||
|
```
|
||||||
|
|
||||||
// Update (Setter + Auto-save to Disk)
|
### **Option B: Persistent Signal (Disk)**
|
||||||
$user("Alice");
|
By adding a `key`, SigPro links the signal to `localStorage`.
|
||||||
|
```javascript
|
||||||
|
// Syntax: $(initialValue, "storage-key")
|
||||||
|
const $theme = $("light", "app-theme");
|
||||||
|
|
||||||
// Functional Update
|
// It restores the value from disk automatically on load.
|
||||||
$user(prev => prev.toUpperCase());
|
// When you update it, it saves to disk instantly:
|
||||||
|
$theme("dark"); // localStorage.getItem("app-theme") is now "dark"
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3. Computed (Derived State)
|
## 2. Stores (Reactive Objects)
|
||||||
|
A **Store** is a proxy that wraps an **Object**. SigPro makes every property reactive recursively. You access and set properties as if they were individual signals.
|
||||||
|
|
||||||
When you pass a **function** that **returns a value**, SigPro creates a **Computed Signal**. It tracks dependencies and recalculates only when necessary.
|
### **Option A: Standard Store (RAM)**
|
||||||
|
```javascript
|
||||||
|
const user = $({
|
||||||
|
name: "Alice",
|
||||||
|
profile: { bio: "Developer" }
|
||||||
|
});
|
||||||
|
|
||||||
* **Syntax:** `const $derived = $(() => logic);`
|
// Getter: Call the property as a function
|
||||||
|
console.log(user.name()); // "Alice"
|
||||||
|
|
||||||
|
// Setter: Pass the value to the property function
|
||||||
|
user.name("Bob");
|
||||||
|
|
||||||
|
// Nested updates work exactly the same:
|
||||||
|
user.profile.bio("Architect");
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Option B: Persistent Store (Disk)**
|
||||||
|
The most powerful way to save complex state. The **entire object tree** is serialized to JSON and kept in sync with the disk.
|
||||||
|
```javascript
|
||||||
|
const settings = $({
|
||||||
|
volume: 50,
|
||||||
|
notifications: true
|
||||||
|
}, "user-settings");
|
||||||
|
|
||||||
|
// Any change in the object triggers a disk sync:
|
||||||
|
settings.volume(100); // The whole JSON is updated in localStorage
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Stores (Reactive Arrays)
|
||||||
|
When you pass an **Array**, SigPro tracks changes to the list. You can use standard methods or access indexes as reactive getters.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const $list = $(["Item 1", "Item 2"]);
|
||||||
|
|
||||||
|
// Get by index
|
||||||
|
console.log($list[0]()); // "Item 1"
|
||||||
|
|
||||||
|
// Update by index
|
||||||
|
$list[0]("Updated Item");
|
||||||
|
|
||||||
|
// Note: For adding/removing items, use standard array methods
|
||||||
|
// which SigPro makes reactive (push, pop, splice, etc.)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Computed (Derived Logic)
|
||||||
|
A **Computed Signal** is a read-only value that depends on other signals. It is defined by passing a **function that returns a value**.
|
||||||
|
|
||||||
### Example:
|
|
||||||
```javascript
|
```javascript
|
||||||
const $price = $(100);
|
const $price = $(100);
|
||||||
const $qty = $(2);
|
const $tax = $(0.21);
|
||||||
|
|
||||||
// Auto-tracks $price and $qty
|
// This function HAS a return statement
|
||||||
const $total = $(() => $price() * $qty());
|
const $total = $(() => {
|
||||||
|
return $price() * (1 + $tax());
|
||||||
$qty(3); // $total updates to 300 automatically
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Effects (Reactive Actions)
|
|
||||||
|
|
||||||
An **Effect** is a function that **does not return a value**. It performs an action (side effect) whenever the signals it "touches" change.
|
|
||||||
|
|
||||||
* **When to use:** Logging, manual DOM tweaks, or syncing with external APIs.
|
|
||||||
* **Syntax:** `$(() => { action });`
|
|
||||||
|
|
||||||
### Example:
|
|
||||||
```javascript
|
|
||||||
const $status = $("online");
|
|
||||||
|
|
||||||
// Runs every time $status changes
|
|
||||||
$(() => {
|
|
||||||
console.log("System status is now:", $status());
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Usage (Read-only):
|
||||||
|
console.log($total()); // 121
|
||||||
|
|
||||||
|
$price(200);
|
||||||
|
console.log($total()); // 242 (Auto-updated)
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 5. Summary Table: Usage Guide
|
## 5. Effects (Reactive Actions)
|
||||||
|
An **Effect** is used for side-effects. It is defined by passing a **function that does NOT return a value**. It runs once immediately and then re-runs whenever its dependencies change.
|
||||||
| Primitive | Logic Type | Persistence? | Typical Use Case |
|
|
||||||
| :--- | :--- | :--- | :--- |
|
|
||||||
| **Signal** | Mutable State | **Yes** (Optional) | `$(0, 'counter')` |
|
|
||||||
| **Computed** | Derived / Read-only | No | `$(() => $a() + $b())` |
|
|
||||||
| **Effect** | Imperative Action | No | `$(() => alert($msg()))` |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💡 Pro Tip: The Power of Native Persistence
|
|
||||||
|
|
||||||
In SigPro, you don't need external plugins for basic storage. By using the `key` parameter in a Signal, you gain:
|
|
||||||
1. **Zero Boilerplate:** No more `JSON.parse(localStorage.getItem(...))`.
|
|
||||||
2. **Instant Hydration:** The value is restored **before** the UI renders, preventing "flicker".
|
|
||||||
3. **Atomic Safety:** Data is saved to disk exactly when the signal changes, ensuring your app state is always safe.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Naming Convention
|
|
||||||
We use the **`$` prefix** (e.g., `$count`) for reactive functions to distinguish them from static variables at a glance:
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
let count = 0; // Static
|
const $name = $("Alice");
|
||||||
const $count = $(0); // Reactive Signal
|
|
||||||
|
// This function has NO return statement (Side-effect)
|
||||||
|
$(() => {
|
||||||
|
console.log("The name changed to:", $name());
|
||||||
|
document.title = `Profile: ${$name()}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
$name("Bob"); // Triggers the console.log and updates document.title
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Summary: Input Mapping
|
||||||
|
|
||||||
|
| If you pass... | SigPro creates a... | Access Method |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **A Value** | **Signal** | `$var()` / `$var(val)` |
|
||||||
|
| **An Object** | **Store** | `obj.prop()` / `obj.prop(val)` |
|
||||||
|
| **An Array** | **Array Store** | `arr[i]()` / `arr.push()` |
|
||||||
|
| **Function (returns)** | **Computed** | `$comp()` (Read-only) |
|
||||||
|
| **Function (no return)** | **Effect** | Automatically executed |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 Naming Convention: The `$` Prefix
|
||||||
|
To keep your code clean, always prefix your reactive variables with `$`. This tells you at a glance that you need to call it as a function to get its value.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const name = "Static"; // Just a string
|
||||||
|
const $name = $("Alice"); // A Reactive Signal
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# Application Mounter: `$.router.mount` (Core)
|
# 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, bridging the gap between your logic and the browser.
|
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, bridging the gap between your logic and the browser.
|
||||||
|
|
||||||
|
|||||||
@@ -1,99 +1,176 @@
|
|||||||
# Quick API Reference ⚡
|
# 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.
|
SigPro is a minimal yet powerful engine. Here is a complete overview of its capabilities.
|
||||||
|
|
||||||
## 1. Core Reactivity: `$( )`
|
## 1. Core API Summary
|
||||||
|
|
||||||
The `$` function is a polymorphic constructor. It creates **Signals** (state) or **Computed Effects** (logic) based on the input type.
|
| Function | Description | Example |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **`$(val, key?)`** | Creates a Signal, Computed, or Store (with optional persistence). | `const $n = $(0)` |
|
||||||
|
| **`$.html()`** | The base engine to create reactive HTMLElements. | `$.html('div', {}, 'Hi')` |
|
||||||
|
| **`Tags`** | Global helpers (div, span, button, etc.) built on top of `$.html`. | `div("Hello SigPro")` |
|
||||||
|
| **`$.mount()`** | Mounts a component into a target element (clears target first). | `$.mount(App, '#app')` |
|
||||||
|
| **`$.router()`** | Hash-based router with dynamic params and lazy loading. | `$.router(routes)` |
|
||||||
|
| **`$.plugin()`** | Extends SigPro or loads external scripts/plugins. | `$.plugin(MyPlugin)` |
|
||||||
|
|
||||||
| 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:**
|
## 2. The Power of `$` (Reactivity)
|
||||||
|
|
||||||
|
The `$` function adapts to whatever you pass to it:
|
||||||
|
|
||||||
|
### **Signals & Persistent State**
|
||||||
|
Reactive values in RAM or synced with `localStorage`.
|
||||||
```javascript
|
```javascript
|
||||||
const $count = $(0); // Signal
|
const $count = $(0); // Simple Signal
|
||||||
const $double = $(() => $count() * 2); // Computed
|
const $theme = $('dark', 'app-theme'); // Persistent Signal (Disk)
|
||||||
|
|
||||||
|
$count(10); // Update value
|
||||||
|
console.log($count()); // Get value: 10
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Computed Signals**
|
||||||
|
Read-only signals that update automatically when their dependencies change.
|
||||||
|
```javascript
|
||||||
|
const $double = $(() => $count() * 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Reactive Stores (Objects + Disk)**
|
||||||
|
Transforms an object into a reactive tree. If a `key` is provided, the **entire structure** persists.
|
||||||
|
```javascript
|
||||||
|
// Store in RAM + Disk (Auto-syncs nested properties)
|
||||||
|
const state = $({
|
||||||
|
user: { name: 'Natxo' },
|
||||||
|
settings: { dark: true }
|
||||||
|
}, 'my-app-state');
|
||||||
|
|
||||||
|
// Accessing properties (they become signals)
|
||||||
|
state.user.name(); // Get: 'Natxo'
|
||||||
|
state.user.name('Guest'); // Set & Sync to Disk: 'my-app-state_user_name'
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. Rendering Engine: `$.html`
|
### **3. UI Creation: Constructor vs. Direct Tags**
|
||||||
|
|
||||||
SigPro uses a hyperscript-style engine to create live DOM nodes.
|
SigPro provides the `$.html` engine for defining any element and global "Sugar Tags" for rapid development.
|
||||||
|
|
||||||
| Argument | Type | Required | Description |
|
::: code-group
|
||||||
| :--- | :--- | :--- | :--- |
|
|
||||||
| **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 [Engine Constructor ($.html)]
|
||||||
```javascript
|
// 1. DEFINE: Create a custom piece of UI
|
||||||
$.html('button', { onclick: () => alert('Hi!') }, 'Click Me');
|
// This returns a real DOM element ready to be used.
|
||||||
|
const MyHero = $.html('section', { class: 'hero' }, [
|
||||||
|
h1("Internal Title")
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 2. USE: Nest it inside other elements like a standard tag
|
||||||
|
const Page = () => div([
|
||||||
|
MyHero, // We just drop the variable here
|
||||||
|
p("This paragraph is outside the Hero section.")
|
||||||
|
]);
|
||||||
|
|
||||||
|
$.mount(Page, '#app');
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```javascript [Global Helpers (Tags)]
|
||||||
|
// Use pre-defined global tags to compose layouts instantly.
|
||||||
|
// No need to define them, just call them.
|
||||||
|
|
||||||
|
const Page = () => div({ id: 'main' }, [
|
||||||
|
section({ class: 'hero' }, [
|
||||||
|
h1("Direct Global Tag"),
|
||||||
|
p("Building UI without boilerplate.")
|
||||||
|
]),
|
||||||
|
button({ onclick: () => alert('Hi!') }, "Click Me")
|
||||||
|
]);
|
||||||
|
|
||||||
|
$.mount(Page, '#app');
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3. Global Helpers (Tag Proxies)
|
### **Technical Breakdown**
|
||||||
|
|
||||||
To keep your code clean, SigPro automatically exposes common HTML tags to the global scope.
|
* **`$.html(tag, props, children)`**: This is the core factory. Use it when you need to create an element dynamically or when working with **Custom Elements / Web Components**.
|
||||||
|
* **`Global Tags (div, p, etc.)`**: These are shortcut functions that SigPro injects into the `window` object. They internally call `$.html` for you, making your component code much cleaner and easier to read.
|
||||||
|
|
||||||
| 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:**
|
### **Key Difference**
|
||||||
|
* **`$.html`**: Acts as a **constructor**. Use it when you want to "bake" a specific structure (like a Section that *always* contains an H1) into a single variable.
|
||||||
|
* **`Global Tags`**: Act as **scaffolding**. Use them to wrap different contents dynamically as you build your views.
|
||||||
|
|
||||||
|
### **Global Tags (Standard Syntax)**
|
||||||
|
SigPro declares standard tags in the global scope so you don't have to import them.
|
||||||
```javascript
|
```javascript
|
||||||
// No imports needed!
|
const Card = (title, $val) => div({ class: 'card' }, [
|
||||||
div([
|
h2(title),
|
||||||
h1("Title"),
|
p("Reactive content below:"),
|
||||||
button("Ok")
|
input({
|
||||||
|
type: 'number',
|
||||||
|
$value: $val, // Automatic Two-way binding
|
||||||
|
$style: () => $val() > 10 ? 'color: red' : 'color: green'
|
||||||
|
})
|
||||||
]);
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 4. Mounting & Plugins
|
## 4. Mounting: `$.mount`
|
||||||
|
|
||||||
Methods to initialize your application and extend the engine.
|
The entry point of your application. It links your JavaScript logic to a specific DOM element.
|
||||||
|
|
||||||
| Method | Signature | Description |
|
```html
|
||||||
| :--- | :--- | :--- |
|
<div id="app"></div>
|
||||||
| **`$.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
|
```javascript
|
||||||
$.plugin([UI, Router]);
|
// In your main.js
|
||||||
$.mount(App, '#root');
|
const App = () => main([
|
||||||
|
h1("Welcome to SigPro"),
|
||||||
|
p("Everything here is reactive.")
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Usage: $.mount(component, selectorOrElement)
|
||||||
|
$.mount(App, '#app');
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 5. Reactive Syntax Cheat Sheet
|
## 5. Navigation: `$.router`
|
||||||
|
|
||||||
| Feature | Syntax | Description |
|
A robust hash-based router (`#/path`) that handles view switching automatically.
|
||||||
| :--- | :--- | :--- |
|
|
||||||
| **Text Binding** | `p(["Value: ", $sig])` | Updates text content automatically. |
|
```javascript
|
||||||
| **Attributes** | `div({ id: $sig })` | Static attribute assignment. |
|
const routes = [
|
||||||
| **Reactive Attr** | `div({ $class: $sig })` | Attribute updates when `$sig` changes. |
|
{ path: '/', component: Home },
|
||||||
| **Two-way Binding**| `input({ $value: $sig })`| Syncs input value and signal automatically. |
|
{ path: '/user/:id', component: (params) => h1(`User ID: ${params.id}`) },
|
||||||
| **Conditional** | `div(() => $sig() > 0 ? "Yes" : "No")` | Re-renders only the content when the condition changes. |
|
{ path: '/admin', component: () => import('./Admin.js') }, // Native Lazy Loading
|
||||||
|
{ path: '*', component: () => p("404 - Not Found") }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Initialize and mount the router
|
||||||
|
$.mount($.router(routes), '#app');
|
||||||
|
|
||||||
|
// Programmatic navigation
|
||||||
|
$.router.go('/user/42');
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 6. Plugins: `$.plugin`
|
||||||
|
|
||||||
|
Extend the engine or load external dependencies.
|
||||||
|
|
||||||
## Summary Table
|
```javascript
|
||||||
|
// 1. Function-based plugin
|
||||||
|
$.plugin(($) => {
|
||||||
|
$.myHelper = () => console.log("Plugin active!");
|
||||||
|
});
|
||||||
|
|
||||||
| Feature | SigPro Approach | Benefit |
|
// 2. Load external scripts
|
||||||
| :--- | :--- | :--- |
|
await $.plugin('https://cdn.example.com/library.js');
|
||||||
| **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. |
|
|
||||||
|
|||||||
@@ -1,160 +1,128 @@
|
|||||||
# Global Tag Helpers
|
# Global Tag Helpers
|
||||||
|
|
||||||
In **SigPro**, you don't need to write `$.html('div', ...)` every time. To keep your code clean and readable, the engine automatically generates global helper functions for all standard HTML tags.
|
In **SigPro**, you don't need to write `$.html('div', ...)` every time. To keep your code clean and readable, the engine automatically generates global helper functions for all standard HTML tags upon initialization.
|
||||||
|
|
||||||
## 1. How it Works
|
## 1. How it Works
|
||||||
|
|
||||||
When SigPro initializes, it runs a proxy loop that creates a function for every common HTML tag and attaches it to the `window` object.
|
SigPro iterates through an internal manifest of standard HTML tags and attaches a wrapper function for each one directly to the `window` object. This creates a native "DSL" (Domain Specific Language) that looks like a template engine but is **100% standard JavaScript**.
|
||||||
|
|
||||||
* **Traditional:** `$.html('button', { onclick: ... }, 'Click')`
|
* **Under the hood:** `$.html('button', { onclick: ... }, 'Click')`
|
||||||
* **SigPro Style:** `button({ onclick: ... }, 'Click')`
|
* **SigPro Style:** `button({ onclick: ... }, 'Click')`
|
||||||
|
|
||||||
This approach gives you a "DSL" (Domain Specific Language) that feels like HTML but is actually **pure JavaScript**.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. The Global Registry
|
## 2. The Complete Global Registry
|
||||||
|
|
||||||
The following tags are available globally by default:
|
The following tags are injected into the global scope and are ready to use as soon as SigPro loads:
|
||||||
|
|
||||||
| Category | Available Functions |
|
| Category | Available Global Functions |
|
||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| **Layout** | `div`, `span`, `section`, `main`, `nav`, `header`, `footer`, `article`, `aside` |
|
| **Structure** | `div`, `span`, `p`, `section`, `nav`, `main`, `header`, `footer`, `article`, `aside` |
|
||||||
| **Typography** | `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `li`, `a`, `label`, `strong`, `em` |
|
| **Typography** | `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `strong`, `em`, `code`, `pre`, `small`, `i`, `b`, `u`, `mark` |
|
||||||
| **Forms** | `form`, `input`, `button`, `select`, `option`, `textarea` |
|
| **Interactive** | `button`, `a`, `label`, `br`, `hr`, `details`, `summary` |
|
||||||
| **Table** | `table`, `thead`, `tbody`, `tr`, `th`, `td` |
|
| **Forms** | `form`, `input`, `select`, `option`, `textarea`, `fieldset`, `legend` |
|
||||||
| **Media** | `img`, `video`, `audio`, `canvas`, `svg` |
|
| **Tables** | `table`, `thead`, `tbody`, `tr`, `th`, `td`, `tfoot`, `caption` |
|
||||||
|
| **Media & Graphics** | `img`, `canvas`, `video`, `audio`, `svg`, `path`, `iframe` |
|
||||||
|
|
||||||
|
> "In SigPro, tags are not 'magic' strings handled by a compiler. They are **functional imitations** of HTML elements. Every time you call `div()`, you are executing a standard JavaScript function that returns a real DOM element. This gives you the speed of a specialized DSL with the transparency of pure JS."
|
||||||
|
|
||||||
|
::: danger WARNING: GLOBAL NAMING COLLISIONS
|
||||||
|
Since **SigPro** injects these helpers directly into the `window` object, they are regular JavaScript functions. This means **they can be overwritten**.
|
||||||
|
|
||||||
|
If you declare a variable, constant, or function with the same name as an HTML tag (e.g., `const div = ...` or `function p()`), you will **nullify or shadow** the built-in SigPro helper for that tag in your current scope.
|
||||||
|
|
||||||
|
**Best Practice:** To avoid conflicts, always use **PascalCase** for your custom components (e.g., `UserCard`, `AppHeader`) to distinguish them from the **lowercase** global HTML helpers.
|
||||||
|
:::
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3. Usage Patterns
|
## 3. Usage Patterns (Argument Flexibility)
|
||||||
|
|
||||||
The tag functions are highly flexible and accept arguments in different orders to suit your coding style.
|
The tag functions are "smart". They detect whether you are passing attributes, content, or both.
|
||||||
|
|
||||||
### A. Attributes + Content
|
### A. Attributes + Content
|
||||||
The most common pattern.
|
The standard way to build complex nodes.
|
||||||
```javascript
|
```javascript
|
||||||
div({ class: 'card' }, [
|
div({ class: 'container', id: 'main-wrapper' }, [
|
||||||
h1("Title"),
|
h1("Welcome"),
|
||||||
p("Description")
|
p("This is SigPro.")
|
||||||
]);
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
### B. Content Only
|
### B. Content Only (The "Skipper")
|
||||||
If you don't need attributes, you can skip the object entirely.
|
If you don't need attributes, you can pass the content (string, array, or function) as the **first and only** argument.
|
||||||
```javascript
|
```javascript
|
||||||
div([
|
section([
|
||||||
h1("Just Content"),
|
h2("No Attributes Needed"),
|
||||||
p("No attributes object needed here.")
|
button("Click Me")
|
||||||
]);
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
### C. Simple Text
|
### C. Primitive Content
|
||||||
For elements that only contain a string.
|
For simple tags, you can just pass a string or a number.
|
||||||
```javascript
|
```javascript
|
||||||
button("Submit"); // Equivalent to <button>Submit</button>
|
h1("Hello World");
|
||||||
|
span(42);
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 4. Reactive Tags
|
## 4. Reactive Attributes & Content
|
||||||
|
|
||||||
Since these helpers are just wrappers around `$.html`, they support full reactivity out of the box.
|
These helpers fully support SigPro's reactivity. Attributes starting with `$` are automatically tracked.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const $loading = $(true);
|
const $count = $(0);
|
||||||
|
|
||||||
|
div({ class: 'counter-app' }, [
|
||||||
|
h2(["Current Count: ", $count]), // Auto-unwrapping text content
|
||||||
|
|
||||||
div([
|
|
||||||
$loading() ? span("Loading...") : h1("Data Ready!"),
|
|
||||||
button({
|
button({
|
||||||
$disabled: $loading, // Reactive attribute
|
onclick: () => $count(c => c + 1),
|
||||||
onclick: () => $loading(false)
|
$style: () => $count() > 5 ? "color: red" : "color: green" // Reactive style
|
||||||
}, "Stop Loading")
|
}, "Increment")
|
||||||
]);
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 5. Under the Hood
|
## 5. Technical Implementation
|
||||||
|
|
||||||
If you are curious about how this happens without a compiler, here is the logic inside the SigPro core:
|
As seen in the SigPro core, the engine registers these tags dynamically. This means **zero imports** are needed for UI creation in your component files.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const tags = ['div', 'span', 'p', 'button', ...];
|
// Internal SigPro loop
|
||||||
|
tags.forEach(t => window[t] = (p, c) => $.html(t, p, c));
|
||||||
tags.forEach(tag => {
|
|
||||||
window[tag] = (props, content) => $.html(tag, props, content);
|
|
||||||
});
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Because these are attached to `window`, they are available in any file in your project as soon as SigPro is loaded, making your components look like this:
|
Because they are real functions, you get full IDE autocompletion and valid JS syntax highlighting without needing special plugins like JSX.
|
||||||
|
|
||||||
```javascript
|
|
||||||
// No imports required for tags!
|
|
||||||
export default () =>
|
|
||||||
section({ id: 'hero' }, [
|
|
||||||
h1("Fast. Atomic. Simple."),
|
|
||||||
p("Built with SigPro.")
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 6. Full Comparison: SigPro vs. Standard HTML
|
## 6. Comparison: Logic to UI
|
||||||
|
|
||||||
To better understand the translation, here is a complete example of a **User Card** component. Notice how **SigPro** attributes with the `$` prefix map to reactive behavior, while standard attributes remain static.
|
Here is how a dynamic **Task Item** component translates from SigPro logic to the final DOM structure.
|
||||||
|
|
||||||
::: code-group
|
::: code-group
|
||||||
```javascript [SigPro (JS)]
|
```javascript [SigPro Component]
|
||||||
const $online = $(true);
|
const Task = (title, $done) => (
|
||||||
|
li({ class: 'task-item' }, [
|
||||||
export const UserCard = () => (
|
input({
|
||||||
div({ class: 'user-card' }, [
|
type: 'checkbox',
|
||||||
img({ src: 'avatar.png', alt: 'User' }),
|
$checked: $done // Two-way reactive binding
|
||||||
|
}),
|
||||||
div({ class: 'info' }, [
|
span({
|
||||||
h2("John Doe"),
|
$style: () => $done() ? "text-decoration: line-through" : ""
|
||||||
p({
|
}, title)
|
||||||
$class: () => $online() ? 'status-on' : 'status-off'
|
|
||||||
}, [
|
|
||||||
"Status: ",
|
|
||||||
() => $online() ? "Online" : "Offline"
|
|
||||||
])
|
|
||||||
]),
|
|
||||||
|
|
||||||
button({
|
|
||||||
onclick: () => $online(!$online())
|
|
||||||
}, "Toggle Status")
|
|
||||||
])
|
])
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
```html [Equivalent HTML Structure]
|
```html [Rendered HTML]
|
||||||
<div class="user-card">
|
<li class="task-item">
|
||||||
<img src="avatar.png" alt="User">
|
<input type="checkbox" checked>
|
||||||
|
<style="text-decoration: line-through">Buy milk</span>
|
||||||
<div class="info">
|
</li>
|
||||||
<h2>John Doe</h2>
|
|
||||||
<p class="status-on">
|
|
||||||
Status: Online
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button>Toggle Status</button>
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### What is happening here?
|
|
||||||
|
|
||||||
1. **Structure:** The hierarchy is identical. `div([...])` in JS translates directly to nested tags in HTML.
|
|
||||||
2. **Attributes:** `class` is set once. `$class` is "live"; SigPro listens to the `$online` signal and updates the class name without re-rendering the whole card.
|
|
||||||
3. **Content:** The array `[...]` in SigPro is the equivalent of the children inside an HTML tag.
|
|
||||||
4. **Reactivity:** The function `() => $online() ? ...` creates a **TextNode** in the HTML that changes its text content surgically whenever the signal toggles.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💡 Best Practices
|
|
||||||
|
|
||||||
1. **Destructuring:** If you prefer not to rely on global variables, you can destructure them from `window` or `$` (though in SigPro, using them globally is the intended "clean" way).
|
|
||||||
2. **Custom Tags:** If you need a tag that isn't in the default list (like a Web Component), you can still use the base engine: `$.html('my-custom-element', { ... })`.
|
|
||||||
|
|||||||
55
src/docs/examples.md
Normal file
55
src/docs/examples.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# Live Playground
|
||||||
|
|
||||||
|
Experience **SigPro's** fine-grained reactivity in real-time. Feel free to tweak the signal values in the editor!
|
||||||
|
|
||||||
|
<iframe width="100%" height="600" src="//jsfiddle.net/natxocc/spwran02/4/embedded/" frameborder="0" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Best Practices for Documentation
|
||||||
|
|
||||||
|
* **Tab Selection:** You can control which tabs are active by default by changing the URL segment after `/embedded/`.
|
||||||
|
* `js,result`: Shows the logic and the output.
|
||||||
|
* `html,js,result`: Shows the base structure, the logic, and the output.
|
||||||
|
* **Height Management:** For complex Store examples, increase the `height` attribute to `500` or `600` so the code is readable without internal scrolling.
|
||||||
|
* **Responsive Width:** Keeping `width="100%"` ensures the fiddle scales correctly on tablets and mobile devices.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Advanced: The "Fiddle" Component (Optional)
|
||||||
|
If you plan to have 10+ examples, you can create a global Vue component in VitePress. This keeps your Markdown files clean and allows you to change the theme or default height for all fiddles at once.
|
||||||
|
|
||||||
|
**Create `.vitepress/theme/components/Fiddle.vue`:**
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="fiddle-wrapper" style="margin: 20px 0;">
|
||||||
|
<iframe
|
||||||
|
width="100%"
|
||||||
|
:height="height"
|
||||||
|
:src="`//jsfiddle.net/natxocc/${id}/embedded/${tabs}/dark/`"
|
||||||
|
frameborder="0"
|
||||||
|
loading="lazy">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
id: String, // e.g., "spwran02/4"
|
||||||
|
height: { default: '400' },
|
||||||
|
tabs: { default: 'js,result' }
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Usage in Markdown:**
|
||||||
|
```markdown
|
||||||
|
Check out this store example:
|
||||||
|
<Fiddle id="spwran02/4" height="500" />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Why this is perfect for SigPro:
|
||||||
|
Because SigPro is **zero-dependency** and runs directly in the browser, your JSFiddle code will be exactly what the user copies into their own `index.html`. There is no hidden "build step" confusing the learner.
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
# Getting Started
|
|
||||||
|
|
||||||
**SigPro** is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.
|
|
||||||
|
|
||||||
## 1. Installation
|
|
||||||
|
|
||||||
You can install SigPro via your favorite package manager:
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
```bash [npm]
|
|
||||||
npm install sigpro
|
|
||||||
````
|
|
||||||
|
|
||||||
```bash [pnpm]
|
|
||||||
pnpm add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [yarn]
|
|
||||||
yarn add sigpro
|
|
||||||
```
|
|
||||||
```bash [bun]
|
|
||||||
bun add sigpro
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 2\. Basic Usage
|
|
||||||
|
|
||||||
The core of SigPro is the `$` function, which creates reactive state (Signals) and computed effects.
|
|
||||||
|
|
||||||
Create a `main.js` file and try this:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import { $ } from 'SigPro';
|
|
||||||
|
|
||||||
// 1. Create a reactive signal
|
|
||||||
const $name = $("World");
|
|
||||||
|
|
||||||
// 2. Define a reactive component
|
|
||||||
const App = () => div({ class: 'container' }, [
|
|
||||||
h1(["Hello, ", $name, "!"]),
|
|
||||||
|
|
||||||
input({
|
|
||||||
type: 'text',
|
|
||||||
$value: $name, // Two-way binding
|
|
||||||
placeholder: 'Enter your name...'
|
|
||||||
}),
|
|
||||||
|
|
||||||
button({
|
|
||||||
onclick: () => $name("SigPro")
|
|
||||||
}, "Set to SigPro")
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 3. Mount the application
|
|
||||||
$.mount(App, '#app');
|
|
||||||
```
|
|
||||||
|
|
||||||
## 3\. How it Works
|
|
||||||
|
|
||||||
SigPro doesn't use a Virtual DOM. Instead, it creates real DOM nodes and binds them directly to your data:
|
|
||||||
|
|
||||||
1. **Signals**: `$(value)` creates a getter/setter function.
|
|
||||||
2. **Reactivity**: When you pass a signal or a function to a DOM element, SigPro automatically creates a subscription.
|
|
||||||
3. **Fine-Grained Updates**: Only the specific text node or attribute linked to the signal updates when the value changes.
|
|
||||||
|
|
||||||
## 4\. Global Tags
|
|
||||||
|
|
||||||
By default, SigPro exports common HTML tags to the global scope (`window`) when initialized. This allows you to write clean, declarative UI without importing every single tag:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Instead of $.html('div', ...), just use:
|
|
||||||
div([
|
|
||||||
h1("Clean Syntax"),
|
|
||||||
p("No more boilerplate.")
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
# Why SigPro?
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
**SigPro** is the answer to a simple question: **Why fight the platform when we can embrace it?**
|
|
||||||
|
|
||||||
## The Modern Web is Ready
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
| Browser Primitive | What It Enables |
|
|
||||||
| :--- | :--- |
|
|
||||||
| **Closures & Proxies** | Automatic dependency tracking without heavy overhead. |
|
|
||||||
| **ES Modules** | Native modularity and lazy loading without complex bundlers. |
|
|
||||||
| **Direct DOM APIs** | Surgical updates that are faster than any reconciliation algorithm. |
|
|
||||||
| **Microtask Queues** | Batching updates efficiently to ensure 60fps performance. |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The SigPro Philosophy
|
|
||||||
|
|
||||||
SigPro strips away the complexity, delivering a reactive programming model that feels like a framework but stays remarkably close to Vanilla JS:
|
|
||||||
|
|
||||||
* **No JSX transformations** – Pure JavaScript functions.
|
|
||||||
* **No Virtual DOM** – Direct, fine-grained DOM manipulation.
|
|
||||||
* **No proprietary syntax** – If you know JS, you know SigPro.
|
|
||||||
* **Zero Build Step Required** – It can run directly in the browser via ESM.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Pure, Atomic, Reactive.
|
|
||||||
const $count = $(0);
|
|
||||||
|
|
||||||
const Counter = () => div([
|
|
||||||
p(["Count: ", $count]),
|
|
||||||
button({ onclick: () => $count(c => c + 1) }, "Increment")
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Performance Comparison
|
|
||||||
|
|
||||||
SigPro isn't just lighter; it's architecturally faster because it skips the "diffing" phase entirely.
|
|
||||||
|
|
||||||
| Metric | SigPro | SolidJS | Svelte | Vue | React |
|
|
||||||
| :--- | :--- | :--- | :--- | :--- | :--- |
|
|
||||||
| **Bundle Size (gzip)** | 🥇 **< 2KB** | 🥈 7KB | 🥉 16KB | 20KB | 45KB |
|
|
||||||
| **Architecture** | **Atomic** | **Atomic** | **Compiled** | **V-DOM** | **V-DOM** |
|
|
||||||
| **Initial Render** | 🥇 **Fastest** | 🥈 Fast | 🥉 Fast | Average | Slow |
|
|
||||||
| **Update Perf** | 🥇 **Surgical** | 🥇 Surgical | 🥈 Fast | 🥉 Average | Slow |
|
|
||||||
| **Dependencies** | 🥇 **0** | 🥇 0 | 🥇 0 | 🥈 2 | 🥉 5+ |
|
|
||||||
| **Build Step** | 🥇 **Optional** | 🥈 Required | 🥈 Required | 🥇 Optional | 🥈 Required |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔑 Core Principles
|
|
||||||
|
|
||||||
SigPro is built on four fundamental pillars:
|
|
||||||
|
|
||||||
### 📡 Atomic Reactivity
|
|
||||||
Automatic dependency tracking with no manual subscriptions. When a signal changes, only the **exact** text nodes or attributes that depend on it update—instantly and surgically.
|
|
||||||
|
|
||||||
### ⚡ Surgical DOM Updates
|
|
||||||
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.
|
|
||||||
|
|
||||||
### 🧩 Plugin-First Architecture
|
|
||||||
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."
|
|
||||||
|
|
||||||
### 🔬 Predictable & Transparent
|
|
||||||
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.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
> "SigPro returns the joy of web development by making the browser the hero again."
|
|
||||||
|
|
||||||
|
|
||||||
@@ -4,93 +4,58 @@ layout: home
|
|||||||
hero:
|
hero:
|
||||||
name: SigPro
|
name: SigPro
|
||||||
text: Atomic Unified Reactive Engine
|
text: Atomic Unified Reactive Engine
|
||||||
tagline: Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.
|
tagline: High-precision atomic reactivity. No Virtual DOM. No compiler. No dependencies.
|
||||||
image:
|
image:
|
||||||
src: /logo.svg
|
src: /logo.svg
|
||||||
alt: SigPro Logo
|
alt: SigPro Logo
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: Get Started
|
text: Get Started
|
||||||
link: /guide/getting-started
|
link: /install
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: View on GitHub
|
text: View on GitHub
|
||||||
link: https://github.com/natxocc/sigpro
|
link: https://github.com/natxocc/sigpro
|
||||||
|
|
||||||
features:
|
features:
|
||||||
- title: Atomic Reactivity
|
- title: ⚛️ Atomic Reactivity
|
||||||
details: Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders.
|
details: Powered by fine-grained Signals. Forget about whole-component re-renders; SigPro updates only the specific text node or attribute that changed.
|
||||||
- title: Zero Dependencies
|
- title: 🚀 Zero Virtual DOM
|
||||||
details: Written in pure Vanilla JS. Maximum performance with the smallest footprint possible.
|
details: By eliminating the V-DOM diffing layer, SigPro performs surgical, direct manipulations on the real DOM, removing memory and CPU overhead.
|
||||||
- title: Modular Ecosystem
|
- title: 🛠️ No Compiler Required
|
||||||
details: Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need.
|
details: Pure Vanilla JS. No Babel, no JSX, no complex build steps. Standard JavaScript that runs natively in the browser with maximum performance.
|
||||||
|
- title: 📦 Ultra-Lightweight
|
||||||
|
details: The core engine—including reactivity, DOM creation, persistence, and routing—is under 2KB. Perfect for performance-critical applications.
|
||||||
---
|
---
|
||||||
|
|
||||||
## Why SigPro?
|
## Redefining Modern Reactivity
|
||||||
|
|
||||||
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.
|
SigPro is not just another framework; it is a **high-performance engine**. While other libraries add layers of abstraction that slow down execution, SigPro returns to the essence of the web, leveraging the power of modern browser engines.
|
||||||
|
|
||||||
### The Core in Action
|
### Why SigPro?
|
||||||
|
|
||||||
```javascript
|
#### ⚡️ Surgical DOM Efficiency
|
||||||
import { $ } from 'sigpro2';
|
Unlike React or Vue, SigPro doesn't compare element trees. When a signal changes, SigPro knows exactly which DOM node depends on it and updates it instantly. It is **reactive precision** at its finest.
|
||||||
|
|
||||||
// A reactive state Signal
|
#### 🔌 Modular Plugin System
|
||||||
const $count = $(0);
|
The core is sacred. Any extra functionality—Routing, UI Helpers, or State Persistence—is integrated through a polymorphic plugin system. Load only what your application truly needs.
|
||||||
|
|
||||||
// A Computed signal that updates automatically
|
#### 💾 Native Persistence
|
||||||
const $double = $(() => $count() * 2);
|
SigPro features first-class support for `localStorage`. Synchronizing your application state with persistent storage is as simple as providing a key when initializing your Signal.
|
||||||
|
|
||||||
// UI that breathes with your data
|
#### 🚦 Built-in Hash Routing
|
||||||
const Counter = () => div([
|
A robust routing system that supports **Native Lazy Loading** out of the box. Load your components only when the user navigates to them, keeping initial load times near zero.
|
||||||
h1(["Count: ", $count]),
|
|
||||||
p(["Double: ", $double]),
|
|
||||||
button({ onclick: () => $count(c => c + 1) }, "Increment")
|
|
||||||
]);
|
|
||||||
|
|
||||||
$.mount(Counter);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Key Features
|
### The "No-Build" Philosophy
|
||||||
|
In an ecosystem obsessed with compilers, SigPro bets on **standardization**. Write code today that will still run 10 years from now, without depending on build tools that will eventually become obsolete.
|
||||||
|
|
||||||
#### ⚡️ Fine-Grained Reactivity
|
> "The best way to optimize code is to not have to process it at all."
|
||||||
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.
|
|
||||||
|
|
||||||
#### 🔌 Polymorphic Plugin System
|
|
||||||
Extend core capabilities in a single line. Add global UI helpers, routing, or state persistence seamlessly.
|
|
||||||
```javascript
|
|
||||||
import { UI, Router } from 'sigpro/plugins';
|
|
||||||
$.plugin([UI, Router]);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 📂 File-Based Routing
|
|
||||||
With our dedicated Vite plugin, manage your routes simply by creating files in `src/pages/`. It supports native **Lazy Loading** out of the box for lightning-fast initial loads.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Quick Install
|
## Community & Vision
|
||||||
|
SigPro is an open-source project focused on simplicity and extreme speed. Designed for developers who love the web platform and hate unnecessary "bloatware".
|
||||||
|
|
||||||
::: code-group
|
```text
|
||||||
```bash [npm]
|
Built with ❤️ by NatxoCC for the Modern Web.
|
||||||
npm install sigpro
|
|
||||||
```
|
|
||||||
```bash [pnpm]
|
|
||||||
pnpm add sigpro
|
|
||||||
```
|
|
||||||
```bash [yarn]
|
|
||||||
yarn add sigpro
|
|
||||||
```
|
|
||||||
```bash [bun]
|
|
||||||
bun add sigpro
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Community & Support
|
|
||||||
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.
|
|
||||||
|
|
||||||
```
|
|
||||||
Built with ❤️ by NatxoCC
|
|
||||||
```
|
|
||||||
110
src/docs/install.md
Normal file
110
src/docs/install.md
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
# Installation & Setup
|
||||||
|
|
||||||
|
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
|
||||||
|
|
||||||
|
## 1. Installation
|
||||||
|
|
||||||
|
Choose the method that best fits your workflow:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
|
||||||
|
```bash [npm]
|
||||||
|
npm install sigpro
|
||||||
|
````
|
||||||
|
|
||||||
|
```bash [pnpm]
|
||||||
|
pnpm add sigpro
|
||||||
|
```
|
||||||
|
|
||||||
|
```bash [yarn]
|
||||||
|
yarn add sigpro
|
||||||
|
```
|
||||||
|
|
||||||
|
```bash [bun]
|
||||||
|
bun add sigpro
|
||||||
|
```
|
||||||
|
|
||||||
|
```html [CDN (ESM)]
|
||||||
|
<script type="module">
|
||||||
|
import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
-----
|
||||||
|
|
||||||
|
## 2\. Quick Start Examples
|
||||||
|
|
||||||
|
Depending on your installation method, here is how you can get SigPro running in seconds.
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
|
||||||
|
```javascript [Mainstream (Bundlers)]
|
||||||
|
// File: App.js
|
||||||
|
import { $ } from 'sigpro';
|
||||||
|
|
||||||
|
export const App = () => {
|
||||||
|
// $ is global, but we import it for better IDE intellisense
|
||||||
|
const $count = $(0);
|
||||||
|
|
||||||
|
// Tags like div, h1, button are available globally
|
||||||
|
return div({ class: 'card' }, [
|
||||||
|
h1(["Count is: ", $count]),
|
||||||
|
button({ onclick: () => $count(c => c + 1) }, "Increment")
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// File: main.js
|
||||||
|
import { $ } from 'sigpro';
|
||||||
|
import { App } from './App.js';
|
||||||
|
|
||||||
|
$.mount(App, '#app');
|
||||||
|
```
|
||||||
|
|
||||||
|
```html [Classic (Direct CDN)]
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
// Import directly from CDN
|
||||||
|
import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
|
||||||
|
const $name = $("Developer");
|
||||||
|
|
||||||
|
// No need to import div, section, h2, input... they are global!
|
||||||
|
const App = () => section([
|
||||||
|
h2(["Welcome, ", $name]),
|
||||||
|
input({
|
||||||
|
type: 'text',
|
||||||
|
$value: $name, // Automatic two-way binding
|
||||||
|
placeholder: 'Type your name...'
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
|
||||||
|
$.mount(App, '#app');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
-----
|
||||||
|
|
||||||
|
## 3\. Global by Design
|
||||||
|
|
||||||
|
One of SigPro's core strengths is its **Global API**.
|
||||||
|
|
||||||
|
* **The `$` Function:** Once loaded, it attaches itself to `window.$`. While you can use `import` for better IDE support and type checking, it is accessible everywhere.
|
||||||
|
* **HTML Tags:** Common tags (`div`, `span`, `button`, etc.) are automatically registered in the global scope. This eliminates "Import Hell" and keeps your components clean and readable.
|
||||||
|
|
||||||
|
## 4\. Why no build step?
|
||||||
|
|
||||||
|
Because SigPro uses **native ES Modules** and standard JavaScript functions to generate the DOM, you don't actually *need* a compiler like Babel or a loader for JSX.
|
||||||
|
|
||||||
|
* **Development:** Just save and refresh. No complex HMR issues.
|
||||||
|
* **Production:** Use any bundler (Vite, esbuild, Rollup) to tree-shake and minify your final code for maximum performance.
|
||||||
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
# Development Tool: `_debug`
|
|
||||||
|
|
||||||
The **Debug Plugin** 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.
|
|
||||||
|
|
||||||
## 1. Core Features
|
|
||||||
|
|
||||||
* **Reactive Tracking:** Automatically logs whenever the tracked signal updates.
|
|
||||||
* **Visual Grouping:** Uses styled console groups to keep your dev tools organized.
|
|
||||||
* **Object Inspection:** Automatically uses `console.table()` when the signal contains an object or array.
|
|
||||||
* **Efficient Comparison:** Uses `Object.is` to prevent redundant logging if the value hasn't actually changed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Installation
|
|
||||||
|
|
||||||
To use `_debug`, you only need the SigPro core. Register the plugin in your `main.js`. You can conditionally load it so it only runs during development.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import { $ } from 'sigpro';
|
|
||||||
import { Debug } from 'sigpro/plugins';
|
|
||||||
|
|
||||||
// Only load Debug in development mode
|
|
||||||
const plugins = [];
|
|
||||||
if (import.meta.env.DEV) plugins.push(Debug);
|
|
||||||
|
|
||||||
$.plugin(plugins).then(() => {
|
|
||||||
import('./App.js').then(app => $.mount(app.default));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
```bash [NPM]
|
|
||||||
npm install sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [PNPM]
|
|
||||||
pnpm add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Yarn]
|
|
||||||
yarn add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Bun]
|
|
||||||
bun add sigpro
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Basic Usage
|
|
||||||
|
|
||||||
Call `_debug` anywhere in your component. It stays active in the background, watching the signal's lifecycle.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
export default () => {
|
|
||||||
const $count = $(0);
|
|
||||||
const $user = $({ name: "Guest", role: "Viewer" });
|
|
||||||
|
|
||||||
// Start tracking
|
|
||||||
_debug($count, "Main Counter");
|
|
||||||
_debug($user, "User Session");
|
|
||||||
|
|
||||||
return div([
|
|
||||||
button({ onclick: () => $count(c => c + 1) }, "Increment"),
|
|
||||||
button({ onclick: () => $user({ name: "Admin", role: "Super" }) }, "Promote")
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Console Output Breakdown
|
|
||||||
|
|
||||||
When a signal changes, the console displays a structured block:
|
|
||||||
|
|
||||||
1. **Header:** A styled badge with the name (e.g., `SigPro Debug: Main Counter`).
|
|
||||||
2. **Previous Value:** The value before the update (in red).
|
|
||||||
3. **Current Value:** The new value (in green).
|
|
||||||
4. **Table View:** If the value is an object, a formatted table appears automatically.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Debugging Computed Values
|
|
||||||
|
|
||||||
You can also debug **computed functions** to see exactly when derived state is recalculated.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $price = $(100);
|
|
||||||
const $tax = $(0.21);
|
|
||||||
const $total = $(() => $price() * (1 + $tax()));
|
|
||||||
|
|
||||||
// Monitor the result of the calculation
|
|
||||||
_debug($total, "Final Invoice Total");
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Why use `_debug`?
|
|
||||||
|
|
||||||
1. **Clean Logic:** No need to scatter `console.log` inside your reactive functions.
|
|
||||||
2. **State History:** Instantly see the "Before" and "After" of any user action.
|
|
||||||
3. **No-Noise:** It only logs when a real change occurs, keeping the console clean.
|
|
||||||
4. **Deep Inspection:** The automatic `console.table` makes debugging large API responses much faster.
|
|
||||||
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
# Data Fetching: `_fetch`
|
|
||||||
|
|
||||||
The **Fetch Plugin** provides a reactive wrapper around the native browser Fetch API. Instead of managing complex `async/await` flows within your UI, `_fetch` returns a "Reactive Tripod" (Data, Loading, and Error) that your components can listen to automatically.
|
|
||||||
|
|
||||||
## 1. Core Concept
|
|
||||||
|
|
||||||
When you call `_fetch`, 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.
|
|
||||||
|
|
||||||
* **`$data`**: Initialized as `null`. Automatically holds the JSON response on success.
|
|
||||||
* **`$loading`**: Initialized as `true`. Flips to `false` once the request settles.
|
|
||||||
* **`$error`**: Initialized as `null`. Holds the error message if the request fails.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Installation
|
|
||||||
|
|
||||||
Register the `Fetch` plugin in your `main.js`. By convention, we load it alongside the UI and Router to have the full SigPro ecosystem ready.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import { $ } from 'sigpro';
|
|
||||||
import { Fetch } from 'sigpro/plugins';
|
|
||||||
|
|
||||||
$.plugin([Fetch]).then(() => {
|
|
||||||
// Now _fetch() is available globally
|
|
||||||
import('./App.js').then(app => $.mount(app.default));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Basic Usage
|
|
||||||
|
|
||||||
Use `_fetch` inside your component to get live updates. The UI updates surgically whenever a signal changes.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
export default () => {
|
|
||||||
const { $data, $loading, $error } = _fetch('https://api.github.com/users/octocat');
|
|
||||||
|
|
||||||
return div({ class: 'p-6 flex flex-col gap-4' }, [
|
|
||||||
h1("Profile Details"),
|
|
||||||
|
|
||||||
// 1. Loading State (using SigPro UI button)
|
|
||||||
() => $loading() && _button({ $loading: true }, "Fetching..."),
|
|
||||||
|
|
||||||
// 2. Error State
|
|
||||||
() => $error() && div({ class: 'alert alert-error' }, $error()),
|
|
||||||
|
|
||||||
// 3. Success State
|
|
||||||
() => $data() && div({ class: 'card bg-base-200 p-4' }, [
|
|
||||||
img({ src: $data().avatar_url, class: 'w-16 rounded-full' }),
|
|
||||||
h2($data().name),
|
|
||||||
p($data().bio)
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Advanced Configuration
|
|
||||||
|
|
||||||
`_fetch` accepts the same `RequestInit` options as the standard `fetch()` (methods, headers, body, etc.).
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const { $data, $loading } = _fetch('/api/v1/update', {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ status: 'active' })
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Why use `_fetch` instead of native Fetch?
|
|
||||||
|
|
||||||
1. **Declarative UI**: You define the "Loading", "Error", and "Success" templates once, and they swap automatically.
|
|
||||||
2. **No `useEffect` required**: Since SigPro is natively reactive, you don't need lifecycle hooks to trigger re-renders; the signals handle it.
|
|
||||||
3. **Consistency**: It follows the same `_prefix` pattern as the rest of the official plugin ecosystem.
|
|
||||||
4. **Automatic JSON Parsing**: It assumes JSON by default and handles 404/500 errors by populating the `$error` signal.
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
# Navigation Plugin: `Router`
|
|
||||||
|
|
||||||
The SigPro Router handles URL changes via hashes (`#`) and maps them to components. It supports dynamic parameters (like `:id`) and asynchronous loading for heavy pages.
|
|
||||||
|
|
||||||
## 1. Core Features
|
|
||||||
|
|
||||||
* **Hash-based:** Works everywhere without special server configuration.
|
|
||||||
* **Lazy Loading:** Pages are only downloaded when the user visits the route.
|
|
||||||
* **Reactive:** The view updates automatically when the hash changes.
|
|
||||||
* **Dynamic Routes:** Supports paths like `/user/:id`.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Installation
|
|
||||||
|
|
||||||
The Router is usually included in the official plugins package.
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
```bash [NPM]
|
|
||||||
npm install -D tailwindcss @tailwindcss/vite daisyui@next
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [PNPM]
|
|
||||||
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Yarn]
|
|
||||||
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Bun]
|
|
||||||
bun add -d tailwindcss @tailwindcss/vite daisyui@next
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Setting Up Routes
|
|
||||||
|
|
||||||
In your `App.js` (or a dedicated routes file), define your navigation map.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const routes = [
|
|
||||||
{ path: '/', component: () => h1("Home Page") },
|
|
||||||
{
|
|
||||||
path: '/admin',
|
|
||||||
// Lazy Loading: This file is only fetched when needed
|
|
||||||
component: () => import('./pages/Admin.js')
|
|
||||||
},
|
|
||||||
{ path: '/user/:id', component: (params) => h2(`User ID: ${params.id}`) },
|
|
||||||
{ path: '*', component: () => div("404 - Page Not Found") }
|
|
||||||
];
|
|
||||||
|
|
||||||
export default () => div([
|
|
||||||
_navbar({ title: "My App" }),
|
|
||||||
_router(routes) // The router is now a global tag
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Navigation (`_router.go`)
|
|
||||||
|
|
||||||
To move between pages programmatically (e.g., inside an `onclick` event), use the global `_router.go` helper.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
_button({
|
|
||||||
onclick: () => _router.go('/admin')
|
|
||||||
}, "Go to Admin")
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. How it Works (Under the Hood)
|
|
||||||
|
|
||||||
The router tracks the `window.location.hash` and uses a reactive signal to trigger a re-render of the specific area where `_router(routes)` is placed.
|
|
||||||
|
|
||||||
1. **Match:** It filters your route array to find the best fit.
|
|
||||||
2. **Resolve:** * If it's a standard function, it executes it immediately.
|
|
||||||
* If it's a **Promise** (via `import()`), it shows a loading state and swaps the content once the module arrives.
|
|
||||||
3. **Inject:** It replaces the previous DOM node with the new page content surgically.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Integration with UI Components
|
|
||||||
|
|
||||||
Since you are using the **UI Plugin**, you can easily create active states in your navigation menus by checking the current hash.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Example of a reactive sidebar menu
|
|
||||||
_menu({
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Dashboard',
|
|
||||||
active: () => window.location.hash === '#/',
|
|
||||||
onclick: () => _router.go('/')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
active: () => window.location.hash === '#/settings',
|
|
||||||
onclick: () => _router.go('/settings')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
# Persistence Tool: `_storage`
|
|
||||||
|
|
||||||
The Storage plugin synchronizes a signal with a specific key in your browser's `localStorage`. It handles both the **initial hydration** (loading data when the app starts) and **automatic saving** whenever the signal's value changes.
|
|
||||||
|
|
||||||
## 1. Core Concept
|
|
||||||
|
|
||||||
When you "attach" a signal to `_storage`, two things happen:
|
|
||||||
1. **Hydration:** The plugin checks if the key already exists in `localStorage`. If it does, it parses the JSON and updates the signal immediately.
|
|
||||||
2. **Reactive Sync:** It creates a reactive watcher that stringifies and saves the signal's value to the disk every time it is updated.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Installation
|
|
||||||
|
|
||||||
Register the `Storage` plugin in your `main.js`. Since this is a logic-only plugin, it doesn't require any CSS or UI dependencies.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import { $ } from 'sigpro';
|
|
||||||
import { Storage } from 'sigpro/plugins';
|
|
||||||
|
|
||||||
$.plugin(Storage).then(() => {
|
|
||||||
import('./App.js').then(app => $.mount(app.default));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
```bash [NPM]
|
|
||||||
npm install sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [PNPM]
|
|
||||||
pnpm add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Yarn]
|
|
||||||
yarn add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Bun]
|
|
||||||
bun add sigpro
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Basic Usage
|
|
||||||
|
|
||||||
You can wrap any signal with `_storage`. It is common practice to do this right after creating the signal.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
export default () => {
|
|
||||||
// 1. Create a signal with a default value
|
|
||||||
const $theme = $( 'light' );
|
|
||||||
|
|
||||||
// 2. Persist it. If 'user_theme' exists in localStorage,
|
|
||||||
// $theme will be updated to that value instantly.
|
|
||||||
_storage($theme, 'user_theme');
|
|
||||||
|
|
||||||
return div({ class: () => `app-${$theme()}` }, [
|
|
||||||
h1(`Current Theme: ${$theme()}`),
|
|
||||||
button({
|
|
||||||
onclick: () => $theme(t => t === 'light' ? 'dark' : 'light')
|
|
||||||
}, "Toggle Theme")
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Complex Data (Objects & Arrays)
|
|
||||||
|
|
||||||
Since the plugin uses `JSON.parse` and `JSON.stringify` internally, it works perfectly with complex state structures.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $settings = $({
|
|
||||||
notifications: true,
|
|
||||||
fontSize: 16
|
|
||||||
});
|
|
||||||
|
|
||||||
// Automatically saves the whole object whenever any property changes
|
|
||||||
_storage($settings, 'app_settings');
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Why use `_storage`?
|
|
||||||
|
|
||||||
1. **Zero Boilerplate:** You don't need to manually write `localStorage.getItem` or `setItem` logic inside your components.
|
|
||||||
2. **Chaining:** Because `_storage` returns the signal, you can persist it inline.
|
|
||||||
3. **Error Resilience:** It includes a built-in `try/catch` block to prevent your app from crashing if the stored JSON is corrupted.
|
|
||||||
4. **Surgical Persistence:** Only the signals you explicitly mark for storage are saved, keeping your `localStorage` clean.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Pro Tip: Combining with Debug
|
|
||||||
|
|
||||||
You can chain plugins to create a fully monitored and persistent state:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $score = _storage($(0), 'high_score');
|
|
||||||
|
|
||||||
// Now it's saved to disk AND logged to console on every change
|
|
||||||
_debug($score, "Game Score");
|
|
||||||
```
|
|
||||||
@@ -1,956 +0,0 @@
|
|||||||
# SigPro UI Plugin - Complete Documentation
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
The **SigPro UI** plugin is a comprehensive, reactive component library built on SigPro's atomic reactivity system. It seamlessly integrates **Tailwind CSS v4** for utility-first styling and **daisyUI v5** for semantic, themeable components. Every component is reactive by nature, automatically responding to signal changes without manual DOM updates.
|
|
||||||
|
|
||||||
## Table of Contents
|
|
||||||
|
|
||||||
1. [Installation & Setup](#installation--setup)
|
|
||||||
2. [Core Concepts](#core-concepts)
|
|
||||||
3. [Form Components](#form-components)
|
|
||||||
4. [Action Components](#action-components)
|
|
||||||
5. [Layout Components](#layout-components)
|
|
||||||
6. [Navigation Components](#navigation-components)
|
|
||||||
7. [Feedback Components](#feedback-components)
|
|
||||||
8. [Container Components](#container-components)
|
|
||||||
9. [Complete Examples](#complete-examples)
|
|
||||||
10. [Styling Guide](#styling-guide)
|
|
||||||
11. [Best Practices](#best-practices)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Installation & Setup
|
|
||||||
|
|
||||||
### Step 1: Install Dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install -D tailwindcss @tailwindcss/vite daisyui@next
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2: Configure Tailwind CSS v4
|
|
||||||
|
|
||||||
Create `src/app.css`:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* src/app.css */
|
|
||||||
@import "tailwindcss";
|
|
||||||
@plugin "daisyui";
|
|
||||||
|
|
||||||
/* Optional: Custom themes */
|
|
||||||
@theme {
|
|
||||||
--color-primary: oklch(0.65 0.2 250);
|
|
||||||
--color-secondary: oklch(0.7 0.15 150);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode support */
|
|
||||||
@custom-variant dark (&:where(.dark, [data-theme="dark"], [data-theme="dark"] *)));
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 3: Initialize in Your Entry Point
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// main.js
|
|
||||||
import './app.css';
|
|
||||||
import { $ } from 'sigpro';
|
|
||||||
import { UI } from 'sigpro/plugins';
|
|
||||||
|
|
||||||
// Load the UI plugin - makes all _components globally available
|
|
||||||
$.plugin(UI).then(() => {
|
|
||||||
// All UI components are now registered
|
|
||||||
import('./App.js').then(app => $.mount(app.default));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Core Concepts
|
|
||||||
|
|
||||||
### Reactive Props
|
|
||||||
|
|
||||||
All UI components accept reactive props using the `$` prefix. When you pass a signal, the component automatically updates:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $username = $('John');
|
|
||||||
const $error = $(null);
|
|
||||||
|
|
||||||
// Reactive input with two-way binding
|
|
||||||
_input({
|
|
||||||
$value: $username, // Auto-updates when signal changes
|
|
||||||
$error: $error // Shows error message when signal has value
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### The `parseClass` Helper
|
|
||||||
|
|
||||||
All components intelligently merge base classes with user-provided classes, supporting both static strings and reactive functions:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Static class merging
|
|
||||||
_button({ class: 'btn-primary' }, 'Click me')
|
|
||||||
// Result: class="btn btn-primary"
|
|
||||||
|
|
||||||
// Reactive classes
|
|
||||||
const $theme = $('btn-primary');
|
|
||||||
_button({ class: () => $theme() }, 'Dynamic Button')
|
|
||||||
// Updates when $theme changes
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Form Components
|
|
||||||
|
|
||||||
### `_input` - Smart Input Field
|
|
||||||
|
|
||||||
A complete input wrapper with label, tooltip, error handling, and two-way binding.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `label` | `string` | Field label text |
|
|
||||||
| `tip` | `string` | Tooltip text shown on hover of a "?" badge |
|
|
||||||
| `$value` | `signal` | Two-way bound value signal |
|
|
||||||
| `$error` | `signal` | Error message signal (shows red border + message) |
|
|
||||||
| `type` | `string` | Input type: 'text', 'email', 'password', etc. |
|
|
||||||
| `placeholder` | `string` | Placeholder text |
|
|
||||||
| `class` | `string\|function` | Additional CSS classes |
|
|
||||||
|
|
||||||
**Examples:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Basic usage
|
|
||||||
const $email = $('');
|
|
||||||
_input({
|
|
||||||
label: 'Email Address',
|
|
||||||
type: 'email',
|
|
||||||
placeholder: 'user@example.com',
|
|
||||||
$value: $email
|
|
||||||
})
|
|
||||||
|
|
||||||
// With validation
|
|
||||||
const $password = $('');
|
|
||||||
const $passwordError = $(null);
|
|
||||||
|
|
||||||
_input({
|
|
||||||
label: 'Password',
|
|
||||||
type: 'password',
|
|
||||||
$value: $password,
|
|
||||||
$error: $passwordError,
|
|
||||||
oninput: (e) => {
|
|
||||||
if (e.target.value.length < 6) {
|
|
||||||
$passwordError('Password must be at least 6 characters');
|
|
||||||
} else {
|
|
||||||
$passwordError(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_select` - Dropdown Selector
|
|
||||||
|
|
||||||
Reactive select component with options array.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `label` | `string` | Field label |
|
|
||||||
| `options` | `Array<{value: any, label: string}>` | Select options |
|
|
||||||
| `$value` | `signal` | Two-way bound selected value |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $role = $('user');
|
|
||||||
const roles = [
|
|
||||||
{ value: 'admin', label: 'Administrator' },
|
|
||||||
{ value: 'user', label: 'Standard User' },
|
|
||||||
{ value: 'guest', label: 'Guest' }
|
|
||||||
];
|
|
||||||
|
|
||||||
_select({
|
|
||||||
label: 'User Role',
|
|
||||||
options: roles,
|
|
||||||
$value: $role
|
|
||||||
})
|
|
||||||
|
|
||||||
// Reactive selection
|
|
||||||
console.log($role()); // 'user'
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_checkbox` - Toggle Checkbox
|
|
||||||
|
|
||||||
Styled checkbox with label support.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `label` | `string` | Checkbox label text |
|
|
||||||
| `$value` | `signal` | Boolean signal for checked state |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $remember = $(true);
|
|
||||||
|
|
||||||
_checkbox({
|
|
||||||
label: 'Remember me',
|
|
||||||
$value: $remember
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_radio` - Radio Button Group
|
|
||||||
|
|
||||||
Radio button with group value binding.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `label` | `string` | Radio option label |
|
|
||||||
| `value` | `any` | Value for this radio option |
|
|
||||||
| `$value` | `signal` | Group signal holding selected value |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $paymentMethod = $('credit');
|
|
||||||
|
|
||||||
['credit', 'paypal', 'crypto'].forEach(method => {
|
|
||||||
_radio({
|
|
||||||
name: 'payment',
|
|
||||||
label: method.toUpperCase(),
|
|
||||||
value: method,
|
|
||||||
$value: $paymentMethod
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// Selected: $paymentMethod() === 'credit'
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_range` - Slider Control
|
|
||||||
|
|
||||||
Reactive range slider with optional label.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `label` | `string` | Slider label |
|
|
||||||
| `min` | `number` | Minimum value |
|
|
||||||
| `max` | `number` | Maximum value |
|
|
||||||
| `step` | `number` | Step increment |
|
|
||||||
| `$value` | `signal` | Current value signal |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $volume = $(50);
|
|
||||||
|
|
||||||
_range({
|
|
||||||
label: 'Volume',
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
step: 1,
|
|
||||||
$value: $volume
|
|
||||||
})
|
|
||||||
|
|
||||||
// Display current value
|
|
||||||
span(() => `Volume: ${$volume()}%`)
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Action Components
|
|
||||||
|
|
||||||
### `_button` - Smart Action Button
|
|
||||||
|
|
||||||
Feature-rich button with loading states, icons, and badges.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `$loading` | `signal` | Shows spinner + disables when true |
|
|
||||||
| `$disabled` | `signal` | Manual disabled state |
|
|
||||||
| `icon` | `string\|HTMLElement` | Icon element or emoji/unicode |
|
|
||||||
| `badge` | `string` | Badge text to display |
|
|
||||||
| `badgeClass` | `string` | Additional badge styling |
|
|
||||||
| `type` | `string` | Button type: 'button', 'submit', etc. |
|
|
||||||
| `onclick` | `function` | Click handler |
|
|
||||||
|
|
||||||
**Examples:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Basic button
|
|
||||||
_button({ onclick: () => alert('Clicked!') }, 'Click Me')
|
|
||||||
|
|
||||||
// Loading state
|
|
||||||
const $saving = $(false);
|
|
||||||
_button({
|
|
||||||
$loading: $saving,
|
|
||||||
icon: '💾',
|
|
||||||
onclick: async () => {
|
|
||||||
$saving(true);
|
|
||||||
await saveData();
|
|
||||||
$saving(false);
|
|
||||||
}
|
|
||||||
}, 'Save Changes')
|
|
||||||
|
|
||||||
// With badge notification
|
|
||||||
_button({
|
|
||||||
badge: '3',
|
|
||||||
badgeClass: 'badge-secondary',
|
|
||||||
icon: '🔔'
|
|
||||||
}, 'Notifications')
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Layout Components
|
|
||||||
|
|
||||||
### `_fieldset` - Form Section Group
|
|
||||||
|
|
||||||
Groups related form fields with a legend.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `legend` | `string` | Fieldset title |
|
|
||||||
| `class` | `string\|function` | Additional classes |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
_fieldset({ legend: 'Personal Information' }, [
|
|
||||||
_input({ label: 'First Name', $value: $firstName }),
|
|
||||||
_input({ label: 'Last Name', $value: $lastName }),
|
|
||||||
_input({ label: 'Email', type: 'email', $value: $email })
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_accordion` - Collapsible Section
|
|
||||||
|
|
||||||
Expandable/collapsible content panel.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `title` | `string` | Accordion header text |
|
|
||||||
| `name` | `string` | Optional group name (radio behavior) |
|
|
||||||
| `open` | `boolean` | Initially open state |
|
|
||||||
|
|
||||||
**Examples:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Single accordion (checkbox behavior)
|
|
||||||
_accordion({ title: 'Frequently Asked Questions' }, [
|
|
||||||
p('This is the collapsible content...')
|
|
||||||
])
|
|
||||||
|
|
||||||
// Grouped accordions (radio behavior - only one open)
|
|
||||||
_accordion({ title: 'Section 1', name: 'faq' }, [
|
|
||||||
p('Content for section 1')
|
|
||||||
]),
|
|
||||||
_accordion({ title: 'Section 2', name: 'faq' }, [
|
|
||||||
p('Content for section 2')
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_drawer` - Sidebar Drawer
|
|
||||||
|
|
||||||
Responsive drawer component that can be toggled programmatically.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `id` | `string` | Unique ID for checkbox toggle |
|
|
||||||
| `$open` | `signal` | Boolean signal for drawer state |
|
|
||||||
| `content` | `HTMLElement` | Main content area |
|
|
||||||
| `side` | `HTMLElement` | Sidebar content |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $drawerOpen = $(false);
|
|
||||||
|
|
||||||
_drawer({
|
|
||||||
id: 'main-drawer',
|
|
||||||
$open: $drawerOpen,
|
|
||||||
content: [
|
|
||||||
_button({ onclick: () => $drawerOpen(true) }, 'Open Menu'),
|
|
||||||
div('Main content goes here')
|
|
||||||
],
|
|
||||||
side: [
|
|
||||||
_menu({ items: [
|
|
||||||
{ label: 'Home', onclick: () => $drawerOpen(false) },
|
|
||||||
{ label: 'Settings', onclick: () => $drawerOpen(false) }
|
|
||||||
]})
|
|
||||||
]
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Navigation Components
|
|
||||||
|
|
||||||
### `_navbar` - Application Header
|
|
||||||
|
|
||||||
Responsive navigation bar with built-in styling.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `class` | `string\|function` | Additional classes |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
_navbar([
|
|
||||||
div({ class: 'flex-1' }, [
|
|
||||||
a({ class: 'text-xl font-bold' }, 'MyApp')
|
|
||||||
]),
|
|
||||||
div({ class: 'flex-none' }, [
|
|
||||||
_button({ class: 'btn-ghost btn-sm' }, 'Login'),
|
|
||||||
_button({ class: 'btn-primary btn-sm' }, 'Sign Up')
|
|
||||||
])
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_menu` - Vertical Navigation
|
|
||||||
|
|
||||||
Sidebar or dropdown menu with active state support.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `items` | `Array<{label: string, icon?: any, active?: boolean\|function, onclick: function}>` | Menu items |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $currentPage = $('home');
|
|
||||||
|
|
||||||
_menu({ items: [
|
|
||||||
{
|
|
||||||
label: 'Dashboard',
|
|
||||||
icon: '📊',
|
|
||||||
active: () => $currentPage() === 'dashboard',
|
|
||||||
onclick: () => $currentPage('dashboard')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Profile',
|
|
||||||
icon: '👤',
|
|
||||||
active: () => $currentPage() === 'profile',
|
|
||||||
onclick: () => $currentPage('profile')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
icon: '⚙️',
|
|
||||||
active: () => $currentPage() === 'settings',
|
|
||||||
onclick: () => $currentPage('settings')
|
|
||||||
}
|
|
||||||
]})
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_tabs` - Tab Navigation
|
|
||||||
|
|
||||||
Horizontal tabs with lifted styling.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `items` | `Array<{label: string, active: boolean\|function, onclick: function}>` | Tab items |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $activeTab = $('profile');
|
|
||||||
|
|
||||||
_tabs({ items: [
|
|
||||||
{
|
|
||||||
label: 'Profile',
|
|
||||||
active: () => $activeTab() === 'profile',
|
|
||||||
onclick: () => $activeTab('profile')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
active: () => $activeTab() === 'settings',
|
|
||||||
onclick: () => $activeTab('settings')
|
|
||||||
}
|
|
||||||
]})
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Feedback Components
|
|
||||||
|
|
||||||
### `_badge` - Status Indicator
|
|
||||||
|
|
||||||
Small badge for counts, statuses, or labels.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `class` | `string\|function` | Badge style (badge-primary, badge-success, etc.) |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
_badge({ class: 'badge-success' }, 'Active')
|
|
||||||
_badge({ class: 'badge-error' }, '3 Errors')
|
|
||||||
_badge({ class: 'badge-warning' }, 'Pending')
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_tooltip` - Hover Information
|
|
||||||
|
|
||||||
Wrapper that shows tooltip text on hover.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `tip` | `string` | Tooltip text |
|
|
||||||
| `position` | `string` | Tooltip position (top, bottom, left, right) |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
_tooltip({ tip: 'Click to save changes', class: 'tooltip-primary' }, [
|
|
||||||
_button({}, 'Save')
|
|
||||||
])
|
|
||||||
|
|
||||||
_tooltip({ tip: 'Your email will not be shared', class: 'tooltip-bottom' }, [
|
|
||||||
span('ⓘ')
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Container Components
|
|
||||||
|
|
||||||
### `_modal` - Dialog Window
|
|
||||||
|
|
||||||
Programmatically controlled modal dialog.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `$open` | `signal` | Boolean signal controlling visibility |
|
|
||||||
| `title` | `string` | Modal title |
|
|
||||||
| `class` | `string\|function` | Additional styling |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $showModal = $(false);
|
|
||||||
|
|
||||||
_modal({
|
|
||||||
$open: $showModal,
|
|
||||||
title: 'Confirm Action'
|
|
||||||
}, [
|
|
||||||
p('Are you sure you want to delete this item?'),
|
|
||||||
div({ class: 'flex gap-2 justify-end mt-4' }, [
|
|
||||||
_button({ onclick: () => $showModal(false) }, 'Cancel'),
|
|
||||||
_button({
|
|
||||||
class: 'btn-error',
|
|
||||||
onclick: () => {
|
|
||||||
deleteItem();
|
|
||||||
$showModal(false);
|
|
||||||
}
|
|
||||||
}, 'Delete')
|
|
||||||
])
|
|
||||||
])
|
|
||||||
|
|
||||||
// Trigger modal
|
|
||||||
_button({ onclick: () => $showModal(true) }, 'Delete Item')
|
|
||||||
```
|
|
||||||
|
|
||||||
### `_dropdown` - Context Menu
|
|
||||||
|
|
||||||
Dropdown menu that appears on click.
|
|
||||||
|
|
||||||
**Properties:**
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `label` | `string` | Dropdown trigger text |
|
|
||||||
| `class` | `string\|function` | Additional classes |
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
_dropdown({ label: 'Options' }, [
|
|
||||||
li([a({ onclick: () => edit() }, 'Edit')]),
|
|
||||||
li([a({ onclick: () => duplicate() }, 'Duplicate')]),
|
|
||||||
li([a({ class: 'text-error', onclick: () => delete() }, 'Delete')])
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Complete Examples
|
|
||||||
|
|
||||||
### Example 1: User Registration Form
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Signals
|
|
||||||
const $username = $('');
|
|
||||||
const $email = $('');
|
|
||||||
const $password = $('');
|
|
||||||
const $terms = $(false);
|
|
||||||
const $loading = $(false);
|
|
||||||
|
|
||||||
// Validation signals
|
|
||||||
const $usernameError = $(null);
|
|
||||||
const $emailError = $(null);
|
|
||||||
const $passwordError = $(null);
|
|
||||||
|
|
||||||
// Form submission
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
$loading(true);
|
|
||||||
|
|
||||||
// Validate
|
|
||||||
if ($username().length < 3) $usernameError('Username too short');
|
|
||||||
if (!$email().includes('@')) $emailError('Invalid email');
|
|
||||||
if ($password().length < 6) $passwordError('Password too short');
|
|
||||||
if (!$terms()) alert('Accept terms');
|
|
||||||
|
|
||||||
if (!$usernameError() && !$emailError() && !$passwordError()) {
|
|
||||||
await api.register({
|
|
||||||
username: $username(),
|
|
||||||
email: $email(),
|
|
||||||
password: $password()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$loading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Component
|
|
||||||
div({ class: 'max-w-md mx-auto p-6' }, [
|
|
||||||
_fieldset({ legend: 'Create Account' }, [
|
|
||||||
_input({
|
|
||||||
label: 'Username',
|
|
||||||
$value: $username,
|
|
||||||
$error: $usernameError,
|
|
||||||
placeholder: 'johndoe'
|
|
||||||
}),
|
|
||||||
_input({
|
|
||||||
label: 'Email',
|
|
||||||
type: 'email',
|
|
||||||
$value: $email,
|
|
||||||
$error: $emailError,
|
|
||||||
placeholder: 'john@example.com'
|
|
||||||
}),
|
|
||||||
_input({
|
|
||||||
label: 'Password',
|
|
||||||
type: 'password',
|
|
||||||
$value: $password,
|
|
||||||
$error: $passwordError
|
|
||||||
}),
|
|
||||||
_checkbox({
|
|
||||||
label: 'I agree to the Terms of Service',
|
|
||||||
$value: $terms
|
|
||||||
}),
|
|
||||||
_button({
|
|
||||||
$loading: $loading,
|
|
||||||
class: 'btn-primary w-full mt-4',
|
|
||||||
onclick: handleSubmit
|
|
||||||
}, 'Sign Up')
|
|
||||||
])
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 2: Dashboard with Router Integration
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// App.js
|
|
||||||
export default () => {
|
|
||||||
const $activeRoute = $('dashboard');
|
|
||||||
|
|
||||||
return div({ class: 'min-h-screen' }, [
|
|
||||||
_navbar([
|
|
||||||
div({ class: 'flex-1' }, [
|
|
||||||
a({ class: 'text-xl font-bold' }, 'Dashboard')
|
|
||||||
]),
|
|
||||||
_button({
|
|
||||||
class: 'btn-ghost btn-circle',
|
|
||||||
onclick: () => $.router.go('/settings')
|
|
||||||
}, '⚙️')
|
|
||||||
]),
|
|
||||||
div({ class: 'flex' }, [
|
|
||||||
// Sidebar
|
|
||||||
div({ class: 'w-64 p-4' }, [
|
|
||||||
_menu({ items: [
|
|
||||||
{
|
|
||||||
label: 'Dashboard',
|
|
||||||
icon: '📊',
|
|
||||||
active: () => $activeRoute() === 'dashboard',
|
|
||||||
onclick: () => {
|
|
||||||
$activeRoute('dashboard');
|
|
||||||
$.router.go('/');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Analytics',
|
|
||||||
icon: '📈',
|
|
||||||
active: () => $activeRoute() === 'analytics',
|
|
||||||
onclick: () => {
|
|
||||||
$activeRoute('analytics');
|
|
||||||
$.router.go('/analytics');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
icon: '⚙️',
|
|
||||||
active: () => $activeRoute() === 'settings',
|
|
||||||
onclick: () => {
|
|
||||||
$activeRoute('settings');
|
|
||||||
$.router.go('/settings');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]})
|
|
||||||
]),
|
|
||||||
|
|
||||||
// Main content
|
|
||||||
div({ class: 'flex-1 p-6' }, [
|
|
||||||
$.router([
|
|
||||||
{ path: '/', component: () => DashboardComponent() },
|
|
||||||
{ path: '/analytics', component: () => AnalyticsComponent() },
|
|
||||||
{ path: '/settings', component: () => SettingsComponent() }
|
|
||||||
])
|
|
||||||
])
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 3: E-commerce Product Card
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const ProductCard = ({ product }) => {
|
|
||||||
const $quantity = $(1);
|
|
||||||
const $inCart = $(false);
|
|
||||||
|
|
||||||
return div({ class: 'card bg-base-100 shadow-xl' }, [
|
|
||||||
figure([img({ src: product.image, alt: product.name })]),
|
|
||||||
div({ class: 'card-body' }, [
|
|
||||||
h2({ class: 'card-title' }, product.name),
|
|
||||||
p(product.description),
|
|
||||||
div({ class: 'flex justify-between items-center mt-4' }, [
|
|
||||||
span({ class: 'text-2xl font-bold' }, `$${product.price}`),
|
|
||||||
div({ class: 'flex gap-2' }, [
|
|
||||||
_range({
|
|
||||||
min: 1,
|
|
||||||
max: 10,
|
|
||||||
$value: $quantity,
|
|
||||||
class: 'w-32'
|
|
||||||
}),
|
|
||||||
_button({
|
|
||||||
$loading: $inCart,
|
|
||||||
class: 'btn-primary',
|
|
||||||
onclick: async () => {
|
|
||||||
$inCart(true);
|
|
||||||
await addToCart(product.id, $quantity());
|
|
||||||
$inCart(false);
|
|
||||||
}
|
|
||||||
}, 'Add to Cart')
|
|
||||||
])
|
|
||||||
])
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Styling Guide
|
|
||||||
|
|
||||||
### Theme Configuration
|
|
||||||
|
|
||||||
DaisyUI v5 supports extensive theming. Configure in `tailwind.config.js` or CSS:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* app.css */
|
|
||||||
@import "tailwindcss";
|
|
||||||
@plugin "daisyui";
|
|
||||||
|
|
||||||
/* Custom theme */
|
|
||||||
[data-theme="corporate"] {
|
|
||||||
--color-primary: oklch(0.6 0.2 250);
|
|
||||||
--color-secondary: oklch(0.7 0.15 150);
|
|
||||||
--color-accent: oklch(0.8 0.1 50);
|
|
||||||
--color-neutral: oklch(0.3 0.01 260);
|
|
||||||
--color-base-100: oklch(0.98 0.01 260);
|
|
||||||
--color-info: oklch(0.65 0.2 220);
|
|
||||||
--color-success: oklch(0.65 0.2 140);
|
|
||||||
--color-warning: oklch(0.7 0.2 85);
|
|
||||||
--color-error: oklch(0.65 0.25 25);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Component Modifiers
|
|
||||||
|
|
||||||
Each component accepts Tailwind/daisyUI classes:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Button variants
|
|
||||||
_button({ class: 'btn-primary' }, 'Primary')
|
|
||||||
_button({ class: 'btn-secondary' }, 'Secondary')
|
|
||||||
_button({ class: 'btn-accent' }, 'Accent')
|
|
||||||
_button({ class: 'btn-outline' }, 'Outline')
|
|
||||||
_button({ class: 'btn-ghost' }, 'Ghost')
|
|
||||||
_button({ class: 'btn-sm' }, 'Small')
|
|
||||||
_button({ class: 'btn-lg' }, 'Large')
|
|
||||||
_button({ class: 'btn-block' }, 'Full Width')
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Best Practices
|
|
||||||
|
|
||||||
### 1. Reactive Performance
|
|
||||||
Always use signals for values that change, not direct variable assignments:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// ❌ Bad
|
|
||||||
let name = 'John';
|
|
||||||
_input({ $value: () => name }); // Won't update
|
|
||||||
|
|
||||||
// ✅ Good
|
|
||||||
const $name = $('John');
|
|
||||||
_input({ $value: $name });
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Error Handling
|
|
||||||
Use `$error` signals with validation:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $error = $(null);
|
|
||||||
|
|
||||||
_input({
|
|
||||||
$error: $error,
|
|
||||||
onchange: (e) => {
|
|
||||||
if (!validate(e.target.value)) {
|
|
||||||
$error('Invalid input');
|
|
||||||
} else {
|
|
||||||
$error(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Modal Management
|
|
||||||
Keep modals conditionally rendered based on `$open`:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Modal only exists in DOM when open
|
|
||||||
_modal({ $open: $showModal }, content)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Form Submissions
|
|
||||||
Combine loading states with error handling:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const $loading = $(false);
|
|
||||||
const $error = $(null);
|
|
||||||
|
|
||||||
_button({
|
|
||||||
$loading: $loading,
|
|
||||||
onclick: async () => {
|
|
||||||
$loading(true);
|
|
||||||
try {
|
|
||||||
await submit();
|
|
||||||
$error(null);
|
|
||||||
} catch (err) {
|
|
||||||
$error(err.message);
|
|
||||||
}
|
|
||||||
$loading(false);
|
|
||||||
}
|
|
||||||
}, 'Submit')
|
|
||||||
```
|
|
||||||
|
|
||||||
### 5. Component Composition
|
|
||||||
Build reusable components by combining UI primitives:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const FormField = ({ label, $value, type = 'text' }) => {
|
|
||||||
return _fieldset({ legend: label }, [
|
|
||||||
_input({ type, $value, class: 'w-full' })
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Usage
|
|
||||||
FormField({ label: 'Email', $value: $email });
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## API Reference
|
|
||||||
|
|
||||||
All components are globally available after plugin initialization:
|
|
||||||
|
|
||||||
| Component | Function Signature |
|
|
||||||
|-----------|-------------------|
|
|
||||||
| `_button` | `(props, children) => HTMLElement` |
|
|
||||||
| `_input` | `(props) => HTMLElement` |
|
|
||||||
| `_select` | `(props) => HTMLElement` |
|
|
||||||
| `_checkbox` | `(props) => HTMLElement` |
|
|
||||||
| `_radio` | `(props) => HTMLElement` |
|
|
||||||
| `_range` | `(props) => HTMLElement` |
|
|
||||||
| `_fieldset` | `(props, children) => HTMLElement` |
|
|
||||||
| `_accordion` | `(props, children) => HTMLElement` |
|
|
||||||
| `_modal` | `(props, children) => HTMLElement` |
|
|
||||||
| `_drawer` | `(props) => HTMLElement` |
|
|
||||||
| `_navbar` | `(props, children) => HTMLElement` |
|
|
||||||
| `_menu` | `(props) => HTMLElement` |
|
|
||||||
| `_tabs` | `(props) => HTMLElement` |
|
|
||||||
| `_badge` | `(props, children) => HTMLElement` |
|
|
||||||
| `_tooltip` | `(props, children) => HTMLElement` |
|
|
||||||
| `_dropdown` | `(props, children) => HTMLElement` |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
### Styles Not Applying
|
|
||||||
Ensure Tailwind CSS is properly configured and imported before your app code:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import './app.css'; // Must be first
|
|
||||||
import { $ } from 'sigpro';
|
|
||||||
```
|
|
||||||
|
|
||||||
### Components Not Found
|
|
||||||
Verify plugin is loaded before using components:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
$.plugin(UI).then(() => {
|
|
||||||
// Components are ready
|
|
||||||
$.mount(App);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Reactive Updates Not Working
|
|
||||||
Ensure you're using signals, not primitive values:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Wrong
|
|
||||||
let count = 0;
|
|
||||||
_button({}, () => count)
|
|
||||||
|
|
||||||
// Correct
|
|
||||||
const $count = $(0);
|
|
||||||
_button({}, () => $count())
|
|
||||||
```
|
|
||||||
@@ -95,29 +95,3 @@ $.plugin(ConfigLoader).then(() => {
|
|||||||
| **Encapsulation** | Use the `$` instance passed as an argument rather than importing it again inside the plugin. |
|
| **Encapsulation** | Use the `$` instance passed as an argument rather than importing it again inside the plugin. |
|
||||||
| **Reactivity** | Always use `$(...)` for internal state so the app stays reactive. |
|
| **Reactivity** | Always use `$(...)` for internal state so the app stays reactive. |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Installation
|
|
||||||
|
|
||||||
Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
```bash [NPM]
|
|
||||||
npm install sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [PNPM]
|
|
||||||
pnpm add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Yarn]
|
|
||||||
yarn add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Bun]
|
|
||||||
bun add sigpro
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
|
|||||||
@@ -33,11 +33,11 @@ This is the standard way to build apps. It's clean, readable, and supports stand
|
|||||||
```javascript
|
```javascript
|
||||||
// main.js
|
// main.js
|
||||||
import { $ } from 'sigpro';
|
import { $ } from 'sigpro';
|
||||||
import { UI } from 'sigpro/plugins';
|
import { Fetch } from 'sigpro/plugins';
|
||||||
import App from './App.js'; // Static import works perfectly!
|
import App from './App.js'; // Static import works perfectly!
|
||||||
|
|
||||||
// 1. Register plugins
|
// 1. Register plugins
|
||||||
$.plugin(UI);
|
$.plugin(Fetch);
|
||||||
|
|
||||||
// 2. Mount your app directly
|
// 2. Mount your app directly
|
||||||
$.mount(App, '#app');
|
$.mount(App, '#app');
|
||||||
|
|||||||
@@ -114,24 +114,3 @@ export const routes = [
|
|||||||
|
|
||||||
Because it uses dynamic `import()`, Vite automatically performs **Code Splitting**, meaning each page is its own small JS file that only loads when the user navigates to it.
|
Because it uses dynamic `import()`, Vite automatically performs **Code Splitting**, meaning each page is its own small JS file that only loads when the user navigates to it.
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Installation
|
|
||||||
|
|
||||||
::: code-group
|
|
||||||
```bash [NPM]
|
|
||||||
npm install sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [PNPM]
|
|
||||||
pnpm add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Yarn]
|
|
||||||
yarn add sigpro
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash [Bun]
|
|
||||||
bun add sigpro
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|||||||
Reference in New Issue
Block a user