Getting Started

SigPro is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.

1. Installation

You can install SigPro via your favorite package manager:

npm

npm install SigPro

pnpm

pnpm add SigPro

yarn

yarn add SigPro

bun

bun add SigPro

2. Basic Usage

The core of SigPro is the $ function, which creates reactive state (Signals) and computed effects.

Create a main.js file and try this:

import { $ } from 'SigPro';

// 1. Create a reactive signal
const $name = $("World");

// 2. Define a reactive component
const App = () => div({ class: 'container' }, [
  h1(["Hello, ", $name, "!"]),
  
  input({ 
    type: 'text', 
    $value: $name, // Two-way binding
    placeholder: 'Enter your name...' 
  }),
  
  button({ 
    onclick: () => $name("SigPro") 
  }, "Set to SigPro")
]);

// 3. Mount the application
$.mount(App, '#app');

3. How it Works

SigPro doesn't use a Virtual DOM. Instead, it creates real DOM nodes and binds them directly to your data:

1. Signals: $(value) creates a getter/setter function.
2. Reactivity: When you pass a signal or a function to a DOM element, SigPro automatically creates a subscription.
3. Fine-Grained Updates: Only the specific text node or attribute linked to the signal updates when the value changes.

4. Global Tags

By default, SigPro exports common HTML tags to the global scope (window) when initialized. This allows you to write clean, declarative UI without importing every single tag:

// Instead of $.html('div', ...), just use:
div([
  h1("Clean Syntax"),
  p("No more boilerplate.")
]);