Update docs
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -45,7 +45,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Logs: Theme updated to: dark</span></span></code></pre></div><hr><h2 id="_5-summary-table-usage-guide" tabindex="-1">5. Summary Table: Usage Guide <a class="header-anchor" href="#_5-summary-table-usage-guide" aria-label="Permalink to "5. Summary Table: Usage Guide""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Primitive</th><th style="text-align:left;">Logic Type</th><th style="text-align:left;">Returns Value?</th><th style="text-align:left;">Typical Use Case</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Signal</strong></td><td style="text-align:left;">Static</td><td style="text-align:left;">Yes (Mutable)</td><td style="text-align:left;"><code>const $user = $("Guest")</code></td></tr><tr><td style="text-align:left;"><strong>Computed</strong></td><td style="text-align:left;">Read-only</td><td style="text-align:left;">Yes (Automatic)</td><td style="text-align:left;"><code>const $isLoggedIn = $(() => $user() !== "Guest")</code></td></tr><tr><td style="text-align:left;"><strong>Effect</strong></td><td style="text-align:left;">Imperative</td><td style="text-align:left;">No</td><td style="text-align:left;"><code>$(() => localStorage.setItem('user', $user()))</code></td></tr></tbody></table><hr><h2 id="💡-pro-tip-naming-convention" tabindex="-1">💡 Pro Tip: Naming Convention <a class="header-anchor" href="#💡-pro-tip-naming-convention" aria-label="Permalink to "💡 Pro Tip: Naming Convention""></a></h2><p>In SigPro, we use the <strong><code>$</code> prefix</strong> (e.g., <code>$count</code>) for variables that hold a reactive function. This makes it easy to distinguish between a standard variable and a reactive one at a glance:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Static</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Reactive (Function)</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/quick.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Quick Start</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/html.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$.html</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -40,7 +40,7 @@
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"High Score!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Keep going..."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="the-guillotine-performance-tip" tabindex="-1">The "Guillotine" (Performance Tip) <a class="header-anchor" href="#the-guillotine-performance-tip" aria-label="Permalink to "The "Guillotine" (Performance Tip)""></a></h3><p>When a reactive function in the content returns a <strong>new Node</strong>, SigPro uses <code>replaceWith()</code> to swap the old node for the new one. This ensures that:</p><ol><li>The update is nearly instantaneous.</li><li>The old node is correctly garbage-collected.</li></ol><hr><h2 id="_6-summary-content-types" tabindex="-1">6. Summary: Content Types <a class="header-anchor" href="#_6-summary-content-types" aria-label="Permalink to "6. Summary: Content Types""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Input</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>String / Number</strong></td><td style="text-align:left;">Appended as a TextNode.</td></tr><tr><td style="text-align:left;"><strong>HTMLElement</strong></td><td style="text-align:left;">Appended directly to the parent.</td></tr><tr><td style="text-align:left;"><strong>Array</strong></td><td style="text-align:left;">Each item is processed and appended in order.</td></tr><tr><td style="text-align:left;"><strong>Function <code>() => ...</code></strong></td><td style="text-align:left;">Creates a <strong>live reactive zone</strong> that updates automatically.</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/$.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/mount.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$.mount</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -46,7 +46,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myNode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'div'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Local Widget'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myNode, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#widget-target'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h3 id="summary-cheat-sheet" tabindex="-1">Summary Cheat Sheet <a class="header-anchor" href="#summary-cheat-sheet" aria-label="Permalink to "Summary Cheat Sheet""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to ID</strong></td><td style="text-align:left;"><code>$.mount(App, '#id')</code></td></tr><tr><td style="text-align:left;"><strong>Mount to Element</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Reactive Widget</strong></td><td style="text-align:left;"><code>$.mount(() => div("Hi"), '#widget')</code></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/html.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.html</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/tags.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Tags</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -25,7 +25,7 @@
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Ok"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="_4-mounting-plugins" tabindex="-1">4. Mounting & Plugins <a class="header-anchor" href="#_4-mounting-plugins" aria-label="Permalink to "4. Mounting & Plugins""></a></h2><p>Methods to initialize your application and extend the engine.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Method</th><th style="text-align:left;">Signature</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>$.mount</code></strong></td><td style="text-align:left;"><code>(node, target)</code></td><td style="text-align:left;">Wipes the target (default: <code>body</code>) and renders the component.</td></tr><tr><td style="text-align:left;"><strong><code>$.plugin</code></strong></td><td style="text-align:left;"><code>(source)</code></td><td style="text-align:left;">Registers a function or loads external <code>.js</code> scripts as plugins.</td></tr></tbody></table><p><strong>Example:</strong></p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, Router]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#root'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-reactive-syntax-cheat-sheet" tabindex="-1">5. Reactive Syntax Cheat Sheet <a class="header-anchor" href="#_5-reactive-syntax-cheat-sheet" aria-label="Permalink to "5. Reactive Syntax Cheat Sheet""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Syntax</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Text Binding</strong></td><td style="text-align:left;"><code>p(["Value: ", $sig])</code></td><td style="text-align:left;">Updates text content automatically.</td></tr><tr><td style="text-align:left;"><strong>Attributes</strong></td><td style="text-align:left;"><code>div({ id: $sig })</code></td><td style="text-align:left;">Static attribute assignment.</td></tr><tr><td style="text-align:left;"><strong>Reactive Attr</strong></td><td style="text-align:left;"><code>div({ $class: $sig })</code></td><td style="text-align:left;">Attribute updates when <code>$sig</code> changes.</td></tr><tr><td style="text-align:left;"><strong>Two-way Binding</strong></td><td style="text-align:left;"><code>input({ $value: $sig })</code></td><td style="text-align:left;">Syncs input value and signal automatically.</td></tr><tr><td style="text-align:left;"><strong>Conditional</strong></td><td style="text-align:left;"><code>div(() => $sig() > 0 ? "Yes" : "No")</code></td><td style="text-align:left;">Re-renders only the content when the condition changes.</td></tr></tbody></table><hr><h2 id="summary-table" tabindex="-1">Summary Table <a class="header-anchor" href="#summary-table" aria-label="Permalink to "Summary Table""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">SigPro Approach</th><th style="text-align:left;">Benefit</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Update Logic</strong></td><td style="text-align:left;">Fine-grained (Surgical)</td><td style="text-align:left;">Blazing fast updates.</td></tr><tr><td style="text-align:left;"><strong>DOM</strong></td><td style="text-align:left;">Native Nodes</td><td style="text-align:left;">Zero abstraction cost.</td></tr><tr><td style="text-align:left;"><strong>Syntax</strong></td><td style="text-align:left;">Pure JavaScript</td><td style="text-align:left;">No build-tool lock-in.</td></tr><tr><td style="text-align:left;"><strong>Footprint</strong></td><td style="text-align:left;">Modular</td><td style="text-align:left;">Load only what you use.</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/guide/getting-started.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Guide</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/$.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>$</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/api_tags.md.33XeBTH-.lean.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/api_tags.md.bOhL_sXH.lean.js">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
@@ -41,7 +41,7 @@
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'hero'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Fast. Atomic. Simple."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Built with SigPro."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span></code></pre></div><hr><h2 id="_6-full-comparison-sigpro-vs-standard-html" tabindex="-1">6. Full Comparison: SigPro vs. Standard HTML <a class="header-anchor" href="#_6-full-comparison-sigpro-vs-standard-html" aria-label="Permalink to "6. Full Comparison: SigPro vs. Standard HTML""></a></h2><p>To better understand the translation, here is a complete example of a <strong>User Card</strong> component. Notice how <strong>SigPro</strong> attributes with the <code>$</code> prefix map to reactive behavior, while standard attributes remain static.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-cTrOE" id="tab-pVocvfy" checked><label data-title="SigPro (JS)" for="tab-pVocvfy">SigPro (JS)</label><input type="radio" name="group-cTrOE" id="tab-QTuKdwh"><label data-title="Equivalent HTML Structure" for="tab-QTuKdwh">Equivalent HTML Structure</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $online</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span 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-Z53-s" id="tab-yaQU48e" checked><label data-title="SigPro (JS)" for="tab-yaQU48e">SigPro (JS)</label><input type="radio" name="group-Z53-s" id="tab-9unLkL1"><label data-title="Equivalent HTML Structure" for="tab-9unLkL1">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>
|
||||
@@ -73,7 +73,7 @@
|
||||
<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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/mount.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.mount</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/plugins/quick.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Quick Start</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -21,7 +21,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'hero'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Fast. Atomic. Simple."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Built with SigPro."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span></code></pre></div><hr><h2 id="_6-full-comparison-sigpro-vs-standard-html" tabindex="-1">6. Full Comparison: SigPro vs. Standard HTML <a class="header-anchor" href="#_6-full-comparison-sigpro-vs-standard-html" aria-label="Permalink to "6. Full Comparison: SigPro vs. Standard HTML""></a></h2><p>To better understand the translation, here is a complete example of a <strong>User Card</strong> component. Notice how <strong>SigPro</strong> attributes with the <code>$</code> prefix map to reactive behavior, while standard attributes remain static.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-cTrOE" id="tab-pVocvfy" checked><label data-title="SigPro (JS)" for="tab-pVocvfy">SigPro (JS)</label><input type="radio" name="group-cTrOE" id="tab-QTuKdwh"><label data-title="Equivalent HTML Structure" for="tab-QTuKdwh">Equivalent HTML Structure</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $online</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span 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-Z53-s" id="tab-yaQU48e" checked><label data-title="SigPro (JS)" for="tab-yaQU48e">SigPro (JS)</label><input type="radio" name="group-Z53-s" id="tab-9unLkL1"><label data-title="Equivalent HTML Structure" for="tab-9unLkL1">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>
|
||||
@@ -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":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),e={name:"guide/getting-started.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting Started""></a></h1><p><strong>SigPro</strong> is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to "1. Installation""></a></h2><p>You can install SigPro via your favorite package manager:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-7OfYr" id="tab-azmGxBV" checked><label data-title="npm" for="tab-azmGxBV">npm</label><input type="radio" name="group-7OfYr" id="tab-0XBcK_h"><label data-title="pnpm" for="tab-0XBcK_h">pnpm</label><input type="radio" name="group-7OfYr" id="tab-F_8pQtk"><label data-title="yarn" for="tab-F_8pQtk">yarn</label><input type="radio" name="group-7OfYr" id="tab-dBoFLSk"><label data-title="bun" for="tab-dBoFLSk">bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SigPro</span></span></code></pre></div></div></div><h2 id="_2-basic-usage" tabindex="-1">2. Basic Usage <a class="header-anchor" href="#_2-basic-usage" aria-label="Permalink to "2\\. Basic Usage""></a></h2><p>The core of SigPro is the <code>$</code> function, which creates reactive state (Signals) and computed effects.</p><p>Create a <code>main.js</code> file and try this:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'SigPro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),e={name:"guide/getting-started.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting Started""></a></h1><p><strong>SigPro</strong> is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to "1. Installation""></a></h2><p>You can install SigPro via your favorite package manager:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-VdTXV" id="tab-PZ6AnPK" checked><label data-title="npm" for="tab-PZ6AnPK">npm</label><input type="radio" name="group-VdTXV" id="tab-HZjoDJ4"><label data-title="pnpm" for="tab-HZjoDJ4">pnpm</label><input type="radio" name="group-VdTXV" id="tab-wJ6TJ-Z"><label data-title="yarn" for="tab-wJ6TJ-Z">yarn</label><input type="radio" name="group-VdTXV" id="tab-rtRdT6x"><label data-title="bun" for="tab-rtRdT6x">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>
|
||||
@@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SigPro","text":"Atomic Unified Reactive Engine","tagline":"Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.","image":{"src":"/logo.png","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://git.natxocc.com/sigpro/"}]},"features":[{"title":"Atomic Reactivity","details":"Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders."},{"title":"Zero Dependencies","details":"Written in pure Vanilla JS. Maximum performance with the smallest footprint possible."},{"title":"Modular Ecosystem","details":"Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(h,i,p,r,k,o){return a(),t("div",null,[...i[0]||(i[0]=[e(`<h2 id="why-sigpro" tabindex="-1">Why SigPro? <a class="header-anchor" href="#why-sigpro" aria-label="Permalink to "Why SigPro?""></a></h2><p>SigPro isn't just another framework; it's a high-performance engine. It strips away the complexity of massive bundles and returns to the essence of the web, enhanced with reactive superpowers.</p><h3 id="the-core-in-action" tabindex="-1">The Core in Action <a class="header-anchor" href="#the-core-in-action" aria-label="Permalink to "The Core in Action""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
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://git.natxocc.com/sigpro/"}]},"features":[{"title":"Atomic Reactivity","details":"Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders."},{"title":"Zero Dependencies","details":"Written in pure Vanilla JS. Maximum performance with the smallest footprint possible."},{"title":"Modular Ecosystem","details":"Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(h,i,p,r,k,o){return a(),t("div",null,[...i[0]||(i[0]=[e(`<h2 id="why-sigpro" tabindex="-1">Why SigPro? <a class="header-anchor" href="#why-sigpro" aria-label="Permalink to "Why SigPro?""></a></h2><p>SigPro isn't just another framework; it's a high-performance engine. It strips away the complexity of massive bundles and returns to the essence of the web, enhanced with reactive superpowers.</p><h3 id="the-core-in-action" tabindex="-1">The Core in Action <a class="header-anchor" href="#the-core-in-action" aria-label="Permalink to "The Core in Action""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// A reactive state Signal</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
@@ -14,4 +14,4 @@ import{_ as s,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter);</span></span></code></pre></div><hr><h3 id="key-features" tabindex="-1">Key Features <a class="header-anchor" href="#key-features" aria-label="Permalink to "Key Features""></a></h3><h4 id="⚡️-fine-grained-reactivity" tabindex="-1">⚡️ Fine-Grained Reactivity <a class="header-anchor" href="#⚡️-fine-grained-reactivity" aria-label="Permalink to "⚡️ Fine-Grained Reactivity""></a></h4><p>Unlike frameworks that diff complex trees (V-DOM), SigPro binds your signals directly to real DOM text nodes and attributes. If the data changes, the node changes. Period.</p><h4 id="🔌-polymorphic-plugin-system" tabindex="-1">🔌 Polymorphic Plugin System <a class="header-anchor" href="#🔌-polymorphic-plugin-system" aria-label="Permalink to "🔌 Polymorphic Plugin System""></a></h4><p>Extend core capabilities in a single line. Add global UI helpers, routing, or state persistence seamlessly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI, Router } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, Router]);</span></span></code></pre></div><h4 id="📂-file-based-routing" tabindex="-1">📂 File-Based Routing <a class="header-anchor" href="#📂-file-based-routing" aria-label="Permalink to "📂 File-Based Routing""></a></h4><p>With our dedicated Vite plugin, manage your routes simply by creating files in <code>src/pages/</code>. It supports native <strong>Lazy Loading</strong> out of the box for lightning-fast initial loads.</p><hr><h3 id="quick-install" tabindex="-1">Quick Install <a class="header-anchor" href="#quick-install" aria-label="Permalink to "Quick Install""></a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-3fEVp" id="tab-dydZTrS" checked><label data-title="npm" for="tab-dydZTrS">npm</label><input type="radio" name="group-3fEVp" id="tab-yCPkQZQ"><label data-title="pnpm" for="tab-yCPkQZQ">pnpm</label><input type="radio" name="group-3fEVp" id="tab-Z0nuZ0h"><label data-title="yarn" for="tab-Z0nuZ0h">yarn</label><input type="radio" name="group-3fEVp" id="tab-kBgm0UA"><label data-title="bun" for="tab-kBgm0UA">bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="community-support" tabindex="-1">Community & Support <a class="header-anchor" href="#community-support" aria-label="Permalink to "Community & Support""></a></h2><p>SigPro is an open-source project. Whether you want to contribute, report a bug, or just talk about reactivity, join us on our official repository.</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>Built with ❤️ by NatxoCC</span></span></code></pre></div>`,20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
<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-zpxFi" id="tab-7dw1v4I" checked><label data-title="npm" for="tab-7dw1v4I">npm</label><input type="radio" name="group-zpxFi" id="tab-sxN3MpZ"><label data-title="pnpm" for="tab-sxN3MpZ">pnpm</label><input type="radio" name="group-zpxFi" id="tab-Gzsv9N8"><label data-title="yarn" for="tab-Gzsv9N8">yarn</label><input type="radio" name="group-zpxFi" id="tab-JzxVPsZ"><label data-title="bun" for="tab-JzxVPsZ">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 +1 @@
|
||||
import{_ as s,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SigPro","text":"Atomic Unified Reactive Engine","tagline":"Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.","image":{"src":"/logo.png","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://git.natxocc.com/sigpro/"}]},"features":[{"title":"Atomic Reactivity","details":"Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders."},{"title":"Zero Dependencies","details":"Written in pure Vanilla JS. Maximum performance with the smallest footprint possible."},{"title":"Modular Ecosystem","details":"Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(h,i,p,r,k,o){return a(),t("div",null,[...i[0]||(i[0]=[e("",20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
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://git.natxocc.com/sigpro/"}]},"features":[{"title":"Atomic Reactivity","details":"Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders."},{"title":"Zero Dependencies","details":"Written in pure Vanilla JS. Maximum performance with the smallest footprint possible."},{"title":"Modular Ecosystem","details":"Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(h,i,p,r,k,o){return a(),t("div",null,[...i[0]||(i[0]=[e("",20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
@@ -7,7 +7,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(plugins).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app.default));</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Sp89o" id="tab-TKkcTHw" checked><label data-title="NPM" for="tab-TKkcTHw">NPM</label><input type="radio" name="group-Sp89o" id="tab-IttJyEH"><label data-title="PNPM" for="tab-IttJyEH">PNPM</label><input type="radio" name="group-Sp89o" id="tab-CBu-sMI"><label data-title="Yarn" for="tab-CBu-sMI">Yarn</label><input type="radio" name="group-Sp89o" id="tab-GjQF4LV"><label data-title="Bun" for="tab-GjQF4LV">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>Call <code>_debug</code> anywhere in your component. It stays active in the background, watching the signal's lifecycle.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#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-xxs3V" id="tab-852cQp_" checked><label data-title="NPM" for="tab-852cQp_">NPM</label><input type="radio" name="group-xxs3V" id="tab-ccOGhl2"><label data-title="PNPM" for="tab-ccOGhl2">PNPM</label><input type="radio" name="group-xxs3V" id="tab-8ty8Y7H"><label data-title="Yarn" for="tab-8ty8Y7H">Yarn</label><input type="radio" name="group-xxs3V" id="tab-k0D2A2S"><label data-title="Bun" for="tab-k0D2A2S">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>
|
||||
@@ -24,4 +24,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:#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};
|
||||
<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 c=i(e,[["render",l]]);export{g as __pageData,c 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":"Development Tool: _debug","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.debug.md","filePath":"plugins/core.debug.md"}'),e={name:"plugins/core.debug.md"};function l(h,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",24)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Development Tool: _debug","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.debug.md","filePath":"plugins/core.debug.md"}'),e={name:"plugins/core.debug.md"};function l(h,s,p,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",24)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Storage).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app.default));</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ve29n" id="tab-r-zQL8a" checked><label data-title="NPM" for="tab-r-zQL8a">NPM</label><input type="radio" name="group-ve29n" id="tab-EpinxCs"><label data-title="PNPM" for="tab-EpinxCs">PNPM</label><input type="radio" name="group-ve29n" id="tab-68POdFk"><label data-title="Yarn" for="tab-68POdFk">Yarn</label><input type="radio" name="group-ve29n" id="tab-mjku06r"><label data-title="Bun" for="tab-mjku06r">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>You can wrap any signal with <code>_storage</code>. It is common practice to do this right after creating the signal.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#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-Y5Xjx" id="tab-Fz1Pydy" checked><label data-title="NPM" for="tab-Fz1Pydy">NPM</label><input type="radio" name="group-Y5Xjx" id="tab-8UnE3oI"><label data-title="PNPM" for="tab-8UnE3oI">PNPM</label><input type="radio" name="group-Y5Xjx" id="tab-t-H29V6"><label data-title="Yarn" for="tab-t-H29V6">Yarn</label><input type="radio" name="group-Y5Xjx" id="tab-H9UwvyJ"><label data-title="Bun" for="tab-H9UwvyJ">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>
|
||||
File diff suppressed because one or more lines are too long
@@ -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 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(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:#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>
|
||||
@@ -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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Config loaded:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $.config);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_4-best-practices-for-plugin-authors" tabindex="-1">4. Best Practices for Plugin Authors <a class="header-anchor" href="#_4-best-practices-for-plugin-authors" aria-label="Permalink to "4. Best Practices for Plugin Authors""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Rule</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Prefixing</strong></td><td style="text-align:left;">Use <code>_</code> for UI components (<code>_modal</code>) and <code>$.</code> for logic (<code>$.fetch</code>).</td></tr><tr><td style="text-align:left;"><strong>Idempotency</strong></td><td style="text-align:left;">Ensure calling <code>$.plugin(MyPlugin)</code> twice doesn't break the app.</td></tr><tr><td style="text-align:left;"><strong>Encapsulation</strong></td><td style="text-align:left;">Use the <code>$</code> instance passed as an argument rather than importing it again inside the plugin.</td></tr><tr><td style="text-align:left;"><strong>Reactivity</strong></td><td style="text-align:left;">Always use <code>$(...)</code> for internal state so the app stays reactive.</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><p>Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-BH7JQ" id="tab-QW4EYdy" checked><label data-title="NPM" for="tab-QW4EYdy">NPM</label><input type="radio" name="group-BH7JQ" id="tab-tWt-JWH"><label data-title="PNPM" for="tab-tWt-JWH">PNPM</label><input type="radio" name="group-BH7JQ" id="tab-VAxdkNa"><label data-title="Yarn" for="tab-VAxdkNa">Yarn</label><input type="radio" name="group-BH7JQ" id="tab-3QjUdhj"><label data-title="Bun" for="tab-3QjUdhj">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div>`,24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
|
||||
<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-pISzH" id="tab-9zdc_w7" checked><label data-title="NPM" for="tab-9zdc_w7">NPM</label><input type="radio" name="group-pISzH" id="tab--OGmWQY"><label data-title="PNPM" for="tab--OGmWQY">PNPM</label><input type="radio" name="group-pISzH" id="tab-fBGDci2"><label data-title="Yarn" for="tab-fBGDci2">Yarn</label><input type="radio" name="group-pISzH" id="tab-kOrV7Mt"><label data-title="Bun" for="tab-kOrV7Mt">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div>`,24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
|
||||
@@ -1 +1 @@
|
||||
import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Creating Custom Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/custom.md","filePath":"plugins/custom.md"}'),l={name:"plugins/custom.md"};function h(e,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[t("",24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
|
||||
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(p,s,e,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};
|
||||
@@ -47,4 +47,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:#6A737D;--shiki-dark:#6A737D;"> // The router only swaps the content inside this <main> tag</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes))</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-route-mapping-reference" tabindex="-1">4. Route Mapping Reference <a class="header-anchor" href="#_4-route-mapping-reference" aria-label="Permalink to "4. Route Mapping Reference""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">File Path</th><th style="text-align:left;">Generated Route</th><th style="text-align:left;">Logic</th></tr></thead><tbody><tr><td style="text-align:left;"><code>index.js</code></td><td style="text-align:left;"><code>/</code></td><td style="text-align:left;">Home page</td></tr><tr><td style="text-align:left;"><code>about.js</code></td><td style="text-align:left;"><code>/about</code></td><td style="text-align:left;">Static path</td></tr><tr><td style="text-align:left;"><code>[id].js</code></td><td style="text-align:left;"><code>/:id</code></td><td style="text-align:left;">Dynamic parameter</td></tr><tr><td style="text-align:left;"><code>blog/index.js</code></td><td style="text-align:left;"><code>/blog</code></td><td style="text-align:left;">Folder index</td></tr><tr><td style="text-align:left;"><code>_utils.js</code></td><td style="text-align:left;"><em>Ignored</em></td><td style="text-align:left;">Files starting with <code>_</code> are skipped</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-6P_e6" id="tab-qlMEoLm" checked><label data-title="NPM" for="tab-qlMEoLm">NPM</label><input type="radio" name="group-6P_e6" id="tab-nbzPVp3"><label data-title="PNPM" for="tab-nbzPVp3">PNPM</label><input type="radio" name="group-6P_e6" id="tab-csqvPLb"><label data-title="Yarn" for="tab-csqvPLb">Yarn</label><input type="radio" name="group-6P_e6" id="tab-18Y2ZQS"><label data-title="Bun" for="tab-18Y2ZQS">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div>`,24)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-route-mapping-reference" tabindex="-1">4. Route Mapping Reference <a class="header-anchor" href="#_4-route-mapping-reference" aria-label="Permalink to "4. Route Mapping Reference""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">File Path</th><th style="text-align:left;">Generated Route</th><th style="text-align:left;">Logic</th></tr></thead><tbody><tr><td style="text-align:left;"><code>index.js</code></td><td style="text-align:left;"><code>/</code></td><td style="text-align:left;">Home page</td></tr><tr><td style="text-align:left;"><code>about.js</code></td><td style="text-align:left;"><code>/about</code></td><td style="text-align:left;">Static path</td></tr><tr><td style="text-align:left;"><code>[id].js</code></td><td style="text-align:left;"><code>/:id</code></td><td style="text-align:left;">Dynamic parameter</td></tr><tr><td style="text-align:left;"><code>blog/index.js</code></td><td style="text-align:left;"><code>/blog</code></td><td style="text-align:left;">Folder index</td></tr><tr><td style="text-align:left;"><code>_utils.js</code></td><td style="text-align:left;"><em>Ignored</em></td><td style="text-align:left;">Files starting with <code>_</code> are skipped</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-mpaZd" id="tab-5EoJ7YE" checked><label data-title="NPM" for="tab-5EoJ7YE">NPM</label><input type="radio" name="group-mpaZd" id="tab-D3hJ_G9"><label data-title="PNPM" for="tab-D3hJ_G9">PNPM</label><input type="radio" name="group-mpaZd" id="tab-ufaManH"><label data-title="Yarn" for="tab-ufaManH">Yarn</label><input type="radio" name="group-mpaZd" id="tab-gioq8PP"><label data-title="Bun" for="tab-gioq8PP">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div>`,24)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||
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":"BVVMY-2O","api_html.md":"-lEpgX-Z","api_mount.md":"eGRwkZvh","api_quick.md":"Cy_XozKR","api_tags.md":"33XeBTH-","guide_getting-started.md":"D_gqopPp","guide_why.md":"lyU7T5_c","index.md":"BWH7zN4c","plugins_core.debug.md":"CVHw_PN0","plugins_core.fetch.md":"BIc8aMQh","plugins_core.router.md":"bGFltJyy","plugins_core.storage.md":"Bgu1q6YH","plugins_core.ui.md":"DDLum7rv","plugins_custom.md":"D2KGTblR","plugins_quick.md":"ODjl7edh","vite_plugin.md":"4TJA8cv0"}
|
||||
{"api__.md":"BVVMY-2O","api_html.md":"-lEpgX-Z","api_mount.md":"eGRwkZvh","api_quick.md":"Cy_XozKR","api_tags.md":"bOhL_sXH","guide_getting-started.md":"B8z9KBy5","guide_why.md":"lyU7T5_c","index.md":"CkJYagmp","plugins_core.debug.md":"C1g_y9ut","plugins_core.fetch.md":"BIc8aMQh","plugins_core.router.md":"A8Lvd23w","plugins_core.storage.md":"huXK5aOE","plugins_core.ui.md":"C_cJt9x8","plugins_custom.md":"__3E6hTB","plugins_quick.md":"ODjl7edh","vite_plugin.md":"CEmBrTGY"}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/plugins_core.debug.md.CVHw_PN0.lean.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/plugins_core.debug.md.C1g_y9ut.lean.js">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
@@ -27,7 +27,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(plugins).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app.default));</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Sp89o" id="tab-TKkcTHw" checked><label data-title="NPM" for="tab-TKkcTHw">NPM</label><input type="radio" name="group-Sp89o" id="tab-IttJyEH"><label data-title="PNPM" for="tab-IttJyEH">PNPM</label><input type="radio" name="group-Sp89o" id="tab-CBu-sMI"><label data-title="Yarn" for="tab-CBu-sMI">Yarn</label><input type="radio" name="group-Sp89o" id="tab-GjQF4LV"><label data-title="Bun" for="tab-GjQF4LV">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>Call <code>_debug</code> anywhere in your component. It stays active in the background, watching the signal's lifecycle.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#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-xxs3V" id="tab-852cQp_" checked><label data-title="NPM" for="tab-852cQp_">NPM</label><input type="radio" name="group-xxs3V" id="tab-ccOGhl2"><label data-title="PNPM" for="tab-ccOGhl2">PNPM</label><input type="radio" name="group-xxs3V" id="tab-8ty8Y7H"><label data-title="Yarn" for="tab-8ty8Y7H">Yarn</label><input type="radio" name="group-xxs3V" id="tab-k0D2A2S"><label data-title="Bun" for="tab-k0D2A2S">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>
|
||||
@@ -45,7 +45,7 @@
|
||||
<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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/core.storage.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>@core UI Storage</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/plugins/custom.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Custom</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -48,7 +48,7 @@
|
||||
<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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/core.ui.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>@core UI Plugin</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/plugins/core.storage.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>@core UI Storage</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/plugins_core.storage.md.Bgu1q6YH.lean.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/plugins_core.storage.md.huXK5aOE.lean.js">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
@@ -23,7 +23,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Storage).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app.default));</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ve29n" id="tab-r-zQL8a" checked><label data-title="NPM" for="tab-r-zQL8a">NPM</label><input type="radio" name="group-ve29n" id="tab-EpinxCs"><label data-title="PNPM" for="tab-EpinxCs">PNPM</label><input type="radio" name="group-ve29n" id="tab-68POdFk"><label data-title="Yarn" for="tab-68POdFk">Yarn</label><input type="radio" name="group-ve29n" id="tab-mjku06r"><label data-title="Bun" for="tab-mjku06r">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div><hr><h2 id="_3-basic-usage" tabindex="-1">3. Basic Usage <a class="header-anchor" href="#_3-basic-usage" aria-label="Permalink to "3. Basic Usage""></a></h2><p>You can wrap any signal with <code>_storage</code>. It is common practice to do this right after creating the signal.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#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-Y5Xjx" id="tab-Fz1Pydy" checked><label data-title="NPM" for="tab-Fz1Pydy">NPM</label><input type="radio" name="group-Y5Xjx" id="tab-8UnE3oI"><label data-title="PNPM" for="tab-8UnE3oI">PNPM</label><input type="radio" name="group-Y5Xjx" id="tab-t-H29V6"><label data-title="Yarn" for="tab-t-H29V6">Yarn</label><input type="radio" name="group-Y5Xjx" id="tab-H9UwvyJ"><label data-title="Bun" for="tab-H9UwvyJ">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>
|
||||
@@ -47,7 +47,7 @@
|
||||
<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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/core.fetch.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>@core UI Fetch</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/plugins/core.debug.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>@core UI Debug</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/plugins_custom.md.D2KGTblR.lean.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/plugins_custom.md.__3E6hTB.lean.js">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
@@ -65,8 +65,8 @@
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ConfigLoader).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Config loaded:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $.config);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_4-best-practices-for-plugin-authors" tabindex="-1">4. Best Practices for Plugin Authors <a class="header-anchor" href="#_4-best-practices-for-plugin-authors" aria-label="Permalink to "4. Best Practices for Plugin Authors""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Rule</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Prefixing</strong></td><td style="text-align:left;">Use <code>_</code> for UI components (<code>_modal</code>) and <code>$.</code> for logic (<code>$.fetch</code>).</td></tr><tr><td style="text-align:left;"><strong>Idempotency</strong></td><td style="text-align:left;">Ensure calling <code>$.plugin(MyPlugin)</code> twice doesn't break the app.</td></tr><tr><td style="text-align:left;"><strong>Encapsulation</strong></td><td style="text-align:left;">Use the <code>$</code> instance passed as an argument rather than importing it again inside the plugin.</td></tr><tr><td style="text-align:left;"><strong>Reactivity</strong></td><td style="text-align:left;">Always use <code>$(...)</code> for internal state so the app stays reactive.</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><p>Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-BH7JQ" id="tab-QW4EYdy" checked><label data-title="NPM" for="tab-QW4EYdy">NPM</label><input type="radio" name="group-BH7JQ" id="tab-tWt-JWH"><label data-title="PNPM" for="tab-tWt-JWH">PNPM</label><input type="radio" name="group-BH7JQ" id="tab-VAxdkNa"><label data-title="Yarn" for="tab-VAxdkNa">Yarn</label><input type="radio" name="group-BH7JQ" id="tab-3QjUdhj"><label data-title="Bun" for="tab-3QjUdhj">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/core.debug.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>@core UI Debug</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/vite/plugin.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Vite Plugin</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<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-pISzH" id="tab-9zdc_w7" checked><label data-title="NPM" for="tab-9zdc_w7">NPM</label><input type="radio" name="group-pISzH" id="tab--OGmWQY"><label data-title="PNPM" for="tab--OGmWQY">PNPM</label><input type="radio" name="group-pISzH" id="tab-fBGDci2"><label data-title="Yarn" for="tab-fBGDci2">Yarn</label><input type="radio" name="group-pISzH" id="tab-kOrV7Mt"><label data-title="Bun" for="tab-kOrV7Mt">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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/core.debug.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>@core UI Debug</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/vite/plugin.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Vite Plugin</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -54,7 +54,7 @@
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"External resources are ready to use!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-polymorphic-loading-reference" tabindex="-1">4. Polymorphic Loading Reference <a class="header-anchor" href="#_4-polymorphic-loading-reference" aria-label="Permalink to "4. Polymorphic Loading Reference""></a></h2><p>The <code>$.plugin</code> method adapts to whatever you throw at it:</p><table tabindex="0"><thead><tr><th style="text-align:left;">Input Type</th><th style="text-align:left;">Action</th><th style="text-align:left;">Behavior</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Function</strong></td><td style="text-align:left;">Executes <code>fn($)</code></td><td style="text-align:left;">Synchronous / Immediate</td></tr><tr><td style="text-align:left;"><strong>String (URL)</strong></td><td style="text-align:left;">Injects <code><script src="..."></code></td><td style="text-align:left;">Asynchronous (Returns Promise)</td></tr><tr><td style="text-align:left;"><strong>Array</strong></td><td style="text-align:left;">Processes each item in the list</td><td style="text-align:left;">Returns Promise if any item is Async</td></tr></tbody></table><hr><h2 id="💡-pro-tip-why-the-then" tabindex="-1">💡 Pro Tip: Why the <code>.then()</code>? <a class="header-anchor" href="#💡-pro-tip-why-the-then" aria-label="Permalink to "💡 Pro Tip: Why the `.then()`?""></a></h2><p>Using <code>$.plugin([...]).then(...)</code> is like giving your app a "Pre-flight Check". It guarantees that:</p><ol><li>All reactive methods are attached.</li><li>Global HTML tags are defined.</li><li>External libraries (like Chart.js) are loaded.</li><li><strong>The result:</strong> Your components are cleaner, smaller, and error-free.</li></ol></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/tags.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Tags</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/plugins/core.router.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>@core Router Plugin</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/vite_plugin.md.4TJA8cv0.lean.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/vite_plugin.md.CEmBrTGY.lean.js">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
@@ -67,8 +67,8 @@
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The router only swaps the content inside this <main> tag</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">_router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes))</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-route-mapping-reference" tabindex="-1">4. Route Mapping Reference <a class="header-anchor" href="#_4-route-mapping-reference" aria-label="Permalink to "4. Route Mapping Reference""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">File Path</th><th style="text-align:left;">Generated Route</th><th style="text-align:left;">Logic</th></tr></thead><tbody><tr><td style="text-align:left;"><code>index.js</code></td><td style="text-align:left;"><code>/</code></td><td style="text-align:left;">Home page</td></tr><tr><td style="text-align:left;"><code>about.js</code></td><td style="text-align:left;"><code>/about</code></td><td style="text-align:left;">Static path</td></tr><tr><td style="text-align:left;"><code>[id].js</code></td><td style="text-align:left;"><code>/:id</code></td><td style="text-align:left;">Dynamic parameter</td></tr><tr><td style="text-align:left;"><code>blog/index.js</code></td><td style="text-align:left;"><code>/blog</code></td><td style="text-align:left;">Folder index</td></tr><tr><td style="text-align:left;"><code>_utils.js</code></td><td style="text-align:left;"><em>Ignored</em></td><td style="text-align:left;">Files starting with <code>_</code> are skipped</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-6P_e6" id="tab-qlMEoLm" checked><label data-title="NPM" for="tab-qlMEoLm">NPM</label><input type="radio" name="group-6P_e6" id="tab-nbzPVp3"><label data-title="PNPM" for="tab-nbzPVp3">PNPM</label><input type="radio" name="group-6P_e6" id="tab-csqvPLb"><label data-title="Yarn" for="tab-csqvPLb">Yarn</label><input type="radio" name="group-6P_e6" id="tab-18Y2ZQS"><label data-title="Bun" for="tab-18Y2ZQS">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div></div></div></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/custom.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Custom</span><!--]--></a></div><div class="pager" data-v-4f9813fa><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"33XeBTH-\",\"guide_getting-started.md\":\"D_gqopPp\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"BWH7zN4c\",\"plugins_core.debug.md\":\"CVHw_PN0\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"bGFltJyy\",\"plugins_core.storage.md\":\"Bgu1q6YH\",\"plugins_core.ui.md\":\"DDLum7rv\",\"plugins_custom.md\":\"D2KGTblR\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"4TJA8cv0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="_4-route-mapping-reference" tabindex="-1">4. Route Mapping Reference <a class="header-anchor" href="#_4-route-mapping-reference" aria-label="Permalink to "4. Route Mapping Reference""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">File Path</th><th style="text-align:left;">Generated Route</th><th style="text-align:left;">Logic</th></tr></thead><tbody><tr><td style="text-align:left;"><code>index.js</code></td><td style="text-align:left;"><code>/</code></td><td style="text-align:left;">Home page</td></tr><tr><td style="text-align:left;"><code>about.js</code></td><td style="text-align:left;"><code>/about</code></td><td style="text-align:left;">Static path</td></tr><tr><td style="text-align:left;"><code>[id].js</code></td><td style="text-align:left;"><code>/:id</code></td><td style="text-align:left;">Dynamic parameter</td></tr><tr><td style="text-align:left;"><code>blog/index.js</code></td><td style="text-align:left;"><code>/blog</code></td><td style="text-align:left;">Folder index</td></tr><tr><td style="text-align:left;"><code>_utils.js</code></td><td style="text-align:left;"><em>Ignored</em></td><td style="text-align:left;">Files starting with <code>_</code> are skipped</td></tr></tbody></table><hr><h2 id="_5-installation" tabindex="-1">5. Installation <a class="header-anchor" href="#_5-installation" aria-label="Permalink to "5. Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-mpaZd" id="tab-5EoJ7YE" checked><label data-title="NPM" for="tab-5EoJ7YE">NPM</label><input type="radio" name="group-mpaZd" id="tab-D3hJ_G9"><label data-title="PNPM" for="tab-D3hJ_G9">PNPM</label><input type="radio" name="group-mpaZd" id="tab-ufaManH"><label data-title="Yarn" for="tab-ufaManH">Yarn</label><input type="radio" name="group-mpaZd" id="tab-gioq8PP"><label data-title="Bun" for="tab-gioq8PP">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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/plugins/custom.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>Custom</span><!--]--></a></div><div class="pager" data-v-4f9813fa><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api__.md\":\"BVVMY-2O\",\"api_html.md\":\"-lEpgX-Z\",\"api_mount.md\":\"eGRwkZvh\",\"api_quick.md\":\"Cy_XozKR\",\"api_tags.md\":\"bOhL_sXH\",\"guide_getting-started.md\":\"B8z9KBy5\",\"guide_why.md\":\"lyU7T5_c\",\"index.md\":\"CkJYagmp\",\"plugins_core.debug.md\":\"C1g_y9ut\",\"plugins_core.fetch.md\":\"BIc8aMQh\",\"plugins_core.router.md\":\"A8Lvd23w\",\"plugins_core.storage.md\":\"huXK5aOE\",\"plugins_core.ui.md\":\"C_cJt9x8\",\"plugins_custom.md\":\"__3E6hTB\",\"plugins_quick.md\":\"ODjl7edh\",\"vite_plugin.md\":\"CEmBrTGY\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SigPro?\",\"link\":\"/\"},{\"text\":\"Why\",\"link\":\"/guide/why\"},{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/$\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"Plugins\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/plugins/quick\"},{\"text\":\"@core Router Plugin\",\"link\":\"/plugins/core.router\"},{\"text\":\"@core UI Plugin\",\"link\":\"/plugins/core.ui\"},{\"text\":\"@core UI Fetch\",\"link\":\"/plugins/core.fetch\"},{\"text\":\"@core UI Storage\",\"link\":\"/plugins/core.storage\"},{\"text\":\"@core UI Debug\",\"link\":\"/plugins/core.debug\"},{\"text\":\"Custom\",\"link\":\"/plugins/custom\"}]},{\"text\":\"Vite Router Plugin\",\"items\":[{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user