@mantou/gem 1.7.11 → 2.0.0-alpha.0

package/src/lib/element.ts

@@ -1,37 +1,16 @@
-import { html, render, TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit-html';
+import { html, render } from 'lit-html';
 
 import type { GemReflectElement } from '../elements/reflect';
 
-import { connect, Store } from './store';
-import {
-  LinkedList,
-  addMicrotask,
-  Sheet,
-  SheetToken,
-  isArrayChange,
-  GemError,
-  kebabToCamelCase,
-  PropProxyMap,
-  removeItems,
-  addListener,
-} from './utils';
-import * as GemExports from './element';
-import * as VersionExports from './version';
+import type { Store } from './store';
+import { connect } from './store';
+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';
 
 declare global {
-  interface ElementInternals extends ARIAMixin {
-    // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
-    states: Set<string>;
-  }
-  // 用于 css 选择器选择元素，使用 @refobject 自动选择获取
+  // 用于 css 选择器选择元素，使用 RefObject 自动选择获取
   // 必须使用 attr 赋值
   /**
    * @attr ref
@@ -39,264 +18,447 @@ declare global {
   interface HTMLElement {
     ref: string;
   }
+  interface DOMStringMap {
+    gemReflect?: '';
+    gemStyle?: '';
+    [name: string]: string | undefined;
+  }
+  // https://github.com/tc39/proposal-decorator-metadata
+  interface SymbolConstructor {
+    readonly metadata: symbol;
+  }
 }
 
-function emptyFunction() {
-  // 用于占位的空函数
+const { assign, defineProperty, setPrototypeOf } = Object;
+
+defineProperty(Symbol, 'metadata', { value: Symbol.for('Symbol.metadata') });
+
+const execCallback = (fun: any) => 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<Document | ShadowRoot, Map<CSSStyleSheet, number>>();
+const rootUpdateFnMap = new WeakMap<Map<CSSStyleSheet, number>, () => void>();
+
+const getReflectTargets = (ele: ShadowRoot | GemElement) =>
+  [...ele.querySelectorAll<GemReflectElement>('[data-gem-reflect]')].map((e) => e.target);
+
+class RefObject<T = HTMLElement> {
+  refSelector: string;
+  ele: GemElement | ShadowRoot;
+  ref: string;
+
+  constructor(current: GemElement) {
+    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 as T;
+    }
+  }
+  get elements() {
+    return [this.ele, ...getReflectTargets(this.ele)]
+      .map((e) => [...e.querySelectorAll(this.refSelector)] as T[])
+      .flat();
+  }
+  toString() {
+    return this.ref;
+  }
 }
 
-function execCallback(fun: any) {
-  typeof fun === 'function' && fun();
+/**必须使用在字段中，否则会读取到错误的实例 */
+export let createRef: <T>() => RefObject<T>;
+
+class GemCSSStyleSheet extends CSSStyleSheet {
+  #ele?: HTMLStyleElement;
+
+  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: string) {
+    this.cssText = text;
+    if (this.#ele) this.#ele.textContent = text;
+    super.replaceSync(text);
+  }
 }
 
-// global render task pool
-const asyncRenderTaskList = new LinkedList<() => void>();
-const tick = (timeStamp = performance.now()) => {
-  if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
-  const task = asyncRenderTaskList.get();
-  if (task) {
-    task();
-    tick(timeStamp);
+class GemCSSSheet {
+  #content = '';
+  #media = '';
+  constructor(media = '') {
+    this.#media = media;
+  }
+  setContent(v: string) {
+    this.#content = v;
+  }
+
+  // 不需要 GC
+  #record = new Map<any, GemCSSStyleSheet>();
+  #used = new Map<GemCSSStyleSheet, string>();
+  getStyle(host?: HTMLElement) {
+    const isLight = host && !(host as GemElement).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);
+    });
+  }
+}
+
+export type Sheet<T> = { [P in keyof T]: P } & { [SheetToken]: GemCSSSheet };
+
+/**
+ *
+ * 创建 style sheet 用于 `@adoptedStyle`，不支持样式更新，只支持自定义 CSS 属性
+ */
+export function createCSSSheet<T extends Record<string, string>>(media: string, rules: T | string): Sheet<T>;
+export function createCSSSheet<T extends Record<string, string>>(rules: T | string): Sheet<T>;
+export function createCSSSheet<T extends Record<string, string>>(
+  mediaOrRules: T | string,
+  rulesValue?: T | string,
+): Sheet<T> {
+  const media = rulesValue ? (mediaOrRules as string) : '';
+  const rules = rulesValue || mediaOrRules;
+  const styleSheet = new GemCSSSheet(media);
+  const sheet: any = { [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 as Sheet<T>;
+}
+
+const updateStyleSheets = (map: Map<CSSStyleSheet, number>, sheets: CSSStyleSheet[], value: number) => {
+  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: HTMLElement, sheets: CSSStyleSheet[]) => {
+  const root = ele.getRootNode() as ShadowRoot | Document;
+  if (!rootStyleSheetInfo.has(root)) {
+    const map = new Map<CSSStyleSheet, number>();
+    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);
 };
-asyncRenderTaskList.addEventListener('start', () => addMicrotask(tick));
+
+/**必须使用在字段中，否则会读取到错误的实例 */
+export let createState: <T>(initState: T) => T & ((state: Partial<T>) => void);
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
 type EffectItem<T> = {
   callback: EffectCallback<T>;
   initialized?: boolean;
-  inConstructor?: boolean;
+  fixed?: boolean; // 不需要清理，只会添加一次
   values?: T;
   getDep?: GetDepFun<T>;
   preCallback?: () => void;
 };
 
-const constructorSymbol = Symbol('constructor');
-const initSymbol = Symbol('init');
-const updateSymbol = Symbol('update');
+function execEffectList(list?: EffectItem<any>[]) {
+  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;
+    }
+  });
+}
 
-export interface GemElementOptions extends Partial<ShadowRootInit> {
-  isLight?: boolean;
-  isAsync?: boolean;
-  focusable?: boolean;
+function clearEffect(list: EffectItem<any>[]) {
+  return list.filter((e) => {
+    execCallback(e.preCallback);
+    e.initialized = false;
+    e.values = undefined;
+    return e.fixed;
+  });
 }
 
-export abstract class GemElement<T = Record<string, unknown>> extends HTMLElement {
-  // 禁止覆盖自定义元素原生生命周期方法
-  // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
-  static #final = Symbol();
+type Render = () => TemplateResult | null | undefined;
+type RenderItem = { render: Render; condition?: () => boolean };
 
-  // 这里只是字段申明，不能赋值，否则子类会继承被共享该字段
-  static observedAttributes?: string[]; // WebAPI 中是实时检查这个列表
-  static booleanAttributes?: Set<string>;
-  static numberAttributes?: Set<string>;
-  static observedProperties?: string[];
-  static observedStores?: Store<unknown>[];
-  static adoptedStyleSheets?: Sheet<unknown>[];
-  static defineEvents?: string[];
-  static defineCSSStates?: string[];
-  static defineRefs?: string[];
+export let createTemplate: (ele: GemElement, item: RenderItem) => void;
+
+export type Metadata = Partial<ShadowRootInit> & {
+  noBlocking?: boolean;
+  aria?: Partial<
+    ARIAMixin & {
+      /**自动添加 tabIndex；支持 `disabled` 属性 */
+      focusable: boolean;
+    }
+  >;
+  // 实例化时使用到，DevTools 需要读取
+  observedStores: Store<unknown>[];
+  adoptedStyleSheets?: Sheet<unknown>[];
   // 以下静态字段仅供外部读取，没有实际作用
-  static defineParts?: string[];
-  static defineSlots?: string[];
-  // 指定 root 元素类型
-  static rootElement?: string;
+  observedProperties?: string[];
+  observedAttributes?: string[];
+  definedEvents?: string[];
+  definedCSSStates?: string[];
+  definedParts?: string[];
+  definedSlots?: string[];
+  /**@deprecated GemDevtools 在使用*/
+  definedRefs?: string[];
+};
 
-  // 定义当前元素的状态，和 attr/prop 的本质区别是不为外部输入
-  readonly state?: T;
+// global render task pool
+const noBlockingTaskList = new LinkedList<() => void>();
+const tick = (timeStamp = performance.now()) => {
+  if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
+  const task = noBlockingTaskList.get();
+  if (task) {
+    task();
+    tick(timeStamp);
+  }
+};
+noBlockingTaskList.addEventListener('start', () => addMicrotask(tick));
+
+let currentConstructGemElement: GemElement;
+
+export abstract class GemElement extends HTMLElement {
+  // 禁止覆盖自定义元素原生生命周期方法
+  // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
+  static #final = Symbol();
 
   #renderRoot: HTMLElement | ShadowRoot;
-  #internals?: ElementInternals;
+  #internals: ElementInternals & {
+    // 有别于 adoptedStyleSheets，用来定义单个实例样式
+    sheets: GemCSSStyleSheet[];
+    stateList: ReturnType<typeof createState>[];
+  };
+  #effectList: EffectItem<any>[] = [];
+  #memoList: EffectItem<any>[] = [];
+  #renderList: RenderItem[] = [];
   #isAppendReason?: boolean;
-  // 和 isConnected 有区别
   #isMounted?: boolean;
-  #isAsync?: boolean;
-  #effectList?: EffectItem<any>[];
-  #memoList?: EffectItem<any>[];
-  #unmountCallback?: any;
+  // not in constructor 的近似值
+  #isConnected?: boolean;
+  #rendering?: boolean;
+  #clearStyle?: any;
+
+  [updateTokenAlias]() {
+    // 避免 `connectedCallback` 中的 property 赋值造成多余更新
+    if (this.#isMounted) {
+      addMicrotask(this.#update);
+    }
+  }
 
-  constructor(options: GemElementOptions = {}) {
+  static {
+    createState = <T>(initState: T) => {
+      const ele = currentConstructGemElement;
+      const state: any = (payload: Partial<T>) => {
+        assign(state, payload);
+        // 避免无限刷新
+        if (!ele.#rendering) addMicrotask(ele.#update);
+      };
+      setPrototypeOf(state, null);
+      delete state.name;
+      delete state.length;
+      ele.#internals.stateList.push(state);
+      assign(state, initState);
+      return state as T & ((this: GemElement, state: Partial<T>) => void);
+    };
+    createRef = () => new RefObject(currentConstructGemElement);
+    createTemplate = (ele, item) => ele.#renderList.push(item);
+  }
+
+  constructor() {
     super();
 
-    // 外部不可见，但允许类外面使用
-    addMicrotask(() => Reflect.set(this, initSymbol, false));
-    Reflect.set(this, constructorSymbol, true);
-    Reflect.set(this, initSymbol, true);
-    Reflect.set(this, updateSymbol, () => {
-      if (this.#isMounted) {
-        addMicrotask(this.#update);
-      }
-    });
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    currentConstructGemElement = this;
 
-    this.#isAsync = options.isAsync;
-    this.#renderRoot = options.isLight
-      ? this
-      : this.attachShadow({
-          mode: options.mode || 'open',
-          delegatesFocus: options.delegatesFocus,
-          slotAssignment: options.slotAssignment,
-        });
+    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() as GemElement['internals'];
+    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: boolean | undefined;
-    this.effect(
-      ([disabled = false]) => {
+    this.#effectList.push({
+      fixed: true,
+      getDep: () => [(this as any).disabled],
+      callback: ([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) {
+        this.#internals.ariaDisabled = String(disabled);
+        if (focusable && !hasInitTabIndex) this.tabIndex = -Number(disabled);
+        if ((focusable || delegatesFocus) && disabled) {
           return addListener(this, 'click', (e: Event) => 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() as ShadowRoot | Document;
-            root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
-            return () => {
-              root.adoptedStyleSheets = removeItems(root.adoptedStyleSheets, sheets);
-            };
-          },
-          () => [],
-        );
-      }
-    }
+    });
+  }
+
+  get #metadata(): Metadata {
+    return (this.constructor as any)[Symbol.metadata];
+  }
+
+  get #renderItem() {
+    return this.#renderList.find((e) => !e.condition || e.condition());
   }
 
   get internals() {
-    if (!this.#internals) {
-      this.#internals = this.attachInternals();
-      // 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 {
-        this.#internals.states.add('foo');
-        this.#internals.states.delete('foo');
-      } catch {
-        Reflect.defineProperty(this.#internals, 'states', {
-          value: {
-            has: (v: string) => kebabToCamelCase(v) in this.dataset,
-            add: (v: string) => (this.dataset[kebabToCamelCase(v)] = ''),
-            delete: (v: string) => delete this.dataset[kebabToCamelCase(v)],
-          },
-        });
-      }
-    }
     return this.#internals;
   }
 
   /**
-   * @helper
-   * 设置元素 state，会触发更新
-   *
-   * ```js
-   * class App extends GemElement {
-   *   click() {
-   *     this.setState({});
-   *   }
-   * }
-   * ```
+   * 每次更新完检查依赖，执行对应的副作用回调
    * */
-  setState = (payload: Partial<T>) => {
-    if (!this.state) throw new GemError('`state` not initialized');
-    Object.assign(this.state, payload);
-    addMicrotask(this.#update);
+  #execEffect = () => {
+    execEffectList(this.#effectList);
   };
 
-  #exec = (list?: EffectItem<any>[]) => {
-    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;
-      }
-    });
+  #execMemo = () => {
+    execEffectList(this.#memoList);
   };
 
   /**
-   * 每次更新完检查依赖，执行对应的副作用回调
+   * - 条件渲染
+   * - 不提供 `render` 时显示子内容
+   * - 返回 `null` 时渲染空的子内容
+   * - 返回 `undefined` 时不会更新现有内容
    * */
-  #execEffect = () => {
-    this.#exec(this.#effectList);
+  #render = (item?: RenderItem) => {
+    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);
+    } catch (err) {
+      this.dispatchEvent(new CustomEvent(RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
+    }
   };
 
-  #execMemo = () => {
-    this.#exec(this.#memoList);
+  #updateCallback = () => {
+    const item = this.#renderItem;
+    if (
+      this.#isMounted &&
+      // 当有渲染函数，但是没一个符合条件时跳过
+      (item || !this.#renderList.length)
+    ) {
+      this.#render(item);
+      addMicrotask(this.#execEffect);
+    }
   };
 
-  /**
-   * @helper
-   * 记录副作用回调和值，在 `constructor`/`mounted` 中使用
-   * 回调到返回值如果是函数将再卸载时执行
-   * 第一次执行时 `oldDeps` 为空
-   *
-   * ```js
-   * class App extends GemElement {
-   *   mounted() {
-   *     this.effect(callback, () => [this.attrName]);
-   *   }
-   * }
-   * ```
-   * */
-  effect = <T = any[] | undefined>(callback: EffectCallback<T>, getDep?: T extends any[] ? () => T : undefined) => {
-    if (!this.#effectList) this.#effectList = [];
-    const effectItem: EffectItem<T> = {
-      callback,
-      getDep,
-      initialized: this.#isMounted,
-      inConstructor: (this as any)[constructorSymbol],
-    };
-    // 以挂载时立即执行副作用，未挂载时等挂载后执行
-    if (this.#isMounted) {
-      effectItem.values = getDep?.() as T;
-      effectItem.preCallback = callback(effectItem.values);
+  #update = () => {
+    if (this.#metadata.noBlocking) {
+      noBlockingTaskList.add(this.#updateCallback);
+    } else {
+      this.#updateCallback();
     }
-    this.#effectList.push(effectItem);
   };
 
-  /**
-   * @helper
-   * 在 `render` 前执行回调，不要在里面使用 `setState`
-   * 和 `effect` 一样接受依赖数组参数，在 `constructor`/`willMount` 中使用;
-   * 第一次执行时 `oldDeps` 为空
-   *
-   * ```js
-   * class App extends GemElement {
-   *   willMount() {
-   *     this.memo(() => {
-   *       this.a = exec(this.attrName);
-   *     }), () => [this.attrName]);
-   *   }
-   * }
-   * ```
-   * */
-  memo = <T = any[] | undefined>(callback: EffectCallback<T>, getDep?: T extends any[] ? () => T : undefined) => {
-    if (!this.#memoList) this.#memoList = [];
-    this.#memoList.push({
-      callback,
-      getDep,
-      inConstructor: (this as any)[constructorSymbol],
-    });
+  #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);
+    }
   };
 
   /**
@@ -313,138 +475,54 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     });
   };
 
-  /**@lifecycle */
-  willMount?(): void | Promise<void>;
-
-  /**
-   * @lifecycle
-   *
-   * - 不提供 `render` 时显示子内容
-   * - 返回 `null` 时渲染空内容
-   * - 返回 `undefined` 时不会调用 `render()`, 也就是不会更新以前的内容
-   * */
-  render?(): TemplateResult | null | undefined;
-
-  #render = () => {
-    this.#execMemo();
-    const isLight = this.#renderRoot === this;
-    const temp = this.render ? this.render() : isLight ? undefined : html`<slot></slot>`;
-    if (temp === undefined) return;
-    render(temp, this.#renderRoot);
-  };
-
-  /**@lifecycle */
-  mounted?(): void | (() => void) | Promise<void>;
-
-  /**@lifecycle */
-  shouldUpdate?(): boolean;
-  #shouldUpdate = () => {
-    return this.shouldUpdate ? this.shouldUpdate() : true;
-  };
-
-  #updateCallback = () => {
-    if (this.#isMounted && this.#shouldUpdate()) {
-      this.#render();
-      addMicrotask(this.#updated);
-      addMicrotask(this.#execEffect);
-    }
-  };
-
-  #update = () => {
-    if (this.#isAsync) {
-      asyncRenderTaskList.add(this.#updateCallback);
-    } else {
-      this.#updateCallback();
-    }
-  };
-
-  /**
-   * @helper
-   * async
-   */
-  update = () => {
-    addMicrotask(this.#update);
+  /** @lifecycle 将来会彻底移除，现在做兼容实现*/ willMount?(): void | Promise<void>;
+  /** @lifecycle 将来会彻底移除，现在做兼容实现*/ mounted?(): void | (() => void) | Promise<void>;
+  /** @lifecycle 将来会彻底移除，现在做兼容实现*/ updated?(): void | Promise<void>;
+  /** @lifecycle 将来会彻底移除，现在做兼容实现*/ unmounted?(): void | Promise<void>;
+  /** @lifecycle 将来会彻底移除，现在做兼容实现*/ shouldUpdate?(): boolean;
+  /** @lifecycle 将来会彻底移除，现在做兼容实现*/ render?(): TemplateResult | null | undefined;
+  #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) });
   };
 
-  /**@lifecycle */
-  updated?(): void | Promise<void>;
-  #updated = () => {
-    this.updated?.();
-  };
-
-  /**
-   * @lifecycle
-   *
-   * 卸载元素，但不一定会被垃圾回收，所以事件监听器需要手动清除，以免重复注册
-   */
-  unmounted?(): void | Promise<void>;
-
-  /**
-   * @private
-   * @final
-   * use `effect`
-   */
-  attributeChangedCallback() {
-    if (this.#isMounted) {
-      addMicrotask(this.#update);
-    }
-    return GemElement.#final;
-  }
-
   #disconnectStore?: (() => void)[];
-  #connectedCallback = () => {
+  #connectedCallback = async () => {
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
       return;
     }
+    this.#compat();
 
-    // 似乎这是最早的判断不在 `constructor` 中的地方
-    Reflect.set(this, constructorSymbol, false);
+    const { observedStores } = this.#metadata;
 
-    this.willMount?.();
-    const { observedStores, rootElement } = this.constructor as typeof GemElement;
+    this.#isConnected = true;
     this.#disconnectStore = observedStores?.map((store) => connect(store, this.#update));
-    this.#render();
+    this.#render(this.#renderItem);
     this.#isMounted = true;
-    this.#unmountCallback = this.mounted?.();
+    this.#clearStyle = this.#prepareStyle();
+    // 等待所有元素的样式被应用，再执行回调
+    // 这让 mounted 和 effect 回调和其他回调一样保持一样的异步行为
+    await Promise.resolve();
     this.#initEffect();
-    if (
-      rootElement &&
-      this.isConnected &&
-      (this.getRootNode() as ShadowRoot).host?.tagName !== rootElement.toUpperCase()
-    ) {
-      throw new GemError(`not allow current root type`);
-    }
   };
 
-  closestElement<K extends keyof HTMLElementTagNameMap>(tag: K): HTMLElementTagNameMap[K] | null;
-  closestElement<K extends abstract new (...args: any) => any>(constructor: K): InstanceType<K> | null;
-  closestElement<K extends abstract new (...args: any) => any>(constructorOrTag: K | string): Element | null {
-    const isConstructor = typeof constructorOrTag === 'function';
-    const tagName = typeof constructorOrTag === 'string' && constructorOrTag.toUpperCase();
-    const getRootElement = (ele: Element): Element | null => {
-      const rootEle = ele.parentElement || (ele.getRootNode() as ShadowRoot).host;
-      if (!rootEle) return null;
-      if (isConstructor) {
-        if (rootEle.constructor === constructorOrTag) {
-          return rootEle;
-        }
-      } else if (rootEle.tagName === tagName) {
-        return rootEle;
-      }
-      return getRootElement(rootEle);
-    };
-    return getRootElement(this);
-  }
-
   /**
    * @private
    * @final
-   * use `mounted`; 允许手动调用 `connectedCallback` 以清除装饰器定义的字段
+   * use `mounted`
    */
   connectedCallback() {
-    if (this.isConnected && this.#isAsync) {
-      asyncRenderTaskList.add(this.#connectedCallback);
+    if (this.#metadata.noBlocking) {
+      noBlockingTaskList.add(this.#connectedCallback);
     } else {
       this.#connectedCallback();
     }
@@ -469,178 +547,74 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       this.#isAppendReason = true;
       return;
     }
+    noBlockingTaskList.delete(this.#connectedCallback);
+    noBlockingTaskList.delete(this.#updateCallback);
     this.#isMounted = false;
     this.#disconnectStore?.forEach((disconnect) => disconnect());
-    execCallback(this.#unmountCallback);
-    this.unmounted?.();
-    this.#effectList = this.#clearEffect(this.#effectList);
-    this.#memoList = this.#clearEffect(this.#memoList);
+    // 是否要异步执行回调？
+    this.#effectList = clearEffect(this.#effectList);
+    this.#memoList = clearEffect(this.#memoList);
+    execCallback(this.#clearStyle);
     return GemElement.#final;
   }
 
-  #clearEffect = (list?: EffectItem<any>[]) => {
-    return list?.filter((e) => {
-      execCallback(e.preCallback);
-      e.initialized = false;
-      return e.inConstructor;
-    });
+  /**
+   * @helper
+   * 记录副作用回调和值；
+   * 回调到返回值如果是函数将再卸载时执行；
+   * 第一次执行时 `oldDeps` 为空；
+   *
+   * ```js
+   * class App extends GemElement {
+   *   mounted() {
+   *     this.effect(callback, () => [this.attrName]);
+   *   }
+   * }
+   * ```
+   * */
+  effect = <K = any[] | undefined>(callback: EffectCallback<K>, getDep?: K extends any[] ? () => K : undefined) => {
+    const effectItem: EffectItem<K> = {
+      callback,
+      getDep,
+      initialized: this.#isMounted,
+      fixed: !this.#isConnected,
+    };
+    // 已挂载时立即执行副作用，未挂载时等挂载后执行
+    if (this.#isMounted) {
+      effectItem.values = getDep?.() as K;
+      effectItem.preCallback = callback(effectItem.values);
+    }
+    this.#effectList.push(effectItem);
   };
-}
-
-const gemElementProxyMap = new PropProxyMap<GemElement>();
-
-export function defineAttribute(target: GemElement, prop: string, attr: string) {
-  const { booleanAttributes, numberAttributes } = target.constructor as typeof GemElement;
-  Object.defineProperty(target, prop, {
-    configurable: true,
-    get() {
-      // fix karma test
-      // 判断是否是自定义元素实例
-      if (!(initSymbol in this)) return;
-      const that = this as GemElement;
-      // 不能从 proxy 对象中读取值
-      const value = that.getAttribute(attr);
-      if (booleanAttributes?.has(attr)) {
-        return value === null ? false : true;
-      }
-      if (numberAttributes?.has(attr)) {
-        return Number(value);
-      }
-      return value || '';
-    },
-    set(v: string | null | undefined | number | boolean) {
-      const that = this as GemElement;
-      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?.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: GemElement,
-  prop: string,
-  event?: string,
-  eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>,
-) {
-  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 as GemElement;
-      const proxy = gemElementProxyMap.get(that);
-      if (v !== proxy[prop]) {
-        if (event) {
-          proxy[prop] = v?.[isEventHandleSymbol]
-            ? v
-            : (detail: any, options: any) => {
-                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: GemElement, prop: string, ref: string) {
-  Object.defineProperty(target, prop, {
-    configurable: true,
-    get() {
-      const proxy = gemElementProxyMap.get(this);
-      let refobject = proxy[prop];
-      if (!refobject) {
-        const that = this as GemElement;
-        const ele = that.shadowRoot || that;
-        refobject = {
-          get ref() {
-            return ref;
-          },
-          get element() {
-            const gemReflects = [...ele.querySelectorAll<GemReflectElement>('[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: GemElement, prop: string, state: string) {
-  Object.defineProperty(target, prop, {
-    configurable: true,
-    get() {
-      const that = this as GemElement;
-      const { states } = that.internals;
-      return states?.has(state);
-    },
-    set(v: boolean) {
-      const that = this as GemElement;
-      const { states } = that.internals;
-      if (v) {
-        states?.add(state);
-      } else {
-        states?.delete(state);
-      }
-    },
-  });
-}
-
-export const nativeDefineElement = customElements.define.bind(customElements);
-customElements.define = (name: string, cls: CustomElementConstructor, options?: ElementDefinitionOptions) => {
-  if (cls.prototype instanceof GemElement) {
-    const { observedAttributes, observedProperties, defineEvents, defineCSSStates, defineRefs } =
-      cls as unknown as typeof GemElement;
-    observedAttributes?.forEach((attr) => defineAttribute(cls.prototype, kebabToCamelCase(attr), attr));
-    observedProperties?.forEach((prop) => defineProperty(cls.prototype, prop));
-    defineEvents?.forEach((event) => defineProperty(cls.prototype, kebabToCamelCase(event), event));
-    defineCSSStates?.forEach((state) => defineCSSState(cls.prototype, kebabToCamelCase(state), state));
-    defineRefs?.forEach((ref) => defineRef(cls.prototype, kebabToCamelCase(ref), ref));
-  }
-
-  nativeDefineElement(name, cls, options);
-};
-
-declare global {
-  interface Window {
-    __GEM_DEVTOOLS__HOOK__?: (typeof GemExports & typeof VersionExports) | Record<string, never>;
-  }
-}
+  /**
+   * @helper
+   * 在 `render` 前执行回调；
+   * 和 `effect` 一样接受依赖数组参数，在 `constructor` 中使用;
+   * 第一次执行时 `oldDeps` 为空；
+   *
+   * ```js
+   * class App extends GemElement {
+   *   constructor() {
+   *     super();
+   *     this.memo(() => {
+   *       this.a = exec(this.attrName);
+   *     }), () => [this.attrName]);
+   *   }
+   * }
+   * ```
+   * */
+  memo = <K = any[] | undefined>(callback: EffectCallback<K>, getDep?: K extends any[] ? () => K : undefined) => {
+    this.#memoList.push({
+      callback,
+      getDep,
+      fixed: !this.#isConnected,
+    });
+  };
 
-if (window.__GEM_DEVTOOLS__HOOK__) {
-  Object.assign(window.__GEM_DEVTOOLS__HOOK__, { ...GemExports, ...VersionExports });
+  /**
+   * @helper
+   * async
+   */
+  update = () => addMicrotask(this.#update);
 }