@mantou/gem 1.7.1 → 1.7.2

package/src/elements/base/title.ts

@@ -27,26 +27,23 @@ export class GemTitleElement extends GemElement {
   // 没有后缀的标题
   static title = document.title;
   static defaultTitle = document.title;
+  static defaultPrefix = `${document.title} | `;
   static defaultSuffix = ` - ${document.title}`;
 
   static setTitle(title: string) {
     updateStore(titleStore, { title });
   }
 
-  static updateTitle(str = '', suffix = '') {
-    const { title } = titleStore;
-    if (title && title !== GemTitleElement.defaultTitle) {
-      GemTitleElement.title = title;
-      document.title = GemTitleElement.title + suffix;
-    } else if (str) {
-      GemTitleElement.title = str;
-      document.title = GemTitleElement.title + suffix;
+  static updateTitle(title = titleStore.title, prefix = '', suffix = '') {
+    if (title === GemTitleElement.defaultTitle) {
+      document.title = GemTitleElement.title = title;
     } else {
-      GemTitleElement.title = GemTitleElement.defaultTitle;
-      document.title = GemTitleElement.title;
+      GemTitleElement.title = title;
+      document.title = prefix + GemTitleElement.title + suffix;
     }
   }
 
+  @attribute prefix: string;
   @attribute suffix: string;
 
   constructor() {
@@ -56,7 +53,7 @@ export class GemTitleElement extends GemElement {
 
   render() {
     // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
-    GemTitleElement.updateTitle(this.textContent || '', this.suffix);
+    GemTitleElement.updateTitle(this.textContent || undefined, this.prefix, this.suffix);
 
     if (this.hidden) {
       return html``;

package/src/elements/base/use.ts

@@ -18,7 +18,7 @@ export class GemUseElement extends GemElement {
 
   @state active: boolean;
 
-  private getContent() {
+  #getContent = () => {
     const ele = this.element || (this.selector ? (this.root || document).querySelector(this.selector) : null);
     if (typeof ele === 'string') {
       let temp = eleCache.get(ele);
@@ -33,7 +33,7 @@ export class GemUseElement extends GemElement {
     } else {
       return ele?.cloneNode(true);
     }
-  }
+  };
 
   render() {
     return html`
@@ -48,7 +48,7 @@ export class GemUseElement extends GemElement {
           height: 100%;
         }
       </style>
-      ${this.getContent()}
+      ${this.#getContent()}
       <slot></slot>
     `;
   }

package/src/helper/mediaquery.ts

@@ -1,77 +1,78 @@
 // https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
 // https://mediag.com/news/popular-screen-resolutions-designing-for-all/
 
-const matche = (query: string) => window.matchMedia(query).matches;
+const match = (query: string) => window.matchMedia(query).matches;
 
 export const mediaQuery = {
   PRINT: 'print',
   get isPrint() {
-    return matche(this.PRINT);
+    return match(this.PRINT);
   },
+
   HOVER: '(hover: hover)',
   get isHover() {
-    return matche(this.HOVER);
-  },
-
-  PHONE: '(min-width: 319px) and (max-width: 480px)',
-  get isPhone() {
-    return matche(this.PHONE);
+    return match(this.HOVER);
   },
 
-  LAPTOP: '(min-width: 1023px) and (max-width: 1280px) and (orientation: landscape)',
-  get isLaptop() {
-    return matche(this.LAPTOP);
+  PWA: '(display-mode: standalone)',
+  // PWA: '(display-mode: browser)', // debugging
+  get isPWA() {
+    return match(this.PWA);
   },
 
-  DESKTOP: '(min-width: 1279px) and (orientation: landscape)',
-  get isDesktop() {
-    return matche(this.DESKTOP);
+  MOTION_REDUCE: '(prefers-reduced-motion: reduce)',
+  get isMotionReduce() {
+    return match(this.MOTION_REDUCE);
   },
 
-  WIDTHSCREEN: '(min-width: 1919px) and (orientation: landscape)',
-  get isWidthScreen() {
-    return matche(this.WIDTHSCREEN);
+  DATA_REDUCE: '(prefers-reduced-data: reduce)',
+  get isDataReduce() {
+    return match(this.DATA_REDUCE);
   },
 
-  PHONE_LANDSCAPE: '(min-width: 479px) and (max-width: 959px) and (orientation: landscape)',
-  // PHONE_LANDSCAPE: '(min-width: 481px) and (max-width: 959px)',
-  get isPhoneLandscape() {
-    return matche(this.PHONE_LANDSCAPE);
+  WATCH: '(width < 320px)',
+  get isWatch() {
+    return match(this.WATCH);
   },
 
-  TABLET: '(min-width: 768px) and (max-width: 1024px)',
-  get isTablet() {
-    return matche(this.TABLET);
+  SMALL_PHONE: '(320px <= width <= 480px) and (height <= 640px)',
+  get isSmallPhone() {
+    return match(this.SMALL_PHONE);
   },
 
-  SMALL_PHONE: '(min-width: 319px) and (max-width: 480px) and (max-height: 640px)',
-  get isSmallPhone() {
-    return matche(this.SMALL_PHONE);
+  PHONE: '(320px <= width <= 480px)',
+  get isPhone() {
+    return match(this.PHONE);
   },
 
-  WATCH: '(max-width: 319px)',
-  get isWatch() {
-    return matche(this.WATCH);
+  PHONE_LANDSCAPE: '(480px < width < 960px) and (orientation: landscape)',
+  // PHONE_LANDSCAPE: '(480px < width < 960px)',
+  get isPhoneLandscape() {
+    return match(this.PHONE_LANDSCAPE);
   },
 
-  SHORT: '(min-width: 479px) and (max-height: 320px)',
+  // Widget
+  SHORT: '(width >= 480px) and (height <= 320px)',
   get isShort() {
-    return matche(this.SHORT);
+    return match(this.SHORT);
   },
 
-  PWA: '(display-mode: standalone)',
-  // PWA: '(display-mode: browser)', // debugging
-  get isPWA() {
-    return matche(this.PWA);
+  // 1280 x 850
+  // 1024 x 768
+  TABLET: '(480px < width <= 1280px)',
+  get isTablet() {
+    return match(this.TABLET);
   },
 
-  MOTION_REDUCE: '(prefers-reduced-motion: reduce)',
-  get isMotionReduce() {
-    return matche(this.MOTION_REDUCE);
+  // 1366x768
+  DESKTOP: '(width > 1280px) and (orientation: landscape)',
+  get isDesktop() {
+    return match(this.DESKTOP);
   },
 
-  DATA_REDUCE: '(prefers-reduced-data: reduce)',
-  get isDataReduce() {
-    return matche(this.DATA_REDUCE);
+  // 1920x1080
+  WIDTHSCREEN: '(width >= 1920px) and (orientation: landscape)',
+  get isWidthScreen() {
+    return match(this.WIDTHSCREEN);
   },
 };

package/src/helper/theme.ts

@@ -11,21 +11,13 @@ export function getThemeStore<T>(theme: SomeType<T>) {
   return themeStoreMap.get(theme) as Store<T>;
 }
 
-const themePropMap = new WeakMap();
+const themePropsMap = new WeakMap();
 
-export function getThemeProp<T>(theme: SomeType<T>) {
-  return themePropMap.get(theme) as SomeType<T>;
+export function getThemeProps<T>(theme: SomeType<T>) {
+  return themePropsMap.get(theme) as SomeType<T>;
 }
 
-function replaceStyle(style: HTMLStyleElement, theme: Record<string, unknown>) {
-  const themeStore = themeStoreMap.get(theme);
-  const themeProp = themePropMap.get(theme);
-  const rules = Object.keys(themeStore).reduce((prev, key) => {
-    if (!themeStore[key] || !themeProp[key]) return prev;
-    return prev + `${themeProp[key]}:${themeStore[key]};`;
-  }, '');
-  style.textContent = `:root, :host {${rules}}`;
-}
+const setThemeFnMap = new WeakMap();
 
 /**
  * 创建主题，插入 `document.head`
@@ -39,17 +31,23 @@ function replaceStyle(style: HTMLStyleElement, theme: Record<string, unknown>) {
 export function createTheme<T extends Record<string, unknown>>(themeObj: T) {
   const salt = randomStr();
   const style = document.createElement('style');
-  const themeStore = createStore<T>(themeObj);
+  const store = createStore<T>(themeObj);
   const theme: Record<string, string> = {};
-  const themeProp: Record<string, string> = {};
-  themePropMap.set(theme, themeProp);
-  themeStoreMap.set(theme, themeStore);
-  Object.keys(themeStore).forEach((key) => {
-    themeProp[key] = `--${camelToKebabCase(key)}-${salt}`;
-    theme[key] = `var(${themeProp[key]})`;
-  });
-  const replace = () => replaceStyle(style, theme);
-  connect(themeStore, replace);
+  const props: Record<string, string> = {};
+  themePropsMap.set(theme, props);
+  themeStoreMap.set(theme, store);
+  const setTheme = () =>
+    Object.keys(store).forEach((key) => {
+      if (props[key]) return;
+      props[key] = `--${camelToKebabCase(key)}-${salt}`;
+      theme[key] = `var(${props[key]})`;
+    });
+  setThemeFnMap.set(theme, setTheme);
+  setTheme();
+  const getStyle = () =>
+    `:root, :host {${Object.keys(store).reduce((prev, key) => prev + `${props[key]}:${store[key]};`, '')}}`;
+  const replace = () => (style.textContent = getStyle());
+  connect(store, replace);
   replace();
   (document.head || document.documentElement).append(style);
   return theme as SomeType<T>;
@@ -61,6 +59,6 @@ export function createTheme<T extends Record<string, unknown>>(themeObj: T) {
  * @param newThemeObj 新主题
  */
 export function updateTheme<T = Record<string, unknown>>(theme: SomeType<T>, newThemeObj: Partial<T>) {
-  const store = getThemeStore(theme);
-  updateStore(store, newThemeObj);
+  updateStore(getThemeStore(theme), newThemeObj);
+  setThemeFnMap.get(theme)();
 }

package/src/lib/decorators.ts

@@ -191,7 +191,6 @@ export function adoptedStyle(style: Sheet<unknown>) {
  * ```
  */
 export function connectStore(store: Store<unknown>) {
-  // 这里的签名该怎么写？
   return function (cls: unknown) {
     const con = cls as GemElementConstructor;
     pushStaticField(con.prototype, 'observedStores', store);
@@ -203,7 +202,7 @@ export function connectStore(store: Store<unknown>) {
  *
  * For example
  * ```ts
- *  @rootElement(MyElement)
+ *  @rootElement('my-element')
  *  class App extends GemElement {}
  * ```
  */

package/src/lib/element.ts

@@ -13,7 +13,6 @@ import {
   kebabToCamelCase,
   PropProxyMap,
   removeItems,
-  useNativeCSSStyleSheet,
 } from './utils';
 import * as GemExports from './element';
 import * as VersionExports from './version';
@@ -30,16 +29,13 @@ declare global {
   interface ElementInternals extends ARIAMixin {
     // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
     states: Set<string>;
-    role?: string | null;
   }
   // 用于 css 选择器选择元素，使用 @refobject 自动选择获取
   // 必须使用 attr 赋值
   /**
    * @attr ref
-   * @attr inert
    */
   interface HTMLElement {
-    inert: boolean;
     ref: string;
   }
 }
@@ -88,6 +84,10 @@ export interface GemElementOptions {
 }
 
 export abstract class GemElement<T = Record<string, unknown>> extends HTMLElement {
+  // 禁止覆盖自定义元素原生生命周期方法
+  // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
+  static #final = Symbol();
+
   // 这里只是字段申明，不能赋值，否则子类会继承被共享该字段
   static observedAttributes?: string[]; // WebAPI 中是实时检查这个列表
   static booleanAttributes?: Set<string>;
@@ -119,16 +119,16 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   constructor({ isAsync, isLight, delegatesFocus, slotAssignment }: GemElementOptions = {}) {
     super();
-    (this as any)[constructorSymbol] = true;
 
     // 外部不可见，但允许类外面使用
-    addMicrotask(() => ((this as any)[initSymbol] = false));
-    (this as any)[initSymbol] = true;
-    (this as any)[updateSymbol] = () => {
+    addMicrotask(() => Reflect.set(this, initSymbol, false));
+    Reflect.set(this, constructorSymbol, true);
+    Reflect.set(this, initSymbol, true);
+    Reflect.set(this, updateSymbol, () => {
       if (this.#isMounted) {
         addMicrotask(this.#update);
       }
-    };
+    });
 
     this.#isAsync = isAsync;
     this.#renderRoot = isLight ? this : this.attachShadow({ mode: 'open', delegatesFocus, slotAssignment });
@@ -142,34 +142,10 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
         this.effect(
           () => {
             const root = this.getRootNode() as ShadowRoot | Document;
-            if (!useNativeCSSStyleSheet) {
-              const ele: any = root === document ? document.body : root;
-              ele._sheets = ele._sheets || {};
-              sheets.forEach(({ style, media }: any) => {
-                if (ele._sheets[style]) {
-                  ele._sheets[style].count++;
-                } else {
-                  const s = document.createElement('style');
-                  s.innerHTML = style;
-                  s.media = media.mediaText;
-                  ele.append(s);
-                  ele._sheets[style] = { ele: s, count: 1 };
-                }
-              });
-              return () => {
-                sheets.forEach(({ style }: any) => {
-                  ele._sheets[style].count--;
-                  if (!ele._sheets[style].count) {
-                    delete ele._sheets[style];
-                  }
-                });
-              };
-            } else {
-              root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
-              return () => {
-                root.adoptedStyleSheets = removeItems(root.adoptedStyleSheets, sheets);
-              };
-            }
+            root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
+            return () => {
+              root.adoptedStyleSheets = removeItems(root.adoptedStyleSheets, sheets);
+            };
           },
           () => [],
         );
@@ -320,20 +296,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   #render = () => {
     this.#execMemo();
-    const styles = useNativeCSSStyleSheet
-      ? ''
-      : html`${this.shadowRoot?.adoptedStyleSheets?.map(
-          (e: any) => html`
-            <style media=${e.media.mediaText}>
-              ${e.style}
-            </style>
-          `,
-        )}`;
-    if (this.render) {
-      const r = this.render();
-      return r && html`${r}${styles}`;
-    }
-    return this.#renderRoot === this ? undefined : html`<slot></slot>${styles}`;
+    if (this.render) return this.render();
+    return this.#renderRoot === this ? undefined : html`<slot></slot>`;
   };
 
   /**@lifecycle */
@@ -392,15 +356,18 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     if (this.#isMounted) {
       addMicrotask(this.#update);
     }
+    return GemElement.#final;
   }
 
   #connectedCallback = () => {
-    // 似乎这是最早的判断不在 `constructor` 中的地方
-    (this as any)[constructorSymbol] = false;
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
       return;
     }
+
+    // 似乎这是最早的判断不在 `constructor` 中的地方
+    Reflect.set(this, constructorSymbol, false);
+
     this.willMount?.();
     const { observedStores, rootElement } = this.constructor as typeof GemElement;
     observedStores?.forEach((store) => {
@@ -447,13 +414,16 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     } else {
       this.#connectedCallback();
     }
+    return GemElement.#final;
   }
 
   /**
    * @private
    * @final
    */
-  // adoptedCallback() {}
+  adoptedCallback() {
+    return GemElement.#final;
+  }
 
   /**
    * @private
@@ -477,6 +447,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     });
     this.#effectList = this.#effectList?.filter(({ inConstructor }) => inConstructor);
     this.#memoList = this.#memoList?.filter(({ inConstructor }) => inConstructor);
+    return GemElement.#final;
   }
 }
 
@@ -503,7 +474,7 @@ export function defineAttribute(target: GemElement, prop: string, attr: string)
     },
     set(v: string | null | undefined | number | boolean) {
       const that = this as GemElement;
-      const proxy = gemElementProxyMap.get(this) as any;
+      const proxy = gemElementProxyMap.get(this);
       const hasSet = proxy[prop];
       const value = that.getAttribute(attr);
       // https://github.com/whatwg/dom/issues/922
@@ -544,7 +515,7 @@ export function defineProperty(
     },
     set(v) {
       const that = this as GemElement;
-      const proxy = gemElementProxyMap.get(that) as any;
+      const proxy = gemElementProxyMap.get(that);
       if (v !== proxy[prop]) {
         if (event) {
           proxy[prop] = v?.[isEventHandleSymbol]
@@ -554,7 +525,7 @@ export function defineProperty(
                 that.dispatchEvent(evt);
                 v(detail, options);
               };
-          proxy[prop][isEventHandleSymbol] = true;
+          Reflect.set(proxy[prop]!, isEventHandleSymbol, true);
           // emitter 不触发元素更新
         } else {
           proxy[prop] = v;
@@ -627,7 +598,7 @@ customElements.define = (name: string, cls: CustomElementConstructor, options?:
     defineRefs?.forEach((ref) => defineRef(cls.prototype, kebabToCamelCase(ref), ref));
   }
 
-  nativeDefineElement(name, cls as CustomElementConstructor, options);
+  nativeDefineElement(name, cls, options);
 };
 
 declare global {

package/src/lib/history.ts

@@ -1,3 +1,5 @@
+// https://github.com/WICG/navigation-api#stakeholder-feedback
+
 import { createStore, updateStore, connect } from './store';
 import { QueryString, cleanObject, GemError, absoluteLocation } from './utils';
 
@@ -38,7 +40,6 @@ export interface UpdateHistoryParams {
 // 实际应用值
 type HistoryParams = UpdateHistoryParams & { title: string; path: string; query: QueryString; hash: string };
 
-// TODO: WeakRef
 const paramsMap = new Map<string, HistoryParams>();
 
 function validData(data: any) {

package/src/lib/utils.ts

@@ -23,7 +23,7 @@ function execMicrotaskStack() {
 
 /**
  * 添加回调函数到微任务队列栈；
- * 先进后执行；
+ * 先进后执行，使用这个函数可以改变嵌套的元素 `mounted` 的顺序；
  */
 export function addMicrotaskToStack(func: () => void) {
   if (!microtaskStack.length) {
@@ -50,8 +50,8 @@ interface LinkedListItem<T> {
   next?: LinkedListItem<T>;
 }
 // work on nodejs
-export class LinkedList<T = any> extends (globalThis.EventTarget || Object) {
-  addEventListener: <K extends keyof LinkedListEventMap>(
+export class LinkedList<T = any> extends EventTarget {
+  declare addEventListener: <K extends keyof LinkedListEventMap>(
     type: K,
     listener: (this: LinkedList<T>, ev: LinkedListEventMap[K]) => any,
     options?: boolean | AddEventListenerOptions,
@@ -131,11 +131,6 @@ export class PropProxyMap<T extends NonPrimitive, V = unknown> extends WeakMap<T
   }
 }
 
-declare global {
-  interface URLSearchParams {
-    entries(): Iterable<readonly [string | number | symbol, any]>;
-  }
-}
 export class QueryString extends URLSearchParams {
   constructor(param?: any) {
     super(param);
@@ -216,22 +211,6 @@ export type Sheet<T> = {
   [P in keyof T]: P;
 } & { [SheetToken]: CSSStyleSheet };
 
-declare global {
-  interface CSSStyleSheet {
-    replaceSync: (str: string) => void;
-  }
-
-  interface CSSRuleList {
-    item(index: number): CSSStyleRule;
-  }
-  interface ShadowRoot {
-    adoptedStyleSheets: CSSStyleSheet[];
-  }
-  interface Document {
-    adoptedStyleSheets: CSSStyleSheet[];
-  }
-}
-
 export type StyledType = 'id' | 'class' | 'keyframes';
 export interface StyledValueObject {
   styledContent: string;
@@ -241,22 +220,6 @@ export interface StyledKeyValuePair {
   [key: string]: StyledValueObject;
 }
 
-// !!! 目前只有 Chrome/FirefoxNightly 支持
-// https://bugzilla.mozilla.org/show_bug.cgi?id=1520690
-// https://bugs.webkit.org/show_bug.cgi?id=228684
-export let useNativeCSSStyleSheet = true;
-let CSSStyleSheet = globalThis.CSSStyleSheet;
-try {
-  new (CSSStyleSheet as any)();
-} catch {
-  useNativeCSSStyleSheet = false;
-  CSSStyleSheet = class {
-    media = { mediaText: '' };
-    style = '';
-    replaceSync = (style: string) => (this.style = style);
-  } as any;
-}
-
 /**
  *
  * 创建 style sheet 用于 `adoptedStyleSheets`，不支持样式更新
@@ -293,6 +256,8 @@ export function randomStr(number = 5, origin = '0123456789abcdefghijklmnopqrstuv
 const nestingRuleRegExp = new RegExp('&.*{((.|\n)*)}', 'g');
 // 只支持一层嵌套
 // https://drafts.csswg.org/css-nesting-1/
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1648037
+// https://bugs.webkit.org/show_bug.cgi?id=223497
 function flatStyled(style: string, type: StyledType): StyledValueObject {
   const nestingRules: string[] = [];
   let styledContent =
@@ -404,6 +369,9 @@ export function classMap(object: Record<string, boolean>) {
 
 export const partMap = classMap;
 
-export function exportPartsMap(object: Record<string, string | undefined>) {
-  return objectMapToString(object, ',', (key, value) => (value !== undefined ? `${key}:${value}` : ''));
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
+export function exportPartsMap(object: Record<string, string | undefined | boolean>) {
+  return objectMapToString(object, ',', (key, value) =>
+    value === true || key === value ? key : value ? `${key}:${value}` : '',
+  );
 }

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.7.1';
+export const version = '1.7.2';

package/src/test/history.test.ts

@@ -6,11 +6,13 @@ describe('history 测试', () => {
   it('hash', async () => {
     const historyLength = window.history.length;
     const hash = window.location.hash;
+    // 等待浏览器就绪
+    await aTimeout(1000);
     history.push({ path: '/a', hash: '#a' });
     await aTimeout(10);
     expect(window.location.hash).to.equal('#a');
     history.back();
-    await aTimeout(600);
+    await aTimeout(10);
     expect(window.location.hash).to.equal(hash);
     history.push({ path: '/a', hash: '#b' });
     await aTimeout(10);

package/src/test/utils.test.ts

@@ -14,6 +14,12 @@ import {
   absoluteLocation,
 } from '../lib/utils';
 
+declare global {
+  interface CSSRuleList {
+    item(index: number): CSSStyleRule;
+  }
+}
+
 describe('utils 测试', () => {
   it('absoluteLocation', () => {
     expect(absoluteLocation('/a', '/a/b')).to.equal('/a/b');
@@ -101,6 +107,7 @@ describe('utils 测试', () => {
       `;--x:1px;font-size:14px;content:'*';`,
     );
     expect(classMap({ foo: true, content: false })).to.equal(` foo `);
-    expect(exportPartsMap({ foo: 'bar', content: 'content' })).to.equal(`,foo:bar,content:content,`);
+    expect(exportPartsMap({ foo: 'bar', content: 'content', false: false })).to.equal(`,foo:bar,content,`);
+    expect(exportPartsMap({ foo: 'bar', content: true })).to.equal(`,foo:bar,content,`);
   });
 });