@mantou/gem 2.0.0 → 2.1.0

package/src/elements/base/title.ts

@@ -14,7 +14,7 @@
 
 import { GemElement, html } from '../../lib/element';
 import { attribute, boolattribute, effect, mounted, shadow } from '../../lib/decorators';
-import { updateStore, connect } from '../../lib/store';
+import { connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
 
 // 避免重定向时的中间状态标题
@@ -50,7 +50,7 @@ export class GemTitleElement extends GemElement {
   static title = document.title;
 
   static setTitle(title: string) {
-    updateStore(titleStore, { title });
+    titleStore({ title });
   }
 
   @effect((i) => [i.inert])

package/src/helper/i18n.ts

@@ -113,6 +113,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     this.onChange?.(lang);
   }
 
+  #inConstructor = true;
   constructor(options: I18nOptions<T>) {
     if (!options.resources[options.fallbackLanguage]) {
       throw new GemError('i18n: fallbackLanguage invalid');
@@ -139,6 +140,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     } else {
       this.resetLanguage();
     }
+    this.#inConstructor = false;
   }
 
   get(s: keyof T): string;
@@ -207,14 +209,15 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     }
     this.resources[lang] = pack;
 
-    // update all element
-    const temp: Element[] = [document.documentElement];
-    while (!!temp.length) {
-      const element = temp.pop()!;
-      (element as any)[UpdateToken]?.();
-      if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
-      if (element.firstElementChild) temp.push(element.firstElementChild);
-      if (element.nextElementSibling) temp.push(element.nextElementSibling);
+    if (!this.#inConstructor) {
+      // 更新所有元素，可能会更新许多不必要的元素
+      const temp: Element[] = [document.documentElement];
+      while (!!temp.length) {
+        const element = temp.pop()!;
+        (element as any)[UpdateToken]?.();
+        // 和 gem 更新机制一样使用深度优先
+        temp.push(...[...element.children, ...(element.shadowRoot?.children || [])].reverse());
+      }
     }
 
     if (lang !== this.currentLanguage) {

package/src/helper/theme.ts

@@ -1,14 +1,15 @@
 import type { Store } from '../lib/store';
-import { connect, useStore } from '../lib/store';
-import { camelToKebabCase, randomStr } from '../lib/utils';
+import { connect, createStore } from '../lib/store';
+import { camelToKebabCase, createUpdater, randomStr } from '../lib/utils';
 import type { GemElement } from '../lib/element';
 import { SheetToken, createCSSSheet } from '../lib/element';
 
-export type Theme<T> = ReturnType<typeof createCSSSheet> & {
-  [K in keyof T as K extends `${string}Color`
-    ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
-    : K]: T[K];
-};
+export type Theme<T> = ReturnType<typeof createUpdater<T>> &
+  ReturnType<typeof createCSSSheet> & {
+    [K in keyof T as K extends `${string}Color`
+      ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
+      : K]: T[K];
+  };
 
 const themeStoreMap = new WeakMap();
 const themePropsMap = new WeakMap();
@@ -23,12 +24,12 @@ export function getThemeProps<T>(theme: Theme<T>) {
   return themePropsMap.get(theme) as Theme<T>;
 }
 
-function useThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
+function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
   const salt = randomStr();
   const styleSheet = createCSSSheet({})[SheetToken];
-  const [store, updateStore] = useStore<T>(themeObj);
+  const store = createStore<T>(themeObj);
   const theme: any = new Proxy(
-    { [SheetToken]: styleSheet },
+    createUpdater({ [SheetToken]: styleSheet }, (payload: Partial<T>) => store(payload)),
     {
       get(target: any, key: string) {
         if (!target[key]) {
@@ -58,41 +59,41 @@ function useThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props
     updateContent();
     styleSheet.updateStyle();
   });
-  return [theme as Theme<T>, updateStore] as const;
+  return theme as Theme<T>;
 }
 
 /**
  * 用于 `@adoptedStyle(theme)`，类似 `createCSSSheet`
  */
-export function useScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
-  return useThemeFromProps(themeObj);
+export function createScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
+  return createThemeFromProps(themeObj);
 }
 
-/**全局主题 */
-export function useTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const result = useScopedTheme(themeObj);
-  document.adoptedStyleSheets.push(result[0][SheetToken].getStyle());
+/** 全局主题 */
+export function createTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const result = createScopedTheme(themeObj);
+  document.adoptedStyleSheets.push(result[SheetToken].getStyle());
   return result;
 }
 
-/**用来覆盖全局主题 */
-export function useOverrideTheme<T extends Record<string, unknown>>(theme: Theme<T>, themeObj: Partial<T>) {
-  return useThemeFromProps(themeObj, getThemeProps(theme));
+/** 用来覆盖全局主题 */
+export function createOverrideTheme<T extends Record<string, unknown>>(theme: Theme<T>, themeObj: Partial<T>) {
+  return createThemeFromProps(themeObj, getThemeProps(theme));
 }
 
-export function useDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const [themeAsKeys] = useThemeFromProps(themeObj);
+export function createDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const themeAsKeys = createThemeFromProps<T>(themeObj);
   const props = getThemeProps(themeAsKeys);
-  const updateDecorator =
+  const update =
     <E extends GemElement, V extends () => T, K = any[] | undefined>(
       getDep?: K extends readonly any[] ? (instance: E) => K : undefined,
     ) =>
     (_: any, { addInitializer, access }: ClassFieldDecoratorContext<E, V> | ClassMethodDecoratorContext<E, V>) => {
       addInitializer(function (this: E) {
-        const [theme, update] = useThemeFromProps({ ...themeObj }, props);
+        const theme = createThemeFromProps({ ...themeObj }, props);
         this.internals.sheets.push(theme[SheetToken].getStyle(this));
-        this.memo(() => update(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
+        this.memo(() => theme(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
       });
     };
-  return [themeAsKeys, updateDecorator] as const;
+  return createUpdater(themeAsKeys, update) as ReturnType<typeof createUpdater<typeof themeAsKeys, typeof update>>;
 }

package/src/lib/decorators.ts

@@ -456,7 +456,7 @@ export function adoptedStyle(sheet: ReturnType<typeof createCSSSheet>) {
  *  class App extends GemElement {}
  * ```
  */
-export function connectStore(store: Store<unknown>) {
+export function connectStore(store: Store<any>) {
   return function (_: unknown, context: ClassDecoratorContext) {
     pushStaticField(context, 'observedStores', store);
   };

package/src/lib/element.ts

@@ -5,7 +5,7 @@ import type { GemReflectElement } from '../elements/reflect';
 
 import type { Store } from './store';
 import { connect } from './store';
-import { LinkedList, addMicrotask, isArrayChange, addListener, randomStr } from './utils';
+import { LinkedList, addMicrotask, isArrayChange, addListener, randomStr, createUpdater } from './utils';
 
 export { html, svg, render, directive, TemplateResult, SVGTemplateResult } from 'lit-html';
 
@@ -29,7 +29,7 @@ declare global {
   }
 }
 
-const { assign, defineProperty, setPrototypeOf } = Object;
+const { assign, defineProperty } = Object;
 
 defineProperty(Symbol, 'metadata', { value: Symbol.for('Symbol.metadata') });
 
@@ -177,8 +177,9 @@ export function createCSSSheet<T extends Record<string, string>>(
     Object.keys(rules).forEach((key) => {
       const isScope = key === '$';
       // 对于已经有 `-` 的保留原始 key，支持覆盖修改
+      // :scope 下可以写嵌套样式 &:xxx，:host() 下不行（子内容可以）
       sheet[key] = isScope || key.includes('-') ? key : `${key}-${randomStr()}`;
-      style += `${isScope ? ':scope,:host' : `.${sheet[key]}`} {${rules[key]}}`;
+      style += `${isScope ? ':where(:scope:not([hidden])),:host(:where(:not([hidden])))' : `.${sheet[key]}`} {${rules[key]}}`;
     });
   }
   styleSheet.setContent(style);
@@ -221,7 +222,7 @@ const appleCSSStyleSheet = (ele: HTMLElement, sheets: CSSStyleSheet[]) => {
 };
 
 /**必须使用在字段中，否则会读取到错误的实例 */
-export let createState: <T>(initState: T) => T & ((state: Partial<T>) => void);
+export let createState: <T>(initState: T) => ReturnType<typeof createUpdater<T>>;
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
@@ -273,7 +274,7 @@ export type Metadata = Partial<ShadowRootInit> & {
     }
   >;
   // 实例化时使用到，DevTools 需要读取
-  observedStores: Store<unknown>[];
+  observedStores: Store<any>[];
   adoptedStyleSheets?: Sheet<unknown>[];
   // 以下静态字段仅供外部读取，没有实际作用
   observedProperties?: string[];
@@ -331,17 +332,13 @@ export abstract class GemElement extends HTMLElement {
   static {
     createState = <T>(initState: T) => {
       const ele = currentConstructGemElement;
-      const state: any = (payload: Partial<T>) => {
+      const state = createUpdater(initState, (payload) => {
         assign(state, payload);
         // 避免无限刷新
         if (!ele.#rendering) addMicrotask(ele.#update);
-      };
-      setPrototypeOf(state, null);
-      delete state.name;
-      delete state.length;
+      });
       ele.#internals.stateList.push(state);
-      assign(state, initState);
-      return state as T & ((this: GemElement, state: Partial<T>) => void);
+      return state;
     };
     createRef = () => new RefObject(currentConstructGemElement);
     createTemplate = (ele, item) => ele.#renderList.push(item);

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