@mantou/gem 2.2.15 → 2.3.0

package/lib/server.d.ts

@@ -1,5 +1,17 @@
+import type { GemElement } from './reactive';
 /** 服务端渲染时不执行副作用，同步更新 */
 export declare const isServer: boolean;
+/** SSR 接入 Gem 的钩子，`@mantou/gem-ssr` 在服务端和客户端分别设置 */
+export declare const ssrHooks: {
+    /** 渲染元素内容，返回 `true` 时跳过渲染：服务端收集模版，客户端水合 */
+    render?: (value: unknown, container: HTMLElement | DocumentFragment) => boolean;
+    /** 元素挂载前调用，返回 `true` 时推迟挂载，之后调用 `connect` 挂载：客户端恢复状态，等待父模版水合 */
+    connect?: (ele: GemElement, connect: () => void) => boolean;
+    /** 创建有 key 的 store，返回初始值：客户端恢复服务端的值 */
+    createStore?: (key: string) => object | undefined;
+    /** 更新有 key 的 store：服务端记录，渲染后输出到页面中 */
+    updateStore?: (key: string, store: object) => void;
+};
 /**
  * SSR 时返回当前请求中 `key` 对应的值，第一次访问时使用 `init` 创建，
  * 不在请求中（包括客户端）时返回 `key` 本身

package/lib/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/lib/server.ts"],"names":[],"mappings":"AASA,wBAAwB;AACxB,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,CAO3D,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,CAcjC,CAAC"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/lib/server.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAM7C,wBAAwB;AACxB,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAE1C,oDAAoD;AACpD,eAAO,MAAM,QAAQ,EAAE;IACrB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,GAAG,gBAAgB,KAAK,OAAO,CAAC;IAChF,gEAAgE;IAChE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,OAAO,CAAC;IAC5D,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEP;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,CAO3D,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,CAcjC,CAAC"}

package/lib/server.js

@@ -6,6 +6,8 @@ const { get, set, has, deleteProperty, defineProperty, getOwnPropertyDescriptor,
 const getRequestScope = globalThis.__GEM_SSR__;
 /** 服务端渲染时不执行副作用，同步更新 */
 export const isServer = !!getRequestScope;
+/** SSR 接入 Gem 的钩子，`@mantou/gem-ssr` 在服务端和客户端分别设置 */
+export const ssrHooks = {};
 /**
  * SSR 时返回当前请求中 `key` 对应的值，第一次访问时使用 `init` 创建，
  * 不在请求中（包括客户端）时返回 `key` 本身

package/lib/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/lib/server.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,EAAE;AACF,0DAA0D;AAC1D,gFAAgF;AAEhF,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,EAAE,cAAc,EAAE,wBAAwB,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;AAErG,MAAM,eAAe,GAA0D,UAAkB,CAAC,WAAW,CAAC;AAE9G,wBAAwB;AACxB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC,eAAe,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmD,eAAe;IAC5F,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACZ,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IACH,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC;AAEjB;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAuC,eAAe;IACxE,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE;QACT,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;QACnC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YACpC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC;YAClD,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YACpC,cAAc,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YAC1D,cAAc,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC;YAClF,wBAAwB,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,wBAAwB,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YAC9E,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;SAClC,CAAC,CAAC;IACL,CAAC;IACH,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC"}
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/lib/server.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,EAAE;AACF,0DAA0D;AAC1D,gFAAgF;AAIhF,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,EAAE,cAAc,EAAE,wBAAwB,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;AAErG,MAAM,eAAe,GAA0D,UAAkB,CAAC,WAAW,CAAC;AAE9G,wBAAwB;AACxB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC,eAAe,CAAC;AAE1C,oDAAoD;AACpD,MAAM,CAAC,MAAM,QAAQ,GASjB,EAAE,CAAC;AAEP;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmD,eAAe;IAC5F,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACZ,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IACH,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC;AAEjB;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAuC,eAAe;IACxE,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE;QACT,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;QACnC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YACpC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC;YAClD,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YACpC,cAAc,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YAC1D,cAAc,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC;YAClF,wBAAwB,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,wBAAwB,CAAC,OAAO,EAAE,EAAE,GAAG,CAAC;YAC9E,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;SAClC,CAAC,CAAC;IACL,CAAC;IACH,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC"}

package/lib/store.d.ts

@@ -1,10 +1,5 @@
 import { type Updater } from './utils';
 export type Store<T = any> = Updater<T>;
-/** SSR 时当前请求中更新过的有 key 的 store，供 `@mantou/gem-ssr` 使用 */
-export declare const _getUpdatedStores: () => Map<any, any>;
-declare let restoreStore: ((key: string) => object | undefined) | undefined;
-/** 设置客户端恢复 store 的方法，供 `@mantou/gem-ssr` 使用 */
-export declare function _setStoreRestorer(restorer: typeof restoreStore): void;
 /**
  * 创建 store，`key` 用来在 SSR 时同步服务端的值，`swc-plugin-gem` 的 `ssr` 选项会为模块顶层的 store 自动添加
  */
@@ -22,5 +17,4 @@ export declare function createStore<T = any>(originStore: T, key?: string): ((va
     [Symbol.metadata]: never;
 }, keyof T> & T;
 export declare function connect(store: Store<any>, func: () => void): () => boolean | undefined;
-export {};
 //# sourceMappingURL=store.d.ts.map

package/lib/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AACA,OAAO,EAA4C,KAAK,OAAO,EAAE,MAAM,SAAS,CAAC;AAEjF,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;AAUxC,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,qBAAwD,CAAC;AAGvF,QAAA,IAAI,YAAY,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;AAEpE,+CAA+C;AAC/C,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,YAAY,QAE9D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,aAIzB,OAAO,CAAC,CAAC,CAAC;;;;;;;;;;;;gBAcjD;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,6BAK1D"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AACA,OAAO,EAA4C,KAAK,OAAO,EAAE,MAAM,SAAS,CAAC;AAEjF,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;AAOxC;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,aAIzB,OAAO,CAAC,CAAC,CAAC;;;;;;;;;;;;gBAYjD;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,6BAK1D"}

package/lib/store.js

@@ -1,18 +1,8 @@
-import { getRequestValue, isolate, isServer } from './server';
+import { getRequestValue, isolate, isServer, ssrHooks } from './server';
 import { addMicrotask, assignState, createUpdater } from './utils';
 /**@internal */
 export const _StoreListenerMap = new WeakMap();
 const createListeners = () => new Set();
-// SSR 时当前请求中更新过的有 key 的 store，渲染后输出到页面中
-const updatedStores = new Map();
-/** SSR 时当前请求中更新过的有 key 的 store，供 `@mantou/gem-ssr` 使用 */
-export const _getUpdatedStores = () => getRequestValue(updatedStores, () => new Map());
-// 客户端读取服务端渲染时 store 的值
-let restoreStore;
-/** 设置客户端恢复 store 的方法，供 `@mantou/gem-ssr` 使用 */
-export function _setStoreRestorer(restorer) {
-    restoreStore = restorer;
-}
 /**
  * 创建 store，`key` 用来在 SSR 时同步服务端的值，`swc-plugin-gem` 的 `ssr` 选项会为模块顶层的 store 自动添加
  */
@@ -26,13 +16,11 @@ export function createStore(originStore, key) {
             return;
         // SSR 时请求中添加的监听器只属于当前请求，其他请求更新 store 时不会触发
         getRequestValue(listeners, createListeners).forEach(addMicrotask);
-        const updated = _getUpdatedStores();
-        // 不在请求中时更新的是全局的值，客户端也一样
-        if (key && updated !== updatedStores)
-            updated.set(key, store);
+        if (key)
+            ssrHooks.updateStore?.(key, store);
     }));
-    if (key && restoreStore)
-        assignState(store, restoreStore(key));
+    if (key)
+        assignState(store, ssrHooks.createStore?.(key));
     _StoreListenerMap.set(store, listeners);
     return store;
 }

package/lib/store.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAgB,MAAM,SAAS,CAAC;AAIjF,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA+B,CAAC;AAE5E,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,EAAc,CAAC;AAEpD,wCAAwC;AACxC,MAAM,aAAa,GAAG,IAAI,GAAG,EAAsB,CAAC;AAEpD,yDAAyD;AACzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;AAEvF,uBAAuB;AACvB,IAAI,YAA+D,CAAC;AAEpE,+CAA+C;AAC/C,MAAM,UAAU,iBAAiB,CAAC,QAA6B;IAC7D,YAAY,GAAG,QAAQ,CAAC;AAC1B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAU,WAAc,EAAE,GAAY;IAC/D,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IACpC,kBAAkB;IAClB,MAAM,KAAK,GAAG,OAAO,CACnB,aAAa,CAAC,WAAW,EAAE,CAAC,KAAkB,EAAE,EAAE;QAChD,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC1B,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAChC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,2CAA2C;QAC3C,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;QACpC,wBAAwB;QACxB,IAAI,GAAG,IAAI,OAAO,KAAK,aAAa;YAAE,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC,CACH,CAAC;IACF,IAAI,GAAG,IAAI,YAAY;QAAE,WAAW,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/D,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,KAAiB,EAAE,IAAgB;IACzD,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,cAAc,IAAI,eAAe,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACrF,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;IACrB,OAAO,GAAG,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;AACvC,CAAC"}
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAgB,MAAM,SAAS,CAAC;AAIjF,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA+B,CAAC;AAE5E,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,EAAc,CAAC;AAEpD;;GAEG;AACH,MAAM,UAAU,WAAW,CAAU,WAAc,EAAE,GAAY;IAC/D,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IACpC,kBAAkB;IAClB,MAAM,KAAK,GAAG,OAAO,CACnB,aAAa,CAAC,WAAW,EAAE,CAAC,KAAkB,EAAE,EAAE;QAChD,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC1B,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAChC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,2CAA2C;QAC3C,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAClE,IAAI,GAAG;YAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC,CACH,CAAC;IACF,IAAI,GAAG;QAAE,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACzD,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,KAAiB,EAAE,IAAgB;IACzD,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,cAAc,IAAI,eAAe,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACrF,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;IACrB,OAAO,GAAG,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;AACvC,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "2.2.15";
+export declare const version = "2.3.0";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/lib/version.js

@@ -1,2 +1,2 @@
-export const version = '2.2.15';
+export const version = '2.3.0';
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantou/gem",
-  "version": "2.2.15",
+  "version": "2.3.0",
   "description": "💎 使用自定义元素的轻量级 WebApp 开发框架",
   "keywords": [
     "frontend",
@@ -31,9 +31,8 @@
   ],
   "typings": "index.d.ts",
   "scripts": {
-    "docs": "cross-env GEM_BOOK_REPLACE=true gem-book docs",
-    "docs:remote": "pnpm run docs",
-    "build:docs": "pnpm run docs --build",
+    "docs": "gem-book docs",
+    "build:docs": "gem-book build docs",
     "build:module": "tsc -p tsconfig.build.json",
     "build:lib": "rslib build",
     "build": "pnpm build:module && pnpm build:lib",

package/src/elements/base/route.ts

@@ -9,32 +9,59 @@ import { connect, createStore } from '../../lib/store';
 import type { QueryString } from '../../lib/utils';
 import { addListener } from '../../lib/utils';
 
-const UNNAMED_PARAM_PREFIX = '_';
-
-// '/test/:a' /^\/test\/(?<a>[^/]+)$/i
-// '/test/:a/b' /^\/test\/?<a>([^/]+)\/b$/i
-// '/test/*' /^\/test\/(?<_0>.*)$/i
-// '/test/:a/*' /^\/test\/(?<a>[^/]+)\/(?<_0>.*)$/i
-// '/test/*/:b /^\/test\/(?<_0>.*)\/(?<a>[^/]+)$/i
-class ParamsRegExp extends RegExp {
-  constructor(pattern: string) {
-    let i = 0;
-    super(
-      `^${pattern.replace(/((:[^/$]+)|(\*))/g, (_m, name: string) => {
-        if (name === '*') return `(?<${UNNAMED_PARAM_PREFIX}${i++}>.*)`;
-        return `(?<${name.slice(1)}>[^/]+)`;
-      })}$`,
-    );
-  }
-}
-
 type Params = Record<string, string>;
+type Matcher = (path: string) => Params | null | undefined;
+
 declare global {
   // https://bugzilla.mozilla.org/show_bug.cgi?id=1731418
   // https://github.com/WebKit/standards-positions/issues/61
   var URLPattern: any;
 }
 
+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 : null);
+}
+
+// pattern 来自路由定义，数量有限
+const matchers = new Map<string, Matcher>();
+
 /**
  * - 大小写敏感
  * - 匹配成功时返回 params
@@ -49,22 +76,9 @@ declare global {
  * ```
  */
 export function matchPath(pattern: string, path: string) {
-  if (globalThis.URLPattern) {
-    const urLPattern = new URLPattern({ pathname: pattern });
-    const matchResult = urLPattern.exec({ pathname: path }) || urLPattern.exec({ pathname: `${path}/` });
-    if (!matchResult) return null;
-    return matchResult.pathname.groups as Params;
-  }
-  const reg = new ParamsRegExp(pattern);
-  const matchResult = path.match(reg) || `${path}/`.match(reg);
-  if (!matchResult) return null;
-  const params: Params = {};
-  if (matchResult.groups) {
-    Object.entries(matchResult.groups).forEach(([key, value]) => {
-      params[key.startsWith(UNNAMED_PARAM_PREFIX) ? key.slice(1) : key] = value;
-    });
-  }
-  return params;
+  let match = matchers.get(pattern);
+  if (!match) matchers.set(pattern, (match = createMatcher(pattern)));
+  return match(path) || match(`${path}/`) || null;
 }
 
 export interface RouteItem<T = unknown> {
@@ -79,7 +93,7 @@ export interface RouteItem<T = unknown> {
   getContent?: (
     params: Params,
     renderRoot: DocumentFragment | GemLightRouteElement,
-  ) => TemplateResult | Promise<TemplateResult> | undefined | Promise<undefined>;
+  ) => TemplateResult | undefined | Promise<TemplateResult | undefined>;
   title?: string;
   // 用来传递数据
   data?: T;
@@ -130,6 +144,9 @@ export type RouteTrigger = {
 
 const scrollPositionMap = new Map<string, number>();
 
+// 导航到了新的历史记录，前进、后退和页面加载时为 `false`
+let pushed = false;
+
 @light({ penetrable: true })
 export class GemLightRouteElement extends GemElement {
   @boolattribute transition: boolean;
@@ -148,8 +165,13 @@ export class GemLightRouteElement extends GemElement {
   @emitter routechange: Emitter<RouteItem | null>; // path 改变或者 key 改变，包含初始渲染
   @emitter error: Emitter<any>;
 
-  /**自动让滚动容器恢复滚动位置 */
-  @property scrollContainer?: HTMLElement | (() => HTMLElement);
+  /**
+   * 自动让滚动容器恢复滚动位置，导航到新的历史记录时滚动到顶部，
+   * 函数返回空值时不处理当前路由，例如只有子路由渲染后才需要滚动
+   */
+  @property scrollContainer?: Element | (() => Element | null | undefined);
+  /**恢复滚动位置前等待，例如等待异步加载的内容撑开滚动容器 */
+  @property scrollWait?: () => Promise<unknown>;
   /**默认当有 `hash` 时不进行滚动 */
   @property scrollIgnoreHash?: boolean;
 
@@ -205,14 +227,24 @@ export class GemLightRouteElement extends GemElement {
     });
   };
 
-  #updateScrollContainerPosition = () => {
-    if (!this.#scrollContainer) return;
-    const scrollTop = scrollPositionMap.get(history.currentKey);
-    if (scrollTop) {
-      this.#scrollContainer.scroll(0, scrollTop);
-    } else if (this.scrollIgnoreHash || !history.getParams().hash) {
-      this.#scrollContainer.scroll(0, 0);
+  // 已经处理过滚动的历史记录，同一条历史记录重新渲染时保持滚动位置
+  #scrolledKey?: string;
+
+  #updateScrollContainerPosition = async () => {
+    const container = this.#scrollContainer;
+    const key = history.currentKey;
+    if (!container || key === this.#scrolledKey) return;
+    this.#scrolledKey = key;
+    const scrollTop = scrollPositionMap.get(key);
+    if (!pushed && scrollTop !== undefined) {
+      await this.scrollWait?.();
+      // 等待时可能已经导航
+      if (key === history.currentKey) container.scroll(0, scrollTop);
+      return;
     }
+    // 前进、后退或者页面加载时位置未知（例如刷新后），保持浏览器恢复的位置，浏览器只恢复文档的滚动位置
+    if (!pushed && container === document.scrollingElement) return;
+    if (this.scrollIgnoreHash || !history.getParams().hash) container.scroll(0, 0);
   };
 
   #lastLoader?: TemplateResult | Promise<TemplateResult | undefined>;
@@ -239,10 +271,13 @@ export class GemLightRouteElement extends GemElement {
 
   @effect((i) => [i.scrollContainer])
   #rememberScrollPosition = () => {
-    if (!this.#scrollContainer) return;
-    return addListener(history, 'beforechange', () =>
-      scrollPositionMap.set(history.currentKey, this.#scrollContainer!.scrollTop),
-    );
+    if (!this.scrollContainer) return;
+    return addListener(history, 'beforechange', () => {
+      // 前进和后退时浏览器的历史记录已经改变，Gem 的还没有改变
+      pushed = globalThis.history.state?.$key === history.currentKey;
+      const container = this.#scrollContainer;
+      if (container) scrollPositionMap.set(history.currentKey, container.scrollTop);
+    });
   };
 
   // history or i18n

package/src/helper/theme.ts

@@ -26,8 +26,11 @@ export function getThemeProps<T>(theme: Theme<T>) {
   return themePropsMap.get(theme) as Theme<T>;
 }
 
-function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
-  const salt = randomStr();
+function createThemeFromProps<T extends Record<string, unknown>>(
+  themeObj: T,
+  props: Record<string, string> = {},
+  salt = randomStr(),
+) {
   const styleSheet = css({})[SheetToken];
   const store = createStore<T>(themeObj);
   // 同步分配变量名，新增的键在更新后立即可读；样式内容随 store 异步更新
@@ -75,14 +78,17 @@ function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, pr
 
 /**
  * 用于 `@adoptedStyle(theme)`，类似 `css`
+ *
+ * `key` 用作 css 变量名的后缀，SSR 时让服务端和客户端的变量名一致，
+ * `swc-plugin-gem` 的 `ssr` 选项会为模块顶层的主题自动添加
  */
-export function createScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
-  return createThemeFromProps(themeObj);
+export function createScopedTheme<T extends Record<string, unknown>>(themeObj: T, key?: string) {
+  return createThemeFromProps(themeObj, {}, key);
 }
 
-/** 全局主题 */
-export function createTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const result = createScopedTheme(themeObj);
+/** 全局主题，`key` 同 `createScopedTheme` */
+export function createTheme<T extends Record<string, unknown>>(themeObj: T, key?: string) {
+  const result = createScopedTheme(themeObj, key);
   document.adoptedStyleSheets.push(result[SheetToken].getStyle());
   return result;
 }
@@ -94,6 +100,7 @@ export function createOverrideTheme<T extends Record<string, unknown>>(theme: Th
 
 /**
  * 返回一个主题对象，但同时又是一个装饰器函数，用来装饰一个主题更新函数
+ * 所有实例共享变量名，`key` 同 `createScopedTheme`
  *
  * @example
  * ```ts
@@ -104,8 +111,8 @@ export function createOverrideTheme<T extends Record<string, unknown>>(theme: Th
  * }
  * ```
  * */
-export function createDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const themeAsKeys = createThemeFromProps(themeObj);
+export function createDecoratorTheme<T extends Record<string, unknown>>(themeObj: T, key?: string) {
+  const themeAsKeys = createThemeFromProps(themeObj, {}, key);
   const props = getThemeProps(themeAsKeys);
   const update = <E extends GemElement, V extends () => T, K = any[] | undefined>(
     getDep?: K extends readonly any[] ? (instance: E) => K : undefined,

package/src/lib/decorators.ts

@@ -7,7 +7,7 @@ import type { Store } from './store';
 import { camelToKebabCase, GemError, PropProxyMap } from './utils';
 
 type GemElementPrototype = GemElement & { '': never };
-type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'noBlocking' | 'penetrable'>;
+type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'noBlocking' | 'penetrable' | 'attrProps'>;
 
 const { deleteProperty, getOwnPropertyDescriptor, defineProperty } = Reflect;
 const { getPrototypeOf, assign, hasOwn } = Object;
@@ -32,12 +32,31 @@ function clearField<T extends GemElement>(instance: T, prop: string) {
   (instance as any)[prop] = value;
 }
 
-const observedTargetAttributes = new WeakMap<GemElementPrototype, Map<string, string>>();
+/**
+ * 定义响应式的成员：在原型上定义访问器（基类定义过就跳过），移除实例上的同名字段，
+ * `field` 记录到元数据中，供外部读取
+ */
+function defineMember(
+  context: ClassFieldDecoratorContext,
+  field: StaticField,
+  name: string,
+  define: (target: GemElementPrototype, prop: string) => void,
+) {
+  const prop = context.name as string;
+  pushStaticField(context, field, name);
+  context.addInitializer(function (this: GemElement) {
+    const target = getDecoratorTarget(this, context);
+    if (!hasOwn(target, prop)) define(target, prop);
+    clearField(this, prop);
+  });
+}
+
 // hack 修改 attribute 行为，如果是观察的，就使用 `setter`
 // 不在 Devtools 中工作 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#dom_access
 // 使用 Gem DevTools 注入脚本监听 attribute 变化
 const { setAttribute, toggleAttribute, removeAttribute } = Element.prototype;
-const getObservedPropName = (i: GemElement, n: string) => observedTargetAttributes.get(getPrototypeOf(i))?.get(n);
+const getObservedPropName = (i: GemElement, n: string) =>
+  ((i.constructor as any)[Symbol.metadata] as Metadata | undefined)?.attrProps?.[n];
 GemElement.prototype.setAttribute = function (n: string, v: string) {
   const prop = getObservedPropName(this, n);
   if (!prop) return setAttribute.call(this, n, v);
@@ -130,19 +149,12 @@ type AttrType = BooleanConstructor | NumberConstructor | StringConstructor;
 function decoratorAttr<T extends GemElement>(context: ClassFieldDecoratorContext<T>, attrType: AttrType) {
   const prop = context.name as string;
   const attr = camelToKebabCase(prop);
-  context.addInitializer(function (this: T) {
-    const target = getDecoratorTarget(this, context);
-    if (!hasOwn(target, prop)) {
-      pushStaticField(context, 'observedAttributes', attr); // 没有 observe 的效果
-      defineProp(target, prop, { attr, attrType });
-    }
-    clearField(this, prop);
-    // 记录观察的 attribute, 用于 hack 的 setAttribute
-    const proto = getPrototypeOf(this);
-    const attrMap = observedTargetAttributes.get(proto) || new Map<string, string>();
-    attrMap.set(attr, prop);
-    observedTargetAttributes.set(proto, attrMap);
-  });
+  const metadata = context.metadata as Metadata;
+  // 记录观察的 attribute，用于 hack 的 setAttribute，原型链继承基类的记录
+  if (!hasOwn(metadata, 'attrProps')) metadata.attrProps = Object.create(metadata.attrProps || null);
+  metadata.attrProps![attr] = prop;
+  // `observedAttributes` 没有 observe 的效果
+  defineMember(context, 'observedAttributes', attr, (target) => defineProp(target, prop, { attr, attrType }));
   // 延时定义的元素需要继承原实例属性值
   return function (this: any, initValue: any) {
     return this.getAttribute(attr) ?? initValue;
@@ -181,14 +193,7 @@ export function numattribute<T extends GemElement>(_: undefined, context: ClassF
  */
 export function property<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T>) {
   const prop = context.name as string;
-  context.addInitializer(function (this: T) {
-    const target = getDecoratorTarget(this, context);
-    if (!hasOwn(target, prop)) {
-      pushStaticField(context, 'observedProperties', prop);
-      defineProp(target, prop);
-    }
-    clearField(this, prop);
-  });
+  defineMember(context, 'observedProperties', prop, defineProp);
   // 延时定义的元素需要继承原实例属性值
   return function (this: any, initValue: any) {
     return this[prop] ?? initValue;
@@ -342,16 +347,8 @@ function defineCSSState(target: GemElementPrototype, prop: string, stateStr: str
  * ```
  */
 export function state<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
-  const prop = context.name as string;
-  const attr = camelToKebabCase(prop);
-  context.addInitializer(function (this: T) {
-    const target = getDecoratorTarget(this, context);
-    if (!hasOwn(target, prop)) {
-      pushStaticField(context, 'definedCSSStates', attr);
-      defineCSSState(target, prop, attr);
-    }
-    clearField(this, prop);
-  });
+  const stateStr = camelToKebabCase(context.name as string);
+  defineMember(context, 'definedCSSStates', stateStr, (target, prop) => defineCSSState(target, prop, stateStr));
 }
 
 function defineStaticField(
@@ -436,20 +433,9 @@ export function emitter<T extends GemElement>(_: undefined, context: ClassFieldD
 export function globalemitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
   defineEmitter(context, { bubbles: true, composed: true });
 }
-function defineEmitter<T extends GemElement>(
-  context: ClassFieldDecoratorContext,
-  eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>,
-) {
-  const prop = context.name as string;
-  const event = camelToKebabCase(prop);
-  context.addInitializer(function (this: T) {
-    const target = getDecoratorTarget(this, context);
-    if (!hasOwn(target, prop)) {
-      pushStaticField(context, 'definedEvents', event);
-      defineProp(target, prop, { event, eventOptions });
-    }
-    clearField(this, prop);
-  });
+function defineEmitter(context: ClassFieldDecoratorContext, eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>) {
+  const event = camelToKebabCase(context.name as string);
+  defineMember(context, 'definedEvents', event, (target, prop) => defineProp(target, prop, { event, eventOptions }));
 }
 
 /**

package/src/lib/history.ts

@@ -52,13 +52,14 @@ const globalParamsMap = new Map<string, HistoryParams>();
 const copyParamsMap = () => new Map([...globalParamsMap].map(([k, v]) => [k, { ...v }]));
 const getParamsMap = () => getRequestValue(globalParamsMap, copyParamsMap);
 
+// 内部状态字段，不能由外部设置
+const internalStateKeys = ['$key', '$hasCloseHandle', '$hasOpenHandle', '$hasShouldCloseHandle'] as const;
+
 function validData(data: any) {
-  const { $key, $hasCloseHandle, $hasOpenHandle, $hasShouldCloseHandle } = data || {};
-  if (store.$key === $key) return;
-  if ($key) throw new GemError('`$key` is not allowed');
-  if ($hasCloseHandle) throw new GemError('`$hasCloseHandle` is not allowed');
-  if ($hasOpenHandle) throw new GemError('`$hasOpenHandle` is not allowed');
-  if ($hasShouldCloseHandle) throw new GemError('`$hasShouldCloseHandle` is not allowed');
+  if (store.$key === data?.$key) return;
+  for (const key of internalStateKeys) {
+    if (data?.[key]) throw new GemError(`\`${key}\` is not allowed`);
+  }
 }
 
 function getUrlBarPath(internalPath: string) {
@@ -70,13 +71,17 @@ function getInternalPath(urlBarPath: string) {
   return urlBarPath.replace(new RegExp(`^${gemHistory.basePath}/`), '/');
 }
 
-function dispatchBeforeChangeEvent() {
+// 切换到新的历史记录状态
+function changeState(state: HistoryState) {
   gemHistory.dispatchEvent(new CustomEvent('beforechange'));
+  cleanObject(store);
+  store(state);
 }
 
 function normalizeParams(params: UpdateHistoryParams): HistoryParams {
   const current =
-    gemHistory.getParams() || ({ path: getInternalPath(location.pathname), query: new QueryString() } as HistoryParams);
+    gemHistory.getParams() ||
+    ({ path: getInternalPath(location.pathname), query: new QueryString(), title: document.title } as HistoryParams);
   // 没提供 path 使用当前 path
   const path = params.path ? absoluteLocation(current.path, params.path) : getInternalPath(location.pathname);
   // 没提供 query 又没有提供 path 时使用当前 search
@@ -84,8 +89,9 @@ function normalizeParams(params: UpdateHistoryParams): HistoryParams {
   const queryChanged = String(newQueryObject) !== String(current.query);
   const query = queryChanged ? newQueryObject : current.query;
   const urlChanged = path !== current.path || queryChanged;
-  // 没提供 title 又没有改变 URL 时使用当前 document.title
-  const title = params.title || (urlChanged ? '' : document.title);
+  // 没提供 title 又没有改变 URL 时使用当前 title
+  // 不使用 document.title，它可能已被格式化（例如添加了网站名后缀）
+  const title = params.title || (urlChanged ? '' : current.title);
   const statusChanged = params.close || params.data || params.open || params.shouldClose;
   // 没提供 hash 又没有改变 URL 仅仅是状态更新时使用当前 hash
   const hash = decodeURIComponent(params.hash ?? (!urlChanged && statusChanged ? location.hash : ''));
@@ -105,9 +111,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
     ...data,
   };
   getParamsMap().set(state.$key, params);
-  dispatchBeforeChangeEvent();
-  cleanObject(store);
-  store(state);
+  changeState(state);
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state, title, url);
@@ -116,23 +120,8 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
 
 // 跨框架时，调用者对 basePath 无感知
 function updateHistoryByNative(data: any, title: string, originUrl: string, native: typeof nativeHistory.pushState) {
-  validData(data);
-  const state = {
-    $key: getKey(),
-    $title: title,
-    ...(data || {}),
-  };
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
-  const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
-  getParamsMap().set(state.$key, params);
-  dispatchBeforeChangeEvent();
-  cleanObject(store);
-  store(state);
-  const url = getUrlBarPath(pathname) + params.query + hash;
-  const prevHash = location.hash;
-  native(state, title, url);
-  // `location.hash` 和 `hash` 都已经进行了 url 编码，可以直接进行相等判断
-  if (prevHash !== hash) dispatchEvent(new CustomEvent('hashchange'));
+  updateHistory({ path: pathname, query: search, hash, title, data }, native);
 }
 
 const gemBasePathStore = createStore({
@@ -313,9 +302,7 @@ if (!globalThis._GEMHISTORY) {
       }
     }
 
-    dispatchBeforeChangeEvent();
-    cleanObject(store);
-    store(newState);
+    changeState(newState);
   });
 }