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.

---

Custom API BYOS (Bring Your Own Syntax)

SigPro's core functions are intentionally simple and can be easily renamed in one line to match your preferred coding style.

One-Line Renaming

import { $ as signal, $mount as render, $html as tag, $if as when, $for as each, $watch as effect } from 'sigpro';

// Now use your custom names
const count = signal(0);
effect(() => console.log(count()));

render(() => 
  tag('div', {}, [
    when(count, 
      () => tag('span', {}, 'Positive'),
      () => tag('span', {}, 'Zero or negative')
    )
  ]), 
  '#app'
);

Create React-like Hooks

import * as SigPro from 'sigpro';

const useState = (initial) => {
  const signal = SigPro.$(initial);
  return [signal, (value) => signal(value)];
};

const useEffect = (fn, deps) => {
  deps ? SigPro.$watch(deps, fn) : SigPro.$watch(fn);
};

// Usage
const Counter = () => {
  const [count, setCount] = useState(0);
  useEffect(() => console.log(count()), [count]);
  return SigPro.$html('button', { onClick: () => setCount(count() + 1) }, count);
};

Create Vue-like API

import { $ as ref, $watch as watch, $mount as mount } from 'sigpro';

const computed = (fn) => ref(fn);
const createApp = (component) => ({ mount: (selector) => mount(component, selector) });

// Usage
const count = ref(0);
const double = computed(() => count() * 2);
watch([count], () => console.log(count()));

Global Custom API with sigpro.config.js

Create a central configuration file to reuse your custom naming across the entire project:

// config/sigpro.config.js
import { $ as signal, $mount as render, $html as tag, $if as when, $for as each, $watch as effect } from 'sigpro';

// Re-export everything with your custom names
export { signal, render, tag, when, each, effect };

// Also re-export the original functions if needed
export * from 'sigpro';

// app.js - Import your custom API globally
import { signal, render, tag, when, each, effect } from './config/sigpro.config.js';

// Use your preferred syntax everywhere
const count = signal(0);
const double = signal(() => count() * 2);

effect(() => console.log(`Count: ${count()}, Double: ${double()}`));

const App = () =>
  tag('div', { class: 'p-4' }, [
    tag('h1', {}, () => `Count: ${count()}`),
    tag('button', { onclick: () => count(count() + 1) }, 'Increment')
  ]);

render(App, '#app');

Tip

Why rename? Team preferences, framework migration, or just personal taste. SigPro adapts to you, not the other way around.

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.