@shgysk8zer0/signals

A polyfill for the (currently stage 1) Signals API proposal

• Code of Conduct
• Contributing

[!WARNING]
Experimental / Unstable API This polyfill implements the TC39 Signals proposal, which is currently under active development. The API surface, behavior, and semantics are highly unstable and subject to breaking changes. Do not use this in production environments.

import { Signal } from '@shgysk8zer0/signals/signals.js';

// 1. Create a reactive state
const counter = new Signal.State(0);

// 2. Create a computed value derived from the state
const isEven = new Signal.Computed(() => counter.get() % 2 === 0);

console.log(isEven.get()); // true

// 3. Set up a watcher to observe changes
const watcher = new Signal.subtle.Watcher(() => {
    // This callback runs asynchronously (microtask) when watched signals change
    for (const signal of watcher.getPending()) {
        console.log('Signal updated to:', signal.get());
    }
});

// Start watching the computed signal
watcher.watch(isEven);

// 4. Update the state
counter.set(1); 
// watcher's notify callback will run, logging: "Signal updated to: false"

counter.set(2);
// watcher's notify callback will run, logging: "Signal updated to: true"