SigPro ⚡

The Ultra-Lightweight, Atomic Reactive Engine.

SigPro is a modern, minimalist JavaScript engine designed for developers who want surgical reactivity without the overhead. It weighs less than 2KB, uses a high-performance signal-based architecture, and features a built-in router and native state persistence.

🚀 Why SigPro?

Unlike traditional frameworks that use a Virtual DOM (React) or complex Compilers (Svelte), SigPro uses Atomic Reactivity.

Surgical Updates: When a Signal changes, SigPro knows exactly which text node or attribute needs to update. It doesn't "diff" trees; it directly touches the DOM.
Zero Dependencies: No extra libraries, no heavy runtimes. Just pure, optimized JavaScript.
Synchronous by Design: Eliminates the "async-bottleneck". Your app environment is ready the moment you import it.

📦 Installation

npm install sigpro

🛠️ Quick Start

1. Automatic File-Based Routing (Vite)

SigPro leverages Vite to turn your folder structure into your app's navigation.

// vite.config.js
import { defineConfig } from 'vite';
import { sigproRouter } from 'sigpro/vite';

export default defineConfig({
  plugins: [sigproRouter()]
});

2. The Entry Point

Forget about complex bootstrap sequences. In SigPro, you just mount and go.

// src/main.js
import { $ } from 'sigpro';
import App from './App.js';

$.mount(App, '#app'); // Your reactive journey starts here.

💎 Core Pillars

🚦 Built-in Router (`$.router`)

The router is now part of the core. It supports dynamic parameters and Automatic Code Splitting. Each page in your src/pages folder is only loaded when visited.

import { routes } from 'virtual:sigpro-routes';

export default () => div({ class: 'app-container' }, [
  header([
    h1("SigPro App"),
    nav([
      button({ onclick: () => $.router.go('/') }, "Home"),
      button({ onclick: () => $.router.go('/user/42') }, "Profile")
    ])
  ]),
  // $.router acts as a reactive "portal" for your pages
  main($.router(routes)) 
]);

💾 Native State Persistence

Stop writing boilerplate for localStorage. SigPro handles it at the engine level. If you provide a second argument to a Signal, it becomes persistent.

// This value survives page refreshes automatically
const $theme = $('light', 'app-settings-theme'); 

$theme('dark'); // Saved to localStorage instantly and reactively.

🎨 Component Anatomy

A SigPro component is just a function. No this, no complex hooks, just clean logic.

export default () => {
  // 1. State
  const $count = $(0); 

  // 2. Derived Logic (Computed)
  const $isEven = $(() => $count() % 2 === 0);

  // 3. UI Template (Declarative)
  return div({ class: 'counter-card' }, [
    h2("Counter Example"),
    p(() => `Current value: ${$count()} (${$isEven() ? 'Even' : 'Odd'})`),
    
    button({ 
      onclick: () => $count(c => c + 1),
      class: 'btn-add'
    }, "Add +1")
  ]);
};

📂 Project Structure

my-app/
├── src/
│   ├── pages/         # Files here become routes (e.g., about.js -> #/about)
│   ├── components/    # Your reusable UI atoms
│   ├── App.js         # The "Shell" (Navbar, Sidebar, Footer)
│   └── main.js        # The Glue (Imports $ and mounts App)
├── vite.config.js
└── package.json

⚡ Performance Summary

Feature	SigPro	Other Frameworks
Bundle Size	~2KB	30KB - 100KB+
Reactivity	Atomic Signals	Virtual DOM Diffing
Routing	Built-in / File-based	External Plugin Required
Persistence	Native	Manual / Plugin Required

3.8 KiB Raw Blame History