`;
```
### Auto-Cleanup
```js
// Remove from storage when value is null/undefined
$.storage('temp', null); // Removes 'temp' from storage
```
**Parameters:**
- `key`: Storage key name
- `initialValue`: Default value if none stored
- `storage`: Storage type (default: `localStorage`, options: `sessionStorage`)
**Returns:** Signal function that persists to storage on changes
---
### `$.effect(effect)` - Effects
Executes a function and automatically re-runs it when its dependencies change.
#### Basic Effect
```typescript
import { $ } from 'sigpro';
const count = $(0);
const name = $('World');
// Effect runs immediately and on dependency changes
$.effect(() => {
console.log(`Count is: ${count()}`); // Only depends on count
});
// Log: "Count is: 0"
count(1);
// Log: "Count is: 1"
name('Universe'); // No log (name is not a dependency)
```
#### Effect with Cleanup
```typescript
import { $ } from 'sigpro';
const userId = $(1);
$.effect(() => {
const id = userId();
let isSubscribed = true;
// Simulate API subscription
const subscription = api.subscribe(id, (data) => {
if (isSubscribed) {
console.log('New data:', data);
}
});
// Return cleanup function
return () => {
isSubscribed = false;
subscription.unsubscribe();
};
});
userId(2); // Previous subscription cleaned up, new one created
```
#### Nested Effects
```typescript
import { $ } from 'sigpro';
const show = $(true);
const count = $(0);
$.effect(() => {
if (!show()) return;
// This effect is nested inside the conditional
// It will only be active when show() is true
$.effect(() => {
console.log('Count changed:', count());
});
});
show(false); // Inner effect is automatically cleaned up
count(1); // No log (inner effect not active)
show(true); // Inner effect recreated, logs "Count changed: 1"
```
#### Manual Effect Control
```typescript
import { $ } from 'sigpro';
const count = $(0);
// Stop effect manually
const stop = $.effect(() => {
console.log('Effect running:', count());
});
count(1); // Log: "Effect running: 1"
stop();
count(2); // No log
```
**Parameters:**
- `effect`: Function to execute. Can return a cleanup function
**Returns:** Function to stop the effect
---
## π‘ `$.fetch(url , data, [loading])` - Fetch
Simple fetch wrapper with automatic JSON handling and optional loading signal. Perfect for API calls.
### Basic Fetch
```js
import { $ } from 'sigpro';
const userData = $(null);
// Simple POST request
const result = await $.fetch('/api/users', { name: 'John' });
```
### Fetch with Loading State
```js
import { $ } from 'sigpro';
const loading = $(false);
const userData = $(null);
async function loadUser(id) {
const data = await $.fetch(`/api/users/${id}`, null, loading);
if (data) userData(data);
}
// Loading() automatically toggles true/false
loadUser(123);
// In your UI
html`
`;
```
### Manual Control
```js
const socket = $.ws('wss://api.example.com');
// Send data
socket.send({ action: 'subscribe', channel: 'updates' });
// Close connection manually
socket.close();
// Check connection status
if (socket.status() === 'connected') {
// Do something
}
```
**Parameters:**
- `url`: WebSocket server URL
- `options`: Configuration object
- `reconnect`: Enable auto-reconnect (default: true)
- `maxReconnect`: Maximum reconnection attempts (default: 5)
- `reconnectInterval`: Base interval for exponential backoff (default: 1000ms)
**Returns:** Object with reactive properties and methods
- `status`: Signal with connection state
- `messages`: Signal array of received messages
- `error`: Signal with last error
- `send(data)`: Function to send data
- `close()`: Function to close connection
---
### `html` - Template Literal Tag
Creates reactive DOM fragments using template literals with intelligent binding.
#### Basic Usage
```typescript
import { $, html } from 'sigpro';
const count = $(0);
const name = $('World');
const fragment = html`
Hello ${name}
Count: ${count}
`;
document.body.appendChild(fragment);
```
#### Directive Reference
##### `@event` - Event Listeners
```typescript
import { html } from 'sigpro';
const handleClick = (event) => console.log('Clicked!', event);
const handleInput = (value) => console.log('Input:', value);
html`
console.log(e.target.value)} />
`
```
##### `:property` - Two-way Binding
Automatically syncs between signal and DOM element.
```typescript
import { $, html } from 'sigpro';
const text = $('');
const checked = $(false);
const selected = $('option1');
html`
You typed: ${text}
Checkbox is: ${() => checked() ? 'checked' : 'unchecked'}
`;
}, []);
```
#### Key Points About `$.component`:
1. **Light DOM only** - No Shadow DOM, children are accessible and styleable from outside
2. **Slot system** - `slot()` function filters child nodes by `slot` attribute
3. **Reactive props** - Each observed attribute becomes a signal in the `props` object
4. **Event emission** - `emit()` dispatches custom events with `detail` payload
5. **Cleanup** - `onUnmount()` registers functions called when component is removed
6. **Host access** - `host` gives direct access to the custom element instance
---
### `$.router(routes)` - Router
Hash-based router for SPAs with reactive integration.
#### Basic Routing
```typescript
import { $, html } from 'sigpro';
const router = $.router([
{
path: '/',
component: () => html`
Home Page
About
`
},
{
path: '/about',
component: () => html`
About Page
Home
`
}
]);
document.body.appendChild(router);
```
#### Route Parameters
```typescript
import { $, html } from 'sigpro';
const router = $.router([
{
path: '/user/:id',
component: (params) => html`