@mantou/gem 2.0.0-alpha.1 → 2.1.0

package/src/lib/store.ts

@@ -1,40 +1,20 @@
-import type { NonPrimitive } from './utils';
-import { addMicrotask, GemError } from './utils';
+import { addMicrotask, createUpdater } from './utils';
 
-export const StoreListenerMap = new WeakMap<NonPrimitive, Set<() => void>>();
+export type Store<T = any> = ReturnType<typeof createUpdater<T>>;
 
-// 限制 `updateStore` 的参数类型
-export type Store<T> = T & { '': string };
+export const StoreListenerMap = new WeakMap<Store<any>, Set<() => void>>();
 
-export function createStore<T extends NonPrimitive>(originStore: T) {
-  if (StoreListenerMap.has(originStore)) {
-    throw new GemError('argument error');
-  }
-  StoreListenerMap.set(originStore, new Set<() => void>());
-  return originStore as Store<T>;
-}
-
-export function updateStore<T extends NonPrimitive>(store: Store<T>, value?: Partial<T>) {
-  Object.assign(store, value);
-  StoreListenerMap.get(store)?.forEach((func) => {
-    addMicrotask(func);
+export function createStore<T = any>(originStore: T) {
+  const store = createUpdater(originStore, (value?: Partial<T>) => {
+    Object.assign(store, value);
+    StoreListenerMap.get(store)?.forEach((func) => addMicrotask(func));
   });
+  StoreListenerMap.set(store, new Set<() => void>());
+  return store;
 }
 
-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) {
+export function connect(store: Store<any>, 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) {
-  const listeners = StoreListenerMap.get(store);
-  listeners?.delete(func);
+  return () => listeners?.delete(func);
 }

package/src/lib/utils.ts

@@ -1,18 +1,25 @@
-let microtaskSet = new Set<() => void>();
+const { assign, setPrototypeOf, fromEntries, entries, keys } = Object;
+
+const microtaskSet = new Set<() => void>();
 export function addMicrotask(func: () => void) {
-  if (typeof func !== 'function') return;
-  if (!microtaskSet.size) {
-    // delayed execution callback after updating store
-    globalThis.queueMicrotask(() => {
-      const set = microtaskSet;
-      microtaskSet = new Set();
-      set.forEach((f) => f());
-    });
-  }
-  microtaskSet.delete(func);
+  if (microtaskSet.has(func)) return;
+  queueMicrotask(() => {
+    microtaskSet.delete(func);
+    func();
+  });
   microtaskSet.add(func);
 }
 
+export function createUpdater<T, Fn = (payload?: Partial<T>) => any>(initState: T, fn: Fn) {
+  const state: any = fn;
+  setPrototypeOf(state, null);
+  delete state.name;
+  delete state.length;
+  assign(state, initState);
+  // TODO: type
+  return state as Fn & T;
+}
+
 // 不编码 hash 用于比较
 export function absoluteLocation(currentPath = '', relativePath = '') {
   const { pathname, search, hash } = new URL(relativePath, location.origin + currentPath);
@@ -156,11 +163,11 @@ export class QueryString extends URLSearchParams {
   concat(param: any) {
     let query: any;
     if (typeof param === 'string') {
-      query = Object.fromEntries(new URLSearchParams(param).entries());
+      query = fromEntries(new URLSearchParams(param).entries());
     } else {
       query = param;
     }
-    Object.entries(query).forEach(([key, value]) => {
+    entries(query).forEach(([key, value]) => {
       this.append(key, this.#stringify(value));
     });
   }
@@ -247,7 +254,7 @@ export function kebabToCamelCase(str: string) {
 }
 
 export function cleanObject<T extends Record<string, unknown>>(o: T) {
-  Object.keys(o).forEach((key: keyof T) => {
+  keys(o).forEach((key: keyof T) => {
     delete o[key];
   });
   return o;

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

@@ -10,7 +10,7 @@ import { fixture, expect, nextFrame } from '@open-wc/testing';
 
 import type { Metadata } from '../../lib/element';
 import { createCSSSheet, createState, GemElement, html, createRef } from '../../lib/element';
-import { createStore, updateStore } from '../../lib/store';
+import { createStore } from '../../lib/store';
 import {
   attribute,
   property,
@@ -45,7 +45,7 @@ describe('异步 gem element 测试', () => {
   it('异步 gem element 更新', async () => {
     const el: AsyncGemDemo = await fixture(html`<async-gem-demo></async-gem-demo>`);
     expect(el.renderCount).to.equal(1);
-    updateStore(store, { a: ++store.a });
+    store({ a: ++store.a });
     el.internals.stateList[0]({ a: ++(el.internals.stateList[0] as any).a });
     await nextFrame();
     expect(el.renderCount).to.equal(2);

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

@@ -1,7 +1,7 @@
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
 import { createCSSSheet, createState, GemElement, html } from '../../lib/element';
-import { createStore, updateStore } from '../../lib/store';
+import { createStore } from '../../lib/store';
 import { css } from '../../lib/utils';
 import {
   adoptedStyle,
@@ -142,8 +142,8 @@ describe('基本 gem element 测试', () => {
   it('更新 store', async () => {
     const a = store.a;
     const el: GemDemo = await fixture(html`<gem-demo></gem-demo>`);
-    updateStore(store, { a: ++store.a });
-    updateStore(store, { a: ++store.a });
+    store({ a: ++store.a });
+    store({ a: ++store.a });
     expect(store.a).to.equal(a + 2);
     expect(el.renderCount).to.equal(1);
     await Promise.resolve();

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

@@ -2,7 +2,7 @@ import { fixture, expect } from '@open-wc/testing';
 
 import type { Metadata } from '../../lib/element';
 import { createCSSSheet, GemElement, html, createRef } from '../../lib/element';
-import { createStore, updateStore } from '../../lib/store';
+import { createStore } from '../../lib/store';
 import { css } from '../../lib/utils';
 import type { Emitter } from '../../lib/decorators';
 import {
@@ -81,10 +81,10 @@ describe('装饰器', () => {
         rank-count="2"
       ></decorator-gem-demo>
     `);
-    updateStore(store, { a: 1 });
+    store({ a: 1 });
     await Promise.resolve();
     const metadata: Metadata = Reflect.get(DecoratorGemElement, Symbol.metadata);
-    expect(metadata.observedStores).to.eql([{ a: 1 }]);
+    expect({ ...metadata.observedStores.at(0) }).to.eql({ a: 1 });
     expect(metadata.observedAttributes).to.eql(['rank-attr', 'rank-disabled', 'rank-count']);
     expect(metadata.definedEvents).to.eql(['say-hi']);
     expect(metadata.definedCSSStates).to.eql(['open-state']);
@@ -102,7 +102,7 @@ describe('装饰器', () => {
     expect(el.inputRef.ref.startsWith('ref-')).to.equal(true);
     expect(el.bodySlot).to.equal('body-slot');
     expect(el).shadowDom.to.equal('attr: attr, disabled: true, count: 2, prop: prop');
-    updateStore(store, { a: 3 });
+    store({ a: 3 });
     await Promise.resolve();
     expect(el.renderCount).to.equal(3);
     el.sayHi(2);

package/src/test/store.test.ts

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

package/src/test/utils.test.ts

@@ -112,7 +112,7 @@ describe('utils 测试', () => {
     });
     expect(cssSheet.scroll.startsWith('scroll')).to.true;
     const rules = cssSheet[SheetToken].getStyle().cssRules;
-    expect(rules.item(0).selectorText).to.equal(':scope, :host');
+    expect(rules.item(0).selectorText).to.equal(':where(:scope:not([hidden])), :host(:where(:not([hidden])))');
     expect(rules.item(1).selectorText.startsWith('.scroll')).to.true;
     expect(rules.item(1).style.background).to.equal('red');
     expect(rules.item(1).cssRules.item(0).selectorText).to.equal('&:hover *');