@tntsuperman/rjs/dist/R.system.js

simple, react, fast JavaScript framework

System.register('R', [], (function (exports) {
    'use strict';
    return {
        execute: (function () {

            const react_state = [];
            const rTarget = () => react_state.at(-1);
            const subscribeReact = (id, target, effect) => {
                react_state.push([id, target, effect]);
                target();
                react_state.pop();
                effect();
            };
            const hook = exports("hook", (target, effect = () => 0) => {
                const id = Symbol();
                subscribeReact(id, target, effect);
                return id;
            });

            class VNode {
                node;
                #ondestroy;
                constructor(node) {
                    node.dispatchEvent(new window.CustomEvent("create"));
                    this.node = node;
                    this.#ondestroy = [node.remove.bind(node)];
                    node.remove = () => {
                        this.#ondestroy.forEach(e => e());
                        while (this.node.childNodes.length)
                            this.node.childNodes[0].remove();
                    };
                }
                ondestroy(fn) {
                    this.#ondestroy.push(fn);
                }
            } exports("VNode", VNode);
            const createVElement = exports("createVElement", (tag, contents, attrs = () => ({}), event = {}) => {
                const element = window.document.createElement(tag);
                //Attrs
                hook(() => Object.entries(attrs()).forEach(e => element.setAttribute(...e)));
                //Content
                hook(() => {
                    while (element.childNodes.length)
                        element.childNodes[0].remove();
                    contents().forEach(e => element.appendChild(e.node));
                });
                //Event
                Object.entries(event).forEach(e => element.addEventListener(...e));
                return new VNode(element);
            });
            const createVText = exports("createVText", (text) => {
                const element = new window.Text("");
                hook(() => element.nodeValue = text());
                return new VNode(element);
            });

            const DepDestroyer = [];
            const createProxy = exports("createProxy", (target) => {
                //           prop        reactid target    effect
                let dep = [];
                let childProxies = [];
                const destroy_dep = (e) => dep = dep.filter(t => t[1] != e);
                const { proxy, revoke } = Proxy.revocable(target, {
                    get(target, prop, receiver) {
                        let value = Reflect.get(target, prop, receiver);
                        if (typeof value == "object") {
                            const findres = childProxies.find(e => e[0] == prop);
                            if (findres) {
                                value = findres[1];
                            }
                            else {
                                const child_proxy = createProxy(value);
                                childProxies.push([prop, ...child_proxy]);
                                value = child_proxy[0];
                            }
                        }
                        const r_target = rTarget();
                        if (r_target)
                            dep.push([prop, ...r_target]);
                        return value;
                    },
                    set(target, prop, value, receiver) {
                        const setret = Reflect.set(target, prop, value, receiver);
                        dep.filter(e => e[0] == prop)
                            .forEach(e => {
                            DepDestroyer.forEach(d => d(e[1]));
                            subscribeReact(e[1], e[2], e[3]);
                        });
                        return setret;
                    }
                });
                DepDestroyer.push(destroy_dep);
                return [proxy, () => (DepDestroyer.splice(DepDestroyer.findIndex(e => e == destroy_dep), 1),
                        childProxies.forEach(e => e[2] ? e[2]() : 0),
                        revoke())];
            });

            const createSEProxy = (el, arg) => new Proxy((() => {
                function SEGFn(...content) {
                    if (typeof content[0] == "function") {
                        const poped = arg.pop();
                        if (poped)
                            el.addEventListener(poped, content[0]);
                        return createSEProxy(el, arg);
                    }
                    else {
                        el.append(...content.map(e => typeof e == "string" ?
                            e :
                            e instanceof VNode ?
                                e.node : ""));
                        return new VNode(el);
                    }
                }
                return SEGFn;
            })(), {
                get(t, prop) {
                    if (typeof prop == "string") {
                        arg.push(prop);
                        if (arg.length == 2) {
                            el.setAttribute(arg.shift() ?? "", arg.pop() ?? "");
                        }
                        return createSEProxy(el, arg);
                    }
                }
            });
            const seg = exports("seg", new Proxy({}, {
                get: (t, prop) => typeof prop == "string" ?
                    createSEProxy(window.document.createElement(prop), []) : undefined
            }));

        })
    };
}));
//# sourceMappingURL=R.system.js.map