@benev/slate/x/base/helpers/mixin.js

frontend web stuff

import * as state from "../../nexus/state.js";
import { Pipe } from "../../tools/pipe.js";
export var mixin;
(function (mixin) {
    function css(...newStyles) {
        return function (Base) {
            return class extends Base {
                static get styles() {
                    return combineStyles(Base.styles, newStyles);
                }
            };
        };
    }
    mixin.css = css;
    function css_deferred(getNewStyles) {
        return function (Base) {
            return class extends Base {
                static get styles() {
                    return combineStyles(Base.styles, getNewStyles());
                }
            };
        };
    }
    mixin.css_deferred = css_deferred;
    function signals(signals) {
        return function (Base) {
            return class extends Base {
                #lean = null;
                render() {
                    return this.#lean?.collect(() => super.render());
                }
                connectedCallback() {
                    super.connectedCallback();
                    this.#lean = signals.lean(() => this.requestUpdate());
                }
                disconnectedCallback() {
                    super.disconnectedCallback();
                    if (this.#lean) {
                        this.#lean.stop();
                        this.#lean = null;
                    }
                }
            };
        };
    }
    mixin.signals = signals;
    function flat(flat) {
        return function (Base) {
            return class extends Base {
                #lean = null;
                render() {
                    return this.#lean?.collect(() => super.render());
                }
                connectedCallback() {
                    super.connectedCallback();
                    this.#lean = flat.lean(() => this.requestUpdate());
                }
                disconnectedCallback() {
                    super.disconnectedCallback();
                    if (this.#lean) {
                        this.#lean.stop();
                        this.#lean = null;
                    }
                }
            };
        };
    }
    mixin.flat = flat;
    function reactive(r = state.reactor) {
        return function (Base) {
            return class extends Base {
                #lean = null;
                render() {
                    return this.#lean?.collect(() => super.render());
                }
                connectedCallback() {
                    super.connectedCallback();
                    this.#lean = r.lean(() => this.requestUpdate());
                }
                disconnectedCallback() {
                    super.disconnectedCallback();
                    if (this.#lean) {
                        this.#lean.stop();
                        this.#lean = null;
                    }
                }
            };
        };
    }
    mixin.reactive = reactive;
    /** @deprecated use `reactive` instead */
    mixin.reactor = reactive;
    function setup(...styles) {
        return function (Base) {
            return Pipe.with(Base)
                .to(css(...styles))
                .to(reactive())
                .done();
        };
    }
    mixin.setup = setup;
})(mixin || (mixin = {}));
function arrayize(item) {
    return [item].flat().filter(i => !!i);
}
const notUndefined = (x) => x !== undefined;
function combineStyles(parentStyles, newStyles) {
    const styles = [
        ...(arrayize(parentStyles) ?? []),
        ...arrayize(newStyles),
    ];
    return styles
        .flat()
        .filter(notUndefined);
}
//# sourceMappingURL=mixin.js.map