@mantou/gem 1.6.4 → 1.6.10

package/src/elements/base/route.ts

@@ -0,0 +1,244 @@
+import { GemElement, html, TemplateResult } from '../../lib/element';
+import { property, connectStore, emitter, Emitter } from '../../lib/decorators';
+import { createStore, updateStore, Store } from '../../lib/store';
+import { titleStore, history, UpdateHistoryParams } from '../../lib/history';
+import { QueryString } from '../../lib/utils';
+
+interface NamePostition {
+  [index: string]: number;
+}
+
+// TODO: use `URLPattern`
+class ParamsRegExp extends RegExp {
+  namePosition: NamePostition;
+  constructor(pattern: string) {
+    const namePosition: NamePostition = {};
+    let i = 0;
+    super(
+      `^${pattern
+        .replace(/:([^/$]+)/g, (_m, name: string) => {
+          namePosition[name] = i++;
+          return `([^/]+)`;
+        })
+        .replace('*', '.*')}$`,
+      'i',
+    );
+    this.namePosition = namePosition;
+  }
+}
+
+type Params = Record<string, string>;
+
+// `/a/b/:c/:d` `/a/b/1/2`
+// 匹配成功时返回 params
+export function matchPath(pattern: string, path: string) {
+  const reg = new ParamsRegExp(pattern);
+  const matchResult = path.match(reg) || `${path}/`.match(reg);
+  if (!matchResult) return null;
+  const params: Params = {};
+  if (matchResult) {
+    Object.keys(reg.namePosition).forEach((name) => {
+      params[name] = matchResult[reg.namePosition[name] + 1];
+    });
+  }
+  return params;
+}
+
+export interface RouteItem<T = unknown> {
+  // 支持 *
+  // 支持 /a/*
+  // 不支持相对路径
+  // 不能匹配查询字符串
+  pattern: string;
+  redirect?: string;
+  content?: TemplateResult;
+  getContent?: (params: Params) => TemplateResult | Promise<TemplateResult>;
+  title?: string;
+  // 用来传递数据
+  data?: T;
+}
+
+type RoutesObject = Record<string, RouteItem>;
+
+// params 中的成员不会验证
+export interface RouteOptions extends Omit<UpdateHistoryParams, 'path'> {
+  params?: Params;
+}
+
+// 从路由创建路径
+// 不包含 basePath
+export function createPath(route: RouteItem, options?: RouteOptions) {
+  let path = route.pattern;
+  const params = options?.params;
+  if (params) {
+    Object.keys(params).forEach((key) => {
+      path = path.replace(new RegExp(`:${key}`, 'g'), params[key]);
+    });
+  }
+  return path;
+}
+
+export function createHistoryParams(route: RouteItem, options?: RouteOptions): UpdateHistoryParams {
+  const path = createPath(route, options);
+  return {
+    path,
+    ...options,
+  };
+}
+
+interface ConstructorOptions {
+  isLight?: boolean;
+  routes?: RouteItem[] | RoutesObject;
+}
+
+type State = {
+  content?: TemplateResult;
+};
+
+/**
+ * @attr inert 暂停路由更新
+ * @fires routechange
+ * @fires error
+ * @fires loading
+ */
+@connectStore(history.store)
+export class GemRouteElement extends GemElement<State> {
+  @property routes?: RouteItem[] | RoutesObject;
+  /**
+   * @example
+   * const locationStore = GemRouteElement.createLocationStore()
+   * html`<gem-route .locationStore=${locationStore}>`
+   */
+  @property locationStore?: Store<{ path: string; params: Params; query: QueryString; data?: any }>;
+  @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
+  currentParams: Params = {};
+
+  #lastLoader?: Promise<TemplateResult>;
+
+  static createLocationStore = () => {
+    const { path, query, data } = history.getParams();
+    return createStore({ path, query, data, params: {} as Record<string, string> });
+  };
+
+  static findRoute = (target: RouteItem[] | RoutesObject = [], path: string) => {
+    let defaultRoute: RouteItem | null = null;
+    let routes: RouteItem[];
+    if (target instanceof Array) {
+      routes = target;
+    } else {
+      routes = Object.values(target);
+    }
+    for (const route of routes) {
+      if ('*' === route.pattern) {
+        defaultRoute = route;
+      } else {
+        const params = matchPath(route.pattern, path);
+        if (params) {
+          return { route, params };
+        }
+      }
+    }
+    return { route: defaultRoute };
+  };
+
+  constructor({ isLight, routes }: ConstructorOptions = {}) {
+    super({ isLight });
+    this.routes = routes;
+  }
+
+  state: State = {
+    content: undefined,
+  };
+
+  #updateLocationStore = () => {
+    if (this.locationStore) {
+      const { path, query, data } = history.getParams();
+      updateStore(this.locationStore, {
+        path,
+        params: this.currentParams,
+        query,
+        data,
+      });
+    }
+  };
+
+  #setContent = (route: RouteItem | null, params: Params, content?: TemplateResult) => {
+    this.#lastLoader = undefined;
+    this.currentRoute = route;
+    this.currentParams = params;
+    this.setState({ content });
+    this.routechange(this.currentRoute);
+    this.#updateLocationStore();
+  };
+
+  mounted() {
+    this.effect(
+      ([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) {
+          history.replace({ path: redirect });
+          return;
+        }
+        const title = route?.title;
+        if (title) updateStore(titleStore, { title });
+        const contentOrLoader = content || getContent?.(params);
+        if (contentOrLoader instanceof Promise) {
+          this.loading(route!);
+          this.#lastLoader = contentOrLoader;
+          const isSomeLoader = () => this.#lastLoader === contentOrLoader;
+          contentOrLoader
+            .then((content) => {
+              if (isSomeLoader()) this.#setContent(route, params, content);
+            })
+            .catch((err) => {
+              if (isSomeLoader()) this.error(err);
+            });
+          return;
+        }
+        this.#setContent(route, params, contentOrLoader);
+      },
+      () => {
+        const { path } = history.getParams();
+        return [this.key, path, location.search];
+      },
+    );
+  }
+
+  shouldUpdate() {
+    if (this.inert) return false;
+    return true;
+  }
+
+  render() {
+    const { content } = this.state;
+    if (!this.shadowRoot) return html`${content}`;
+
+    return html`
+      <style>
+        :host,
+        :not(:defined) {
+          display: contents;
+        }
+      </style>
+      ${content ?? html`<slot></slot>`}
+    `;
+  }
+}
+
+export class GemLightRouteElement extends GemRouteElement {
+  constructor(options: ConstructorOptions = {}) {
+    super({ ...options, isLight: true });
+  }
+}

package/src/elements/base/title.ts

@@ -0,0 +1,68 @@
+/**
+ * 标题显示在：
+ *
+ * - 桌面端 Tab 的 title
+ * - 移动端 Appbar 的 title
+ *
+ * 修改标题：
+ *
+ * - `<gem-route>` 匹配路由时自动设置 `route.title`
+ * - `<gem-link>` 的 `doc-title` 属性和 `route.title`
+ * - 修改路径时，`history` 默认设置 `title` 为空
+ * - 数据获取后，手动调用 `Title.setTitle`
+ * - `<gem-title>` 作为默认值设置
+ */
+
+import { GemElement, html } from '../../lib/element';
+import { attribute, connectStore } from '../../lib/decorators';
+import { updateStore, connect } from '../../lib/store';
+import { titleStore } from '../../lib/history';
+
+/**
+ * 允许声明式设置 `document.title`
+ * @attr suffix
+ */
+@connectStore(titleStore)
+export class GemTitleElement extends GemElement {
+  // 没有后缀的标题
+  static title = document.title;
+  static defaultTitle = 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;
+    } else {
+      GemTitleElement.title = GemTitleElement.defaultTitle;
+      document.title = GemTitleElement.title;
+    }
+  }
+
+  @attribute suffix: string;
+
+  constructor() {
+    super();
+    new MutationObserver(() => this.update()).observe(this, { childList: true, characterData: true, subtree: true });
+  }
+
+  render() {
+    // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
+    GemTitleElement.updateTitle(this.textContent || '', this.suffix);
+
+    if (this.hidden) {
+      return html``;
+    }
+    return html`${GemTitleElement.title}`;
+  }
+}
+
+connect(titleStore, GemTitleElement.updateTitle);

package/src/elements/base/unsafe.ts

@@ -0,0 +1,37 @@
+import { GemElement } from '../../lib/element';
+import { attribute } from '../../lib/decorators';
+
+/**
+ * 直接写会被解释成固定属性，需要使用变量赋值
+ *
+ * @attr content
+ * @attr contentcss
+ */
+export class GemUnsafeElement extends GemElement {
+  @attribute content: string;
+  @attribute contentcss: string;
+
+  constructor() {
+    super();
+    this.effect(
+      () => {
+        if (this.shadowRoot) {
+          this.shadowRoot.innerHTML = `
+            <style>
+              :host {
+                display: contents;
+              }
+              ${this.contentcss}
+            </style>
+            ${this.content}
+          `;
+        }
+      },
+      () => [this.content, this.contentcss],
+    );
+  }
+
+  render() {
+    return undefined;
+  }
+}

package/src/elements/base/use.ts

@@ -0,0 +1,57 @@
+import { GemElement, html } from '../../lib/element';
+import { attribute, property, state } from '../../lib/decorators';
+
+const eleCache = new Map<string, HTMLTemplateElement>();
+/**
+ * svg 中的 `<use>` 不能穿透 ShadowDOM,
+ * 此元素用来模拟 `<use>`,
+ * 由于是复制元素，所以不能像 `<use>` 一样自动更新
+ *
+ * slot 支持为 icon 添加效果，如涟漪，徽章
+ *
+ * @attr selector
+ */
+export class GemUseElement extends GemElement {
+  @attribute selector: string; // CSS 选择器
+  @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') {
+      let temp = eleCache.get(ele);
+      if (!temp) {
+        temp = document.createElement('template');
+        temp.innerHTML = ele;
+        eleCache.set(ele, temp);
+      }
+      return temp.content.cloneNode(true);
+    } else if (ele instanceof HTMLTemplateElement) {
+      return ele.content.cloneNode(true);
+    } else {
+      return ele?.cloneNode(true);
+    }
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+          position: relative;
+        }
+        :host(:not([hidden])) {
+          display: inline-flex;
+          align-items: center;
+        }
+        svg {
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      ${this.getContent()}
+      <slot></slot>
+    `;
+  }
+}

package/src/elements/gesture.ts

@@ -1,259 +1,5 @@
-import { GemElement, html } from '../lib/element';
-import { attribute, customElement, emitter, Emitter } from '../lib/decorators';
+import { GemGestureElement } from './base/gesture';
 
-export type PanEventDetail = {
-  // movement
-  x: number;
-  y: number;
-  clientX: number;
-  clientY: number;
-  timeStamp: number;
-  isPrimary: boolean;
-  pointerId: number;
-};
-export interface SwipeEventDetail {
-  direction: 'top' | 'right' | 'bottom' | 'left';
-  speed: number; // px/ms
-}
-export interface PinchEventDetail {
-  // center base viewport
-  x: number;
-  y: number;
-  scale: number;
-}
-export interface RotateEventDetail {
-  // center base viewport
-  x: number;
-  y: number;
-  rotate: number;
-}
+export * from './base/gesture';
 
-function angleAB(
-  a: number,
-  b: number,
-  c: number,
-  { clientX: x1, clientY: y1 }: PanEventDetail,
-  { clientX: x2, clientY: y2 }: PanEventDetail,
-  { clientX: x3, clientY: y3 }: PanEventDetail,
-) {
-  // https://en.wikipedia.org/wiki/Law_of_cosines
-  // https://blog.csdn.net/z278930050/article/details/53319091
-  return (
-    Math.sign((x2 - x1) * (y3 - y2) - (y2 - y1) * (x3 - x2)) * Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b)) * 180
-  );
-}
-
-/**
- * 块级元素，如果要设置成 `contents`，则内容块要设置 `touch-action: none`
- * https://javascript.info/pointer-events#event-pointercancel
- *
- * 在移动端上，必须设置 `touch-action` 以允许滚动等原生动作
- *
- * 为什么空白区域会自动触发 `pointercancel`?
- *
- * @customElement gem-gesture
- *
- * @event pan
- * @event pinch
- * @event rotate
- * @event swipe
- * @event press
- * @event end
- *
- * @attr touch-action
- */
-@customElement('gem-gesture')
-export class GemGestureElement extends GemElement {
-  @emitter pan: Emitter<PanEventDetail>;
-  @emitter pinch: Emitter<PinchEventDetail>;
-  @emitter rotate: Emitter<RotateEventDetail>;
-  @emitter swipe: Emitter<SwipeEventDetail>;
-  @emitter press: Emitter<null>;
-  @emitter end: Emitter<null>;
-
-  @attribute touchAction: string;
-
-  pressed = false; // 触发 press 之后不触发其他事件
-  pressTimer = 0;
-
-  startEventMap: Map<number, PointerEvent> = new Map();
-  movesMap: Map<number, PanEventDetail[]> = new Map();
-
-  constructor() {
-    super();
-    this.addEventListener('pointerdown', this.onStart);
-    this.addEventListener('pointermove', this.onMove);
-    this.addEventListener('pointerup', this.onEnd);
-    this.addEventListener('pointercancel', this.onEnd);
-    this.addEventListener('dragstart', (evt) => evt.preventDefault());
-  }
-
-  getMoves(pointerId: number) {
-    return this.movesMap.get(pointerId) || [];
-  }
-
-  getStartEvent(pointerId: number) {
-    return this.startEventMap.get(pointerId) as PointerEvent;
-  }
-
-  getOtherLastmove(pointerId: number) {
-    for (const id of this.movesMap.keys()) {
-      if (id !== pointerId) {
-        const moves = this.getMoves(id);
-        return moves[moves.length - 1] || this.getStartEvent(id);
-      }
-    }
-  }
-
-  getMovementX(x: number, y: number) {
-    const touchAction = this.touchAction;
-    if (
-      (touchAction.includes('pan-right') && x > 0) ||
-      (touchAction.includes('pan-left') && x < 0) ||
-      touchAction.includes('pan-x') ||
-      (((touchAction.includes('pan-down') && y > 0) ||
-        (touchAction.includes('pan-up') && y < 0) ||
-        touchAction.includes('pan-y')) &&
-        Math.abs(y) > Math.abs(x)) // horizontally scrolling
-    ) {
-      return 0;
-    }
-    return x;
-  }
-
-  getMovementY(x: number, y: number) {
-    const touchAction = this.touchAction;
-    if (
-      (touchAction.includes('pan-down') && y > 0) ||
-      (touchAction.includes('pan-up') && y < 0) ||
-      touchAction.includes('pan-y') ||
-      (((touchAction.includes('pan-right') && x > 0) ||
-        (touchAction.includes('pan-left') && x < 0) ||
-        touchAction.includes('pan-x')) &&
-        Math.abs(x) > Math.abs(y)) // vertical scrolling
-    ) {
-      return 0;
-    }
-    return y;
-  }
-
-  onStart(evt: PointerEvent) {
-    evt.stopPropagation();
-    this.setPointerCapture(evt.pointerId);
-    this.movesMap.set(evt.pointerId, []);
-    this.startEventMap.set(evt.pointerId, evt);
-    if (evt.isPrimary) {
-      this.pressed = false;
-      this.pressTimer = window.setTimeout(() => {
-        this.press(null);
-        this.pressed = true;
-      }, 251);
-    }
-  }
-
-  onMove(evt: PointerEvent) {
-    evt.stopPropagation();
-    const { pointerId, clientX, clientY, isPrimary, pointerType, timeStamp } = evt;
-    if (!this.pressed && this.hasPointerCapture(pointerId)) {
-      const moves = this.getMoves(pointerId);
-      const startEvent = this.getStartEvent(pointerId);
-      const lastMove = moves[moves.length - 1] || startEvent;
-      // https://bugs.webkit.org/show_bug.cgi?id=220194
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=1092358
-      const movementX = clientX - lastMove.clientX;
-      const movementY = clientY - lastMove.clientY;
-      const move = {
-        x: this.getMovementX(movementX, movementY),
-        y: this.getMovementY(movementX, movementY),
-        clientX,
-        clientY,
-        timeStamp,
-        isPrimary,
-        pointerId,
-      };
-      moves.push(move);
-      this.pan(move);
-
-      if (this.movesMap.size !== 1) {
-        const secondaryPoint = this.getOtherLastmove(pointerId) as PanEventDetail;
-        const moveLen = Math.sqrt(movementX ** 2 + movementY ** 2);
-        const distanceLen = Math.sqrt(
-          (lastMove.clientX - secondaryPoint.clientX) ** 2 + (lastMove.clientY - secondaryPoint.clientY) ** 2,
-        );
-        const newDistanceLen = Math.sqrt(
-          (clientX - secondaryPoint.clientX) ** 2 + (clientY - secondaryPoint.clientY) ** 2,
-        );
-        const x = (lastMove.clientX + secondaryPoint.clientX) / 2;
-        const y = (lastMove.clientY + secondaryPoint.clientY) / 2;
-        this.pinch({ x, y, scale: newDistanceLen / distanceLen });
-        this.rotate({ x, y, rotate: angleAB(newDistanceLen, distanceLen, moveLen, secondaryPoint, lastMove, move) });
-      }
-
-      const accuracy = pointerType === 'touch' ? 5 : 0;
-      if (
-        Math.abs(movementX) > accuracy ||
-        Math.abs(movementY) > accuracy ||
-        Math.abs(move.clientX - startEvent.clientX) > accuracy ||
-        Math.abs(move.clientY - startEvent.clientY) > accuracy
-      ) {
-        window.clearTimeout(this.pressTimer);
-      }
-    }
-  }
-
-  onEnd(evt: PointerEvent) {
-    evt.stopPropagation();
-    const { pointerId } = evt;
-    window.clearTimeout(this.pressTimer);
-
-    if (this.movesMap.size === 1) {
-      this.end(null);
-    }
-
-    // auto release: https://javascript.info/pointer-events#pointer-capturing
-    if (!this.pressed && this.hasPointerCapture(pointerId)) {
-      const moves = this.getMoves(pointerId);
-
-      if (moves.length > 2) {
-        const { x, y, timeStamp, clientX, clientY } = moves[moves.length - 1];
-        const move2 = moves[moves.length - 3];
-        if (Math.abs(x) > 2) {
-          if (Math.abs(x) > Math.abs(y)) {
-            const speed = Math.abs(move2.clientX - clientX) / (timeStamp - move2.timeStamp);
-            if (x > 0) {
-              this.swipe({ direction: 'right', speed });
-            } else {
-              this.swipe({ direction: 'left', speed });
-            }
-          }
-        }
-        if (Math.abs(y) > 2) {
-          const speed = Math.abs(move2.clientY - clientY) / (timeStamp - move2.timeStamp);
-          if (Math.abs(y) > Math.abs(x)) {
-            if (y > 0) {
-              this.swipe({ direction: 'bottom', speed });
-            } else {
-              this.swipe({ direction: 'top', speed });
-            }
-          }
-        }
-      }
-    }
-
-    this.movesMap.delete(pointerId);
-    this.startEventMap.delete(pointerId);
-  }
-
-  render() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          user-select: none;
-          touch-action: ${this.touchAction || 'none'};
-        }
-      </style>
-      <slot></slot>
-    `;
-  }
-}
+customElements.define('gem-gesture', GemGestureElement);