@mantou/gem 1.7.0 → 1.7.2

package/src/elements/base/route.ts

@@ -8,7 +8,6 @@ interface NamePosition {
   [index: string]: number;
 }
 
-// TODO: use `URLPattern`
 class ParamsRegExp extends RegExp {
   namePosition: NamePosition;
   constructor(pattern: string) {
@@ -28,10 +27,27 @@ class ParamsRegExp extends RegExp {
 }
 
 type Params = Record<string, string>;
+declare global {
+  interface Window {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1731418
+    // https://github.com/WebKit/standards-positions/issues/61
+    URLPattern: any;
+  }
+}
 
-// `/a/b/:c/:d` `/a/b/1/2`
+// URLPattern 大小写敏感
 // 匹配成功时返回 params
+// `/a/b/:c/:d` `/a/b/1/2`
+// pattern 以 / 结尾时能匹配 2 中路径
+// `/a/b/:c/:d/` `/a/b/1/2`
+// `/a/b/:c/:d/` `/a/b/1/2/`
 export function matchPath(pattern: string, path: string) {
+  if (window.URLPattern) {
+    const urLPattern = new window.URLPattern({ pathname: pattern });
+    const matchResult = urLPattern.exec({ pathname: path }) || urLPattern.exec({ pathname: `${path}/` });
+    if (!matchResult) return null;
+    return matchResult.pathname.groups as Params;
+  }
   const reg = new ParamsRegExp(pattern);
   const matchResult = path.match(reg) || `${path}/`.match(reg);
   if (!matchResult) return null;
@@ -111,13 +127,14 @@ export class GemRouteElement extends GemElement<State> {
    * html`<gem-route .locationStore=${locationStore}>`
    */
   @property locationStore?: Store<{ path: string; params: Params; query: QueryString; data?: any }>;
-  @property key: any; // 除了 href 提供另外一种方式来更新，比如语言更新也需要刷新 <gem-route>
+  @property key?: any; // 除了 href 提供另外一种方式来更新，比如语言更新也需要刷新 <gem-route>
   @emitter routechange: Emitter<RouteItem | null>; // path 改变或者 key 改变，包含初始渲染
   @emitter loading: Emitter<RouteItem>;
   @emitter error: Emitter<any>;
 
+  /**当前使用的路由对象 */
   currentRoute: RouteItem | null;
-  // 当前匹配的路由的 params
+  /**当前匹配的路由的 params */
   currentParams: Params = {};
 
   #lastLoader?: Promise<TemplateResult>;
@@ -236,7 +253,7 @@ export class GemRouteElement extends GemElement<State> {
 
     return html`
       <style>
-        :host,
+        :host(:where(:not([hidden]))),
         :not(:defined) {
           display: contents;
         }

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/unsafe.ts

@@ -18,7 +18,7 @@ export class GemUnsafeElement extends GemElement {
         if (this.shadowRoot) {
           this.shadowRoot.innerHTML = `
             <style>
-              :host {
+              :host(:where(:not([hidden]))) {
                 display: contents;
               }
               ${this.contentcss}

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,15 +33,13 @@ export class GemUseElement extends GemElement {
     } else {
       return ele?.cloneNode(true);
     }
-  }
+  };
 
   render() {
     return html`
       <style>
-        :host {
+        :host(:where(:not([hidden]))) {
           position: relative;
-        }
-        :host(:not([hidden])) {
           display: inline-flex;
           align-items: center;
         }
@@ -50,7 +48,7 @@ export class GemUseElement extends GemElement {
           height: 100%;
         }
       </style>
-      ${this.getContent()}
+      ${this.#getContent()}
       <slot></slot>
     `;
   }

package/src/helper/i18n.ts

@@ -40,7 +40,7 @@ interface Resources<T> {
   [key: string]: Partial<T> | string;
 }
 
-interface Options<T> {
+interface I18nOptions<T> {
   resources: Resources<T>;
   fallbackLanguage: string;
   // 可以在构造函数中指定，但会被 URL 中的语言参数覆盖
@@ -107,13 +107,13 @@ export class I18n<T = Record<string, Msg>> {
     this.onChange?.(lang);
   }
 
-  constructor(options: Options<T>) {
+  constructor(options: I18nOptions<T>) {
     if (!options.resources[options.fallbackLanguage]) {
       throw new GemError('i18n: fallbackLanguage invalid');
     }
 
     this.store = createStore(this as any);
-    Object.assign<I18n<T>, Options<T>>(this as I18n<T>, options);
+    Object.assign<I18n<T>, I18nOptions<T>>(this as I18n<T>, options);
 
     let currentLanguage = this.#urlParamsLang || this.currentLanguage || this.#cacheLang;
 

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/ssr-shim.ts

@@ -0,0 +1,29 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+if (typeof window === 'undefined') {
+  const getAny = () => {
+    const anonymous = () => getAny();
+    Object.defineProperties(anonymous, {
+      length: { writable: true },
+      name: { writable: true },
+    });
+    return new Proxy(anonymous, {
+      get(target, key) {
+        if (key === Symbol.toPrimitive) return () => '';
+        return target[key] || (target[key] = getAny());
+      },
+    });
+  };
+  const any = getAny();
+
+  globalThis.document = any;
+  globalThis.addEventListener = any;
+  globalThis.history = any;
+  globalThis.navigator = any;
+  globalThis.customElements = any;
+  globalThis.HTMLElement = null;
+  globalThis.location = new URL('about:blank');
+  globalThis.window = globalThis;
+}
+
+export {};

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/index.ts

@@ -1,19 +1,3 @@
-/**
- * 不支持多个 gem
- */
-import * as Gem from './';
-
-export type DevToolsHook = typeof Gem;
-declare global {
-  interface Window {
-    __GEM_DEVTOOLS__HOOK__?: DevToolsHook;
-  }
-}
-
-if (window.__GEM_DEVTOOLS__HOOK__) {
-  Object.assign(window.__GEM_DEVTOOLS__HOOK__, { ...Gem });
-}
-
 export * from './lib/store';
 export * from './lib/history';
 export * from './lib/element';

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 {}
  * ```
  */