@mantou/gem 1.7.6 → 1.7.8

package/lib/store.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAgB,MAAM,SAAS,CAAC;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,OAAO,EAAiC,CAAC;AAK7E,MAAM,UAAU,WAAW,CAAyB,WAAc;IAChE,IAAI,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QACtC,MAAM,IAAI,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IACvC,CAAC;IACD,gBAAgB,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,GAAG,EAAc,CAAC,CAAC;IACzD,OAAO,WAAuB,CAAC;AACjC,CAAC;AAQD,MAAM,UAAU,cAAc,CAA2B,cAAiB;IACxE,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACnB,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,cAA6B,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,WAAW,CAAyB,KAAe,EAAE,KAAkB;IACrF,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC5B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1B,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,OAAO,CAAyB,KAAe,EAAE,IAAgB;IAC/E,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,IAAI,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,UAAU,CAAyB,KAAe,EAAE,IAAgB;IAClF,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAgB,MAAM,SAAS,CAAC;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,OAAO,EAAiC,CAAC;AAK7E,MAAM,UAAU,WAAW,CAAyB,WAAc;IAChE,IAAI,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QACtC,MAAM,IAAI,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IACvC,CAAC;IACD,gBAAgB,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,GAAG,EAAc,CAAC,CAAC;IACzD,OAAO,WAAuB,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,WAAW,CAAyB,KAAe,EAAE,KAAkB;;IACrF,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC5B,MAAA,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,0CAAE,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,QAAQ,CAAyB,WAAc;IAC7D,MAAM,KAAK,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,KAAK,EAAE,CAAC,KAAkB,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAU,CAAC;AAC7E,CAAC;AAED,MAAM,UAAU,OAAO,CAAyB,KAAe,EAAE,IAAgB;IAC/E,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,IAAI,CAAC,CAAC;IACrB,OAAO,GAAG,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,IAAI,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,UAAU,CAAyB,KAAe,EAAE,IAAgB;IAClF,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "1.7.6";
+export declare const version = "1.7.8";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -1,2 +1,2 @@
-export const version = '1.7.6';
+export const version = '1.7.8';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantou/gem",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "💎 使用自定义元素的轻量级 WebApp 开发框架",
   "keywords": [
     "frontend",

package/src/elements/base/gesture.ts

@@ -75,6 +75,7 @@ export class GemGestureElement extends GemElement {
     this.addEventListener('pointerdown', this.#onStart);
     this.addEventListener('pointermove', this.#onMoveSet);
     this.addEventListener('pointerup', this.#onEnd);
+    this.addEventListener('pointerleave', this.#onEnd); // 有时候 up 没有触发？
     this.addEventListener('pointercancel', this.#onEnd);
     this.addEventListener('dragstart', (evt) => evt.preventDefault());
   }

package/src/elements/base/title.ts

@@ -14,13 +14,13 @@
  */
 
 import { GemElement, html } from '../../lib/element';
-import { attribute, connectStore } from '../../lib/decorators';
+import { attribute, boolattribute } from '../../lib/decorators';
 import { updateStore, connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
 
 const defaultTitle = document.title;
 
-function updateTitle(str?: string | null, prefix = '', suffix = '') {
+function setDocumentTitle(str?: string | null, prefix = '', suffix = '') {
   const title = titleStore.title || str;
   if (title && title !== defaultTitle) {
     GemTitleElement.title = title;
@@ -31,18 +31,20 @@ function updateTitle(str?: string | null, prefix = '', suffix = '') {
   }
 }
 
+connect(titleStore, setDocumentTitle);
+
 export const PREFIX = `${defaultTitle} | `;
 export const SUFFIX = ` - ${defaultTitle}`;
 
 /**
- * 允许声明式设置 `document.title`
+ * 映射到 `document.title`
  * @attr prefix
  * @attr suffix
  */
-@connectStore(titleStore)
 export class GemTitleElement extends GemElement {
   @attribute prefix: string;
   @attribute suffix: string;
+  @boolattribute inert: boolean;
 
   // 没有后缀的当前标题
   static title = document.title;
@@ -64,15 +66,16 @@ export class GemTitleElement extends GemElement {
     });
   }
 
+  mounted = () => {
+    this.effect(
+      () => !this.inert && connect(titleStore, this.update),
+      () => [this.inert],
+    );
+  };
+
   render() {
     // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
-    updateTitle(this.textContent, this.prefix, this.suffix);
-
-    if (this.hidden) {
-      return html``;
-    }
+    setDocumentTitle(this.textContent?.trim(), this.prefix, this.suffix);
     return html`${GemTitleElement.title}`;
   }
 }
-
-connect(titleStore, updateTitle);

package/src/helper/theme.ts

@@ -7,12 +7,14 @@ type SomeType<T> = {
 
 const themeStoreMap = new WeakMap();
 
+/**获取主题原始值 */
 export function getThemeStore<T>(theme: SomeType<T>) {
   return themeStoreMap.get(theme) as Store<T>;
 }
 
 const themePropsMap = new WeakMap();
 
+/**获取 css 变量名 */
 export function getThemeProps<T>(theme: SomeType<T>) {
   return themePropsMap.get(theme) as SomeType<T>;
 }
@@ -62,3 +64,8 @@ export function updateTheme<T = Record<string, unknown>>(theme: SomeType<T>, new
   updateStore(getThemeStore(theme), newThemeObj);
   setThemeFnMap.get(theme)();
 }
+
+export function useTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const theme = createTheme(themeObj);
+  return [theme, (newThemeObj: Partial<T>) => updateTheme(theme, newThemeObj)] as const;
+}

package/src/lib/element.ts

@@ -2,7 +2,7 @@ import { html, render, TemplateResult } from 'lit-html';
 
 import type { GemReflectElement } from '../elements/reflect';
 
-import { connect, disconnect, Store } from './store';
+import { connect, Store } from './store';
 import {
   LinkedList,
   addMicrotask,
@@ -289,15 +289,19 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   /**
    * @lifecycle
-   * 返回 null 时渲染 lit-html 定义的空内容
-   * 返回 undefined 时不会调用 `render()`
+   *
+   * - 不提供 `render` 时显示子内容
+   * - 返回 `null` 时渲染空内容
+   * - 返回 `undefined` 时不会调用 `render()`, 也就是不会更新以前的内容
    * */
   render?(): TemplateResult | null | undefined;
 
   #render = () => {
     this.#execMemo();
-    if (this.render) return this.render();
-    return this.#renderRoot === this ? undefined : html`<slot></slot>`;
+    const isLight = this.#renderRoot === this;
+    const temp = this.render ? this.render() : isLight ? undefined : html`<slot></slot>`;
+    if (temp === undefined) return;
+    render(temp, this.#renderRoot);
   };
 
   /**@lifecycle */
@@ -311,8 +315,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   #updateCallback = () => {
     if (this.#isMounted && this.#shouldUpdate()) {
-      const temp = this.#render();
-      temp !== undefined && render(temp, this.#renderRoot);
+      this.#render();
       addMicrotask(this.#updated);
       addMicrotask(this.#execEffect);
     }
@@ -359,6 +362,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     return GemElement.#final;
   }
 
+  #disconnectStore?: (() => void)[];
   #connectedCallback = () => {
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
@@ -370,15 +374,16 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
     this.willMount?.();
     const { observedStores, rootElement } = this.constructor as typeof GemElement;
-    observedStores?.forEach((store) => {
-      connect(store, this.#update);
-    });
-    const temp = this.#render();
-    temp !== undefined && render(temp, this.#renderRoot);
+    this.#disconnectStore = observedStores?.map((store) => connect(store, this.#update));
+    this.#render();
     this.#isMounted = true;
     this.#unmountCallback = this.mounted?.();
     this.#initEffect();
-    if (rootElement && (this.getRootNode() as ShadowRoot).host?.tagName !== rootElement.toUpperCase()) {
+    if (
+      rootElement &&
+      this.isConnected &&
+      (this.getRootNode() as ShadowRoot).host?.tagName !== rootElement.toUpperCase()
+    ) {
       throw new GemError(`not allow current root type`);
     }
   };
@@ -406,10 +411,10 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   /**
    * @private
    * @final
-   * use `mounted`
+   * use `mounted`; 允许手动调用 `connectedCallback` 以清除装饰器定义的字段
    */
   connectedCallback() {
-    if (this.#isAsync) {
+    if (this.isConnected && this.#isAsync) {
       asyncRenderTaskList.add(this.#connectedCallback);
     } else {
       this.#connectedCallback();
@@ -436,10 +441,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       return;
     }
     this.#isMounted = false;
-    const { observedStores } = this.constructor as typeof GemElement;
-    observedStores?.forEach((store) => {
-      disconnect(store, this.#update);
-    });
+    this.#disconnectStore?.forEach((disconnect) => disconnect());
     execCallback(this.#unmountCallback);
     this.unmounted?.();
     this.#effectList?.forEach(({ preCallback }) => execCallback(preCallback));

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.8';

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;
+    // v2 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);
+    // v2 BUG
+    expect(el.rankAttr).to.equal('');
+    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 });