@benev/slate/x/nexus/units/light_view.js

frontend web stuff

import { render } from "lit";
import { AsyncDirective, directive } from "lit/async-directive.js";
import { UseLightView } from "../parts/use/tailored.js";
import { SlateView } from "../parts/slate_view_element.js";
import { debounce } from "../../tools/debounce/debounce.js";
import { usekey } from "../parts/use/parts/utils/usekey.js";
import { setup_reactivity } from "../parts/setup_reactivity.js";
export const prepare_light_view = ((shell) => (renderer) => directive(class extends AsyncDirective {
    #props;
    #element = document.createElement(SlateView.tag);
    #render_into_element(template) {
        render(template, this.#element);
        this.#use[usekey].afterRender();
        return this.#element;
    }
    #rerender = debounce(0, () => {
        if (this.#props && this.isConnected)
            this.setValue(this.#render_into_element(this.render(...this.#props)));
    });
    #use = new UseLightView(this.#element, this.#rerender, shell.context);
    #rend = this.#use[usekey].wrap(renderer(this.#use));
    #reactivity = setup_reactivity(this.#rend, this.#rerender);
    update(_, props) {
        return this.#render_into_element(this.render(...props));
    }
    render(...props) {
        this.#props = props;
        return this.#reactivity?.render(...props);
    }
    reconnected() {
        this.#use[usekey].reconnect();
        this.#reactivity = setup_reactivity(this.#rend, this.#rerender);
    }
    disconnected() {
        this.#use[usekey].disconnect();
        if (this.#reactivity) {
            this.#reactivity.stop();
            this.#reactivity = undefined;
        }
    }
}));
//# sourceMappingURL=light_view.js.map