test(): fix test error reporting

packages/runtime/src/createRoot.ts

@@ -19,7 +19,11 @@ import {
 } from "./internal/Renderer.js";
 import { RendererContext } from "./internal/RendererContext.js";
 import { DataStore } from "./internal/data/DataStore.js";
-import type { RenderRoot, RuntimeContext } from "./internal/interfaces.js";
+import type {
+  Dispose,
+  RenderRoot,
+  RuntimeContext,
+} from "./internal/interfaces.js";
 import { mountTree, unmountTree } from "./internal/mount.js";
 import { applyMode, applyTheme, setMode, setTheme } from "./themeAndMode.js";
 import { RenderTag } from "./internal/enums.js";
@@ -107,6 +111,7 @@ export function unstable_createRoot(
   let unmounted = false;
   let rendererContext: RendererContext | undefined;
   let clearI18nBundles: Function | undefined;
+  let disposeMount: Dispose | undefined;
   const isolatedRoot = scope === "page" ? undefined : Symbol("IsolatedRoot");
 
   return {
@@ -253,7 +258,7 @@ export function unstable_createRoot(
         applyMode();
       }
 
-      mountTree(renderRoot);
+      disposeMount = mountTree(renderRoot);
 
       if (scope === "page") {
         window.scrollTo(0, 0);
@@ -283,6 +288,8 @@ export function unstable_createRoot(
         isolatedFunctionRegistry.delete(isolatedRoot);
         isolatedTemplateRegistryMap.delete(isolatedRoot);
       }
+      disposeMount?.();
+      disposeMount = undefined;
       unmountTree(container);
       if (portal) {
         unmountTree(portal);

packages/runtime/src/internal/Router.ts

@@ -39,6 +39,7 @@ import {
 } from "./Runtime.js";
 import { getPageInfo } from "../getPageInfo.js";
 import type {
+  Dispose,
   MenuRequestNode,
   RenderRoot,
   RuntimeContext,
@@ -376,7 +377,11 @@ export class Router {
       createPortal: portal,
     };
 
+    let disposeMount: Dispose | undefined;
+
     const cleanUpPreviousRender = (): void => {
+      disposeMount?.();
+      disposeMount = undefined;
       unmountTree(main);
       unmountTree(portal);
 
@@ -547,7 +552,7 @@ export class Router {
         applyMode();
 
         setUIVersion(currentApp?.uiVersion);
-        mountTree(renderRoot);
+        disposeMount = mountTree(renderRoot);
 
         // Scroll to top after each rendering.
         // See https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md
@@ -606,7 +611,7 @@ export class Router {
     );
     renderRoot.child = node;
 
-    mountTree(renderRoot);
+    disposeMount = mountTree(renderRoot);
 
     // Scroll to top after each rendering.
     window.scrollTo(0, 0);

packages/runtime/src/internal/bindListeners.spec.ts

@@ -675,6 +675,7 @@ describe("listenerFactory for handleHttpError", () => {
 
 describe("listenerFactory for event.*", () => {
   test("event.preventDefault", () => {
+    consoleError.mockReturnValue();
     const event = { preventDefault: jest.fn() } as any;
     listenerFactory(
       {
@@ -684,9 +685,11 @@ describe("listenerFactory for event.*", () => {
       runtimeContext
     )(event);
     expect(event.preventDefault).toHaveBeenCalledWith();
+    consoleError.mockReset();
   });
 
   test("event.stopPropagation", () => {
+    consoleError.mockReturnValue();
     const event = { stopPropagation: jest.fn() } as any;
     listenerFactory(
       {
@@ -695,6 +698,7 @@ describe("listenerFactory for event.*", () => {
       runtimeContext
     )(event);
     expect(event.stopPropagation).toHaveBeenCalledWith();
+    consoleError.mockReset();
   });
 
   test("non-Event object", () => {

packages/runtime/src/internal/bindListeners.ts

@@ -25,6 +25,7 @@ import { isPreEvaluated } from "./compute/evaluate.js";
 import { setProperties } from "./compute/setProperties.js";
 import { applyMode, applyTheme } from "../themeAndMode.js";
 import type {
+  Dispose,
   ElementHolder,
   RuntimeBrickElement,
   RuntimeContext,
@@ -45,39 +46,31 @@ export function bindListeners(
   brick: RuntimeBrickElement,
   eventsMap: BrickEventsMap | undefined,
   runtimeContext: RuntimeContext
-): void {
+): Dispose {
   if (!eventsMap) {
-    return;
+    return () => {};
   }
+
+  const disposables: Dispose[] = [];
+
   Object.entries(eventsMap).forEach(([eventType, handlers]) => {
     const listener = listenerFactory(handlers, runtimeContext, {
       element: brick,
     });
     brick.addEventListener(eventType, listener);
 
     // Remember added listeners for unbinding.
-    if (!brick.$$listeners) {
-      brick.$$listeners = [];
-    }
-    brick.$$listeners.push([eventType, listener]);
-
-    // Remember added listeners for devtools.
-    if (!brick.$$eventListeners) {
-      brick.$$eventListeners = [];
-    }
-    for (const handler of ([] as BrickEventHandler[]).concat(handlers)) {
-      brick.$$eventListeners.push([eventType, null, handler]);
-    }
+    disposables.push(() => {
+      brick.removeEventListener(eventType, listener);
+    });
   });
-}
 
-export function unbindListeners(brick: RuntimeBrickElement): void {
-  if (brick.$$listeners) {
-    for (const [eventType, listener] of brick.$$listeners) {
-      brick.removeEventListener(eventType, listener);
+  return () => {
+    for (const dispose of disposables) {
+      dispose();
     }
-    brick.$$listeners.length = 0;
-  }
+    disposables.length = 0;
+  };
 }
 
 export function isBuiltinHandler(

packages/runtime/src/internal/data/DataStore.ts

@@ -19,6 +19,7 @@ import { ResolveOptions, resolveData } from "./resolveData.js";
 import { resolveDataStore } from "./resolveDataStore.js";
 import type {
   AsyncPropertyEntry,
+  Dispose,
   RouteNode,
   RuntimeBrick,
   RuntimeContext,
@@ -71,6 +72,7 @@ export class DataStore<T extends DataStoreType = "CTX"> {
   private readonly rendererContext?: RendererContext;
   private routeMap = new WeakMap<RouteConf, Set<string>>();
   private routeStackMap = new WeakMap<RouteConf, Set<PendingStackItem>>();
+  private disposableMap = new Map<string, Dispose[]>();
 
   // 把 `rendererContext` 放在参数列表的最后，并作为可选，以减少测试文件的调整
   constructor(
@@ -360,12 +362,14 @@ export class DataStore<T extends DataStoreType = "CTX"> {
     }
   }
 
-  onChange(dataName: string, listener: EventListener): () => void {
+  onChange(dataName: string, listener: EventListener): Dispose {
     const eventTarget = this.data.get(dataName)?.eventTarget;
     eventTarget?.addEventListener(this.changeEventType, listener);
-    return () => {
+    const disposable = () => {
       eventTarget?.removeEventListener(this.changeEventType, listener);
     };
+    this.addDisposable(dataName, disposable);
+    return disposable;
   }
 
   async waitFor(dataNames: string[] | Set<string>): Promise<void> {
@@ -509,7 +513,6 @@ export class DataStore<T extends DataStoreType = "CTX"> {
     };
 
     if (resolvePolicy === "lazy") {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const { trigger } = dataConf.resolve!;
       if (
         trigger &&
@@ -539,7 +542,7 @@ export class DataStore<T extends DataStoreType = "CTX"> {
       );
       !load && (newData.deps = [...deps]);
       for (const dep of deps) {
-        this.onChange(
+        const disposable = this.onChange(
           dep,
           this.batchAddListener(() => {
             newData.useResolve = trackConditionalResolve
@@ -556,6 +559,7 @@ export class DataStore<T extends DataStoreType = "CTX"> {
             }
           }, dataConf)
         );
+        this.addDisposable(dataConf.name, disposable);
       }
     }
 
@@ -579,6 +583,15 @@ export class DataStore<T extends DataStoreType = "CTX"> {
     return true;
   }
 
+  private addDisposable(name: string, disposable: Dispose) {
+    const existingDisposables = this.disposableMap.get(name);
+    if (existingDisposables) {
+      existingDisposables.push(disposable);
+    } else {
+      this.disposableMap.set(name, [disposable]);
+    }
+  }
+
   /**
    * For sub-routes to be incrementally rendered,
    * dispose their data and pending tasks.
@@ -589,6 +602,13 @@ export class DataStore<T extends DataStoreType = "CTX"> {
       if (names !== undefined) {
         for (const name of names) {
           this.data.delete(name);
+          const disposables = this.disposableMap.get(name);
+          if (disposables) {
+            for (const disposable of disposables) {
+              disposable();
+            }
+          }
+          this.disposableMap.delete(name);
         }
         this.routeMap.delete(route);
       }

packages/runtime/src/internal/interfaces.ts

@@ -112,10 +112,6 @@ export type RememberedEventListener = [string, EventListener];
 
 export interface RuntimeBrickElement extends HTMLElement {
   $$typeof?: "brick" | "provider" | "custom-template" | "native" | "invalid";
-  /** Meta info of listeners, for devtools only */
-  $$eventListeners?: MetaInfoOfEventListener[];
-  /** Remembered listeners for unbinding */
-  $$listeners?: RememberedEventListener[];
   /** Remembered proxy listeners for unbinding */
   $$proxyListeners?: RememberedEventListener[];
   /** Find element by ref in a custom template */
@@ -209,3 +205,5 @@ export interface RouteNode {
   // All ordered sibling routes under the same parent including the route itself
   routes: RouteConf[];
 }
+
+export type Dispose = () => void;

packages/runtime/src/internal/mount.ts

@@ -4,6 +4,7 @@ import { bindListeners } from "./bindListeners.js";
 import { setRealProperties } from "./compute/setRealProperties.js";
 import { RenderTag } from "./enums.js";
 import type {
+  Dispose,
   RenderReturnNode,
   RenderRoot,
   RuntimeBrickElement,
@@ -16,11 +17,12 @@ export function unmountTree(mountPoint: HTMLElement | DocumentFragment) {
 export function mountTree(
   root: RenderRoot,
   initializedElement?: RuntimeBrickElement
-): void {
+): Dispose {
   root.mounted = true;
   window.DISABLE_REACT_FLUSH_SYNC = false;
   let current = root.child;
   const portalElements: RuntimeBrickElement[] = [];
+  const disposables: Dispose[] = [];
   while (current) {
     current.mounted = true;
     if (current.tag === RenderTag.BRICK) {
@@ -56,7 +58,10 @@ export function mountTree(
           current.tplHostMetadata.tplStateStoreId;
       }
       setRealProperties(element, current.properties);
-      bindListeners(element, current.events, current.runtimeContext);
+      disposables.push(
+        bindListeners(element, current.events, current.runtimeContext)
+      );
+
       if (current.tplHostMetadata) {
         // 先设置属性，再设置 `$$tplStateStore`，这样，当触发属性设置时，
         // 避免初始化的一次 state update 操作及其 onChange 事件。
@@ -127,4 +132,10 @@ export function mountTree(
   setTimeout(() => {
     window.DISABLE_REACT_FLUSH_SYNC = true;
   });
+  return () => {
+    for (const dispose of disposables) {
+      dispose();
+    }
+    disposables.length = 0;
+  };
 }

packages/runtime/src/internal/secret_internals.ts

@@ -36,6 +36,7 @@ import type {
   RuntimeDataValueOption,
   RenderBrick,
   RenderChildNode,
+  Dispose,
 } from "./interfaces.js";
 import { mountTree, unmountTree } from "./mount.js";
 import { RenderTag } from "./enums.js";
@@ -132,6 +133,7 @@ export async function renderUseBrick(
 
 export interface MountUseBrickResult {
   portal?: HTMLElement;
+  dispose: Dispose;
 }
 
 export function mountUseBrick(
@@ -148,7 +150,7 @@ export function mountUseBrick(
     return portal;
   };
 
-  mountTree(renderRoot, element);
+  const dispose = mountTree(renderRoot, element);
 
   rendererContext.dispatchOnMount();
   rendererContext.initializeScrollIntoView();
@@ -161,6 +163,7 @@ export function mountUseBrick(
 
   return {
     portal,
+    dispose,
   };
 }
 
@@ -171,6 +174,7 @@ export function unmountUseBrick(
   // if (mountResult.mainBrick) {
   //   mountResult.mainBrick.unmount();
   // }
+  mountResult.dispose();
   if (mountResult.portal) {
     unmountTree(mountResult.portal);
     mountResult.portal.remove();