diff --git a/docs/404.html b/docs/404.html index 7ceb1d4..c53e0a9 100644 --- a/docs/404.html +++ b/docs/404.html @@ -17,7 +17,7 @@
- + \ No newline at end of file diff --git a/docs/api/html.html b/docs/api/html.html index cb92ba3..764423a 100644 --- a/docs/api/html.html +++ b/docs/api/html.html @@ -43,7 +43,7 @@ // Is exactly equivalent to: $.html("div", { class: "wrapper" }, [ $.html("span", {}, "Hello") ]) - + \ No newline at end of file diff --git a/docs/api/mount.html b/docs/api/mount.html index 8cb7395..6e20bb0 100644 --- a/docs/api/mount.html +++ b/docs/api/mount.html @@ -13,7 +13,7 @@ - + @@ -31,11 +31,11 @@ }; // Mount only the counter into a specific sidebar div -$.mount(Counter, '#sidebar-widget');

πŸ”„ How it Works (Lifecycle & Saneamiento) ​

When $.mount is executed, it performs these critical steps to ensure a leak-free environment:

  1. Duplicate Detection: If you call $.mount on a target that already has a SigPro instance, it automatically calls .destroy() on the previous instance. This prevents "Zombie Effects" from stacking in memory.
  2. Internal Scoping: It executes the component function inside an internal Reactive Owner. This captures every $.watch and event listener created during the render.
  3. Target Injection: It clears the target using replaceChildren() and appends the new component.
  4. Runtime Creation: It returns a control object:

πŸ›‘ Manual Unmounting ​

While SigPro handles most cleanups automatically (via $.If, $.For, and $.router), you can manually destroy any mounted instance. This is vital for imperatively managed UI like Toasts or Modals.

javascript
const instance = $.mount(MyToast, '#toast-container');
+$.mount(Counter, '#sidebar-widget');

πŸ”„ How it Works (Lifecycle & Cleanup) ​

When $.mount is executed, it performs these critical steps to ensure a leak-free environment:

  1. Duplicate Detection: If you call $.mount on a target that already has a SigPro instance, it automatically calls .destroy() on the previous instance. This prevents "Zombie Effects" from stacking in memory.
  2. Internal Scoping: It executes the component function inside an internal Reactive Owner. This captures every $.watch and event listener created during the render.
  3. Target Injection: It clears the target using replaceChildren() and appends the new component.
  4. Runtime Creation: It returns a control object:

πŸ›‘ Manual Unmounting ​

While SigPro handles most cleanups automatically (via $.If, $.For, and $.router), you can manually destroy any mounted instance. This is vital for imperatively managed UI like Toasts or Modals.

javascript
const instance = $.mount(MyToast, '#toast-container');
 
 // Later, to remove the toast and kill its reactivity:
-instance.destroy();

πŸ’‘ Summary Cheat Sheet ​

GoalCode Pattern
Mount to body$.mount(App)
Mount to CSS Selector$.mount(App, '#root')
Mount to DOM Node$.mount(App, myElement)
Clean & Re-mountCalling $.mount again on the same target
Total Saneamientoconst app = $.mount(App); app.destroy();
- +instance.destroy();

πŸ’‘ Summary Cheat Sheet ​

GoalCode Pattern
Mount to body$.mount(App)
Mount to CSS Selector$.mount(App, '#root')
Mount to DOM Node$.mount(App, myElement)
Clean & Re-mountCalling $.mount again on the same target
Total Cleanupconst app = $.mount(App); app.destroy();
+ \ No newline at end of file diff --git a/docs/api/quick.html b/docs/api/quick.html index 2e7a023..d765e7b 100644 --- a/docs/api/quick.html +++ b/docs/api/quick.html @@ -13,14 +13,14 @@ - + -
SigPro

Appearance

⚑ Quick API Reference ​

SigPro is a high-performance micro-framework that updates the Real DOM surgically. No Virtual DOM, no unnecessary re-renders, and built-in Saneamiento (memory cleanup).

🟒 Core Functions ​

FunctionSignatureDescription
$(val, key?)(any, string?) => SignalCreates a Signal. If key is provided, it persists in localStorage.
$(fn)(function) => ComputedCreates a Computed Signal that auto-updates when its dependencies change.
$.watch(fn)(function) => stopFnAutomatic Mode: Tracks any signal touched inside. Returns a stop function.
$.watch(deps, fn)(Array, function) => stopFnExplicit Mode: Only runs when signals in deps change. Used for Saneamiento.
$.html(tag, props, kids)(string, obj, any) => ElementThe low-level DOM factory. Attaches ._cleanups to every element.
$.If(cond, then, else?)(Signal, fn, fn?) => NodeReactive conditional. Automatically destroys the "else" branch memory.
$.For(list, itemFn)(Signal, fn) => NodeOptimized list renderer. Manages individual item lifecycles.
$.router(routes)(Array) => ElementHash-based SPA router. Uses Explicit Watch to prevent memory leaks.
$.mount(node, target)(any, string|Node) => RuntimeEntry point. Creates a root instance with .destroy() capabilities.

πŸ—οΈ Element Constructors (Tags) ​

SigPro provides PascalCase wrappers for all standard HTML5 tags (e.g., Div, Span, Button).

Syntax Pattern ​

javascript
Tag({ attributes }, [children])

Attribute & Content Handling ​

PatternCode ExampleBehavior
Staticclass: "text-red"Standard HTML attribute string.
Reactivedisabled: isLoadingUpdates automatically via internal $.watch.
Two-way$value: usernameBinding Operator: Syncs input $\leftrightarrow$ signal both ways.
TextP({}, () => count())Updates text node surgically without re-rendering the P.
Booleanhidden: isHiddenToggles the attribute based on signal truthiness.
- +
SigPro

Appearance

⚑ Quick API Reference ​

SigPro is a high-performance micro-framework that updates the Real DOM surgically. No Virtual DOM, no unnecessary re-renders, and built-in Cleanup (memory cleanup).

🟒 Core Functions ​

FunctionSignatureDescription
$(val, key?)(any, string?) => SignalCreates a Signal. If key is provided, it persists in localStorage.
$(fn)(function) => ComputedCreates a Computed Signal that auto-updates when its dependencies change.
$.watch(fn)(function) => stopFnAutomatic Mode: Tracks any signal touched inside. Returns a stop function.
$.watch(deps, fn)(Array, function) => stopFnExplicit Mode: Only runs when signals in deps change. Used for Cleanup.
$.html(tag, props, kids)(string, obj, any) => ElementThe low-level DOM factory. Attaches ._cleanups to every element.
$.If(cond, then, else?)(Signal, fn, fn?) => NodeReactive conditional. Automatically destroys the "else" branch memory.
$.For(list, itemFn)(Signal, fn) => NodeOptimized list renderer. Manages individual item lifecycles.
$.router(routes)(Array) => ElementHash-based SPA router. Uses Explicit Watch to prevent memory leaks.
$.mount(node, target)(any, string|Node) => RuntimeEntry point. Creates a root instance with .destroy() capabilities.

πŸ—οΈ Element Constructors (Tags) ​

SigPro provides PascalCase wrappers for all standard HTML5 tags (e.g., Div, Span, Button).

Syntax Pattern ​

javascript
Tag({ attributes }, [children])

Attribute & Content Handling ​

PatternCode ExampleBehavior
Staticclass: "text-red"Standard HTML attribute string.
Reactivedisabled: isLoadingUpdates automatically via internal $.watch.
Two-way$value: usernameBinding Operator: Syncs input $\leftrightarrow$ signal both ways.
TextP({}, () => count())Updates text node surgically without re-rendering the P.
Booleanhidden: isHiddenToggles the attribute based on signal truthiness.
+ \ No newline at end of file diff --git a/docs/api/router.html b/docs/api/router.html index ca850fe..c513a41 100644 --- a/docs/api/router.html +++ b/docs/api/router.html @@ -41,7 +41,7 @@ padding: 2rem; animation: fadeIn 0.2s ease-in; } - + \ No newline at end of file diff --git a/docs/api/signal.html b/docs/api/signal.html index 6c51831..71e9da8 100644 --- a/docs/api/signal.html +++ b/docs/api/signal.html @@ -33,7 +33,7 @@ // Adds "C" using the previous state list(prev => [...prev, "C"]); - + \ No newline at end of file diff --git a/docs/api/tags.html b/docs/api/tags.html index 6a9c4e5..649c798 100644 --- a/docs/api/tags.html +++ b/docs/api/tags.html @@ -13,7 +13,7 @@ - + @@ -37,7 +37,7 @@ type: "text", placeholder: "Search...", $value: search // UI updates Signal AND Signal updates UI -});

Dynamic Flow & Saneamiento ​

Combine tags with Core controllers for high-performance rendering. SigPro automatically cleans up the $.watch instances when nodes are removed.

javascript
const items = $(["Apple", "Banana", "Cherry"]);
+});

Dynamic Flow & Cleanup ​

Combine tags with Core controllers for high-performance rendering. SigPro automatically cleans up the $.watch instances when nodes are removed.

javascript
const items = $(["Apple", "Banana", "Cherry"]);
 
 Ul({ class: "list-disc" }, [
   $.For(items, (item) => Li(item))
@@ -55,7 +55,7 @@
     }, name)
   ])
 );
State ($online)Rendered HTMLMemory Management
true<div class="flex..."><span class="w-3..."></span><p class="text-bold">John</p></div>Watcher active
false<div class="flex..."><span hidden class="w-3..."></span><p class="text-gray-400">John</p></div>Attribute synced
- + \ No newline at end of file diff --git a/docs/api/watch.html b/docs/api/watch.html index 14ff2d6..1214407 100644 --- a/docs/api/watch.html +++ b/docs/api/watch.html @@ -13,7 +13,7 @@ - + @@ -28,7 +28,7 @@ $.watch(() => { // Re-runs every time 'count' changes console.log(`Count is: ${count()}`); -});

2. Explicit Mode (Advanced Saneamiento) πŸš€ ​

This mode isolates execution. The callback only triggers when the signals in the array change. Any other signal accessed inside the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.

javascript
const sPath = $("/home");
+});

2. Explicit Mode (Advanced Cleanup) πŸš€ ​

This mode isolates execution. The callback only triggers when the signals in the array change. Any other signal accessed inside the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.

javascript
const sPath = $("/home");
 const user = $("Admin");
 
 $.watch([sPath], () => {
@@ -52,7 +52,7 @@
 // This triggers only ONE re-run.
 a(1);
 b(2);
- + \ No newline at end of file diff --git a/docs/assets/api_mount.md.BiKjH18I.js b/docs/assets/api_mount.md.CoM2SFqU.js similarity index 77% rename from docs/assets/api_mount.md.BiKjH18I.js rename to docs/assets/api_mount.md.CoM2SFqU.js index 18befd1..c08aeed 100644 --- a/docs/assets/api_mount.md.BiKjH18I.js +++ b/docs/assets/api_mount.md.CoM2SFqU.js @@ -10,7 +10,7 @@ import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k }; // Mount only the counter into a specific sidebar div -$.mount(Counter, '#sidebar-widget');

πŸ”„ How it Works (Lifecycle & Saneamiento) ​

When $.mount is executed, it performs these critical steps to ensure a leak-free environment:

  1. Duplicate Detection: If you call $.mount on a target that already has a SigPro instance, it automatically calls .destroy() on the previous instance. This prevents "Zombie Effects" from stacking in memory.
  2. Internal Scoping: It executes the component function inside an internal Reactive Owner. This captures every $.watch and event listener created during the render.
  3. Target Injection: It clears the target using replaceChildren() and appends the new component.
  4. Runtime Creation: It returns a control object:

πŸ›‘ Manual Unmounting ​

While SigPro handles most cleanups automatically (via $.If, $.For, and $.router), you can manually destroy any mounted instance. This is vital for imperatively managed UI like Toasts or Modals.

javascript
const instance = $.mount(MyToast, '#toast-container');
+$.mount(Counter, '#sidebar-widget');

πŸ”„ How it Works (Lifecycle & Cleanup) ​

When $.mount is executed, it performs these critical steps to ensure a leak-free environment:

  1. Duplicate Detection: If you call $.mount on a target that already has a SigPro instance, it automatically calls .destroy() on the previous instance. This prevents "Zombie Effects" from stacking in memory.
  2. Internal Scoping: It executes the component function inside an internal Reactive Owner. This captures every $.watch and event listener created during the render.
  3. Target Injection: It clears the target using replaceChildren() and appends the new component.
  4. Runtime Creation: It returns a control object:

πŸ›‘ Manual Unmounting ​

While SigPro handles most cleanups automatically (via $.If, $.For, and $.router), you can manually destroy any mounted instance. This is vital for imperatively managed UI like Toasts or Modals.

javascript
const instance = $.mount(MyToast, '#toast-container');
 
 // Later, to remove the toast and kill its reactivity:
-instance.destroy();

πŸ’‘ Summary Cheat Sheet ​

GoalCode Pattern
Mount to body$.mount(App)
Mount to CSS Selector$.mount(App, '#root')
Mount to DOM Node$.mount(App, myElement)
Clean & Re-mountCalling $.mount again on the same target
Total Saneamientoconst app = $.mount(App); app.destroy();
`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default}; +instance.destroy();

πŸ’‘ Summary Cheat Sheet ​

GoalCode Pattern
Mount to body$.mount(App)
Mount to CSS Selector$.mount(App, '#root')
Mount to DOM Node$.mount(App, myElement)
Clean & Re-mountCalling $.mount again on the same target
Total Cleanupconst app = $.mount(App); app.destroy();
`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default}; diff --git a/docs/assets/api_mount.md.BiKjH18I.lean.js b/docs/assets/api_mount.md.CoM2SFqU.lean.js similarity index 100% rename from docs/assets/api_mount.md.BiKjH18I.lean.js rename to docs/assets/api_mount.md.CoM2SFqU.lean.js diff --git a/docs/assets/api_quick.md.Dw-DUc7L.js b/docs/assets/api_quick.md.Dw-DUc7L.js new file mode 100644 index 0000000..88cb436 --- /dev/null +++ b/docs/assets/api_quick.md.Dw-DUc7L.js @@ -0,0 +1 @@ +import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚑ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),o={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l('

⚑ Quick API Reference ​

SigPro is a high-performance micro-framework that updates the Real DOM surgically. No Virtual DOM, no unnecessary re-renders, and built-in Cleanup (memory cleanup).

🟒 Core Functions ​

FunctionSignatureDescription
$(val, key?)(any, string?) => SignalCreates a Signal. If key is provided, it persists in localStorage.
$(fn)(function) => ComputedCreates a Computed Signal that auto-updates when its dependencies change.
$.watch(fn)(function) => stopFnAutomatic Mode: Tracks any signal touched inside. Returns a stop function.
$.watch(deps, fn)(Array, function) => stopFnExplicit Mode: Only runs when signals in deps change. Used for Cleanup.
$.html(tag, props, kids)(string, obj, any) => ElementThe low-level DOM factory. Attaches ._cleanups to every element.
$.If(cond, then, else?)(Signal, fn, fn?) => NodeReactive conditional. Automatically destroys the "else" branch memory.
$.For(list, itemFn)(Signal, fn) => NodeOptimized list renderer. Manages individual item lifecycles.
$.router(routes)(Array) => ElementHash-based SPA router. Uses Explicit Watch to prevent memory leaks.
$.mount(node, target)(any, string|Node) => RuntimeEntry point. Creates a root instance with .destroy() capabilities.

πŸ—οΈ Element Constructors (Tags) ​

SigPro provides PascalCase wrappers for all standard HTML5 tags (e.g., Div, Span, Button).

Syntax Pattern ​

javascript
Tag({ attributes }, [children])

Attribute & Content Handling ​

PatternCode ExampleBehavior
Staticclass: "text-red"Standard HTML attribute string.
Reactivedisabled: isLoadingUpdates automatically via internal $.watch.
Two-way$value: usernameBinding Operator: Syncs input $\\leftrightarrow$ signal both ways.
TextP({}, () => count())Updates text node surgically without re-rendering the P.
Booleanhidden: isHiddenToggles the attribute based on signal truthiness.
',11)])])}const u=e(o,[["render",d]]);export{f as __pageData,u as default}; diff --git a/docs/assets/api_quick.md.QL5306xO.lean.js b/docs/assets/api_quick.md.Dw-DUc7L.lean.js similarity index 79% rename from docs/assets/api_quick.md.QL5306xO.lean.js rename to docs/assets/api_quick.md.Dw-DUc7L.lean.js index 3602d44..9ebf4e8 100644 --- a/docs/assets/api_quick.md.QL5306xO.lean.js +++ b/docs/assets/api_quick.md.Dw-DUc7L.lean.js @@ -1 +1 @@ -import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚑ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),o={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l("",11)])])}const y=e(o,[["render",d]]);export{f as __pageData,y as default}; +import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚑ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),o={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l("",11)])])}const u=e(o,[["render",d]]);export{f as __pageData,u as default}; diff --git a/docs/assets/api_quick.md.QL5306xO.js b/docs/assets/api_quick.md.QL5306xO.js deleted file mode 100644 index ede3496..0000000 --- a/docs/assets/api_quick.md.QL5306xO.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚑ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),o={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l('

⚑ Quick API Reference ​

SigPro is a high-performance micro-framework that updates the Real DOM surgically. No Virtual DOM, no unnecessary re-renders, and built-in Saneamiento (memory cleanup).

🟒 Core Functions ​

FunctionSignatureDescription
$(val, key?)(any, string?) => SignalCreates a Signal. If key is provided, it persists in localStorage.
$(fn)(function) => ComputedCreates a Computed Signal that auto-updates when its dependencies change.
$.watch(fn)(function) => stopFnAutomatic Mode: Tracks any signal touched inside. Returns a stop function.
$.watch(deps, fn)(Array, function) => stopFnExplicit Mode: Only runs when signals in deps change. Used for Saneamiento.
$.html(tag, props, kids)(string, obj, any) => ElementThe low-level DOM factory. Attaches ._cleanups to every element.
$.If(cond, then, else?)(Signal, fn, fn?) => NodeReactive conditional. Automatically destroys the "else" branch memory.
$.For(list, itemFn)(Signal, fn) => NodeOptimized list renderer. Manages individual item lifecycles.
$.router(routes)(Array) => ElementHash-based SPA router. Uses Explicit Watch to prevent memory leaks.
$.mount(node, target)(any, string|Node) => RuntimeEntry point. Creates a root instance with .destroy() capabilities.

πŸ—οΈ Element Constructors (Tags) ​

SigPro provides PascalCase wrappers for all standard HTML5 tags (e.g., Div, Span, Button).

Syntax Pattern ​

javascript
Tag({ attributes }, [children])

Attribute & Content Handling ​

PatternCode ExampleBehavior
Staticclass: "text-red"Standard HTML attribute string.
Reactivedisabled: isLoadingUpdates automatically via internal $.watch.
Two-way$value: usernameBinding Operator: Syncs input $\\leftrightarrow$ signal both ways.
TextP({}, () => count())Updates text node surgically without re-rendering the P.
Booleanhidden: isHiddenToggles the attribute based on signal truthiness.
',11)])])}const y=e(o,[["render",d]]);export{f as __pageData,y as default}; diff --git a/docs/assets/api_tags.md.DAemWpgh.js b/docs/assets/api_tags.md.BKWIb8mV.js similarity index 93% rename from docs/assets/api_tags.md.DAemWpgh.js rename to docs/assets/api_tags.md.BKWIb8mV.js index 06c28f5..a3450a9 100644 --- a/docs/assets/api_tags.md.DAemWpgh.js +++ b/docs/assets/api_tags.md.BKWIb8mV.js @@ -16,7 +16,7 @@ import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c type: "text", placeholder: "Search...", $value: search // UI updates Signal AND Signal updates UI -});

Dynamic Flow & Saneamiento ​

Combine tags with Core controllers for high-performance rendering. SigPro automatically cleans up the $.watch instances when nodes are removed.

javascript
const items = $(["Apple", "Banana", "Cherry"]);
+});

Dynamic Flow & Cleanup ​

Combine tags with Core controllers for high-performance rendering. SigPro automatically cleans up the $.watch instances when nodes are removed.

javascript
const items = $(["Apple", "Banana", "Cherry"]);
 
 Ul({ class: "list-disc" }, [
   $.For(items, (item) => Li(item))
diff --git a/docs/assets/api_tags.md.DAemWpgh.lean.js b/docs/assets/api_tags.md.BKWIb8mV.lean.js
similarity index 100%
rename from docs/assets/api_tags.md.DAemWpgh.lean.js
rename to docs/assets/api_tags.md.BKWIb8mV.lean.js
diff --git a/docs/assets/api_watch.md.B4pyArWy.js b/docs/assets/api_watch.md.BEM6Qssx.js
similarity index 92%
rename from docs/assets/api_watch.md.B4pyArWy.js
rename to docs/assets/api_watch.md.BEM6Qssx.js
index dca927c..0809a92 100644
--- a/docs/assets/api_watch.md.B4pyArWy.js
+++ b/docs/assets/api_watch.md.BEM6Qssx.js
@@ -7,7 +7,7 @@ import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o
 $.watch(() => {
   // Re-runs every time 'count' changes
   console.log(\`Count is: \${count()}\`);
-});

2. Explicit Mode (Advanced Saneamiento) πŸš€ ​

This mode isolates execution. The callback only triggers when the signals in the array change. Any other signal accessed inside the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.

javascript
const sPath = $("/home");
+});

2. Explicit Mode (Advanced Cleanup) πŸš€ ​

This mode isolates execution. The callback only triggers when the signals in the array change. Any other signal accessed inside the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.

javascript
const sPath = $("/home");
 const user = $("Admin");
 
 $.watch([sPath], () => {
diff --git a/docs/assets/api_watch.md.B4pyArWy.lean.js b/docs/assets/api_watch.md.BEM6Qssx.lean.js
similarity index 100%
rename from docs/assets/api_watch.md.B4pyArWy.lean.js
rename to docs/assets/api_watch.md.BEM6Qssx.lean.js
diff --git a/docs/assets/install.md.Cel7_1B6.js b/docs/assets/install.md.HK-a2_Fb.js
similarity index 96%
rename from docs/assets/install.md.Cel7_1B6.js
rename to docs/assets/install.md.HK-a2_Fb.js
index 4c669c7..b68b91f 100644
--- a/docs/assets/install.md.Cel7_1B6.js
+++ b/docs/assets/install.md.HK-a2_Fb.js
@@ -1,11 +1,11 @@
-import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`
Installation & Setup ​
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
1. Installation ​
Choose the method that best fits your workflow:
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
html
<script type="module">
+import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`
Installation & Setup ​
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
1. Installation ​
Choose the method that best fits your workflow:
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
html
<script type="module">
   // Import the core and UI components
   import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
   import { UI } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm';
   
   // Initialize UI components globally
   UI($);
-</script>
2. Quick Start Examples ​
SigPro uses PascalCase for Tag Helpers (e.g., Div, Button) to provide a clean, component-like syntax without needing JSX.
javascript
// File: App.js
+</script>
2. Quick Start Examples ​
SigPro uses PascalCase for Tag Helpers (e.g., Div, Button) to provide a clean, component-like syntax without needing JSX.
javascript
// File: App.js
 import { $ } from 'sigpro'; 
 
 export const App = () => {
diff --git a/docs/assets/install.md.Cel7_1B6.lean.js b/docs/assets/install.md.HK-a2_Fb.lean.js
similarity index 100%
rename from docs/assets/install.md.Cel7_1B6.lean.js
rename to docs/assets/install.md.HK-a2_Fb.lean.js
diff --git a/docs/hashmap.json b/docs/hashmap.json
index 70c090f..8515533 100644
--- a/docs/hashmap.json
+++ b/docs/hashmap.json
@@ -1 +1 @@
-{"api_html.md":"DSCIaSlE","api_mount.md":"BiKjH18I","api_quick.md":"QL5306xO","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"DAemWpgh","api_watch.md":"B4pyArWy","index.md":"By6smViD","install.md":"Cel7_1B6","ui_quick.md":"CsppjR8J","vite_plugin.md":"CTs8LDIL"}
+{"api_html.md":"DSCIaSlE","api_mount.md":"CoM2SFqU","api_quick.md":"Dw-DUc7L","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"BKWIb8mV","api_watch.md":"BEM6Qssx","index.md":"By6smViD","install.md":"HK-a2_Fb","ui_quick.md":"CsppjR8J","vite_plugin.md":"CTs8LDIL"}
diff --git a/docs/index.html b/docs/index.html
index c5cd6fb..90d1828 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -20,7 +20,7 @@
   
   
     
SigPro
Appearance
SigProAtomic Unified Reactive Engine
High-precision atomic reactivity. No Virtual DOM. No compiler. No dependencies.
Get Started
View on GitHub
SigPro Logo
βš›οΈ Atomic Reactivity
Powered by fine-grained Signals. Forget about whole-component re-renders; SigPro updates only the specific text node or attribute that changed.
πŸš€ Zero Virtual DOM
By eliminating the V-DOM diffing layer, SigPro performs surgical, direct manipulations on the real DOM, removing memory and CPU overhead.
πŸ› οΈ No Compiler Required
Pure Vanilla JS. No Babel, no JSX, no complex build steps. Standard JavaScript that runs natively in the browser with maximum performance.
πŸ“¦ Ultra-Lightweight
The core engineβ€”including reactivity, DOM creation, persistence, and routingβ€”is under 2KB. Perfect for performance-critical applications.
Redefining Modern Reactivity ​
SigPro is not just another framework; it is a high-performance engine. While other libraries add layers of abstraction that slow down execution, SigPro returns to the essence of the web, leveraging the power of modern browser engines.
Why SigPro? ​
⚑️ Surgical DOM Efficiency ​
Unlike React or Vue, SigPro doesn't compare element trees. When a signal changes, SigPro knows exactly which DOM node depends on it and updates it instantly. It is reactive precision at its finest.
πŸ”Œ Modular Plugin System ​
The core is sacred. Any extra functionalityβ€”Routing, UI Helpers, or State Persistenceβ€”is integrated through a polymorphic plugin system. Load only what your application truly needs.
πŸ’Ύ Native Persistence ​
SigPro features first-class support for localStorage. Synchronizing your application state with persistent storage is as simple as providing a key when initializing your Signal.
🚦 Built-in Hash Routing ​
A robust routing system that supports Native Lazy Loading out of the box. Load your components only when the user navigates to them, keeping initial load times near zero.
The "No-Build" Philosophy ​
In an ecosystem obsessed with compilers, SigPro bets on standardization. Write code today that will still run 10 years from now, without depending on build tools that will eventually become obsolete.
"The best way to optimize code is to not have to process it at all."
Community & Vision ​
SigPro is an open-source project focused on simplicity and extreme speed. Designed for developers who love the web platform and hate unnecessary "bloatware".
text
Built with ❀️ by NatxoCC for the Modern Web.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/install.html b/docs/install.html
index 1bb4651..b699933 100644
--- a/docs/install.html
+++ b/docs/install.html
@@ -13,20 +13,20 @@
     
     
     
-    
+    
     
     
     
   
   
-    
SigPro
Appearance
Installation & Setup ​
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
1. Installation ​
Choose the method that best fits your workflow:
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
html
<script type="module">
+    
SigPro
Appearance
Installation & Setup ​
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
1. Installation ​
Choose the method that best fits your workflow:
bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
html
<script type="module">
   // Import the core and UI components
   import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
   import { UI } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm';
   
   // Initialize UI components globally
   UI($);
-</script>
2. Quick Start Examples ​
SigPro uses PascalCase for Tag Helpers (e.g., Div, Button) to provide a clean, component-like syntax without needing JSX.
javascript
// File: App.js
+</script>
2. Quick Start Examples ​
SigPro uses PascalCase for Tag Helpers (e.g., Div, Button) to provide a clean, component-like syntax without needing JSX.
javascript
// File: App.js
 import { $ } from 'sigpro'; 
 
 export const App = () => {
@@ -71,7 +71,7 @@
   </script>
 </body>
 </html>
3. Global by Design ​
One of SigPro's core strengths is its Global API, which eliminates "Import Hell".
  • The $ Function: Once loaded, it attaches itself to window.$. It handles state, effects, and DOM mounting.
  • Tag Helpers (PascalCase): Common HTML tags (Div, Span, Button, Input, etc.) are automatically registered in the global scope.
  • Custom Components: We recommend using PascalCase (e.g., UserCard) or prefixes like _Input to keep your code organized and distinguish your logic from standard tags.
4. Why no build step? ​
Because SigPro uses native ES Modules and standard JavaScript functions to generate the DOM, you don't actually need a compiler like Babel or a transformer for JSX.
  • Development: Just save and refresh. Pure JS, no "transpilation" required.
  • Performance: Extremely lightweight. Use any modern bundler (Vite, esbuild) only when you are ready to minify and tree-shake for production.
5. Why SigPro? (The Competitive Edge) ​
SigPro stands out by removing the "Build Step" tax and the "Virtual DOM" overhead. It is the closest you can get to writing raw HTML/JS while maintaining modern reactivity.
FeatureSigProSolidJSSvelteReactVue
Bundle Size~2KB~7KB~4KB~40KB+~30KB
DOM StrategyDirect DOMDirect DOMCompiled DOMVirtual DOMVirtual DOM
ReactivityFine-grainedFine-grainedCompiledRe-rendersProxies
Build StepOptionalRequiredRequiredRequiredOptional
Learning CurveMinimalMediumLowHighMedium
InitializationUltra-FastVery FastFastSlowMedium
6. Key Advantages ​
  • Extreme Performance: No Virtual DOM reconciliation. SigPro updates the specific node or attribute instantly when a Signal changes.
  • Fine-Grained Reactivity: State changes only trigger updates where the data is actually used, not on the entire component.
  • Native Web Standards: Everything is a standard JS function. No custom template syntax to learn.
  • Zero Magic: No hidden compilers. What you write is what runs in the browser.
  • Global by Design: Tag Helpers and the $ function are available globally to eliminate "Import Hell" and keep your code clean.
7. Summary ​
SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you gain the benefits of a modern library with the weight of a utility script.
Because, in the end... why fight the web when we can embrace it?

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/ui/quick.html b/docs/ui/quick.html
index c3108c0..b906680 100644
--- a/docs/ui/quick.html
+++ b/docs/ui/quick.html
@@ -63,7 +63,7 @@
 
 // Access translated strings (Returns a signal that tracks the current locale)
 const t = tt("confirm");
5. Best Practices ​
  • Use $ for Reactivity: If a property starts with $, the component expects a Signal (e.g., $value: mySignal).
  • Automatic Cleaning: You don't need to manually destroy these components if they are inside a $.If or $.For. SigPro's core will "sweep" their internal watchers automatically.
  • Manual Cleanups: If you build custom components using setInterval or third-party observers, always add the stop functions to the element's ._cleanups Set.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/vite/plugin.html b/docs/vite/plugin.html
index ce6afa0..ed3b7f1 100644
--- a/docs/vite/plugin.html
+++ b/docs/vite/plugin.html
@@ -68,7 +68,7 @@
   { path: '/users/:id', component: () => import('/src/pages/users/[id].js') },
   // ...
 ];
Because it uses dynamic import(), Vite automatically performs Code Splitting, meaning each page is its own small JS file that only loads when the user navigates to it.
- + \ No newline at end of file diff --git a/src/docs/api/mount.md b/src/docs/api/mount.md index f6b47d1..874d26c 100644 --- a/src/docs/api/mount.md +++ b/src/docs/api/mount.md @@ -47,7 +47,7 @@ $.mount(Counter, '#sidebar-widget'); --- -## πŸ”„ How it Works (Lifecycle & Saneamiento) +## πŸ”„ How it Works (Lifecycle & Cleanup) When `$.mount` is executed, it performs these critical steps to ensure a leak-free environment: @@ -81,5 +81,5 @@ instance.destroy(); | **Mount to CSS Selector** | `$.mount(App, '#root')` | | **Mount to DOM Node** | `$.mount(App, myElement)` | | **Clean & Re-mount** | Calling `$.mount` again on the same target | -| **Total Saneamiento** | `const app = $.mount(App); app.destroy();` | +| **Total Cleanup** | `const app = $.mount(App); app.destroy();` | diff --git a/src/docs/api/quick.md b/src/docs/api/quick.md index 3718f85..75e5fdb 100644 --- a/src/docs/api/quick.md +++ b/src/docs/api/quick.md @@ -1,6 +1,6 @@ # ⚑ Quick API Reference -SigPro is a high-performance micro-framework that updates the **Real DOM** surgically. No Virtual DOM, no unnecessary re-renders, and built-in **Saneamiento** (memory cleanup). +SigPro is a high-performance micro-framework that updates the **Real DOM** surgically. No Virtual DOM, no unnecessary re-renders, and built-in **Cleanup** (memory cleanup). ## 🟒 Core Functions @@ -9,7 +9,7 @@ SigPro is a high-performance micro-framework that updates the **Real DOM** surgi | **`$(val, key?)`** | `(any, string?) => Signal` | Creates a **Signal**. If `key` is provided, it persists in `localStorage`. | | **`$(fn)`** | `(function) => Computed` | Creates a **Computed Signal** that auto-updates when its dependencies change. | | **`$.watch(fn)`** | `(function) => stopFn` | **Automatic Mode:** Tracks any signal touched inside. Returns a stop function. | -| **`$.watch(deps, fn)`** | `(Array, function) => stopFn` | **Explicit Mode:** Only runs when signals in `deps` change. Used for Saneamiento. | +| **`$.watch(deps, fn)`** | `(Array, function) => stopFn` | **Explicit Mode:** Only runs when signals in `deps` change. Used for Cleanup. | | **`$.html(tag, props, kids)`** | `(string, obj, any) => Element` | The low-level DOM factory. Attaches `._cleanups` to every element. | | **`$.If(cond, then, else?)`** | `(Signal, fn, fn?) => Node` | Reactive conditional. Automatically destroys the "else" branch memory. | | **`$.For(list, itemFn)`** | `(Signal, fn) => Node` | Optimized list renderer. Manages individual item lifecycles. | diff --git a/src/docs/api/tags.md b/src/docs/api/tags.md index 1d98698..62b3e82 100644 --- a/src/docs/api/tags.md +++ b/src/docs/api/tags.md @@ -86,7 +86,7 @@ Input({ }); ``` -### Dynamic Flow & Saneamiento +### Dynamic Flow & Cleanup Combine tags with Core controllers for high-performance rendering. SigPro automatically cleans up the `$.watch` instances when nodes are removed. ```javascript const items = $(["Apple", "Banana", "Cherry"]); diff --git a/src/docs/api/watch.md b/src/docs/api/watch.md index 02fcc56..6bb6456 100644 --- a/src/docs/api/watch.md +++ b/src/docs/api/watch.md @@ -35,7 +35,7 @@ $.watch(() => { }); ``` -### 2. Explicit Mode (Advanced Saneamiento) πŸš€ +### 2. Explicit Mode (Advanced Cleanup) πŸš€ This mode **isolates** execution. The callback only triggers when the signals in the array change. Any other signal accessed *inside* the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components. ```javascript