Files
sigpro/docs/api/quick.md
2026-03-28 14:54:15 +01:00

5.9 KiB

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.
$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, fn, fn?) => Node Reactive conditional. Automatically destroys "else" branch memory.
$for(list, itemFn) (Signal, fn) => Node Optimized list renderer. Manages individual item lifecycles.
$mount(node, target) (any, string|Node) => Runtime Entry 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

Tag({ attributes }, [children])

Attribute & Content Handling

Learn how to bind data to your elements effectively.

Static

HTML5
class: "text-red"

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

Reactive

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

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

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.

Surgical Text

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

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


Tip

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