diff --git a/Readme.md b/Readme.md index fb4ffdd..dd4abb3 100644 --- a/Readme.md +++ b/Readme.md @@ -107,6 +107,7 @@ html` | **`$.router`** | Hash-based router with params | `$.router([{path:'/', component:Home}])` | | **`$.ws`** | WebSocket with reactive state | `const {status, messages} = $.ws(url)` | | **`$.storage`** | Persistent signal (localStorage) | `const theme = $.storage('theme', 'light')` | +| **`$.debug`** | System inspector (console table) | `$.debug()` | | **`html`** | Template literal for reactive HTML | `` html`
${count}
` `` | ```javascript @@ -1276,7 +1277,81 @@ const router = $.router([ } ]); ``` - +## πŸ” `$.debug()` - System Inspector + +Inspects the entire reactive system and displays a clean table of all signals and effects in the console. + +```javascript +import { $ } from 'sigpro'; + +// Create some signals and effects +const count = $(0); +const name = $('World'); +const fullName = $(() => `${name()} SigPro`); + +$.effect(() => { + console.log('Count changed:', count()); +}); + +$.effect(() => { + console.log('Name changed:', name()); +}); + +// Inspect the system +$.debug(); +``` + +### Console Output + +``` +πŸ” SigPro +πŸ“Š SIGNALS (3) +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β” +β”‚ (index) β”‚ ID β”‚ Value β”‚ Subs β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€ +β”‚ 0 β”‚ "a1b2"β”‚ 5 β”‚ 1 β”‚ +β”‚ 1 β”‚ "c3d4"β”‚ "World" β”‚ 2 β”‚ +β”‚ 2 β”‚ "e5f6"β”‚ "World…"β”‚ 0 β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”˜ + +⚑ EFFECTS (2) +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ (index) β”‚ ID β”‚ Deps β”‚ Cleanupβ”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ 0 β”‚ "x7y8"β”‚ 1 β”‚ βœ— β”‚ +β”‚ 1 β”‚ "z9w0"β”‚ 1 β”‚ βœ— β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +πŸ”„ Queue: 0 +``` + +### What it shows + +| Column | Description | +|--------|-------------| +| **ID** | Unique identifier for each signal/effect | +| **Value** | Current value of the signal | +| **Subs** | Number of subscribers (effects watching this signal) | +| **Deps** | Number of dependencies this effect watches | +| **Cleanup** | Whether the effect has a cleanup function | +| **Queue** | Pending effects waiting to run | + +### Debug at any time + +```javascript +// After user interaction +button.addEventListener('click', () => { + count(count() + 1); + $.debug(); // See how subscribers and dependencies changed +}); + +// When things get weird +setTimeout(() => { + $.debug(); // Check for memory leaks (signals/effects that should be gone) +}, 5000); +``` + +**Perfect for:** detecting memory leaks, understanding reactivity, and debugging complex signal interactions.