vasille-jsx/lib/dev/compose.js

The same framework which is designed to build bulletproof frontends (JSX components)

import { DevReactive, errorToString, remapObject, toDevIdOrValue } from "vasille/dev";
import { DevApp, DevFragment, ModelId } from "vasille/dev";
import { earlyInspector } from "./early-inspector.js";
export function devView(renderer, declaration, name) {
    return function (props, node, slot, usage) {
        const { callback } = props;
        if (!node) {
            throw new Error("Vasille: Component context is missing");
        }
        const frag = new DevFragment(node.runner, declaration, usage ?? null, name, props);
        if (slot) {
            props.slot = slot;
        }
        node.create(frag);
        try {
            const result = renderer(frag, props);
            if (result !== undefined && result !== null && callback) {
                callback(result);
            }
        }
        catch (e) {
            node.runner.inspector.reportComponentError({
                targetId: frag.id,
                error: errorToString(e),
                time: Date.now(),
            });
            reportError(e);
        }
        finally {
            node.runner.inspector.composeTime({
                id: frag.id,
                time: Date.now(),
            });
        }
    };
}
export function devStore(fn, declaration, name) {
    const reactive = new DevReactive({ inspector: earlyInspector });
    earlyInspector.createStore({ id: reactive.id, declaration, name, time: Date.now() });
    return fn(reactive);
}
export function devModel(fn, declaration, name) {
    return (o, parent, usage) => {
        const ctx = new DevReactive({ inspector: earlyInspector });
        const id = ctx.id;
        earlyInspector.createCustomModel({
            id,
            declaration,
            usage,
            name,
            time: Date.now(),
            props: remapObject(o, toDevIdOrValue),
        });
        if (parent) {
            parent.runOnDestroy(() => ctx.destroy());
        }
        return {
            ...fn(ctx, o),
            [ModelId]: id,
        };
    };
}
export function devMount(tag, view, runner, $, inspector) {
    const root = new DevApp(tag, runner);
    const frag = new DevFragment(runner, null, null, "Root", {});
    // share information about created stores
    earlyInspector.connect(inspector);
    root.create(frag, function () {
        view($, frag);
    });
    return root;
}