@mantou/gem 1.6.4 → 1.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantou/gem",
-  "version": "1.6.4",
+  "version": "1.6.10",
   "description": "💎 使用自定义元素的轻量级 WebApp 开发框架",
   "main": "index.js",
   "module": "index.js",
@@ -12,7 +12,7 @@
   },
   "files": [
     "/index.*",
-    "/umd.*",
+    "/dist/",
     "/elements/",
     "/lib/",
     "/helper/",
@@ -20,23 +20,13 @@
   ],
   "typings": "index.d.ts",
   "scripts": {
-    "docs": "npx gem-book docs",
-    "build:docs": "yarn docs -- --build",
-    "lint": "tsc --noEmit && eslint --ext .ts --fix src/",
-    "clean": "node -e \"fs.readdirSync('src').map(dir => require('rimraf').sync(dir))\"",
-    "example": "cross-env NODE_ENV=development webpack serve",
-    "build:examples": "rimraf build && node scripts/build-examples",
-    "build:module": "yarn clean && tsc",
-    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.config.umd.js",
-    "build": "yarn build:module && yarn build:umd",
-    "prepare": "yarn build",
-    "prepublishOnly": "yarn lint && yarn test",
-    "release": "node scripts/release",
-    "test": "yarn build:module && karma start --coverage"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mantou132/gem.git"
+    "docs": "gem-book docs",
+    "build:docs": "yarn docs --build",
+    "build:module": "tsc -p tsconfig.build.json",
+    "build:lib": "vite build",
+    "build": "yarn build:module && yarn build:lib",
+    "start": "yarn build:module --watch",
+    "test": "wtr"
   },
   "keywords": [
     "web",
@@ -44,46 +34,28 @@
     "global state management",
     "web framework"
   ],
-  "author": "mantou132",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/mantou132/gem/issues"
-  },
-  "homepage": "https://github.com/mantou132/gem#readme",
   "dependencies": {
     "lit-html": "^1.4.1"
   },
   "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@gemjs/config": "^1.6.10",
     "@open-wc/testing": "^2.5.33",
-    "@open-wc/testing-karma": "^4.0.9",
-    "@open-wc/testing-karma-bs": "^1.3.94",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^6.0.0",
-    "inquirer": "^8.1.0",
-    "lint-staged": "^11.0.0",
-    "ora": "^5.4.0",
-    "prettier": "^2.3.0",
+    "@web/dev-server-esbuild": "^0.2.16",
+    "@web/test-runner": "^0.13.22",
     "rimraf": "^3.0.2",
-    "semver": "^7.3.5",
-    "ts-loader": "^9.2.2",
-    "typescript": "^4.3.2",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
+    "typescript": "^4.5.0",
+    "vite": "^2.7.13"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "author": "mantou132",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mantou132/gem.git",
+    "directory": "packages/gem"
+  },
+  "bugs": {
+    "url": "https://github.com/mantou132/gem/issues"
   },
-  "lint-staged": {
-    "*.ts": "eslint --fix"
-  }
+  "homepage": "https://github.com/mantou132/gem#readme"
 }

package/src/{umd.ts → dist.ts}

@@ -1,6 +1,5 @@
 /**
- * 自定义元素不应该重复定义，gem 不应该重复引入
- * 包含所有资产，导出到全局变量 `Gem`，以便供 webpack 的 `externals` 使用
+ * 导出所有内容，包括 gem 元素
  */
 export * from './elements/link';
 export * from './elements/route';
@@ -9,12 +8,12 @@ export * from './elements/use';
 export * from './elements/unsafe';
 export * from './elements/reflect';
 
-export * from './elements/modal-base';
-export * from './elements/dialog-base';
+export * from './elements/base/modal-factory';
+export * from './elements/base/dialog';
 
 export * from './helper/theme';
 export * from './helper/i18n';
 export * from './helper/request';
 export * from './helper/mediaquery';
 
-export * from './';
+export * from '.';

package/src/elements/{dialog-base.ts → base/dialog.ts}

@@ -1,6 +1,6 @@
-import { GemElement } from '../lib/element';
-import { attribute, state, connectStore } from '../lib/decorators';
-import { history } from '../lib/history';
+import { GemElement } from '../../lib/element';
+import { attribute, state, connectStore } from '../../lib/decorators';
+import { history } from '../../lib/history';
 
 /**
  * 在模版中声明的 dialog，使用 `open` 方法 打开；
@@ -10,8 +10,9 @@ import { history } from '../lib/history';
  * @attr label
  */
 @connectStore(history.store)
-export abstract class DialogBaseElement extends GemElement {
-  @state opened = false;
+export abstract class GemDialogBaseElement extends GemElement {
+  @attribute label: string;
+  @state opened: boolean;
 
   inert = true;
 
@@ -19,8 +20,6 @@ export abstract class DialogBaseElement extends GemElement {
   #parentElement: Node | null;
   #inertStore: HTMLElement[] = [];
 
-  @attribute label = '';
-
   constructor() {
     super();
     this.internals.role = 'dialog';

package/src/elements/base/gesture.ts

@@ -0,0 +1,256 @@
+import { GemElement, html } from '../../lib/element';
+import { attribute, emitter, Emitter } from '../../lib/decorators';
+
+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;
+}
+
+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`?
+ *
+ * @event pan
+ * @event pinch
+ * @event rotate
+ * @event swipe
+ * @event press
+ * @event end
+ *
+ * @attr touch-action
+ */
+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>
+    `;
+  }
+}

package/src/elements/base/link.ts

@@ -0,0 +1,178 @@
+import { GemElement, html, ifDefined } from '../../lib/element';
+import { attribute, property, state, part, connectStore } from '../../lib/decorators';
+import { history, basePathStore } from '../../lib/history';
+import { absoluteLocation } from '../../lib/utils';
+
+import { matchPath, RouteItem, RouteOptions, createHistoryParams, createPath } from './route';
+
+/**
+ * @attr href
+ * @attr target
+ * @attr doc-title
+ * @attr path
+ * @attr query
+ * @attr hash
+ * @attr pattern
+ * @attr hint
+ * @part link
+ *
+ * print bug: https://github.com/mantou132/gem/issues/36
+ */
+@connectStore(basePathStore)
+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';
+
+  // 动态路由，根据 route.pattern 和 options.params 计算出 path
+  @property route: RouteItem | undefined;
+  @property options: RouteOptions | undefined;
+  @property prepare: (() => void | Promise<void>) | undefined;
+
+  @part link: string;
+
+  constructor() {
+    super();
+    this.tabIndex = 0;
+    this.addEventListener('click', this.clickHandle);
+  }
+
+  // 不包含 basePath
+  getPathInfo() {
+    if (this.route) {
+      const queryProp = this.options?.query || '';
+      const hashProp = this.options?.hash || '';
+      return createPath(this.route, this.options) + queryProp + hashProp;
+    } else {
+      const url = this.href || this.path + this.query + this.hash;
+      const { path, query } = history.getParams();
+      if (url.startsWith('#')) {
+        return `${path}${query}${url}`;
+      } else if (url.startsWith('?')) {
+        return `${path}${url}`;
+      } else if (url.startsWith('.')) {
+        return absoluteLocation(path, url);
+      } else {
+        return url;
+      }
+    }
+  }
+
+  isExternal(pathInfo: string) {
+    return !pathInfo.startsWith('/');
+  }
+
+  clickHandle = async (e: MouseEvent) => {
+    const pathInfo = this.getPathInfo();
+
+    if (!pathInfo) return;
+
+    // 外部链接使用 `window.open`
+    if (this.isExternal(pathInfo)) {
+      switch (this.target) {
+        case '_self':
+          window.location.href = pathInfo;
+          return;
+        case '_parent':
+          window.parent.location.href = pathInfo;
+          return;
+        case '_top':
+          window.top!.location.href = pathInfo;
+          return;
+        default:
+          window.open(pathInfo);
+          return;
+      }
+    }
+
+    const { path, query, hash } = history.getParams();
+    if (path + query + hash === pathInfo) {
+      // 点击当前路由链接时，什么也没做
+      return;
+    }
+
+    e.stopPropagation();
+
+    await this.prepare?.();
+
+    if (this.route) {
+      history.pushIgnoreCloseHandle({
+        ...createHistoryParams(this.route, this.options),
+        title: this.route.title || this.docTitle,
+      });
+    } else if (this.href) {
+      const { pathname, search, hash } = new URL(pathInfo, location.origin);
+      history.pushIgnoreCloseHandle({
+        path: pathname,
+        query: search,
+        hash: hash,
+        title: this.docTitle,
+      });
+    } else {
+      history.pushIgnoreCloseHandle({ path: this.path, query: this.query, hash: this.hash, title: this.docTitle });
+    }
+  };
+
+  preventDefault = (e: MouseEvent) => {
+    e.preventDefault();
+  };
+
+  render(pathInfo = this.getPathInfo()) {
+    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.isExternal(pathInfo)
+            ? pathInfo
+            : new URL(history.basePath + pathInfo, location.origin).toString(),
+        )}
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+}
+
+/**
+ * @attr pattern
+ * @state active
+ */
+@connectStore(history.store)
+export class GemActiveLinkElement extends GemLinkElement {
+  @attribute pattern: string; // 使用匹配模式设定 active
+  @state active: boolean;
+
+  render() {
+    const { path, query, hash } = history.getParams();
+    const isMatchPattern = this.pattern && matchPath(this.pattern, path);
+    const pathInfo = this.getPathInfo();
+    if (isMatchPattern || path + query + hash === pathInfo) {
+      this.active = true;
+    } else {
+      this.active = false;
+    }
+    return super.render(pathInfo);
+  }
+}

package/src/elements/{modal-base.ts → base/modal-factory.ts}

@@ -1,6 +1,6 @@
-import { GemElement } from '../lib/element';
-import { createStore, updateStore } from '../lib/store';
-import { history } from '../lib/history';
+import { GemElement } from '../../lib/element';
+import { createStore, updateStore } from '../../lib/store';
+import { history } from '../../lib/history';
 
 const open = Symbol('open mark');
 

package/src/elements/base/reflect.ts

@@ -0,0 +1,29 @@
+import { GemElement } from '../../lib/element';
+import { property } from '../../lib/decorators';
+
+// support prerender
+document.querySelectorAll('[data-reflect]').forEach((e) => e.remove());
+
+export class GemReflectElement extends GemElement {
+  @property target: HTMLElement = document.head;
+
+  constructor() {
+    super({ isLight: true });
+    this.hidden = true;
+    this.effect(
+      () => {
+        const childNodes = [...this.childNodes];
+        childNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            node.dataset.reflect = '';
+          }
+          this.target.append(node);
+        });
+        return () => {
+          childNodes.forEach((node) => node.remove());
+        };
+      },
+      () => [this.target],
+    );
+  }
+}