Update Readme.md

This commit is contained in:
Natxo
2026-03-26 00:43:09 +01:00
committed by GitHub
parent 58f6876261
commit b1ee605e71

View File

@@ -4,8 +4,6 @@
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?
@@ -18,104 +16,14 @@ Unlike traditional frameworks that use a **Virtual DOM** (React) or complex **Co
---
Read the Docs https://natxocc.github.io/sigpro/
## 📦 Installation
```bash
npm install sigpro
```
---
## 🛠️ Quick Start
### 1. Automatic File-Based Routing (Vite)
SigPro leverages Vite to turn your folder structure into your app's navigation.
```javascript
// 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.
```javascript
// 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.
```javascript
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.
```javascript
// 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.
```javascript
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
```text