diff --git a/Readme.md b/Readme.md index ed46c02..103c312 100644 --- a/Readme.md +++ b/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