@mantou/gem 1.5.3 → 1.5.7

package/src/elements/route.ts

@@ -60,6 +60,7 @@ export interface RouteItem<T = unknown> {
   // 支持 *
   // 支持 /a/*
   // 不支持相对路径
+  // 不能匹配查询字符串
   pattern: string;
   redirect?: string;
   content?: TemplateResult;
@@ -109,7 +110,7 @@ type State = {
 /**
  * @customElement gem-route
  * @attr inert 暂停路由更新
- * @fires change
+ * @fires route-change
  * @fires error
  * @fires loading
  */
@@ -124,7 +125,7 @@ export class GemRouteElement extends GemElement<State> {
    */
   @property locationStore?: Store<{ path: string; params: Params; query: QueryString; data?: any }>;
   @property key: any; // 除了 href 提供另外一种方式来更新，比如语言更新也需要刷新 <gem-route>
-  @emitter change: Emitter<RouteItem | null>; // path 改变或者 key 改变，包含初始渲染
+  @emitter routeChange: Emitter<RouteItem | null>; // path 改变或者 key 改变，包含初始渲染
   @emitter loading: Emitter<RouteItem>;
   @emitter error: Emitter<any>;
 
@@ -186,7 +187,7 @@ export class GemRouteElement extends GemElement<State> {
     this.currentRoute = route;
     this.currentParams = params;
     this.setState({ content });
-    this.change(this.currentRoute);
+    this.routeChange(this.currentRoute);
     const title = route?.title;
     if (title) updateStore(titleStore, { title });
     this.#updateLocationStore();
@@ -194,7 +195,12 @@ export class GemRouteElement extends GemElement<State> {
 
   mounted() {
     this.effect(
-      ([_, path]) => {
+      ([key, path], old) => {
+        // 只有查询参数改变
+        if (old && key === old[0] && path === old[1]) {
+          this.#updateLocationStore();
+          return;
+        }
         const { route, params = {} } = GemRouteElement.findRoute(this.routes, path);
         const { redirect, content, getContent } = route || {};
         if (redirect) {
@@ -219,10 +225,9 @@ export class GemRouteElement extends GemElement<State> {
       },
       () => {
         const { path } = history.getParams();
-        return [this.key, path];
+        return [this.key, path, location.search];
       },
     );
-    this.effect(this.#updateLocationStore, () => [location.search]);
   }
 
   shouldUpdate() {
@@ -241,7 +246,7 @@ export class GemRouteElement extends GemElement<State> {
           display: contents;
         }
       </style>
-      ${content}
+      ${content ?? html`<slot></slot>`}
     `;
   }
 }

package/src/elements/use.ts

@@ -1,4 +1,4 @@
-import { GemElement, html, attribute, property, customElement } from '../';
+import { GemElement, html, attribute, property, customElement, state } from '../';
 
 const eleCache = new Map<string, HTMLTemplateElement>();
 /**
@@ -17,6 +17,8 @@ export class GemUseElement extends GemElement {
   @property root?: HTMLElement | Document | ShadowRoot;
   @property element?: string | DocumentFragment | Element;
 
+  @state active: boolean;
+
   private getContent() {
     const ele = this.element || (this.selector ? (this.root || document).querySelector(this.selector) : null);
     if (typeof ele === 'string') {

package/src/examples/i18n/index.ts

@@ -22,7 +22,16 @@ const i18n = new I18n<typeof en>({
   onChange: console.log,
 });
 
+const i18nModule = i18n.createSubModule<typeof en>('test', {
+  en,
+  de: {
+    title: 'Das ist I18n',
+  },
+  zh: 'data:text/plain;base64,eyJ0aXRsZSI6Iui/meaYr0kxOG4ifQ==',
+});
+
 @connectStore(i18n.store)
+@connectStore(i18nModule.store)
 @customElement('app-root')
 export class App extends GemElement {
   render() {
@@ -35,6 +44,11 @@ export class App extends GemElement {
       <p>${i18n.get('title')}</p>
       <p>${i18n.get('hello', 'World', 'reverse')}</p>
       <p>${i18n.get('detail', (s) => html`<a href="#">${s}</a>`)}</p>
+
+      <h2>sub module</h2>
+      <p>${i18nModule.get('title')}</p>
+      <p>${i18nModule.get('hello', 'World', 'reverse')}</p>
+      <p>${i18nModule.get('detail', (s) => html`<a href="#">${s}</a>`)}</p>
     `;
   }
 }

package/src/examples/multi-page/page-c.ts

@@ -1,5 +1,6 @@
 import { GemElement, html } from '../../';
 import '../../elements/route';
+import '../../elements/link';
 
 const routes = [
   {

package/src/examples/ref-route/index.ts

@@ -7,7 +7,8 @@ import '../elements/layout';
 
 const homeRoute: RouteItem = {
   pattern: '/',
-  getContent(params) {
+  async getContent(params) {
+    await new Promise((res) => setTimeout(res, 1000));
     return html`<route-home .params=${params}></route-home>`;
   },
 };
@@ -88,7 +89,7 @@ export class App extends GemElement {
         <gem-route
           ref=${this.routeRef.ref}
           @loading=${console.log}
-          @change=${console.log}
+          @route-change=${console.log}
           @error=${console.error}
           .routes=${routes}
           .locationStore=${locationStore}

package/src/helper/i18n.ts

@@ -8,6 +8,7 @@ import { GemError } from '../lib/utils';
 const splitReg = /\$\d(?:<[^>]*>)?/;
 const matchReg = /\$(\d)(<([^>]*)>)?/g;
 const matchStrIndex = 3;
+const modules = new Set<I18n<any>>();
 
 type Msg =
   | {
@@ -56,11 +57,11 @@ export class I18n<T = Record<string, Msg>> {
 
   store: Store<any>;
 
-  get cacheCurrentKey() {
+  get #cacheCurrentKey() {
     return `${this.cachePrefix}:current`;
   }
 
-  get urlParamsLang() {
+  get #urlParamsLang() {
     const { hostname, pathname, search } = location;
     const parts = hostname.split('.');
     switch (this.urlParamsType) {
@@ -76,13 +77,19 @@ export class I18n<T = Record<string, Msg>> {
     }
   }
 
-  get cacheLang() {
-    return (this.cache && localStorage.getItem(this.cacheCurrentKey)) || '';
+  get #cacheLang() {
+    return (this.cache && localStorage.getItem(this.#cacheCurrentKey)) || '';
   }
 
-  set lang(lang: string) {
+  get #isMain(): boolean {
+    return !modules.has(this);
+  }
+
+  set #lang(lang: string) {
+    if (this.#isMain) {
+      document.documentElement.lang = lang;
+    }
     this.currentLanguage = lang;
-    document.documentElement.lang = lang;
     this.onChange?.(lang);
   }
 
@@ -94,7 +101,7 @@ export class I18n<T = Record<string, Msg>> {
     this.store = createStore(this as any);
     Object.assign<I18n<T>, Options<T>>(this as I18n<T>, options);
 
-    let currentLanguage = this.urlParamsLang || this.currentLanguage || this.cacheLang;
+    let currentLanguage = this.#urlParamsLang || this.currentLanguage || this.#cacheLang;
 
     const ele = document.querySelector(`[type*=${this.cachePrefix}]`);
     if (ele) {
@@ -108,7 +115,7 @@ export class I18n<T = Record<string, Msg>> {
     }
 
     if (currentLanguage) {
-      this.lang = currentLanguage;
+      this.#lang = currentLanguage;
       this.setLanguage(currentLanguage);
     } else {
       this.resetLanguage();
@@ -147,11 +154,14 @@ export class I18n<T = Record<string, Msg>> {
   }
 
   async setLanguage(lang: string): Promise<string> {
+    if (this.#isMain) {
+      modules.forEach(async (i18n) => await i18n.setLanguage(lang));
+    }
     let pack: Partial<T>;
     const data = this.resources[lang];
     if (!data) {
       // eslint-disable-next-line no-console
-      console.warn(`i18n: not found \`${lang}\``);
+      console.warn(`${this.cachePrefix}: not found \`${lang}\``);
       return this.resetLanguage();
     }
 
@@ -190,7 +200,7 @@ export class I18n<T = Record<string, Msg>> {
     this.resources[lang] = pack;
     updateStore(this.store, {});
     if (lang !== this.currentLanguage) {
-      this.lang = lang;
+      this.#lang = lang;
     }
     // auto cache
     if (this.cache === true) {
@@ -200,16 +210,34 @@ export class I18n<T = Record<string, Msg>> {
   }
 
   resetLanguage() {
-    this.lang = this.fallbackLanguage;
+    if (this.#isMain) {
+      modules.forEach((i18n) => i18n.resetLanguage());
+    }
+    this.#lang = this.fallbackLanguage;
     if (this.cache) {
-      localStorage.removeItem(this.cacheCurrentKey);
+      localStorage.removeItem(this.#cacheCurrentKey);
     }
     return this.setLanguage(this.detectLanguage());
   }
 
   // 一般用在 `onChange` 中
   setCache() {
-    localStorage.setItem(this.cacheCurrentKey, this.currentLanguage);
+    if (this.#isMain) {
+      modules.forEach((i18n) => i18n.setCache());
+    }
+    localStorage.setItem(this.#cacheCurrentKey, this.currentLanguage);
+  }
+
+  createSubModule<K = Record<string, Msg>>(name: string, resources: Resources<K>) {
+    const module = new I18n<K>({
+      resources,
+      cachePrefix: `${this.cachePrefix}-${name}`,
+      currentLanguage: this.currentLanguage,
+      fallbackLanguage: this.fallbackLanguage,
+      cache: this.cache,
+    });
+    modules.add(module);
+    return module;
   }
 
   /**

package/src/helper/mediaquery.ts

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

package/src/lib/element.ts

@@ -25,11 +25,10 @@ export { ifDefined } from 'lit-html/directives/if-defined';
 type CustomStateSet = Set<string>;
 
 declare global {
-  interface ElementInternals {
+  interface ElementInternals extends ARIAMixin {
     states: CustomStateSet;
     // https://w3c.github.io/aria/#role_definitions
     role?: string;
-    ariaModal?: boolean;
   }
   // 用于 css 选择器选择元素，使用 @refobject 自动选择获取
   // 必须使用 attr 赋值
@@ -38,8 +37,8 @@ declare global {
    * @attr inert
    */
   interface HTMLElement {
-    attachInternals?: () => ElementInternals;
-    inert?: boolean;
+    attachInternals: () => ElementInternals;
+    inert: boolean;
   }
 }
 
@@ -53,20 +52,15 @@ function execCallback(fun: any) {
 
 // global render task pool
 const asyncRenderTaskList = new LinkedList<() => void>();
-const tick = () => {
-  window.requestAnimationFrame(function callback(timestamp) {
-    if (performance.now() > timestamp + 16) {
-      tick();
-      return;
-    }
-    const task = asyncRenderTaskList.get();
-    if (task) {
-      task();
-      callback(timestamp);
-    }
-  });
+const tick = (timeStamp = performance.now()) => {
+  if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
+  const task = asyncRenderTaskList.get();
+  if (task) {
+    task();
+    tick(timeStamp);
+  }
 };
-asyncRenderTaskList.addEventListener('start', tick);
+asyncRenderTaskList.addEventListener('start', () => addMicrotask(tick));
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
@@ -164,7 +158,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       if (!this.attachInternals) {
         // https://bugs.webkit.org/show_bug.cgi?id=197960
         this.attachInternals = () => {
-          return { states: getCustomStateSet() };
+          return { states: getCustomStateSet() } as any;
         };
       }
       this.#internals = this.attachInternals();
@@ -198,7 +192,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     list?.forEach((effectItem) => {
       const { callback, getDep, values, preCallback } = effectItem;
       const newValues = getDep?.();
-      if (!getDep || isArrayChange(values, newValues)) {
+      if (!getDep || !values || isArrayChange(values, newValues)) {
         execCallback(preCallback);
         effectItem.preCallback = callback(newValues, values);
         effectItem.values = newValues;
@@ -235,15 +229,17 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     getDep?: T extends any[] ? () => [...T] : undefined,
   ) => {
     if (!this.#effectList) this.#effectList = [];
-    const values = getDep?.() as T;
     const effectItem: EffectItem<T> = {
       callback,
       getDep,
-      values,
+      values: undefined,
       initialized: !!this.isConnected,
     };
     // 以挂载时立即执行副作用，未挂载时等挂载后执行
-    if (this.isConnected) effectItem.preCallback = callback(values);
+    if (this.isConnected) {
+      effectItem.values = getDep?.() as T;
+      effectItem.preCallback = callback(effectItem.values);
+    }
     this.#effectList.push(effectItem);
   };
 
@@ -279,7 +275,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     this.#effectList?.forEach((effectItem) => {
       const { callback, getDep, initialized } = effectItem;
       if (!initialized) {
-        effectItem.preCallback = callback(getDep?.());
+        effectItem.values = getDep?.();
+        effectItem.preCallback = callback(effectItem.values);
         effectItem.initialized = true;
       }
     });
@@ -378,14 +375,16 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     }
   };
 
-  closestElement(clsOrName: CustomElementConstructor | string) {
-    const isConstructor = typeof clsOrName === 'function';
-    const tagName = typeof clsOrName === 'string' && clsOrName.toUpperCase();
+  closestElement<K extends keyof HTMLElementTagNameMap>(tag: K): HTMLElementTagNameMap[K] | null;
+  closestElement<K extends abstract new (...args: any) => any>(constructor: K): InstanceType<K> | null;
+  closestElement<K extends abstract new (...args: any) => any>(constructorOrTag: K | string): Element | null {
+    const isConstructor = typeof constructorOrTag === 'function';
+    const tagName = typeof constructorOrTag === 'string' && constructorOrTag.toUpperCase();
     const getRootElement = (ele: Element): Element | null => {
       const rootEle = ele.parentElement || (ele.getRootNode() as ShadowRoot).host;
       if (!rootEle) return null;
       if (isConstructor) {
-        if (rootEle.constructor === clsOrName) {
+        if (rootEle.constructor === constructorOrTag) {
           return rootEle;
         }
       } else if (rootEle.tagName === tagName) {

package/src/lib/utils.ts

@@ -50,56 +50,72 @@ interface LinkedListItem<T> {
   next?: LinkedListItem<T>;
 }
 // work on nodejs
-export class LinkedList<T extends NonPrimitive> extends (globalThis.EventTarget || Object) {
+export class LinkedList<T = any> extends (globalThis.EventTarget || Object) {
   addEventListener: <K extends keyof LinkedListEventMap>(
     type: K,
     listener: (this: LinkedList<T>, ev: LinkedListEventMap[K]) => any,
     options?: boolean | AddEventListenerOptions,
   ) => void;
 
-  pool = new Map<T, LinkedListItem<T>>();
-  firstItem?: LinkedListItem<T>;
-  lastItem?: LinkedListItem<T>;
+  #map = new Map<T, LinkedListItem<T>>();
+  #firstItem?: LinkedListItem<T>;
+  #lastItem?: LinkedListItem<T>;
 
-  // 添加已存在的项目时会删除老的项目
-  add(value: T) {
-    const item: LinkedListItem<T> = { value };
-    if (!this.firstItem) {
-      this.dispatchEvent(new CustomEvent('start'));
-      this.firstItem = item;
-    }
-    if (this.lastItem) {
-      this.lastItem.next = item;
-      item.prev = this.lastItem;
-    }
-    this.lastItem = item;
-
-    const existItem = this.pool.get(value);
+  #delete(value: T) {
+    const existItem = this.#map.get(value);
     if (existItem) {
       if (existItem.prev) {
         existItem.prev.next = existItem.next;
       } else {
-        this.firstItem = existItem.next;
+        this.#firstItem = existItem.next;
       }
       if (existItem.next) {
         existItem.next.prev = existItem.prev;
+      } else {
+        this.#lastItem = existItem.prev;
       }
+      this.#map.delete(value);
     }
-
-    this.pool.set(value, item);
+    return existItem;
   }
 
-  get(): T | undefined {
-    const firstItem = this.firstItem;
-    if (!firstItem) return;
+  get size() {
+    return this.#map.size;
+  }
 
-    this.pool.delete(firstItem.value);
+  // 添加到尾部，已存在时会删除老的项目
+  // 如果是添加第一个，start 事件会在添加前触发，避免处理事件重复的逻辑
+  add(value: T) {
+    if (!this.#lastItem) {
+      this.dispatchEvent(new CustomEvent('start'));
+    }
+    const item: LinkedListItem<T> = this.#delete(value) || { value };
+    item.prev = this.#lastItem;
+    if (item.prev) {
+      item.prev.next = item;
+    }
+    item.next = undefined;
+    this.#lastItem = item;
+    if (!this.#firstItem) {
+      this.#firstItem = item;
+    }
+    this.#map.set(value, item);
+  }
 
-    this.firstItem = firstItem.next;
-    if (!this.firstItem) {
-      this.lastItem = undefined;
+  // 删除这个元素后没有其他元素时立即出发 end 事件
+  delete(value: T) {
+    const deleteItem = this.#delete(value);
+    if (!this.#firstItem) {
       this.dispatchEvent(new CustomEvent('end'));
     }
+    return deleteItem;
+  }
+
+  // 获取头部元素
+  get(): T | undefined {
+    const firstItem = this.#firstItem;
+    if (!firstItem) return;
+    this.#delete(firstItem.value);
     return firstItem.value;
   }
 }
@@ -125,6 +141,7 @@ export class QueryString extends URLSearchParams {
     super(param);
   }
 
+  // support `{ key: ObjectValue }`
   concat(param: any) {
     let query: any;
     if (typeof param === 'string') {
@@ -132,8 +149,8 @@ export class QueryString extends URLSearchParams {
     } else {
       query = param;
     }
-    Object.keys(query).forEach((key) => {
-      this.append(key, query[key]);
+    Object.entries(query).forEach(([key, value]) => {
+      this.append(key, this.#stringify(value));
     });
   }
 

package/src/lib/version.ts

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

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

@@ -25,10 +25,11 @@ customElements.define('async-gem-demo', AsyncGemDemo);
 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 });
     el.setState({ a: ++el.state.a });
     await nextFrame();
-    expect(el.renderCount).to.equal(1);
+    expect(el.renderCount).to.equal(2);
     await nextFrame();
     expect(el.renderCount).to.equal(2);
   });
@@ -146,11 +147,15 @@ class EffectGemDemo extends GemElement {
   @attribute attr = 'a';
   @property prop = {};
   effectCount = 0;
+  compareCount = 0;
   constructor() {
     super();
     this.effect(
       () => this.effectCount++,
-      () => [this.attr, this.prop],
+      () => {
+        this.compareCount++;
+        return [this.attr, this.prop];
+      },
     );
   }
   mounted() {
@@ -170,6 +175,7 @@ customElements.define('effect-gem-demo', EffectGemDemo);
 describe('gem element 副作用', () => {
   it('依赖当前值', async () => {
     const el: EffectGemDemo = await fixture(html`<effect-gem-demo></effect-gem-demo>`);
+    expect(el.compareCount).to.equal(1);
     expect(el.effectCount).to.equal(3);
     el.attr = 'b';
     el.prop = {};

package/src/test/utils.test.ts

@@ -22,17 +22,20 @@ describe('utils 测试', () => {
     const linkedList = new LinkedList<() => void>();
     let countAtStart = 0;
     let countAtPause = 0;
-    linkedList.addEventListener('start', () => (countAtStart = linkedList.pool.size));
-    linkedList.addEventListener('end', () => (countAtPause = linkedList.pool.size));
-    const fun1 = () => ({});
-    const fun2 = () => ({});
+    linkedList.addEventListener('start', () => (countAtStart = linkedList.size));
+    linkedList.addEventListener('end', () => (countAtPause = linkedList.size));
+    const fun1 = () => 1;
+    const fun2 = () => 2;
     linkedList.add(fun1);
     linkedList.add(fun2);
+    linkedList.delete(fun2);
+    expect(linkedList.size).to.equal(1);
+    linkedList.add(fun2);
     linkedList.add(fun1);
-    expect(linkedList.pool.size).to.equal(2);
+    expect(linkedList.size).to.equal(2);
     expect(linkedList.get()).to.equal(fun2);
     expect(linkedList.get()).to.equal(fun1);
-    expect(linkedList.pool.size).to.equal(0);
+    expect(linkedList.size).to.equal(0);
     expect(linkedList.get()).to.equal(undefined);
     expect(countAtStart).to.equal(0);
     expect(countAtPause).to.equal(0);