@mantou/gem 1.7.11 → 2.0.0-alpha.0

package/src/elements/base/gesture.ts

@@ -1,5 +1,6 @@
 import { GemElement, html } from '../../lib/element';
-import { attribute, emitter, Emitter } from '../../lib/decorators';
+import type { Emitter } from '../../lib/decorators';
+import { attribute, emitter, mounted, shadow } from '../../lib/decorators';
 
 export type PanEventDetail = {
   // movement
@@ -58,6 +59,7 @@ function angleAB(
  *
  * @attr touch-action
  */
+@shadow()
 export class GemGestureElement extends GemElement {
   @emitter pan: Emitter<PanEventDetail>;
   @emitter pinch: Emitter<PinchEventDetail>;
@@ -68,18 +70,6 @@ export class GemGestureElement extends GemElement {
 
   @attribute touchAction: string;
 
-  constructor() {
-    super();
-    this.addEventListener('pointerdown', this.#onStart);
-    this.addEventListener('pointermove', this.#onMoveSet);
-    this.addEventListener('pointerup', this.#onEnd);
-    this.addEventListener('pointerleave', this.#onEnd); // 有时候 up 没有触发？
-    // 为什么空白区域会自动触发 `pointercancel`?
-    this.addEventListener('pointercancel', this.#onEnd);
-
-    this.addEventListener('dragstart', (evt) => evt.preventDefault());
-  }
-
   #pressed = false; // 触发 press 之后不触发其他事件
   #pressTimer = 0;
 
@@ -204,7 +194,7 @@ export class GemGestureElement extends GemElement {
     evt.stopPropagation();
     // https://bugs.webkit.org/show_bug.cgi?id=210454
     if ('getCoalescedEvents' in evt) {
-      evt.getCoalescedEvents().forEach((evt) => this.#onMove(evt));
+      evt.getCoalescedEvents().forEach((event) => this.#onMove(event));
     } else {
       this.#onMove(evt);
     }
@@ -253,6 +243,18 @@ export class GemGestureElement extends GemElement {
     this.#startEventMap.delete(pointerId);
   };
 
+  @mounted()
+  #init = () => {
+    this.addEventListener('pointerdown', this.#onStart);
+    this.addEventListener('pointermove', this.#onMoveSet);
+    this.addEventListener('pointerup', this.#onEnd);
+    this.addEventListener('pointerleave', this.#onEnd); // 有时候 up 没有触发？
+    // 为什么空白区域会自动触发 `pointercancel`?
+    this.addEventListener('pointercancel', this.#onEnd);
+
+    this.addEventListener('dragstart', (evt) => evt.preventDefault());
+  };
+
   render() {
     return html`
       <style>

package/src/elements/base/link.ts

@@ -1,14 +1,44 @@
-import { GemElement, html, ifDefined } from '../../lib/element';
-import { attribute, property, state, part, connectStore } from '../../lib/decorators';
+import { createCSSSheet, GemElement, html } from '../../lib/element';
+import {
+  attribute,
+  property,
+  state,
+  part,
+  connectStore,
+  shadow,
+  aria,
+  adoptedStyle,
+  mounted,
+  effect,
+  boolattribute,
+} from '../../lib/decorators';
 import { history, basePathStore } from '../../lib/history';
-import { absoluteLocation } from '../../lib/utils';
+import { absoluteLocation, css } from '../../lib/utils';
+import { ifDefined } from '../../lib/directives';
 
-import { matchPath, RouteItem, RouteOptions, createHistoryParams, createPath } from './route';
+import type { RouteItem, RouteOptions } from './route';
+import { matchPath, createHistoryParams, createPath } from './route';
 
 function isExternal(path: string) {
   return !path.startsWith('/');
 }
 
+const styles = createCSSSheet(css`
+  :host {
+    /* link default style */
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+  }
+  a {
+    all: unset;
+    display: contents;
+  }
+  a:visited {
+    color: unset;
+  }
+`);
+
 /**
  * @customElement gem-link
  * @attr href
@@ -21,17 +51,21 @@ function isExternal(path: string) {
  * @attr hint
  * @part link
  *
- * print bug: https://github.com/mantou132/gem/issues/36
+ * Bug: print `<link>` https://github.com/mantou132/gem/issues/36
  */
 @connectStore(basePathStore)
+@adoptedStyle(styles)
+@shadow()
+@aria({ focusable: true })
 export class GemLinkElement extends GemElement {
   @attribute href: string;
   @attribute target: string;
   @attribute path: string;
   @attribute query: string;
   @attribute hash: string;
-  @attribute docTitle: string;
   @attribute hint: 'on' | 'off';
+  /** Preload route content when point over */
+  @boolattribute preload: boolean;
 
   // 动态路由，根据 route.pattern 和 options.params 计算出 path
   @property route?: RouteItem;
@@ -50,11 +84,6 @@ export class GemLinkElement extends GemElement {
     return this.hint || 'on';
   }
 
-  constructor() {
-    super({ focusable: true });
-    this.addEventListener('click', this.#onClick);
-  }
-
   #onClick = async () => {
     const locationString = this.getLocationString();
 
@@ -87,24 +116,19 @@ export class GemLinkElement extends GemElement {
     await this.prepare?.();
 
     if (this.route) {
-      history.pushIgnoreCloseHandle({
-        ...createHistoryParams(this.route, this.#routeOptions),
-        title: this.route.title || this.docTitle,
-      });
+      history.pushIgnoreCloseHandle(createHistoryParams(this.route, this.#routeOptions));
     } else if (this.href) {
-      const { pathname, search, hash } = new URL(locationString, location.origin);
+      const url = new URL(locationString, location.origin);
       history.pushIgnoreCloseHandle({
-        path: pathname,
-        query: search,
-        hash,
-        title: this.docTitle,
+        path: url.pathname,
+        query: url.search,
+        hash: url.hash,
       });
     } else {
       history.pushIgnoreCloseHandle({
         path: this.path,
         query: this.query,
         hash: this.hash,
-        title: this.docTitle,
       });
     }
   };
@@ -120,27 +144,26 @@ export class GemLinkElement extends GemElement {
       : new URL(history.basePath + locationString, location.origin).toString();
   };
 
+  #preload = () => {
+    // 也许是 `getter`
+    this.route?.content;
+    // 只触发 `getContent` 调用，参数不使用
+    this.route?.getContent?.({}, this.shadowRoot!);
+  };
+
+  @mounted()
+  #init() {
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('pointerenter', this.#preload);
+  }
+
   render() {
     return html`
-      <style>
-        :host {
-          /* link default style */
-          cursor: pointer;
-          color: blue;
-          text-decoration: underline;
-        }
-        a {
-          all: unset;
-          display: contents;
-        }
-        a:visited {
-          color: unset;
-        }
-      </style>
       <a
         part=${this.link}
         @click=${this.#preventDefault}
         href=${ifDefined(this.#hint === 'off' ? undefined : this.#getHint())}
+        tabindex="-1"
       >
         <slot></slot>
       </a>
@@ -181,12 +204,10 @@ export class GemActiveLinkElement extends GemLinkElement {
   @attribute pattern: string; // 使用匹配模式设定 active
   @state active: boolean;
 
-  constructor() {
-    super();
-    this.effect(() => {
-      const { path, query, hash } = history.getParams();
-      const isMatchPattern = this.pattern && matchPath(this.pattern, path);
-      this.active = !!isMatchPattern || path + query + hash === this.getLocationString();
-    });
-  }
+  @effect()
+  #updateState = () => {
+    const { path, query, hash } = history.getParams();
+    const isMatchPattern = this.pattern && matchPath(this.pattern, path);
+    this.active = !!isMatchPattern || path + query + hash === this.getLocationString();
+  };
 }

package/src/elements/base/modal-factory.ts

@@ -1,6 +1,7 @@
 import { GemElement } from '../../lib/element';
-import { createStore, updateStore } from '../../lib/store';
+import { connect, createStore, updateStore } from '../../lib/store';
 import { history } from '../../lib/history';
+import { aria, mounted, shadow } from '../../lib/decorators';
 
 const open = Symbol('open mark');
 
@@ -15,7 +16,9 @@ const open = Symbol('open mark');
 export function createModalClass<T extends Record<string, unknown>>(options: T) {
   const final = Symbol();
 
-  return class extends GemElement {
+  @shadow()
+  @aria({ role: 'alertdialog', ariaModal: 'true' })
+  class ModalElement extends GemElement {
     static inertStore: HTMLElement[] = [];
     static instance: GemElement | null = null;
     /**
@@ -32,11 +35,6 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
       return this.store[open];
     }
 
-    /**@final */
-    static get observedStores() {
-      return [history.store, this.store];
-    }
-
     /**
      * @final
      * 自带 100ms 延迟，以允许在其他 Dialog 的 `shouldClose` 中调用此方法;
@@ -88,12 +86,14 @@ export function createModalClass<T extends Record<string, unknown>>(options: T)
       return true;
     }
 
-    constructor() {
-      super();
-      this.internals.role = 'alertdialog';
-      this.internals.ariaModal = 'true';
-    }
-
     label = '';
-  };
+
+    @mounted()
+    #connectHistory = () => connect(history.store, this.update);
+
+    @mounted()
+    #connectStore = () => connect(ModalElement.store, this.update);
+  }
+
+  return ModalElement;
 }

package/src/elements/base/reflect.ts

@@ -7,7 +7,7 @@
  * 比如 duoyun-ui 文档站加载示例元素时把 GemReflectElement 渲染的元素清除
  */
 import { GemElement } from '../../lib/element';
-import { attribute, property } from '../../lib/decorators';
+import { attribute, effect, property, willMount } from '../../lib/decorators';
 
 const START = 'gem-reflect-start';
 const END = 'gem-reflect-end';
@@ -37,37 +37,29 @@ export class GemReflectElement extends GemElement {
     return this.method || 'append';
   }
 
-  constructor() {
-    super({ isLight: true });
+  @willMount()
+  #init = () => {
+    this.hidden = true;
+    this.dataset.gemReflect = '';
+  };
 
-    this.effect(
-      () => {
-        this.hidden = true;
-        this.dataset.gemReflect = '';
-      },
-      () => [],
-    );
+  #startNode = createReflectFragmentTag(START);
+  #endNode = createReflectFragmentTag(END);
+  #childNodes: undefined | ChildNode[];
 
-    const startNode = createReflectFragmentTag(START);
-    const endNode = createReflectFragmentTag(END);
-    let childNodes: undefined | ChildNode[];
-
-    this.effect(
-      () => {
-        (childNodes || [startNode, ...this.childNodes, endNode]).forEach((node, index, arr) => {
-          const prev = arr[index - 1];
-          if (prev) {
-            prev.after(node);
-          } else {
-            this.target[this.#method](node);
-          }
-        });
-        return () => {
-          childNodes = getReflectFragment(startNode);
-          childNodes.forEach((node) => node.remove());
-        };
-      },
-      () => [this.target],
-    );
-  }
+  @effect((i) => [i.target])
+  #changeTarget = () => {
+    (this.#childNodes || [this.#startNode, ...this.childNodes, this.#endNode]).forEach((node, index, arr) => {
+      const prev = arr[index - 1];
+      if (prev) {
+        prev.after(node);
+      } else {
+        this.target[this.#method](node);
+      }
+    });
+    return () => {
+      this.#childNodes = getReflectFragment(this.#startNode);
+      this.#childNodes.forEach((node) => node.remove());
+    };
+  };
 }

package/src/elements/base/route.ts

@@ -1,8 +1,13 @@
-import { GemElement, html, TemplateResult } from '../../lib/element';
-import { property, emitter, Emitter, boolattribute } from '../../lib/decorators';
-import { createStore, updateStore, Store, connect } from '../../lib/store';
-import { titleStore, history, UpdateHistoryParams } from '../../lib/history';
-import { addListener, QueryString } from '../../lib/utils';
+import type { TemplateResult } from '../../lib/element';
+import { BoundaryCSSState, createState, GemElement, html } from '../../lib/element';
+import type { Emitter } from '../../lib/decorators';
+import { property, emitter, boolattribute, shadow, effect, template, willMount } from '../../lib/decorators';
+import type { Store } from '../../lib/store';
+import { createStore, updateStore, connect } from '../../lib/store';
+import type { UpdateHistoryParams } from '../../lib/history';
+import { titleStore, history } from '../../lib/history';
+import type { QueryString } from '../../lib/utils';
+import { addListener } from '../../lib/utils';
 
 const UNNAMED_PARAM_PREFIX = '_';
 
@@ -113,11 +118,6 @@ export function createHistoryParams(route: RouteItem, options?: RouteOptions): U
   };
 }
 
-interface ConstructorOptions {
-  isLight?: boolean;
-  routes?: RouteItem[] | RoutesObject;
-}
-
 const INIT_CONTENT = html``;
 
 type State = {
@@ -125,7 +125,7 @@ type State = {
 };
 
 export type RouteTrigger = {
-  store: Store<any>;
+  store?: Store<any>;
   replace: (arg: UpdateHistoryParams) => void;
   getParams: () => { path: string; query?: string | QueryString; hash?: string };
 };
@@ -133,13 +133,13 @@ export type RouteTrigger = {
 const scrollPositionMap = new Map<string, number>();
 
 /**
- * @customElement gem-route
+ * @customElement gem-light-route
  * @attr inert 暂停路由更新
  * @fires routechange
  * @fires error
  * @fires loading
  */
-export class GemRouteElement extends GemElement<State> {
+export class GemLightRouteElement extends GemElement {
   @boolattribute transition: boolean;
   @property routes?: RouteItem[] | RoutesObject;
   /**
@@ -168,8 +168,6 @@ export class GemRouteElement extends GemElement<State> {
   /**当前匹配的路由的 params */
   currentParams: Params = {};
 
-  #lastLoader?: Promise<TemplateResult | undefined>;
-
   /**不要多个 `<gem-route>` 共享，因为那样会导致后面的元素卸载前触发更新 */
   static createLocationStore = () => {
     const { path, query, hash, data } = history.getParams();
@@ -201,14 +199,7 @@ export class GemRouteElement extends GemElement<State> {
     return typeof this.scrollContainer === 'function' ? this.scrollContainer() : this.scrollContainer;
   }
 
-  constructor({ isLight, routes }: ConstructorOptions = {}) {
-    super({ isLight });
-    this.routes = this.routes || routes;
-  }
-
-  state: State = {
-    content: INIT_CONTENT,
-  };
+  #state = createState<State>({ content: INIT_CONTENT });
 
   #updateLocationStore = () => {
     if (!this.locationStore) return;
@@ -232,13 +223,14 @@ export class GemRouteElement extends GemElement<State> {
     }
   };
 
+  #lastLoader?: Promise<TemplateResult | undefined>;
   #setContent = (route: RouteItem | null, params: Params, content?: TemplateResult) => {
     this.beforeroutechange(route);
     this.#lastLoader = undefined;
     this.currentRoute = route;
     this.currentParams = params;
     const changeContent = async () => {
-      this.setState({ content });
+      this.#state({ content });
       // 要确保新页面能读取到新路由数据
       this.#updateLocationStore();
       // 等待页面渲染完成
@@ -253,45 +245,39 @@ export class GemRouteElement extends GemElement<State> {
     }
   };
 
-  mounted() {
-    this.effect(
-      () => {
-        if (!this.#scrollContainer) return;
-        return addListener(history, 'beforechange', () =>
-          scrollPositionMap.set(history.currentKey, this.#scrollContainer!.scrollTop),
-        );
-      },
-      () => [this.scrollContainer],
-    );
+  @willMount()
+  #unBoundary = () => this.internals.states.delete(BoundaryCSSState);
 
-    this.effect(
-      // 触发 this.#update
-      () => connect(this.trigger.store, () => this.setState({})),
-      () => [this.trigger],
+  @effect((i) => [i.scrollContainer])
+  #rememberScrollPosition = () => {
+    if (!this.#scrollContainer) return;
+    return addListener(history, 'beforechange', () =>
+      scrollPositionMap.set(history.currentKey, this.#scrollContainer!.scrollTop),
     );
+  };
 
-    this.effect(
-      ([key, path], old) => {
-        // 只有查询参数改变
-        if (old && key === old[0] && path === old[1]) {
-          this.#updateLocationStore();
-          return;
-        }
-        this.update();
-      },
-      () => {
-        const { path, query, hash } = this.trigger.getParams();
-        return [this.key, path, query, hash] as const;
-      },
-    );
-  }
+  // history or i18n
+  @effect((i) => [i.scrollContainer])
+  #connectTriggerStore = () => connect(this.trigger.store, () => this.#state({}));
 
-  shouldUpdate() {
-    return this.inert ? false : true;
-  }
+  #updateContentDep = () => {
+    const { path, query, hash } = this.trigger.getParams();
+    return [this.key, path, query, hash] as const;
+  };
+
+  @effect((i) => i.#updateContentDep())
+  #updateContent = ([key, path]: any, old?: any) => {
+    // 只有查询参数改变
+    if (old && key === old[0] && path === old[1]) {
+      this.#updateLocationStore();
+      return;
+    }
+    this.update();
+  };
 
-  render() {
-    const { content } = this.state;
+  @template((i) => !i.inert)
+  #content = () => {
+    const { content } = this.#state;
     if (content === undefined) return;
 
     if (!this.shadowRoot) {
@@ -308,8 +294,9 @@ export class GemRouteElement extends GemElement<State> {
       </style>
       ${content === INIT_CONTENT ? html`<slot></slot>` : content}
     `;
-  }
+  };
 
+  // 重写 `update`，并暴露为公共字段
   update = () => {
     const { path, hash, query } = this.trigger.getParams();
     const { route, params = {} } = GemRouteElement.findRoute(this.routes, path);
@@ -323,7 +310,10 @@ export class GemRouteElement extends GemElement<State> {
       return;
     }
     if (this.trigger === history) {
-      updateStore(titleStore, { title: route?.title });
+      // 嵌套路由执行顺序也是从父到子
+      if (location.href !== titleStore.url || route?.title) {
+        updateStore(titleStore, { url: location.href, title: route?.title });
+      }
     }
     const contentOrLoader = content || getContent?.(params, this.shadowRoot || this);
     this.loading(route);
@@ -331,8 +321,8 @@ export class GemRouteElement extends GemElement<State> {
       this.#lastLoader = contentOrLoader;
       const isSomeLoader = () => this.#lastLoader === contentOrLoader;
       contentOrLoader
-        .then((content) => {
-          if (isSomeLoader()) this.#setContent(route, params, content);
+        .then((newContent) => {
+          if (isSomeLoader()) this.#setContent(route, params, newContent);
         })
         .catch((err) => {
           if (isSomeLoader()) this.error(err);
@@ -344,10 +334,7 @@ export class GemRouteElement extends GemElement<State> {
 }
 
 /**
- * @customElement gem-light-route
+ * @customElement gem-route
  */
-export class GemLightRouteElement extends GemRouteElement {
-  constructor(options: ConstructorOptions = {}) {
-    super({ ...options, isLight: true });
-  }
-}
+@shadow()
+export class GemRouteElement extends GemLightRouteElement {}

package/src/elements/base/title.ts

@@ -7,46 +7,40 @@
  * 修改标题：titleStore 的 title 优先级高，比如 history 添加的 dialog Title
  *
  * - `<gem-route>` 匹配路由时自动设置 `route.title`
- * - `<gem-link>` 的 `doc-title` 属性和 `route.title`
- * - 修改路径时，`history` 默认设置 `title` 为空
+ * - 修改路径（查询参数）时，`history` 默认设置 `title` 为空，运行 Modal 设置临时标题
  * - 数据获取后，手动调用 `Title.setTitle`
  * - `<gem-title>` 作为默认值设置
  */
 
 import { GemElement, html } from '../../lib/element';
-import { attribute, boolattribute } from '../../lib/decorators';
+import { attribute, boolattribute, effect, mounted, shadow } from '../../lib/decorators';
 import { updateStore, connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
-import { addMicrotask } from '../../lib/utils';
 
-const defaultTitle = document.title;
+// 避免重定向时的中间状态标题
+let timer = 0;
+const setTitle = (documentTitle: string) => {
+  clearTimeout(timer);
+  timer = window.setTimeout(() => (document.title = documentTitle));
+};
 
-let documentTitle = '';
-const setTitle = () => (document.title = documentTitle);
-
-function setDocumentTitle(str?: string | null, prefix = '', suffix = '') {
-  const title = titleStore.title || str;
-  if (title && title !== defaultTitle) {
+function setDocumentTitle(defaultTitle?: string | null, prefix = '', suffix = '') {
+  const title = titleStore.title || defaultTitle;
+  if (title && title !== titleStore.defaultTitle) {
     GemTitleElement.title = title;
-    documentTitle = prefix + GemTitleElement.title + suffix;
+    setTitle(prefix + GemTitleElement.title + suffix);
   } else {
-    GemTitleElement.title = defaultTitle;
-    documentTitle = GemTitleElement.title;
+    GemTitleElement.title = titleStore.defaultTitle;
+    setTitle(GemTitleElement.title);
   }
-  // 避免重定向时的中间状态
-  addMicrotask(setTitle);
 }
 
-connect(titleStore, setDocumentTitle);
-
-export const PREFIX = `${defaultTitle} | `;
-export const SUFFIX = ` - ${defaultTitle}`;
-
 /**
  * @customElement gem-title
  * @attr prefix
  * @attr suffix
  */
+@shadow()
 export class GemTitleElement extends GemElement {
   @attribute prefix: string;
   @attribute suffix: string;
@@ -55,34 +49,23 @@ export class GemTitleElement extends GemElement {
   // 没有后缀的当前标题
   static title = document.title;
 
-  /**@deprecated */
-  static defaultPrefix = PREFIX;
-  /**@deprecated */
-  static defaultSuffix = SUFFIX;
-
   static setTitle(title: string) {
     updateStore(titleStore, { title });
   }
 
-  constructor() {
-    super();
-    new MutationObserver(() => this.update()).observe(this, {
-      characterData: true,
-      childList: true,
-      subtree: true,
-    });
-  }
+  @effect((i) => [i.inert])
+  #connectStore = () => !this.inert && connect(titleStore, this.update);
+
+  #ob = new MutationObserver(() => this.update());
 
-  mounted = () => {
-    this.effect(
-      () => !this.inert && connect(titleStore, this.update),
-      () => [this.inert],
-    );
+  @mounted()
+  #obTextContent = () => {
+    this.#ob.observe(this, { characterData: true, childList: true, subtree: true });
   };
 
-  render() {
-    // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
+  render = () => {
+    // 多个 <gem-title> 时，最终 document.title 按渲染顺序决定
     setDocumentTitle(this.textContent?.trim(), this.prefix, this.suffix);
     return html`${GemTitleElement.title}`;
-  }
+  };
 }