@mantou/gem 2.3.2 → 2.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantou/gem",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "💎 Build reusable custom elements and web apps on Web Components",
   "keywords": [
     "frontend",
@@ -12,6 +12,14 @@
   "esm.sh": {
     "bundle": false
   },
+  "sideEffects": [
+    "./index.js",
+    "./lib/element.js",
+    "./elements/*.js",
+    "./helper/hmr.js",
+    "./helper/ssr-shim.js",
+    "./dist/*"
+  ],
   "main": "index.js",
   "module": "index.js",
   "exports": {

package/src/elements/base/link.ts

@@ -13,11 +13,11 @@ import {
   template,
 } from '../../lib/decorators';
 import { css, GemElement, html } from '../../lib/element';
-import { basePathStore, history } from '../../lib/history';
+import type { RouteOptions } from '../../lib/history';
+import { basePathStore, createHistoryParams, createPath, history, matchPath } from '../../lib/history';
 import { isServer } from '../../lib/server';
 import { absoluteLocation } from '../../lib/utils';
-import type { RouteItem, RouteOptions } from './route';
-import { createHistoryParams, createPath, matchPath } from './route';
+import type { RouteItem } from './route';
 
 function isExternal(path: string) {
   return !path.startsWith('/');

package/src/elements/base/route.ts

@@ -1,80 +1,17 @@
 import type { Emitter } from '../../lib/decorators';
 import { adoptedStyle, boolattribute, effect, emitter, light, property, shadow, template } from '../../lib/decorators';
 import { createState, css, GemElement, html } from '../../lib/element';
-import type { UpdateHistoryParams } from '../../lib/history';
-import { history, titleStore } from '../../lib/history';
+import type { RouteOptions, UpdateHistoryParams } from '../../lib/history';
+import { createPath, history, matchPath, titleStore } from '../../lib/history';
 import type { TemplateResult } from '../../lib/lit-html';
 import type { Store } from '../../lib/store';
 import { connect, createStore } from '../../lib/store';
 import type { QueryString } from '../../lib/utils';
 import { addListener } from '../../lib/utils';
 
-type Params = Record<string, string>;
-type Matcher = (path: string) => Params | null | undefined;
-
-const UNNAMED_PARAM_PREFIX = '_';
-
-// 不支持 `URLPattern` 时转换成正则
-// '/test/:a' /^\/test\/(?<a>[^/]+)$/
-// '/test/:a/b' /^\/test\/(?<a>[^/]+)\/b$/
-// '/test/*' /^\/test\/(?<_0>.*)$/
-// '/test/:a/*' /^\/test\/(?<a>[^/]+)\/(?<_0>.*)$/
-// '/test/*/:b' /^\/test\/(?<_0>.*)\/(?<b>[^/]+)$/
-function createRegExpMatcher(pattern: string): Matcher {
-  let i = 0;
-  const source = pattern.replace(/:[^/$]+|\*/g, (name) =>
-    name === '*' ? `(?<${UNNAMED_PARAM_PREFIX}${i++}>.*)` : `(?<${name.slice(1)}>[^/]+)`,
-  );
-  const reg = new RegExp(`^${source}$`);
-  return (path) => {
-    const result = path.match(reg);
-    if (!result) return null;
-    const params: Params = {};
-    for (const key in result.groups) {
-      params[key.startsWith(UNNAMED_PARAM_PREFIX) ? key.slice(1) : key] = result.groups[key];
-    }
-    return params;
-  };
-}
+export { createHistoryParams, createPath, matchPath, type RouteOptions } from '../../lib/history';
 
-// pattern 开头不含参数和特殊字符的部分
-const LITERAL_PREFIX = /^[\w\-./~]*/;
-
-// `URLPattern` 的创建和 `exec` 都比较慢，不含参数时直接比较，否则先检查固定的开头
-function createMatcher(pattern: string): Matcher {
-  const literal = LITERAL_PREFIX.exec(pattern)![0];
-  if (literal === pattern) return (path) => (path === pattern ? {} : null);
-  // 根 layout 的 pattern
-  if (pattern === '*') return (path) => ({ 0: path });
-  if (!globalThis.URLPattern) return createRegExpMatcher(pattern);
-  const urlPattern = new URLPattern({ pathname: pattern });
-  // 参数前的 `/` 可能是可选的，例如 `/a/:b?` 匹配 `/a`
-  const prefix = literal.replace(/\/$/, '');
-  return (path) =>
-    path.startsWith(prefix) ? (urlPattern.exec({ pathname: path })?.pathname.groups as Params | undefined) : null;
-}
-
-// pattern 来自路由定义，数量有限
-const matchers = new Map<string, Matcher>();
-
-/**
- * - 大小写敏感
- * - 匹配成功时返回 params
- * - 以 `/` 结尾时能不带 `/` 结尾的路径
- * - `*` 匹配到的 params 名称为数字
- *
- * @example
- * ```js
- * matchPath(`/a/b/:c/:d`,`/a/b/1/2`);
- * matchPath(`/a/b/:c/:d`,`/a/b/1/2/`);
- * matchPath(`/a/b/*`,`/a/b/1/2/`);
- * ```
- */
-export function matchPath(pattern: string, path: string) {
-  let match = matchers.get(pattern);
-  if (!match) matchers.set(pattern, (match = createMatcher(pattern)));
-  return match(path) || match(`${path}/`) || null;
-}
+type Params = Record<string, string>;
 
 export interface RouteItem<T = unknown> {
   // 支持 *
@@ -96,35 +33,6 @@ export interface RouteItem<T = unknown> {
 
 export type RoutesObject<T = unknown> = Record<string, RouteItem<T>>;
 
-// params 中的成员不会验证
-export interface RouteOptions extends Omit<UpdateHistoryParams, 'path'> {
-  params?: Params;
-}
-
-// 从路由创建路径
-// 不包含 basePath
-export function createPath(route: RouteItem, options?: RouteOptions) {
-  // /a/* /a/:0
-  // /a/*/:b/* /a/:0/:b/:1
-  let i = 0;
-  let path = route.pattern.replaceAll('*', () => `:${i++}`);
-  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,
-  };
-}
-
 const INIT_CONTENT = html``;
 
 type State = {

package/src/lib/element.ts

@@ -1,19 +1,22 @@
-import * as decoratorsExports from './decorators';
 import { html, render } from './lit-html';
-import * as reactiveExports from './reactive';
-import { setEngine } from './reactive';
-import * as storeExports from './store';
-import * as versionExports from './version';
+import { createState, css, GemElement, setEngine } from './reactive';
+import { version } from './version';
 
+// 副作用，在 package.json 的 `sideEffects` 中声明；
+// 同时声明 `index.js`，否则 esbuild 从入口直接解析到 reactive 的导出时会跳过这个模块
 setEngine(html, render);
 
 export * from './decorators';
 export { directive } from './directive';
+export { keyed } from './keyed';
 export { createRef, mathml, svg, TemplateResult } from './lit-html';
 export * from './reactive';
 export { repeat } from './repeat';
 
-type HookExports = typeof reactiveExports & typeof decoratorsExports & typeof storeExports & typeof versionExports;
+// 只提供 devtools 使用的成员，引用整个模块会导致没用到的导出不能被树抖
+const hookExports = { GemElement, setEngine, html, render, css, createState, version };
+
+type HookExports = typeof hookExports;
 
 declare global {
   /** devtools 注入的钩子，其他包可以扩展，例如 gem-ssr */
@@ -23,10 +26,5 @@ declare global {
 
 // 只记录第一次定义，往往是最外层 App
 if (globalThis.__GEM_DEVTOOLS__HOOK__ && !globalThis.__GEM_DEVTOOLS__HOOK__.GemElement) {
-  Object.assign(globalThis.__GEM_DEVTOOLS__HOOK__, {
-    ...reactiveExports,
-    ...decoratorsExports,
-    ...storeExports,
-    ...versionExports,
-  });
+  Object.assign(globalThis.__GEM_DEVTOOLS__HOOK__, hookExports);
 }

package/src/lib/history.ts

@@ -309,3 +309,99 @@ if (!globalThis._GEMHISTORY) {
 const { history, titleStore, basePathStore } = globalThis._GEMHISTORY;
 
 export { basePathStore, history, titleStore };
+
+type Params = Record<string, string>;
+type Matcher = (path: string) => Params | null | undefined;
+
+const UNNAMED_PARAM_PREFIX = '_';
+
+// 不支持 `URLPattern` 时转换成正则
+// '/test/:a' /^\/test\/(?<a>[^/]+)$/
+// '/test/:a/b' /^\/test\/(?<a>[^/]+)\/b$/
+// '/test/*' /^\/test\/(?<_0>.*)$/
+// '/test/:a/*' /^\/test\/(?<a>[^/]+)\/(?<_0>.*)$/
+// '/test/*/:b' /^\/test\/(?<_0>.*)\/(?<b>[^/]+)$/
+function createRegExpMatcher(pattern: string): Matcher {
+  let i = 0;
+  const source = pattern.replace(/:[^/$]+|\*/g, (name) =>
+    name === '*' ? `(?<${UNNAMED_PARAM_PREFIX}${i++}>.*)` : `(?<${name.slice(1)}>[^/]+)`,
+  );
+  const reg = new RegExp(`^${source}$`);
+  return (path) => {
+    const result = path.match(reg);
+    if (!result) return null;
+    const params: Params = {};
+    for (const key in result.groups) {
+      params[key.startsWith(UNNAMED_PARAM_PREFIX) ? key.slice(1) : key] = result.groups[key];
+    }
+    return params;
+  };
+}
+
+// pattern 开头不含参数和特殊字符的部分
+const LITERAL_PREFIX = /^[\w\-./~]*/;
+
+// `URLPattern` 的创建和 `exec` 都比较慢，不含参数时直接比较，否则先检查固定的开头
+function createMatcher(pattern: string): Matcher {
+  const literal = LITERAL_PREFIX.exec(pattern)![0];
+  if (literal === pattern) return (path) => (path === pattern ? {} : null);
+  // 根 layout 的 pattern
+  if (pattern === '*') return (path) => ({ 0: path });
+  if (!globalThis.URLPattern) return createRegExpMatcher(pattern);
+  const urlPattern = new URLPattern({ pathname: pattern });
+  // 参数前的 `/` 可能是可选的，例如 `/a/:b?` 匹配 `/a`
+  const prefix = literal.replace(/\/$/, '');
+  return (path) =>
+    path.startsWith(prefix) ? (urlPattern.exec({ pathname: path })?.pathname.groups as Params | undefined) : null;
+}
+
+// pattern 来自路由定义，数量有限
+const matchers = new Map<string, Matcher>();
+
+/**
+ * - 大小写敏感
+ * - 匹配成功时返回 params
+ * - 以 `/` 结尾时能不带 `/` 结尾的路径
+ * - `*` 匹配到的 params 名称为数字
+ *
+ * @example
+ * ```js
+ * matchPath(`/a/b/:c/:d`,`/a/b/1/2`);
+ * matchPath(`/a/b/:c/:d`,`/a/b/1/2/`);
+ * matchPath(`/a/b/*`,`/a/b/1/2/`);
+ * ```
+ */
+export function matchPath(pattern: string, path: string) {
+  let match = matchers.get(pattern);
+  if (!match) matchers.set(pattern, (match = createMatcher(pattern)));
+  return match(path) || match(`${path}/`) || null;
+}
+
+// params 中的成员不会验证
+export interface RouteOptions extends Omit<UpdateHistoryParams, 'path'> {
+  params?: Record<string, string>;
+}
+
+// 从路由创建路径
+// 不包含 basePath
+export function createPath(route: { pattern: string }, options?: RouteOptions) {
+  // /a/* /a/:0
+  // /a/*/:b/* /a/:0/:b/:1
+  let i = 0;
+  let path = route.pattern.replaceAll('*', () => `:${i++}`);
+  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: { pattern: string }, options?: RouteOptions): UpdateHistoryParams {
+  const path = createPath(route, options);
+  return {
+    path,
+    ...options,
+  };
+}

package/src/lib/keyed.ts

@@ -0,0 +1,30 @@
+import { Directive, directive } from './directive';
+import type { ChildPart } from './lit-html';
+import { setCommittedValue } from './repeat';
+
+const INITIAL = Symbol();
+
+class KeyedDirective extends Directive {
+  #key: unknown = INITIAL;
+
+  render(_key: unknown, value: unknown) {
+    return value;
+  }
+
+  // 第一次渲染时不清除，水合时复用 SSR 的内容
+  update(part: ChildPart, [key, value]: [unknown, unknown]) {
+    if (this.#key !== INITIAL && key !== this.#key) setCommittedValue(part);
+    this.#key = key;
+    return value;
+  }
+}
+
+/**
+ * `key` 改变时丢弃原来的 DOM，重新创建内容，即使模板相同，例如页面参数改变时重新创建页面元素
+ *
+ * @example
+ * ```ts
+ * html`${keyed(this.id, html`<my-editor .id=${this.id}></my-editor>`)}`;
+ * ```
+ */
+export const keyed = /*#__PURE__*/ directive(KeyedDirective) as (key: unknown, value: unknown) => unknown;

package/src/lib/lit-html.ts

@@ -167,9 +167,9 @@ const tag =
     return new TemplateResult(type, strings, values);
   };
 
-export const html = tag(HTML_RESULT);
-export const svg = tag(SVG_RESULT);
-export const mathml = tag(MATHML_RESULT);
+export const html = /*#__PURE__*/ tag(HTML_RESULT);
+export const svg = /*#__PURE__*/ tag(SVG_RESULT);
+export const mathml = /*#__PURE__*/ tag(MATHML_RESULT);
 
 // for directive
 export const noChange = Symbol.for('lit-noChange');

package/src/lib/repeat.ts

@@ -571,7 +571,7 @@ export interface RepeatDirectiveFn {
  * If no `keyFn` is provided, this directive will perform similar to mapping
  * items to values, and DOM will be reused against potentially different items.
  */
-export const repeat = directive(RepeatDirective) as RepeatDirectiveFn;
+export const repeat = /*#__PURE__*/ directive(RepeatDirective) as RepeatDirectiveFn;
 
 /**
  * The type of the class that powers this directive. Necessary for naming the

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '2.3.2';
+export const version = '2.3.3';