[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',

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',

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',

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',

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',

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',

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',

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',