@mantou/gem 2.2.1 → 2.2.3

package/src/lib/decorators.ts

@@ -1,3 +1,5 @@
+// biome-ignore-all lint/plugin/no_this_effect: 定义装饰器
+
 import type { TemplateResult } from './lit-html';
 import type { Metadata, Sheet } from './reactive';
 import { _createTemplate, _RenderErrorEvent, GemElement, render, UpdateToken } from './reactive';
@@ -150,11 +152,11 @@ function decoratorAttr<T extends GemElement>(context: ClassFieldDecoratorContext
 /**
  * 定义一个响应式的 attribute，驼峰字段名将自动映射到烤串 attribute，默认值为空字符串；不要覆盖定义
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @attribute attr: string;
- *  }
+ * class App extends GemElement {
+ *   @​attribute attr: string;
+ * }
  * ```
  */
 export function attribute<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, string>) {
@@ -170,11 +172,11 @@ export function numattribute<T extends GemElement>(_: undefined, context: ClassF
 /**
  * 定义一个响应式的 property，注意值可能为 `undefined`；不要覆盖定义
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @property prop: Data | undefined;
- *  }
+ * class App extends GemElement {
+ *   @​property prop: Data | undefined;
+ * }
  * ```
  */
 export function property<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T>) {
@@ -196,14 +198,14 @@ export function property<T extends GemElement>(_: undefined, context: ClassField
 /**
  * 依赖 `GemElement.memo`
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @memo(() => [])
- *    get data() {
- *      return 1;
- *    }
- *  }
+ * class App extends GemElement {
+ *   @​memo(() => [])
+ *   get data() {
+ *     return 1;
+ *   }
+ * }
  * ```
  */
 export function memo<T extends GemElement, V = any, K = any[] | undefined>(
@@ -240,14 +242,14 @@ export function memo<T extends GemElement, V = any, K = any[] | undefined>(
  * - 方法执行在字段前面
  * - 如果没有 oldValue，在为首次执行
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @effect(() => [])
- *    #fetchData(newValue, oldValue) {
- *      console.log('fetch')
- *    }
- *  }
+ * class App extends GemElement {
+ *   @​effect(() => [])
+ *   #fetchData(newValue, oldValue) {
+ *     console.log('fetch')
+ *   }
+ * }
  * ```
  */
 export function effect<T extends GemElement, V extends (depValues: K, oldDepValues?: K) => any, K = any[] | undefined>(
@@ -331,11 +333,11 @@ function defineCSSState(target: GemElementPrototype, prop: string, stateStr: str
  * 重新赋值转换 css 伪类
  * 将来也可能用于 IDE 识别
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @state state: boolean;
- *  }
+ * class App extends GemElement {
+ *   @​state state: boolean;
+ * }
  * ```
  */
 export function state<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
@@ -374,12 +376,12 @@ function defineStaticField(
 /**
  * 定义一个内部 slot，默认值即为字段名，不能使用全局属性 `slot`
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @slot slot: string;
- *    @slot static slot: string;
- *  }
+ * class App extends GemElement {
+ *   @​slot slot: string;
+ *   @​slot static slot: string;
+ * }
  * ```
  */
 export function slot(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
@@ -391,12 +393,12 @@ export function slot(_: undefined, context: ClassFieldDecoratorContext<any, stri
 /**
  * 定义一个内部 part，默认值即为字段名，不能使用全局属性 `part`
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @part part: string;
- *    @part static part: string;
- *  }
+ * class App extends GemElement {
+ *   @​part part: string;
+ *   @​part static part: string;
+ * }
  * ```
  */
 export function part(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
@@ -421,11 +423,11 @@ export type Emitter<T = any> = ((
  * 定义一个事件发射器，类似 `HTMLElement.click`，
  * 调用时将同步发送一个和字段名称的烤串式格式的自定义事件
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @emitter load: Function;
- *  }
+ * class App extends GemElement {
+ *   @​emitter load: Function;
+ * }
  * ```
  */
 export function emitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
@@ -453,10 +455,10 @@ function defineEmitter<T extends GemElement>(
 /**
  * 分配一个构造的样式表，前面的优先级越高（因为装饰器是越近越早执行）
  *
- * For example
+ * @example
  * ```ts
- *  @adoptedStyle(stylesheet)
- *  class App extends GemElement {}
+ * ​@​adoptedStyle(stylesheet)
+ * class App extends GemElement {}
  * ```
  */
 export function adoptedStyle(sheet: Sheet<unknown>) {
@@ -468,10 +470,10 @@ export function adoptedStyle(sheet: Sheet<unknown>) {
 /**
  * 链接一个 store，当 store 更新时更新元素
  *
- * For example
+ * @example
  * ```ts
- *  @connectStore(store)
- *  class App extends GemElement {}
+ * ​@​connectStore(store)
+ * class App extends GemElement {}
  * ```
  */
 export function connectStore(store: Store<any>) {
@@ -480,15 +482,10 @@ export function connectStore(store: Store<any>) {
   };
 }
 
-export function shadow({
-  mode = 'open',
-  serializable = true,
-  delegatesFocus,
-  slotAssignment,
-}: Partial<ShadowRootInit> = {}) {
+export function shadow({ mode = 'open', serializable = true, ...rest }: Partial<ShadowRootInit> = {}) {
   return (_: any, context: ClassDecoratorContext) => {
     const metadata = context.metadata as Metadata;
-    assign(metadata, { mode, serializable, delegatesFocus, slotAssignment });
+    assign(metadata, { mode, serializable, ...rest });
   };
 }
 
@@ -523,10 +520,10 @@ export function aria(info: Metadata['aria']) {
 /**
  * 定义自定义元素
  *
- * For example
+ * @example
  * ```ts
- *  @customElement('my-element')
- *  class App extends GemElement {}
+ * ​@​customElement('my-element')
+ * class App extends GemElement {}
  * ```
  */
 export function customElement(name: string) {

package/src/lib/element.ts

@@ -14,7 +14,6 @@ export * from './reactive';
 export { repeat } from './repeat';
 
 declare global {
-  // eslint-disable-next-line no-var
   var __GEM_DEVTOOLS__HOOK__:
     | (typeof reactiveExports & typeof decoratorsExports & typeof storeExports & typeof versionExports)
     | Record<string, never>

package/src/lib/history.ts

@@ -188,7 +188,6 @@ const gemTitleStore = createStore({ defaultTitle: document.title, url: '', title
 const HISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
 
 declare global {
-  // eslint-disable-next-line no-var
   var _GEMHISTORY: typeof HISTORY | undefined;
 }
 
@@ -269,10 +268,10 @@ if (!globalThis._GEMHISTORY) {
     if (!paramsMap.has(newState.$key)) {
       const { pathname, search, hash } = location;
       paramsMap.set(newState.$key, {
-        path: pathname,
+        path: getInternalPath(pathname),
         query: new QueryString(search),
         hash: decodeURIComponent(hash),
-        title: newState.$title, // document.title 是导航前的
+        title: gemTitleStore.title || newState.$title, // document.title 是导航前的
         data: newState,
       });
     }
@@ -316,4 +315,4 @@ if (!globalThis._GEMHISTORY) {
 }
 
 const { history, titleStore, basePathStore } = globalThis._GEMHISTORY;
-export { history, titleStore, basePathStore };
+export { basePathStore, history, titleStore };

package/src/lib/lit-html.ts

@@ -1,3 +1,6 @@
+/** biome-ignore-all lint/complexity/noCommaOperator: lit */
+/** biome-ignore-all lint/style/useTemplate: lit */
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -371,6 +374,7 @@ const getTemplateHtml = (strings: TemplateStringsArray, type: ResultType): [Trus
 
 /** @internal */
 export type { Template };
+
 class Template {
   /** @internal */
   el!: HTMLTemplateElement;
@@ -544,15 +548,13 @@ function resolveDirective(
   return value;
 }
 
-export type { TemplateInstance };
 /**
  * An updateable instance of a Template. Holds references to the Parts used to
  * update the template instance.
  */
-class TemplateInstance implements Disconnectable {
+export class TemplateInstance implements Disconnectable {
   _$template: Template;
   _$parts: Array<Part | undefined> = [];
-  /** @internal */
   _$conditions: ConditionChain[] = [];
 
   /** @internal */
@@ -653,12 +655,13 @@ class TemplateInstance implements Disconnectable {
   }
 }
 
-class ConditionChain {
+export class ConditionChain {
   readonly mark: Comment;
   readonly list: { ele: Element; idx?: number }[];
 
   constructor(ele: Element, idx: number) {
     const mark = createMarker();
+    (mark as any)._$chain = this;
     ele.before(mark);
     this.mark = mark;
     this.list = [{ ele, idx }];
@@ -1009,6 +1012,7 @@ export interface RootPart extends ChildPart {
 }
 
 export type { AttributePart };
+
 class AttributePart implements Disconnectable {
   readonly type: typeof ATTRIBUTE_PART | typeof PROPERTY_PART | typeof BOOLEAN_ATTRIBUTE_PART | typeof EVENT_PART =
     ATTRIBUTE_PART;
@@ -1132,6 +1136,7 @@ class AttributePart implements Disconnectable {
 }
 
 export type { PropertyPart };
+
 class PropertyPart extends AttributePart {
   override readonly type = PROPERTY_PART;
 
@@ -1142,6 +1147,7 @@ class PropertyPart extends AttributePart {
 }
 
 export type { BooleanAttributePart };
+
 class BooleanAttributePart extends AttributePart {
   override readonly type = BOOLEAN_ATTRIBUTE_PART;
 
@@ -1154,6 +1160,7 @@ class BooleanAttributePart extends AttributePart {
 type EventListenerWithOptions = EventListenerOrEventListenerObject & Partial<AddEventListenerOptions>;
 
 export type { EventPart };
+
 class EventPart extends AttributePart {
   override readonly type = EVENT_PART;
 
@@ -1189,8 +1196,7 @@ class EventPart extends AttributePart {
   }
 }
 
-export type { ElementPart };
-class ElementPart implements Disconnectable {
+export class ElementPart implements Disconnectable {
   readonly type = ELEMENT_PART;
 
   /** @internal */
@@ -1244,6 +1250,7 @@ class ElementPart implements Disconnectable {
 export const createRef = <T = Element>() => new Ref<T>();
 
 export type { Ref };
+
 class Ref<T = Element> {
   value?: T;
 }

package/src/lib/reactive.ts

@@ -1,7 +1,19 @@
+// biome-ignore-all lint/plugin/no_this_effect: 兼容生命周期
+
 import type * as Lit from './lit-html';
 import type { Store } from './store';
 import { connect } from './store';
-import { addListener, addMicrotask, createUpdater, GemError, isArrayChange, LinkedList, randomStr, raw } from './utils';
+import {
+  addListener,
+  addMicrotask,
+  createUpdater,
+  GemError,
+  isArrayChange,
+  LinkedList,
+  randomStr,
+  raw,
+  type Updater,
+} from './utils';
 
 export let html = ((arr: TemplateStringsArray, ...args: any[]) =>
   raw(arr, ...args.map((e) => (e instanceof Element ? e.outerHTML : e)))) as unknown as typeof Lit.html;
@@ -13,6 +25,14 @@ export function setEngine(h: typeof Lit.html, r: typeof Lit.render) {
   render = r;
 }
 
+let hydrationEngine = (_value: unknown, _container: HTMLElement | DocumentFragment): Lit.RootPart | undefined => {
+  return;
+};
+
+export function setHydrationEngine(engine: typeof hydrationEngine) {
+  hydrationEngine = engine;
+}
+
 const { assign, defineProperty } = Object;
 
 // https://github.com/tc39/proposal-decorator-metadata
@@ -20,12 +40,16 @@ defineProperty(Symbol, 'metadata', { value: Symbol.for('Symbol.metadata') });
 
 const execCallback = (fun: any) => typeof fun === 'function' && fun();
 
+const ssrNativeQueueMicrotask = (globalThis as any).nQM;
+
 // 读取构造样式表，跨多个 gem 工作
 export const SheetToken = Symbol.for('gem@sheetToken');
+export type SheetTokenType = typeof SheetToken;
 // 更新元素，跨多个 gem 工作
 export const UpdateToken = Symbol.for('gem@update');
 
 const BoundaryCSSState = 'gem-style-boundary';
+const ElementCSSState = 'gem-element';
 
 /**@internal */
 export const _RenderErrorEvent = 'gem@render-error';
@@ -67,7 +91,7 @@ class GemCSSSheet {
   // 不需要 GC
   #record = new Map<any, GemCSSStyleSheet>();
   #used = new Map<GemCSSStyleSheet, string>();
-  getStyle(host?: HTMLElement) {
+  getStyle(host?: HTMLElement, isEleTheme?: boolean) {
     const isLight = host && !(host as GemElement).internals?.shadowRoot;
 
     // 对同一类 dom 只使用同一个样式表
@@ -86,7 +110,7 @@ class GemCSSSheet {
       if (isLight) {
         // light dom 嵌套时需要选择子元素
         // `> *` 实际上是多范围？是否存在性能问题
-        scope = `@scope (${host.tagName}) to (:state(${BoundaryCSSState}) > *)`;
+        scope = isEleTheme ? '@scope' : `@scope (${host.tagName}) to (:state(${BoundaryCSSState}) > *)`;
         // 不能使用 @layer，两个 @layer 不能覆盖，只有顺序起作用
         // 所以外部不能通过元素名称选择器来覆盖样式，除非样式在之前插入（会自动反转应用到尾部， see `appleCSSStyleSheet`）
         style = `${scope}{ ${style} }`;
@@ -143,16 +167,13 @@ export function css<T extends Record<string, string>>(
       // 对于已经有 `-` 的保留原始 key，支持覆盖修改
       // :scope 下可以写嵌套样式 &:xxx，:host() 下不行（子内容可以）
       sheet[key] = isScope || key.includes('-') ? key : `${key}-${randomStr()}`;
-      style += `${isScope ? ':where(:scope:not([hidden])),:host(:where(:not([hidden])))' : `.${sheet[key]}`} {${rules[key]}}`;
+      style += `${isScope ? ':where(&:not([hidden])),:host(:where(:not([hidden])))' : `.${sheet[key]}`} {${rules[key]}}`;
     });
   }
   styleSheet.setContent(style);
   return sheet as Sheet<T>;
 }
 
-// TODO: move to transform?
-export const isSSR = typeof process !== 'undefined';
-
 const updateStyleSheets = (map: Map<CSSStyleSheet, number>, sheets: CSSStyleSheet[], value: number) => {
   let needUpdate = false;
   sheets.forEach((e) => {
@@ -164,7 +185,8 @@ const updateStyleSheets = (map: Map<CSSStyleSheet, number>, sheets: CSSStyleShee
   });
   if (needUpdate) {
     // 避免重复更新，例如 list 元素增删，全 light dom 时 document 更新
-    addMicrotask(rootUpdateFnMap.get(map)!, isSSR);
+    // 在 SSR 中应该区别 effect 强制执行
+    addMicrotask(rootUpdateFnMap.get(map)!, ssrNativeQueueMicrotask);
   }
 };
 
@@ -175,7 +197,7 @@ const appleCSSStyleSheet = (ele: HTMLElement, sheets: CSSStyleSheet[]) => {
     rootStyleSheetInfo.set(root, map);
     rootUpdateFnMap.set(map, () => {
       // 先找到外部样式表
-      const newSheets = root.adoptedStyleSheets.filter((e) => !map.has(e));
+      const newSheets = (root.adoptedStyleSheets || []).filter((e) => !map.has(e));
       map.forEach((count, sheet) => count && newSheets.push(sheet));
       // 外层元素的样式要放到最后，以提升优先级，但是只考虑第一次出现样式表的位置
       root.adoptedStyleSheets = newSheets.reverse();
@@ -189,7 +211,7 @@ const appleCSSStyleSheet = (ele: HTMLElement, sheets: CSSStyleSheet[]) => {
 };
 
 /**必须使用在字段中，否则会读取到错误的实例 */
-export let createState: <T>(initState: T) => ReturnType<typeof createUpdater<T>>;
+export let createState: <T>(initState: T) => Updater<T>;
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
@@ -234,6 +256,10 @@ export let _createTemplate: (ele: GemElement, item: RenderItem) => void;
 export type Metadata = Partial<ShadowRootInit> & {
   /** 内容可被外部样式化 */
   penetrable?: boolean;
+  /**
+   * 这个属性用来解决同步渲染长列表，且渲染过程有大量计算阻塞主线程
+   * 否则应该考虑 `content-visibility: auto` 和虚拟列表
+   */
   noBlocking?: boolean;
   aria?: Partial<
     ARIAMixin & {
@@ -258,7 +284,7 @@ export type Metadata = Partial<ShadowRootInit> & {
 // global render task pool
 const noBlockingTaskList = new LinkedList<() => void>();
 const tick = (timeStamp = performance.now()) => {
-  if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
+  if (performance.now() > timeStamp + 50) return requestAnimationFrame(tick);
   const task = noBlockingTaskList.get();
   if (task) {
     task();
@@ -269,12 +295,28 @@ noBlockingTaskList.addEventListener('start', () => addMicrotask(tick));
 
 let currentConstructGemElement: GemElement;
 
+type KebabCase<S extends string> = S extends `${infer Head}${infer Tail}`
+  ? Tail extends Uncapitalize<Tail>
+    ? `${Lowercase<Head>}${KebabCase<Tail>}`
+    : `${Lowercase<Head>}-${KebabCase<Tail>}`
+  : S;
+
 export abstract class GemElement extends HTMLElement {
+  /** 用来判断 attribute 是否存在，但是 length/item 将读取到 NamedNodeMap */
+  declare readonly attributes: NamedNodeMap & {
+    [K in keyof this as K extends keyof NamedNodeMap
+      ? never
+      : K extends keyof GemElement
+        ? never
+        : K extends Uppercase<string & K>
+          ? never
+          : `${KebabCase<string & K>}`]?: Attr;
+  };
   #renderRoot: HTMLElement | ShadowRoot;
   #internals: ElementInternals & {
     // 有别于 adoptedStyleSheets，用来定义单个实例样式
     sheets: GemCSSStyleSheet[];
-    stateList: ReturnType<typeof createState<any>>[];
+    stateList: Updater<any>[];
   };
   #effectList: EffectItem<any>[] = [];
   #memoList: EffectItem<any>[] = [];
@@ -297,13 +339,15 @@ export abstract class GemElement extends HTMLElement {
       const state = createUpdater(initState, (payload) => {
         const effect = ele.#effectList.at(0);
         // https://github.com/mantou132/gem/issues/203
-        if (ele.#isMounted && effect && !effect.initialized) {
-          throw new GemError(`Do't set state sync before insert the DOM`);
+        // SSR 不会执行 initEffect，应该跳过
+        if (!ssrNativeQueueMicrotask && ele.#isMounted && effect && !effect.initialized) {
+          throw new GemError(`Don't set state sync before insert the DOM`);
         }
         assign(state, payload);
         // 避免无限刷新
         // 挂载前 set state 不应该触发更新
-        if (!ele.#rendering && ele.#isMounted) addMicrotask(ele.#update);
+        // SSR 中渲染 <gem-route>，其他情况的 SSR 应该也可以执行
+        if (!ele.#rendering && ele.#isMounted) addMicrotask(ele.#update, ssrNativeQueueMicrotask);
       });
       ele.#internals.stateList.push(state);
       return state;
@@ -314,13 +358,13 @@ export abstract class GemElement extends HTMLElement {
   constructor() {
     super();
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
     currentConstructGemElement = this;
 
-    const { mode, serializable, delegatesFocus, slotAssignment, aria } = this.#metadata;
+    const { aria, mode, delegatesFocus, ...rest } = this.#metadata;
     const { focusable, ...internalsAria } = aria || {};
 
-    this.#renderRoot = !mode ? this : this.attachShadow({ mode, serializable, delegatesFocus, slotAssignment });
+    // 这里认为 rest 不会有自定义字段和 ShadowRootInit 参数冲突
+    this.#renderRoot = !mode ? this : this.shadowRoot || this.attachShadow({ mode, delegatesFocus, ...rest });
     this.#internals = this.attachInternals() as GemElement['internals'];
     this.#internals.stateList = [];
     this.#internals.sheets = [];
@@ -385,16 +429,8 @@ export abstract class GemElement extends HTMLElement {
       const isLight = this.#renderRoot === this;
       const temp = item ? item.render() : isLight ? undefined : html`<slot></slot>`;
       if (temp === undefined) return;
-      render(
-        temp !== null
-          ? temp
-          : isLight
-            ? // prettier-ignore
-              html`<style>@scope{:scope{display:none !important}}</style>`
-            : // prettier-ignore
-              html`<style>:host{display:none !important}</style>`,
-        this.#renderRoot,
-      );
+      const r = temp !== null ? temp : html`<style>${isLight ? '@scope' : ':host'}{&{display:none!important;}}</style>`;
+      hydrationEngine(r, this.#renderRoot) || render(r, this.#renderRoot);
     } catch (err) {
       this.dispatchEvent(new CustomEvent(_RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
       throw err;
@@ -483,6 +519,8 @@ export abstract class GemElement extends HTMLElement {
 
     const { observedStores, mode, penetrable } = this.#metadata;
 
+    // https://github.com/w3c/csswg-drafts/issues/10407#issuecomment-4418616596
+    this.#internals.states.add(ElementCSSState);
     // 有渲染函数的 light dom 应该添加边界，防止内容被外部样式化
     // 如果渲染内容需要应用外部样式，需要手动 `delete` 边界
     if (!mode && this.#renderList.length && !penetrable) this.#internals.states.add(BoundaryCSSState);

package/src/lib/store.ts

@@ -1,12 +1,13 @@
-import { addMicrotask, createUpdater } from './utils';
+import { addMicrotask, createUpdater, type Updater } from './utils';
 
-export type Store<T = any> = ReturnType<typeof createUpdater<T>>;
+export type Store<T = any> = Updater<T>;
 
 /**@internal */
 export const _StoreListenerMap = new WeakMap<Store<any>, Set<() => void>>();
 
 export function createStore<T = any>(originStore: T) {
   const store = createUpdater(originStore, (value?: Partial<T>) => {
+    // biome-ignore lint/plugin/assign: 未知类型
     Object.assign(store, value);
     _StoreListenerMap.get(store)?.forEach((func) => addMicrotask(func));
   });

package/src/lib/utils.ts

@@ -1,17 +1,17 @@
 const { assign, fromEntries, entries, keys } = Object;
 
+// 用原生 Chrome 找不到调用栈
+function queueMicrotask(cb: () => void) {
+  Promise.resolve().then(cb);
+}
+
 const microtaskSet = new Set<() => void>();
-export function addMicrotask(func: () => void, isNodeForceMicrotask?: boolean) {
+export function addMicrotask(func: () => void, method = queueMicrotask) {
   if (microtaskSet.has(func)) return;
-  const next = () => {
+  method(() => {
     microtaskSet.delete(func);
     func();
-  };
-  if (isNodeForceMicrotask) {
-    process.nextTick(next);
-  } else {
-    Promise.resolve().then(next);
-  }
+  });
   microtaskSet.add(func);
 }
 
@@ -42,6 +42,8 @@ export function createUpdater<T, Fn = (payload?: Partial<T>) => any>(initState:
   return state as Fn & Omit<OverrideFn, keyof T> & T;
 }
 
+export type Updater<T, Fn = (payload?: Partial<T>) => any> = ReturnType<typeof createUpdater<T, Fn>>;
+
 // 不编码 hash 用于比较
 export function absoluteLocation(currentPath = '', relativePath = '') {
   const { pathname, search, hash } = new URL(relativePath, location.origin + currentPath);
@@ -157,6 +159,11 @@ export class LinkedList<T = any> extends EventTarget {
     return deleteItem;
   }
 
+  clear() {
+    this.#map.clear();
+    this.#firstItem = this.#lastItem = undefined;
+  }
+
   /** 获取头部元素，会从链表删除 */
   get(): T | undefined {
     const firstItem = this.#firstItem;

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '2.2.1';
+export const version = '2.2.3';

package/src/test/gem-element/advance.test.ts

@@ -341,7 +341,7 @@ describe('gem element 继承', () => {
     });
     el.sayHi();
     await Promise.resolve();
-    expect(window.name).to.equal(name + '21');
+    expect(window.name).to.equal(`${name}21`);
   });
 });
 @customElement('render-empty')

package/src/test/gem-element/basic.test.ts

@@ -108,8 +108,7 @@ describe('基本 gem element 测试', () => {
     expect(el.disabled).to.equal(true);
     expect(el.count).to.equal(2);
     expect(el.shadowRoot?.textContent).to.equal('attr: value, disabled: true, count: 2, prop: , state: ');
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-expect-error
     el.attr = null;
     await Promise.resolve();
     expect(el.hasAttribute('attr')).to.equal(false);

package/src/test/utils.test.ts

@@ -110,7 +110,7 @@ describe('utils 测试', () => {
     });
     expect(cssSheet.scroll.startsWith('scroll')).to.true;
     const rules = cssSheet[SheetToken].getStyle().cssRules;
-    expect(rules.item(0).selectorText).to.equal(':where(:scope:not([hidden])), :host(:where(:not([hidden])))');
+    expect(rules.item(0).selectorText).to.equal(':where(&:not([hidden])), :host(:where(:not([hidden])))');
     expect(rules.item(1).selectorText.startsWith('.scroll')).to.true;
     expect(rules.item(1).style.background).to.equal('red');
     expect(rules.item(1).cssRules.item(0).selectorText).to.equal('&:hover *');