@mantou/gem 2.1.1 → 2.2.1

package/src/elements/base/modal-factory.ts

@@ -1,7 +1,7 @@
-import { GemElement } from '../../lib/element';
-import { connect, createStore } from '../../lib/store';
-import { history } from '../../lib/history';
 import { aria, mounted, shadow } from '../../lib/decorators';
+import { history } from '../../lib/history';
+import { GemElement } from '../../lib/reactive';
+import { connect, createStore } from '../../lib/store';
 
 const open = Symbol('open mark');
 
@@ -32,7 +32,7 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
 
     /**@final */
     static get isOpen() {
-      return this.store[open];
+      return ModalElement.store[open];
     }
 
     /**
@@ -41,19 +41,19 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
      * 浏览器 history 为异步 API，需要设置较长延迟;
      */
     static open(opts: T) {
-      const instance = new this();
-      this.instance = instance;
-      this.inertStore = ([...document.body.children] as HTMLElement[]).filter((e) => !e.inert);
-      this.inertStore.forEach((e) => (e.inert = true));
+      const instance = new ModalElement();
+      ModalElement.instance = instance;
+      ModalElement.inertStore = ([...document.body.children] as HTMLElement[]).filter((e) => !e.inert);
+      ModalElement.inertStore.forEach((e) => (e.inert = true));
       document.body.append(instance);
-      const changeStore = () => this.store({ [open]: true, ...opts });
+      const changeStore = () => ModalElement.store({ [open]: true, ...opts });
       setTimeout(() => {
         changeStore();
         history.push({
           title: instance.label,
           open: changeStore,
-          close: this.closeHandle.bind(this),
-          shouldClose: this.shouldClose.bind(this),
+          close: ModalElement.closeHandle.bind(ModalElement),
+          shouldClose: ModalElement.shouldClose.bind(ModalElement),
         });
       }, 100);
       return final;
@@ -73,9 +73,9 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
      * history 中自动调用
      */
     static closeHandle() {
-      this.inertStore.forEach((e) => (e.inert = false));
-      this.instance?.remove();
-      this.store({ [open]: false, ...options });
+      ModalElement.inertStore.forEach((e) => (e.inert = false));
+      ModalElement.instance?.remove();
+      ModalElement.store({ [open]: false, ...options });
       return final;
     }
 

package/src/elements/base/reflect.ts

@@ -1,13 +1,13 @@
 /**
- * - ref 读取时需要用到 `target` `dataset`
  * - 预渲染可能造成重复的元素，在序列化时可以用正则移除 GemReflectElement 渲染的从开始到结束连续的元素
  * - `replaceAll(/<!--gem-reflect-start-->.*?<!--gem-reflect-end-->/gs, '')`
  *
  * 不能在在顶级代码块中清除这些元素，因为重复加载该代码时会把正常 reflect 元素清除，
  * 比如 duoyun-ui 文档站加载示例元素时把 GemReflectElement 渲染的元素清除
  */
-import { GemElement } from '../../lib/element';
+
 import { attribute, effect, property, willMount } from '../../lib/decorators';
+import { GemElement } from '../../lib/reactive';
 
 const START = 'gem-reflect-start';
 const END = 'gem-reflect-end';
@@ -25,9 +25,6 @@ const getReflectFragment = (startNode: Comment) => {
   return result;
 };
 
-/**
- * @customElement gem-reflect
- */
 export class GemReflectElement extends GemElement {
   @attribute method: 'prepend' | 'append';
 
@@ -40,7 +37,6 @@ export class GemReflectElement extends GemElement {
   @willMount()
   #init = () => {
     this.hidden = true;
-    this.dataset.gemReflect = '';
   };
 
   #startNode = createReflectFragmentTag(START);

package/src/elements/base/route.ts

@@ -1,11 +1,11 @@
-import type { TemplateResult } from '../../lib/element';
-import { createState, GemElement, html } from '../../lib/element';
 import type { Emitter } from '../../lib/decorators';
-import { property, emitter, boolattribute, shadow, effect, template, light } from '../../lib/decorators';
-import type { Store } from '../../lib/store';
-import { createStore, connect } from '../../lib/store';
+import { adoptedStyle, boolattribute, effect, emitter, light, property, shadow, template } from '../../lib/decorators';
+import { createState, css, GemElement, html } from '../../lib/element';
 import type { UpdateHistoryParams } from '../../lib/history';
-import { titleStore, history } from '../../lib/history';
+import { history, titleStore } from '../../lib/history';
+import type { TemplateResult } from '../../lib/lit-html';
+import type { Store } from '../../lib/store';
+import { connect, createStore } from '../../lib/store';
 import type { QueryString } from '../../lib/utils';
 import { addListener } from '../../lib/utils';
 
@@ -30,11 +30,10 @@ class ParamsRegExp extends RegExp {
 
 type Params = Record<string, string>;
 declare global {
-  interface Window {
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1731418
-    // https://github.com/WebKit/standards-positions/issues/61
-    URLPattern: any;
-  }
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1731418
+  // https://github.com/WebKit/standards-positions/issues/61
+  // eslint-disable-next-line no-var
+  var URLPattern: any;
 }
 
 /**
@@ -51,8 +50,8 @@ declare global {
  * ```
  */
 export function matchPath(pattern: string, path: string) {
-  if (window.URLPattern) {
-    const urLPattern = new window.URLPattern({ pathname: pattern });
+  if (globalThis.URLPattern) {
+    const urLPattern = new URLPattern({ pathname: pattern });
     const matchResult = urLPattern.exec({ pathname: path }) || urLPattern.exec({ pathname: `${path}/` });
     if (!matchResult) return null;
     return matchResult.pathname.groups as Params;
@@ -132,13 +131,6 @@ export type RouteTrigger = {
 
 const scrollPositionMap = new Map<string, number>();
 
-/**
- * @customElement gem-light-route
- * @attr inert 暂停路由更新
- * @fires routechange
- * @fires error
- * @fires loading
- */
 @light({ penetrable: true })
 export class GemLightRouteElement extends GemElement {
   @boolattribute transition: boolean;
@@ -178,7 +170,7 @@ export class GemLightRouteElement extends GemElement {
   static findRoute = (target: RouteItem[] | RoutesObject = [], path: string) => {
     let defaultRoute: RouteItem | null = null;
     let routes: RouteItem[];
-    if (target instanceof Array) {
+    if (Array.isArray(target)) {
       routes = target;
     } else {
       routes = Object.values(target);
@@ -283,15 +275,7 @@ export class GemLightRouteElement extends GemElement {
       return html`${content}`;
     }
 
-    return html`
-      <style>
-        :host(:where(:not([hidden]))),
-        :not(:defined) {
-          display: contents;
-        }
-      </style>
-      ${content === INIT_CONTENT ? html`<slot></slot>` : content}
-    `;
+    return content === INIT_CONTENT ? html`<slot></slot>` : content;
   };
 
   // 重写 `update`，并暴露为公共字段
@@ -331,8 +315,13 @@ export class GemLightRouteElement extends GemElement {
   };
 }
 
-/**
- * @customElement gem-route
- */
+const style = css`
+  :host(:where(:not([hidden]))),
+  :not(:defined) {
+    display: contents;
+  }
+`;
+
 @shadow()
+@adoptedStyle(style)
 export class GemRouteElement extends GemLightRouteElement {}

package/src/elements/base/title.ts

@@ -12,16 +12,16 @@
  * - `<gem-title>` 作为默认值设置
  */
 
-import { GemElement, html } from '../../lib/element';
 import { attribute, boolattribute, effect, mounted, shadow, template } from '../../lib/decorators';
-import { connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
+import { GemElement, html } from '../../lib/reactive';
+import { connect } from '../../lib/store';
 
 // 避免重定向时的中间状态标题
-let timer = 0;
+let timer: ReturnType<typeof setTimeout> | number = 0;
 const setTitle = (documentTitle: string) => {
   clearTimeout(timer);
-  timer = window.setTimeout(() => (document.title = documentTitle));
+  timer = setTimeout(() => (document.title = documentTitle));
 };
 
 function setDocumentTitle(defaultTitle?: string | null, prefix = '', suffix = '') {
@@ -35,11 +35,6 @@ function setDocumentTitle(defaultTitle?: string | null, prefix = '', suffix = ''
   }
 }
 
-/**
- * @customElement gem-title
- * @attr prefix
- * @attr suffix
- */
 @shadow()
 export class GemTitleElement extends GemElement {
   @attribute prefix: string;

package/src/elements/base/unsafe.ts

@@ -1,12 +1,6 @@
-import { GemElement } from '../../lib/element';
 import { attribute, shadow, template } from '../../lib/decorators';
-import { raw } from '../../lib/utils';
+import { GemElement } from '../../lib/reactive';
 
-/**
- * @customElement gem-unsafe
- * @attr content
- * @attr contentcss
- */
 @shadow()
 export class GemUnsafeElement extends GemElement {
   @attribute content: string;
@@ -14,16 +8,17 @@ export class GemUnsafeElement extends GemElement {
 
   @template()
   #content = () => {
-    this.shadowRoot!.innerHTML = raw`
+    const style = /*html*/ `
       <style>
         :host(:where(:not([hidden]))) {
           display: contents;
         }
         ${this.contentcss}
       </style>
-      ${this.content}
     `;
 
+    this.shadowRoot!.innerHTML = this.content + style.trim();
+
     // 不要更新内容
     return undefined;
   };

package/src/elements/base/use.ts

@@ -1,8 +1,7 @@
-import { createCSSSheet, GemElement, html } from '../../lib/element';
 import { adoptedStyle, attribute, property, shadow, state, template } from '../../lib/decorators';
-import { css } from '../../lib/utils';
+import { css, GemElement, html } from '../../lib/reactive';
 
-const styles = createCSSSheet(css`
+const styles = css`
   :host(:where(:not([hidden]))) {
     position: relative;
     display: inline-flex;
@@ -12,7 +11,7 @@ const styles = createCSSSheet(css`
     width: 100%;
     height: 100%;
   }
-`);
+`;
 
 const eleCache = new Map<string, HTMLTemplateElement>();
 /**
@@ -20,9 +19,6 @@ const eleCache = new Map<string, HTMLTemplateElement>();
  * 此元素用来模拟 `<use>`,
  * 由于是复制元素，所以不能像 `<use>` 一样自动更新
  * slot 支持为 icon 添加效果，如涟漪，徽章
- *
- * @customElement gem-use
- * @attr selector
  */
 @shadow()
 @adoptedStyle(styles)
@@ -52,9 +48,6 @@ export class GemUseElement extends GemElement {
 
   @template()
   #content = () => {
-    return html`
-      ${this.#getContent()}
-      <slot></slot>
-    `;
+    return html`${this.#getContent()}<slot></slot>`;
   };
 }

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 更新机制一样使用深度优先