⚡ 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.

Reactive Proxies ($$)

The $$() function creates a deep reactive proxy that automatically tracks nested property access.

// Create a reactive object
const state = $$({
  user: {
    name: "John",
    address: { city: "Madrid" }
  },
  count: 0
});

// Watch changes automatically
$watch(() => {
  console.log(state.user.name); // Auto-tracked
  console.log(state.count);     // Auto-tracked
});

// Mutations trigger updates
state.count = 5;        // Triggers re-render
state.user.name = "Ana"; // Deep property also tracked!

Benefits over manual signals:

No need for $() wrappers on every property
Deep nesting works automatically
Cleaner, more natural syntax
Perfect for complex state objects

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.

6.4 KiB Raw Blame History