[pull] main from react:main

packages/react-devtools-core/src/backend.js

@@ -132,6 +132,16 @@ export function connectToDevTools(options: ?ConnectOptions) {
 
   let bridge: BackendBridge | null = null;
 
+  function shutdownBridge(): void {
+    const bridgeToShutdown = bridge;
+    if (bridgeToShutdown !== null) {
+      // Clear the active reference before shutdown flushes its final message
+      // through a potentially closed socket.
+      bridge = null;
+      bridgeToShutdown.shutdown();
+    }
+  }
+
   const messageListeners = [];
   const uri = protocol + '://' + host + ':' + port + prefixedPath;
 
@@ -153,7 +163,11 @@ export function connectToDevTools(options: ?ConnectOptions) {
           }
         };
       },
-      send(event: string, payload: any, transferable?: Array<any>) {
+      send(
+        event: string,
+        payload: mixed,
+        transferable?: $ReadOnlyArray<mixed>,
+      ) {
         if (ws.readyState === ws.OPEN) {
           // $FlowFixMe[constant-condition]
           if (__DEBUG__) {
@@ -170,10 +184,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
             );
           }
 
-          if (bridge !== null) {
-            bridge.shutdown();
-          }
-
+          shutdownBridge();
           scheduleRetry();
         }
       },
@@ -273,10 +284,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
       debug('WebSocket.onclose');
     }
 
-    if (bridge !== null) {
-      bridge.emit('shutdown');
-    }
-
+    shutdownBridge();
     scheduleRetry();
   }
 
@@ -323,9 +331,9 @@ export function connectToDevTools(options: ?ConnectOptions) {
 }
 
 type ConnectWithCustomMessagingOptions = {
-  onSubscribe: (cb: Function) => void,
-  onUnsubscribe: (cb: Function) => void,
-  onMessage: (event: string, payload: any) => void,
+  onSubscribe: (cb: (message: mixed) => void) => void,
+  onUnsubscribe: (cb: (message: mixed) => void) => void,
+  onMessage: (event: string, payload: mixed) => void,
   nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
   resolveRNStyle?: ResolveNativeStyle,
   onSettingsUpdated?: (settings: $ReadOnly<DevToolsHookSettings>) => void,
@@ -354,14 +362,14 @@ export function connectWithCustomMessagingProtocol({
   }
 
   const wall: Wall = {
-    listen(fn: Function) {
+    listen(fn: (message: mixed) => void) {
       onSubscribe(fn);
 
       return () => {
         onUnsubscribe(fn);
       };
     },
-    send(event: string, payload: any) {
+    send(event: string, payload: mixed) {
       onMessage(event, payload);
     },
   };

packages/react-devtools-core/src/standalone.js

@@ -209,7 +209,7 @@ function onError({code, message}: $FlowFixMe) {
 
 function openProfiler() {
   // Mocked up bridge and store to allow the DevTools to be rendered
-  bridge = new Bridge({listen: () => {}, send: () => {}});
+  bridge = new Bridge({listen: () => () => {}, send: () => {}});
   store = new Store(bridge, {});
 
   // Ensure the Profiler tab is shown initially.
@@ -260,7 +260,7 @@ function initialize(socket: WebSocket) {
         }
       };
     },
-    send(event: string, payload: any, transferable?: Array<any>) {
+    send(event: string, payload: mixed, transferable?: $ReadOnlyArray<mixed>) {
       if (socket.readyState === socket.OPEN) {
         socket.send(JSON.stringify({event, payload}));
       }

packages/react-devtools-extensions/src/background/index.js

@@ -19,6 +19,11 @@ import {
   handleReactDevToolsHookMessage,
   handleFetchResourceContentScriptMessage,
 } from './messageHandlers';
+import {
+  EXTENSION_BRIDGE_CONNECTION_DISCONNECTED,
+  EXTENSION_BRIDGE_CONNECTION_READY,
+} from '../constants';
+import type {ExtensionBridgeConnectionType} from '../constants';
 
 const ports: {
   // TODO: Check why we convert tab IDs to strings, and if we can avoid it
@@ -156,14 +161,30 @@ function connectExtensionAndProxyPorts(
   }
   const proxyPort = maybeProxyPort;
 
+  function sendBridgeConnectionMessage(
+    port: ExtensionRuntimePort,
+    type: ExtensionBridgeConnectionType,
+  ) {
+    try {
+      port.postMessage({
+        source: 'react-devtools-background',
+        payload: {type},
+      });
+    } catch (error) {
+      // The port disconnected before the status update could be delivered.
+    }
+  }
+
   // $FlowFixMe[incompatible-type]
   if (ports[tabId].disconnectPipe) {
     throw new Error(
       `Attempted to connect already connected ports for tab with id ${tabId}`,
     );
   }
 
-  function extensionPortMessageListener(message: any) {
+  let didDisconnect = false;
+
+  function extensionPortMessageListener(message: mixed) {
     try {
       proxyPort.postMessage(message);
     } catch (e) {
@@ -175,7 +196,7 @@ function connectExtensionAndProxyPorts(
     }
   }
 
-  function proxyPortMessageListener(message: any) {
+  function proxyPortMessageListener(message: mixed) {
     try {
       extensionPort.postMessage(message);
     } catch (e) {
@@ -188,9 +209,23 @@ function connectExtensionAndProxyPorts(
   }
 
   function disconnectListener() {
+    if (didDisconnect) {
+      return;
+    }
+    didDisconnect = true;
+
     extensionPort.onMessage.removeListener(extensionPortMessageListener);
     proxyPort.onMessage.removeListener(proxyPortMessageListener);
 
+    sendBridgeConnectionMessage(
+      extensionPort,
+      EXTENSION_BRIDGE_CONNECTION_DISCONNECTED,
+    );
+    sendBridgeConnectionMessage(
+      proxyPort,
+      EXTENSION_BRIDGE_CONNECTION_DISCONNECTED,
+    );
+
     // We handle disconnect() calls manually, based on each specific case
     // No need to disconnect other port here
 
@@ -205,6 +240,11 @@ function connectExtensionAndProxyPorts(
 
   extensionPort.onDisconnect.addListener(disconnectListener);
   proxyPort.onDisconnect.addListener(disconnectListener);
+
+  // The proxy owns the backend message queue. Once both forwarding listeners
+  // are installed, tell it to flush that queue through this pipe. It echoes the
+  // message to the frontend after the queued backend messages have been sent.
+  sendBridgeConnectionMessage(proxyPort, EXTENSION_BRIDGE_CONNECTION_READY);
 }
 
 chrome.runtime.onMessage.addListener((message, sender) => {

packages/react-devtools-extensions/src/constants.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type ExtensionBridgeConnectionType =
+  | 'react-devtools-extension-bridge-connection-ready'
+  | 'react-devtools-extension-bridge-connection-disconnected';
+
+export const EXTENSION_BRIDGE_CONNECTION_READY: ExtensionBridgeConnectionType =
+  'react-devtools-extension-bridge-connection-ready';
+export const EXTENSION_BRIDGE_CONNECTION_DISCONNECTED: ExtensionBridgeConnectionType =
+  'react-devtools-extension-bridge-connection-disconnected';
+
+export function getExtensionBridgeConnectionType(
+  message: mixed,
+): ExtensionBridgeConnectionType | null {
+  if (
+    message === null ||
+    typeof message !== 'object' ||
+    !('source' in message) ||
+    message.source !== 'react-devtools-background' ||
+    !('payload' in message)
+  ) {
+    return null;
+  }
+
+  const payload = message.payload;
+  if (payload === null || typeof payload !== 'object' || !('type' in payload)) {
+    return null;
+  }
+
+  const type = payload.type;
+  if (type === EXTENSION_BRIDGE_CONNECTION_READY) {
+    return EXTENSION_BRIDGE_CONNECTION_READY;
+  }
+  if (type === EXTENSION_BRIDGE_CONNECTION_DISCONNECTED) {
+    return EXTENSION_BRIDGE_CONNECTION_DISCONNECTED;
+  }
+  return null;
+}

packages/react-devtools-extensions/src/contentScripts/backendManager.js

@@ -133,7 +133,7 @@ function activateBackend(version: string, hook: DevToolsHook) {
         window.removeEventListener('message', listener);
       };
     },
-    send(event: string, payload: any, transferable?: Array<any>) {
+    send(event: string, payload: mixed, transferable?: $ReadOnlyArray<mixed>) {
       window.postMessage(
         {
           source: 'react-devtools-bridge',