diff --git a/.gitignore b/.gitignore index e02ef7a..f72ad73 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ coverage/ .cache/ .parcel-cache/ .turbo/ +*.lock # Logs npm-debug.log* diff --git a/docs/404.html b/docs/404.html index 5d32f7d..712adfa 100644 --- a/docs/404.html +++ b/docs/404.html @@ -16,7 +16,7 @@
- + \ No newline at end of file diff --git a/docs/api/$.html b/docs/api/$.html index 22f0a25..4d9982d 100644 --- a/docs/api/$.html +++ b/docs/api/$.html @@ -45,7 +45,7 @@ $theme("dark"); // Logs: Theme updated to: dark

5. Summary Table: Usage Guide ​

PrimitiveLogic TypeReturns Value?Typical Use Case
SignalStaticYes (Mutable)const $user = $("Guest")
ComputedRead-onlyYes (Automatic)const $isLoggedIn = $(() => $user() !== "Guest")
EffectImperativeNo$(() => localStorage.setItem('user', $user()))

💡 Pro Tip: Naming Convention ​

In SigPro, we use the $ prefix (e.g., $count) for variables that hold a reactive function. This makes it easy to distinguish between a standard variable and a reactive one at a glance:

javascript
let count = 0;   // Static
 const $count = $(0); // Reactive (Function)
- + \ No newline at end of file diff --git a/docs/api/html.html b/docs/api/html.html index 7a61d9a..3521504 100644 --- a/docs/api/html.html +++ b/docs/api/html.html @@ -40,7 +40,7 @@ ? h1("High Score!") : p("Keep going..."); });

The "Guillotine" (Performance Tip) ​

When a reactive function in the content returns a new Node, SigPro uses replaceWith() to swap the old node for the new one. This ensures that:

  1. The update is nearly instantaneous.
  2. The old node is correctly garbage-collected.

6. Summary: Content Types ​

InputBehavior
String / NumberAppended as a TextNode.
HTMLElementAppended directly to the parent.
ArrayEach item is processed and appended in order.
Function () => ...Creates a live reactive zone that updates automatically.
- + \ No newline at end of file diff --git a/docs/api/mount.html b/docs/api/mount.html index c30d41c..3cc5e12 100644 --- a/docs/api/mount.html +++ b/docs/api/mount.html @@ -46,7 +46,7 @@ const myNode = $.html('div', 'Local Widget'); $.mount(myNode, '#widget-target');

Summary Cheat Sheet ​

GoalCode
Mount to body$.mount(App)
Mount to ID$.mount(App, '#id')
Mount to Element$.mount(App, myElement)
Reactive Widget$.mount(() => div("Hi"), '#widget')
- + \ No newline at end of file diff --git a/docs/api/quick.html b/docs/api/quick.html index bfbd9bd..454e536 100644 --- a/docs/api/quick.html +++ b/docs/api/quick.html @@ -25,7 +25,7 @@ button("Ok") ]);

4. Mounting & Plugins ​

Methods to initialize your application and extend the engine.

MethodSignatureDescription
$.mount(node, target)Wipes the target (default: body) and renders the component.
$.plugin(source)Registers a function or loads external .js scripts as plugins.

Example:

javascript
$.plugin([UI, Router]);
 $.mount(App, '#root');

5. Reactive Syntax Cheat Sheet ​

FeatureSyntaxDescription
Text Bindingp(["Value: ", $sig])Updates text content automatically.
Attributesdiv({ id: $sig })Static attribute assignment.
Reactive Attrdiv({ $class: $sig })Attribute updates when $sig changes.
Two-way Bindinginput({ $value: $sig })Syncs input value and signal automatically.
Conditionaldiv(() => $sig() > 0 ? "Yes" : "No")Re-renders only the content when the condition changes.

Summary Table ​

FeatureSigPro ApproachBenefit
Update LogicFine-grained (Surgical)Blazing fast updates.
DOMNative NodesZero abstraction cost.
SyntaxPure JavaScriptNo build-tool lock-in.
FootprintModularLoad only what you use.
- + \ No newline at end of file diff --git a/docs/api/tags.html b/docs/api/tags.html index 2ebf256..3f1e6f2 100644 --- a/docs/api/tags.html +++ b/docs/api/tags.html @@ -13,7 +13,7 @@ - + @@ -41,7 +41,7 @@ section({ id: 'hero' }, [ h1("Fast. Atomic. Simple."), p("Built with SigPro.") - ]);

6. Full Comparison: SigPro vs. Standard HTML ​

To better understand the translation, here is a complete example of a User Card component. Notice how SigPro attributes with the $ prefix map to reactive behavior, while standard attributes remain static.

javascript
const $online = $(true);
+  ]);

6. Full Comparison: SigPro vs. Standard HTML ​

To better understand the translation, here is a complete example of a User Card component. Notice how SigPro attributes with the $ prefix map to reactive behavior, while standard attributes remain static.

javascript
const $online = $(true);
 
 export const UserCard = () => (
   div({ class: 'user-card' }, [
@@ -73,7 +73,7 @@
   
   <button>Toggle Status</button>
 </div>

What is happening here? ​

  1. Structure: The hierarchy is identical. div([...]) in JS translates directly to nested tags in HTML.
  2. Attributes: class is set once. $class is "live"; SigPro listens to the $online signal and updates the class name without re-rendering the whole card.
  3. Content: The array [...] in SigPro is the equivalent of the children inside an HTML tag.
  4. Reactivity: The function () => $online() ? ... creates a TextNode in the HTML that changes its text content surgically whenever the signal toggles.

💡 Best Practices ​

  1. Destructuring: If you prefer not to rely on global variables, you can destructure them from window or $ (though in SigPro, using them globally is the intended "clean" way).
  2. Custom Tags: If you need a tag that isn't in the default list (like a Web Component), you can still use the base engine: $.html('my-custom-element', { ... }).
- + \ No newline at end of file diff --git a/docs/assets/api_tags.md.33XeBTH-.js b/docs/assets/api_tags.md.bOhL_sXH.js similarity index 98% rename from docs/assets/api_tags.md.33XeBTH-.js rename to docs/assets/api_tags.md.bOhL_sXH.js index 08ffed5..b078722 100644 --- a/docs/assets/api_tags.md.33XeBTH-.js +++ b/docs/assets/api_tags.md.bOhL_sXH.js @@ -21,7 +21,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E section({ id: 'hero' }, [ h1("Fast. Atomic. Simple."), p("Built with SigPro.") - ]);

6. Full Comparison: SigPro vs. Standard HTML ​

To better understand the translation, here is a complete example of a User Card component. Notice how SigPro attributes with the $ prefix map to reactive behavior, while standard attributes remain static.

javascript
const $online = $(true);
+  ]);

6. Full Comparison: SigPro vs. Standard HTML ​

To better understand the translation, here is a complete example of a User Card component. Notice how SigPro attributes with the $ prefix map to reactive behavior, while standard attributes remain static.

javascript
const $online = $(true);
 
 export const UserCard = () => (
   div({ class: 'user-card' }, [
diff --git a/docs/assets/api_tags.md.33XeBTH-.lean.js b/docs/assets/api_tags.md.bOhL_sXH.lean.js
similarity index 100%
rename from docs/assets/api_tags.md.33XeBTH-.lean.js
rename to docs/assets/api_tags.md.bOhL_sXH.lean.js
diff --git a/docs/assets/guide_getting-started.md.D_gqopPp.js b/docs/assets/guide_getting-started.md.B8z9KBy5.js
similarity index 96%
rename from docs/assets/guide_getting-started.md.D_gqopPp.js
rename to docs/assets/guide_getting-started.md.B8z9KBy5.js
index 3f5d489..61222ee 100644
--- a/docs/assets/guide_getting-started.md.D_gqopPp.js
+++ b/docs/assets/guide_getting-started.md.B8z9KBy5.js
@@ -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(`
Getting Started ​
SigPro is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.
1. Installation ​
You can install SigPro via your favorite package manager:
bash
npm install SigPro
bash
pnpm add SigPro
bash
yarn add SigPro
bash
bun add SigPro
2. Basic Usage ​
The core of SigPro is the $ function, which creates reactive state (Signals) and computed effects.
Create a main.js file and try this:
javascript
import { $ } from 'SigPro';
+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(`
Getting Started ​
SigPro is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.
1. Installation ​
You can install SigPro via your favorite package manager:
bash
npm install SigPro
bash
pnpm add SigPro
bash
yarn add SigPro
bash
bun add SigPro
2. Basic Usage ​
The core of SigPro is the $ function, which creates reactive state (Signals) and computed effects.
Create a main.js file and try this:
javascript
import { $ } from 'SigPro';
 
 // 1. Create a reactive signal
 const $name = $("World");
diff --git a/docs/assets/guide_getting-started.md.D_gqopPp.lean.js b/docs/assets/guide_getting-started.md.B8z9KBy5.lean.js
similarity index 100%
rename from docs/assets/guide_getting-started.md.D_gqopPp.lean.js
rename to docs/assets/guide_getting-started.md.B8z9KBy5.lean.js
diff --git a/docs/assets/index.md.BWH7zN4c.js b/docs/assets/index.md.CkJYagmp.js
similarity index 95%
rename from docs/assets/index.md.BWH7zN4c.js
rename to docs/assets/index.md.CkJYagmp.js
index d0f80bb..6f03f31 100644
--- a/docs/assets/index.md.BWH7zN4c.js
+++ b/docs/assets/index.md.CkJYagmp.js
@@ -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(`
Why SigPro? ​
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.
The Core in Action ​
javascript
import { $ } from 'sigpro2';
+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(`
Why SigPro? ​
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.
The Core in Action ​
javascript
import { $ } from 'sigpro2';
 
 // A reactive state Signal
 const $count = $(0);
@@ -14,4 +14,4 @@ import{_ as s,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g
 ]);
 
 $.mount(Counter);
Key Features ​
⚡️ Fine-Grained Reactivity ​
Unlike frameworks that diff complex trees (V-DOM), SigPro binds your signals directly to real DOM text nodes and attributes. If the data changes, the node changes. Period.
🔌 Polymorphic Plugin System ​
Extend core capabilities in a single line. Add global UI helpers, routing, or state persistence seamlessly.
javascript
import { UI, Router } from 'sigpro/plugins';
-$.plugin([UI, Router]);
📂 File-Based Routing ​
With our dedicated Vite plugin, manage your routes simply by creating files in src/pages/. It supports native Lazy Loading out of the box for lightning-fast initial loads.
Quick Install ​
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
Community & Support ​
SigPro is an open-source project. Whether you want to contribute, report a bug, or just talk about reactivity, join us on our official repository.
Built with ❤️ by NatxoCC
`,20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
+$.plugin([UI, Router]);
📂 File-Based Routing ​
With our dedicated Vite plugin, manage your routes simply by creating files in src/pages/. It supports native Lazy Loading out of the box for lightning-fast initial loads.
Quick Install ​
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
Community & Support ​
SigPro is an open-source project. Whether you want to contribute, report a bug, or just talk about reactivity, join us on our official repository.
Built with ❤️ by NatxoCC
`,20)])])}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
diff --git a/docs/assets/index.md.BWH7zN4c.lean.js b/docs/assets/index.md.CkJYagmp.lean.js
similarity index 94%
rename from docs/assets/index.md.BWH7zN4c.lean.js
rename to docs/assets/index.md.CkJYagmp.lean.js
index e18d5ca..b16ad4e 100644
--- a/docs/assets/index.md.BWH7zN4c.lean.js
+++ b/docs/assets/index.md.CkJYagmp.lean.js
@@ -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};
diff --git a/docs/assets/plugins_core.debug.md.CVHw_PN0.js b/docs/assets/plugins_core.debug.md.C1g_y9ut.js
similarity index 97%
rename from docs/assets/plugins_core.debug.md.CVHw_PN0.js
rename to docs/assets/plugins_core.debug.md.C1g_y9ut.js
index f78710c..c4a53a0 100644
--- a/docs/assets/plugins_core.debug.md.CVHw_PN0.js
+++ b/docs/assets/plugins_core.debug.md.C1g_y9ut.js
@@ -7,7 +7,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
 
 $.plugin(plugins).then(() => {
   import('./App.js').then(app => $.mount(app.default));
-});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
3. Basic Usage ​
Call _debug anywhere in your component. It stays active in the background, watching the signal's lifecycle.
javascript
export default () => {
+});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
3. Basic Usage ​
Call _debug anywhere in your component. It stays active in the background, watching the signal's lifecycle.
javascript
export default () => {
   const $count = $(0);
   const $user = $({ name: "Guest", role: "Viewer" });
 
@@ -24,4 +24,4 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
 const $total = $(() => $price() * (1 + $tax()));
 
 // Monitor the result of the calculation
-_debug($total, "Final Invoice Total");
6. Why use _debug? ​
  1. Clean Logic: No need to scatter console.log inside your reactive functions.
  2. State History: Instantly see the "Before" and "After" of any user action.
  3. No-Noise: It only logs when a real change occurs, keeping the console clean.
  4. Deep Inspection: The automatic console.table makes debugging large API responses much faster.
`,24)])])}const E=i(e,[["render",l]]);export{g as __pageData,E as default};
+_debug($total, "Final Invoice Total");
6. Why use _debug? ​
  1. Clean Logic: No need to scatter console.log inside your reactive functions.
  2. State History: Instantly see the "Before" and "After" of any user action.
  3. No-Noise: It only logs when a real change occurs, keeping the console clean.
  4. Deep Inspection: The automatic console.table makes debugging large API responses much faster.
`,24)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};
diff --git a/docs/assets/plugins_core.debug.md.CVHw_PN0.lean.js b/docs/assets/plugins_core.debug.md.C1g_y9ut.lean.js
similarity index 74%
rename from docs/assets/plugins_core.debug.md.CVHw_PN0.lean.js
rename to docs/assets/plugins_core.debug.md.C1g_y9ut.lean.js
index add7b6e..c9c0bec 100644
--- a/docs/assets/plugins_core.debug.md.CVHw_PN0.lean.js
+++ b/docs/assets/plugins_core.debug.md.C1g_y9ut.lean.js
@@ -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};
diff --git a/docs/assets/plugins_core.router.md.bGFltJyy.js b/docs/assets/plugins_core.router.md.A8Lvd23w.js
similarity index 97%
rename from docs/assets/plugins_core.router.md.bGFltJyy.js
rename to docs/assets/plugins_core.router.md.A8Lvd23w.js
index 1a6b6bc..7c8a2aa 100644
--- a/docs/assets/plugins_core.router.md.bGFltJyy.js
+++ b/docs/assets/plugins_core.router.md.A8Lvd23w.js
@@ -1,4 +1,4 @@
-import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"Navigation Plugin: Router","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.router.md","filePath":"plugins/core.router.md"}'),e={name:"plugins/core.router.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`
Navigation Plugin: Router ​
The SigPro Router handles URL changes via hashes (#) and maps them to components. It supports dynamic parameters (like :id) and asynchronous loading for heavy pages.
1. Core Features ​
  • Hash-based: Works everywhere without special server configuration.
  • Lazy Loading: Pages are only downloaded when the user visits the route.
  • Reactive: The view updates automatically when the hash changes.
  • Dynamic Routes: Supports paths like /user/:id.
2. Installation ​
The Router is usually included in the official plugins package.
bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next
3. Setting Up Routes ​
In your App.js (or a dedicated routes file), define your navigation map.
javascript
const routes = [
+import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"Navigation Plugin: Router","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.router.md","filePath":"plugins/core.router.md"}'),e={name:"plugins/core.router.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`
Navigation Plugin: Router ​
The SigPro Router handles URL changes via hashes (#) and maps them to components. It supports dynamic parameters (like :id) and asynchronous loading for heavy pages.
1. Core Features ​
  • Hash-based: Works everywhere without special server configuration.
  • Lazy Loading: Pages are only downloaded when the user visits the route.
  • Reactive: The view updates automatically when the hash changes.
  • Dynamic Routes: Supports paths like /user/:id.
2. Installation ​
The Router is usually included in the official plugins package.
bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next
3. Setting Up Routes ​
In your App.js (or a dedicated routes file), define your navigation map.
javascript
const routes = [
   { path: '/', component: () => h1("Home Page") },
   { 
     path: '/admin', 
diff --git a/docs/assets/plugins_core.router.md.bGFltJyy.lean.js b/docs/assets/plugins_core.router.md.A8Lvd23w.lean.js
similarity index 100%
rename from docs/assets/plugins_core.router.md.bGFltJyy.lean.js
rename to docs/assets/plugins_core.router.md.A8Lvd23w.lean.js
diff --git a/docs/assets/plugins_core.storage.md.Bgu1q6YH.js b/docs/assets/plugins_core.storage.md.huXK5aOE.js
similarity index 97%
rename from docs/assets/plugins_core.storage.md.Bgu1q6YH.js
rename to docs/assets/plugins_core.storage.md.huXK5aOE.js
index f69bdda..5972ce1 100644
--- a/docs/assets/plugins_core.storage.md.Bgu1q6YH.js
+++ b/docs/assets/plugins_core.storage.md.huXK5aOE.js
@@ -3,7 +3,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
 
 $.plugin(Storage).then(() => {
   import('./App.js').then(app => $.mount(app.default));
-});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
3. Basic Usage ​
You can wrap any signal with _storage. It is common practice to do this right after creating the signal.
javascript
export default () => {
+});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
3. Basic Usage ​
You can wrap any signal with _storage. It is common practice to do this right after creating the signal.
javascript
export default () => {
   // 1. Create a signal with a default value
   const $theme = $( 'light' );
 
diff --git a/docs/assets/plugins_core.storage.md.Bgu1q6YH.lean.js b/docs/assets/plugins_core.storage.md.huXK5aOE.lean.js
similarity index 100%
rename from docs/assets/plugins_core.storage.md.Bgu1q6YH.lean.js
rename to docs/assets/plugins_core.storage.md.huXK5aOE.lean.js
diff --git a/docs/assets/plugins_core.ui.md.DDLum7rv.js b/docs/assets/plugins_core.ui.md.C_cJt9x8.js
similarity index 97%
rename from docs/assets/plugins_core.ui.md.DDLum7rv.js
rename to docs/assets/plugins_core.ui.md.C_cJt9x8.js
index 013bc6d..d2af778 100644
--- a/docs/assets/plugins_core.ui.md.DDLum7rv.js
+++ b/docs/assets/plugins_core.ui.md.C_cJt9x8.js
@@ -1,4 +1,4 @@
-import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Official UI Plugin: UI","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.ui.md","filePath":"plugins/core.ui.md"}'),n={name:"plugins/core.ui.md"};function l(h,s,p,o,d,r){return t(),a("div",null,[...s[0]||(s[0]=[e(`
Official UI Plugin: UI ​
The SigPro UI plugin is a high-level component library built on top of the reactive core. It leverages Tailwind CSS v4 for utility styling and daisyUI v5 for semantic components.
1. Prerequisites & Installation ​
To use these components, you must install the styling engine. SigPro UI provides the logic, but Tailwind and daisyUI provide the visuals.
bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next
Would you like to continue with the Router.md documentation now?
CSS Configuration (app.css) ​
In Tailwind v4, configuration is handled directly in your CSS. Create a src/app.css file:
css
/* src/app.css */
+import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Official UI Plugin: UI","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.ui.md","filePath":"plugins/core.ui.md"}'),n={name:"plugins/core.ui.md"};function l(h,s,p,o,d,r){return t(),a("div",null,[...s[0]||(s[0]=[e(`
Official UI Plugin: UI ​
The SigPro UI plugin is a high-level component library built on top of the reactive core. It leverages Tailwind CSS v4 for utility styling and daisyUI v5 for semantic components.
1. Prerequisites & Installation ​
To use these components, you must install the styling engine. SigPro UI provides the logic, but Tailwind and daisyUI provide the visuals.
bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next
Would you like to continue with the Router.md documentation now?
CSS Configuration (app.css) ​
In Tailwind v4, configuration is handled directly in your CSS. Create a src/app.css file:
css
/* src/app.css */
 @import "tailwindcss";
 
 /* Import daisyUI v5 as a Tailwind v4 plugin */
diff --git a/docs/assets/plugins_core.ui.md.DDLum7rv.lean.js b/docs/assets/plugins_core.ui.md.C_cJt9x8.lean.js
similarity index 100%
rename from docs/assets/plugins_core.ui.md.DDLum7rv.lean.js
rename to docs/assets/plugins_core.ui.md.C_cJt9x8.lean.js
diff --git a/docs/assets/plugins_custom.md.D2KGTblR.js b/docs/assets/plugins_custom.md.__3E6hTB.js
similarity index 97%
rename from docs/assets/plugins_custom.md.D2KGTblR.js
rename to docs/assets/plugins_custom.md.__3E6hTB.js
index d93a9f0..3a77e7c 100644
--- a/docs/assets/plugins_custom.md.D2KGTblR.js
+++ b/docs/assets/plugins_custom.md.__3E6hTB.js
@@ -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(`
Creating Custom Plugins ​
There are two main ways to expose a plugin's functionality: Static/Manual Imports (cleaner for large projects) or Global/Automatic Window Injection (easier for quick scripts and global helpers).
1. The Anatomy of a Plugin ​
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 (_).
javascript
// plugins/my-utils.js
+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(`
Creating Custom Plugins ​
There are two main ways to expose a plugin's functionality: Static/Manual Imports (cleaner for large projects) or Global/Automatic Window Injection (easier for quick scripts and global helpers).
1. The Anatomy of a Plugin ​
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 (_).
javascript
// plugins/my-utils.js
 export const MyUtils = ($) => {
   
   // 1. Attach to the SigPro instance
@@ -45,4 +45,4 @@ import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o
 $.plugin(ConfigLoader).then(() => {
   console.log("Config loaded:", $.config);
   $.mount(App);
-});
4. Best Practices for Plugin Authors ​
RuleDescription
PrefixingUse _ for UI components (_modal) and $. for logic ($.fetch).
IdempotencyEnsure calling $.plugin(MyPlugin) twice doesn't break the app.
EncapsulationUse the $ instance passed as an argument rather than importing it again inside the plugin.
ReactivityAlways use $(...) for internal state so the app stays reactive.
5. Installation ​
Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
`,24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
+});
4. Best Practices for Plugin Authors ​
RuleDescription
PrefixingUse _ for UI components (_modal) and $. for logic ($.fetch).
IdempotencyEnsure calling $.plugin(MyPlugin) twice doesn't break the app.
EncapsulationUse the $ instance passed as an argument rather than importing it again inside the plugin.
ReactivityAlways use $(...) for internal state so the app stays reactive.
5. Installation ​
Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
`,24)])])}const E=i(l,[["render",h]]);export{o as __pageData,E as default};
diff --git a/docs/assets/plugins_custom.md.D2KGTblR.lean.js b/docs/assets/plugins_custom.md.__3E6hTB.lean.js
similarity index 84%
rename from docs/assets/plugins_custom.md.D2KGTblR.lean.js
rename to docs/assets/plugins_custom.md.__3E6hTB.lean.js
index 6535180..baba72c 100644
--- a/docs/assets/plugins_custom.md.D2KGTblR.lean.js
+++ b/docs/assets/plugins_custom.md.__3E6hTB.lean.js
@@ -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};
diff --git a/docs/assets/vite_plugin.md.4TJA8cv0.js b/docs/assets/vite_plugin.md.CEmBrTGY.js
similarity index 97%
rename from docs/assets/vite_plugin.md.4TJA8cv0.js
rename to docs/assets/vite_plugin.md.CEmBrTGY.js
index 823f111..1775703 100644
--- a/docs/assets/vite_plugin.md.4TJA8cv0.js
+++ b/docs/assets/vite_plugin.md.CEmBrTGY.js
@@ -47,4 +47,4 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g
     // The router only swaps the content inside this <main> tag
     main(_router(routes))
   ]);
-};
4. Route Mapping Reference ​
File PathGenerated RouteLogic
index.js/Home page
about.js/aboutStatic path
[id].js/:idDynamic parameter
blog/index.js/blogFolder index
_utils.jsIgnoredFiles starting with _ are skipped
5. Installation ​
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
`,24)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
+};
4. Route Mapping Reference ​
File PathGenerated RouteLogic
index.js/Home page
about.js/aboutStatic path
[id].js/:idDynamic parameter
blog/index.js/blogFolder index
_utils.jsIgnoredFiles starting with _ are skipped
5. Installation ​
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
`,24)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
diff --git a/docs/assets/vite_plugin.md.4TJA8cv0.lean.js b/docs/assets/vite_plugin.md.CEmBrTGY.lean.js
similarity index 100%
rename from docs/assets/vite_plugin.md.4TJA8cv0.lean.js
rename to docs/assets/vite_plugin.md.CEmBrTGY.lean.js
diff --git a/docs/guide/getting-started.html b/docs/guide/getting-started.html
index 7d4f7e6..b5016d6 100644
--- a/docs/guide/getting-started.html
+++ b/docs/guide/getting-started.html
@@ -13,12 +13,12 @@
     
     
     
-    
+    
     
     
   
   
-    
SigPro
Appearance
Getting Started ​
SigPro is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.
1. Installation ​
You can install SigPro via your favorite package manager:
bash
npm install SigPro
bash
pnpm add SigPro
bash
yarn add SigPro
bash
bun add SigPro
2. Basic Usage ​
The core of SigPro is the $ function, which creates reactive state (Signals) and computed effects.
Create a main.js file and try this:
javascript
import { $ } from 'SigPro';
+    
SigPro
Appearance
Getting Started ​
SigPro is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.
1. Installation ​
You can install SigPro via your favorite package manager:
bash
npm install SigPro
bash
pnpm add SigPro
bash
yarn add SigPro
bash
bun add SigPro
2. Basic Usage ​
The core of SigPro is the $ function, which creates reactive state (Signals) and computed effects.
Create a main.js file and try this:
javascript
import { $ } from 'SigPro';
 
 // 1. Create a reactive signal
 const $name = $("World");
@@ -44,7 +44,7 @@
   h1("Clean Syntax"),
   p("No more boilerplate.")
 ]);

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/guide/why.html b/docs/guide/why.html
index c1a45cb..929fa25 100644
--- a/docs/guide/why.html
+++ b/docs/guide/why.html
@@ -25,7 +25,7 @@
   p(["Count: ", $count]),
   button({ onclick: () => $count(c => c + 1) }, "Increment")
 ]);
Performance Comparison ​
SigPro isn't just lighter; it's architecturally faster because it skips the "diffing" phase entirely.
MetricSigProSolidJSSvelteVueReact
Bundle Size (gzip)🥇 < 2KB🥈 7KB🥉 16KB20KB45KB
ArchitectureAtomicAtomicCompiledV-DOMV-DOM
Initial Render🥇 Fastest🥈 Fast🥉 FastAverageSlow
Update Perf🥇 Surgical🥇 Surgical🥈 Fast🥉 AverageSlow
Dependencies🥇 0🥇 0🥇 0🥈 2🥉 5+
Build Step🥇 Optional🥈 Required🥈 Required🥇 Optional🥈 Required
🔑 Core Principles ​
SigPro is built on four fundamental pillars:
📡 Atomic Reactivity ​
Automatic dependency tracking with no manual subscriptions. When a signal changes, only the exact text nodes or attributes that depend on it update—instantly and surgically.
⚡ Surgical DOM Updates ​
No Virtual DOM diffing. No tree reconciliation. We don't guess what changed; we know exactly where the update needs to happen. Performance scales with your data, not the size of your component tree.
🧩 Plugin-First Architecture ​
The core is a tiny, powerful engine. Need Routing? Fetching? Global UI? Just plug it in. This keeps your production bundles "pay-only-for-what-you-use."
🔬 Predictable & Transparent ​
There is no "magic" hidden in a black-box compiler. What you write is what the browser executes. Debugging is straightforward because there is no framework layer between your code and the DevTools.
"SigPro returns the joy of web development by making the browser the hero again."

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/hashmap.json b/docs/hashmap.json
index 4c13e72..56275f8 100644
--- a/docs/hashmap.json
+++ b/docs/hashmap.json
@@ -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"}
diff --git a/docs/index.html b/docs/index.html
index c7e25c4..7620f4b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -13,12 +13,12 @@
     
     
     
-    
+    
     
     
   
   
-    
SigPro
Appearance
SigProAtomic Unified Reactive Engine
Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.
Get Started
View on GitHub
SigPro Logo
Atomic Reactivity
Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders.
Zero Dependencies
Written in pure Vanilla JS. Maximum performance with the smallest footprint possible.
Modular Ecosystem
Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need.
Why SigPro? ​
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.
The Core in Action ​
javascript
import { $ } from 'sigpro2';
+    
SigPro
Appearance
SigProAtomic Unified Reactive Engine
Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB.
Get Started
View on GitHub
SigPro Logo
Atomic Reactivity
Powered by Signals. Only updates what changes. No Virtual DOM overhead, no heavy re-renders.
Zero Dependencies
Written in pure Vanilla JS. Maximum performance with the smallest footprint possible.
Modular Ecosystem
Official plugins for UI components, dynamic Routing, Fetch, and Storage. Load only what you need.
Why SigPro? ​
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.
The Core in Action ​
javascript
import { $ } from 'sigpro2';
 
 // A reactive state Signal
 const $count = $(0);
@@ -34,8 +34,8 @@
 ]);
 
 $.mount(Counter);
Key Features ​
⚡️ Fine-Grained Reactivity ​
Unlike frameworks that diff complex trees (V-DOM), SigPro binds your signals directly to real DOM text nodes and attributes. If the data changes, the node changes. Period.
🔌 Polymorphic Plugin System ​
Extend core capabilities in a single line. Add global UI helpers, routing, or state persistence seamlessly.
javascript
import { UI, Router } from 'sigpro/plugins';
-$.plugin([UI, Router]);
📂 File-Based Routing ​
With our dedicated Vite plugin, manage your routes simply by creating files in src/pages/. It supports native Lazy Loading out of the box for lightning-fast initial loads.
Quick Install ​
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
Community & Support ​
SigPro is an open-source project. Whether you want to contribute, report a bug, or just talk about reactivity, join us on our official repository.
Built with ❤️ by NatxoCC

-    
+$.plugin([UI, Router]);
📂 File-Based Routing ​
With our dedicated Vite plugin, manage your routes simply by creating files in src/pages/. It supports native Lazy Loading out of the box for lightning-fast initial loads.
Quick Install ​
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
Community & Support ​
SigPro is an open-source project. Whether you want to contribute, report a bug, or just talk about reactivity, join us on our official repository.
Built with ❤️ by NatxoCC

+    
     
   
 
\ No newline at end of file
diff --git a/docs/plugins/core.debug.html b/docs/plugins/core.debug.html
index 8453264..f1d6199 100644
--- a/docs/plugins/core.debug.html
+++ b/docs/plugins/core.debug.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
   
@@ -27,7 +27,7 @@
 
 $.plugin(plugins).then(() => {
   import('./App.js').then(app => $.mount(app.default));
-});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
3. Basic Usage ​
Call _debug anywhere in your component. It stays active in the background, watching the signal's lifecycle.
javascript
export default () => {
+});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
3. Basic Usage ​
Call _debug anywhere in your component. It stays active in the background, watching the signal's lifecycle.
javascript
export default () => {
   const $count = $(0);
   const $user = $({ name: "Guest", role: "Viewer" });
 
@@ -45,7 +45,7 @@
 
 // Monitor the result of the calculation
 _debug($total, "Final Invoice Total");
6. Why use _debug? ​
  1. Clean Logic: No need to scatter console.log inside your reactive functions.
  2. State History: Instantly see the "Before" and "After" of any user action.
  3. No-Noise: It only logs when a real change occurs, keeping the console clean.
  4. Deep Inspection: The automatic console.table makes debugging large API responses much faster.
- + \ No newline at end of file diff --git a/docs/plugins/core.fetch.html b/docs/plugins/core.fetch.html index 00dc2bb..d578b94 100644 --- a/docs/plugins/core.fetch.html +++ b/docs/plugins/core.fetch.html @@ -48,7 +48,7 @@ headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'active' }) });

5. Why use _fetch instead of native Fetch? ​

  1. Declarative UI: You define the "Loading", "Error", and "Success" templates once, and they swap automatically.
  2. No useEffect required: Since SigPro is natively reactive, you don't need lifecycle hooks to trigger re-renders; the signals handle it.
  3. Consistency: It follows the same _prefix pattern as the rest of the official plugin ecosystem.
  4. Automatic JSON Parsing: It assumes JSON by default and handles 404/500 errors by populating the $error signal.
- + \ No newline at end of file diff --git a/docs/plugins/core.router.html b/docs/plugins/core.router.html index 2205b1a..63e5b90 100644 --- a/docs/plugins/core.router.html +++ b/docs/plugins/core.router.html @@ -13,12 +13,12 @@ - + -
SigPro

Appearance

Navigation Plugin: Router ​

The SigPro Router handles URL changes via hashes (#) and maps them to components. It supports dynamic parameters (like :id) and asynchronous loading for heavy pages.

1. Core Features ​

  • Hash-based: Works everywhere without special server configuration.
  • Lazy Loading: Pages are only downloaded when the user visits the route.
  • Reactive: The view updates automatically when the hash changes.
  • Dynamic Routes: Supports paths like /user/:id.

2. Installation ​

The Router is usually included in the official plugins package.

bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next

3. Setting Up Routes ​

In your App.js (or a dedicated routes file), define your navigation map.

javascript
const routes = [
+    
SigPro
Appearance
Navigation Plugin: Router ​
The SigPro Router handles URL changes via hashes (#) and maps them to components. It supports dynamic parameters (like :id) and asynchronous loading for heavy pages.
1. Core Features ​
  • Hash-based: Works everywhere without special server configuration.
  • Lazy Loading: Pages are only downloaded when the user visits the route.
  • Reactive: The view updates automatically when the hash changes.
  • Dynamic Routes: Supports paths like /user/:id.
2. Installation ​
The Router is usually included in the official plugins package.
bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next
3. Setting Up Routes ​
In your App.js (or a dedicated routes file), define your navigation map.
javascript
const routes = [
   { path: '/', component: () => h1("Home Page") },
   { 
     path: '/admin', 
@@ -49,7 +49,7 @@
     }
   ]
 })

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/plugins/core.storage.html b/docs/plugins/core.storage.html
index 81f37c3..65159a7 100644
--- a/docs/plugins/core.storage.html
+++ b/docs/plugins/core.storage.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
   
@@ -23,7 +23,7 @@
 
 $.plugin(Storage).then(() => {
   import('./App.js').then(app => $.mount(app.default));
-});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro

3. Basic Usage ​

You can wrap any signal with _storage. It is common practice to do this right after creating the signal.

javascript
export default () => {
+});
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro

3. Basic Usage ​

You can wrap any signal with _storage. It is common practice to do this right after creating the signal.

javascript
export default () => {
   // 1. Create a signal with a default value
   const $theme = $( 'light' );
 
@@ -47,7 +47,7 @@
 
 // Now it's saved to disk AND logged to console on every change
 _debug($score, "Game Score");
- + \ No newline at end of file diff --git a/docs/plugins/core.ui.html b/docs/plugins/core.ui.html index 05d9503..65ea260 100644 --- a/docs/plugins/core.ui.html +++ b/docs/plugins/core.ui.html @@ -13,12 +13,12 @@ - + -
SigPro

Appearance

Official UI Plugin: UI ​

The SigPro UI plugin is a high-level component library built on top of the reactive core. It leverages Tailwind CSS v4 for utility styling and daisyUI v5 for semantic components.

1. Prerequisites & Installation ​

To use these components, you must install the styling engine. SigPro UI provides the logic, but Tailwind and daisyUI provide the visuals.

bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next

Would you like to continue with the Router.md documentation now?

CSS Configuration (app.css) ​

In Tailwind v4, configuration is handled directly in your CSS. Create a src/app.css file:

css
/* src/app.css */
+    
SigPro
Appearance
Official UI Plugin: UI ​
The SigPro UI plugin is a high-level component library built on top of the reactive core. It leverages Tailwind CSS v4 for utility styling and daisyUI v5 for semantic components.
1. Prerequisites & Installation ​
To use these components, you must install the styling engine. SigPro UI provides the logic, but Tailwind and daisyUI provide the visuals.
bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next
Would you like to continue with the Router.md documentation now?
CSS Configuration (app.css) ​
In Tailwind v4, configuration is handled directly in your CSS. Create a src/app.css file:
css
/* src/app.css */
 @import "tailwindcss";
 
 /* Import daisyUI v5 as a Tailwind v4 plugin */
@@ -48,7 +48,7 @@
   p("Are you sure you want to proceed?"),
   _button({ onclick: () => doAction() }, "Confirm")
 ])
Designed to work seamlessly with the Router.
ComponentKey Logic
_tabsAccepts an active property (signal or function) to highlight the current tab.
_drawerA responsive sidebar that toggles via an ID or an $open signal.
_navbarStandard top bar with shadow and glass effect support.
_menuVertical navigation list with active state support.
5. Summary Table: UI Globals ​
Once $.plugin(UI) is active, these tags are available project-wide:
TagCategoryUse Case
_fieldsetLayoutGrouping related inputs with a legend.
_accordionContentCollapsible sections (FAQs).
_badgeFeedbackStatus indicators (Success, Warning).
_tooltipFeedbackDescriptive text on hover.
_rangeInputReactive slider for numerical values.
What's next? ​
With the UI ready and styled via Tailwind v4, we can move to the Router.md. We will explain how to link _tabs and _menu to different URL paths for a full SPA experience.
Would you like to start with the Router configuration?

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/plugins/custom.html b/docs/plugins/custom.html
index 5d7e61c..3e135c8 100644
--- a/docs/plugins/custom.html
+++ b/docs/plugins/custom.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
   
@@ -65,8 +65,8 @@
 $.plugin(ConfigLoader).then(() => {
   console.log("Config loaded:", $.config);
   $.mount(App);
-});

4. Best Practices for Plugin Authors ​

RuleDescription
PrefixingUse _ for UI components (_modal) and $. for logic ($.fetch).
IdempotencyEnsure calling $.plugin(MyPlugin) twice doesn't break the app.
EncapsulationUse the $ instance passed as an argument rather than importing it again inside the plugin.
ReactivityAlways use $(...) for internal state so the app stays reactive.

5. Installation ​

Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.

bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
- +});

4. Best Practices for Plugin Authors ​

RuleDescription
PrefixingUse _ for UI components (_modal) and $. for logic ($.fetch).
IdempotencyEnsure calling $.plugin(MyPlugin) twice doesn't break the app.
EncapsulationUse the $ instance passed as an argument rather than importing it again inside the plugin.
ReactivityAlways use $(...) for internal state so the app stays reactive.

5. Installation ​

Custom plugins don't require extra packages, but ensure your build tool (Vite/Bun) is configured to handle the module imports.

bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
+ \ No newline at end of file diff --git a/docs/plugins/quick.html b/docs/plugins/quick.html index 31eff69..5b9666c 100644 --- a/docs/plugins/quick.html +++ b/docs/plugins/quick.html @@ -54,7 +54,7 @@ ]); console.log("External resources are ready to use!");

4. Polymorphic Loading Reference ​

The $.plugin method adapts to whatever you throw at it:

Input TypeActionBehavior
FunctionExecutes fn($)Synchronous / Immediate
String (URL)Injects <script src="...">Asynchronous (Returns Promise)
ArrayProcesses each item in the listReturns Promise if any item is Async

💡 Pro Tip: Why the .then()? ​

Using $.plugin([...]).then(...) is like giving your app a "Pre-flight Check". It guarantees that:

  1. All reactive methods are attached.
  2. Global HTML tags are defined.
  3. External libraries (like Chart.js) are loaded.
  4. The result: Your components are cleaner, smaller, and error-free.
- + \ No newline at end of file diff --git a/docs/vite/plugin.html b/docs/vite/plugin.html index db6b4a9..1076b01 100644 --- a/docs/vite/plugin.html +++ b/docs/vite/plugin.html @@ -13,7 +13,7 @@ - + @@ -67,8 +67,8 @@ // The router only swaps the content inside this <main> tag main(_router(routes)) ]); -};

4. Route Mapping Reference ​

File PathGenerated RouteLogic
index.js/Home page
about.js/aboutStatic path
[id].js/:idDynamic parameter
blog/index.js/blogFolder index
_utils.jsIgnoredFiles starting with _ are skipped

5. Installation ​

bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
- +};

4. Route Mapping Reference ​

File PathGenerated RouteLogic
index.js/Home page
about.js/aboutStatic path
[id].js/:idDynamic parameter
blog/index.js/blogFolder index
_utils.jsIgnoredFiles starting with _ are skipped

5. Installation ​

bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
+ \ No newline at end of file diff --git a/src/docs/index.md b/src/docs/index.md index 91a772f..a609e3e 100644 --- a/src/docs/index.md +++ b/src/docs/index.md @@ -6,7 +6,7 @@ hero: text: Atomic Unified Reactive Engine tagline: Fine-grained reactivity, built-in routing, and modular plugins. All under 2KB. image: - src: /logo.png + src: /logo.svg alt: SigPro Logo actions: - theme: brand