Change Docs to Docsify
This commit is contained in:
@@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>404 | SigPro</title>
|
||||
<meta name="description" content="Not Found">
|
||||
<meta name="generator" content="VitePress v1.6.4">
|
||||
<link rel="preload stylesheet" href="/sigpro/assets/style.7j_EAAZ2.css" as="style">
|
||||
<link rel="preload stylesheet" href="/sigpro/vp-icons.css" as="style">
|
||||
|
||||
<script type="module" src="/sigpro/assets/app.DtmzNmNl.js"></script>
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_for.md\":\"3GRpYy3h\",\"api_html.md\":\"QmhwKd7f\",\"api_if.md\":\"2-2cm9cb\",\"api_mount.md\":\"B3RUsjff\",\"api_quick.md\":\"Coriz0Dx\",\"api_router.md\":\"DxC_B3iU\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"BPbc38UO\",\"api_watch.md\":\"Dc5wZqk9\",\"index.md\":\"By6smViD\",\"install.md\":\"CrzPbqO_\",\"ui_quick.md\":\"CL4k0g3a\",\"vite_plugin.md\":\"CTs8LDIL\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$ signals\",\"link\":\"/api/signal\"},{\"text\":\"$watch\",\"link\":\"/api/watch\"},{\"text\":\"$if\",\"link\":\"/api/if\"},{\"text\":\"$for\",\"link\":\"/api/for\"},{\"text\":\"$router\",\"link\":\"/api/router\"},{\"text\":\"$mount\",\"link\":\"/api/mount\"},{\"text\":\"$html\",\"link\":\"/api/html\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
docs/README.md
Normal file
42
docs/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
<div class="w-full -mt-10"><section class="relative py-20 overflow-hidden border-b border-base-200/30 text-center flex flex-col items-center"><div class="relative z-10 max-w-5xl mx-auto px-6 flex flex-col items-center"><div class="flex justify-center mb-10"><img src="logo.svg" alt="SigPro Logo" class="w-48 h-48 md:w-64 md:h-64 object-contain drop-shadow-2xl"></div><h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-primary via-secondary to-accent !text-center w-full">SigPro</h1><div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Atomic Unified Reactive Engine</div><div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"The efficiency of direct DOM manipulation with the elegance of functional reactivity."</div><div class="flex flex-wrap justify-center gap-4 w-full"><a href="#/install" class="btn btn-primary btn-lg shadow-xl shadow-primary/20 group px-10 border-none">Get Started <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a><button onclick="window.open('https://github.com/natxocc/sigpro')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button></div></div><div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none"><div class="absolute top-10 left-1/4 w-96 h-96 bg-primary filter blur-3xl rounded-full animate-pulse"></div><div class="absolute bottom-10 right-1/4 w-96 h-96 bg-accent filter blur-3xl rounded-full animate-pulse" style="animation-delay: 2.5s"></div></div></section></div>
|
||||
|
||||
<section class="max-w-6xl mx-auto px-6 py-16"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch"><div class="card bg-base-200/30 border border-base-300 hover:border-primary/40 transition-all p-1"><div class="card-body p-6"><h3 class="card-title text-xl font-black text-primary italic">FUNCTIONAL</h3><p class="text-sm opacity-70">No strings. No templates. Pure JS function calls for instant DOM mounting.</p></div></div><div class="card bg-base-200/30 border border-base-300 hover:border-secondary/40 transition-all p-1"><div class="card-body p-6"><h3 class="card-title text-xl font-black text-secondary italic">ATOMIC</h3><p class="text-sm opacity-70">Fine-grained signals update exactly what changes. No V-DOM diffing overhead.</p></div></div><div class="card bg-base-200/30 border border-base-300 hover:border-accent/40 transition-all p-1"><div class="card-body p-6"><h3 class="card-title text-xl font-black text-accent italic">ULTRA-THIN</h3><p class="text-sm opacity-70">Sub-2KB runtime. Infinitely smaller bundle than React, Vue or even Svelte.</p></div></div><div class="card bg-base-200/30 border border-base-300 hover:border-base-content/20 transition-all p-1"><div class="card-body p-6"><h3 class="card-title text-xl font-black italic text-base-content">COMPILER-FREE</h3><p class="text-sm opacity-70">Standard Vanilla JS. What you write is what the browser executes. Period.</p></div></div></div></section></div>
|
||||
|
||||
## 🛠️ Functional DOM Construction
|
||||
|
||||
SigPro replaces the slow "Template Parsing" with **High-Efficiency Function Calls**.
|
||||
|
||||
While other frameworks force the browser to parse strings of HTML or execute complex JSX transformations, SigPro uses a direct functional approach:
|
||||
|
||||
| Feature | Standard HTML / JSX | SigPro Functional |
|
||||
| :--- | :--- | :--- |
|
||||
| **Syntax** | `<div>Hello</div>` | `Div("Hello")` |
|
||||
| **Processing** | Parse → Diff → Patch | Direct API Call |
|
||||
| **Overhead** | High (V-DOM / Parser) | **Zero** |
|
||||
| **Reactivity** | Component-wide | **Atomic (Node-level)** |
|
||||
|
||||
### ⚡ Less Code, More Power
|
||||
By sharing a miniscule runtime, your final application bundle is **infinitely smaller**.
|
||||
|
||||
* **React/Vue:** You ship a heavy orchestrator (~30-90KB) just to say "Hello World".
|
||||
* **Solid/Svelte:** You still depend on a compilation step that generates extra boilerplate.
|
||||
* **SigPro:** You ship **Pure Vanilla JS**. The runtime is so small that it often costs less than a single high-res icon.
|
||||
|
||||
---
|
||||
|
||||
## 🔬 Precision Engineering
|
||||
|
||||
### 1. Functional Efficiency
|
||||
`Div()`, `Button()`, `Span()`... These aren't just wrappers; they are pre-optimized constructors. When you call `Div({ class: 'btn' }, "Click")`, SigPro creates the element and attaches its reactive listeners in a single, surgical operation.
|
||||
|
||||
### 2. The "No-Bundle" Bundle
|
||||
Because SigPro is so small, it is the only engine where **the more code you write, the more the efficiency gap grows**. While others grow linearly with components and framework overhead, SigPro stays flat, leveraging the native power of modern browser engines.
|
||||
|
||||
### 3. Shared Runtime
|
||||
All components share the same atomic engine. One signal can update a single character in a paragraph across 100 components without ever re-evaluating the component functions themselves.
|
||||
|
||||
---
|
||||
|
||||
<div class="bg-base-200/50 rounded-3xl p-10 my-16 border border-base-300 shadow-inner"><div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center"><div class="lg:col-span-2"><h2 class="text-4xl font-black mb-4 mt-0 tracking-tight italic text-primary">Kill the Bloat.</h2><p class="text-xl opacity-80 leading-relaxed">Stop shipping 100KB of "Framework" for 2KB of business logic. SigPro gives you the tools to build ultra-fast, modern apps with <strong>True Vanilla Performance</strong>.</p></div></div></div>
|
||||
|
||||
<div class="text-center py-10 opacity-30 font-mono text-xs tracking-widest uppercase">Precision Reactive Engine — NatxoCC</div>
|
||||
19
docs/_sidebar.md
Normal file
19
docs/_sidebar.md
Normal file
@@ -0,0 +1,19 @@
|
||||
* [**Home**](README.md)
|
||||
|
||||
* **Introduction**
|
||||
* [Installation](install.md)
|
||||
* [Vite Plugin](vite/plugin.md)
|
||||
|
||||
* **API Reference**
|
||||
* [Quick Start](api/quick.md)
|
||||
* [$ signals](api/signal.md)
|
||||
* [$watch](api/watch.md)
|
||||
* [$if](api/if.md)
|
||||
* [$for](api/for.md)
|
||||
* [$router](api/router.md)
|
||||
* [$mount](api/mount.md)
|
||||
* [$html](api/html.md)
|
||||
* [Tags](api/tags.md)
|
||||
|
||||
* **UI Components**
|
||||
* [Quick Start](ui/quick.md)
|
||||
File diff suppressed because one or more lines are too long
83
docs/api/for.md
Normal file
83
docs/api/for.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# Reactive Lists: `$for( )`
|
||||
|
||||
The `$for` function is a high-performance list renderer. It maps an array (or a Signal containing an array) to DOM nodes. Unlike a simple `.map()`, `$for` is **keyed**, meaning it only updates, moves, or deletes the specific items that changed.
|
||||
|
||||
## Function Signature
|
||||
|
||||
```typescript
|
||||
$for(
|
||||
source: Signal<any[]> | Function | any[],
|
||||
render: (item: any, index: number) => HTMLElement,
|
||||
keyFn: (item: any, index: number) => string | number
|
||||
): HTMLElement
|
||||
```
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **`source`** | `Signal` | Yes | The reactive array to iterate over. |
|
||||
| **`render`** | `Function` | Yes | A function that returns a component or Node for each item. |
|
||||
| **`keyFn`** | `Function` | Yes | A function to extract a **unique ID** for each item (crucial for performance). |
|
||||
|
||||
**Returns:** A `div` element with `display: contents` containing the live list.
|
||||
|
||||
---
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### 1. Basic Keyed List
|
||||
Always use a unique property (like an `id`) as a key to ensure SigPro doesn't recreate nodes unnecessarily.
|
||||
|
||||
```javascript
|
||||
const users = $([
|
||||
{ id: 1, name: "Alice" },
|
||||
{ id: 2, name: "Bob" }
|
||||
]);
|
||||
|
||||
Ul({ class: "list" }, [
|
||||
$for(users,
|
||||
(user) => Li({ class: "p-2" }, user.name),
|
||||
(user) => user.id
|
||||
)
|
||||
]);
|
||||
```
|
||||
|
||||
### 2. Handling Primitive Arrays
|
||||
If your array contains simple strings or numbers, you can use the value itself or the index as a key (though the index is less efficient for reordering).
|
||||
|
||||
```javascript
|
||||
const tags = $(["Tech", "JS", "Web"]);
|
||||
|
||||
Div({ class: "flex gap-1" }, [
|
||||
$for(tags, (tag) => Badge(tag), (tag) => tag)
|
||||
]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How it Works (The Reconciliation)
|
||||
|
||||
When the `source` signal changes, `$for` performs the following steps:
|
||||
|
||||
1. **Key Diffing**: It compares the new keys with the previous ones stored in an internal `Map`.
|
||||
2. **Node Reuse**: If a key already exists, the DOM node is **reused** and moved to its new position. No new elements are created.
|
||||
3. **Cleanup**: If a key disappears from the list, SigPro calls `.destroy()` on that specific item's instance. This stops all its internal watchers and removes its DOM nodes.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Performance Tips
|
||||
|
||||
* **Stable Keys**: Never use `Math.random()` as a key. This will force SigPro to destroy and recreate the entire list on every update, killing performance.
|
||||
* **Component Encapsulation**: If each item in your list has its own complex internal state, `$for` ensures that state is preserved even if the list is reordered, as long as the key remains the same.
|
||||
|
||||
---
|
||||
|
||||
## Summary Comparison
|
||||
|
||||
| Feature | Standard `Array.map` | SigPro `$for` |
|
||||
| :--- | :--- | :--- |
|
||||
| **Re-render** | Re-renders everything | Only updates changes |
|
||||
| **DOM Nodes** | Re-created every time | **Reused via Keys** |
|
||||
| **Memory** | Potential leaks | **Automatic Cleanup** |
|
||||
| **State** | Lost on re-render | **Preserved per item** |
|
||||
File diff suppressed because one or more lines are too long
91
docs/api/html.md
Normal file
91
docs/api/html.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# The DOM Factory: `$html( )`
|
||||
|
||||
`$html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses `$.watch` to maintain a live, high-performance link between your Signals and the Document Object Model.
|
||||
|
||||
## Function Signature
|
||||
|
||||
```typescript
|
||||
$html(tagName: string, props?: Object, children?: any[] | any): HTMLElement
|
||||
```
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **`tagName`** | `string` | Yes | Valid HTML tag name (e.g., `"div"`, `"button"`). |
|
||||
| **`props`** | `Object` | No | HTML attributes, event listeners, and reactive bindings. |
|
||||
| **`children`** | `any` | No | Nested elements, text strings, or reactive functions. |
|
||||
|
||||
---
|
||||
|
||||
## Key Features
|
||||
|
||||
### 1. Attribute Handling
|
||||
SigPro intelligently decides how to apply each property:
|
||||
* **Standard Props**: Applied via `setAttribute` or direct property assignment.
|
||||
* **Class Names**: Supports `class` or `className` interchangeably.
|
||||
* **Boolean Props**: Automatic handling for `checked`, `disabled`, `hidden`, etc.
|
||||
|
||||
### 2. Event Listeners
|
||||
Events are defined by the `on` prefix. SigPro automatically registers the listener and ensures it is cleaned up when the element is destroyed.
|
||||
|
||||
```javascript
|
||||
Button({
|
||||
onclick: (e) => console.log("Clicked!", e),
|
||||
}, "Click Me");
|
||||
```
|
||||
|
||||
### 3. Reactive Attributes (One-Way)
|
||||
If an attribute value is a **function** (like a Signal), `$html` creates an internal **`$.watch`** to keep the DOM in sync with the state.
|
||||
|
||||
```javascript
|
||||
Div({
|
||||
// Updates the class whenever 'theme()' changes
|
||||
class: () => theme() === "dark" ? "bg-black" : "bg-white"
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Smart Two-Way Binding (Automatic)
|
||||
SigPro automatically enables **bidirectional synchronization** when it detects a **Signal** assigned to a form-capable attribute (`value` or `checked`) on an input element (`input`, `textarea`, `select`).
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Syncs input value <-> signal automatically
|
||||
Input({
|
||||
type: "text",
|
||||
value: username // No special symbols needed!
|
||||
})
|
||||
```
|
||||
|
||||
> **Note:** To use a Signal as **read-only** in an input, wrap it in an anonymous function: `value: () => username()`.
|
||||
|
||||
### 5. Reactive Children
|
||||
Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using `$.watch` for that specific part of the DOM.
|
||||
|
||||
```javascript
|
||||
Div({}, [
|
||||
H1("Static Title"),
|
||||
// Only this text node re-renders when 'count' changes
|
||||
() => `Current count: ${count()}`
|
||||
]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Memory Management (Internal)
|
||||
Every element created with `$html` is "self-aware" regarding its reactive dependencies.
|
||||
* **`._cleanups`**: A hidden `Set` attached to the element that stores all `stop()` functions from its internal `$.watch` calls and event listeners.
|
||||
* **Lifecycle**: When an element is removed by a Controller (`$.if`, `$.for`, or `$.router`), SigPro performs a recursive **"sweep"** to execute these cleanups, ensuring **zero memory leaks**.
|
||||
|
||||
---
|
||||
|
||||
## Tag Constructors (The Shortcuts)
|
||||
|
||||
Instead of writing `$html("div", ...)` every time, SigPro provides PascalCase global functions for all standard HTML tags:
|
||||
|
||||
```javascript
|
||||
// This:
|
||||
Div({ class: "wrapper" }, [ Span("Hello") ])
|
||||
|
||||
// Is exactly equivalent to:
|
||||
$html("div", { class: "wrapper" }, [ $html("span", {}, "Hello") ])
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
88
docs/api/if.md
Normal file
88
docs/api/if.md
Normal file
@@ -0,0 +1,88 @@
|
||||
|
||||
# Reactive Branching: `$if( )`
|
||||
|
||||
The `$if` function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.
|
||||
|
||||
## Function Signature
|
||||
|
||||
```typescript
|
||||
$if(
|
||||
condition: Signal<boolean> | Function,
|
||||
thenVal: Component | Node,
|
||||
otherwiseVal?: Component | Node
|
||||
): HTMLElement
|
||||
```
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **`condition`** | `Signal` | Yes | A reactive source that determines which branch to render. |
|
||||
| **`thenVal`** | `any` | Yes | The content to show when the condition is **truthy**. |
|
||||
| **`otherwiseVal`** | `any` | No | The content to show when the condition is **falsy** (defaults to null). |
|
||||
|
||||
**Returns:** A `div` element with `display: contents` that acts as a reactive portal for the branches.
|
||||
|
||||
---
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### 1. Simple Toggle
|
||||
The most common use case is showing or hiding a single element based on a state.
|
||||
|
||||
```javascript
|
||||
const isVisible = $(false);
|
||||
|
||||
Div([
|
||||
Button({ onclick: () => isVisible(!isVisible()) }, "Toggle Message"),
|
||||
|
||||
$if(isVisible,
|
||||
P("Now you see me!"),
|
||||
P("Now you don't...")
|
||||
)
|
||||
]);
|
||||
```
|
||||
|
||||
### 2. Lazy Component Loading
|
||||
Unlike using a hidden class (CSS `display: none`), `$if` is **lazy**. The branch that isn't active **is never created**. This saves memory and initial processing time.
|
||||
|
||||
```javascript
|
||||
$if(() => user.isLogged(),
|
||||
() => Dashboard(), // Only executed if logged in
|
||||
() => LoginGate() // Only executed if guest
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Automatic Cleanup
|
||||
|
||||
One of the core strengths of `$if` is its integrated **Cleanup** logic. SigPro ensures that when a branch is swapped out, it is completely purged.
|
||||
|
||||
1. **Stop Watchers**: All `$.watch` calls inside the inactive branch are permanently stopped.
|
||||
2. **Unbind Events**: Event listeners attached via `$.html` are removed.
|
||||
3. **Recursive Sweep**: SigPro performs a deep "sweep" of the removed branch to ensure no nested reactive effects remain active.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
* **Function Wrappers**: If your branches are heavy (e.g., they contain complex components), wrap them in a function `() => MyComponent()`. This prevents the component from being initialized until the condition actually meets its requirement.
|
||||
* **Logical Expressions**: You can pass a complex computed function as the condition:
|
||||
```javascript
|
||||
$if(() => count() > 10 && status() === 'ready',
|
||||
Span("Threshold reached!")
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Technical Comparison
|
||||
|
||||
| Feature | Standard CSS `hidden` | SigPro `$if` |
|
||||
| :--- | :--- | :--- |
|
||||
| **DOM Presence** | Always present | Only if active |
|
||||
| **Reactivity** | Still processing in background | **Paused/Destroyed** |
|
||||
| **Memory usage** | Higher | **Optimized** |
|
||||
| **Cleanup** | Manual | **Automatic** |
|
||||
|
||||
File diff suppressed because one or more lines are too long
85
docs/api/mount.md
Normal file
85
docs/api/mount.md
Normal file
@@ -0,0 +1,85 @@
|
||||
# Application Mounter: `$mount( )`
|
||||
|
||||
The `$mount` function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document and initializing its reactive lifecycle.
|
||||
|
||||
## Function Signature
|
||||
|
||||
```typescript
|
||||
$mount(node: Function | HTMLElement, target?: string | HTMLElement): RuntimeObject
|
||||
```
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **`node`** | `Function` or `Node` | **Required** | The component function or DOM element to render. |
|
||||
| **`target`** | `string` or `Node` | `document.body` | CSS selector or DOM element where the app will live. |
|
||||
|
||||
**Returns:** A `Runtime` object containing the `container` and a `destroy()` method to wipe all reactivity and DOM nodes.
|
||||
|
||||
---
|
||||
|
||||
## Common Usage Scenarios
|
||||
|
||||
### 1. The SPA Entry Point
|
||||
In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.
|
||||
|
||||
```javascript
|
||||
import { $ } from './sigpro.js';
|
||||
import App from './App.js';
|
||||
|
||||
// Mounts your main App component
|
||||
$mount(App, '#app-root');
|
||||
```
|
||||
|
||||
### 2. Reactive "Islands"
|
||||
SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.
|
||||
|
||||
```javascript
|
||||
const Counter = () => {
|
||||
const count = $(0);
|
||||
return Button({ onclick: () => count(c => c + 1) }, [
|
||||
"Clicks: ", count
|
||||
]);
|
||||
};
|
||||
|
||||
// Mount only the counter into a specific sidebar div
|
||||
$mount(Counter, '#sidebar-widget');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How it Works (Lifecycle & Cleanup)
|
||||
|
||||
When `$mount` is executed, it performs these critical steps to ensure a leak-free environment:
|
||||
|
||||
1. **Duplicate Detection**: If you call `$mount` on a target that already has a SigPro instance, it automatically calls `.destroy()` on the previous instance. This prevents "Zombie Effects" from stacking in memory.
|
||||
2. **Internal Scoping**: It executes the component function inside an internal **Reactive Owner**. This captures every `$watch` and event listener created during the render.
|
||||
3. **Target Injection**: It clears the target using `replaceChildren()` and appends the new component.
|
||||
4. **Runtime Creation**: It returns a control object:
|
||||
* `container`: The actual DOM element created.
|
||||
* `destroy()`: The "kill switch" that runs all cleanups, stops all watchers, and removes the element from the DOM.
|
||||
|
||||
---
|
||||
|
||||
## Manual Unmounting
|
||||
|
||||
While SigPro handles most cleanups automatically (via `$if`, `$for`, and `$router`), you can manually destroy any mounted instance. This is vital for imperatively managed UI like **Toasts** or **Modals**.
|
||||
|
||||
```javascript
|
||||
const instance = $mount(MyToast, '#toast-container');
|
||||
|
||||
// Later, to remove the toast and kill its reactivity:
|
||||
instance.destroy();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Summary Cheat Sheet
|
||||
|
||||
| Goal | Code Pattern |
|
||||
| :--- | :--- |
|
||||
| **Mount to body** | `$mount(App)` |
|
||||
| **Mount to CSS Selector** | `$mount(App, '#root')` |
|
||||
| **Mount to DOM Node** | `$mount(App, myElement)` |
|
||||
| **Clean & Re-mount** | Calling `$mount` again on the same target |
|
||||
| **Total Cleanup** | `const app = $mount(App); app.destroy();` |
|
||||
|
||||
File diff suppressed because one or more lines are too long
130
docs/api/quick.md
Normal file
130
docs/api/quick.md
Normal file
@@ -0,0 +1,130 @@
|
||||
# ⚡ Quick API Reference
|
||||
|
||||
SigPro is a high-performance micro-framework that updates the **Real DOM** surgically. No Virtual DOM, no unnecessary re-renders, and built-in **Cleanup** (memory cleanup).
|
||||
|
||||
## Core Functions
|
||||
|
||||
Explore the reactive building blocks of SigPro.
|
||||
|
||||
<div class="overflow-x-auto my-8 border border-base-300 rounded-xl shadow-sm">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="bg-base-200 text-base-content">
|
||||
<tr>
|
||||
<th>Function</th>
|
||||
<th>Signature</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="text-primary font-bold">$(val, key?)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(any, string?) => Signal</td>
|
||||
<td>Creates a <b>Signal</b>. If <code>key</code> is provided, it persists in <code>localStorage</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="text-primary font-bold">$(fn)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(function) => Computed</td>
|
||||
<td>Creates a <b>Computed Signal</b> that auto-updates when dependencies change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="text-secondary font-bold">$watch(fn)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(function) => stopFn</td>
|
||||
<td><b>Auto Mode:</b> Tracks any signal touched inside. Returns a stop function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="text-secondary font-bold">$watch(deps, fn)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(Array, function) => stopFn</td>
|
||||
<td><b>Explicit Mode:</b> Only runs when signals in <code>deps</code> change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="text-accent font-bold">$if(cond, then, else?)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(Signal, fn, fn?) => Node</td>
|
||||
<td>Reactive conditional. Automatically destroys "else" branch memory.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="text-accent font-bold">$for(list, itemFn)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(Signal, fn) => Node</td>
|
||||
<td>Optimized list renderer. Manages individual item lifecycles.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="font-bold">$mount(node, target)</code></td>
|
||||
<td class="font-mono text-xs opacity-70">(any, string|Node) => Runtime</td>
|
||||
<td>Entry point. Creates a root instance with <code>.destroy()</code> capabilities.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Element Constructors (Tags)
|
||||
|
||||
SigPro provides **PascalCase** wrappers for all standard HTML5 tags (e.g., `Div`, `Span`, `Button`).
|
||||
|
||||
### Syntax Pattern
|
||||
|
||||
<div class="mockup-code bg-base-300 text-base-content my-6">
|
||||
<pre data-prefix=">"><code>Tag({ attributes }, [children])</code></pre>
|
||||
</div>
|
||||
|
||||
### Attribute & Content Handling
|
||||
|
||||
Learn how to bind data to your elements effectively.
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-10">
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-primary/30 transition-colors">
|
||||
<div class="card-body p-5">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xs font-black uppercase tracking-widest opacity-60">Static</h3>
|
||||
<span class="badge badge-outline badge-xs opacity-50">HTML5</span>
|
||||
</div>
|
||||
<code class="text-primary font-bold text-sm bg-base-300/50 p-2 rounded-lg">class: "text-red"</code>
|
||||
<p class="text-xs mt-3 leading-relaxed">Standard HTML attribute passed as a plain string. No reactivity overhead.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-secondary/30 transition-colors">
|
||||
<div class="card-body p-5">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xs font-black uppercase tracking-widest opacity-60">Reactive</h3>
|
||||
<span class="badge badge-secondary badge-xs">SIGNAL</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<code class="text-xs opacity-60 italic">const isLoading = $(false);</code>
|
||||
<code class="text-secondary font-bold text-sm bg-base-300/50 p-2 rounded-lg">disabled: isLoading</code>
|
||||
</div>
|
||||
<p class="text-xs mt-3 leading-relaxed">Updates automatically via internal <code>$watch</code>. Only the attribute changes in the DOM.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-primary/30 transition-colors">
|
||||
<div class="card-body p-5">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xs font-black uppercase tracking-widest opacity-60">Two-way Binding</h3>
|
||||
<span class="badge badge-primary badge-xs">MAGIC</span>
|
||||
</div>
|
||||
<code class="text-xs opacity-60 italic">const username = $('Me');</code>
|
||||
<code class="text-primary font-bold text-sm bg-base-300/50 p-2 rounded-lg">value: username</code>
|
||||
<p class="text-xs mt-3 leading-relaxed font-medium">
|
||||
<b>Automatic Sync:</b> Works out-of-the-box for <code>Input</code>, <code>Textarea</code>, and <code>Checkbox</code>.
|
||||
It syncs the element <span class="text-primary">↔</span> signal both ways without manual event listeners.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-accent/30 transition-colors">
|
||||
<div class="card-body p-5">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xs font-black uppercase tracking-widest opacity-60">Surgical Text</h3>
|
||||
<span class="badge badge-accent badge-xs">FAST</span>
|
||||
</div>
|
||||
<code class="text-accent font-bold text-sm bg-base-300/50 p-2 rounded-lg">P({}, () => count())</code>
|
||||
<p class="text-xs mt-3 leading-relaxed">Updates the specific text node surgically without ever re-rendering the parent <code>P</code> tag.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
> [!TIP]
|
||||
> **Performance Hint:** Always use functions `() => signal()` for dynamic children to ensure SigPro only updates the specific node and not the whole container.
|
||||
File diff suppressed because one or more lines are too long
96
docs/api/router.md
Normal file
96
docs/api/router.md
Normal file
@@ -0,0 +1,96 @@
|
||||
# Routing: `$router()` & Utilities
|
||||
|
||||
SigPro includes a built-in, lightweight **Hash Router** to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically.
|
||||
|
||||
## Router Signature
|
||||
|
||||
```typescript
|
||||
$router(routes: Route[]): HTMLElement
|
||||
```
|
||||
|
||||
### Route Object
|
||||
| Property | Type | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| **`path`** | `string` | The URL fragment (e.g., `"/"`, `"/user/:id"`, or `"*"`). |
|
||||
| **`component`** | `Function` | A function that returns a Node, a String, or a reactive View. |
|
||||
|
||||
---
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### 1. Defining Routes
|
||||
The `$router` returns a `div` element with the class `.router-outlet`. When the hash changes, the router destroys the previous view and mounts the new one inside this container.
|
||||
|
||||
```javascript
|
||||
const App = () => Div({ class: "app-layout" }, [
|
||||
Navbar(),
|
||||
// The router outlet is placed here
|
||||
$router([
|
||||
{ path: "/", component: Home },
|
||||
{ path: "/profile/:id", component: (params) => UserProfile(params.id) },
|
||||
{ path: "*", component: () => H1("404 Not Found") }
|
||||
])
|
||||
]);
|
||||
```
|
||||
|
||||
### 2. Dynamic Segments (`:id`)
|
||||
The router automatically parses URL parameters (like `:id`) and passes them as an object to the component function. You can also access them globally via `$router.params()`.
|
||||
|
||||
```javascript
|
||||
// If the URL is #/profile/42
|
||||
const UserProfile = (params) => {
|
||||
return H1(`User ID is: ${params.id}`); // Displays "User ID is: 42"
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Navigation Utilities
|
||||
|
||||
SigPro provides a set of programmatic methods to control the history and read the state.
|
||||
|
||||
### `$router.to(path)`
|
||||
Navigates to a specific path. It automatically formats the hash (e.g., `/home` becomes `#/home`).
|
||||
```javascript
|
||||
Button({ onclick: () => $router.to("/dashboard") }, "Go to Dashboard")
|
||||
```
|
||||
|
||||
### `$router.back()`
|
||||
Goes back to the previous page in the browser history.
|
||||
```javascript
|
||||
Button({ onclick: () => $router.back() }, "Back")
|
||||
```
|
||||
|
||||
### `$router.path()`
|
||||
Returns the current path (without the `#`).
|
||||
```javascript
|
||||
$watch(() => {
|
||||
console.log("Current path is:", $router.path());
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Technical Behavior
|
||||
|
||||
* **Automatic Cleanup**: Every time you navigate, the router calls `.destroy()` on the previous view. This ensures that all **signals, effects, and event listeners** from the old page are purged from memory.
|
||||
* **Reactive Params**: `$router.params` is a signal (`$`). You can react to parameter changes without re-mounting the entire router outlet.
|
||||
* **Hash-Based**: By using `window.location.hash`, SigPro works out-of-the-box on any static hosting (like GitHub Pages or Vercel) without needing server-side redirects.
|
||||
|
||||
---
|
||||
|
||||
## Styling the Outlet
|
||||
The router returns a standard `div` with the `.router-outlet` class. You can easily style it or add transitions:
|
||||
|
||||
```css
|
||||
.router-outlet {
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
68
docs/api/signal.md
Normal file
68
docs/api/signal.md
Normal file
@@ -0,0 +1,68 @@
|
||||
# The Signal Function: `$( )`
|
||||
|
||||
The `$( )` function is the core constructor of SigPro. It defines how data is stored, computed, and persisted.
|
||||
|
||||
## Function Signature
|
||||
|
||||
```typescript
|
||||
$(initialValue: any, key?: string): Signal
|
||||
$(computation: Function): ComputedSignal
|
||||
```
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **`initialValue`** | `any` | Yes* | The starting value of your signal. |
|
||||
| **`computation`** | `Function` | Yes* | A function that returns a value based on other signals. |
|
||||
| **`key`** | `string` | No | A unique name to persist the signal in `localStorage`. |
|
||||
|
||||
*\*Either an initial value or a computation function must be provided.*
|
||||
|
||||
---
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### 1. Simple State
|
||||
**`$(value)`**
|
||||
Creates a writable signal. It returns a function that acts as both **getter** and **setter**.
|
||||
|
||||
```javascript
|
||||
const count = $(0);
|
||||
|
||||
count(); // Read (0)
|
||||
count(10); // Write (10)
|
||||
```
|
||||
|
||||
### 2. Persistent State
|
||||
**`$(value, key)`**
|
||||
Creates a writable signal that syncs with the browser's storage.
|
||||
|
||||
```javascript
|
||||
const theme = $("light", "app-theme");
|
||||
|
||||
theme("dark"); // Automatically calls localStorage.setItem("app-theme", '"dark"')
|
||||
```
|
||||
*Note: On page load, SigPro will prioritize the value found in `localStorage` over the `initialValue`.*
|
||||
|
||||
### 3. Computed State (Derived)
|
||||
**`$(function)`**
|
||||
Creates a read-only signal that updates automatically when any signal used inside it changes.
|
||||
|
||||
```javascript
|
||||
const price = $(100);
|
||||
const tax = $(0.21);
|
||||
|
||||
// This tracks both 'price' and 'tax' automatically
|
||||
const total = $(() => price() * (1 + tax()));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Updating with Logic
|
||||
When calling the setter, you can pass an **updater function** to access the current value safely.
|
||||
|
||||
```javascript
|
||||
const list = $(["A", "B"]);
|
||||
|
||||
// Adds "C" using the previous state
|
||||
list(prev => [...prev, "C"]);
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
133
docs/api/tags.md
Normal file
133
docs/api/tags.md
Normal file
@@ -0,0 +1,133 @@
|
||||
# Global Tag Helpers
|
||||
|
||||
In **SigPro**, you don't need to manually type `$html('div', ...)` for every element. To keep your code declarative and readable, the engine automatically generates **Global Helper Functions** for all standard HTML5 tags upon initialization.
|
||||
|
||||
## 1. How it Works
|
||||
|
||||
SigPro iterates through a manifest of standard HTML tags and attaches a wrapper function for each one directly to the `window` object. This creates a specialized **DSL** (Domain Specific Language) that looks like a template engine but is **100% standard JavaScript**.
|
||||
|
||||
* **Under the hood:** `$html('button', { onclick: ... }, 'Click')`
|
||||
* **SigPro Style:** `Button({ onclick: ... }, 'Click')`
|
||||
|
||||
---
|
||||
|
||||
## 2. The Complete Global Registry
|
||||
|
||||
The following functions are injected into the global scope using **PascalCase** to prevent naming collisions with common JS variables:
|
||||
|
||||
| Category | Available Global Functions |
|
||||
| :--- | :--- |
|
||||
| **Structure** | `Div`, `Span`, `P`, `Section`, `Nav`, `Main`, `Header`, `Footer`, `Article`, `Aside` |
|
||||
| **Typography** | `H1` to `H6`, `Ul`, `Ol`, `Li`, `Dl`, `Dt`, `Dd`, `Strong`, `Em`, `Code`, `Pre`, `Small`, `B`, `U`, `Mark` |
|
||||
| **Interactive** | `Button`, `A`, `Label`, `Br`, `Hr`, `Details`, `Summary`, `Dialog` |
|
||||
| **Forms** | `Form`, `Input`, `Select`, `Option`, `Textarea`, `Fieldset`, `Legend` |
|
||||
| **Tables** | `Table`, `Thead`, `Tbody`, `Tr`, `Th`, `Td`, `Tfoot`, `Caption` |
|
||||
| **Media** | `Img`, `Canvas`, `Video`, `Audio`, `Svg`, `Iframe`, `Picture`, `Source` |
|
||||
|
||||
---
|
||||
|
||||
## 3. Usage Patterns (Smart Arguments)
|
||||
|
||||
SigPro tag helpers are flexible. They automatically detect if you are passing attributes, children, or both.
|
||||
|
||||
### A. Attributes + Children
|
||||
```javascript
|
||||
Div({ class: 'container', id: 'main' }, [
|
||||
H1("Welcome to SigPro"),
|
||||
P("The zero-VDOM framework.")
|
||||
]);
|
||||
```
|
||||
|
||||
### B. Children Only (The "Skipper")
|
||||
If you don't need attributes, you can pass the content directly as the first argument.
|
||||
```javascript
|
||||
Section([
|
||||
H2("Clean Syntax"),
|
||||
Button("I have no props!")
|
||||
]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Reactive Power
|
||||
|
||||
These helpers are natively wired into SigPro's **`$watch`** engine.
|
||||
|
||||
### Reactive Attributes (One-Way)
|
||||
Simply pass a Signal (function) to any attribute. SigPro creates an internal `$watch` to keep the DOM in sync.
|
||||
```javascript
|
||||
const theme = $("light");
|
||||
|
||||
Div({
|
||||
class: () => `app-box ${theme()}`
|
||||
}, "Themeable Box");
|
||||
```
|
||||
|
||||
### Smart Two-Way Binding (Automatic)
|
||||
SigPro automatically bridges the **Signal** and the **Input** element bi-directionally when you assign a Signal to `value` or `checked`. No special operators are required.
|
||||
|
||||
```javascript
|
||||
const search = $("");
|
||||
|
||||
// UI updates Signal AND Signal updates UI automatically
|
||||
Input({
|
||||
type: "text",
|
||||
placeholder: "Search...",
|
||||
value: search
|
||||
});
|
||||
```
|
||||
|
||||
> **Pro Tip:** If you want an input to be **read-only** but still reactive, wrap the signal in an anonymous function: `value: () => search()`. This prevents the "backwards" synchronization.
|
||||
|
||||
### Dynamic Flow & Cleanup
|
||||
Combine tags with Core controllers. SigPro automatically cleans up the `$watch` instances and event listeners when nodes are removed from the DOM.
|
||||
```javascript
|
||||
const items = $(["Apple", "Banana", "Cherry"]);
|
||||
|
||||
Ul({ class: "list-disc" }, [
|
||||
$for(items, (item) => Li(item), (item) => item)
|
||||
]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
<div class="alert alert-error shadow-lg my-8 border-l-8 border-error bg-error/10 text-error-content">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">Important: Naming Conventions</h3>
|
||||
<div class="text-sm opacity-90">
|
||||
<ol class="list-decimal ml-4 mt-2 space-y-2">
|
||||
<li><b>Avoid Shadowing:</b> Don't name your local variables like the tags (e.g., <code>const Div = ...</code>). This will "hide" the global SigPro helper.</li>
|
||||
<li><b>Custom Components:</b> Always use <b>PascalCase</b> for your own component functions (e.g., <code>UserCard</code>, <code>NavMenu</code>) to distinguish them from built-in Tag Helpers.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 5. Logic to UI Comparison
|
||||
|
||||
Here is how a dynamic **User Status** component translates from SigPro logic to the final DOM structure.
|
||||
|
||||
```javascript
|
||||
const UserStatus = (name, online) => (
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Span({
|
||||
hidden: () => !online(),
|
||||
class: 'w-3 h-3 bg-green-500 rounded-full'
|
||||
}),
|
||||
P({
|
||||
class: () => online() ? "text-bold" : "text-gray-400"
|
||||
}, name)
|
||||
])
|
||||
);
|
||||
```
|
||||
|
||||
| State (`online`) | Rendered HTML | Memory Management |
|
||||
| :--- | :--- | :--- |
|
||||
| **`true`** | `<div class="flex..."><span class="w-3..."></span><p class="text-bold">John</p></div>` | Watcher active |
|
||||
| **`false`** | `<div class="flex..."><span hidden class="w-3..."></span><p class="text-gray-400">John</p></div>` | Attribute synced |
|
||||
|
||||
File diff suppressed because one or more lines are too long
91
docs/api/watch.md
Normal file
91
docs/api/watch.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# Reactivity Control: `$watch( )`
|
||||
|
||||
The `$watch` function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. `$watch` is **polymorphic**: it can track dependencies automatically or follow an explicit list.
|
||||
|
||||
## Function Signature
|
||||
|
||||
```typescript
|
||||
// Automatic Mode (Magic Tracking)
|
||||
$watch(callback: Function): StopFunction
|
||||
|
||||
// Explicit Mode (Isolated Dependencies)
|
||||
$watch(deps: Signal[], callback: Function): StopFunction
|
||||
```
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **`target / deps`** | `Function` | `Array` | Yes | Either the code to run (Auto) or an array of signals to watch (Explicit). |
|
||||
| **`callback`** | `Function` | Only in Explicit | The code that will run when the `deps` change. |
|
||||
|
||||
**Returns:** A `StopFunction` that, when called, destroys the watcher and releases memory.
|
||||
|
||||
---
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### 1. Automatic Mode (Default)
|
||||
Any signal you "touch" inside the callback becomes a dependency. SigPro tracks them behind the scenes.
|
||||
|
||||
```javascript
|
||||
const count = $(0);
|
||||
|
||||
$watch(() => {
|
||||
// Re-runs every time 'count' changes
|
||||
console.log(`Count is: ${count()}`);
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Explicit Mode (Advanced Cleanup)
|
||||
This mode **isolates** execution. The callback only triggers when the signals in the array change. Any other signal accessed *inside* the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.
|
||||
|
||||
```javascript
|
||||
const sPath = $("/home");
|
||||
const user = $("Admin");
|
||||
|
||||
$watch([sPath], () => {
|
||||
// Only triggers when 'sPath' changes.
|
||||
// Changes to 'user' will NOT trigger this, preventing accidental re-renders.
|
||||
console.log(`Navigating to ${sPath()} as ${user()}`);
|
||||
});
|
||||
```
|
||||
|
||||
### 3. Automatic Cleanup
|
||||
If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as "children" of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.
|
||||
|
||||
```javascript
|
||||
$watch(() => {
|
||||
const timer = setInterval(() => console.log("Tick"), 1000);
|
||||
|
||||
// Register a manual cleanup if needed
|
||||
// Or simply rely on SigPro to kill nested $watch() calls
|
||||
return () => clearInterval(timer);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Stopping a Watcher
|
||||
Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.
|
||||
|
||||
```javascript
|
||||
const stop = $watch(() => console.log(count()));
|
||||
|
||||
// Later...
|
||||
stop(); // The link between the signal and this code is physically severed.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pro Tip: The Microtask Queue
|
||||
SigPro batches updates. If you update multiple signals in the same execution block, the watcher will only fire **once** at the end of the task.
|
||||
|
||||
```javascript
|
||||
const a = $(0);
|
||||
const b = $(0);
|
||||
|
||||
$watch(() => console.log(a(), b()));
|
||||
|
||||
// This triggers only ONE re-run.
|
||||
a(1);
|
||||
b(2);
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"♻️ Reactive Lists: $for( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/for.md","filePath":"api/for.md"}'),n={name:"api/for.md"};function l(h,s,r,p,k,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="♻️-reactive-lists-for" tabindex="-1">♻️ Reactive Lists: <code>$for( )</code> <a class="header-anchor" href="#♻️-reactive-lists-for" aria-label="Permalink to "♻️ Reactive Lists: \`$for( )\`""></a></h1><p>The <code>$for</code> function is a high-performance list renderer. It maps an array (or a Signal containing an array) to DOM nodes. Unlike a simple <code>.map()</code>, <code>$for</code> is <strong>keyed</strong>, meaning it only updates, moves, or deletes the specific items that changed.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to "🛠️ Function Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> source: Signal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">any[]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[], </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> render: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> keyFn: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>source</code></strong></td><td style="text-align:left;"><code>Signal</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">The reactive array to iterate over.</td></tr><tr><td style="text-align:left;"><strong><code>render</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A function that returns a component or Node for each item.</td></tr><tr><td style="text-align:left;"><strong><code>keyFn</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A function to extract a <strong>unique ID</strong> for each item (crucial for performance).</td></tr></tbody></table><p><strong>Returns:</strong> A <code>div</code> element with <code>display: contents</code> containing the live list.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to "📖 Usage Patterns""></a></h2><h3 id="_1-basic-keyed-list" tabindex="-1">1. Basic Keyed List <a class="header-anchor" href="#_1-basic-keyed-list" aria-label="Permalink to "1. Basic Keyed List""></a></h3><p>Always use a unique property (like an <code>id</code>) as a key to ensure SigPro doesn't recreate nodes unnecessarily.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> users</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { id: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Alice"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { id: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Bob"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"list"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(users, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, user.name),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user.id</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-handling-primitive-arrays" tabindex="-1">2. Handling Primitive Arrays <a class="header-anchor" href="#_2-handling-primitive-arrays" aria-label="Permalink to "2. Handling Primitive Arrays""></a></h3><p>If your array contains simple strings or numbers, you can use the value itself or the index as a key (though the index is less efficient for reordering).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tags</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Tech"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"JS"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Web"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex gap-1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tags, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tag), (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tag)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🏗️-how-it-works-the-reconciliation" tabindex="-1">🏗️ How it Works (The Reconciliation) <a class="header-anchor" href="#🏗️-how-it-works-the-reconciliation" aria-label="Permalink to "🏗️ How it Works (The Reconciliation)""></a></h2><p>When the <code>source</code> signal changes, <code>$for</code> performs the following steps:</p><ol><li><strong>Key Diffing</strong>: It compares the new keys with the previous ones stored in an internal <code>Map</code>.</li><li><strong>Node Reuse</strong>: If a key already exists, the DOM node is <strong>reused</strong> and moved to its new position. No new elements are created.</li><li><strong>Cleanup</strong>: If a key disappears from the list, SigPro calls <code>.destroy()</code> on that specific item's instance. This stops all its internal watchers and removes its DOM nodes.</li></ol><hr><h2 id="💡-performance-tips" tabindex="-1">💡 Performance Tips <a class="header-anchor" href="#💡-performance-tips" aria-label="Permalink to "💡 Performance Tips""></a></h2><ul><li><strong>Stable Keys</strong>: Never use <code>Math.random()</code> as a key. This will force SigPro to destroy and recreate the entire list on every update, killing performance.</li><li><strong>Component Encapsulation</strong>: If each item in your list has its own complex internal state, <code>$for</code> ensures that state is preserved even if the list is reordered, as long as the key remains the same.</li></ul><hr><h2 id="🧪-summary-comparison" tabindex="-1">🧪 Summary Comparison <a class="header-anchor" href="#🧪-summary-comparison" aria-label="Permalink to "🧪 Summary Comparison""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Standard <code>Array.map</code></th><th style="text-align:left;">SigPro <code>$for</code></th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Re-render</strong></td><td style="text-align:left;">Re-renders everything</td><td style="text-align:left;">Only updates changes</td></tr><tr><td style="text-align:left;"><strong>DOM Nodes</strong></td><td style="text-align:left;">Re-created every time</td><td style="text-align:left;"><strong>Reused via Keys</strong></td></tr><tr><td style="text-align:left;"><strong>Memory</strong></td><td style="text-align:left;">Potential leaks</td><td style="text-align:left;"><strong>Automatic Cleanup</strong></td></tr><tr><td style="text-align:left;"><strong>State</strong></td><td style="text-align:left;">Lost on re-render</td><td style="text-align:left;"><strong>Preserved per item</strong></td></tr></tbody></table>`,24)])])}const E=i(n,[["render",l]]);export{g as __pageData,E as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"♻️ Reactive Lists: $for( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/for.md","filePath":"api/for.md"}'),n={name:"api/for.md"};function l(h,s,r,p,k,d){return t(),a("div",null,[...s[0]||(s[0]=[e("",24)])])}const E=i(n,[["render",l]]);export{g as __pageData,E as default};
|
||||
@@ -1,18 +0,0 @@
|
||||
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🏗️ The DOM Factory: $html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,r,o,p,d){return i(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🏗️-the-dom-factory-html" tabindex="-1">🏗️ The DOM Factory: <code>$html( )</code> <a class="header-anchor" href="#🏗️-the-dom-factory-html" aria-label="Permalink to "🏗️ The DOM Factory: \`$html( )\`""></a></h1><p><code>$html</code> is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It uses <code>$.watch</code> to maintain a live, high-performance link between your Signals and the Document Object Model.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to "🛠 Function Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tagName: string, props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object, children</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>tagName</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">Valid HTML tag name (e.g., <code>"div"</code>, <code>"button"</code>).</td></tr><tr><td style="text-align:left;"><strong><code>props</code></strong></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">No</td><td style="text-align:left;">HTML attributes, event listeners, and reactive bindings.</td></tr><tr><td style="text-align:left;"><strong><code>children</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Nested elements, text strings, or reactive functions.</td></tr></tbody></table><hr><h2 id="📖-key-features" tabindex="-1">📖 Key Features <a class="header-anchor" href="#📖-key-features" aria-label="Permalink to "📖 Key Features""></a></h2><h3 id="_1-attribute-handling" tabindex="-1">1. Attribute Handling <a class="header-anchor" href="#_1-attribute-handling" aria-label="Permalink to "1. Attribute Handling""></a></h3><p>SigPro intelligently decides how to apply each property:</p><ul><li><strong>Standard Props</strong>: Applied via <code>setAttribute</code> or direct property assignment.</li><li><strong>Class Names</strong>: Supports <code>class</code> or <code>className</code> interchangeably.</li><li><strong>Boolean Props</strong>: Automatic handling for <code>checked</code>, <code>disabled</code>, <code>hidden</code>, etc.</li></ul><h3 id="_2-event-listeners" tabindex="-1">2. Event Listeners <a class="header-anchor" href="#_2-event-listeners" aria-label="Permalink to "2. Event Listeners""></a></h3><p>Events are defined by the <code>on</code> prefix. SigPro automatically registers the listener and ensures it is cleaned up when the element is destroyed.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Clicked!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, e),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Click Me"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_3-reactive-attributes-one-way" tabindex="-1">3. Reactive Attributes (One-Way) <a class="header-anchor" href="#_3-reactive-attributes-one-way" aria-label="Permalink to "3. Reactive Attributes (One-Way)""></a></h3><p>If an attribute value is a <strong>function</strong> (like a Signal), <code>$html</code> creates an internal <strong><code>$.watch</code></strong> to keep the DOM in sync with the state.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Updates the class whenever 'theme()' changes</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "dark"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "bg-black"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "bg-white"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_4-smart-two-way-binding-automatic" tabindex="-1">4. Smart Two-Way Binding (Automatic) <a class="header-anchor" href="#_4-smart-two-way-binding-automatic" aria-label="Permalink to "4. Smart Two-Way Binding (Automatic)""></a></h3><p>SigPro automatically enables <strong>bidirectional synchronization</strong> when it detects a <strong>Signal</strong> assigned to a form-capable attribute (<code>value</code> or <code>checked</code>) on an input element (<code>input</code>, <code>textarea</code>, <code>select</code>).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Syncs input value <-> signal automatically</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: username </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// No special symbols needed!</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><blockquote><p><strong>Note:</strong> To use a Signal as <strong>read-only</strong> in an input, wrap it in an anonymous function: <code>value: () => username()</code>.</p></blockquote><h3 id="_5-reactive-children" tabindex="-1">5. Reactive Children <a class="header-anchor" href="#_5-reactive-children" aria-label="Permalink to "5. Reactive Children""></a></h3><p>Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using <code>$.watch</code> for that specific part of the DOM.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({}, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Static Title"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only this text node re-renders when 'count' changes</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`Current count: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🧹-memory-management-internal" tabindex="-1">🧹 Memory Management (Internal) <a class="header-anchor" href="#🧹-memory-management-internal" aria-label="Permalink to "🧹 Memory Management (Internal)""></a></h2><p>Every element created with <code>$html</code> is "self-aware" regarding its reactive dependencies.</p><ul><li><strong><code>._cleanups</code></strong>: A hidden <code>Set</code> attached to the element that stores all <code>stop()</code> functions from its internal <code>$.watch</code> calls and event listeners.</li><li><strong>Lifecycle</strong>: When an element is removed by a Controller (<code>$.if</code>, <code>$.for</code>, or <code>$.router</code>), SigPro performs a recursive <strong>"sweep"</strong> to execute these cleanups, ensuring <strong>zero memory leaks</strong>.</li></ul><hr><h2 id="💡-tag-constructors-the-shortcuts" tabindex="-1">💡 Tag Constructors (The Shortcuts) <a class="header-anchor" href="#💡-tag-constructors-the-shortcuts" aria-label="Permalink to "💡 Tag Constructors (The Shortcuts)""></a></h2><p>Instead of writing <code>$html("div", ...)</code> every time, SigPro provides PascalCase global functions for all standard HTML tags:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This:</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"wrapper"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Hello"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ])</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Is exactly equivalent to:</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"div"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"wrapper"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"span"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Hello"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ])</span></span></code></pre></div>`,31)])])}const g=t(n,[["render",l]]);export{k as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as t,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🏗️ The DOM Factory: $html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,r,o,p,d){return i(),a("div",null,[...s[0]||(s[0]=[e("",31)])])}const g=t(n,[["render",l]]);export{k as __pageData,g as default};
|
||||
@@ -1,19 +0,0 @@
|
||||
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🔀 Reactive Branching: $if( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/if.md","filePath":"api/if.md"}'),n={name:"api/if.md"};function l(h,s,p,r,o,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🔀-reactive-branching-if" tabindex="-1">🔀 Reactive Branching: <code>$if( )</code> <a class="header-anchor" href="#🔀-reactive-branching-if" aria-label="Permalink to "🔀 Reactive Branching: \`$if( )\`""></a></h1><p>The <code>$if</code> function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to "🛠️ Function Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> condition: Signal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Function, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thenVal: Component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Node, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> otherwiseVal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Component </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Node</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>condition</code></strong></td><td style="text-align:left;"><code>Signal</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A reactive source that determines which branch to render.</td></tr><tr><td style="text-align:left;"><strong><code>thenVal</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">The content to show when the condition is <strong>truthy</strong>.</td></tr><tr><td style="text-align:left;"><strong><code>otherwiseVal</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">The content to show when the condition is <strong>falsy</strong> (defaults to null).</td></tr></tbody></table><p><strong>Returns:</strong> A <code>div</code> element with <code>display: contents</code> that acts as a reactive portal for the branches.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to "📖 Usage Patterns""></a></h2><h3 id="_1-simple-toggle" tabindex="-1">1. Simple Toggle <a class="header-anchor" href="#_1-simple-toggle" aria-label="Permalink to "1. Simple Toggle""></a></h3><p>The most common use case is showing or hiding a single element based on a state.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isVisible</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> isVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Toggle Message"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(isVisible, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Now you see me!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Now you don't..."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-lazy-component-loading" tabindex="-1">2. Lazy Component Loading <a class="header-anchor" href="#_2-lazy-component-loading" aria-label="Permalink to "2. Lazy Component Loading""></a></h3><p>Unlike using a hidden class (CSS <code>display: none</code>), <code>$if</code> is <strong>lazy</strong>. The branch that isn't active <strong>is never created</strong>. This saves memory and initial processing time.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLogged</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Dashboard</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only executed if logged in</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> LoginGate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only executed if guest</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><hr><h2 id="🧹-automatic-cleanup" tabindex="-1">🧹 Automatic Cleanup <a class="header-anchor" href="#🧹-automatic-cleanup" aria-label="Permalink to "🧹 Automatic Cleanup""></a></h2><p>One of the core strengths of <code>$if</code> is its integrated <strong>Cleanup</strong> logic. SigPro ensures that when a branch is swapped out, it is completely purged.</p><ol><li><strong>Stop Watchers</strong>: All <code>$.watch</code> calls inside the inactive branch are permanently stopped.</li><li><strong>Unbind Events</strong>: Event listeners attached via <code>$.html</code> are removed.</li><li><strong>Recursive Sweep</strong>: SigPro performs a deep "sweep" of the removed branch to ensure no nested reactive effects remain active.</li></ol><hr><h2 id="💡-best-practices" tabindex="-1">💡 Best Practices <a class="header-anchor" href="#💡-best-practices" aria-label="Permalink to "💡 Best Practices""></a></h2><ul><li><strong>Function Wrappers</strong>: If your branches are heavy (e.g., they contain complex components), wrap them in a function <code>() => MyComponent()</code>. This prevents the component from being initialized until the condition actually meets its requirement.</li><li><strong>Logical Expressions</strong>: You can pass a complex computed function as the condition:<div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &&</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'ready'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Threshold reached!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></li></ul><hr><h2 id="🏗️-technical-comparison" tabindex="-1">🏗️ Technical Comparison <a class="header-anchor" href="#🏗️-technical-comparison" aria-label="Permalink to "🏗️ Technical Comparison""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Feature</th><th style="text-align:left;">Standard CSS <code>hidden</code></th><th style="text-align:left;">SigPro <code>$if</code></th></tr></thead><tbody><tr><td style="text-align:left;"><strong>DOM Presence</strong></td><td style="text-align:left;">Always present</td><td style="text-align:left;">Only if active</td></tr><tr><td style="text-align:left;"><strong>Reactivity</strong></td><td style="text-align:left;">Still processing in background</td><td style="text-align:left;"><strong>Paused/Destroyed</strong></td></tr><tr><td style="text-align:left;"><strong>Memory usage</strong></td><td style="text-align:left;">Higher</td><td style="text-align:left;"><strong>Optimized</strong></td></tr><tr><td style="text-align:left;"><strong>Cleanup</strong></td><td style="text-align:left;">Manual</td><td style="text-align:left;"><strong>Automatic</strong></td></tr></tbody></table>`,24)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🔀 Reactive Branching: $if( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/if.md","filePath":"api/if.md"}'),n={name:"api/if.md"};function l(h,s,p,r,o,d){return t(),a("div",null,[...s[0]||(s[0]=[e("",24)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
@@ -1,16 +0,0 @@
|
||||
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e(`<h1 id="🔌-application-mounter-mount" tabindex="-1">🔌 Application Mounter: <code>$mount( )</code> <a class="header-anchor" href="#🔌-application-mounter-mount" aria-label="Permalink to "🔌 Application Mounter: \`$mount( )\`""></a></h1><p>The <code>$mount</code> function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document and initializing its reactive lifecycle.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to "🛠️ Function Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node: Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement): RuntimeObject</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>node</code></strong></td><td style="text-align:left;"><code>Function</code> or <code>Node</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component function or DOM element to render.</td></tr><tr><td style="text-align:left;"><strong><code>target</code></strong></td><td style="text-align:left;"><code>string</code> or <code>Node</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">CSS selector or DOM element where the app will live.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>Runtime</code> object containing the <code>container</code> and a <code>destroy()</code> method to wipe all reactivity and DOM nodes.</p><hr><h2 id="📖-common-usage-scenarios" tabindex="-1">📖 Common Usage Scenarios <a class="header-anchor" href="#📖-common-usage-scenarios" aria-label="Permalink to "📖 Common Usage Scenarios""></a></h2><h3 id="_1-the-spa-entry-point" tabindex="-1">1. The SPA Entry Point <a class="header-anchor" href="#_1-the-spa-entry-point" aria-label="Permalink to "1. The SPA Entry Point""></a></h3><p>In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './sigpro.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mounts your main App component</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app-root'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_2-reactive-islands" tabindex="-1">2. Reactive "Islands" <a class="header-anchor" href="#_2-reactive-islands" aria-label="Permalink to "2. Reactive "Islands"""></a></h3><p>SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Clicks: "</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, count</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount only the counter into a specific sidebar div</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#sidebar-widget'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="🔄-how-it-works-lifecycle-cleanup" tabindex="-1">🔄 How it Works (Lifecycle & Cleanup) <a class="header-anchor" href="#🔄-how-it-works-lifecycle-cleanup" aria-label="Permalink to "🔄 How it Works (Lifecycle & Cleanup)""></a></h2><p>When <code>$mount</code> is executed, it performs these critical steps to ensure a leak-free environment:</p><ol><li><strong>Duplicate Detection</strong>: If you call <code>$mount</code> on a target that already has a SigPro instance, it automatically calls <code>.destroy()</code> on the previous instance. This prevents "Zombie Effects" from stacking in memory.</li><li><strong>Internal Scoping</strong>: It executes the component function inside an internal <strong>Reactive Owner</strong>. This captures every <code>$watch</code> and event listener created during the render.</li><li><strong>Target Injection</strong>: It clears the target using <code>replaceChildren()</code> and appends the new component.</li><li><strong>Runtime Creation</strong>: It returns a control object: <ul><li><code>container</code>: The actual DOM element created.</li><li><code>destroy()</code>: The "kill switch" that runs all cleanups, stops all watchers, and removes the element from the DOM.</li></ul></li></ol><hr><h2 id="🛑-manual-unmounting" tabindex="-1">🛑 Manual Unmounting <a class="header-anchor" href="#🛑-manual-unmounting" aria-label="Permalink to "🛑 Manual Unmounting""></a></h2><p>While SigPro handles most cleanups automatically (via <code>$if</code>, <code>$for</code>, and <code>$router</code>), you can manually destroy any mounted instance. This is vital for imperatively managed UI like <strong>Toasts</strong> or <strong>Modals</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> instance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyToast, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#toast-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later, to remove the toast and kill its reactivity:</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><hr><h2 id="💡-summary-cheat-sheet" tabindex="-1">💡 Summary Cheat Sheet <a class="header-anchor" href="#💡-summary-cheat-sheet" aria-label="Permalink to "💡 Summary Cheat Sheet""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code Pattern</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to CSS Selector</strong></td><td style="text-align:left;"><code>$mount(App, '#root')</code></td></tr><tr><td style="text-align:left;"><strong>Mount to DOM Node</strong></td><td style="text-align:left;"><code>$mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Clean & Re-mount</strong></td><td style="text-align:left;">Calling <code>$mount</code> again on the same target</td></tr><tr><td style="text-align:left;"><strong>Total Cleanup</strong></td><td style="text-align:left;"><code>const app = $mount(App); app.destroy();</code></td></tr></tbody></table>`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e("",25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as n,ae as l}from"./chunks/framework.C8AWLET_.js";const f=JSON.parse('{"title":"⚡ Quick API Reference","description":"","frontmatter":{},"headers":[],"relativePath":"api/quick.md","filePath":"api/quick.md"}'),o={name:"api/quick.md"};function d(s,t,r,i,c,g){return a(),n("div",null,[...t[0]||(t[0]=[l("",11)])])}const u=e(o,[["render",d]]);export{f as __pageData,u as default};
|
||||
@@ -1,23 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"🚦 Routing: $router() & Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,k,o){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="🚦-routing-router-utilities" tabindex="-1">🚦 Routing: <code>$router()</code> & Utilities <a class="header-anchor" href="#🚦-routing-router-utilities" aria-label="Permalink to "🚦 Routing: \`$router()\` & Utilities""></a></h1><p>SigPro includes a built-in, lightweight <strong>Hash Router</strong> to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically.</p><h2 id="🛠-router-signature" tabindex="-1">🛠 Router Signature <a class="header-anchor" href="#🛠-router-signature" aria-label="Permalink to "🛠 Router Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes: Route[]): HTMLElement</span></span></code></pre></div><h3 id="route-object" tabindex="-1">Route Object <a class="header-anchor" href="#route-object" aria-label="Permalink to "Route Object""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Property</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>path</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">The URL fragment (e.g., <code>"/"</code>, <code>"/user/:id"</code>, or <code>"*"</code>).</td></tr><tr><td style="text-align:left;"><strong><code>component</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">A function that returns a Node, a String, or a reactive View.</td></tr></tbody></table><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to "📖 Usage Patterns""></a></h2><h3 id="_1-defining-routes" tabindex="-1">1. Defining Routes <a class="header-anchor" href="#_1-defining-routes" aria-label="Permalink to "1. Defining Routes""></a></h3><p>The <code>$router</code> returns a <code>div</code> element with the class <code>.router-outlet</code>. When the hash changes, the router destroys the previous view and mounts the new one inside this container.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"app-layout"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Navbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The router outlet is placed here</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, component: Home },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/profile/:id"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserProfile</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(params.id) },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"*"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"404 Not Found"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="_2-dynamic-segments-id" tabindex="-1">2. Dynamic Segments (<code>:id</code>) <a class="header-anchor" href="#_2-dynamic-segments-id" aria-label="Permalink to "2. Dynamic Segments (\`:id\`)""></a></h3><p>The router automatically parses URL parameters (like <code>:id</code>) and passes them as an object to the component function. You can also access them globally via <code>$router.params()</code>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If the URL is #/profile/42</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`User ID is: \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">params</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Displays "User ID is: 42"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><hr><h2 id="🏎-navigation-utilities" tabindex="-1">🏎 Navigation Utilities <a class="header-anchor" href="#🏎-navigation-utilities" aria-label="Permalink to "🏎 Navigation Utilities""></a></h2><p>SigPro provides a set of programmatic methods to control the history and read the state.</p><h3 id="router-to-path" tabindex="-1"><code>$router.to(path)</code> <a class="header-anchor" href="#router-to-path" aria-label="Permalink to "\`$router.to(path)\`""></a></h3><p>Navigates to a specific path. It automatically formats the hash (e.g., <code>/home</code> becomes <code>#/home</code>).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/dashboard"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Go to Dashboard"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="router-back" tabindex="-1"><code>$router.back()</code> <a class="header-anchor" href="#router-back" aria-label="Permalink to "\`$router.back()\`""></a></h3><p>Goes back to the previous page in the browser history.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">back</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Back"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="router-path" tabindex="-1"><code>$router.path()</code> <a class="header-anchor" href="#router-path" aria-label="Permalink to "\`$router.path()\`""></a></h3><p>Returns the current path (without the <code>#</code>).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Current path is:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="⚡-technical-behavior" tabindex="-1">⚡ Technical Behavior <a class="header-anchor" href="#⚡-technical-behavior" aria-label="Permalink to "⚡ Technical Behavior""></a></h2><ul><li><strong>Automatic Cleanup</strong>: Every time you navigate, the router calls <code>.destroy()</code> on the previous view. This ensures that all <strong>signals, effects, and event listeners</strong> from the old page are purged from memory.</li><li><strong>Reactive Params</strong>: <code>$router.params</code> is a signal (<code>$</code>). You can react to parameter changes without re-mounting the entire router outlet.</li><li><strong>Hash-Based</strong>: By using <code>window.location.hash</code>, SigPro works out-of-the-box on any static hosting (like GitHub Pages or Vercel) without needing server-side redirects.</li></ul><hr><h2 id="🎨-styling-the-outlet" tabindex="-1">🎨 Styling the Outlet <a class="header-anchor" href="#🎨-styling-the-outlet" aria-label="Permalink to "🎨 Styling the Outlet""></a></h2><p>The router returns a standard <code>div</code> with the <code>.router-outlet</code> class. You can easily style it or add transitions:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.router-outlet</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> min-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">vh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> animation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: fadeIn </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ease</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@keyframes</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> fadeIn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">opacity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translateY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">opacity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translateY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,33)])])}const g=i(n,[["render",h]]);export{E as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"🚦 Routing: $router() & Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,k,o){return a(),t("div",null,[...s[0]||(s[0]=[e("",33)])])}const g=i(n,[["render",h]]);export{E as __pageData,g as default};
|
||||
@@ -1,14 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"💎 The Signal Function: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/signal.md","filePath":"api/signal.md"}'),n={name:"api/signal.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="💎-the-signal-function" tabindex="-1">💎 The Signal Function: <code>$( )</code> <a class="header-anchor" href="#💎-the-signal-function" aria-label="Permalink to "💎 The Signal Function: \`$( )\`""></a></h1><p>The <code>$( )</code> function is the core constructor of SigPro. It defines how data is stored, computed, and persisted.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to "🛠 Function Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(initialValue: any, key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string): Signal</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(computation: Function): ComputedSignal</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>initialValue</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">Yes*</td><td style="text-align:left;">The starting value of your signal.</td></tr><tr><td style="text-align:left;"><strong><code>computation</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes*</td><td style="text-align:left;">A function that returns a value based on other signals.</td></tr><tr><td style="text-align:left;"><strong><code>key</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">No</td><td style="text-align:left;">A unique name to persist the signal in <code>localStorage</code>.</td></tr></tbody></table><p><em>*Either an initial value or a computation function must be provided.</em></p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to "📖 Usage Patterns""></a></h2><h3 id="_1-simple-state" tabindex="-1">1. Simple State <a class="header-anchor" href="#_1-simple-state" aria-label="Permalink to "1. Simple State""></a></h3><p><strong><code>$(value)</code></strong> Creates a writable signal. It returns a function that acts as both <strong>getter</strong> and <strong>setter</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Read (0)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Write (10)</span></span></code></pre></div><h3 id="_2-persistent-state" tabindex="-1">2. Persistent State <a class="header-anchor" href="#_2-persistent-state" aria-label="Permalink to "2. Persistent State""></a></h3><p><strong><code>$(value, key)</code></strong> Creates a writable signal that syncs with the browser's storage.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"light"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"app-theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Automatically calls localStorage.setItem("app-theme", '"dark"')</span></span></code></pre></div><p><em>Note: On page load, SigPro will prioritize the value found in <code>localStorage</code> over the <code>initialValue</code>.</em></p><h3 id="_3-computed-state-derived" tabindex="-1">3. Computed State (Derived) <a class="header-anchor" href="#_3-computed-state-derived" aria-label="Permalink to "3. Computed State (Derived)""></a></h3><p><strong><code>$(function)</code></strong> Creates a read-only signal that updates automatically when any signal used inside it changes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> price</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tax</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.21</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This tracks both 'price' and 'tax' automatically</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> total</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> price</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tax</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span></code></pre></div><hr><h2 id="🔄-updating-with-logic" tabindex="-1">🔄 Updating with Logic <a class="header-anchor" href="#🔄-updating-with-logic" aria-label="Permalink to "🔄 Updating with Logic""></a></h2><p>When calling the setter, you can pass an <strong>updater function</strong> to access the current value safely.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> list</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"A"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"B"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Adds "C" using the previous state</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prev, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"C"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div>`,22)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"💎 The Signal Function: $( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/signal.md","filePath":"api/signal.md"}'),n={name:"api/signal.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[e("",22)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🎨 Global Tag Helpers","description":"","frontmatter":{},"headers":[],"relativePath":"api/tags.md","filePath":"api/tags.md"}'),n={name:"api/tags.md"};function l(h,s,o,p,d,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",37)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};
|
||||
@@ -1,33 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"⚡ Reactivity Control: $watch( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/watch.md","filePath":"api/watch.md"}'),e={name:"api/watch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="⚡-reactivity-control-watch" tabindex="-1">⚡ Reactivity Control: <code>$watch( )</code> <a class="header-anchor" href="#⚡-reactivity-control-watch" aria-label="Permalink to "⚡ Reactivity Control: \`$watch( )\`""></a></h1><p>The <code>$watch</code> function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. <code>$watch</code> is <strong>polymorphic</strong>: it can track dependencies automatically or follow an explicit list.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to "🛠 Function Signature""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Automatic Mode (Magic Tracking)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(callback: Function): StopFunction</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Explicit Mode (Isolated Dependencies)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(deps: Signal[], callback: Function): StopFunction</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>target / deps</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;"><code>Array</code></td><td style="text-align:left;">Yes</td></tr><tr><td style="text-align:left;"><strong><code>callback</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Only in Explicit</td><td style="text-align:left;">The code that will run when the <code>deps</code> change.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>StopFunction</code> that, when called, destroys the watcher and releases memory.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to "📖 Usage Patterns""></a></h2><h3 id="_1-automatic-mode-default" tabindex="-1">1. Automatic Mode (Default) <a class="header-anchor" href="#_1-automatic-mode-default" aria-label="Permalink to "1. Automatic Mode (Default)""></a></h3><p>Any signal you "touch" inside the callback becomes a dependency. SigPro tracks them behind the scenes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Re-runs every time 'count' changes</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Count is: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_2-explicit-mode-advanced-cleanup-🚀" tabindex="-1">2. Explicit Mode (Advanced Cleanup) 🚀 <a class="header-anchor" href="#_2-explicit-mode-advanced-cleanup-🚀" aria-label="Permalink to "2. Explicit Mode (Advanced Cleanup) 🚀""></a></h3><p>This mode <strong>isolates</strong> execution. The callback only triggers when the signals in the array change. Any other signal accessed <em>inside</em> the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sPath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/home"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> user</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Admin"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([sPath], () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only triggers when 'sPath' changes.</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Changes to 'user' will NOT trigger this, preventing accidental re-renders.</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Navigating to \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">} as \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">user</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_3-automatic-cleanup" tabindex="-1">3. Automatic Cleanup <a class="header-anchor" href="#_3-automatic-cleanup" aria-label="Permalink to "3. Automatic Cleanup""></a></h3><p>If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as "children" of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> timer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Tick"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Register a manual cleanup if needed</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Or simply rely on SigPro to kill nested $watch() calls</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(timer);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="🛑-stopping-a-watcher" tabindex="-1">🛑 Stopping a Watcher <a class="header-anchor" href="#🛑-stopping-a-watcher" aria-label="Permalink to "🛑 Stopping a Watcher""></a></h2><p>Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later...</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The link between the signal and this code is physically severed.</span></span></code></pre></div><hr><h2 id="💡-pro-tip-the-microtask-queue" tabindex="-1">💡 Pro Tip: The Microtask Queue <a class="header-anchor" href="#💡-pro-tip-the-microtask-queue" aria-label="Permalink to "💡 Pro Tip: The Microtask Queue""></a></h2><p>SigPro batches updates. If you update multiple signals in the same execution block, the watcher will only fire <strong>once</strong> at the end of the task.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> b</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This triggers only ONE re-run.</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,25)])])}const g=i(e,[["render",h]]);export{o as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"⚡ Reactivity Control: $watch( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/watch.md","filePath":"api/watch.md"}'),e={name:"api/watch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",25)])])}const g=i(e,[["render",h]]);export{o as __pageData,g as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{t as p}from"./chunks/theme.yfWKMLQM.js";import{R as s,a0 as i,a1 as u,a2 as c,a3 as l,a4 as f,a5 as d,a6 as m,a7 as h,a8 as g,a9 as A,d as v,u as y,v as C,s as P,aa as b,ab as w,ac as R,ad as E}from"./chunks/framework.C8AWLET_.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),R(),n.setup&&n.setup(),()=>E(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=_(),a=D();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function D(){return A(S)}function _(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as t,o as i,c as a,ae as o}from"./chunks/framework.C8AWLET_.js";const p=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SigPro","text":"Atomic Unified Reactive Engine","tagline":"High-precision atomic reactivity. No Virtual DOM. No compiler. No dependencies.","image":{"src":"/logo.svg","alt":"SigPro Logo"},"actions":[{"theme":"brand","text":"Get Started","link":"/install"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/natxocc/sigpro"}]},"features":[{"title":"⚛️ Atomic Reactivity","details":"Powered by fine-grained Signals. Forget about whole-component re-renders; SigPro updates only the specific text node or attribute that changed."},{"title":"🚀 Zero Virtual DOM","details":"By eliminating the V-DOM diffing layer, SigPro performs surgical, direct manipulations on the real DOM, removing memory and CPU overhead."},{"title":"🛠️ No Compiler Required","details":"Pure Vanilla JS. No Babel, no JSX, no complex build steps. Standard JavaScript that runs natively in the browser with maximum performance."},{"title":"📦 Ultra-Lightweight","details":"The core engine—including reactivity, DOM creation, persistence, and routing—is under 2KB. Perfect for performance-critical applications."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function r(s,e,l,c,h,d){return i(),a("div",null,[...e[0]||(e[0]=[o("",19)])])}const g=t(n,[["render",r]]);export{p as __pageData,g as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",25)])])}const E=i(l,[["render",e]]);export{g as __pageData,E as default};
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -1,44 +0,0 @@
|
||||
import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t(`<h1 id="🧩-ui-components-wip" tabindex="-1">🧩 UI Components <code>(WIP)</code> <a class="header-anchor" href="#🧩-ui-components-wip" aria-label="Permalink to "🧩 UI Components \`(WIP)\`""></a></h1><blockquote><p><strong>Status: Work In Progress.</strong> > These are high-level, complex visual components designed to speed up development. They replace native HTML elements with "superpowered" versions that handle their own internal logic, reactivity, and professional styling.</p></blockquote><h2 id="⚠️-prerequisites" tabindex="-1">⚠️ Prerequisites <a class="header-anchor" href="#⚠️-prerequisites" aria-label="Permalink to "⚠️ Prerequisites""></a></h2><p>To ensure all components render correctly with their reactive themes and states, your project <strong>must</strong> have the following versions installed:</p><ul><li><strong>Tailwind CSS v4+</strong>: For the new engine performance and modern CSS variables.</li><li><strong>DaisyUI v5+</strong>: Required for the updated theme-selectors and improved component classes used in the SigPro UI library.</li></ul><hr><h2 id="_1-what-are-ui-components" tabindex="-1">1. What are UI Components? <a class="header-anchor" href="#_1-what-are-ui-components" aria-label="Permalink to "1. What are UI Components?""></a></h2><p>Unlike <strong>Tag Helpers</strong> (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:</p><ul><li><strong>Stateful</strong>: They manage complex internal states (like date ranges, search filtering, or API lifecycles).</li><li><strong>Reactive</strong>: Attributes prefixed with <code>$</code> are automatically tracked via <code>$watch</code>.</li><li><strong>Self-Sane</strong>: They automatically use <code>._cleanups</code> to destroy observers or event listeners when removed from the DOM.</li><li><strong>Themed</strong>: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.</li></ul><hr><h2 id="_2-the-ui-registry-available-now" tabindex="-1">2. The UI Registry (Available Now) <a class="header-anchor" href="#_2-the-ui-registry-available-now" aria-label="Permalink to "2. The UI Registry (Available Now)""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Components</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Forms & Inputs</strong></td><td style="text-align:left;"><code>Button</code>, <code>Input</code>, <code>Select</code>, <code>Autocomplete</code>, <code>Datepicker</code>, <code>Colorpicker</code>, <code>CheckBox</code>, <code>Radio</code>, <code>Range</code>, <code>Rating</code>, <code>Swap</code></td></tr><tr><td style="text-align:left;"><strong>Feedback</strong></td><td style="text-align:left;"><code>Alert</code>, <code>Toast</code>, <code>Modal</code>, <code>Loading</code>, <code>Badge</code>, <code>Tooltip</code>, <code>Indicator</code></td></tr><tr><td style="text-align:left;"><strong>Navigation</strong></td><td style="text-align:left;"><code>Navbar</code>, <code>Menu</code>, <code>Drawer</code>, <code>Tabs</code>, <code>Accordion</code>, <code>Dropdown</code></td></tr><tr><td style="text-align:left;"><strong>Data & Layout</strong></td><td style="text-align:left;"><code>Request</code>, <code>Response</code>, <code>Grid</code> (AG-Grid), <code>List</code>, <code>Stack</code>, <code>Timeline</code>, <code>Stat</code>, <code>Fieldset</code>, <code>Fab</code></td></tr></tbody></table><hr><h2 id="_3-examples-with-superpowers" tabindex="-1">3. Examples with "Superpowers" <a class="header-anchor" href="#_3-examples-with-superpowers" aria-label="Permalink to "3. Examples with "Superpowers"""></a></h2><h3 id="a-the-declarative-api-flow-request-response" tabindex="-1">A. The Declarative API Flow (<code>Request</code> & <code>Response</code>) <a class="header-anchor" href="#a-the-declarative-api-flow-request-response" aria-label="Permalink to "A. The Declarative API Flow (\`Request\` & \`Response\`)""></a></h3><p>Instead of manually managing <code>loading</code> and <code>error</code> flags, use these together to handle data fetching elegantly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Define the request (it tracks dependencies automatically)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> userProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`https://api.example.com/user/\${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">userId</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. Render the UI based on the request state</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-4"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Response</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(userProfile, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.name),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.email)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="b-smart-inputs-autocomplete" tabindex="-1">B. Smart Inputs & Autocomplete <a class="header-anchor" href="#b-smart-inputs-autocomplete" aria-label="Permalink to "B. Smart Inputs & Autocomplete""></a></h3><p>SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box using DaisyUI v5 classes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> searchQuery</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">""</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Autocomplete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Find a Country"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> placeholder: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Start typing..."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Spain"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"France"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Germany"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Italy"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Portugal"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: searchQuery,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Selected:"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, val)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="c-the-reactive-datepicker" tabindex="-1">C. The Reactive Datepicker <a class="header-anchor" href="#c-the-reactive-datepicker" aria-label="Permalink to "C. The Reactive Datepicker""></a></h3><p>Handles single dates or ranges with a clean, reactive interface that automatically syncs with your signals.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myDate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">""</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// or { start: "", end: "" } for range</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Datepicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Select Expiry Date"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: myDate,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> range: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="d-imperative-toasts-modals" tabindex="-1">D. Imperative Toasts & Modals <a class="header-anchor" href="#d-imperative-toasts-modals" aria-label="Permalink to "D. Imperative Toasts & Modals""></a></h3><p>Trigger complex UI elements from your logic. These components use <code>$mount</code> internally to ensure they are properly cleaned up from memory after they close.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show a notification (Self-destroying after 3s)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Settings saved successfully!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"alert-success"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Control a modal with a simple signal</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isModalOpen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Modal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $open: isModalOpen, </span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Delete Account"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> buttons: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"btn-error"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onclick: doDelete }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Confirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This action cannot be undone."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-internationalization-i18n" tabindex="-1">4. Internationalization (i18n) <a class="header-anchor" href="#_4-internationalization-i18n" aria-label="Permalink to "4. Internationalization (i18n)""></a></h2><p>The UI library comes with a built-in locale system.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Set the global UI language</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SetLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"en"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Access translated strings (Returns a signal that tracks the current locale)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> t</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"confirm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,30)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t("",30)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
|
||||
@@ -1,49 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Vite Plugin: File-based Routing","description":"","frontmatter":{},"headers":[],"relativePath":"vite/plugin.md","filePath":"vite/plugin.md"}'),e={name:"vite/plugin.md"};function p(l,s,h,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="vite-plugin-file-based-routing" tabindex="-1">Vite Plugin: File-based Routing <a class="header-anchor" href="#vite-plugin-file-based-routing" aria-label="Permalink to "Vite Plugin: File-based Routing""></a></h1><p>The <code>sigproRouter</code> plugin for Vite automates route generation by scanning your <code>pages</code> directory. It creates a <strong>virtual module</strong> that you can import directly into your code, eliminating the need to maintain a manual routes array.</p><h2 id="_1-project-structure" tabindex="-1">1. Project Structure <a class="header-anchor" href="#_1-project-structure" aria-label="Permalink to "1. Project Structure""></a></h2><p>To use the plugin, organize your files within the <code>src/pages</code> directory. The folder hierarchy directly determines your application's URL structure. SigPro uses brackets <code>[param]</code> for dynamic segments.</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>my-sigpro-app/</span></span>
|
||||
<span class="line"><span>├── src/</span></span>
|
||||
<span class="line"><span>│ ├── pages/</span></span>
|
||||
<span class="line"><span>│ │ ├── index.js → #/</span></span>
|
||||
<span class="line"><span>│ │ ├── about.js → #/about</span></span>
|
||||
<span class="line"><span>│ │ ├── users/</span></span>
|
||||
<span class="line"><span>│ │ │ └── [id].js → #/users/:id</span></span>
|
||||
<span class="line"><span>│ │ └── blog/</span></span>
|
||||
<span class="line"><span>│ │ ├── index.js → #/blog</span></span>
|
||||
<span class="line"><span>│ │ └── [slug].js → #/blog/:slug</span></span>
|
||||
<span class="line"><span>│ ├── App.js (Main Layout)</span></span>
|
||||
<span class="line"><span>│ └── main.js (Entry Point)</span></span>
|
||||
<span class="line"><span>├── vite.config.js</span></span>
|
||||
<span class="line"><span>└── package.json</span></span></code></pre></div><hr><h2 id="_2-setup-configuration" tabindex="-1">2. Setup & Configuration <a class="header-anchor" href="#_2-setup-configuration" aria-label="Permalink to "2. Setup & Configuration""></a></h2><p>Add the plugin to your <code>vite.config.js</code>. It works out of the box with zero configuration.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// vite.config.js</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vite'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { sigproRouter } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/vite'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sigproRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()]</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_3-implementation" tabindex="-1">3. Implementation <a class="header-anchor" href="#_3-implementation" aria-label="Permalink to "3. Implementation""></a></h2><p>Thanks to <strong>SigPro's synchronous initialization</strong>, you no longer need to wrap your mounting logic in <code>.then()</code> blocks.</p><h3 id="option-a-direct-in-main-js" tabindex="-1">Option A: Direct in <code>main.js</code> <a class="header-anchor" href="#option-a-direct-in-main-js" aria-label="Permalink to "Option A: Direct in \`main.js\`""></a></h3><p>Ideal for single-page applications where the router controls the entire viewport.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// src/main.js</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { routes } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'virtual:sigpro-routes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The Core already has $.router ready</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes), </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="option-b-inside-app-js-persistent-layout" tabindex="-1">Option B: Inside <code>App.js</code> (Persistent Layout) <a class="header-anchor" href="#option-b-inside-app-js-persistent-layout" aria-label="Permalink to "Option B: Inside \`App.js\` (Persistent Layout)""></a></h3><p>Recommended for professional apps with a fixed Sidebar or Navbar that should not re-render when changing pages.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// src/main.js</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// src/App.js</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { routes } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'virtual:sigpro-routes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'layout'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"SigPro App"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Home"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/blog'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Blog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Only the content inside <main> will be swapped reactively</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(routes))</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="_4-route-mapping-reference" tabindex="-1">4. Route Mapping Reference <a class="header-anchor" href="#_4-route-mapping-reference" aria-label="Permalink to "4. Route Mapping Reference""></a></h2><p>The plugin follows a simple convention to transform your file system into a routing map.</p><table tabindex="0"><thead><tr><th style="text-align:left;">File Path</th><th style="text-align:left;">Generated Path</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>index.js</code></td><td style="text-align:left;"><code>/</code></td><td style="text-align:left;">The application root.</td></tr><tr><td style="text-align:left;"><code>about.js</code></td><td style="text-align:left;"><code>/about</code></td><td style="text-align:left;">A static page.</td></tr><tr><td style="text-align:left;"><code>[id].js</code></td><td style="text-align:left;"><code>/:id</code></td><td style="text-align:left;">Dynamic parameter (passed to the component).</td></tr><tr><td style="text-align:left;"><code>blog/index.js</code></td><td style="text-align:left;"><code>/blog</code></td><td style="text-align:left;">Folder index page.</td></tr><tr><td style="text-align:left;"><code>_utils.js</code></td><td style="text-align:left;"><em>Ignored</em></td><td style="text-align:left;">Files starting with <code>_</code> are excluded from routing.</td></tr></tbody></table><hr><h2 id="_5-how-it-works-vite-virtual-module" tabindex="-1">5. How it Works (Vite Virtual Module) <a class="header-anchor" href="#_5-how-it-works-vite-virtual-module" aria-label="Permalink to "5. How it Works (Vite Virtual Module)""></a></h2><p>The plugin generates a virtual module named <code>virtual:sigpro-routes</code>. This module exports an array of objects compatible with <code>$.router()</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Internal representation generated by the plugin</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> routes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/src/pages/index.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/users/:id'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/src/pages/users/[id].js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><p>Because it uses dynamic <code>import()</code>, Vite automatically performs <strong>Code Splitting</strong>, meaning each page is its own small JS file that only loads when the user navigates to it.</p>`,27)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||
@@ -1 +0,0 @@
|
||||
import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Vite Plugin: File-based Routing","description":"","frontmatter":{},"headers":[],"relativePath":"vite/plugin.md","filePath":"vite/plugin.md"}'),e={name:"vite/plugin.md"};function p(l,s,h,k,r,o){return a(),t("div",null,[...s[0]||(s[0]=[n("",27)])])}const E=i(e,[["render",p]]);export{g as __pageData,E as default};
|
||||
@@ -1 +0,0 @@
|
||||
{"api_for.md":"3GRpYy3h","api_html.md":"QmhwKd7f","api_if.md":"2-2cm9cb","api_mount.md":"B3RUsjff","api_quick.md":"Coriz0Dx","api_router.md":"DxC_B3iU","api_signal.md":"BmorvARW","api_tags.md":"BPbc38UO","api_watch.md":"Dc5wZqk9","index.md":"By6smViD","install.md":"CrzPbqO_","ui_quick.md":"CL4k0g3a","vite_plugin.md":"CTs8LDIL"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
194
docs/install.md
Normal file
194
docs/install.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# Installation & Setup
|
||||
|
||||
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
|
||||
|
||||
## 1. Installation
|
||||
|
||||
Choose the method that best fits your workflow:
|
||||
|
||||
<div class="tabs tabs-box w-full mt-8 mb-12">
|
||||
<input type="radio" name="install_method" class="tab border-base-300" aria-label="npm" checked />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
|
||||
```bash
|
||||
npm install sigpro
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<input type="radio" name="install_method" class="tab border-base-300" aria-label="pnpm" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
|
||||
```bash
|
||||
pnpm add sigpro
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<input type="radio" name="install_method" class="tab border-base-300" aria-label="yarn" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
|
||||
```bash
|
||||
yarn add sigpro
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<input type="radio" name="install_method" class="tab border-base-300" aria-label="bun" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
|
||||
```bash
|
||||
bun add sigpro
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<input type="radio" name="install_method" class="tab border-base-300 whitespace-nowrap" aria-label="CDN (ESM)" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
// Import the core and UI components
|
||||
import { $ } from "[https://cdn.jsdelivr.net/npm/sigpro@latest/+esm](https://cdn.jsdelivr.net/npm/sigpro@latest/+esm)";
|
||||
import { UI } from "[https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm](https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm)";
|
||||
|
||||
// Initialize UI components globally
|
||||
UI($);
|
||||
</script>
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="radio" name="install_method" class="tab border-base-300 whitespace-nowrap" aria-label="CDN (ESM)" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
<pre class="bg-base-200 p-4 rounded-lg"><code class="language-html"><script type="module">
|
||||
// Import the core and UI components
|
||||
import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||
import { UI } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm';
|
||||
|
||||
// Initialize UI components globally
|
||||
UI($);
|
||||
</script></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 2. Quick Start Examples
|
||||
|
||||
SigPro uses **PascalCase** for Tag Helpers (e.g., `Div`, `Button`) to provide a clean, component-like syntax without needing JSX.
|
||||
|
||||
<div class="tabs tabs-box w-full mt-8 mb-12 bg-base-200/50 p-2 rounded-xl border border-base-300">
|
||||
<input type="radio" name="quick_start_tabs" class="tab !rounded-lg" aria-label="Mainstream (Bundlers)" checked />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-lg p-6 mt-2">
|
||||
|
||||
```javascript
|
||||
// File: App.js
|
||||
import { $ } from "sigpro";
|
||||
|
||||
export const App = () => {
|
||||
const $count = $(0);
|
||||
|
||||
// Tag Helpers like Div, H1, Button are available globally
|
||||
return Div({ class: "card p-4" }, [
|
||||
H1(["Count is: ", $count]),
|
||||
Button(
|
||||
{
|
||||
class: "btn btn-primary",
|
||||
onclick: () => $count((c) => c + 1),
|
||||
},
|
||||
"Increment",
|
||||
),
|
||||
]);
|
||||
};
|
||||
|
||||
// File: main.js
|
||||
import { $ } from "sigpro";
|
||||
import { App } from "./App.js";
|
||||
|
||||
$mount(App, "#app");
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<input type="radio" name="quick_start_tabs" class="tab !rounded-lg" aria-label="Classic (Direct CDN)" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-lg p-6 mt-2">
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script type="module">
|
||||
import { $ } from "https://cdn.jsdelivr.net/npm/sigpro@latest/+esm";
|
||||
|
||||
const $name = $("Developer");
|
||||
|
||||
// No need to import Div, Section, H2, Input... they are global!
|
||||
const App = () =>
|
||||
Section({ class: "container" }, [
|
||||
H2(["Welcome, ", $name]),
|
||||
Input({
|
||||
type: "text",
|
||||
class: "input input-bordered",
|
||||
$value: $name, // Automatic two-way binding
|
||||
placeholder: "Type your name...",
|
||||
}),
|
||||
]);
|
||||
|
||||
$mount(App, "#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 3. Global by Design
|
||||
|
||||
One of SigPro's core strengths is its **Global API**, which eliminates "Import Hell".
|
||||
|
||||
- **The `$` Function:** Once loaded, it attaches itself to `window.$`. It handles state, effects, and DOM mounting.
|
||||
- **Tag Helpers (PascalCase):** Common HTML tags (`Div`, `Span`, `Button`, `Input`, etc.) are automatically registered in the global scope.
|
||||
- **Custom Components:** We recommend using **PascalCase** (e.g., `UserCard`) or prefixes like `_Input` to keep your code organized and distinguish your logic from standard tags.
|
||||
|
||||
## 4. Why no build step?
|
||||
|
||||
Because SigPro uses **native ES Modules** and standard JavaScript functions to generate the DOM, you don't actually _need_ a compiler like Babel or a transformer for JSX.
|
||||
|
||||
- **Development:** Just save and refresh. Pure JS, no "transpilation" required.
|
||||
- **Performance:** Extremely lightweight. Use any modern bundler (Vite, esbuild) only when you are ready to minify and tree-shake for production.
|
||||
|
||||
## 5. Why SigPro? (The Competitive Edge)
|
||||
|
||||
SigPro stands out by removing the "Build Step" tax and the "Virtual DOM" overhead. It is the closest you can get to writing raw HTML/JS while maintaining modern reactivity.
|
||||
|
||||
| Feature | **SigPro** | **SolidJS** | **Svelte** | **React** | **Vue** |
|
||||
| :----------------- | :--------------- | :----------- | :----------- | :---------- | :---------- |
|
||||
| **Bundle Size** | **~2KB** | ~7KB | ~4KB | ~40KB+ | ~30KB |
|
||||
| **DOM Strategy** | **Direct DOM** | Direct DOM | Compiled DOM | Virtual DOM | Virtual DOM |
|
||||
| **Reactivity** | **Fine-grained** | Fine-grained | Compiled | Re-renders | Proxies |
|
||||
| **Build Step** | **Optional** | Required | Required | Required | Optional |
|
||||
| **Learning Curve** | **Minimal** | Medium | Low | High | Medium |
|
||||
| **Initialization** | **Ultra-Fast** | Very Fast | Fast | Slow | Medium |
|
||||
|
||||
---
|
||||
|
||||
## 6. Key Advantages
|
||||
|
||||
- **Extreme Performance**: No Virtual DOM reconciliation. SigPro updates the specific node or attribute instantly when a Signal changes.
|
||||
- **Fine-Grained Reactivity**: State changes only trigger updates where the data is actually used, not on the entire component.
|
||||
- **Native Web Standards**: Everything is a standard JS function. No custom template syntax to learn.
|
||||
- **Zero Magic**: No hidden compilers. What you write is what runs in the browser.
|
||||
- **Global by Design**: Tag Helpers and the `$` function are available globally to eliminate "Import Hell" and keep your code clean.
|
||||
|
||||
## 7. Summary
|
||||
|
||||
SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you gain the benefits of a modern library with the weight of a utility script.
|
||||
|
||||
**Because, in the end... why fight the web when we can embrace it?**
|
||||
File diff suppressed because one or more lines are too long
138
docs/ui/quick.md
Normal file
138
docs/ui/quick.md
Normal file
@@ -0,0 +1,138 @@
|
||||
|
||||
# UI Components `(WIP)`
|
||||
|
||||
> **Status: Work In Progress.** > These are high-level, complex visual components designed to speed up development. They replace native HTML elements with "superpowered" versions that handle their own internal logic, reactivity, and professional styling.
|
||||
|
||||
<div class="alert alert-info shadow-md my-10 border-l-8 border-info bg-info/10 text-info-content">
|
||||
<div class="flex flex-col md:flex-row items-start gap-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6 mt-1"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<div>
|
||||
<h2 class="font-black text-xl tracking-tight mb-2">⚠️ Prerequisites</h2>
|
||||
<p class="text-sm opacity-90 leading-relaxed mb-4">
|
||||
To ensure all components render correctly with their reactive themes and states, your project <b>must</b> have the following versions installed:
|
||||
</p>
|
||||
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<li class="flex items-center gap-2 bg-info/20 p-2 rounded-lg border border-info/20">
|
||||
<span class="badge badge-info badge-sm font-bold text-white">v4+</span>
|
||||
<span class="text-xs font-bold uppercase tracking-wide">Tailwind CSS</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-2 bg-info/20 p-2 rounded-lg border border-info/20">
|
||||
<span class="badge badge-info badge-sm font-bold text-white">v5+</span>
|
||||
<span class="text-xs font-bold uppercase tracking-wide">DaisyUI</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-xs mt-4 opacity-70 italic">
|
||||
* Earlier versions might cause unexpected styling issues with SigPro UI components.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 1. What are UI Components?
|
||||
|
||||
Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:
|
||||
|
||||
* **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles).
|
||||
* **Reactive**: Attributes prefixed with `$` are automatically tracked via `$watch`.
|
||||
* **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM.
|
||||
* **Themed**: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.
|
||||
|
||||
---
|
||||
|
||||
## 2. The UI Registry (Available Now)
|
||||
|
||||
| Category | Components |
|
||||
| :--- | :--- |
|
||||
| **Forms & Inputs** | `Button`, `Input`, `Select`, `Autocomplete`, `Datepicker`, `Colorpicker`, `CheckBox`, `Radio`, `Range`, `Rating`, `Swap` |
|
||||
| **Feedback** | `Alert`, `Toast`, `Modal`, `Loading`, `Badge`, `Tooltip`, `Indicator` |
|
||||
| **Navigation** | `Navbar`, `Menu`, `Drawer`, `Tabs`, `Accordion`, `Dropdown` |
|
||||
| **Data & Layout** | `Request`, `Response`, `Grid` (AG-Grid), `List`, `Stack`, `Timeline`, `Stat`, `Fieldset`, `Fab` |
|
||||
|
||||
---
|
||||
|
||||
## 3. Examples with "Superpowers"
|
||||
|
||||
### A. The Declarative API Flow (`Request` & `Response`)
|
||||
Instead of manually managing `loading` and `error` flags, use these together to handle data fetching elegantly.
|
||||
|
||||
```javascript
|
||||
// 1. Define the request (it tracks dependencies automatically)
|
||||
const userProfile = Request(
|
||||
() => `https://api.example.com/user/${userId()}`
|
||||
);
|
||||
|
||||
// 2. Render the UI based on the request state
|
||||
Div({ class: "p-4" }, [
|
||||
Response(userProfile, (data) =>
|
||||
Div([
|
||||
H1(data.name),
|
||||
P(data.email)
|
||||
])
|
||||
)
|
||||
]);
|
||||
```
|
||||
|
||||
### B. Smart Inputs & Autocomplete
|
||||
SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box using DaisyUI v5 classes.
|
||||
|
||||
```javascript
|
||||
const searchQuery = $("");
|
||||
|
||||
Autocomplete({
|
||||
label: "Find a Country",
|
||||
placeholder: "Start typing...",
|
||||
options: ["Spain", "France", "Germany", "Italy", "Portugal"],
|
||||
$value: searchQuery,
|
||||
onSelect: (val) => console.log("Selected:", val)
|
||||
});
|
||||
```
|
||||
|
||||
### C. The Reactive Datepicker
|
||||
Handles single dates or ranges with a clean, reactive interface that automatically syncs with your signals.
|
||||
|
||||
```javascript
|
||||
const myDate = $(""); // or { start: "", end: "" } for range
|
||||
|
||||
Datepicker({
|
||||
label: "Select Expiry Date",
|
||||
$value: myDate,
|
||||
range: false
|
||||
});
|
||||
```
|
||||
|
||||
### D. Imperative Toasts & Modals
|
||||
Trigger complex UI elements from your logic. These components use `$mount` internally to ensure they are properly cleaned up from memory after they close.
|
||||
|
||||
```javascript
|
||||
// Show a notification (Self-destroying after 3s)
|
||||
Toast("Settings saved successfully!", "alert-success", 3000);
|
||||
|
||||
// Control a modal with a simple signal
|
||||
const isModalOpen = $(false);
|
||||
|
||||
Modal({
|
||||
$open: isModalOpen,
|
||||
title: "Delete Account",
|
||||
buttons: [
|
||||
Button({ class: "btn-error", onclick: doDelete }, "Confirm")
|
||||
]
|
||||
}, "This action cannot be undone.");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Internationalization (i18n)
|
||||
|
||||
The UI library comes with a built-in locale system.
|
||||
|
||||
```javascript
|
||||
// Set the global UI language
|
||||
SetLocale("en");
|
||||
|
||||
// Access translated strings (Returns a signal that tracks the current locale)
|
||||
const t = tt("confirm");
|
||||
```
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
146
docs/vite/plugin.md
Normal file
146
docs/vite/plugin.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# Vite Plugin: File-based Routing
|
||||
|
||||
The `sigproRouter` plugin for Vite automates route generation by scanning your `pages` directory. It creates a **virtual module** that you can import directly into your code, eliminating the need to maintain a manual routes array.
|
||||
|
||||
## 1. Project Structure
|
||||
|
||||
To use the plugin, organize your files within the `src/pages` directory. The folder hierarchy directly determines your application's URL structure. SigPro uses brackets `[param]` for dynamic segments.
|
||||
|
||||
<div class="mockup-code bg-base-300 text-base-content shadow-xl my-8">
|
||||
<pre><code>my-sigpro-app/
|
||||
├── src/
|
||||
│ ├── pages/
|
||||
│ │ ├── index.js → #/
|
||||
│ │ ├── about.js → #/about
|
||||
│ │ ├── users/
|
||||
│ │ │ └── [id].js → #/users/:id
|
||||
│ │ └── blog/
|
||||
│ │ ├── index.js → #/blog
|
||||
│ │ └── [slug].js → #/blog/:slug
|
||||
│ ├── App.js (Main Layout)
|
||||
│ └── main.js (Entry Point)
|
||||
├── vite.config.js
|
||||
└── package.json</code></pre>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 2. Setup & Configuration
|
||||
|
||||
Add the plugin to your `vite.config.js`. It works out of the box with zero configuration.
|
||||
|
||||
```javascript
|
||||
// vite.config.js
|
||||
import { defineConfig } from 'vite';
|
||||
import { sigproRouter } from 'sigpro/vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sigproRouter()]
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Implementation
|
||||
|
||||
Thanks to **SigPro's synchronous initialization**, you no longer need to wrap your mounting logic in `.then()` blocks.
|
||||
|
||||
<div class="tabs tabs-box w-full mt-8 mb-12 bg-base-200/50 p-2 border border-base-300">
|
||||
<input type="radio" name="route_impl" class="tab" aria-label="Option A: Direct in main.js" checked />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-lg p-6 mt-2">
|
||||
|
||||
```javascript
|
||||
// src/main.js
|
||||
import { $ } from 'sigpro';
|
||||
import { routes } from 'virtual:sigpro-routes';
|
||||
|
||||
// The Core already has $.router ready
|
||||
$.mount($.router(routes), '#app');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<input type="radio" name="route_impl" class="tab" aria-label="Option B: Inside App.js (Persistent Layout)" />
|
||||
<div class="tab-content bg-base-100 border-base-300 rounded-lg p-6 mt-2">
|
||||
|
||||
```javascript
|
||||
// src/App.js
|
||||
import { routes } from 'virtual:sigpro-routes';
|
||||
|
||||
export default () => div({ class: 'layout' }, [
|
||||
header([
|
||||
h1("SigPro App"),
|
||||
nav([
|
||||
button({ onclick: () => $.router.go('/') }, "Home"),
|
||||
button({ onclick: () => $.router.go('/blog') }, "Blog")
|
||||
])
|
||||
]),
|
||||
// Only the content inside <main> will be swapped reactively
|
||||
main($.router(routes))
|
||||
]);
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 4. Route Mapping Reference
|
||||
|
||||
The plugin follows a simple convention to transform your file system into a routing map.
|
||||
|
||||
<div class="overflow-x-auto my-8">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th>File Path</th>
|
||||
<th>Generated Path</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>index.js</code></td>
|
||||
<td class="font-mono text-primary font-bold">/</td>
|
||||
<td>The application root.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>about.js</code></td>
|
||||
<td class="font-mono text-primary font-bold">/about</td>
|
||||
<td>A static page.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>[id].js</code></td>
|
||||
<td class="font-mono text-primary font-bold">/:id</td>
|
||||
<td>Dynamic parameter (passed to the component).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>blog/index.js</code></td>
|
||||
<td class="font-mono text-primary font-bold">/blog</td>
|
||||
<td>Folder index page.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>_utils.js</code></td>
|
||||
<td class="italic opacity-50 text-error">Ignored</td>
|
||||
<td>Files starting with <code>_</code> are excluded from routing.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 5. How it Works (Vite Virtual Module)
|
||||
|
||||
The plugin generates a virtual module named `virtual:sigpro-routes`. This module exports an array of objects compatible with `$.router()`:
|
||||
|
||||
```javascript
|
||||
// Internal representation generated by the plugin
|
||||
export const routes = [
|
||||
{ path: '/', component: () => import('/src/pages/index.js') },
|
||||
{ path: '/users/:id', component: () => import('/src/pages/users/[id].js') },
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
Because it uses dynamic `import()`, Vite automatically performs **Code Splitting**, meaning each page is its own small JS file that only loads when the user navigates to it.
|
||||
@@ -1 +0,0 @@
|
||||
.vpi-social-github{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}
|
||||
Reference in New Issue
Block a user