# 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.