@mantou/gem 2.2.13 → 2.2.15

package/src/elements/base/gesture.ts

@@ -42,6 +42,17 @@ const SWIPE_MIN_SPEED = 0.3; // px/ms
 const SWIPE_MIN_DISTANCE = 20;
 const SWIPE_DIRECTION_SLOP = 10;
 
+/** 移动超过该距离后锁定本次触摸的方向，与 iOS 一样同一次触摸只交给一个方向的手势。 */
+export const AXIS_LOCK_SLOP = 10;
+/** 判定偏向纵向，滚动、下拉不会因为拇指的横向抖动被抢走。 */
+export const AXIS_LOCK_BIAS = 1.5;
+
+/** 根据相对起点的位移锁定方向，位移不足时返回 `undefined`。 */
+export function lockAxis(dx: number, dy: number): 'x' | 'y' | undefined {
+  if (Math.max(Math.abs(dx), Math.abs(dy)) < AXIS_LOCK_SLOP) return;
+  return Math.abs(dx) > Math.abs(dy) * AXIS_LOCK_BIAS ? 'x' : 'y';
+}
+
 /** Viewport coordinates in CSS pixels and a monotonic timestamp in milliseconds. */
 export interface GestureSample {
   clientX: number;
@@ -54,8 +65,8 @@ export function getSwipe(
   startEvent: GestureSample,
   moves: readonly GestureSample[],
   evt: GestureSample,
-  getMovementX?: (x: number, y: number) => number,
-  getMovementY?: (x: number, y: number) => number,
+  getMovementX?: (x: number) => number,
+  getMovementY?: (y: number) => number,
 ): SwipeEventDetail | undefined {
   const targetTime = Math.max(startEvent.timeStamp, evt.timeStamp - SWIPE_TIME_WINDOW);
   let sample: GestureSample = evt;
@@ -98,7 +109,7 @@ export function getSwipe(
   const dy = evt.clientY - sample.clientY;
   const horizontal = Math.abs(dx) > Math.abs(dy);
   if (Math.abs(dx) === Math.abs(dy)) return;
-  const movement = horizontal ? (getMovementX?.(dx, dy) ?? dx) : (getMovementY?.(dx, dy) ?? dy);
+  const movement = horizontal ? (getMovementX?.(dx) ?? dx) : (getMovementY?.(dy) ?? dy);
   const distance = Math.abs(movement);
   const speed = distance / duration;
   if (distance < SWIPE_MIN_DISTANCE || speed < SWIPE_MIN_SPEED) return;
@@ -151,6 +162,7 @@ export class GemGestureElement extends GemElement {
 
   #pressed = false; // 触发 press 之后不触发其他事件
   #gestureTriggered = false; // 会排除 touchAction 方向
+  #axis?: 'x' | 'y'; // 设置了 touchAction 时，本次单指触摸锁定的方向
   #multiTouch = false;
   #pressTimer: ReturnType<typeof setTimeout> | number = 0;
 
@@ -173,32 +185,27 @@ export class GemGestureElement extends GemElement {
     }
   };
 
-  #getMovementX = (x: number, y: number) => {
+  // 交给浏览器的方向，以及方向锁定之前和锁定之外的位移都不属于本元素
+  #getMovementX = (x: 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
+      (touchAction.includes('pan-') && this.#axis !== 'x')
     ) {
       return 0;
     }
     return x;
   };
 
-  #getMovementY = (x: number, y: number) => {
+  #getMovementY = (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
+      (touchAction.includes('pan-') && this.#axis !== 'y')
     ) {
       return 0;
     }
@@ -215,6 +222,7 @@ export class GemGestureElement extends GemElement {
     if (evt.isPrimary) {
       this.#pressed = false;
       this.#gestureTriggered = false;
+      this.#axis = undefined;
       this.#pressTimer = setTimeout(() => {
         this.press(evt);
         this.#pressed = true;
@@ -236,9 +244,12 @@ export class GemGestureElement extends GemElement {
       // https://bugs.chromium.org/p/chromium/issues/detail?id=1092358
       const movementX = clientX - lastMove.clientX;
       const movementY = clientY - lastMove.clientY;
+      if (!this.#axis && this.#startEventMap.size === 1) {
+        this.#axis = lockAxis(clientX - startEvent.clientX, clientY - startEvent.clientY);
+      }
       const move = {
-        x: this.#getMovementX(movementX, movementY),
-        y: this.#getMovementY(movementX, movementY),
+        x: this.#getMovementX(movementX),
+        y: this.#getMovementY(movementY),
         clientX,
         clientY,
         timeStamp,

package/src/elements/base/link.ts

@@ -14,6 +14,7 @@ import {
 } from '../../lib/decorators';
 import { css, GemElement, html } from '../../lib/element';
 import { basePathStore, history } 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';
@@ -125,9 +126,10 @@ export class GemLinkElement extends GemElement {
 
   #getHint = () => {
     const locationString = this._getLocationString();
-    return isExternal(locationString)
-      ? locationString
-      : new URL(history.basePath + locationString, location.origin).toString();
+    if (isExternal(locationString)) return locationString;
+    const url = new URL(history.basePath + locationString, location.origin);
+    // 客户端输出完整 URL 便于打印，服务端（尤其是预渲染）的 origin 不可靠，使用根相对路径
+    return isServer ? url.pathname + url.search + url.hash : url.toString();
   };
 
   #preload = () => {

package/src/elements/base/use.ts

@@ -1,5 +1,6 @@
 import { adoptedStyle, attribute, property, shadow, state, template } from '../../lib/decorators';
 import { css, GemElement, html } from '../../lib/reactive';
+import { isServer } from '../../lib/server';
 
 const styles = css`
   :host(:where(:not([hidden]))) {
@@ -14,6 +15,7 @@ const styles = css`
 `;
 
 const eleCache = new Map<string, HTMLTemplateElement>();
+const stringsCache = new Map<string, TemplateStringsArray>();
 /**
  * svg 中的 `<use>` 不能穿透 ShadowDOM,
  * 此元素用来模拟 `<use>`,
@@ -31,6 +33,15 @@ export class GemUseElement extends GemElement {
 
   #getContent = () => {
     const ele = this.element || (this.selector ? (this.root || document).querySelector(this.selector) : null);
+    // SSR 没有 DOM，把字符串作为静态模版输出
+    if (typeof ele === 'string' && isServer) {
+      let strings = stringsCache.get(ele);
+      if (!strings) {
+        strings = Object.assign([ele], { raw: [ele] });
+        stringsCache.set(ele, strings);
+      }
+      return html(strings);
+    }
     if (typeof ele === 'string') {
       let temp = eleCache.get(ele);
       if (!temp) {

package/src/helper/hmr.ts

@@ -1,6 +1,8 @@
 import { attribute, boolattribute, emitter, globalemitter, numattribute, property, state } from '../lib/decorators';
+import { ChildPart, type TemplateResult } from '../lib/lit-html';
 import { GemElement, type Metadata, UpdateToken } from '../lib/reactive';
 import type { Store } from '../lib/store';
+import { camelToKebabCase } from '../lib/utils';
 import { Logger } from './logger';
 
 const logger = new Logger('HMR');
@@ -41,37 +43,23 @@ function getHmrMethodKeys(obj: any) {
   return Object.getOwnPropertyNames(obj).filter((key) => key.startsWith('_hmr_'));
 }
 
-/** 不支持修改 store */
+/** 连接的 store 必须是同一对象，否则元素订阅的是老 store */
 function checkMetadataNeedReload({ mode, penetrable, noBlocking, observedStores }: Metadata, newMetadata: Metadata) {
-  const stringifyStores = (stores?: Store<any>[]) =>
-    JSON.stringify(
-      stores?.map((store) => JSON.stringify({ ...store }, (_, v) => (typeof v === 'function' ? v.toString() : v))),
-    );
+  const isSameStores = (a: Store<any>[] = [], b: Store<any>[] = []) =>
+    a.length === b.length && a.every((store, i) => store === b[i]);
   if (
     mode !== newMetadata.mode ||
     penetrable !== newMetadata.penetrable ||
     noBlocking !== newMetadata.noBlocking ||
-    stringifyStores(observedStores) !== stringifyStores(newMetadata.observedStores)
+    !isSameStores(observedStores, newMetadata.observedStores)
   ) {
     return true;
   }
 }
 
-/** 不支持删减函数字段，因为原函数可能已经被绑定 */
-function checkClassNeedReload(existed: CustomElementConstructor, newClass: CustomElementConstructor) {
-  if (
-    getHmrMethodKeys(existed).join() !== getHmrMethodKeys(newClass).join() ||
-    getHmrMethodKeys(existed.prototype).join() !== getHmrMethodKeys(newClass.prototype).join()
-  ) {
-    return true;
-  }
-}
-
-/** 不支持删减实例其他字段，因为新实例总是使用老 Class 定义 */
+/** 不支持删减实例其他字段、有装饰器的函数成员和构造函数，因为新实例总是使用老 Class 定义 */
 function checkFieldsNeedReload({ instanceFields }: ReturnType<typeof getFields>) {
-  if (instanceFields.other?.add?.length || instanceFields.other?.remove?.length) {
-    return true;
-  }
+  return [instanceFields.other, instanceFields.ctor].some((diff) => diff?.add.length || diff?.remove.length);
 }
 
 function diffArr<T>(oldList: T[], newList: T[], fn: (i: T) => string = (e) => String(e)) {
@@ -98,10 +86,15 @@ function diffRecord<T>(oldRecord: Partial<Record<string, T[]>>, newRecord: Parti
   return diffArr(oldKeys, newKeys);
 }
 
-type HasFieldsRecordClass = { _defined_fields_?: [string, string, boolean][] };
+type HasFieldsRecordClass = { _defined_fields_?: [string, string, boolean, string?][] };
 function getFields(existed: CustomElementConstructor, newClass: CustomElementConstructor) {
   const translate = (cls: HasFieldsRecordClass) => {
-    const fieldList = (cls._defined_fields_ || []).map(([name, type, isStatic]) => ({ name, type, isStatic }));
+    const fieldList = (cls._defined_fields_ || []).map(([name, type, isStatic, shadow]) => ({
+      name,
+      type,
+      isStatic,
+      shadow,
+    }));
     const fieldGroup = Object.groupBy(fieldList, ({ isStatic }) => (isStatic ? 'staticFields' : 'instanceFields'));
     const groupBy = (list: typeof fieldGroup.staticFields) => Object.groupBy(list || [], ({ type }) => type);
     return {
@@ -146,6 +139,44 @@ const descMap = {
   globalemitter,
 };
 
+const attrTypes = new Set(['attribute', 'boolattribute', 'numattribute']);
+
+/** 新增 attribute 的初始值本应在构造时读取，但新实例仍由老类构造，改为首次读取时从 DOM 获取 */
+function lazyInitAttribute(proto: any, prop: string) {
+  const { get, set } = Object.getOwnPropertyDescriptor(proto, prop)!;
+  const attr = camelToKebabCase(prop);
+  Reflect.defineProperty(proto, prop, {
+    configurable: true,
+    set,
+    get() {
+      if (get!.call(this) === undefined) set!.call(this, this.getAttribute(attr));
+      return get!.call(this);
+    },
+  });
+}
+
+/** 新增的箭头函数字段不会被老类构造，首次访问时为实例（静态字段为类）创建代理 */
+function defineLazyFn(target: any, name: string, shadow: string) {
+  Reflect.defineProperty(target, name, {
+    configurable: true,
+    get() {
+      const fn = (...args: any[]) => this[shadow](...args);
+      setProperty(this, name, fn);
+      return fn;
+    },
+  });
+}
+
+/** 函数成员的代理只调用影子方法，可以直接复制到老类上 */
+function updateFnMembers(oldTarget: any, newTarget: any, diffs: ReturnType<typeof getFields>['staticFields']) {
+  const { method, fn } = diffs;
+  method?.add.concat(method.some).forEach(({ name }) => {
+    Reflect.defineProperty(oldTarget, name, Object.getOwnPropertyDescriptor(newTarget, name)!);
+  });
+  fn?.add.forEach(({ name, shadow }) => defineLazyFn(oldTarget, name, shadow!));
+  [method?.remove, fn?.remove].forEach((list) => list?.forEach(({ name }) => deleteProperty(oldTarget, name)));
+}
+
 function setArrValue<T>(obj: any, field: string, val: T[] = []) {
   if (!Object.getOwnPropertyDescriptor(obj, field)) {
     setProperty(obj, field, val);
@@ -159,18 +190,43 @@ function setArrValue<T>(obj: any, field: string, val: T[] = []) {
 declare global {
   interface Window {
     _hmrClassRegistry: Map<string, any>;
-    _hmrRegisterClass: (name: string) => (cls: HasFieldsRecordClass, ctx: ClassDecoratorContext) => void;
+    _hmrRegisterClass: (name: string) => (cls: HasFieldsRecordClass, ctx: ClassDecoratorContext) => any;
+    _hmrKeep: <T>(key: string, fn: () => T) => T;
   }
 }
 
 if (typeof window !== 'undefined' && nativeDefineElement && !window._hmrClassRegistry) {
   window._hmrClassRegistry = new Map();
+
+  // 模块重新执行时复用模块顶层的 store
+  const keptValues = new Map<string, any>();
+  window._hmrKeep = (key, fn) => {
+    if (!keptValues.has(key)) keptValues.set(key, fn());
+    return keptValues.get(key);
+  };
+
+  // 模块重新执行后模板字符串是新对象，内容相同时使用老对象，以便复用已渲染的 DOM
+  const canonicalStrings = new Map<string, TemplateStringsArray>();
+  const stringsMap = new WeakMap<TemplateStringsArray, TemplateStringsArray>();
+  const { _$getTemplate } = ChildPart.prototype;
+  ChildPart.prototype._$getTemplate = function (result: TemplateResult) {
+    let strings = stringsMap.get(result.strings);
+    if (!strings) {
+      const key = `${result.type}:${result.strings.join('\0')}`;
+      strings = canonicalStrings.get(key) || result.strings;
+      canonicalStrings.set(key, strings);
+      stringsMap.set(result.strings, strings);
+    }
+    result.strings = strings;
+    return _$getTemplate.call(this, result);
+  };
+
   window._hmrRegisterClass =
     (name: string) =>
     (cls: HasFieldsRecordClass, { addInitializer }: ClassDecoratorContext) => {
-      addInitializer(() => {
-        const existed = window._hmrClassRegistry.get(name);
+      const existed = window._hmrClassRegistry.get(name);
 
+      addInitializer(() => {
         if (!existed) {
           window._hmrClassRegistry.set(name, cls);
           return;
@@ -182,7 +238,7 @@ if (typeof window !== 'undefined' && nativeDefineElement && !window._hmrClassReg
         while (current) {
           const [oldClass, newClass] = current;
           if (oldClass === newClass || current.some((e) => e === GemElement || e === Function.prototype)) break;
-          if (current.some((e) => !e) || checkClassNeedReload(oldClass, newClass)) {
+          if (current.some((e) => !e)) {
             location.reload();
             return;
           }
@@ -246,10 +302,17 @@ if (typeof window !== 'undefined' && nativeDefineElement && !window._hmrClassReg
                 }
               });
               remove.forEach((prop) => {
-                setProperty(element, prop.name, undefined);
+                if (type in descMap) {
+                  setProperty(element, prop.name, undefined);
+                }
               });
             });
           });
+          instanceFieldsEntries.forEach(([type, { add }]) => {
+            if (attrTypes.has(type)) add.forEach((prop) => lazyInitAttribute(oldClass.prototype, prop.name));
+          });
+          updateFnMembers(oldClass, newClass, fields.staticFields);
+          updateFnMembers(oldClass.prototype, newClass.prototype, fields.instanceFields);
           // 删除的属性在 proto 上添加占位符
           instanceFieldsEntries.forEach(([type, { remove }]) => {
             remove.forEach((prop) => {
@@ -269,23 +332,25 @@ if (typeof window !== 'undefined' && nativeDefineElement && !window._hmrClassReg
           setArrValue(oldMetadata, 'adoptedStyleSheets', newMetadata.adoptedStyleSheets);
           setArrValue(oldClass, '_defined_fields_', newClass._defined_fields_);
 
+          // 全部替换，让所有方法都引用新模块的变量
           [
             [oldClass, newClass],
             [oldClass.prototype, newClass.prototype],
           ].forEach(([existedObj, newObj]) => {
-            Object.assign(
-              existedObj,
-              Object.fromEntries(
-                getHmrMethodKeys(newObj)
-                  .filter((key) => existedObj[key].toString() !== newObj[key].toString())
-                  .map((key) => [key, newObj[key]]),
-              ),
-            );
+            getHmrMethodKeys(newObj).forEach((key) => (existedObj[key] = newObj[key]));
           });
 
           current = [getPrototypeOf(oldClass), getPrototypeOf(newClass)];
         }
       });
+
+      if (!existed) return;
+
+      // 新类未注册，构造时使用老类，例如 `new MyElement()`
+      const proxy: any = new Proxy(cls, {
+        construct: (_, args, newTarget) => Reflect.construct(existed, args, newTarget === proxy ? existed : newTarget),
+      });
+      return proxy;
     };
 
   window.customElements.define = (name: string, cls: CustomElementConstructor) => {
@@ -301,8 +366,11 @@ if (typeof window !== 'undefined' && nativeDefineElement && !window._hmrClassReg
       logger.info(`<${name}> update,`, { cls });
 
       updateElement(name, (element) => {
-        // 触发样式更新，支持 Light DOM
-        element.after(element);
+        // 触发样式更新，支持 Light DOM；不移动元素，避免失去焦点和滚动位置
+        if (element.isConnected) {
+          (element as GemElement).disconnectedCallback();
+          (element as GemElement).connectedCallback();
+        }
         // 重新渲染
         (element as any)[UpdateToken]?.();
       });

package/src/helper/i18n.ts

@@ -2,6 +2,7 @@ import type { RouteTrigger } from '../elements/base/route';
 import type { UpdateHistoryParams } from '../lib/history';
 import type { TemplateResult } from '../lib/lit-html';
 import { html, UpdateToken } from '../lib/reactive';
+import { isolate } from '../lib/server';
 import { GemError } from '../lib/utils';
 import { logger } from './logger';
 
@@ -65,13 +66,23 @@ interface I18nOptions<T> {
 export class I18n<T = Record<string, Msg>> implements RouteTrigger {
   resources: Resources<T>;
   fallbackLanguage: string;
-  currentLanguage: string;
   cache?: boolean | 'manual';
   cachePrefix = 'gem-i18n';
   urlParamsType?: 'path' | 'querystring' | 'ccTLD' | 'gTLD';
   urlParamsName?: string;
   onChange?: (currentLanguage: string) => void;
 
+  // SSR 时每个请求使用独立的语言
+  #state = isolate({ currentLanguage: '' });
+
+  get currentLanguage() {
+    return this.#state.currentLanguage;
+  }
+
+  set currentLanguage(lang: string) {
+    this.#state.currentLanguage = lang;
+  }
+
   // 兼容 `<gem-route>`
   replace = ({ path }: UpdateHistoryParams) => this.setLanguage(path!);
   getParams = () => ({ path: this.currentLanguage });

package/src/helper/theme.ts

@@ -1,5 +1,6 @@
 import type { GemElement, Sheet } from '../lib/reactive';
 import { css, SheetToken } from '../lib/reactive';
+import { isServer } from '../lib/server';
 import type { Store } from '../lib/store';
 import { connect, createStore } from '../lib/store';
 import type { Updater } from '../lib/utils';
@@ -117,6 +118,9 @@ export function createDecoratorTheme<T extends Record<string, unknown>>(themeObj
         this.internals.sheets.push(style);
         this.memo(
           () => {
+            // https://bugs.webkit.org/show_bug.cgi?id=326327
+            // SSR 需要更新样式表文本
+            if (isServer || CSS.supports(`font:-apple-system-body`)) return theme(access.get(this).apply(this));
             const next = access.get(this).apply(this);
             const rule = style.cssRules[0] as CSSStyleRule;
             const eleTarget = this.shadowRoot

package/src/lib/decorators.ts

@@ -2,7 +2,7 @@
 
 import type { TemplateResult } from './lit-html';
 import type { Metadata, Sheet } from './reactive';
-import { _createTemplate, _RenderErrorEvent, GemElement, render, UpdateToken } from './reactive';
+import { _createTemplate, _RenderErrorEvent, _renderRoot, GemElement, UpdateToken } from './reactive';
 import type { Store } from './store';
 import { camelToKebabCase, GemError, PropProxyMap } from './utils';
 
@@ -300,8 +300,9 @@ export function template<T extends GemElement, V extends () => TemplateResult |
 export function fallback<T extends GemElement, V extends (err: any) => TemplateResult | null | undefined>() {
   return (_: any, { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>) => {
     addInitializer(function (this: T) {
-      this.addEventListener(_RenderErrorEvent, ({ detail }: CustomEvent) => {
-        render(access.get.call(this, this).apply(this, [detail]), this.internals.shadowRoot || this);
+      this.addEventListener(_RenderErrorEvent, (evt: CustomEvent) => {
+        evt.preventDefault();
+        _renderRoot(access.get.call(this, this).apply(this, [evt.detail]), this.internals.shadowRoot || this);
       });
     });
   };
@@ -408,16 +409,15 @@ export function part(_: undefined, context: ClassFieldDecoratorContext<any, stri
 }
 
 type EmitterHandler<T> = (evt: CustomEvent<T>) => void;
+type EmitterListener<T> = EmitterHandler<T> | (AddEventListenerOptions & { handleEvent: EmitterHandler<T> });
 
-export type Emitter<T = any> = ((
+/**
+ * 签名的类型参数 `_Listener` 用来为 ts plugin 提供事件处理函数的类型签名
+ */
+export type Emitter<T = any> = <_Listener = EmitterListener<T>>(
   detail?: T,
   options?: Omit<CustomEventInit<unknown>, 'detail'>,
-) => Promise<void> | void) & {
-  /**
-   * @internal 用来为 ts plugin 提供类型签名，没有值
-   */
-  handler?: EmitterHandler<T> | (AddEventListenerOptions & { handleEvent: EmitterHandler<T> });
-};
+) => Promise<void> | void;
 
 /**
  * 定义一个事件发射器，类似 `HTMLElement.click`，

package/src/lib/history.ts

@@ -1,5 +1,6 @@
 // https://github.com/WICG/navigation-api#stakeholder-feedback
 
+import { getRequestValue } from './server';
 import { connect, createStore } from './store';
 import { absoluteLocation, cleanObject, GemError, QueryString } from './utils';
 
@@ -45,7 +46,11 @@ type HistoryParams = Omit<UpdateHistoryParams, 'query'> & {
   hash: string;
 };
 
-const paramsMap = new Map<string, HistoryParams>();
+const globalParamsMap = new Map<string, HistoryParams>();
+// SSR 时每个请求使用独立的记录，请求结束后释放
+// 从全局复制初始记录（设置 basePath 等操作需要它），记录会被原地修改，所以也要复制
+const copyParamsMap = () => new Map([...globalParamsMap].map(([k, v]) => [k, { ...v }]));
+const getParamsMap = () => getRequestValue(globalParamsMap, copyParamsMap);
 
 function validData(data: any) {
   const { $key, $hasCloseHandle, $hasOpenHandle, $hasShouldCloseHandle } = data || {};
@@ -71,8 +76,7 @@ function dispatchBeforeChangeEvent() {
 
 function normalizeParams(params: UpdateHistoryParams): HistoryParams {
   const current =
-    paramsMap.get(store.$key) ||
-    ({ path: getInternalPath(location.pathname), query: new QueryString() } as HistoryParams);
+    gemHistory.getParams() || ({ path: getInternalPath(location.pathname), query: new QueryString() } as HistoryParams);
   // 没提供 path 使用当前 path
   const path = params.path ? absoluteLocation(current.path, params.path) : getInternalPath(location.pathname);
   // 没提供 query 又没有提供 path 时使用当前 search
@@ -100,7 +104,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
     $title: title,
     ...data,
   };
-  paramsMap.set(state.$key, params);
+  getParamsMap().set(state.$key, params);
   dispatchBeforeChangeEvent();
   cleanObject(store);
   store(state);
@@ -120,7 +124,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   };
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
-  paramsMap.set(state.$key, params);
+  getParamsMap().set(state.$key, params);
   dispatchBeforeChangeEvent();
   cleanObject(store);
   store(state);
@@ -149,13 +153,13 @@ class GemHistory extends EventTarget {
     // 应用初始化的时候设置
     gemBasePathStore({ basePath });
     // paramsMap 更新后 ui 才会更新
-    Object.assign(paramsMap.get(store.$key)!, { path: getInternalPath(location.pathname) });
+    Object.assign(this.getParams(), { path: getInternalPath(location.pathname) });
   }
   getParams() {
-    return paramsMap.get(store.$key)!;
+    return getParamsMap().get(store.$key)!;
   }
   updateParams(params: UpdateHistoryParams) {
-    Object.assign(paramsMap.get(store.$key)!, params);
+    Object.assign(this.getParams(), params);
     store();
   }
   push(params: UpdateHistoryParams) {
@@ -166,7 +170,7 @@ class GemHistory extends EventTarget {
   }
   pushIgnoreCloseHandle(params: UpdateHistoryParams) {
     if (store.$hasCloseHandle) {
-      paramsMap.get(store.$key)?.close?.();
+      this.getParams()?.close?.();
       this.replace(params);
     } else {
       this.push(params);
@@ -218,7 +222,7 @@ if (!globalThis._GEMHISTORY) {
   } else if (nativeHistory.state.$hasCloseHandle) {
     store(nativeHistory.state);
     const params = normalizeParams({ title: document.title });
-    paramsMap.set(store.$key, params);
+    getParamsMap().set(store.$key, params);
     // 有 handle 返回键的页面刷新需要清除返回 handler
     gemHistory.back();
   } else {
@@ -228,11 +232,11 @@ if (!globalThis._GEMHISTORY) {
       $key: getKey(),
       ...(nativeHistory.state || {}),
     });
-    paramsMap.set(store.$key, params);
+    getParamsMap().set(store.$key, params);
   }
 
   connect(gemTitleStore, () => {
-    const params = paramsMap.get(store.$key);
+    const params = gemHistory.getParams();
     if (params) {
       params.title = gemTitleStore.title;
     }
@@ -266,9 +270,9 @@ if (!globalThis._GEMHISTORY) {
     // 刷新后再导航需要从当前 state 中构建 params
     // 理论上该条历史记录中不会出现事件处理器
     // 子 app 导航也需要从 state 中构建 params
-    if (!paramsMap.has(newState.$key)) {
+    if (!getParamsMap().has(newState.$key)) {
       const { pathname, search, hash } = location;
-      paramsMap.set(newState.$key, {
+      getParamsMap().set(newState.$key, {
         path: getInternalPath(pathname),
         query: new QueryString(search),
         hash: decodeURIComponent(hash),
@@ -284,9 +288,9 @@ if (!globalThis._GEMHISTORY) {
       // 返回键关闭的 modal 能前进键重新打开
       // 刷新后不能工作：刷新后 historyItem 中只有 url
       // 能在子 app 中工作
-      paramsMap.get(newState.$key)?.open?.();
+      getParamsMap().get(newState.$key)?.open?.();
     } else if (prevState.$hasCloseHandle) {
-      const prevParams = paramsMap.get(prevState.$key);
+      const prevParams = getParamsMap().get(prevState.$key);
       const closeHandle = prevParams?.close;
       const shouldCloseHandle = prevParams?.shouldClose;
       const notAllowClose = shouldCloseHandle && !shouldCloseHandle();

package/src/lib/lit-html.ts

@@ -245,8 +245,10 @@ function trustFromTemplateString(tsa: TemplateStringsArray, stringFromTSA: strin
  * @return Array containing `[html, attrNames]` (array returned for terseness,
  *     to avoid object fields since this code is shared with non-minified SSR
  *     code)
+ *
+ * Gem Note: export for SSR
  */
-const getTemplateHtml = (strings: TemplateStringsArray, type: ResultType): [TrustedHTML, Array<string>] => {
+export const getTemplateHtml = (strings: TemplateStringsArray, type: ResultType): [TrustedHTML, Array<string>] => {
   // Insert makers into the template HTML to represent the position of
   // bindings. The following code scans the template strings to determine the
   // syntactic position of the bindings. They can be in text position, where