@kirill.konshin/utils 0.0.14 → 0.0.15

package/src/core/wrpc.test.ts

@@ -0,0 +1,225 @@
+import '@vitest/web-worker';
+import { expect, describe, test, vi } from 'vitest';
+import { wrpc } from './wrpc';
+import type { responder } from './wrpc.fixture'; // DO NOT IMPORT ANYTHING OTHER THAN TYPES!!!
+
+// Prepare
+
+const createWorker = () => {
+    const mainWorker = new Worker(new URL('./wrpc.fixture', import.meta.url), { type: 'module' });
+    mainWorker.addEventListener('error', (e) => console.error('Worker Error', e));
+
+    const caller = wrpc().createCaller(
+        mainWorker,
+        {} as typeof responder.responders, // only types, object will be proxied
+    );
+
+    return { mainWorker, caller };
+};
+
+const getWorkerInfo = async (worker: Worker, msg: string): Promise<any> =>
+    await new Promise((res) => {
+        const controller = new AbortController();
+        worker.addEventListener(
+            'message',
+            (e) => {
+                controller.abort();
+                res(e.data);
+            },
+            controller,
+        );
+        worker.postMessage({ msg });
+    });
+
+// Tests
+
+describe(
+    'WRPC',
+    async () => {
+        test('for await ... of return yield', async () => {
+            const { caller } = createWorker();
+
+            const fn = vi.fn();
+
+            for await (const data of caller.returnYield()) {
+                fn(data);
+                console.log('DATA', data);
+                //TODO Test early return
+            }
+
+            expect(fn).nthCalledWith(1, 1);
+            expect(fn).nthCalledWith(2, 2);
+            expect(fn).nthCalledWith(3, 3);
+            expect(fn).toBeCalledTimes(3);
+
+            let res;
+            const it = caller.returnYield();
+            do {
+                res = await it.next();
+                console.log('DATA', res);
+                fn(res);
+            } while (!res.done);
+
+            expect(fn).nthCalledWith(4, { value: 1, done: false });
+            expect(fn).nthCalledWith(5, { value: 2, done: false });
+            expect(fn).nthCalledWith(6, { value: 3, done: false });
+            expect(fn).nthCalledWith(7, { value: undefined, done: true });
+            expect(fn).toBeCalledTimes(7);
+        });
+
+        test('for await ... of separate return & yield', async () => {
+            const { caller } = createWorker();
+
+            const fn = vi.fn();
+
+            for await (const data of caller.test()) {
+                fn(data);
+                console.log('DATA', data);
+            }
+
+            expect(fn).nthCalledWith(1, { progress: 0 });
+            expect(fn).nthCalledWith(2, { progress: 0.5 });
+            expect(fn).nthCalledWith(3, { progress: 1, aborted: false });
+            expect(fn).toBeCalledTimes(3);
+        });
+
+        test('do ... while', async () => {
+            const { caller } = createWorker();
+
+            const fn = vi.fn();
+
+            let res;
+            const it = caller.test();
+            do {
+                res = await it.next();
+                console.log('DATA', res);
+                fn(res);
+            } while (!res.done);
+
+            expect(fn).nthCalledWith(1, { value: { progress: 0 }, done: false });
+            expect(fn).nthCalledWith(2, { value: { progress: 0.5 }, done: false });
+            expect(fn).nthCalledWith(3, { value: { progress: 1, aborted: false }, done: false });
+            expect(fn).nthCalledWith(4, { value: 'foo', done: true });
+            expect(fn).toBeCalledTimes(4);
+        });
+
+        test('break', async () => {
+            const { caller } = createWorker();
+
+            const fn = vi.fn();
+
+            for await (const data of caller.test()) {
+                fn(data);
+                console.log('DATA', data);
+                break;
+            }
+
+            expect(fn).nthCalledWith(1, { progress: 0 });
+            expect(fn).toBeCalledTimes(1);
+        });
+
+        test('abort', async () => {
+            const { caller } = createWorker();
+
+            const controller = new AbortController();
+
+            const fn = vi.fn();
+
+            for await (const data of caller.test({ signal: controller.signal })) {
+                fn(data);
+                console.log('DATA', data);
+                controller.abort('Test');
+            }
+
+            expect(fn).nthCalledWith(1, { progress: 0 });
+            expect(fn).toBeCalledTimes(1); // not guaranteed without explicit break, caller generator may receive multiple events and enqueue them while reader only reads one, so second will also be read
+        });
+
+        test('error', async () => {
+            const { caller } = createWorker();
+
+            await expect(async () => {
+                for await (const data of caller.error()) {
+                    console.log('DATA', data);
+                }
+            }).rejects.toThrowError('Test');
+        });
+
+        test('unknown responder', async () => {
+            const { caller } = createWorker();
+
+            await expect(caller['unknown']()).rejects.toThrowError('Unknown responder');
+        });
+
+        test('promise', async () => {
+            const { caller } = createWorker();
+            const promise = caller.promise();
+            await new Promise((res) => setTimeout(res, 100)); // introduce delay
+            await expect(promise).resolves.toEqual({ test: 'test' });
+        });
+
+        test('promise error', async () => {
+            const { caller } = createWorker();
+            await expect(caller.promiseError()).rejects.toThrowError('Test');
+        });
+
+        test('promise as generator', async () => {
+            const { caller } = createWorker();
+            await expect(async () => {
+                // @ts-ignore
+                for await (const data of caller.promise()) {
+                    console.log('DATA', data);
+                }
+            }).rejects.toThrowError('Unexpected promise in generator');
+        });
+
+        test('stop', async () => {
+            const { caller, mainWorker } = createWorker();
+
+            await getWorkerInfo(mainWorker, 'stop');
+
+            const fn = vi.fn();
+
+            await Promise.race([
+                (async () => {
+                    for await (const data of caller.test()) {
+                        fn(data);
+                        console.log('DATA', data);
+                    }
+                })(),
+                new Promise((resolve) => setTimeout(resolve, 500)),
+            ]);
+
+            expect(fn).toBeCalledTimes(0);
+        });
+
+        test('bidirectional', async () => {
+            const { caller } = createWorker();
+
+            const it = caller.bidirectional(1);
+
+            //TODO Readme
+            //  > No log at this step: the first value sent through `next` is lost
+            //  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next#sending_values_to_the_generator
+            await expect(it.next(9)).resolves.toEqual({ value: '1.0', done: false }); // 9 is ignored as yield is not yet reached
+            await expect(it.next(2)).resolves.toEqual({ value: '2.1', done: false });
+            await expect(it.next(3)).resolves.toEqual({ value: '3.2', done: false });
+            await expect(it.next(9)).resolves.toEqual({ value: 'done', done: true }); // 9 is ignored as generator has returned and is done
+        });
+
+        test.skip('setTimeout & setInterval', async () => {
+            const { caller } = createWorker();
+
+            await caller.setTimeout({ timeout: 10 });
+            caller.setTimeout({ timeout: 10 }).then(() => {});
+
+            let i = 0;
+            for await (const data of caller.setInterval({ timeout: 10 })) {
+                console.log('DATA', data);
+                i++;
+                if (i >= 3) break;
+            }
+        });
+    },
+    { timeout: 1000 },
+);

package/src/core/wrpc.ts

@@ -0,0 +1,359 @@
+import { getTransferrable } from './workerUtils';
+
+// Types
+
+export type Responders = { [key: string]: (arg?: any) => Generator<any> | AsyncGenerator<any> | Promise<any> | any };
+
+export type Context = {
+    message: string;
+    id: string;
+    signalName?: string;
+    done?: boolean;
+    abort?: string;
+    error?: boolean;
+    ack?: boolean;
+    promise?: boolean;
+};
+
+export type Event = MessageEvent<{ ctx: Context; payload: any | Error }>;
+
+export type WorkerLike = {
+    postMessage: (payload: any, transferable: any[]) => void;
+    addEventListener: (
+        event: string,
+        listener: (e: any) => void,
+        options?: { signal?: AbortSignal; once?: boolean },
+    ) => void;
+    removeEventListener: (event: string, listener: (e: any) => void) => void;
+};
+
+export enum LogLevel {
+    disabled = 0,
+    error = 1,
+    lifecycle = 2,
+    detail = 3,
+    transport = 4,
+}
+
+// Helpers
+
+export function deriveController(signal?: AbortSignal): [AbortController, AbortSignal] {
+    const controller = new AbortController();
+    return [controller, AbortSignal.any([controller.signal, signal].filter(Boolean) as AbortSignal[])];
+}
+
+export function rejectOnSignal(promise: Promise<any>, signal: AbortSignal) {
+    return Promise.race([
+        promise,
+        new Promise<Event['data']>((resolve, reject) => {
+            signal.addEventListener('abort', () => reject('RaceAborted:' + signal.reason), { once: true, signal });
+        }),
+    ]);
+}
+
+// Lib
+
+export function wrpc({
+    debug = LogLevel.disabled,
+    name = (globalThis as any).importScripts ? 'RESPONDER' : 'CALLER',
+} = {}) {
+    // Logger
+
+    function logger(type: string) {
+        return (level: number, ctx: Context | null, ...args: any[]) => {
+            if (!debug || debug < level) return;
+            const { id, message, ...restCtx } = ctx || {};
+            console[type](name, message || '*', id || '*', ...args, restCtx);
+        };
+    }
+
+    const log = logger('log');
+    const logWarn = logger('warn');
+    const logError = logger('error');
+
+    // Service
+
+    function send(worker: WorkerLike, ctx: Context, payload?: any) {
+        log(LogLevel.transport, ctx, 'SEND', payload, typeof payload);
+        worker.postMessage({ ctx, payload }, getTransferrable(payload));
+    }
+
+    //TODO Listener error handling
+    function listen(
+        worker: WorkerLike,
+        context: Context | null,
+        listener: (event: Event['data']) => void,
+        signal: AbortSignal,
+        once: boolean = false,
+    ) {
+        signal.addEventListener(
+            'abort',
+            () => logWarn(LogLevel.detail, context, 'LISTEN SIGNAL ABORT', signal.reason),
+            {
+                signal,
+                once: true,
+            },
+        );
+        worker.addEventListener(
+            'message',
+            ({ data }: Event) => {
+                log(LogLevel.transport, context, 'LISTEN EVENT', data);
+                // no context = listen all, or matching context
+                if (!context || (data?.ctx?.message === context.message && data.ctx?.id === context.id)) listener(data);
+            },
+            { signal, once },
+        );
+    }
+
+    function waitFor(
+        worker: WorkerLike,
+        ctx: Context,
+        condition: (data: Event['data']) => boolean = (data) => true,
+        signal: AbortSignal,
+    ) {
+        const [waitController, waitSignal] = deriveController(signal);
+
+        return new Promise<Event['data']>((res) =>
+            listen(
+                worker,
+                ctx,
+                (data) => {
+                    if (!condition(data)) return;
+                    waitController.abort('WaitFinished');
+                    res(data);
+                },
+                waitSignal,
+            ),
+        );
+    }
+
+    // Responder
+
+    //TODO Name arg
+    function createResponder<T extends Responders>(worker: WorkerLike, responders: T) {
+        const mainController = new AbortController();
+
+        worker.addEventListener('messageerror', (e) => logError(LogLevel.error, null, 'MESSAGE ERROR', e), {
+            signal: mainController.signal,
+        });
+
+        listen(
+            worker,
+            null,
+            async ({ ctx, payload = {} }) => {
+                if (!ctx || !ctx.message || !ctx.id || ctx.abort || ctx.ack) return; // ignore invalid and service messages
+                try {
+                    const responder = responders[ctx.message];
+
+                    if (!responder) throw new Error('Unknown responder', { cause: ctx });
+
+                    const [subController, subSignal] = deriveController(mainController.signal);
+
+                    // always recover signal so that promises also can abort
+                    if (ctx.signalName) payload[ctx.signalName] = subSignal;
+
+                    const iterator = responder(payload); // no await!
+
+                    log(LogLevel.lifecycle, ctx, 'START', iterator);
+
+                    // PROMISE
+
+                    // https://stackoverflow.com/a/19660350/5125659 the only right way is to call function and see what it returned
+                    if (!iterator[Symbol.asyncIterator] && !iterator[Symbol.iterator]) {
+                        // Errors are caught in generic handler
+                        send(worker, { ...ctx, promise: true }, await rejectOnSignal(iterator, subSignal));
+                        log(LogLevel.detail, ctx, 'PROMISE RESOLVED');
+                        return;
+                    }
+
+                    // GENERATOR
+
+                    try {
+                        // Listen outside the loop to react immediately
+                        // Could be a wait for since abort is a one-off, but listeners are disposed by signal anyway, and we don't need to block the async thread
+                        listen(
+                            worker,
+                            ctx,
+                            (data) => {
+                                if (!data.ctx.abort) return;
+                                subController.abort(data.ctx.abort);
+                                logWarn(LogLevel.lifecycle, ctx, 'GOT ABORT');
+                            },
+                            subSignal,
+                        );
+
+                        let res: any;
+                        let nextPayload: any = payload; // does not matter, will be ignored anyway
+                        do {
+                            res = await rejectOnSignal(iterator.next(nextPayload), subSignal);
+
+                            send(worker, { ...ctx, done: res.done }, res.value);
+
+                            if (res.done) {
+                                subController.abort('Done');
+                                break;
+                            }
+
+                            const nextData = await rejectOnSignal(
+                                waitFor(worker, ctx, (data) => !!data.ctx.ack, subSignal),
+                                subSignal,
+                            );
+                            nextPayload = nextData.payload;
+
+                            log(LogLevel.detail, ctx, 'LOOP ACK');
+                        } while (!res.done && !subSignal.aborted);
+                    } catch (e) {
+                        if (!subSignal.aborted && !e.message.includes('RaceAborted')) {
+                            logError(LogLevel.error, ctx, 'LOOP ERROR', e);
+                            send(worker, { ...ctx, error: true, done: true }, e);
+                        }
+                    } finally {
+                        log(LogLevel.detail, ctx, 'LOOP DONE');
+                    }
+                } catch (e) {
+                    // Generator-specific error handling
+                    logError(LogLevel.error, ctx, 'ERROR', e);
+                    send(worker, { ...ctx, error: true, done: true }, e); // Generic error handling
+                } finally {
+                    log(LogLevel.detail, ctx, 'DONE');
+                }
+            },
+            mainController.signal,
+        );
+
+        function stop() {
+            mainController.abort('Stop');
+        }
+
+        return { responders, stop }; // responders needed for typing
+    }
+
+    // Caller
+
+    //TODO Name arg
+    function createCaller<T extends Responders>(worker: WorkerLike, responders: T): T {
+        worker.addEventListener('messageerror', (e) => logError(LogLevel.error, null, 'MESSAGE ERROR', e));
+
+        //TODO Stop
+
+        return new Proxy<T>(responders as any, {
+            get(target, prop, receiver) {
+                function gen(payload: any) {
+                    const ctx: Context = { message: prop.toString(), id: crypto.randomUUID() };
+
+                    let signal: AbortSignal = null as any;
+
+                    if (payload && Object.is(payload, Object(payload))) {
+                        for (const [key, value] of Object.entries(payload)) {
+                            if (value instanceof AbortSignal) {
+                                log(LogLevel.detail, ctx, 'FOUND SIGNAL', key);
+                                ctx.signalName = key;
+                                signal = value;
+                                payload[key] = null; // will be recovered in responder
+                            }
+                        }
+                    }
+
+                    const [mainController, mainSignal] = deriveController(signal);
+
+                    const cancel = (notify: boolean, reason: string = '') => {
+                        if (mainController.signal.aborted) return;
+                        logWarn(LogLevel.lifecycle, ctx, 'CANCEL', reason, notify);
+                        if (reason) mainController.abort(reason); // stop listening
+                        if (notify) send(worker, { ...ctx, abort: reason }); // worker will break & acknowledge, but it's not important
+                    };
+
+                    // Generator
+
+                    const [promiseController, promiseSignal] = deriveController(mainSignal);
+
+                    const promise = waitFor(
+                        worker,
+                        ctx,
+                        (data) => !!data.ctx.promise || !!data.ctx.error,
+                        promiseSignal,
+                    ).then(({ ctx, payload }) => {
+                        if (ctx.error) {
+                            logError(LogLevel.error, ctx, 'PROMISE ERROR', payload);
+                            throw payload;
+                        }
+                        log(LogLevel.lifecycle, ctx, 'PROMISE RESOLVED', payload);
+                        return payload;
+                    });
+
+                    async function* generator() {
+                        let done = false;
+                        try {
+                            // React immediately
+                            mainSignal.addEventListener('abort', () => cancel(true, mainSignal.reason), {
+                                once: true,
+                                signal: mainSignal,
+                            });
+
+                            log(LogLevel.detail, ctx, 'GENERATOR START');
+                            promiseController.abort('GeneratorUsed');
+
+                            do {
+                                const data = await rejectOnSignal(
+                                    waitFor(worker, ctx, undefined, mainSignal),
+                                    mainSignal,
+                                );
+
+                                const { ctx: ctxIn, payload: value } = data;
+
+                                log(LogLevel.lifecycle, ctx, 'EVENT', mainSignal.aborted, ctxIn, value);
+
+                                if (ctxIn.promise) {
+                                    //  && !ctxIn.error
+                                    // cancel(false, 'Resolved');
+                                    // return payloadIn;
+                                    logError(LogLevel.error, ctx, 'ERROR', 'Unexpected promise in generator', data);
+                                    throw new Error('Unexpected promise in generator', { cause: data });
+                                }
+
+                                if (ctxIn.error) {
+                                    logError(LogLevel.error, ctx, 'ERROR', data);
+                                    cancel(false, 'Error');
+                                    throw value;
+                                }
+
+                                if (ctxIn.done) {
+                                    done = true;
+                                    return value;
+                                } else {
+                                    const nextPayload = yield value;
+                                    if (!mainSignal.aborted) send(worker, { ...ctx, ack: true }, nextPayload);
+                                }
+                            } while (!mainSignal.aborted);
+                        } finally {
+                            // prevent further cycles in worker once main is closed/cancelled/aborted
+                            log(LogLevel.detail, ctx, 'DONE');
+                            cancel(true, mainSignal.aborted ? mainSignal.reason : done ? 'Done' : 'Break');
+                        }
+                    }
+
+                    const iterator = generator();
+
+                    send(worker, ctx, payload);
+
+                    // FIXME Nasty hack, return both iterator and promise
+                    // Consuming code will get both, but IDE should show only proper type
+                    // Consuming code will likely use only one except someone calls `for await ... of await` which is not useful in any case
+                    iterator['then'] = promise.then.bind(promise);
+                    iterator['catch'] = promise.catch.bind(promise);
+                    iterator['finally'] = promise.finally.bind(promise);
+                    return iterator;
+                }
+
+                //TODO mimic-function(gen, fn); but no access to original
+                Object.defineProperty(gen, 'name', { value: prop.toString() });
+
+                (target as any)[prop] = gen; // so that fn is visible after use, maybe not needed
+
+                return gen;
+            },
+        }) as T;
+    }
+
+    return { createResponder, createCaller };
+}

package/src/mui/formControlFieldset.stories.tsx

@@ -9,7 +9,7 @@ import { FormControlFieldset } from './formControlFieldset';
 import { FormLabelLegend } from './formLabelLegend';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof GenericControl> = {
     title: 'MUI / FormControlFieldset',
     parameters: {
         layout: 'centered',