@mantou/gem 1.6.17 → 1.6.19

package/src/lib/element.ts

@@ -68,12 +68,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');
 
@@ -106,19 +108,22 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   #renderRoot: HTMLElement | ShadowRoot;
   #internals?: ElementInternals;
   #isAppendReason?: boolean;
+  // 和 isConnected 有区别
+  #isMounted?: boolean;
   #isAsync?: boolean;
   #effectList?: EffectItem<any>[];
-  #momeList?: EffectItem<any>[];
+  #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
 
   constructor({ isAsync, isLight, delegatesFocus }: GemElementOptions = {}) {
     super();
+    (this as any)[constructorSymbol] = true;
 
     // 外部不可见，但允许类外面使用
     addMicrotask(() => ((this as any)[initSymbol] = false));
     (this as any)[initSymbol] = true;
     (this as any)[updateSymbol] = () => {
-      if (this.isConnected) {
+      if (this.#isMounted) {
         addMicrotask(this.#update);
       }
     };
@@ -236,7 +241,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   };
 
   #execMemo = () => {
-    this.#exec(this.#momeList);
+    this.#exec(this.#memoList);
   };
 
   /**
@@ -252,19 +257,17 @@ 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.isConnected,
+      initialized: this.#isMounted,
+      inConstructor: (this as any)[constructorSymbol],
     };
     // 以挂载时立即执行副作用，未挂载时等挂载后执行
-    if (this.isConnected) {
+    if (this.#isMounted) {
       effectItem.values = getDep?.() as T;
       effectItem.preCallback = callback(effectItem.values);
     }
@@ -285,14 +288,13 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    * }
    * ```
    * */
-  memo = <T = any[] | undefined>(callback: EffectCallback<T>, getDep?: T extends any[] ? () => [...T] : undefined) => {
-    if (!this.#momeList) this.#momeList = [];
-    this.#momeList.push({
+  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.isConnected,
+      inConstructor: (this as any)[constructorSymbol],
     });
   };
 
@@ -349,7 +351,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   };
 
   #updateCallback = () => {
-    if (this.isConnected && this.#shouldUpdate()) {
+    if (this.#isMounted && this.#shouldUpdate()) {
       const temp = this.#render();
       temp !== undefined && render(temp, this.#renderRoot);
       addMicrotask(this.#updated);
@@ -392,12 +394,14 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    * use `effect`
    */
   attributeChangedCallback() {
-    if (this.isConnected) {
+    if (this.#isMounted) {
       addMicrotask(this.#update);
     }
   }
 
   #connectedCallback = () => {
+    // 似乎这是最早的判断不在 `constructor` 中的地方
+    (this as any)[constructorSymbol] = false;
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
       return;
@@ -409,6 +413,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     });
     const temp = this.#render();
     temp !== undefined && render(temp, this.#renderRoot);
+    this.#isMounted = true;
     this.#unmountCallback = this.mounted?.();
     this.#initEffect();
     if (rootElement && (this.getRootNode() as ShadowRoot).host?.tagName !== rootElement.toUpperCase()) {
@@ -465,6 +470,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       this.#isAppendReason = true;
       return;
     }
+    this.#isMounted = false;
     const { observedStores } = this.constructor as typeof GemElement;
     observedStores?.forEach((store) => {
       disconnect(store, this.#update);
@@ -474,7 +480,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     this.#effectList?.forEach((effectItem) => {
       execCallback(effectItem.preCallback);
     });
-    this.#momeList = this.#momeList?.filter(({ initialized }) => !initialized);
+    this.#effectList = this.#effectList?.filter(({ inConstructor }) => inConstructor);
+    this.#memoList = this.#memoList?.filter(({ inConstructor }) => inConstructor);
   }
 }
 

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.17';
+export const version = '1.6.19';

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

@@ -2,7 +2,7 @@ import { fixture, expect, nextFrame } from '@open-wc/testing';
 
 import { GemElement, html } from '../../lib/element';
 import { createStore, updateStore } from '../../lib/store';
-import { attribute, property, customElement, emitter, adoptedStyle } from '../../lib/decorators';
+import { attribute, property, customElement, emitter, adoptedStyle, refobject, RefObject } from '../../lib/decorators';
 import { createCSSSheet, css } from '../../lib/utils';
 
 const store = createStore({
@@ -66,14 +66,22 @@ describe('没有 Shadow DOM 的 gem 元素', () => {
   });
 });
 
-@customElement('lifecycle-gem-demo')
 class LifecycleGemElement extends GemElement {
   @attribute appTitle = 'default';
   @attribute appTitle2 = 'default2';
+  @refobject divRef: RefObject<HTMLElement>;
+  refInConstructor?: HTMLElement;
+
   constructor(appTitle: string, appTitle2: string) {
     super();
     this.appTitle = appTitle;
     this.appTitle2 = appTitle2;
+    this.effect(
+      () => {
+        this.refInConstructor = this.divRef.element;
+      },
+      () => [],
+    );
   }
   renderCount = 0;
   mountedCount = 0;
@@ -92,12 +100,15 @@ class LifecycleGemElement extends GemElement {
 
   render() {
     this.renderCount++;
-    return html``;
+    return html`<div ref=${this.divRef.ref}></div>`;
   }
 }
 describe('gem element 生命周期', () => {
   it('mounted/unmounted', async () => {
     const el: LifecycleGemElement = await fixture(html`<lifecycle-gem-demo></lifecycle-gem-demo>`);
+    // test #isMounted
+    customElements.define('lifecycle-gem-demo', LifecycleGemElement);
+    expect(!!el.refInConstructor).to.equal(true);
     expect(el.renderCount).to.equal(1);
     el.remove();
     expect(el.renderCount).to.equal(0);
@@ -211,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;
     });
   }
 }
@@ -231,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(8);
+    expect(el.memoCount).to.equal(22);
   });
 });
 
@@ -269,6 +280,7 @@ describe('gem element 继承', () => {
     expect(InheritGem.observedAttributes).to.eql(['app-title', 'app-title', 'app-title2']);
   });
   it('attr/prop/emitter 继承', async () => {
+    const name = window.name;
     const el: InheritGem = await fixture(html`<inherit-gem></inherit-gem>`);
     expect(el.appTitle).to.equal('1');
     expect(el.appData.a).to.equal(1);
@@ -280,7 +292,7 @@ describe('gem element 继承', () => {
       window.name += '2';
     });
     el.sayHi();
-    expect(window.name).to.equal('21');
+    expect(window.name).to.equal(name + '21');
   });
 });
 @customElement('render-empty')

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