Cyftech Signal
Signals you can read in the code and see in the UI.
A source signal owns the state. An effect observes that state. When the value changes, the UI follows synchronously.
import { signal, effect } from "@cyftech/signal";
type LightState = "red" | "amber" | "green";
const light = signal<LightState>("red");
const order: LightState[] = ["red", "amber", "green"];
effect(() => {
trafficLight.dataset.state = light.value;
});
setInterval(() => {
const current = order.indexOf(light.value);
light.value = order[(current + 1) % order.length];
}, 1200);
signal value
red
amber
green