@mantou/gem 2.2.1 → 2.2.2

package/src/helper/ssr-shim.ts

@@ -1,7 +1,6 @@
 /// 简单的垫片，让 GemElement 服务端渲染不报错
 /// 渲染时将忽略 GemElement 内容
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 if (typeof window === 'undefined') {
   const getAny = () => {

package/src/helper/theme.ts

@@ -2,9 +2,10 @@ import type { GemElement, Sheet } from '../lib/reactive';
 import { css, SheetToken } from '../lib/reactive';
 import type { Store } from '../lib/store';
 import { connect, createStore } from '../lib/store';
+import type { Updater } from '../lib/utils';
 import { camelToKebabCase, createUpdater, randomStr } from '../lib/utils';
 
-export type Theme<T> = ReturnType<typeof createUpdater<T>> &
+export type Theme<T> = Updater<T> &
   Sheet<unknown> & {
     [K in keyof T as K extends `${string}Color`
       ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
@@ -52,7 +53,7 @@ function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, pr
       }
       rules += `${props[key]}:${store[key]};`;
     });
-    styleSheet.setContent(`:scope,:host{${rules}}`);
+    styleSheet.setContent(`&,:host{${rules}}`);
   };
   updateContent();
   connect(store, () => {
@@ -81,19 +82,33 @@ export function createOverrideTheme<T extends Record<string, unknown>>(theme: Th
   return createThemeFromProps(themeObj, getThemeProps(theme));
 }
 
+/**
+ * 返回一个主题对象，但同时又是一个装饰器函数，用来装饰一个主题更新函数
+ *
+ * @example
+ * ```ts
+ * const elementTheme = createDecoratorTheme({ color: '' });
+ * class MyElement {
+ *   @​elementTheme()
+ *   #theme = () => ({ color: this.color });
+ * }
+ * ```
+ * */
 export function createDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const themeAsKeys = createThemeFromProps<T>(themeObj);
+  const themeAsKeys = createThemeFromProps(themeObj);
   const props = getThemeProps(themeAsKeys);
-  const update =
-    <E extends GemElement, V extends () => T, K = any[] | undefined>(
-      getDep?: K extends readonly any[] ? (instance: E) => K : undefined,
-    ) =>
-    (_: any, { addInitializer, access }: ClassFieldDecoratorContext<E, V> | ClassMethodDecoratorContext<E, V>) => {
+  const update = <E extends GemElement, V extends () => T, K = any[] | undefined>(
+    getDep?: K extends readonly any[] ? (instance: E) => K : undefined,
+  ) => {
+    type Ctx = ClassFieldDecoratorContext<E, V> | ClassMethodDecoratorContext<E, V>;
+    return (_: any, { addInitializer, access }: Ctx) => {
       addInitializer(function (this: E) {
         const theme = createThemeFromProps({ ...themeObj }, props);
-        this.internals.sheets.push(theme[SheetToken].getStyle(this));
+        this.internals.sheets.push(theme[SheetToken].getStyle(this, true));
         this.memo(() => theme(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
       });
     };
-  return createUpdater(themeAsKeys, update) as ReturnType<typeof createUpdater<typeof themeAsKeys, typeof update>>;
+  };
+  // 不知道为什么 `as` 能解决外部 `SheetToken` 不能命名的问题
+  return createUpdater(themeAsKeys, update) as Updater<Theme<T>, typeof update>;
 }

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>) {
@@ -523,10 +525,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

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;
@@ -20,8 +32,11 @@ 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');
 
@@ -67,7 +82,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 +101,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 +158,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 +176,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);
   }
 };
 
@@ -189,7 +202,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;
@@ -269,12 +282,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 +326,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,7 +345,6 @@ 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;
@@ -386,13 +416,7 @@ export abstract class GemElement extends HTMLElement {
       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>`,
+        temp !== null ? temp : html`<style>${isLight ? '@scope' : ':host'}{&{display:none!important;}}</style>`,
         this.#renderRoot,
       );
     } catch (err) {

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,2 @@
-export const version = '2.2.1';
+// Do not modify manually
+export const version = '0.0.0';

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 *');