@mantou/gem 1.7.6 → 1.7.7

package/src/lib/history.ts

@@ -1,6 +1,6 @@
 // https://github.com/WICG/navigation-api#stakeholder-feedback
 
-import { createStore, updateStore, connect } from './store';
+import { connect, useStore } from './store';
 import { QueryString, cleanObject, GemError, absoluteLocation } from './utils';
 
 const nativeHistory = window.history;
@@ -18,7 +18,7 @@ export interface HistoryState {
   [index: string]: any;
 }
 
-const store = createStore<HistoryState>({
+const [store, updateHistoryStore] = useStore<HistoryState>({
   $hasCloseHandle: false,
   $hasOpenHandle: false,
   $hasShouldCloseHandle: false,
@@ -85,10 +85,12 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
     $hasOpenHandle: !!open,
     $hasShouldCloseHandle: !!shouldClose,
     $key: getKey(),
+    $title: title,
     ...data,
   };
   paramsMap.set(state.$key, params);
-  updateStore(cleanObject(store), state);
+  cleanObject(store);
+  updateHistoryStore(state);
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state, title, url);
@@ -100,12 +102,14 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   validData(data);
   const state = {
     $key: getKey(),
+    $title: title,
     ...(data || {}),
   };
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state.$key, params);
-  updateStore(cleanObject(store), state);
+  cleanObject(store);
+  updateHistoryStore(state);
   const url = getUrlBarPath(pathname) + params.query + hash;
   const prevHash = location.hash;
   native(state, title, url);
@@ -113,7 +117,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   if (prevHash !== hash) window.dispatchEvent(new CustomEvent('hashchange'));
 }
 
-const gemBasePathStore = createStore({
+const [gemBasePathStore, updateBasePathStore] = useStore({
   basePath: '',
 });
 
@@ -126,7 +130,7 @@ class GemHistory {
   }
   set basePath(basePath: string) {
     // 应用初始化的时候设置
-    updateStore(gemBasePathStore, { basePath });
+    updateBasePathStore({ basePath });
     // paramsMap 更新后 ui 才会更新
     Object.assign(paramsMap.get(store.$key)!, { path: getInternalPath(location.pathname) });
   }
@@ -135,7 +139,7 @@ class GemHistory {
   }
   updateParams(params: UpdateHistoryParams) {
     Object.assign(paramsMap.get(store.$key)!, params);
-    updateStore(store, {});
+    updateHistoryStore();
   }
   push(params: UpdateHistoryParams) {
     updateHistory(params, nativePushState);
@@ -162,7 +166,7 @@ class GemHistory {
 // `<gem-**>` 只读写父应用 `basePath`
 const gemHistory = new GemHistory();
 
-const gemTitleStore = createStore({ title: '' });
+const [gemTitleStore, updateTitleStore] = useStore({ title: '' });
 
 const _GEMHISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
 
@@ -195,7 +199,7 @@ if (!window._GEMHISTORY) {
     const { pathname, search, hash } = location;
     gemHistory.replace({ path: pathname, query: search, hash });
   } else if (nativeHistory.state.$hasCloseHandle) {
-    updateStore(store, nativeHistory.state);
+    updateHistoryStore(nativeHistory.state);
     const params = normalizeParams({ title: document.title });
     paramsMap.set(store.$key, params);
     // 有 handle 返回键的页面刷新需要清除返回 handler
@@ -203,7 +207,7 @@ if (!window._GEMHISTORY) {
   } else {
     // 有 gem 历史的正常普通刷新, 储存 params
     const params = normalizeParams({ title: document.title, hash: location.hash });
-    updateStore(store, {
+    updateHistoryStore({
       $key: getKey(),
       ...(nativeHistory.state || {}),
     });
@@ -220,7 +224,7 @@ if (!window._GEMHISTORY) {
   connect(store, () => {
     const { title } = gemHistory.getParams();
     if (title !== gemTitleStore.title) {
-      updateStore(gemTitleStore, { title });
+      updateTitleStore({ title });
     }
   });
 
@@ -251,7 +255,7 @@ if (!window._GEMHISTORY) {
         path: pathname,
         query: new QueryString(search),
         hash,
-        title: document.title, // 浏览器缓存的 title
+        title: newState.$title, // document.title 是导航前的
         data: newState,
       });
     }
@@ -288,7 +292,8 @@ if (!window._GEMHISTORY) {
       }
     }
 
-    updateStore(cleanObject(store), newState);
+    cleanObject(store);
+    updateHistoryStore(newState);
   });
 }
 

package/src/lib/store.ts

@@ -13,32 +13,22 @@ export function createStore<T extends NonPrimitive>(originStore: T) {
   return originStore as Store<T>;
 }
 
-interface StoreObjectSet {
-  [store: string]: NonPrimitive;
-}
-export type StoreSet<T> = {
-  [P in keyof T]: T[P] & Store<T[P]>;
-};
-export function createStoreSet<T extends StoreObjectSet>(originStoreSet: T) {
-  const keys = Object.keys(originStoreSet);
-  keys.forEach((key) => {
-    createStore(originStoreSet[key]);
-  });
-
-  return originStoreSet as StoreSet<T>;
-}
-
 export function updateStore<T extends NonPrimitive>(store: Store<T>, value?: Partial<T>) {
   Object.assign(store, value);
-  const listeners = StoreListenerMap.get(store);
-  listeners?.forEach((func) => {
+  StoreListenerMap.get(store)?.forEach((func) => {
     addMicrotask(func);
   });
 }
 
+export function useStore<T extends NonPrimitive>(originStore: T) {
+  const store = createStore(originStore);
+  return [store, (value?: Partial<T>) => updateStore(store, value)] as const;
+}
+
 export function connect<T extends NonPrimitive>(store: Store<T>, func: () => void) {
   const listeners = StoreListenerMap.get(store);
   listeners?.add(func);
+  return () => listeners?.delete(func);
 }
 
 export function disconnect<T extends NonPrimitive>(store: Store<T>, func: () => void) {

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.7.6';
+export const version = '1.7.7';

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

@@ -1,3 +1,11 @@
+/**
+ * 测试 HTMLElement 没有的特性或者不常用的特性
+ * - 异步渲染
+ * - Light DOM 自定义元素
+ * - 生命周期以及 Effect/Memo
+ * - 派生元素（类扩展）
+ * - 无渲染内容 Gem 元素
+ */
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
 import { GemElement, html } from '../../lib/element';
@@ -120,7 +128,10 @@ describe('gem element 生命周期', () => {
     const el = container.firstElementChild as LifecycleGemElement;
     expect(el.appTitle).to.equal('title');
     expect(el.renderCount).to.equal(1);
-    expect((el.cloneNode() as LifecycleGemElement).appTitle).to.equal('title');
+    const clone = el.cloneNode() as LifecycleGemElement;
+    // BUG
+    clone.connectedCallback();
+    expect(clone.appTitle).to.equal('title');
 
     const el2 = new LifecycleGemElement('', '2');
     expect(el2.appTitle).to.equal('');

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

@@ -51,20 +51,24 @@ class DecoratorGemElement extends GemElement {
   }
 }
 
-@connectStore(store)
-@adoptedStyle(styles)
-@customElement('decorator-gem-demo2')
-class DecoratorGemElement2 extends GemElement {
-  static observedStores = [];
-  static adoptedStyleSheets = [];
-  renderCount = 0;
-  render() {
-    this.renderCount++;
-    return html``;
-  }
-}
-
 describe('装饰器', () => {
+  it('使用装饰器定义的未插入文档元素', async () => {
+    const el = new DecoratorGemElement();
+    expect(el.propData).to.eql({ value: '' });
+    expect(el.getAttribute('rank-attr')).to.equal(null);
+    // BUG
+    expect(el.rankAttr).to.equal(undefined);
+    el.connectedCallback();
+    expect(el.getAttribute('rank-attr')).to.equal(null);
+    expect(el.rankAttr).to.equal('');
+
+    el.rankAttr = 'attr';
+    el.propData = { value: '1' };
+    const el2 = el.cloneNode() as DecoratorGemElement;
+    expect(el2.getAttribute('rank-attr')).to.equal('attr');
+    expect(el2.rankAttr).to.equal('attr');
+    expect(el2.propData).to.eql({ value: '' });
+  });
   it('装饰器定义的自定义元素', async () => {
     let a = 1;
     const el: DecoratorGemElement = await fixture(html`
@@ -104,12 +108,4 @@ describe('装饰器', () => {
     expect(el.renderCount).to.equal(3);
     expect(a).to.equal(2);
   });
-
-  it('装饰器和静态属性共存', async () => {
-    const el: DecoratorGemElement2 = await fixture(html`<decorator-gem-demo2></decorator-gem-demo2>`);
-    updateStore(store, { a: 3 });
-    await Promise.resolve();
-    expect(el.renderCount).to.equal(2);
-    expect(el.shadowRoot?.adoptedStyleSheets.length).to.equal(1);
-  });
 });

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

@@ -1,12 +1,13 @@
 import { expect, fixture } from '@open-wc/testing';
 
-import { customElement, property, RefObject, refobject } from '../../lib/decorators';
+import { attribute, customElement, property, RefObject, refobject } from '../../lib/decorators';
 import { GemElement, html } from '../../lib/element';
 
 @customElement('app-children')
 export class Children extends GemElement {
   @refobject inputRef: RefObject<HTMLInputElement>;
   @property value?: { value: number };
+  @attribute attr: string;
 
   render() {
     return html`<input ref=${this.inputRef.ref} />`;
@@ -19,13 +20,13 @@ export class App extends GemElement {
   @refobject childrenRef2: RefObject<Children>;
   render() {
     return html`
-      <app-children ref=${this.childrenRef1.ref} .value=${{ value: 1 }}></app-children>
-      <app-children ref=${this.childrenRef2.ref} .value=${{ value: 2 }}></app-children>
+      <app-children ref=${this.childrenRef1.ref} .value=${{ value: 1 }} attr="1"></app-children>
+      <app-children ref=${this.childrenRef2.ref} .value=${{ value: 2 }} attr="2"></app-children>
     `;
   }
 }
-describe('多个 gem element', () => {
-  it('ref & prop', async () => {
+describe('多个 gem element 一起工作', () => {
+  it('ref & prop & attr', async () => {
     const el: App = await fixture(html`<app-root></app-root>`);
     const children1 = el.childrenRef1.element!;
     const children2 = el.childrenRef2.element!;
@@ -34,5 +35,7 @@ describe('多个 gem element', () => {
     expect(input1 !== input2).to.equal(true);
     expect(children1.value).to.eql({ value: 1 });
     expect(children2.value).to.eql({ value: 2 });
+    expect(children1.attr).to.eql('1');
+    expect(children2.attr).to.eql('2');
   });
 });

package/src/test/store.test.ts

@@ -1,6 +1,6 @@
 import { expect, aTimeout } from '@open-wc/testing';
 
-import { StoreListenerMap, createStore, createStoreSet, updateStore, connect, disconnect } from '../lib/store';
+import { StoreListenerMap, createStore, updateStore, connect, disconnect } from '../lib/store';
 
 describe('store 测试', () => {
   it('create store', () => {
@@ -8,8 +8,6 @@ describe('store 测试', () => {
     const store = createStore(origin);
     expect(store).to.equal(origin);
     expect(!!StoreListenerMap.get(store)).to.equal(true);
-    const stores = createStoreSet({ a: {} });
-    expect(!!StoreListenerMap.get(stores.a)).to.equal(true);
   });
   it('update store', async () => {
     const store = createStore({ a: 1 });