diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..6987071 --- /dev/null +++ b/Readme.md @@ -0,0 +1,144 @@ +# SigPro ⚑ +**The Ultra-Lightweight, Reactive Plugin-Based Framework.** + +SigPro 2 is a modern, minimalist JavaScript framework designed for developers who want the power of reactivity without the overhead of heavy runtimes. It weighs less than **4KB**, uses a signal-based architecture, and is fully extensible through a modular plugin system. + +--- + +## πŸš€ Key Features + +* **Nano-Sized:** Optimized for speed and minimal bundle impact. +* **Signal-Based Reactivity:** Surgical DOM updatesβ€”only what changes is re-rendered. +* **Plugin Ecosystem:** Modular by design. Only load what you need (Router, Fetch, Storage, etc.). +* **File-Based Routing:** Automated route generation via Vite. +* **Zero Boilerplate:** No complex build steps or proprietary syntax. Just JavaScript. + +--- + +## πŸ“¦ Installation + +Install the core engine and the essential plugins. + +::: code-group +```bash [NPM] +npm install sigpro +``` + +```bash [Bun] +bun add sigpro +``` +::: + +--- + +## πŸ› οΈ Quick Start + +### 1. Configure Vite +Add the automatic router to your `vite.config.js`. + +```javascript +import { defineConfig } from 'vite'; +import { sigproRouter } from 'sigpro/vite'; + +export default defineConfig({ + plugins: [sigproRouter()] +}); +``` + +### 2. Initialize the App +Register plugins and mount your application shell. + +```javascript +// src/main.js +import { $ } from 'sigpro'; +import { Router, Fetch, UI } from 'sigpro/plugins'; + +$.plugin([Router, Fetch, UI]).then(() => { + import('./App.js').then(app => $.mount(app.default, '#app')); +}); +``` + +--- + +## 🧩 Official Plugins + +SigPro is powered by a "Pay-only-for-what-you-use" architecture. + +### 🚦 Router (`_router`) +Automated file-based routing. Just create a file in `src/pages/` and it becomes a route. +```javascript +import { routes } from 'virtual:sigpro-routes'; +const App = () => main(_router(routes)); +``` + +### πŸ“‘ Fetch (`_fetch`) +Reactive data fetching with built-in loading and error states. +```javascript +const { $data, $loading } = _fetch('https://api.example.com/data'); +``` + +### πŸ’Ύ Storage (`_storage`) +Automatic synchronization between Signals and `localStorage`. +```javascript +const $theme = _storage($('light'), 'app_theme'); +``` + +### 🐞 Debug (`_debug`) +Beautifully formatted console logs for tracking state changes in real-time. +```javascript +_debug($mySignal, "User Profile"); +``` + +--- + +## πŸ“‚ Project Structure + +A typical SigPro project follows this clean convention: + +```text +my-app/ +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ pages/ # Automatic Routes +β”‚ β”‚ β”œβ”€β”€ index.js # -> #/ +β”‚ β”‚ └── about.js # -> #/about +β”‚ β”œβ”€β”€ plugins/ # Custom Plugins +β”‚ β”œβ”€β”€ App.js # Main Layout +β”‚ └── main.js # Entry Point +β”œβ”€β”€ vite.config.js +└── package.json +``` + +--- + +## 🎨 Example Component + +SigPro uses standard JavaScript functions and a clean, declarative syntax. + +```javascript +export default () => { + const $count = $(0); // Create a Signal + + return div({ class: 'p-8 text-center' }, [ + h1("Hello SigPro!"), + p(`Current count is: ${$count()}`), + + _button({ + onclick: () => $count(c => c + 1), + class: 'btn-primary' + }, "Increment") + ]); +}; +``` + +--- + +## πŸ“– Documentation + +Since SigPro is self-hosting its own documentation, you can view the live interactive guides at: +**`https://your-gitea-pages-url.com/`** + +--- + +## πŸ“„ License + +MIT Β© 2026 SigPro Team. \ No newline at end of file