@mantou/gem 1.7.11 → 2.0.0-alpha.0

package/lib/element.js

@@ -1,354 +1,408 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _a, _GemElement_final, _GemElement_renderRoot, _GemElement_internals, _GemElement_isAppendReason, _GemElement_isMounted, _GemElement_isAsync, _GemElement_effectList, _GemElement_memoList, _GemElement_unmountCallback, _GemElement_exec, _GemElement_execEffect, _GemElement_execMemo, _GemElement_initEffect, _GemElement_render, _GemElement_shouldUpdate, _GemElement_updateCallback, _GemElement_update, _GemElement_updated, _GemElement_disconnectStore, _GemElement_connectedCallback, _GemElement_clearEffect;
 import { html, render } from 'lit-html';
 import { connect } from './store';
-import { LinkedList, addMicrotask, SheetToken, isArrayChange, GemError, kebabToCamelCase, PropProxyMap, removeItems, addListener, } from './utils';
-import * as GemExports from './element';
-import * as VersionExports from './version';
+import { LinkedList, addMicrotask, isArrayChange, addListener, randomStr } from './utils';
 export { html, svg, render, directive, TemplateResult, SVGTemplateResult } from 'lit-html';
-export { repeat } from 'lit-html/directives/repeat';
-// https://github.com/Polymer/lit-html/issues/1048
-export { guard } from 'lit-html/directives/guard';
-export { ifDefined } from 'lit-html/directives/if-defined';
-function emptyFunction() {
-    // 用于占位的空函数
+const { assign, defineProperty, setPrototypeOf } = Object;
+defineProperty(Symbol, 'metadata', { value: Symbol.for('Symbol.metadata') });
+const execCallback = (fun) => typeof fun === 'function' && fun();
+// 跨多个 gem 工作
+export const SheetToken = Symbol.for('gem@sheetToken');
+// proto prop
+export const UpdateToken = Symbol.for('gem@update');
+export const BoundaryCSSState = 'gem-style-boundary';
+export const RenderErrorEvent = 'gem@render-error';
+// fix modal-factory type error
+const updateTokenAlias = UpdateToken;
+const rootStyleSheetInfo = new WeakMap();
+const rootUpdateFnMap = new WeakMap();
+const getReflectTargets = (ele) => [...ele.querySelectorAll('[data-gem-reflect]')].map((e) => e.target);
+class RefObject {
+    refSelector;
+    ele;
+    ref;
+    constructor(current) {
+        const ref = `ref-${randomStr()}`;
+        this.refSelector = `[ref=${ref}]`;
+        this.ele = current.internals.shadowRoot || current;
+        this.ref = ref;
+    }
+    get element() {
+        for (const e of [this.ele, ...getReflectTargets(this.ele)]) {
+            // 在 LightDOM 中可能工作很慢？
+            const result = e.querySelector(this.refSelector);
+            if (result)
+                return result;
+        }
+    }
+    get elements() {
+        return [this.ele, ...getReflectTargets(this.ele)]
+            .map((e) => [...e.querySelectorAll(this.refSelector)])
+            .flat();
+    }
+    toString() {
+        return this.ref;
+    }
+}
+/**必须使用在字段中，否则会读取到错误的实例 */
+export let createRef;
+class GemCSSStyleSheet extends CSSStyleSheet {
+    #ele;
+    cssText = '';
+    get element() {
+        if (!this.#ele) {
+            this.#ele = document.createElement('style');
+            this.#ele.textContent = this.cssText;
+            this.#ele.dataset.gemStyle = '';
+        }
+        return this.#ele;
+    }
+    replaceSync(text) {
+        this.cssText = text;
+        if (this.#ele)
+            this.#ele.textContent = text;
+        super.replaceSync(text);
+    }
+}
+class GemCSSSheet {
+    #content = '';
+    #media = '';
+    constructor(media = '') {
+        this.#media = media;
+    }
+    setContent(v) {
+        this.#content = v;
+    }
+    // 不需要 GC
+    #record = new Map();
+    #used = new Map();
+    getStyle(host) {
+        const isLight = host && !host.internals?.shadowRoot;
+        // 对同一类 dom 只使用同一个样式表
+        const key = isLight ? host.constructor : this;
+        if (!this.#record.has(key)) {
+            const sheet = new GemCSSStyleSheet({ media: this.#media });
+            this.#record.set(key, sheet);
+        }
+        const sheet = this.#record.get(key);
+        // 只执行一次
+        if (!this.#used.has(sheet)) {
+            let style = this.#content;
+            let scope = '';
+            if (isLight) {
+                // light dom 嵌套时需要选择子元素
+                // `> *` 实际上是多范围？是否存在性能问题
+                scope = `@scope (${host.tagName}) to (:state(${BoundaryCSSState}) > *)`;
+                // 不能使用 @layer，两个 @layer 不能覆盖，只有顺序起作用
+                // 所以外部不能通过元素名称选择器来覆盖样式，除非样式在之前插入（会自动反转应用到尾部， see `appleCSSStyleSheet`）
+                style = `${scope}{ ${style} }`;
+            }
+            sheet.replaceSync(style);
+            this.#used.set(sheet, scope);
+        }
+        return sheet;
+    }
+    // 一般用于主题更新，不支持 layer
+    updateStyle() {
+        this.#used.forEach((scope, sheet) => {
+            sheet.replaceSync(scope ? `${scope}{${this.#content}}` : this.#content);
+        });
+    }
 }
-function execCallback(fun) {
-    typeof fun === 'function' && fun();
+export function createCSSSheet(mediaOrRules, rulesValue) {
+    const media = rulesValue ? mediaOrRules : '';
+    const rules = rulesValue || mediaOrRules;
+    const styleSheet = new GemCSSSheet(media);
+    const sheet = { [SheetToken]: styleSheet };
+    let style = '';
+    if (typeof rules === 'string') {
+        style = rules;
+    }
+    else {
+        Object.keys(rules).forEach((key) => {
+            const isScope = key === '$';
+            // 对于已经有 `-` 的保留原始 key，支持覆盖修改
+            sheet[key] = isScope || key.includes('-') ? key : `${key}-${randomStr()}`;
+            style += `${isScope ? ':scope,:host' : `.${sheet[key]}`} {${rules[key]}}`;
+        });
+    }
+    styleSheet.setContent(style);
+    return sheet;
+}
+const updateStyleSheets = (map, sheets, value) => {
+    let needUpdate = false;
+    sheets.forEach((e) => {
+        const count = map.get(e) || 0;
+        needUpdate ||= (value === 1 && count === 0) || (value === -1 && count === 1);
+        // count 为 0 时不立即删除，以便更新时识别是否外部样式
+        // 但是只要挂载 document 的样式表就不会被 GC 了, 是否要在闲时 GC？
+        map.set(e, count + value);
+    });
+    if (needUpdate) {
+        // 避免重复更新，例如 list 元素增删，全 light dom 时 document 更新
+        addMicrotask(rootUpdateFnMap.get(map));
+    }
+};
+const appleCSSStyleSheet = (ele, sheets) => {
+    const root = ele.getRootNode();
+    if (!rootStyleSheetInfo.has(root)) {
+        const map = new Map();
+        rootStyleSheetInfo.set(root, map);
+        rootUpdateFnMap.set(map, () => {
+            // 先找到外部样式表
+            const newSheets = root.adoptedStyleSheets.filter((e) => !map.has(e));
+            map.forEach((count, sheet) => count && newSheets.push(sheet));
+            // 外层元素的样式要放到最后，以提升优先级，但是只考虑第一次出现样式表的位置
+            root.adoptedStyleSheets = newSheets.reverse();
+        });
+    }
+    const map = rootStyleSheetInfo.get(root);
+    updateStyleSheets(map, sheets, 1);
+    return () => updateStyleSheets(map, sheets, -1);
+};
+/**必须使用在字段中，否则会读取到错误的实例 */
+export let createState;
+function execEffectList(list) {
+    list?.forEach((effectItem) => {
+        const { callback, getDep, values, preCallback } = effectItem;
+        const newValues = getDep?.();
+        if (!getDep || !values || isArrayChange(values, newValues)) {
+            execCallback(preCallback);
+            effectItem.preCallback = callback(newValues, values);
+            effectItem.values = newValues;
+            // 更新时也要设置，避免异步的 `#initEffect` 重复执行
+            effectItem.initialized = true;
+        }
+    });
+}
+function clearEffect(list) {
+    return list.filter((e) => {
+        execCallback(e.preCallback);
+        e.initialized = false;
+        e.values = undefined;
+        return e.fixed;
+    });
 }
+export let createTemplate;
 // global render task pool
-const asyncRenderTaskList = new LinkedList();
+const noBlockingTaskList = new LinkedList();
 const tick = (timeStamp = performance.now()) => {
     if (performance.now() > timeStamp + 16)
         return requestAnimationFrame(tick);
-    const task = asyncRenderTaskList.get();
+    const task = noBlockingTaskList.get();
     if (task) {
         task();
         tick(timeStamp);
     }
 };
-asyncRenderTaskList.addEventListener('start', () => addMicrotask(tick));
-const constructorSymbol = Symbol('constructor');
-const initSymbol = Symbol('init');
-const updateSymbol = Symbol('update');
+noBlockingTaskList.addEventListener('start', () => addMicrotask(tick));
+let currentConstructGemElement;
 export class GemElement extends HTMLElement {
-    constructor(options = {}) {
-        super();
-        _GemElement_renderRoot.set(this, void 0);
-        _GemElement_internals.set(this, void 0);
-        _GemElement_isAppendReason.set(this, void 0);
-        // 和 isConnected 有区别
-        _GemElement_isMounted.set(this, void 0);
-        _GemElement_isAsync.set(this, void 0);
-        _GemElement_effectList.set(this, void 0);
-        _GemElement_memoList.set(this, void 0);
-        _GemElement_unmountCallback.set(this, void 0);
-        /**
-         * @helper
-         * 设置元素 state，会触发更新
-         *
-         * ```js
-         * class App extends GemElement {
-         *   click() {
-         *     this.setState({});
-         *   }
-         * }
-         * ```
-         * */
-        this.setState = (payload) => {
-            if (!this.state)
-                throw new GemError('`state` not initialized');
-            Object.assign(this.state, payload);
-            addMicrotask(__classPrivateFieldGet(this, _GemElement_update, "f"));
-        };
-        _GemElement_exec.set(this, (list) => {
-            list === null || list === void 0 ? void 0 : list.forEach((effectItem) => {
-                const { callback, getDep, values, preCallback } = effectItem;
-                const newValues = getDep === null || getDep === void 0 ? void 0 : getDep();
-                if (!getDep || !values || isArrayChange(values, newValues)) {
-                    execCallback(preCallback);
-                    effectItem.preCallback = callback(newValues, values);
-                    effectItem.values = newValues;
-                }
-            });
-        });
-        /**
-         * 每次更新完检查依赖，执行对应的副作用回调
-         * */
-        _GemElement_execEffect.set(this, () => {
-            __classPrivateFieldGet(this, _GemElement_exec, "f").call(this, __classPrivateFieldGet(this, _GemElement_effectList, "f"));
-        });
-        _GemElement_execMemo.set(this, () => {
-            __classPrivateFieldGet(this, _GemElement_exec, "f").call(this, __classPrivateFieldGet(this, _GemElement_memoList, "f"));
-        });
-        /**
-         * @helper
-         * 记录副作用回调和值，在 `constructor`/`mounted` 中使用
-         * 回调到返回值如果是函数将再卸载时执行
-         * 第一次执行时 `oldDeps` 为空
-         *
-         * ```js
-         * class App extends GemElement {
-         *   mounted() {
-         *     this.effect(callback, () => [this.attrName]);
-         *   }
-         * }
-         * ```
-         * */
-        this.effect = (callback, getDep) => {
-            if (!__classPrivateFieldGet(this, _GemElement_effectList, "f"))
-                __classPrivateFieldSet(this, _GemElement_effectList, [], "f");
-            const effectItem = {
-                callback,
-                getDep,
-                initialized: __classPrivateFieldGet(this, _GemElement_isMounted, "f"),
-                inConstructor: this[constructorSymbol],
+    // 禁止覆盖自定义元素原生生命周期方法
+    // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
+    static #final = Symbol();
+    #renderRoot;
+    #internals;
+    #effectList = [];
+    #memoList = [];
+    #renderList = [];
+    #isAppendReason;
+    #isMounted;
+    // not in constructor 的近似值
+    #isConnected;
+    #rendering;
+    #clearStyle;
+    [updateTokenAlias]() {
+        // 避免 `connectedCallback` 中的 property 赋值造成多余更新
+        if (this.#isMounted) {
+            addMicrotask(this.#update);
+        }
+    }
+    static {
+        createState = (initState) => {
+            const ele = currentConstructGemElement;
+            const state = (payload) => {
+                assign(state, payload);
+                // 避免无限刷新
+                if (!ele.#rendering)
+                    addMicrotask(ele.#update);
             };
-            // 以挂载时立即执行副作用，未挂载时等挂载后执行
-            if (__classPrivateFieldGet(this, _GemElement_isMounted, "f")) {
-                effectItem.values = getDep === null || getDep === void 0 ? void 0 : getDep();
-                effectItem.preCallback = callback(effectItem.values);
-            }
-            __classPrivateFieldGet(this, _GemElement_effectList, "f").push(effectItem);
-        };
-        /**
-         * @helper
-         * 在 `render` 前执行回调，不要在里面使用 `setState`
-         * 和 `effect` 一样接受依赖数组参数，在 `constructor`/`willMount` 中使用;
-         * 第一次执行时 `oldDeps` 为空
-         *
-         * ```js
-         * class App extends GemElement {
-         *   willMount() {
-         *     this.memo(() => {
-         *       this.a = exec(this.attrName);
-         *     }), () => [this.attrName]);
-         *   }
-         * }
-         * ```
-         * */
-        this.memo = (callback, getDep) => {
-            if (!__classPrivateFieldGet(this, _GemElement_memoList, "f"))
-                __classPrivateFieldSet(this, _GemElement_memoList, [], "f");
-            __classPrivateFieldGet(this, _GemElement_memoList, "f").push({
-                callback,
-                getDep,
-                inConstructor: this[constructorSymbol],
-            });
-        };
-        /**
-         * 元素挂载后执行还未初始化的副作用
-         * */
-        _GemElement_initEffect.set(this, () => {
-            var _b;
-            (_b = __classPrivateFieldGet(this, _GemElement_effectList, "f")) === null || _b === void 0 ? void 0 : _b.forEach((effectItem) => {
-                const { callback, getDep, initialized } = effectItem;
-                if (!initialized) {
-                    effectItem.values = getDep === null || getDep === void 0 ? void 0 : getDep();
-                    effectItem.preCallback = callback(effectItem.values);
-                    effectItem.initialized = true;
-                }
-            });
-        });
-        _GemElement_render.set(this, () => {
-            __classPrivateFieldGet(this, _GemElement_execMemo, "f").call(this);
-            const isLight = __classPrivateFieldGet(this, _GemElement_renderRoot, "f") === this;
-            const temp = this.render ? this.render() : isLight ? undefined : html `<slot></slot>`;
-            if (temp === undefined)
-                return;
-            render(temp, __classPrivateFieldGet(this, _GemElement_renderRoot, "f"));
-        });
-        _GemElement_shouldUpdate.set(this, () => {
-            return this.shouldUpdate ? this.shouldUpdate() : true;
-        });
-        _GemElement_updateCallback.set(this, () => {
-            if (__classPrivateFieldGet(this, _GemElement_isMounted, "f") && __classPrivateFieldGet(this, _GemElement_shouldUpdate, "f").call(this)) {
-                __classPrivateFieldGet(this, _GemElement_render, "f").call(this);
-                addMicrotask(__classPrivateFieldGet(this, _GemElement_updated, "f"));
-                addMicrotask(__classPrivateFieldGet(this, _GemElement_execEffect, "f"));
-            }
-        });
-        _GemElement_update.set(this, () => {
-            if (__classPrivateFieldGet(this, _GemElement_isAsync, "f")) {
-                asyncRenderTaskList.add(__classPrivateFieldGet(this, _GemElement_updateCallback, "f"));
-            }
-            else {
-                __classPrivateFieldGet(this, _GemElement_updateCallback, "f").call(this);
-            }
-        });
-        /**
-         * @helper
-         * async
-         */
-        this.update = () => {
-            addMicrotask(__classPrivateFieldGet(this, _GemElement_update, "f"));
+            setPrototypeOf(state, null);
+            delete state.name;
+            delete state.length;
+            ele.#internals.stateList.push(state);
+            assign(state, initState);
+            return state;
         };
-        _GemElement_updated.set(this, () => {
-            var _b;
-            (_b = this.updated) === null || _b === void 0 ? void 0 : _b.call(this);
-        });
-        _GemElement_disconnectStore.set(this, void 0);
-        _GemElement_connectedCallback.set(this, () => {
-            var _b, _c, _d;
-            if (__classPrivateFieldGet(this, _GemElement_isAppendReason, "f")) {
-                __classPrivateFieldSet(this, _GemElement_isAppendReason, false, "f");
-                return;
-            }
-            // 似乎这是最早的判断不在 `constructor` 中的地方
-            Reflect.set(this, constructorSymbol, false);
-            (_b = this.willMount) === null || _b === void 0 ? void 0 : _b.call(this);
-            const { observedStores, rootElement } = this.constructor;
-            __classPrivateFieldSet(this, _GemElement_disconnectStore, observedStores === null || observedStores === void 0 ? void 0 : observedStores.map((store) => connect(store, __classPrivateFieldGet(this, _GemElement_update, "f"))), "f");
-            __classPrivateFieldGet(this, _GemElement_render, "f").call(this);
-            __classPrivateFieldSet(this, _GemElement_isMounted, true, "f");
-            __classPrivateFieldSet(this, _GemElement_unmountCallback, (_c = this.mounted) === null || _c === void 0 ? void 0 : _c.call(this), "f");
-            __classPrivateFieldGet(this, _GemElement_initEffect, "f").call(this);
-            if (rootElement &&
-                this.isConnected &&
-                ((_d = this.getRootNode().host) === null || _d === void 0 ? void 0 : _d.tagName) !== rootElement.toUpperCase()) {
-                throw new GemError(`not allow current root type`);
-            }
-        });
-        _GemElement_clearEffect.set(this, (list) => {
-            return list === null || list === void 0 ? void 0 : list.filter((e) => {
-                execCallback(e.preCallback);
-                e.initialized = false;
-                return e.inConstructor;
-            });
-        });
-        // 外部不可见，但允许类外面使用
-        addMicrotask(() => Reflect.set(this, initSymbol, false));
-        Reflect.set(this, constructorSymbol, true);
-        Reflect.set(this, initSymbol, true);
-        Reflect.set(this, updateSymbol, () => {
-            if (__classPrivateFieldGet(this, _GemElement_isMounted, "f")) {
-                addMicrotask(__classPrivateFieldGet(this, _GemElement_update, "f"));
-            }
-        });
-        __classPrivateFieldSet(this, _GemElement_isAsync, options.isAsync, "f");
-        __classPrivateFieldSet(this, _GemElement_renderRoot, options.isLight
-            ? this
-            : this.attachShadow({
-                mode: options.mode || 'open',
-                delegatesFocus: options.delegatesFocus,
-                slotAssignment: options.slotAssignment,
-            }), "f");
+        createRef = () => new RefObject(currentConstructGemElement);
+        createTemplate = (ele, item) => ele.#renderList.push(item);
+    }
+    constructor() {
+        super();
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        currentConstructGemElement = this;
+        const { mode, serializable, delegatesFocus, slotAssignment, aria } = this.#metadata;
+        const { focusable, ...internalsAria } = aria || {};
+        this.#renderRoot = !mode ? this : this.attachShadow({ mode, serializable, delegatesFocus, slotAssignment });
+        this.#internals = this.attachInternals();
+        this.#internals.stateList = [];
+        this.#internals.sheets = [];
+        assign(this.#internals, internalsAria);
+        // light dom 添加边界，防止内容被外部样式化
+        // 特殊情况下需要手动 `delete` 边界，以应该外部样式
+        if (!mode)
+            this.#internals.states.add(BoundaryCSSState);
         // https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head
         // focusable 元素一般同时具备 disabled 属性
         // 和原生元素行为保持一致，disabled 时不触发 click 事件
         let hasInitTabIndex;
-        this.effect(([disabled = false]) => {
-            if (hasInitTabIndex === undefined)
-                hasInitTabIndex = this.hasAttribute('tabindex');
-            this.internals.ariaDisabled = String(disabled);
-            if (options.focusable && !hasInitTabIndex) {
-                this.tabIndex = -Number(disabled);
-            }
-            if ((options.focusable || options.delegatesFocus) && disabled) {
-                return addListener(this, 'click', (e) => e.isTrusted && e.stopImmediatePropagation(), {
-                    capture: true,
-                });
-            }
-        }, () => [Reflect.get(this, 'disabled')]);
-        const { adoptedStyleSheets } = new.target;
-        if (adoptedStyleSheets) {
-            const sheets = adoptedStyleSheets.map((item) => item[SheetToken] || item);
-            if (this.shadowRoot) {
-                this.shadowRoot.adoptedStyleSheets = sheets;
-            }
-            else {
-                this.effect(() => {
-                    const root = this.getRootNode();
-                    root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
-                    return () => {
-                        root.adoptedStyleSheets = removeItems(root.adoptedStyleSheets, sheets);
-                    };
-                }, () => []);
-            }
-        }
+        this.#effectList.push({
+            fixed: true,
+            getDep: () => [this.disabled],
+            callback: ([disabled = false]) => {
+                if (hasInitTabIndex === undefined)
+                    hasInitTabIndex = this.hasAttribute('tabindex');
+                this.#internals.ariaDisabled = String(disabled);
+                if (focusable && !hasInitTabIndex)
+                    this.tabIndex = -Number(disabled);
+                if ((focusable || delegatesFocus) && disabled) {
+                    return addListener(this, 'click', (e) => e.isTrusted && e.stopImmediatePropagation(), {
+                        capture: true,
+                    });
+                }
+            },
+        });
+    }
+    get #metadata() {
+        return this.constructor[Symbol.metadata];
+    }
+    get #renderItem() {
+        return this.#renderList.find((e) => !e.condition || e.condition());
     }
     get internals() {
-        if (!__classPrivateFieldGet(this, _GemElement_internals, "f")) {
-            __classPrivateFieldSet(this, _GemElement_internals, this.attachInternals(), "f");
-            // https://groups.google.com/a/chromium.org/g/blink-dev/c/JvpHoUfhJYE?pli=1
-            // https://bugs.webkit.org/show_bug.cgi?id=215911
-            // https://bugzilla.mozilla.org/show_bug.cgi?id=1588763
-            try {
-                __classPrivateFieldGet(this, _GemElement_internals, "f").states.add('foo');
-                __classPrivateFieldGet(this, _GemElement_internals, "f").states.delete('foo');
-            }
-            catch (_b) {
-                Reflect.defineProperty(__classPrivateFieldGet(this, _GemElement_internals, "f"), 'states', {
-                    value: {
-                        has: (v) => kebabToCamelCase(v) in this.dataset,
-                        add: (v) => (this.dataset[kebabToCamelCase(v)] = ''),
-                        delete: (v) => delete this.dataset[kebabToCamelCase(v)],
-                    },
-                });
-            }
-        }
-        return __classPrivateFieldGet(this, _GemElement_internals, "f");
+        return this.#internals;
     }
     /**
-     * @private
-     * @final
-     * use `effect`
-     */
-    attributeChangedCallback() {
-        if (__classPrivateFieldGet(this, _GemElement_isMounted, "f")) {
-            addMicrotask(__classPrivateFieldGet(this, _GemElement_update, "f"));
+     * 每次更新完检查依赖，执行对应的副作用回调
+     * */
+    #execEffect = () => {
+        execEffectList(this.#effectList);
+    };
+    #execMemo = () => {
+        execEffectList(this.#memoList);
+    };
+    /**
+     * - 条件渲染
+     * - 不提供 `render` 时显示子内容
+     * - 返回 `null` 时渲染空的子内容
+     * - 返回 `undefined` 时不会更新现有内容
+     * */
+    #render = (item) => {
+        try {
+            this.#rendering = true;
+            this.#execMemo();
+            const isLight = this.#renderRoot === this;
+            const temp = item ? item.render() : isLight ? undefined : html `<slot></slot>`;
+            this.#rendering = false;
+            if (temp === undefined)
+                return;
+            render(temp, this.#renderRoot);
         }
-        return __classPrivateFieldGet(_a, _a, "f", _GemElement_final);
-    }
-    closestElement(constructorOrTag) {
-        const isConstructor = typeof constructorOrTag === 'function';
-        const tagName = typeof constructorOrTag === 'string' && constructorOrTag.toUpperCase();
-        const getRootElement = (ele) => {
-            const rootEle = ele.parentElement || ele.getRootNode().host;
-            if (!rootEle)
-                return null;
-            if (isConstructor) {
-                if (rootEle.constructor === constructorOrTag) {
-                    return rootEle;
-                }
-            }
-            else if (rootEle.tagName === tagName) {
-                return rootEle;
+        catch (err) {
+            this.dispatchEvent(new CustomEvent(RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
+        }
+    };
+    #updateCallback = () => {
+        const item = this.#renderItem;
+        if (this.#isMounted &&
+            // 当有渲染函数，但是没一个符合条件时跳过
+            (item || !this.#renderList.length)) {
+            this.#render(item);
+            addMicrotask(this.#execEffect);
+        }
+    };
+    #update = () => {
+        if (this.#metadata.noBlocking) {
+            noBlockingTaskList.add(this.#updateCallback);
+        }
+        else {
+            this.#updateCallback();
+        }
+    };
+    #prepareStyle = () => {
+        const { adoptedStyleSheets = [] } = this.#metadata;
+        const { shadowRoot, sheets } = this.#internals;
+        const clsSheets = adoptedStyleSheets.map((item) => item[SheetToken].getStyle(this));
+        if (shadowRoot) {
+            shadowRoot.adoptedStyleSheets = clsSheets.concat(sheets);
+        }
+        else {
+            this.prepend(...sheets.map((e) => e.element));
+            return appleCSSStyleSheet(this, clsSheets);
+        }
+    };
+    /**
+     * 元素挂载后执行还未初始化的副作用
+     * */
+    #initEffect = () => {
+        this.#effectList?.forEach((effectItem) => {
+            const { callback, getDep, initialized } = effectItem;
+            if (!initialized) {
+                effectItem.values = getDep?.();
+                effectItem.preCallback = callback(effectItem.values);
+                effectItem.initialized = true;
             }
-            return getRootElement(rootEle);
-        };
-        return getRootElement(this);
-    }
+        });
+    };
+    #compat = () => {
+        if (this.willMount)
+            this.memo(this.willMount.bind(this), () => []);
+        if (this.mounted)
+            this.effect(this.mounted.bind(this), () => []);
+        if (this.updated)
+            this.effect((_, old) => old && this.updated.apply(this));
+        if (this.unmounted)
+            this.effect(() => this.unmounted.bind(this), () => []);
+        if (!this.#renderList.length && this.render)
+            this.#renderList.push({ render: this.render.bind(this), condition: this.shouldUpdate?.bind(this) });
+    };
+    #disconnectStore;
+    #connectedCallback = async () => {
+        if (this.#isAppendReason) {
+            this.#isAppendReason = false;
+            return;
+        }
+        this.#compat();
+        const { observedStores } = this.#metadata;
+        this.#isConnected = true;
+        this.#disconnectStore = observedStores?.map((store) => connect(store, this.#update));
+        this.#render(this.#renderItem);
+        this.#isMounted = true;
+        this.#clearStyle = this.#prepareStyle();
+        // 等待所有元素的样式被应用，再执行回调
+        // 这让 mounted 和 effect 回调和其他回调一样保持一样的异步行为
+        await Promise.resolve();
+        this.#initEffect();
+    };
     /**
      * @private
      * @final
-     * use `mounted`; 允许手动调用 `connectedCallback` 以清除装饰器定义的字段
+     * use `mounted`
      */
     connectedCallback() {
-        if (this.isConnected && __classPrivateFieldGet(this, _GemElement_isAsync, "f")) {
-            asyncRenderTaskList.add(__classPrivateFieldGet(this, _GemElement_connectedCallback, "f"));
+        if (this.#metadata.noBlocking) {
+            noBlockingTaskList.add(this.#connectedCallback);
         }
         else {
-            __classPrivateFieldGet(this, _GemElement_connectedCallback, "f").call(this);
+            this.#connectedCallback();
         }
-        return __classPrivateFieldGet(_a, _a, "f", _GemElement_final);
+        return GemElement.#final;
     }
     /**
      * @private
      * @final
      */
     adoptedCallback() {
-        return __classPrivateFieldGet(_a, _a, "f", _GemElement_final);
+        return GemElement.#final;
     }
     /**
      * @private
@@ -356,169 +410,76 @@ export class GemElement extends HTMLElement {
      * use `unmounted`
      */
     disconnectedCallback() {
-        var _b, _c;
         if (this.isConnected) {
-            __classPrivateFieldSet(this, _GemElement_isAppendReason, true, "f");
+            this.#isAppendReason = true;
             return;
         }
-        __classPrivateFieldSet(this, _GemElement_isMounted, false, "f");
-        (_b = __classPrivateFieldGet(this, _GemElement_disconnectStore, "f")) === null || _b === void 0 ? void 0 : _b.forEach((disconnect) => disconnect());
-        execCallback(__classPrivateFieldGet(this, _GemElement_unmountCallback, "f"));
-        (_c = this.unmounted) === null || _c === void 0 ? void 0 : _c.call(this);
-        __classPrivateFieldSet(this, _GemElement_effectList, __classPrivateFieldGet(this, _GemElement_clearEffect, "f").call(this, __classPrivateFieldGet(this, _GemElement_effectList, "f")), "f");
-        __classPrivateFieldSet(this, _GemElement_memoList, __classPrivateFieldGet(this, _GemElement_clearEffect, "f").call(this, __classPrivateFieldGet(this, _GemElement_memoList, "f")), "f");
-        return __classPrivateFieldGet(_a, _a, "f", _GemElement_final);
-    }
-}
-_a = GemElement, _GemElement_renderRoot = new WeakMap(), _GemElement_internals = new WeakMap(), _GemElement_isAppendReason = new WeakMap(), _GemElement_isMounted = new WeakMap(), _GemElement_isAsync = new WeakMap(), _GemElement_effectList = new WeakMap(), _GemElement_memoList = new WeakMap(), _GemElement_unmountCallback = new WeakMap(), _GemElement_exec = new WeakMap(), _GemElement_execEffect = new WeakMap(), _GemElement_execMemo = new WeakMap(), _GemElement_initEffect = new WeakMap(), _GemElement_render = new WeakMap(), _GemElement_shouldUpdate = new WeakMap(), _GemElement_updateCallback = new WeakMap(), _GemElement_update = new WeakMap(), _GemElement_updated = new WeakMap(), _GemElement_disconnectStore = new WeakMap(), _GemElement_connectedCallback = new WeakMap(), _GemElement_clearEffect = new WeakMap();
-// 禁止覆盖自定义元素原生生命周期方法
-// https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
-_GemElement_final = { value: Symbol() };
-const gemElementProxyMap = new PropProxyMap();
-export function defineAttribute(target, prop, attr) {
-    const { booleanAttributes, numberAttributes } = target.constructor;
-    Object.defineProperty(target, prop, {
-        configurable: true,
-        get() {
-            // fix karma test
-            // 判断是否是自定义元素实例
-            if (!(initSymbol in this))
-                return;
-            const that = this;
-            // 不能从 proxy 对象中读取值
-            const value = that.getAttribute(attr);
-            if (booleanAttributes === null || booleanAttributes === void 0 ? void 0 : booleanAttributes.has(attr)) {
-                return value === null ? false : true;
-            }
-            if (numberAttributes === null || numberAttributes === void 0 ? void 0 : numberAttributes.has(attr)) {
-                return Number(value);
-            }
-            return value || '';
-        },
-        set(v) {
-            const that = this;
-            const proxy = gemElementProxyMap.get(this);
-            const hasSet = proxy[prop];
-            const value = that.getAttribute(attr);
-            // https://github.com/whatwg/dom/issues/922
-            if (this[initSymbol] && value !== null && !hasSet)
-                return;
-            // 字段和构造函数中都有对 attr 设置时会执行多次
-            // Firefox WebConsole 中不知道为什么在构造函数中 this[initSymbol] 已经为 false
-            proxy[prop] = true;
-            const isBool = booleanAttributes === null || booleanAttributes === void 0 ? void 0 : booleanAttributes.has(attr);
-            if (v === null || v === undefined) {
-                that.removeAttribute(attr);
-            }
-            else if (isBool) {
-                // 当 attr 存在且 !!v 为 true 时，toggleAttribute 不会造成 Attribute 改变
-                that.toggleAttribute(attr, !!v);
-            }
-            else {
-                if (value !== String(v))
-                    that.setAttribute(attr, String(v));
-            }
-        },
-    });
-}
-const isEventHandleSymbol = Symbol('event handle');
-export function defineProperty(target, prop, event, eventOptions) {
-    Object.defineProperty(target, prop, {
-        configurable: true,
-        get() {
-            const value = gemElementProxyMap.get(this)[prop];
-            if (value || !event) {
-                return value;
-            }
-            else {
-                this[prop] = emptyFunction;
-                return this[prop];
-            }
-        },
-        set(v) {
-            const that = this;
-            const proxy = gemElementProxyMap.get(that);
-            if (v !== proxy[prop]) {
-                if (event) {
-                    proxy[prop] = (v === null || v === void 0 ? void 0 : v[isEventHandleSymbol])
-                        ? v
-                        : (detail, options) => {
-                            const evt = new CustomEvent(event, { ...options, ...eventOptions, detail });
-                            that.dispatchEvent(evt);
-                            v(detail, options);
-                        };
-                    Reflect.set(proxy[prop], isEventHandleSymbol, true);
-                    // emitter 不触发元素更新
-                }
-                else {
-                    proxy[prop] = v;
-                    this[updateSymbol]();
-                }
-            }
-        },
-    });
-}
-export function defineRef(target, prop, ref) {
-    Object.defineProperty(target, prop, {
-        configurable: true,
-        get() {
-            const proxy = gemElementProxyMap.get(this);
-            let refobject = proxy[prop];
-            if (!refobject) {
-                const that = this;
-                const ele = that.shadowRoot || that;
-                refobject = {
-                    get ref() {
-                        return ref;
-                    },
-                    get element() {
-                        const gemReflects = [...ele.querySelectorAll('[data-gem-reflect]')].map((e) => e.target);
-                        for (const e of [ele, ...gemReflects]) {
-                            const result = e.querySelector(`[ref=${ref}]`);
-                            if (result)
-                                return result;
-                        }
-                    },
-                };
-                proxy[prop] = refobject;
-            }
-            return refobject;
-        },
-    });
-}
-export function defineCSSState(target, prop, state) {
-    Object.defineProperty(target, prop, {
-        configurable: true,
-        get() {
-            const that = this;
-            const { states } = that.internals;
-            return states === null || states === void 0 ? void 0 : states.has(state);
-        },
-        set(v) {
-            const that = this;
-            const { states } = that.internals;
-            if (v) {
-                states === null || states === void 0 ? void 0 : states.add(state);
-            }
-            else {
-                states === null || states === void 0 ? void 0 : states.delete(state);
-            }
-        },
-    });
-}
-export const nativeDefineElement = customElements.define.bind(customElements);
-customElements.define = (name, cls, options) => {
-    if (cls.prototype instanceof GemElement) {
-        const { observedAttributes, observedProperties, defineEvents, defineCSSStates, defineRefs } = cls;
-        observedAttributes === null || observedAttributes === void 0 ? void 0 : observedAttributes.forEach((attr) => defineAttribute(cls.prototype, kebabToCamelCase(attr), attr));
-        observedProperties === null || observedProperties === void 0 ? void 0 : observedProperties.forEach((prop) => defineProperty(cls.prototype, prop));
-        defineEvents === null || defineEvents === void 0 ? void 0 : defineEvents.forEach((event) => defineProperty(cls.prototype, kebabToCamelCase(event), event));
-        defineCSSStates === null || defineCSSStates === void 0 ? void 0 : defineCSSStates.forEach((state) => defineCSSState(cls.prototype, kebabToCamelCase(state), state));
-        defineRefs === null || defineRefs === void 0 ? void 0 : defineRefs.forEach((ref) => defineRef(cls.prototype, kebabToCamelCase(ref), ref));
+        noBlockingTaskList.delete(this.#connectedCallback);
+        noBlockingTaskList.delete(this.#updateCallback);
+        this.#isMounted = false;
+        this.#disconnectStore?.forEach((disconnect) => disconnect());
+        // 是否要异步执行回调？
+        this.#effectList = clearEffect(this.#effectList);
+        this.#memoList = clearEffect(this.#memoList);
+        execCallback(this.#clearStyle);
+        return GemElement.#final;
     }
-    nativeDefineElement(name, cls, options);
-};
-if (window.__GEM_DEVTOOLS__HOOK__) {
-    Object.assign(window.__GEM_DEVTOOLS__HOOK__, { ...GemExports, ...VersionExports });
+    /**
+     * @helper
+     * 记录副作用回调和值；
+     * 回调到返回值如果是函数将再卸载时执行；
+     * 第一次执行时 `oldDeps` 为空；
+     *
+     * ```js
+     * class App extends GemElement {
+     *   mounted() {
+     *     this.effect(callback, () => [this.attrName]);
+     *   }
+     * }
+     * ```
+     * */
+    effect = (callback, getDep) => {
+        const effectItem = {
+            callback,
+            getDep,
+            initialized: this.#isMounted,
+            fixed: !this.#isConnected,
+        };
+        // 已挂载时立即执行副作用，未挂载时等挂载后执行
+        if (this.#isMounted) {
+            effectItem.values = getDep?.();
+            effectItem.preCallback = callback(effectItem.values);
+        }
+        this.#effectList.push(effectItem);
+    };
+    /**
+     * @helper
+     * 在 `render` 前执行回调；
+     * 和 `effect` 一样接受依赖数组参数，在 `constructor` 中使用;
+     * 第一次执行时 `oldDeps` 为空；
+     *
+     * ```js
+     * class App extends GemElement {
+     *   constructor() {
+     *     super();
+     *     this.memo(() => {
+     *       this.a = exec(this.attrName);
+     *     }), () => [this.attrName]);
+     *   }
+     * }
+     * ```
+     * */
+    memo = (callback, getDep) => {
+        this.#memoList.push({
+            callback,
+            getDep,
+            fixed: !this.#isConnected,
+        });
+    };
+    /**
+     * @helper
+     * async
+     */
+    update = () => addMicrotask(this.#update);
 }
 //# sourceMappingURL=element.js.map