Create an async iterable stream of values from a Solid.js signal effect

effect-stream.ts

import { createMemo, createEffect } from 'solid-js';

export async function* createEffectStream<T>(fn: () => T) {
    let promises: Promise<T>[] = [];
    let resolve: (value: T) => void;
    promises.push(
        new Promise(r => {
            resolve = r;
        }),
    );

    let memoized = createMemo(fn);

    createEffect(() => {
        resolve(memoized());
        promises.push(
            new Promise(r => {
                resolve = r;
            }),
        );
    });

    for (let promise of promises) {
        let value = await promise;
        delete promises[promises.indexOf(promise)];
        yield value;
    }
}

Usage:

import { createSignal, createRoot } from 'solid-js';
import { createEffectStream } from './effect-stream.ts';

let [count, setCount] = createSignal(0);
let double = () => count() * 2;

async function processChanges() {
    let valueStream = createEffectStream(() => `Double ${count()} is ${double()}`);

    for await (let value of valueStream) {
        console.log(value);
    }
}

createRoot(processChanges);

setInterval(() => setCount(c => c + 1), 1000);