diff --git a/docs/api/quick.md b/docs/api/quick.md index 4e6c353..72cfd4c 100644 --- a/docs/api/quick.md +++ b/docs/api/quick.md @@ -38,18 +38,23 @@ Explore the reactive building blocks of SigPro. $if(cond, then, else?) - (Signal, fn, fn?) => Node + (Signal|bool, fn, fn?) => Node Reactive conditional. Automatically destroys "else" branch memory. - $for(list, itemFn) - (Signal, fn) => Node - Optimized list renderer. Manages individual item lifecycles. + $for(src, render, key) + (Signal, fn, fn) => Node + Keyed Loop: Optimized list renderer. Uses the key function for surgical DOM moves. + + + $router(routes) + (Array) => Node + SPA Router: Hash-based routing with dynamic params (:id) and auto-cleanup. $mount(node, target) (any, string|Node) => Runtime - Entry point. Creates a root instance with .destroy() capabilities. + Entry point. Cleans the target and mounts the app with full lifecycle management. @@ -67,64 +72,43 @@ SigPro provides **PascalCase** wrappers for all standard HTML5 tags (e.g., `Div` 
Tag({ attributes }, [children])
-### Attribute & Content Handling - -Learn how to bind data to your elements effectively. +### Special Attributes & Routing
-
+
-
-

Static

- HTML5 -
- class: "text-red" -

Standard HTML attribute passed as a plain string. No reactivity overhead.

+

Two-way Binding

+ value: mySignal +

Automatic sync for Input, Textarea, and Select. Updates the signal on 'input' or 'change'.

-
+
-
-

Reactive

- SIGNAL -
-
- const isLoading = $(false); - disabled: isLoading -
-

Updates automatically via internal $watch. Only the attribute changes in the DOM.

+

Dynamic Routing

+ $router.to('/user/1') +

Navigate programmatically. Access params via $router.params().id.

-
+
-
-

Two-way Binding

- MAGIC -
- const username = $('Me'); - value: username -

- Automatic Sync: Works out-of-the-box for Input, Textarea, and Checkbox. - It syncs the element ↔ signal both ways without manual event listeners. -

+

Refs & DOM

+ ref: (el) => ... +

Get direct access to the DOM node once it is created.

-
+
-
-

Surgical Text

- FAST -
- P({}, () => count()) -

Updates the specific text node surgically without ever re-rendering the parent P tag.

+

Event Handling

+ onClick: (e) => ... +

Standard events with automatic removeEventListener on destruction.

--- -> [!TIP] -> **Performance Hint:** Always use functions `() => signal()` for dynamic children to ensure SigPro only updates the specific node and not the whole container. +> [!IMPORTANT] +> **Performance Hint:** For lists (`$for`), always provide a unique key function `(item) => item.id` to prevent unnecessary node creation and enable reordering.