Function wrapClass

source/decorator.tsx:31–107

(Component: T)

const reactionMap = new WeakMap<CustomElement, ReactionItem[]>();

function wrapClass<T extends ClassComponent>(Component: T) {
    class ObserverComponent extends (Component as ClassComponent) implements CustomElement {
        static observedAttributes = [];

        protected disposers: IReactionDisposer[] = [];

        get props() {
            return getMobxData(this);
        }

        constructor() {
            super();

            Promise.resolve().then(() => this.#boot());
        }

        update = () => {
            const { update } = Object.getPrototypeOf(this);

            return new Promise<void>(resolve =>
                this.disposers.push(autorun(() => update.call(this).then(resolve)))
            );
        };

        #boot() {
            const names: string[] = this.constructor['observedAttributes'] || [],
                reactions = reactionMap.get(this) || [];

            this.disposers.push(
                ...names.map(name => autorun(() => this.syncPropAttr(name))),
                ...reactions.map(({ expression, effect }) =>
                    watch(reaction => expression(this, reaction), effect.bind(this))
                )
            );
        }

        disconnectedCallback() {
            for (const disposer of this.disposers) disposer();

            this.disposers.length = 0;

            super['disconnectedCallback']?.();
        }

        setAttribute(name: string, value: string) {
            const old = super.getAttribute(name),
                names: string[] = this.constructor['observedAttributes'];

            super.setAttribute(name, value);

            if (names.includes(name)) this.attributeChangedCallback(name, old, value);
        }

        attributeChangedCallback(name: string, old: string, value: string) {
            this[toCamelCase(name)] = parseJSON(value);

            super['attributeChangedCallback']?.(name, old, value);
        }