sigpro/docs/api/quick.md

⚡ 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

Explore the reactive building blocks of SigPro.

Function	Signature	Description
$(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 dependencies change.
$$(obj)	(object) => Proxy	Creates a Deep Reactive Proxy. Track nested property access automatically. No need for manual signals.
$watch(fn)	(function) => stopFn	Auto 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.
$if(cond, then, else?)	(Signal|bool, fn, fn?) => Node	Reactive conditional. Automatically destroys "else" branch memory.
$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. Cleans the target and mounts the app with full lifecycle management.

---

Element Constructors (Tags)

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

Syntax Pattern

Tag({ attributes }, [children])

Special Attributes & Routing

Two-way Binding

value: mySignal

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

Dynamic Routing

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

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

Refs & DOM

ref: (el) => ...

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

Event Handling

onClick: (e) => ...

Standard events with automatic removeEventListener on destruction.

---

Important

Performance Hint: For lists ($for), always provide a unique key function (item) => item.id to prevent unnecessary node creation and enable reordering.

Tip

Pro Tip: Use $$() for complex nested state objects instead of multiple $() signals. It's cleaner and automatically tracks deep properties.

Tip

Performance Hint: Always use functions () => signal() for dynamic children to ensure SigPro only updates the specific node and not the whole container.