@mantou/gem 2.0.0 → 2.1.1

package/src/lib/history.ts

@@ -1,6 +1,6 @@
 // https://github.com/WICG/navigation-api#stakeholder-feedback
 
-import { connect, useStore } from './store';
+import { connect, createStore } 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, updateHistoryStore] = useStore<HistoryState>({
+const store = createStore<HistoryState>({
   $hasCloseHandle: false,
   $hasOpenHandle: false,
   $hasShouldCloseHandle: false,
@@ -103,7 +103,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
   paramsMap.set(state.$key, params);
   dispatchBeforeChangeEvent();
   cleanObject(store);
-  updateHistoryStore(state);
+  store(state);
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state, title, url);
@@ -123,7 +123,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   paramsMap.set(state.$key, params);
   dispatchBeforeChangeEvent();
   cleanObject(store);
-  updateHistoryStore(state);
+  store(state);
   const url = getUrlBarPath(pathname) + params.query + hash;
   const prevHash = location.hash;
   native(state, title, url);
@@ -131,7 +131,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   if (prevHash !== hash) window.dispatchEvent(new CustomEvent('hashchange'));
 }
 
-const [gemBasePathStore, updateBasePathStore] = useStore({
+const gemBasePathStore = createStore({
   basePath: '',
 });
 
@@ -147,7 +147,7 @@ class GemHistory extends EventTarget {
   }
   set basePath(basePath: string) {
     // 应用初始化的时候设置
-    updateBasePathStore({ basePath });
+    gemBasePathStore({ basePath });
     // paramsMap 更新后 ui 才会更新
     Object.assign(paramsMap.get(store.$key)!, { path: getInternalPath(location.pathname) });
   }
@@ -156,7 +156,7 @@ class GemHistory extends EventTarget {
   }
   updateParams(params: UpdateHistoryParams) {
     Object.assign(paramsMap.get(store.$key)!, params);
-    updateHistoryStore();
+    store();
   }
   push(params: UpdateHistoryParams) {
     updateHistory(params, nativePushState);
@@ -183,7 +183,7 @@ class GemHistory extends EventTarget {
 // `<gem-**>` 只读写父应用 `basePath`
 const gemHistory = new GemHistory();
 
-const [gemTitleStore, updateTitleStore] = useStore({ defaultTitle: document.title, url: '', title: '' });
+const gemTitleStore = createStore({ defaultTitle: document.title, url: '', title: '' });
 
 const _GEMHISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
 
@@ -217,7 +217,7 @@ if (!window._GEMHISTORY) {
     // 支持在 `data:` `blob:` 中 `import`
     if (protocol.startsWith('http')) gemHistory.replace({ path: pathname, query: search, hash });
   } else if (nativeHistory.state.$hasCloseHandle) {
-    updateHistoryStore(nativeHistory.state);
+    store(nativeHistory.state);
     const params = normalizeParams({ title: document.title });
     paramsMap.set(store.$key, params);
     // 有 handle 返回键的页面刷新需要清除返回 handler
@@ -225,7 +225,7 @@ if (!window._GEMHISTORY) {
   } else {
     // 有 gem 历史的正常普通刷新, 储存 params
     const params = normalizeParams({ title: document.title, hash: location.hash });
-    updateHistoryStore({
+    store({
       $key: getKey(),
       ...(nativeHistory.state || {}),
     });
@@ -242,7 +242,7 @@ if (!window._GEMHISTORY) {
   connect(store, () => {
     const { title } = gemHistory.getParams();
     if (title !== gemTitleStore.title) {
-      updateTitleStore({ title });
+      gemTitleStore({ title });
     }
   });
 
@@ -312,7 +312,7 @@ if (!window._GEMHISTORY) {
 
     dispatchBeforeChangeEvent();
     cleanObject(store);
-    updateHistoryStore(newState);
+    store(newState);
   });
 }
 

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,26 @@
-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);
 }
 
+// 注意 typeof state === 'function' 但是没有 Function 的方法和属性
+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 +164,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 +255,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/lib/version.ts

@@ -1,2 +1 @@
-// Do not modify manually
-export const version = '0.0.0';
+export const version = '2.1.1';

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

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021-present
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/helper/react-shim.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { Store } from '../lib/store';
-/**
- * `<gem-route>.routes.getContent`
- */
-export declare function renderReactNode(ele: any, node: ReactNode): void;
-/**
- * Same as `@connectStore`
- */
-export declare function connectStore<T extends object>(store: Store<T>): void;
-/**
- * Warning: https://github.com/facebook/react/issues/25675
- */
-export declare function useReactNode(node: ReactNode): any;
-//# sourceMappingURL=react-shim.d.ts.map

package/helper/react-shim.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-shim.d.ts","sourceRoot":"","sources":["../src/helper/react-shim.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAE,KAAK,EAAW,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,QAgBxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,QAG7D;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,OAe3C"}

package/helper/react-shim.js

@@ -1,56 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import { useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import { createRoot } from 'react-dom/client';
-import { connect } from '../lib/store';
-/**
- * `<gem-route>.routes.getContent`
- */
-export function renderReactNode(ele, node) {
-    var _a;
-    (_a = ele.react) === null || _a === void 0 ? void 0 : _a.unmount();
-    ele.react = createRoot(ele);
-    // async
-    ele.react.render(node);
-    // override
-    const routeEle = ele instanceof HTMLElement ? ele : ele.host;
-    const originUnmounted = routeEle.unmounted;
-    if (!(originUnmounted === null || originUnmounted === void 0 ? void 0 : originUnmounted.react)) {
-        routeEle.unmounted = () => {
-            originUnmounted === null || originUnmounted === void 0 ? void 0 : originUnmounted.apply(routeEle);
-            ele.react.unmount();
-        };
-        routeEle.unmounted.react = true;
-    }
-}
-/**
- * Same as `@connectStore`
- */
-export function connectStore(store) {
-    const [_, update] = useState({});
-    useEffect(() => connect(store, () => update({})), []);
-}
-/**
- * Warning: https://github.com/facebook/react/issues/25675
- */
-export function useReactNode(node) {
-    const ref = useRef();
-    // Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
-    useEffect(() => () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.root.unmount(); }, []);
-    if (ref.current) {
-        ref.current.root.render(node);
-        return ref.current.container;
-    }
-    const container = document.createElement('div');
-    container.style.display = 'contents';
-    const root = createRoot(container);
-    ref.current = { root, container };
-    // Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.
-    root.render(node);
-    return container;
-}
-//# sourceMappingURL=react-shim.js.map

package/helper/react-shim.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-shim.js","sourceRoot":"","sources":["../src/helper/react-shim.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,aAAa;AACb,gDAAgD;AAChD,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,6DAA6D;AAC7D,aAAa;AACb,gDAAgD;AAChD,OAAO,EAAQ,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAS,OAAO,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,GAAQ,EAAE,IAAe;;IACvD,MAAA,GAAG,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;IACrB,GAAG,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,QAAQ;IACR,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEvB,WAAW;IACX,MAAM,QAAQ,GAAG,GAAG,YAAY,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,MAAM,eAAe,GAAG,QAAQ,CAAC,SAAS,CAAC;IAC3C,IAAI,CAAC,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,CAAA,EAAE,CAAC;QAC5B,QAAQ,CAAC,SAAS,GAAG,GAAG,EAAE;YACxB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;YACjC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACtB,CAAC,CAAC;QACF,QAAQ,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;IAClC,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAmB,KAAe;IAC5D,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACxD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,IAAe;IAC1C,MAAM,GAAG,GAAG,MAAM,EAA0C,CAAC;IAC7D,4MAA4M;IAC5M,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,IAAI,CAAC,OAAO,EAAE,CAAA,EAAA,EAAE,EAAE,CAAC,CAAC;IACvD,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;QAChB,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC;IAC/B,CAAC;IACD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;IACrC,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,GAAG,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAClC,oMAAoM;IACpM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,SAAS,CAAC;AACnB,CAAC"}