natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

correct Docs

Browse Source
This commit is contained in:
natxocc
2026-03-27 16:29:31 +01:00
parent 25481a2201
commit f3aa49a100
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/api/html.md
View File

@@ -1,6 +1,6 @@
# The DOM Factory: `$html( )` # The DOM Factory: `$html( )`
`$html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses `$.watch` to maintain a live, high-performance link between your Signals and the Document Object Model. `$html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses `$watch` to maintain a live, high-performance link between your Signals and the Document Object Model.
## Function Signature ## Function Signature
@@ -34,7 +34,7 @@ Button({
``` ```
### 3. Reactive Attributes (One-Way) ### 3. Reactive Attributes (One-Way)
If an attribute value is a **function** (like a Signal), `$html` creates an internal **`$.watch`** to keep the DOM in sync with the state. If an attribute value is a **function** (like a Signal), `$html` creates an internal **`$watch`** to keep the DOM in sync with the state.
```javascript ```javascript
Div({ Div({
@@ -59,7 +59,7 @@ Input({
> **Note:** To use a Signal as **read-only** in an input, wrap it in an anonymous function: `value: () => username()`. > **Note:** To use a Signal as **read-only** in an input, wrap it in an anonymous function: `value: () => username()`.
### 5. Reactive Children ### 5. Reactive Children
Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using `$.watch` for that specific part of the DOM. Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using `$watch` for that specific part of the DOM.
```javascript ```javascript
Div({}, [ Div({}, [
@@ -73,8 +73,8 @@ Div({}, [
## Memory Management (Internal) ## Memory Management (Internal)
Every element created with `$html` is "self-aware" regarding its reactive dependencies. Every element created with `$html` is "self-aware" regarding its reactive dependencies.
* **`._cleanups`**: A hidden `Set` attached to the element that stores all `stop()` functions from its internal `$.watch` calls and event listeners. * **`._cleanups`**: A hidden `Set` attached to the element that stores all `stop()` functions from its internal `$watch` calls and event listeners.
* **Lifecycle**: When an element is removed by a Controller (`$.if`, `$.for`, or `$.router`), SigPro performs a recursive **"sweep"** to execute these cleanups, ensuring **zero memory leaks**. * **Lifecycle**: When an element is removed by a Controller (`$if`, `$for`, or `$router`), SigPro performs a recursive **"sweep"** to execute these cleanups, ensuring **zero memory leaks**.
--- ---

4
docs/api/if.md
View File

@@ -57,8 +57,8 @@ $if(() => user.isLogged(),
One of the core strengths of `$if` is its integrated **Cleanup** logic. SigPro ensures that when a branch is swapped out, it is completely purged. One of the core strengths of `$if` is its integrated **Cleanup** logic. SigPro ensures that when a branch is swapped out, it is completely purged.
1. **Stop Watchers**: All `$.watch` calls inside the inactive branch are permanently stopped. 1. **Stop Watchers**: All `$watch` calls inside the inactive branch are permanently stopped.
2. **Unbind Events**: Event listeners attached via `$.html` are removed. 2. **Unbind Events**: Event listeners attached via `$html` are removed.
3. **Recursive Sweep**: SigPro performs a deep "sweep" of the removed branch to ensure no nested reactive effects remain active. 3. **Recursive Sweep**: SigPro performs a deep "sweep" of the removed branch to ensure no nested reactive effects remain active.

12
docs/vite/plugin.md
View File

@@ -54,8 +54,8 @@ Thanks to **SigPro's synchronous initialization**, you no longer need to wrap yo
import { $ } from 'sigpro'; import { $ } from 'sigpro';
import { routes } from 'virtual:sigpro-routes'; import { routes } from 'virtual:sigpro-routes';
// The Core already has $.router ready // The Core already has $router ready
$.mount($.router(routes), '#app'); $mount($router(routes), '#app');
``` ```
</div> </div>
@@ -71,12 +71,12 @@ export default () => div({ class: 'layout' }, [
header([ header([
h1("SigPro App"), h1("SigPro App"),
nav([ nav([
button({ onclick: () => $.router.go('/') }, "Home"), button({ onclick: () => $router.go('/') }, "Home"),
button({ onclick: () => $.router.go('/blog') }, "Blog") button({ onclick: () => $router.go('/blog') }, "Blog")
]) ])
]), ]),
// Only the content inside <main> will be swapped reactively // Only the content inside <main> will be swapped reactively
main($.router(routes)) main($router(routes))
]); ]);
``` ```
@@ -132,7 +132,7 @@ The plugin follows a simple convention to transform your file system into a rout
## 5. How it Works (Vite Virtual Module) ## 5. How it Works (Vite Virtual Module)
The plugin generates a virtual module named `virtual:sigpro-routes`. This module exports an array of objects compatible with `$.router()`: The plugin generates a virtual module named `virtual:sigpro-routes`. This module exports an array of objects compatible with `$router()`:
```javascript ```javascript
// Internal representation generated by the plugin // Internal representation generated by the plugin