[pull] main from facebook:main

packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js

@@ -8,6 +8,16 @@
  */
 
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+
+export type Response = any;
+export opaque type SSRManifest = mixed;
+export opaque type ServerManifest = mixed;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference: any = null;
+export const resolveServerReference: any = null;
+export const preloadModule: any = null;
+export const requireModule: any = null;
 export const usedWithSSR = true;

packages/react-devtools-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.28.1",
+  "version": "4.28.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",

packages/react-devtools-extensions/chrome/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.28.1",
-  "version_name": "4.28.1",
+  "version": "4.28.2",
+  "version_name": "4.28.2",
   "minimum_chrome_version": "102",
   "icons": {
     "16": "icons/16-production.png",

packages/react-devtools-extensions/edge/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.28.1",
-  "version_name": "4.28.1",
+  "version": "4.28.2",
+  "version_name": "4.28.2",
   "minimum_chrome_version": "102",
   "icons": {
     "16": "icons/16-production.png",

packages/react-devtools-extensions/firefox/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.28.1",
+  "version": "4.28.2",
   "applications": {
     "gecko": {
       "id": "@react-devtools",

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

@@ -95,7 +95,7 @@ function isNumeric(str: string): boolean {
   return +str + '' === str;
 }
 
-chrome.runtime.onConnect.addListener(async port => {
+chrome.runtime.onConnect.addListener(port => {
   if (port.name === 'proxy') {
     // Proxy content script is executed in tab, so it should have it specified.
     const tabId = port.sender.tab.id;
@@ -115,11 +115,28 @@ chrome.runtime.onConnect.addListener(async port => {
   if (isNumeric(port.name)) {
     // Extension port doesn't have tab id specified, because its sender is the extension.
     const tabId = +port.name;
+    const extensionPortAlreadyConnected = ports[tabId]?.extension != null;
+
+    // Handle the case when extension port was disconnected and we were not notified
+    if (extensionPortAlreadyConnected) {
+      ports[tabId].disconnectPipe?.();
+    }
 
     registerTab(tabId);
     registerExtensionPort(port, tabId);
 
-    injectProxy(tabId);
+    if (extensionPortAlreadyConnected) {
+      const proxyPort = ports[tabId].proxy;
+
+      // Avoid re-injecting the content script, we might end up in a situation
+      // where we would have multiple proxy ports opened and trying to reconnect
+      if (proxyPort) {
+        clearReconnectionTimeout(proxyPort);
+        reconnectProxyPort(proxyPort, tabId);
+      }
+    } else {
+      injectProxy(tabId);
+    }
 
     return;
   }

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

@@ -323,8 +323,6 @@ function createBridgeAndStore() {
       }),
     );
   };
-
-  render();
 }
 
 const viewUrlSourceFunction = (url, line, col) => {
@@ -364,14 +362,14 @@ function createComponentsPanel() {
         }
       });
 
-      // TODO: we should listen to extension.onHidden to unmount some listeners
+      // TODO: we should listen to createdPanel.onHidden to unmount some listeners
       // and potentially stop highlighting
     },
   );
 }
 
 function createProfilerPanel() {
-  if (componentsPortalContainer) {
+  if (profilerPortalContainer) {
     render('profiler');
 
     return;
@@ -398,6 +396,9 @@ function createProfilerPanel() {
 }
 
 function performInTabNavigationCleanup() {
+  // Potentially, if react hasn't loaded yet and user performs in-tab navigation
+  clearReactPollingInterval();
+
   if (store !== null) {
     // Store profiling data, so it can be used later
     profilingData = store.profilerStore.profilingData;
@@ -435,6 +436,9 @@ function performInTabNavigationCleanup() {
 }
 
 function performFullCleanup() {
+  // Potentially, if react hasn't loaded yet and user closed the browser DevTools
+  clearReactPollingInterval();
+
   if ((componentsPortalContainer || profilerPortalContainer) && root) {
     // This should also emit bridge.shutdown, but only if this root was mounted
     flushSync(() => root.unmount());
@@ -455,14 +459,24 @@ function performFullCleanup() {
   port = null;
 }
 
-function mountReactDevTools() {
-  registerEventsLogger();
-
+function connectExtensionPort() {
   const tabId = chrome.devtools.inspectedWindow.tabId;
   port = chrome.runtime.connect({
     name: String(tabId),
   });
 
+  // This port may be disconnected by Chrome at some point, this callback
+  // will be executed only if this port was disconnected from the other end
+  // so, when we call `port.disconnect()` from this script,
+  // this should not trigger this callback and port reconnection
+  port.onDisconnect.addListener(connectExtensionPort);
+}
+
+function mountReactDevTools() {
+  registerEventsLogger();
+
+  connectExtensionPort();
+
   createBridgeAndStore();
 
   setReactSelectionFromBrowser(bridge);
@@ -477,18 +491,20 @@ function mountReactDevToolsWhenReactHasLoaded() {
   const checkIfReactHasLoaded = () => executeIfReactHasLoaded(onReactReady);
 
   // Check to see if React has loaded in case React is added after page load
-  const reactPollingIntervalId = setInterval(() => {
+  reactPollingIntervalId = setInterval(() => {
     checkIfReactHasLoaded();
   }, 500);
 
   function onReactReady() {
-    clearInterval(reactPollingIntervalId);
+    clearReactPollingInterval();
     mountReactDevTools();
   }
 
   checkIfReactHasLoaded();
 }
 
+let reactPollingIntervalId = null;
+
 let bridge = null;
 let store = null;
 
@@ -509,6 +525,8 @@ chrome.devtools.network.onNavigated.addListener(syncSavedPreferences);
 
 // Cleanup previous page state and remount everything
 chrome.devtools.network.onNavigated.addListener(() => {
+  clearReactPollingInterval();
+
   performInTabNavigationCleanup();
   mountReactDevToolsWhenReactHasLoaded();
 });
@@ -521,5 +539,10 @@ if (IS_FIREFOX) {
   window.addEventListener('beforeunload', performFullCleanup);
 }
 
+function clearReactPollingInterval() {
+  clearInterval(reactPollingIntervalId);
+  reactPollingIntervalId = null;
+}
+
 syncSavedPreferences();
 mountReactDevToolsWhenReactHasLoaded();

packages/react-devtools-inline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.28.1",
+  "version": "4.28.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",

packages/react-devtools-timeline/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.28.1",
+  "version": "4.28.2",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",

packages/react-devtools/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 ---
 
+### 4.28.2
+August 30, 2023
+
+#### Bugfixes
+* fix[devtools/extension]: handle tab navigation events before react is loaded ([hoxyq](https://github.com/hoxyq) in [#27316](https://github.com/facebook/react/pull/27316))
+
+---
+
 ### 4.28.1
 August 29, 2023
 

packages/react-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.28.1",
+  "version": "4.28.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^23.1.2",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.28.1",
+    "react-devtools-core": "4.28.2",
     "update-notifier": "^2.1.0"
   }
 }

packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js

@@ -9,7 +9,7 @@
 
 import type {Request} from 'react-server/src/ReactFlightServer';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from '../ReactFlightServerConfigBundlerCustom';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = false;