natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Readme.md

Browse Source
This commit is contained in:
Natxo
2026-03-16 01:17:55 +01:00
committed by GitHub
parent 51d1839572
commit 3c13b14f8f
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
Readme.md
View File

@@ -150,7 +150,7 @@ $.effect(() => {
#### Computed Signal #### Computed Signal
```typescript ```typescript
import { $, $.effect } from 'sigpro'; import { $ } from 'sigpro';
const firstName = $('John'); const firstName = $('John');
const lastName = $('Doe'); const lastName = $('Doe');
@@ -203,7 +203,7 @@ Signal that automatically syncs with localStorage or sessionStorage.
### Basic Persistent State ### Basic Persistent State
```js ```js
import { $.storage } from 'sigpro'; import { $ } from 'sigpro';
// Automatically saves to localStorage // Automatically saves to localStorage
const theme = $.storage('theme', 'light'); const theme = $.storage('theme', 'light');
@@ -221,7 +221,7 @@ const tempData = $.storage('temp', {}, sessionStorage);
### Real-World Example ### Real-World Example
```js ```js
import { $.storage, html } from 'sigpro'; import { $, html } from 'sigpro';
// User preferences persist across sessions // User preferences persist across sessions
const settings = $.storage('app-settings', { const settings = $.storage('app-settings', {
@@ -250,7 +250,7 @@ const view = html`
### Shopping Cart Example ### Shopping Cart Example
```js ```js
import { $.storage, html } from 'sigpro'; import { $, html } from 'sigpro';
const cart = $.storage('shopping-cart', []); const cart = $.storage('shopping-cart', []);
@@ -293,7 +293,7 @@ Executes a function and automatically re-runs it when its dependencies change.
#### Basic Effect #### Basic Effect
```typescript ```typescript
import { $, $.effectffect } from 'sigpro'; import { $ } from 'sigpro';
const count = $(0); const count = $(0);
const name = $('World'); const name = $('World');
@@ -313,7 +313,7 @@ name('Universe'); // No log (name is not a dependency)
#### Effect with Cleanup #### Effect with Cleanup
```typescript ```typescript
import { $, $.effectffect } from 'sigpro'; import { $ } from 'sigpro';
const userId = $(1); const userId = $(1);
@@ -341,7 +341,7 @@ userId(2); // Previous subscription cleaned up, new one created
#### Nested Effects #### Nested Effects
```typescript ```typescript
import { $, $.effectffect } from 'sigpro'; import { $ } from 'sigpro';
const show = $(true); const show = $(true);
const count = $(0); const count = $(0);
@@ -364,7 +364,7 @@ show(true); // Inner effect recreated, logs "Count changed: 1"
#### Manual Effect Control #### Manual Effect Control
```typescript ```typescript
import { $, $.effectffect } from 'sigpro'; import { $ } from 'sigpro';
const count = $(0); const count = $(0);
@@ -390,7 +390,7 @@ Simple fetch wrapper with automatic JSON handling and optional loading signal. P
### Basic Fetch ### Basic Fetch
```js ```js
import { $, $.fetch } from 'sigpro'; import { $ } from 'sigpro';
const userData = $(null); const userData = $(null);
@@ -400,7 +400,7 @@ const result = await $.fetch('/api/users', { name: 'John' });
### Fetch with Loading State ### Fetch with Loading State
```js ```js
import { $, $.fetch } from 'sigpro'; import { $ } from 'sigpro';
const loading = $(false); const loading = $(false);
const userData = $(null); const userData = $(null);
@@ -444,7 +444,7 @@ Reactive WebSocket wrapper with automatic reconnection and signal-based state ma
### Basic WebSocket ### Basic WebSocket
```js ```js
import { $.ws } from 'sigpro'; import { $ } from 'sigpro';
const socket = $.ws('wss://echo.websocket.org'); const socket = $.ws('wss://echo.websocket.org');
@@ -470,7 +470,7 @@ const socket = $.ws('wss://api.example.com', {
### Reactive UI Integration ### Reactive UI Integration
```js ```js
import { $.ws, html } from 'sigpro'; import { $, html } from 'sigpro';
const chat = $.ws('wss://chat.example.com'); const chat = $.ws('wss://chat.example.com');
@@ -842,7 +842,7 @@ Creates Custom Elements with reactive properties. Uses Light DOM (no Shadow DOM)
#### Basic Component #### Basic Component
```javascript ```javascript
import { $, $.component, html } from 'sigpro'; import { $, html } from 'sigpro';
$.component('my-counter', (props, context) => { $.component('my-counter', (props, context) => {
// props contains signals for each observed attribute // props contains signals for each observed attribute
@@ -881,7 +881,7 @@ Usage:
#### Component with Named Slots #### Component with Named Slots
```javascript ```javascript
import { $, $.component, html } from 'sigpro'; import { $, html } from 'sigpro';
$.component('my-card', (props, { slot }) => { $.component('my-card', (props, { slot }) => {
return html` return html`
@@ -919,7 +919,7 @@ Usage:
#### Component with Props and Events #### Component with Props and Events
```javascript ```javascript
import { $, $.component, html } from 'sigpro'; import { $, html } from 'sigpro';
$.component('todo-item', (props, { emit, host }) => { $.component('todo-item', (props, { emit, host }) => {
const handleToggle = () => { const handleToggle = () => {
@@ -961,7 +961,7 @@ Usage:
#### Component with Cleanup #### Component with Cleanup
```javascript ```javascript
import { $, $.component, html, $.effect } from 'sigpro'; import { $, html } from 'sigpro';
$.component('timer-widget', (props, { onUnmount }) => { $.component('timer-widget', (props, { onUnmount }) => {
const seconds = $(0); const seconds = $(0);
@@ -993,7 +993,7 @@ $.component('timer-widget', (props, { onUnmount }) => {
#### Complete Context API #### Complete Context API
```javascript ```javascript
import { $, $.component, html } from 'sigpro'; import { $, html } from 'sigpro';
$.component('context-demo', (props, context) => { $.component('context-demo', (props, context) => {
// Context properties: // Context properties:
@@ -1037,7 +1037,7 @@ $.component('context-demo', (props, context) => {
#### Practical Example: Todo App Component #### Practical Example: Todo App Component
```javascript ```javascript
import { $, $.component, html } from 'sigpro'; import { $, html } from 'sigpro';
$.component('todo-app', () => { $.component('todo-app', () => {
const todos = $([]); const todos = $([]);
@@ -1144,7 +1144,7 @@ Hash-based router for SPAs with reactive integration.
#### Basic Routing #### Basic Routing
```typescript ```typescript
import { $.router, html } from 'sigpro'; import { $, html } from 'sigpro';
const router = $.router([ const router = $.router([
{ {
@@ -1169,7 +1169,7 @@ document.body.appendChild(router);
#### Route Parameters #### Route Parameters
```typescript ```typescript
import { $.router, html } from 'sigpro'; import { $, html } from 'sigpro';
const router = $.router([ const router = $.router([
{ {
@@ -1198,7 +1198,7 @@ const router = $.router([
#### Nested Routes #### Nested Routes
```typescript ```typescript
import { $.router, html, $ } from 'sigpro'; import { $, html } from 'sigpro';
const router = $.router([ const router = $.router([
{ {
@@ -1247,7 +1247,7 @@ const router = $.router([
#### Route Guards #### Route Guards
```typescript ```typescript
import { $.router, html, $ } from 'sigpro'; import { $, html } from 'sigpro';
const isAuthenticated = $(false); const isAuthenticated = $(false);
@@ -1283,7 +1283,7 @@ const router = $.router([
#### Navigation #### Navigation
```typescript ```typescript
import { $.router } from 'sigpro'; import { $ } from 'sigpro';
// Navigate to path // Navigate to path
$.router.go('/user/42'); $.router.go('/user/42');
@@ -1309,7 +1309,7 @@ $.router.listen((path, oldPath) => {
#### Route Transitions #### Route Transitions
```typescript ```typescript
import { $.router, html, $.effect } from 'sigpro'; import { $, html } from 'sigpro';
const router = $.router([ const router = $.router([
{ {