Observables and computeds

/**
 * Counter - `observable`, `computed`, `effect`, and what "fine-grained" means.
 *
 * Three bindings read `count`. Pressing +1 re-runs those three and nothing
 * else on the page, because each binding owns its own effect and each effect
 * knows exactly what it read.
 */
function counter() {
    const count = observable(0);
    const runs = observable(0);

    // A computed works out its own inputs at runtime. Neither of these is told
    // that it depends on `count`; both discover it by reading it.
    const doubled = computed(() => count.value * 2);
    const parity = computed(() => (count.value % 2 === 0 ? 'even' : 'odd'));

    // An effect is the same machinery pointed at a side effect. `peek()` reads
    // without subscribing - reading `runs.value` here would make this effect
    // depend on its own write and spin forever.
    effect(() => {
        count.value;
        runs.value = runs.peek() + 1;
    });

    return {
        count, doubled, parity, runs,
        step(by) { count.value += by; },
        reset() { count.value = 0; }
    };
}

/**
 * A writable computed - a derived value you can bind two ways.
 *
 * `fahrenheit` has no state of its own. Reading it converts `celsius`;
 * writing it converts back and stores the result in `celsius`. That is what
 * lets `data-model="fahrenheit.value"` sit on an input at all: without a
 * `write`, the typing would land on a cached read and vanish.
 */
function temperature() {
    // The one piece of state, held at full precision.
    const celsius = observable(20);

    const round = (n) => Math.round(n * 10) / 10;

    // Both inputs bind to writable computeds. Each rounds only what it SHOWS
    // and writes back exactly, so a value typed into either box reads back
    // unchanged and never fights the typing.
    const celsiusShown = computed({
        read: () => (celsius.value === null ? null : round(celsius.value)),
        write: (c) => { celsius.value = c; }
    });

    const fahrenheit = computed({
        read: () => (celsius.value === null ? null : round(celsius.value * 9 / 5 + 32)),
        write: (f) => { celsius.value = f === null ? null : (f - 32) * 5 / 9; }
    });

    const feel = computed(() => {
        const c = celsius.value;
        if (c === null) return 'type a temperature';
        if (c < 5) return 'cold - coat on';
        if (c < 18) return 'mild';
        if (c < 26) return 'warm';
        return 'hot - find some shade';
    });

    return {celsius: celsiusShown, fahrenheit, feel};
}