diff --git a/Readme.md b/Readme.md index 103c312..92eec73 100644 --- a/Readme.md +++ b/Readme.md @@ -1,56 +1,92 @@ +# `SigPro` ⚑ -# SigPro ⚑ -**The Ultra-Lightweight, Atomic Reactive Engine.** +### **The Atomic Reactivity Engine for the Modern Web.** -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. +[](https://opensource.org/licenses/MIT) +[](https://www.google.com/search?q=https://github.com/natxocc/sigpro) +[](https://www.google.com/search?q=https://github.com/natxocc/sigpro) ---- +**SigPro** is an ultra-lightweight reactive rendering engine that redefines efficiency. No Virtual DOM, no heavy compilers, and zero dependencies. Just **surgical reactivity** packed into less than 2KB. -## πŸš€ Why SigPro? +[**Explore the Docs β†’**](https://www.google.com/search?q=https://natxocc.github.io/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. +## ✨ The SigPro Manifesto ---- +SigPro isn't just another framework; it’s a precision tool. While other frameworks try to guess what changed by comparing trees (Diffing), SigPro **already knows**. -Read the Docs https://natxocc.github.io/sigpro/ + * **🎯 Atomic Reactivity:** Powered by a *Signal-based* architecture, SigPro binds state directly to DOM nodes. When a value changes, only that specific node reacts. + * **πŸš€ Zero Overhead:** Forget hydration bottlenecks and 100KB bundles. SigPro is pure, optimized JavaScript tailored for the browser's engine. + * **πŸ’Ž Next-Gen DX:** Say goodbye to endless imports. SigPro injects smart helpers like `Div()`, `Button()`, and `Span()` directly into your environment for a clean, functional syntax. + * **πŸ”‹ Batteries Included:** Hash-based Routing, native `localStorage` persistence, and automatic lifecycle management (cleanups) come standard. -## πŸ“¦ Installation +----- + +## πŸ› οΈ A Glimpse of the Code + +Elegance stems from simplicity. Here is how you create a reactive, persistent component: + +```javascript +// main.js +const Counter = () => { + // Persistent Signal: automatically restores state after reload + const count = $(0, "user-counter-pref"); + + return Div({ class: "card-container" }, [ + H1(`Count: ${count()}`), + P("Click below to trigger an atomic update."), + Button({ + onclick: () => count(c => c + 1), + class: "btn-primary" + }, "Increment +1") + ]); +}; + +$mount(Counter, "#app"); +``` + +----- + +## ⚑ Performance Breakdown + +| Metric | **SigPro** | React / Vue | Svelte | +| :--- | :--- | :--- | :--- | +| **Weight (Gzipped)** | **\< 1.8KB** | \~30KB - 50KB | \~2KB (Runtime) | +| **Strategy** | **Atomic Signals** | Virtual DOM Diffing | Compiler Dirty Bits | +| **Update Mechanism** | **Direct Node Access** | Branch Re-rendering | Block Update | +| **Persistence** | **Native ($)** | Manual / Plugins | Manual | +| **Learning Curve** | **Flat (Vanilla JS)** | Medium / High | Medium | + +----- + +## πŸ“¦ Recommended Architecture + +SigPro scales beautifully with modern project structures: + +```text +app/ +β”œβ”€β”€ πŸ“‚ components/ # UI Atoms (Button.js, Input.js) +β”œβ”€β”€ πŸ“‚ pages/ # Main Views (Home.js, Dashboard.js) +β”œβ”€β”€ πŸ“‚ store/ # Shared Global Signals +β”œβ”€β”€ πŸ“„ App.js # Layout, Router & Navigation +└── πŸ“„ index.js # Entry Point & Mounting +``` + +----- + +## πŸš€ Quick Install + +Install via your preferred package manager: ```bash +bun add natxocc/sigpro +# or npm install sigpro ``` -## πŸ“‚ Project Structure - -```text -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 | - ---- +----- ## πŸ“„ License -MIT Β© 2026 SigPro Team. Designed with ❀️ for speed. - +MIT Β© 2026 **SigPro Team**. Engineered for speed, designed for clarity.