rvx/dist/es/element/element.js

A signal based rendering library

import { ENV } from "../core/env.js";
import { capture, uncapture } from "../core/lifecycle.js";
import { $, watchUpdates } from "../core/signals.js";
import { render } from "../core/view.js";
const moduleEnv = ENV.current;
export class RvxElement extends moduleEnv.HTMLElement {
    static observedAttributes;
    #signals = new Map();
    #startTrigger;
    #disposeTrigger;
    #shadow;
    #dispose;
    constructor(options) {
        super();
        this.#startTrigger = options?.start ?? "on-connect";
        this.#disposeTrigger = options?.dispose ?? "on-disconnect";
        const shadowInit = (options?.shadow === true ? undefined : options?.shadow) ?? { mode: "open" };
        if (shadowInit !== false) {
            this.#shadow = this.attachShadow(shadowInit);
        }
    }
    reflect(name) {
        let signal = this.#signals.get(name);
        if (signal === undefined) {
            signal = $(this.getAttribute(name));
            this.#signals.set(name, signal);
            uncapture(() => {
                watchUpdates(signal, value => {
                    if (value === null) {
                        this.removeAttribute(name);
                    }
                    else {
                        this.setAttribute(name, value);
                    }
                });
            });
        }
        return signal;
    }
    start() {
        if (this.#dispose === undefined) {
            this.#dispose = capture(() => {
                ENV.inject(moduleEnv, () => {
                    const parent = this.#shadow ?? this;
                    parent.innerHTML = "";
                    render(this.render()).appendTo(parent);
                });
            });
        }
    }
    dispose() {
        this.#dispose?.();
        this.#dispose = undefined;
    }
    connectedCallback() {
        if (this.#startTrigger === "on-connect") {
            this.start();
        }
    }
    disconnectedCallback() {
        if (this.#disposeTrigger === "on-disconnect") {
            this.dispose();
        }
    }
    attributeChangedCallback(name, oldValue, newValue) {
        const signal = this.#signals.get(name);
        if (signal !== undefined) {
            signal.value = newValue;
        }
    }
}
//# sourceMappingURL=element.js.map