159 lines
6.3 KiB
Markdown
159 lines
6.3 KiB
Markdown
# `SigPro` ⚛️
|
|
|
|
### **The Atomic Reactivity Engine for the Modern Web.**
|
|
|
|
**SigPro** is an ultra-lightweight rendering engine designed for extreme performance. By eliminating the Virtual DOM and heavy compilers, it achieves **surgical reactivity** in less than 2KB.
|
|
|
|
[**Explore the Docs →**](https://natxocc.github.io/sigpro/) | [**View on GitHub**](https://github.com/natxocc/sigpro)
|
|
|
|
-----
|
|
|
|
## ⚡ Real-World Benchmarks
|
|
|
|
SigPro isn't just "fast on paper." In the industry-standard **JS Framework Benchmark**, it consistently outperforms the most popular libraries by operating at near-native speeds with almost zero memory overhead.
|
|
|
|
### 🚀 Execution Speed (CPU)
|
|
*Lower is better. Measured in milliseconds (ms).*
|
|
|
|
| Benchmark Test | **SigPro** | SolidJS | Vue 3 | React 18 |
|
|
| :--- | :--- | :--- | :--- | :--- |
|
|
| **Surgical Update** (10th row) | **46.8ms** | ~48ms | ~75ms | ~158ms |
|
|
| **Direct Selection** (on click) | **17.5ms** | ~18ms | ~32ms | ~65ms |
|
|
| **Initial Render** (1k rows) | **~35ms** | ~32ms | ~45ms | ~70ms |
|
|
|
|
### 🧠 Memory Footprint
|
|
*Lower is better. Measured in Megabytes (MB) after 1k rows.*
|
|
|
|
| Metric | **SigPro** | Vanilla JS | Svelte | React |
|
|
| :--- | :--- | :--- | :--- | :--- |
|
|
| **Ready Memory** (Idle) | **1.05 MB** | 1.01 MB | ~2.8 MB | ~10.4 MB |
|
|
| **Run Memory** (1k rows) | **4.90 MB** | 4.25 MB | ~10.2 MB | ~28.5 MB |
|
|
|
|
> **The Verdict:** SigPro delivers **Vanilla-like memory consumption** while maintaining **Surgical reactivity** that rivals (and often beats) SolidJS in granular updates.
|
|
|
|
---
|
|
|
|
## Why SigPro?
|
|
|
|
While other frameworks "guess" what changed by comparing massive DOM trees (Diffing), **SigPro already knows.**
|
|
|
|
* 🎯 **Atomic Precision:** Powered by a *Signal-based* architecture. State is bound directly to DOM nodes—when a value changes, **only that specific node updates**.
|
|
* 🚀 **Zero-Hydration Bottlenecks:** No 100KB bundles or complex build steps. SigPro is pure, optimized JavaScript tailored for the browser's native engine.
|
|
* 🍦 **Pure Vanilla JS Performance:** High-octane performance without the need for transpilers or heavy transformations. It runs natively in the browser just as well as it does in complex build pipelines.
|
|
* 🛠️ **Build-Tool Agnostic:** Total freedom. Use it with **Vite, Webpack, or Rollup** for enterprise projects, or simply import it via a **`<script>` tag** for rapid prototyping. No tooling required.
|
|
* 🚀 **Vite-Powered DX:** First-class Vite support with **file-based routing** out of the box. The official `sigpro/vite` plugin automatically scans your `src/pages` directory and generates reactive routes—no manual route configuration needed.
|
|
* 📈 **Zero-Scale Bloat:** Unlike other frameworks where the bundle grows exponentially, SigPro's footprint remains **flat and predictable**. You only pay for the code you write.
|
|
* 💎 **Premium DX (Developer Experience):** Forget boilerplate imports. SigPro injects an elegant, functional syntax (`Div()`, `Button()`, `Span()`) directly into your scope for a **"Zero-Import"** workflow.
|
|
* 📦 **Fully Loaded:** Built-in Hash Routing, native **`localStorage` persistence**, and automatic lifecycle management (cleanups) included in less than 2KB.
|
|
* 🌳 **Tree-Shakable:** Optimized for modern bundlers. Import only what you use, or load the full engine for rapid prototyping.
|
|
|
|
-----
|
|
|
|
## Elegance in Action
|
|
|
|
Create reactive, persistent components with a syntax that feels like Vanilla JS, but works like magic:
|
|
|
|
```html
|
|
<div id="app"></div>
|
|
```
|
|
|
|
```javascript
|
|
const Counter = () => {
|
|
// Simple signal
|
|
const value = $(100);
|
|
// One-line persistence: state survives page reloads automatically
|
|
const count = $(0, "user-counter-pref");
|
|
// Computed: automatically updated when count() or value() changes
|
|
const doubleValue = $(()=> value() * count());
|
|
|
|
// Create fast HTML with pure JS
|
|
return Div({ class: "card" }, [
|
|
H1(`Count: ${count()}, Reference: ${value()}, Double x Ref: ${doubleValue()}`),
|
|
P("Atomic updates. Zero re-renders of the parent tree."),
|
|
Button({ onclick: () => count(c => c + 1)}, "Increment +1")
|
|
]);
|
|
};
|
|
|
|
$mount(Counter, "#app");
|
|
```
|
|
|
|
-----
|
|
|
|
## Performance Without Compromise
|
|
|
|
| Feature | **SigPro** | React / Vue | Svelte |
|
|
| :--- | :--- | :--- | :--- |
|
|
| **Payload (Gzipped)** | **< 1.8KB** | ~30KB - 50KB | ~5KB (Compiled Runtime) |
|
|
| **State Logic** | **Atomic Signals** | Virtual DOM Diffing | Compiler Dirty Bits |
|
|
| **Update Speed** | **Direct Node Access** | Component Re-render | Block Reconciliation |
|
|
| **Native Persistence** | **Included ($)** | Requires Plugins | Manual |
|
|
| **Dependencies** | **Zero** | Many | Build Toolchain |
|
|
| **Lifecycle Mgmt** | **Automatic (Cleanup Root)** | Manual / Hook-based | Manual / Hook-based |
|
|
| **Routing** | **Reactive Hash ($router) + File-based (Vite)** | Virtual Router (External) | File-based / External |
|
|
| **Learning Curve** | **Zero (Vanilla JS)** | Steep (JSX/Templates) | Medium (Directives) |
|
|
|
|
-----
|
|
|
|
## Scalable Architecture with Vite
|
|
|
|
SigPro scales from micro-widgets to full enterprise dashboards. With the official Vite plugin, routing becomes effortless:
|
|
|
|
```text
|
|
src/
|
|
├── 📂 pages/ # File-based routing (auto-scanned)
|
|
│ ├── index.js # → /
|
|
│ ├── about.js # → /about
|
|
│ ├── blog/
|
|
│ │ ├── index.js # → /blog
|
|
│ │ └── [slug].js # → /blog/:slug
|
|
│ └── docs/
|
|
│ └── [...all].js # → /docs/*
|
|
├── 📂 components/ # Reusable components
|
|
└── 📄 main.js # App Entry & Mounting
|
|
```
|
|
|
|
**Vite Plugin Setup:**
|
|
```javascript
|
|
// vite.config.js
|
|
import { defineConfig } from 'vite';
|
|
import { sigproRouter } from 'sigpro/vite';
|
|
|
|
export default defineConfig({
|
|
plugins: [sigproRouter()]
|
|
});
|
|
```
|
|
|
|
The plugin automatically:
|
|
- Scans your `src/pages` directory recursively
|
|
- Generates route definitions from file paths
|
|
- Supports dynamic segments (`[param]`) and catch-all routes (`[...param]`)
|
|
- Provides automatic 404 fallback
|
|
- Enables lazy-loading out of the box
|
|
|
|
-----
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
npm install sigpro
|
|
```
|
|
|
|
**With Vite (Recommended for larger apps):**
|
|
```bash
|
|
npm create vite@latest my-app -- --template vanilla
|
|
cd my-app
|
|
npm install sigpro
|
|
```
|
|
|
|
**Or without build tools:**
|
|
```html
|
|
<script src="https://unpkg.com/sigpro"></script>
|
|
```
|
|
|
|
-----
|
|
|
|
## License
|
|
|
|
MIT © 2026 **SigPro Team**.
|
|
*Engineered for speed, designed for clarity, built for the modern web.*
|