Update Readme.md
This commit is contained in:
96
Readme.md
96
Readme.md
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user