@mantou/gem 2.2.0 → 2.2.2

package/src/elements/link.ts

@@ -1,4 +1,4 @@
-import { GemLinkElement, GemActiveLinkElement } from './base/link';
+import { GemActiveLinkElement, GemLinkElement } from './base/link';
 
 export * from './base/link';
 

package/src/elements/route.ts

@@ -1,4 +1,4 @@
-import { GemRouteElement, GemLightRouteElement } from './base/route';
+import { GemLightRouteElement, GemRouteElement } from './base/route';
 
 export * from './base/route';
 

package/src/helper/hmr.ts

@@ -0,0 +1,305 @@
+import { attribute, boolattribute, emitter, numattribute, property, state } from '../lib/decorators';
+import { GemElement, type Metadata, UpdateToken } from '../lib/reactive';
+import type { Store } from '../lib/store';
+import { Logger } from './logger';
+
+const logger = new Logger('HMR');
+
+const nativeDefineElement = window.customElements.define.bind(window.customElements);
+
+const cache = new Map<string, Element[]>();
+function updateElement(name: string, fn: (ele: Element) => void) {
+  if (!cache.has(name)) {
+    const elements = [];
+    const temp: Element[] = [document.documentElement];
+    while (temp.length) {
+      const element = temp.pop()!;
+      if (element.tagName.toLowerCase() === name) elements.push(element);
+      temp.push(...[...element.children, ...(element.shadowRoot?.children || [])].reverse());
+    }
+    cache.set(name, elements);
+  }
+  const elements = cache.get(name)!;
+  if (elements.length === 0) {
+    const ele = document.createElement(name);
+    Element.prototype.remove.apply(ele);
+    fn(ele);
+  } else {
+    elements.forEach(fn);
+  }
+  queueMicrotask(() => cache.delete(name));
+}
+
+function getMetadata(cons: any): Metadata {
+  return (cons as any)[Symbol.metadata] || {};
+}
+
+function getHmrMethodKeys(obj: any) {
+  return Object.getOwnPropertyNames(obj).filter((key) => key.startsWith('_hmr_'));
+}
+
+/** 不支持修改 store */
+function checkMetadataNeedReload({ mode, penetrable, noBlocking, observedStores }: Metadata, newMetadata: Metadata) {
+  const stringifyStores = (stores?: Store<any>[]) =>
+    JSON.stringify(
+      stores?.map((store) => JSON.stringify({ ...store }, (_, v) => (typeof v === 'function' ? v.toString() : v))),
+    );
+  if (
+    mode !== newMetadata.mode ||
+    penetrable !== newMetadata.penetrable ||
+    noBlocking !== newMetadata.noBlocking ||
+    stringifyStores(observedStores) !== stringifyStores(newMetadata.observedStores)
+  ) {
+    return true;
+  }
+}
+
+/** 不支持删减函数字段，因为原函数可能已经被绑定 */
+function checkClassNeedReload(existed: CustomElementConstructor, newClass: CustomElementConstructor) {
+  if (
+    getHmrMethodKeys(existed).join() !== getHmrMethodKeys(newClass).join() ||
+    getHmrMethodKeys(existed.prototype).join() !== getHmrMethodKeys(newClass.prototype).join()
+  ) {
+    return true;
+  }
+}
+
+/** 不支持删减实例其他字段，因为新实例总是使用老 Class 定义 */
+function checkFieldsNeedReload({ instanceFields }: ReturnType<typeof getFields>) {
+  if (instanceFields.other?.add?.length || instanceFields.other?.remove?.length) {
+    return true;
+  }
+}
+
+function diffArr<T>(oldList: T[], newList: T[], fn: (i: T) => string = (e) => String(e)) {
+  const getMap = (list: T[]) => new Map(list.map((e) => [fn(e), e]));
+  const oldMap = getMap(oldList);
+  const newMap = getMap(newList);
+  const result = { remove: [] as T[], add: [] as T[], some: [] as T[], all: [] as T[] };
+  getMap([...oldList, ...newList]).forEach((e, k) => {
+    result.all.push(e);
+    if (newMap.has(k) && oldMap.has(k)) {
+      result.some.push(e);
+    } else if (!newMap.has(k)) {
+      result.remove.push(e);
+    } else if (!oldMap.has(k)) {
+      result.add.push(e);
+    }
+  });
+  return result;
+}
+
+function diffRecord<T>(oldRecord: Partial<Record<string, T[]>>, newRecord: Partial<Record<string, T[]>>) {
+  const oldKeys = Object.keys(oldRecord);
+  const newKeys = Object.keys(newRecord);
+  return diffArr(oldKeys, newKeys);
+}
+
+type HasFieldsRecordClass = { _defined_fields_?: [string, string, boolean][] };
+function getFields(existed: CustomElementConstructor, newClass: CustomElementConstructor) {
+  const translate = (cls: HasFieldsRecordClass) => {
+    const fieldList = (cls._defined_fields_ || []).map(([name, type, isStatic]) => ({ name, type, isStatic }));
+    const fieldGroup = Object.groupBy(fieldList, ({ isStatic }) => (isStatic ? 'staticFields' : 'instanceFields'));
+    const groupBy = (list: typeof fieldGroup.staticFields) => Object.groupBy(list || [], ({ type }) => type);
+    return {
+      staticFields: groupBy(fieldGroup.staticFields),
+      instanceFields: groupBy(fieldGroup.instanceFields),
+    };
+  };
+  const oldFields = translate(existed as unknown as HasFieldsRecordClass);
+  const newFields = translate(newClass as unknown as HasFieldsRecordClass);
+  const result = Object.fromEntries(
+    Object.entries(oldFields).map(([classFieldType]: [keyof typeof oldFields, any]) => [
+      classFieldType,
+      Object.fromEntries(
+        diffRecord(oldFields[classFieldType], newFields[classFieldType]).all.map((type) => [
+          type,
+          diffArr(oldFields[classFieldType][type] || [], newFields[classFieldType][type] || [], ({ name }) => name),
+        ]),
+      ),
+    ]),
+  );
+  return result as Record<keyof typeof oldFields, (typeof result)[0]>;
+}
+
+const deleteProperty = Reflect.deleteProperty;
+const getProperty = Reflect.get;
+const getPrototypeOf = Reflect.getPrototypeOf;
+const setProperty = (target: any, propertyKey: string | symbol, value: any) =>
+  Reflect.defineProperty(target, propertyKey, {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value,
+  });
+const safeProp = new Set(['part', 'slot', 'other']);
+const descMap = {
+  attribute,
+  boolattribute,
+  numattribute,
+  property,
+  state,
+  emitter,
+};
+
+function setArrValue<T>(obj: any, field: string, val: T[] = []) {
+  if (!Object.getOwnPropertyDescriptor(obj, field)) {
+    setProperty(obj, field, val);
+  } else {
+    const old = obj[field] as T[];
+    old.length = 0;
+    old.push(...val);
+  }
+}
+
+declare global {
+  interface Window {
+    _hmrClassRegistry: Map<string, any>;
+    _hmrRegisterClass: (name: string) => (cls: HasFieldsRecordClass, ctx: ClassDecoratorContext) => void;
+  }
+}
+
+window._hmrClassRegistry = new Map();
+window._hmrRegisterClass =
+  (name: string) =>
+  (cls: HasFieldsRecordClass, { addInitializer }: ClassDecoratorContext) => {
+    addInitializer(() => {
+      const existed = window._hmrClassRegistry.get(name);
+
+      if (!existed) {
+        window._hmrClassRegistry.set(name, cls);
+        return;
+      }
+
+      logger.info(`class <${name}> update,`, { existed, cls });
+
+      let current: any[] = [existed, cls];
+      while (current) {
+        const [oldClass, newClass] = current;
+        if (oldClass === newClass || current.some((e) => e === GemElement || e === Function.prototype)) break;
+        if (current.some((e) => !e) || checkClassNeedReload(oldClass, newClass)) {
+          location.reload();
+          return;
+        }
+
+        // 修正 `instanceof`
+        setProperty(newClass, Symbol.hasInstance, function hasInstance(instance: any) {
+          const isOldInstance = instance instanceof oldClass;
+          if (isOldInstance) return true;
+          setProperty(newClass, Symbol.hasInstance, undefined);
+          const isNew = instance instanceof newClass;
+          setProperty(newClass, Symbol.hasInstance, hasInstance);
+          return isNew;
+        });
+
+        const oldMetadata = getMetadata(oldClass);
+        const newMetadata = getMetadata(newClass);
+
+        if (checkMetadataNeedReload(oldMetadata, newMetadata)) {
+          location.reload();
+          return;
+        }
+
+        const fields = getFields(oldClass, newClass);
+
+        if (checkFieldsNeedReload(fields)) {
+          location.reload();
+          return;
+        }
+
+        Object.entries(fields.staticFields).forEach(([type, { remove, add }]) => {
+          remove.forEach((prop) => {
+            if (safeProp.has(type)) {
+              deleteProperty(oldClass, prop.name);
+            }
+          });
+          add.forEach((prop) => {
+            if (safeProp.has(type)) {
+              setProperty(oldClass, prop.name, getProperty(newClass, prop.name));
+            }
+          });
+        });
+
+        const instanceFieldsEntries = Object.entries(fields.instanceFields);
+        // 删除的属性重新加回来要先清除占位值
+        instanceFieldsEntries.forEach(([type, { add }]) => {
+          add.forEach((prop) => {
+            if (type in descMap) {
+              deleteProperty(oldClass.prototype, prop.name);
+            }
+          });
+        });
+        updateElement(name, (element) => {
+          instanceFieldsEntries.forEach(([type, { add, remove }]) => {
+            add.forEach((prop) => {
+              if (type in descMap) {
+                (descMap as any)[type](undefined, {
+                  name: prop.name,
+                  metadata: oldMetadata,
+                  addInitializer: (fn: () => void) => fn.apply(element),
+                } as ClassMemberDecoratorContext);
+              }
+            });
+            remove.forEach((prop) => {
+              setProperty(element, prop.name, undefined);
+            });
+          });
+        });
+        // 删除的属性在 proto 上添加占位符
+        instanceFieldsEntries.forEach(([type, { remove }]) => {
+          remove.forEach((prop) => {
+            if (type in descMap) {
+              // attribute 映射 prop 没有移除
+              setProperty(oldClass.prototype, prop.name, undefined);
+            }
+          });
+        });
+
+        setArrValue(oldMetadata, 'definedParts', newMetadata.definedParts);
+        setArrValue(oldMetadata, 'definedSlots', newMetadata.definedSlots);
+        setArrValue(oldMetadata, 'observedProperties', newMetadata.observedProperties);
+        setArrValue(oldMetadata, 'observedAttributes', newMetadata.observedAttributes);
+        setArrValue(oldMetadata, 'definedEvents', newMetadata.definedEvents);
+        setArrValue(oldMetadata, 'definedCSSStates', newMetadata.definedCSSStates);
+        setArrValue(oldMetadata, 'adoptedStyleSheets', newMetadata.adoptedStyleSheets);
+        setArrValue(oldClass, '_defined_fields_', newClass._defined_fields_);
+
+        [
+          [oldClass, newClass],
+          [oldClass.prototype, newClass.prototype],
+        ].forEach(([existedObj, newObj]) => {
+          Object.assign(
+            existedObj,
+            Object.fromEntries(
+              getHmrMethodKeys(newObj)
+                .filter((key) => existedObj[key].toString() !== newObj[key].toString())
+                .map((key) => [key, newObj[key]]),
+            ),
+          );
+        });
+
+        current = [getPrototypeOf(oldClass), getPrototypeOf(newClass)];
+      }
+    });
+  };
+
+window.customElements.define = (name: string, cls: CustomElementConstructor) => {
+  const existed = customElements.get(name);
+
+  if (!existed) {
+    nativeDefineElement(name, cls);
+    return;
+  }
+
+  // 等待类更新
+  queueMicrotask(() => {
+    logger.info(`<${name}> update,`, { cls });
+
+    updateElement(name, (element) => {
+      // 触发样式更新，支持 Light DOM
+      element.after(element);
+      // 重新渲染
+      (element as any)[UpdateToken]?.();
+    });
+  });
+};

package/src/helper/i18n.ts

@@ -1,9 +1,8 @@
+import type { RouteTrigger } from '../elements/base/route';
 import type { UpdateHistoryParams } from '../lib/history';
-import type { TemplateResult } from '../lib/element';
-import { html, UpdateToken } from '../lib/element';
+import type { TemplateResult } from '../lib/lit-html';
+import { html, UpdateToken } from '../lib/reactive';
 import { GemError } from '../lib/utils';
-import type { RouteTrigger } from '../elements/base/route';
-
 import { logger } from './logger';
 
 // Hello, $1
@@ -91,9 +90,10 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
         return parts.shift();
       case 'path':
         return pathname.split('/')[1];
-      default:
+      default: {
         const fragment = (this.urlParamsName && new URLSearchParams(search).get(this.urlParamsName)) || '';
         return fragment in this.resources ? fragment : '';
+      }
     }
   }
 
@@ -198,7 +198,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
       if (localPackString) {
         try {
           pack = JSON.parse(localPackString);
-        } catch (e) {
+        } catch {
           pack = await fetchPack();
         }
       } else {
@@ -212,7 +212,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     if (!this.#inConstructor) {
       // 更新所有元素，可能会更新许多不必要的元素
       const temp: Element[] = [document.documentElement];
-      while (!!temp.length) {
+      while (temp.length) {
         const element = temp.pop()!;
         (element as any)[UpdateToken]?.();
         // 和 gem 更新机制一样使用深度优先

package/src/helper/logger.ts

@@ -1,20 +1,24 @@
 export class Logger {
-  _type: string;
+  #type: string;
+
+  get #prefix() {
+    return `[${this.#type}]`;
+  }
 
   constructor(type: string) {
-    this._type = type;
+    this.#type = type;
   }
 
   info = (...args: any[]) => {
-    console.log(`[${this._type}]:`, ...args);
+    console.log(this.#prefix, ...args);
   };
 
   warn = (...args: any[]) => {
-    console.warn(`[${this._type}]:`, ...args);
+    console.warn(this.#prefix, ...args);
   };
 
   error = (...args: any[]) => {
-    console.error(`[${this._type}]:`, ...args);
+    console.error(this.#prefix, ...args);
   };
 }
 

package/src/helper/mediaquery.ts

@@ -1,7 +1,7 @@
 // https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
 // https://mediag.com/news/popular-screen-resolutions-designing-for-all/
 
-const match = (query: string) => window.matchMedia(query).matches;
+const match = (query: string) => matchMedia(query).matches;
 
 export const mediaQuery = {
   PRINT: 'print',

package/src/helper/react-utils.ts

@@ -1,18 +1,10 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+// @ts-expect-error
 import type { ReactNode } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+// @ts-expect-error
 import { useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+// @ts-expect-error
 import type { Root } from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+// @ts-expect-error
 import { createRoot } from 'react-dom/client';
 
 import type { Store } from '../lib/store';

package/src/helper/ssr-shim.ts

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

package/src/helper/theme.ts

@@ -1,14 +1,15 @@
+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';
-import type { GemElement } from '../lib/element';
-import { SheetToken, css } from '../lib/element';
 
-export type Theme<T> = ReturnType<typeof createUpdater<T>> &
-  ReturnType<typeof css> & {
+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}`
-      : K]: T[K];
+      : K]: string;
   };
 
 const themeStoreMap = new WeakMap();
@@ -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/index.ts

@@ -1,8 +1,5 @@
-export * from './lib/decorators';
 export * from './lib/element';
+export * from './lib/history';
 export * from './lib/store';
 export * from './lib/utils';
 export * from './lib/version';
-
-// 使用路径时可选模块
-export * from './lib/history';