@mantou/gem 1.6.18 → 1.7.0

package/src/elements/base/reflect.ts

@@ -1,16 +1,13 @@
 import { GemElement } from '../../lib/element';
 import { property } from '../../lib/decorators';
 
-// support prerender
-document.querySelectorAll('[data-reflect]').forEach((e) => e.remove());
-
 export class GemReflectElement extends GemElement {
   @property target: HTMLElement = document.head;
 
   constructor() {
     super({ isLight: true });
     this.hidden = true;
-    this.dataset.gemreflect = '';
+    this.dataset.gemReflect = '';
     this.effect(
       () => {
         const childNodes = [...this.childNodes];

package/src/elements/base/route.ts

@@ -1,18 +1,18 @@
 import { GemElement, html, TemplateResult } from '../../lib/element';
-import { property, connectStore, emitter, Emitter } from '../../lib/decorators';
+import { property, connectStore, emitter, Emitter, boolattribute } from '../../lib/decorators';
 import { createStore, updateStore, Store } from '../../lib/store';
 import { titleStore, history, UpdateHistoryParams } from '../../lib/history';
 import { QueryString } from '../../lib/utils';
 
-interface NamePostition {
+interface NamePosition {
   [index: string]: number;
 }
 
 // TODO: use `URLPattern`
 class ParamsRegExp extends RegExp {
-  namePosition: NamePostition;
+  namePosition: NamePosition;
   constructor(pattern: string) {
-    const namePosition: NamePostition = {};
+    const namePosition: NamePosition = {};
     let i = 0;
     super(
       `^${pattern
@@ -103,6 +103,7 @@ type State = {
  */
 @connectStore(history.store)
 export class GemRouteElement extends GemElement<State> {
+  @boolattribute transition: boolean;
   @property routes?: RouteItem[] | RoutesObject;
   /**
    * @example
@@ -172,9 +173,17 @@ export class GemRouteElement extends GemElement<State> {
     this.#lastLoader = undefined;
     this.currentRoute = route;
     this.currentParams = params;
-    this.setState({ content });
-    this.routechange(this.currentRoute);
-    this.#updateLocationStore();
+    const changeContent = () => {
+      this.setState({ content });
+      this.routechange(this.currentRoute);
+      this.#updateLocationStore();
+      return Promise.resolve();
+    };
+    if (this.transition && 'startViewTransition' in document) {
+      (document as any).startViewTransition(changeContent);
+    } else {
+      changeContent();
+    }
   };
 
   mounted() {

package/src/elements/base/title.ts

@@ -2,7 +2,7 @@
  * 标题显示在：
  *
  * - 桌面端 Tab 的 title
- * - 移动端 Appbar 的 title
+ * - 移动端 AppBar 的 title
  *
  * 修改标题：
  *

package/src/helper/i18n.ts

@@ -142,7 +142,7 @@ export class I18n<T = Record<string, Msg>> {
     const currentLanguagePack = this.resources[this.currentLanguage] as any;
     const fallbackLanguagePack = this.resources[this.fallbackLanguage] as any;
     const msg = currentLanguagePack[s] || fallbackLanguagePack[s];
-    const rawValue: string = msg?.message || msg || `[${s}]`;
+    const rawValue: string = msg?.message || msg || `[${s as string}]`;
     if (!rest.length) return rawValue;
     return splice(rawValue, ...rest);
   }

package/src/lib/decorators.ts

@@ -83,13 +83,13 @@ export function numattribute(target: GemElementPrototype, prop: string) {
  * ```
  */
 export function property(target: GemElementPrototype, prop: string) {
-  pushStaticField(target, 'observedPropertys', prop);
+  pushStaticField(target, 'observedProperties', prop);
   defineProperty(target, prop);
 }
 
 /**
  * 定义一个元素[内部](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) state，
- * 类似 `:checked`，用于自定义 css 伪类（:--xxx），默认值即为字段名。
+ * 类似 `:checked`，用于自定义 css 伪类（:state(xxx)），默认值即为字段名。
  * 重新赋值转换 css 伪类
  * 将来也可能用于 IDE 识别
  *
@@ -103,7 +103,7 @@ export function property(target: GemElementPrototype, prop: string) {
 export function state(target: GemElementPrototype, prop: string) {
   const attr = camelToKebabCase(prop);
   pushStaticField(target, 'defineCSSStates', attr);
-  defineCSSState(target, prop, `--${attr}`);
+  defineCSSState(target, prop, attr);
 }
 
 /**

package/src/lib/element.ts

@@ -24,11 +24,10 @@ export { guard } from 'lit-html/directives/guard';
 
 export { ifDefined } from 'lit-html/directives/if-defined';
 
-type CustomStateSet = Set<string>;
-
 declare global {
   interface ElementInternals extends ARIAMixin {
-    states: CustomStateSet;
+    // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
+    states?: Set<string>;
     // https://w3c.github.io/aria/#role_definitions
     role?: string;
   }
@@ -68,12 +67,14 @@ type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
 type EffectItem<T> = {
   callback: EffectCallback<T>;
-  initialized: boolean;
+  initialized?: boolean;
+  inConstructor?: boolean;
   values?: T;
   getDep?: GetDepFun<T>;
   preCallback?: () => void;
 };
 
+const constructorSymbol = Symbol('constructor');
 const initSymbol = Symbol('init');
 const updateSymbol = Symbol('update');
 
@@ -88,7 +89,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   static observedAttributes?: string[]; // WebAPI 中是实时检查这个列表
   static booleanAttributes?: Set<string>;
   static numberAttributes?: Set<string>;
-  static observedPropertys?: string[];
+  static observedProperties?: string[];
   static observedStores?: Store<unknown>[];
   static adoptedStyleSheets?: Sheet<unknown>[];
   static defineEvents?: string[];
@@ -115,6 +116,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   constructor({ isAsync, isLight, delegatesFocus }: GemElementOptions = {}) {
     super();
+    (this as any)[constructorSymbol] = true;
 
     // 外部不可见，但允许类外面使用
     addMicrotask(() => ((this as any)[initSymbol] = false));
@@ -174,27 +176,19 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   get internals() {
     if (!this.#internals) {
-      const getCustomStateSet = () => {
-        // https://wicg.github.io/custom-state-pseudo-class/
-        const getV = (v: string) => v.replace(/-/g, '');
-        return {
-          has: (v) => getV(v) in this.dataset,
-          add: (v) => {
-            this.dataset[getV(v)] = '';
-          },
-          delete: (v) => delete this.dataset[getV(v)],
-        } as CustomStateSet;
-      };
-      if (!this.attachInternals) {
-        // https://bugs.webkit.org/show_bug.cgi?id=197960
-        this.attachInternals = () => {
-          return { states: getCustomStateSet() } as any;
-        };
-      }
       this.#internals = this.attachInternals();
-      if (!this.#internals.states) {
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1588763
-        this.#internals.states = getCustomStateSet();
+      // https://groups.google.com/a/chromium.org/g/blink-dev/c/JvpHoUfhJYE?pli=1
+      try {
+        this.#internals.states?.add('foo');
+        this.#internals.states?.delete('foo');
+      } catch {
+        Reflect.defineProperty(this.#internals, 'states', {
+          value: new Proxy(this.#internals.states!, {
+            get(target: any, p) {
+              return (str: string) => target[p](`--${str}`);
+            },
+          }),
+        });
       }
     }
     return this.#internals;
@@ -254,16 +248,14 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    * }
    * ```
    * */
-  effect = <T = any[] | undefined>(
-    callback: EffectCallback<T>,
-    getDep?: T extends any[] ? () => [...T] : undefined,
-  ) => {
+  effect = <T = any[] | undefined>(callback: EffectCallback<T>, getDep?: T extends any[] ? () => T : undefined) => {
     if (!this.#effectList) this.#effectList = [];
     const effectItem: EffectItem<T> = {
       callback,
       getDep,
       values: undefined,
-      initialized: !!this.#isMounted,
+      initialized: this.#isMounted,
+      inConstructor: (this as any)[constructorSymbol],
     };
     // 以挂载时立即执行副作用，未挂载时等挂载后执行
     if (this.#isMounted) {
@@ -287,14 +279,13 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    * }
    * ```
    * */
-  memo = <T = any[] | undefined>(callback: EffectCallback<T>, getDep?: T extends any[] ? () => [...T] : undefined) => {
+  memo = <T = any[] | undefined>(callback: EffectCallback<T>, getDep?: T extends any[] ? () => T : undefined) => {
     if (!this.#memoList) this.#memoList = [];
     this.#memoList.push({
       callback,
       getDep,
       values: [Symbol()],
-      // 是否是 `willMount` 中定义
-      initialized: !!this.#isMounted,
+      inConstructor: (this as any)[constructorSymbol],
     });
   };
 
@@ -400,6 +391,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   }
 
   #connectedCallback = () => {
+    // 似乎这是最早的判断不在 `constructor` 中的地方
+    (this as any)[constructorSymbol] = false;
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
       return;
@@ -478,7 +471,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     this.#effectList?.forEach((effectItem) => {
       execCallback(effectItem.preCallback);
     });
-    this.#memoList = this.#memoList?.filter(({ initialized }) => !initialized);
+    this.#effectList = this.#effectList?.filter(({ inConstructor }) => inConstructor);
+    this.#memoList = this.#memoList?.filter(({ inConstructor }) => inConstructor);
   }
 }
 
@@ -581,7 +575,7 @@ export function defineRef(target: GemElement, prop: string, ref: string) {
             return ref;
           },
           get element() {
-            const gemReflects = ([...ele.querySelectorAll('[data-gemreflect]')] as GemReflectElement[]).map(
+            const gemReflects = ([...ele.querySelectorAll('[data-gem-reflect]')] as GemReflectElement[]).map(
               (e) => e.target,
             );
             for (const e of [ele, ...gemReflects]) {
@@ -603,15 +597,15 @@ export function defineCSSState(target: GemElement, prop: string, state: string)
     get() {
       const that = this as GemElement;
       const { states } = that.internals;
-      return states.has?.(state);
+      return states?.has(state);
     },
     set(v: boolean) {
       const that = this as GemElement;
       const { states } = that.internals;
       if (v) {
-        states.add(state);
+        states?.add(state);
       } else {
-        states.delete(state);
+        states?.delete(state);
       }
     },
   });
@@ -620,12 +614,12 @@ export function defineCSSState(target: GemElement, prop: string, state: string)
 export const nativeDefineElement = customElements.define.bind(customElements);
 customElements.define = (name: string, cls: CustomElementConstructor, options?: ElementDefinitionOptions) => {
   if (cls.prototype instanceof GemElement) {
-    const { observedAttributes, observedPropertys, defineEvents, defineCSSStates, defineRefs } =
+    const { observedAttributes, observedProperties, defineEvents, defineCSSStates, defineRefs } =
       cls as unknown as typeof GemElement;
     observedAttributes?.forEach((attr) => defineAttribute(cls.prototype, kebabToCamelCase(attr), attr));
-    observedPropertys?.forEach((prop) => defineProperty(cls.prototype, prop));
+    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}`));
+    defineCSSStates?.forEach((state) => defineCSSState(cls.prototype, kebabToCamelCase(state), state));
     defineRefs?.forEach((ref) => defineRef(cls.prototype, kebabToCamelCase(ref), ref));
   }
 

package/src/lib/history.ts

@@ -50,13 +50,13 @@ function validData(data: any) {
   if ($hasShouldCloseHandle) throw new GemError('`$hasShouldCloseHandle` is not allowed');
 }
 
-function getUrlbarPath(internalPath: string) {
+function getUrlBarPath(internalPath: string) {
   return gemHistory.basePath ? gemHistory.basePath + internalPath : internalPath;
 }
 
-function getInternalPath(urlbarPath: string) {
-  if (urlbarPath === gemHistory.basePath) return '/';
-  return urlbarPath.replace(new RegExp(`^${gemHistory.basePath}/`), '/');
+function getInternalPath(urlBarPath: string) {
+  if (urlBarPath === gemHistory.basePath) return '/';
+  return urlBarPath.replace(new RegExp(`^${gemHistory.basePath}/`), '/');
 }
 
 function normalizeParams(params: UpdateHistoryParams): HistoryParams {
@@ -88,7 +88,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
   };
   paramsMap.set(state.$key, params);
   updateStore(cleanObject(store), state);
-  const url = getUrlbarPath(path) + new QueryString(query) + hash;
+  const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state, title, url);
   if (prevHash !== hash) window.dispatchEvent(new CustomEvent('hashchange'));
@@ -105,7 +105,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state.$key, params);
   updateStore(cleanObject(store), state);
-  const url = getUrlbarPath(pathname) + params.query + hash;
+  const url = getUrlBarPath(pathname) + params.query + hash;
   const prevHash = location.hash;
   native(state, title, url);
   // `location.hash` 和 `hash` 都已经进行了 url 编码，可以直接进行相等判断
@@ -127,13 +127,13 @@ class GemHistory {
     // 应用初始化的时候设置
     updateStore(gemBasePathStore, { basePath });
     // paramsMap 更新后 ui 才会更新
-    Object.assign(paramsMap.get(store.$key), { path: getInternalPath(location.pathname) });
+    Object.assign(paramsMap.get(store.$key)!, { path: getInternalPath(location.pathname) });
   }
   getParams() {
     return paramsMap.get(store.$key)!;
   }
   updateParams(params: UpdateHistoryParams) {
-    Object.assign(paramsMap.get(store.$key), params);
+    Object.assign(paramsMap.get(store.$key)!, params);
     updateStore(store, {});
   }
   push(params: UpdateHistoryParams) {
@@ -257,8 +257,8 @@ if (!window._GEMHISTORY) {
 
     // url 变化前 historyItem
     const prevState = store;
-
-    if (parseFloat(newState.$key) > parseFloat(prevState.$key) && newState.$hasOpenHandle) {
+    const isForward = parseFloat(newState.$key) > parseFloat(prevState.$key);
+    if (isForward && newState.$hasOpenHandle) {
       // 返回键关闭的 modal 能前进键重新打开
       // 刷新后不能工作：刷新后 historyItem 中只有 url
       // 能在子 app 中工作

package/src/lib/utils.ts

@@ -272,7 +272,7 @@ export function createCSSSheet<T extends StyledKeyValuePair>(rules: T | string,
     style = rules;
   } else {
     Object.keys(rules).forEach((key: keyof T) => {
-      sheet[key] = `${key}-${randomStr()}`;
+      sheet[key] = `${key as string}-${randomStr()}`;
       style += rules[key].styledContent.replace(/&/g, sheet[key]);
     });
   }

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.6.18';
+export const version = '1.7.0';

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

@@ -222,19 +222,19 @@ class MemoGemDemo extends GemElement {
   constructor() {
     super();
     this.memo(
-      () => this.memoCount++,
+      () => (this.memoCount += 1),
       () => [this.attr, this.prop],
     );
   }
   willMount() {
     this.memo(
       (_arr) => {
-        this.memoCount++;
+        this.memoCount += 2;
       },
       () => [],
     );
     this.memo(() => {
-      this.memoCount++;
+      this.memoCount += 4;
     });
   }
 }
@@ -242,23 +242,23 @@ customElements.define('memo-gem-demo', MemoGemDemo);
 describe('gem element Memo', () => {
   it('依赖当前值', async () => {
     const el: MemoGemDemo = await fixture(html`<memo-gem-demo></memo-gem-demo>`);
-    expect(el.memoCount).to.equal(3);
+    expect(el.memoCount).to.equal(7);
     el.attr = 'b';
     el.prop = {};
     await nextFrame();
-    expect(el.memoCount).to.equal(5);
+    expect(el.memoCount).to.equal(12);
 
     el.update();
     await Promise.resolve();
-    expect(el.memoCount).to.equal(6);
+    expect(el.memoCount).to.equal(16);
 
     document.body.append(el);
-    expect(el.memoCount).to.equal(6);
+    expect(el.memoCount).to.equal(16);
 
     el.remove();
     await Promise.resolve();
     document.body.append(el);
-    expect(el.memoCount).to.equal(9);
+    expect(el.memoCount).to.equal(22);
   });
 });
 

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

@@ -26,7 +26,7 @@ class GemDemo extends GemElement {
   static observedStores = [store];
 
   prop = { value: '' };
-  static observedPropertys = ['prop'];
+  static observedProperties = ['prop'];
 
   static adoptedStyleSheets = [styles];
   state = { value: '' };

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

@@ -87,7 +87,7 @@ describe('装饰器', () => {
     expect(DecoratorGemElement.defineParts).to.eql(['header-part']);
     expect(DecoratorGemElement.defineSlots).to.eql(['body-slot']);
     expect(DecoratorGemElement.defineRefs?.[0].startsWith('input-ref-')).to.equal(true);
-    expect(DecoratorGemElement.observedPropertys).to.eql(['dataProp']);
+    expect(DecoratorGemElement.observedProperties).to.eql(['dataProp']);
     expect(el.rankAttr).to.equal('attr');
     expect(el.rankDisabled).to.equal(true);
     expect(el.rankCount).to.equal(2);

package/src/test/history.test.ts

@@ -10,7 +10,7 @@ describe('history 测试', () => {
     await aTimeout(10);
     expect(window.location.hash).to.equal('#a');
     history.back();
-    await aTimeout(10);
+    await aTimeout(600);
     expect(window.location.hash).to.equal(hash);
     history.push({ path: '/a', hash: '#b' });
     await aTimeout(10);