A basic implementation of Signals from scratch written in 5 minutes for ngConf 2024

step-1.ts

function signal<T>(initialValue: T) {
    let value: T = initialValue;

    function getValue() {
        return value;
    }

    getValue.set = (newValue: T) => {
        value = newValue;
    }

    return getValue;
}

const count = signal(0);

console.log(count()); // 0

count.set(1);

console.log(count()); // 1

step-2.ts

let Listener: (() => void) | null = null;

function signal<T>(initialValue: T) {
    let value: T = initialValue;
    let subscribers = new Set<() => void>()

    function getValue() {
        if (Listener) {
            subscribers.add(Listener)
        }
        return value;
    }

    getValue.set = (newValue: T) => {
        value = newValue;
        subscribers.forEach(fn => fn())
    }

    return getValue;
}

function computed<T>(fn: () => T) {
    let value!: T;

    Listener = () => {
        value = fn()
    }

    value = fn();

    Listener = null

    function getValue() {
        return value;
    }

    return getValue;
}

const count = signal(0);

const doubleCount = computed(() => count() * 2)

console.log(count()); // 0

count.set(1);

console.log(count()); // 1
console.log(doubleCount()); // 2