feat(devtools): use wallAgent to replace disposable bridge

packages/devtools/client/src/components/Devtools/Capsule.tsx

@@ -9,7 +9,7 @@ import styles from './Capsule.module.scss';
 import { FrameBox } from './FrameBox';
 import { DevtoolsCapsuleButton } from './Button';
 import { useStickyDraggable } from '@/utils/draggable';
-import { $client, bridge, wallAgent } from '@/entries/mount/state';
+import { $client, wallAgent } from '@/entries/mount/state';
 import { pTimeout } from '@/utils/promise';
 import { ReactDevtoolsWallListener } from '@/utils/react-devtools';
 
@@ -39,11 +39,12 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
   });
 
   useEffect(() => {
-    const handleStartInspecting = () => {
+    const handleBeforeWallReceive: ReactDevtoolsWallListener = e => {
+      if (e.event !== 'startInspectingNative') return;
       toggleDevtools(false);
       document.documentElement.style.setProperty('cursor', 'cell');
     };
-    bridge.addListener('startInspectingNative', handleStartInspecting);
+    wallAgent.hook('receive', handleBeforeWallReceive);
 
     const handleBeforeWallSend: ReactDevtoolsWallListener = e => {
       if (e.event !== 'stopInspectingNative') return;
@@ -53,7 +54,6 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
     wallAgent.hook('send', handleBeforeWallSend);
 
     return () => {
-      bridge.removeListener('startInspectingNative', handleStartInspecting);
       wallAgent.removeHook('send', handleBeforeWallSend);
     };
   }, []);

packages/devtools/client/src/components/Devtools/Puller.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useNavigate } from '@modern-js/runtime/router';
 import { useThrowable } from '@/utils';
 import { $mountPoint } from '@/entries/client/routes/state';
-import { bridge } from '@/entries/client/routes/react/state';
+import { wallAgent } from '@/entries/client/routes/react/state';
 
 let _intendPullUp = false;
 
@@ -17,15 +17,12 @@ export const DevtoolsPuller: React.FC = () => {
   const mountPoint = useThrowable($mountPoint);
   const handlePullUp = async () => {
     navigate('/react');
-    const { store } = await import('@/entries/client/routes/react/state');
-    if (store.backendVersion) {
-      bridge.send('startInspectingNative');
+    if (wallAgent.status === 'active') {
+      wallAgent.send('startInspectingNative', null);
     } else {
-      const handleOperations = () => {
-        bridge.removeListener('operations', handleOperations);
-        bridge.send('startInspectingNative');
-      };
-      bridge.addListener('operations', handleOperations);
+      wallAgent.hookOnce('active', () => {
+        wallAgent.send('startInspectingNative', null);
+      });
     }
   };
   useEffect(() => {

packages/devtools/client/src/entries/client/routes/react/[tab]/page.tsx

@@ -1,9 +1,13 @@
 import { useParams } from '@modern-js/runtime/router';
 import { Box, useThemeContext } from '@radix-ui/themes';
 import React, { useEffect, useMemo } from 'react';
-import { initialize } from 'react-devtools-inline/frontend';
+import {
+  initialize,
+  createBridge,
+  createStore,
+} from 'react-devtools-inline/frontend';
 import { $mountPoint } from '../../state';
-import { bridge, store } from '../state';
+import { wallAgent } from '../state';
 import { useThrowable } from '@/utils';
 
 const Page: React.FC = () => {
@@ -16,10 +20,12 @@ const Page: React.FC = () => {
     mountPoint.remote.activateReactDevtools();
   }, []);
 
-  const InnerView = useMemo(
-    () => initialize(window.parent, { bridge, store }),
-    [],
-  );
+  const InnerView = useMemo(() => {
+    const bridge = createBridge(window.parent, wallAgent);
+    const store = createStore(bridge);
+    const ret = initialize(window.parent, { bridge, store });
+    return ret;
+  }, []);
 
   return (
     <Box

packages/devtools/client/src/entries/client/routes/react/state.ts

@@ -1,4 +1,3 @@
-import { createBridge, createStore } from 'react-devtools-inline/frontend';
 import { $mountPoint } from '../state';
 import { WallAgent } from '@/utils/react-devtools';
 
@@ -7,7 +6,3 @@ export const wallAgent = new WallAgent();
 $mountPoint.then(mountPoint => {
   wallAgent.bindRemote(mountPoint.remote, 'sendReactDevtoolsData');
 });
-
-export const bridge = createBridge(window.parent, wallAgent);
-
-export const store = createStore(bridge);

packages/devtools/client/src/utils/react-devtools.ts

@@ -13,16 +13,46 @@ export type ReactDevtoolsWallListener = (
   ...rest: unknown[]
 ) => void;
 
-export type WallAgentHooks = Record<
-  'send' | 'receive',
-  ReactDevtoolsWallListener
->;
+export interface WallAgentHooks {
+  send: ReactDevtoolsWallListener;
+  receive: ReactDevtoolsWallListener;
+  open: () => void;
+  close: () => void;
+  active: () => void;
+}
 
 export type BirpcReturnLike = Record<string, (...args: any[]) => void> & {
   $functions: Record<string, (...args: any[]) => void>;
 };
 
+export type WallAgentStatus = 'open' | 'close' | 'active';
+
 export class WallAgent extends Hookable<WallAgentHooks> implements Wall {
+  status: WallAgentStatus = 'close';
+
+  constructor() {
+    super();
+    const intendChangeStatus = (status: WallAgentStatus) => {
+      if (this.status === status) return;
+      this.status = status;
+      this.callHook(status);
+    };
+    this.hook('send', e => {
+      if (e.event === 'shutdown') {
+        intendChangeStatus('close');
+      }
+    });
+    this.hook('receive', e => {
+      if (e.event === 'shutdown') {
+        intendChangeStatus('close');
+      } else if (e.event === 'operations') {
+        intendChangeStatus('active');
+      } else {
+        intendChangeStatus('open');
+      }
+    });
+  }
+
   listen(fn: AnyFn): AnyFn {
     this.hook('receive', fn);
     return fn;