Now that react-dom/client is a separate build there are additional in…

…ternal module boundaries that get picked up by devtoools timeline testing. This udpates snapshots to reflect this expected change.
facebook · Apr 24, 2024 · 223ea80 · 223ea80
1 parent 4ac97cc
commit 223ea80
Show file tree

Hide file tree

Showing 7 changed files with 1,262 additions and 1,216 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -841,83 +841,83 @@ describe('Timeline profiler', () => {
                 {
                   "batchUID": 0,
                   "depth": 0,
-                  "duration": 0.012,
+                  "duration": 0.014,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.006,
+                  "timestamp": 0.008,
                   "type": "render-idle",
                 },
                 {
                   "batchUID": 0,
                   "depth": 0,
                   "duration": 0.003,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.006,
+                  "timestamp": 0.008,
                   "type": "render",
                 },
                 {
                   "batchUID": 0,
                   "depth": 0,
-                  "duration": 0.008,
+                  "duration": 0.010,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.01,
+                  "timestamp": 0.012,
                   "type": "commit",
                 },
                 {
                   "batchUID": 0,
                   "depth": 1,
                   "duration": 0.001,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.016,
+                  "timestamp": 0.02,
                   "type": "layout-effects",
                 },
                 {
                   "batchUID": 0,
                   "depth": 0,
                   "duration": 0.004,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.019,
+                  "timestamp": 0.023,
                   "type": "passive-effects",
                 },
               ],
               1 => [
                 {
                   "batchUID": 1,
                   "depth": 0,
-                  "duration": 0.012,
+                  "duration": 0.014,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.024,
+                  "timestamp": 0.028,
                   "type": "render-idle",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
                   "duration": 0.003,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.024,
+                  "timestamp": 0.028,
                   "type": "render",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
-                  "duration": 0.008,
+                  "duration": 0.010,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.028,
+                  "timestamp": 0.032,
                   "type": "commit",
                 },
                 {
                   "batchUID": 1,
                   "depth": 1,
                   "duration": 0.001,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.034,
+                  "timestamp": 0.04,
                   "type": "layout-effects",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
                   "duration": 0.003,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.037,
+                  "timestamp": 0.043,
                   "type": "passive-effects",
                 },
               ],
@@ -926,33 +926,33 @@ describe('Timeline profiler', () => {
               {
                 "componentName": "App",
                 "duration": 0.001,
-                "timestamp": 0.007,
+                "timestamp": 0.009,
                 "type": "render",
                 "warning": null,
               },
               {
                 "componentName": "App",
                 "duration": 0.002,
-                "timestamp": 0.02,
+                "timestamp": 0.024,
                 "type": "passive-effect-mount",
                 "warning": null,
               },
               {
                 "componentName": "App",
                 "duration": 0.001,
-                "timestamp": 0.025,
+                "timestamp": 0.029,
                 "type": "render",
                 "warning": null,
               },
               {
                 "componentName": "App",
                 "duration": 0.001,
-                "timestamp": 0.038,
+                "timestamp": 0.044,
                 "type": "passive-effect-mount",
                 "warning": null,
               },
             ],
-            "duration": 0.04,
+            "duration": 0.046,
             "flamechart": [],
             "internalModuleSourceToRanges": Map {
               undefined => [
@@ -1015,81 +1015,81 @@ describe('Timeline profiler', () => {
                 {
                   "batchUID": 0,
                   "depth": 0,
-                  "duration": 0.012,
+                  "duration": 0.014,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.006,
+                  "timestamp": 0.008,
                   "type": "render-idle",
                 },
                 {
                   "batchUID": 0,
                   "depth": 0,
                   "duration": 0.003,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.006,
+                  "timestamp": 0.008,
                   "type": "render",
                 },
                 {
                   "batchUID": 0,
                   "depth": 0,
-                  "duration": 0.008,
+                  "duration": 0.010,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.01,
+                  "timestamp": 0.012,
                   "type": "commit",
                 },
                 {
                   "batchUID": 0,
                   "depth": 1,
                   "duration": 0.001,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.016,
+                  "timestamp": 0.02,
                   "type": "layout-effects",
                 },
                 {
                   "batchUID": 0,
                   "depth": 0,
                   "duration": 0.004,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.019,
+                  "timestamp": 0.023,
                   "type": "passive-effects",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
-                  "duration": 0.012,
+                  "duration": 0.014,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.024,
+                  "timestamp": 0.028,
                   "type": "render-idle",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
                   "duration": 0.003,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.024,
+                  "timestamp": 0.028,
                   "type": "render",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
-                  "duration": 0.008,
+                  "duration": 0.010,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.028,
+                  "timestamp": 0.032,
                   "type": "commit",
                 },
                 {
                   "batchUID": 1,
                   "depth": 1,
                   "duration": 0.001,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.034,
+                  "timestamp": 0.04,
                   "type": "layout-effects",
                 },
                 {
                   "batchUID": 1,
                   "depth": 0,
                   "duration": 0.003,
                   "lanes": "0b0000000000000000000000000000101",
-                  "timestamp": 0.037,
+                  "timestamp": 0.043,
                   "type": "passive-effects",
                 },
               ],
@@ -1126,14 +1126,14 @@ describe('Timeline profiler', () => {
             "schedulingEvents": [
               {
                 "lanes": "0b0000000000000000000000000000101",
-                "timestamp": 0.005,
+                "timestamp": 0.007,
                 "type": "schedule-render",
                 "warning": null,
               },
               {
                 "componentName": "App",
                 "lanes": "0b0000000000000000000000000000101",
-                "timestamp": 0.021,
+                "timestamp": 0.025,
                 "type": "schedule-state-update",
                 "warning": null,
               },

diff --git a/packages/react-devtools-shell/src/e2e-regression/app.js b/packages/react-devtools-shell/src/e2e-regression/app.js
@@ -3,16 +3,15 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
 import ListApp from '../e2e-apps/ListApp';
 
 function mountApp(App: () => React$Node) {
   const container = document.createElement('div');
 
   ((document.body: any): HTMLBodyElement).appendChild(container);
 
-  const root = createRoot(container);
+  const root = ReactDOMClient.createRoot(container);
   root.render(<App />);
 }
 function mountTestApp() {
@@ -27,5 +26,5 @@ window.parent.REACT_DOM_APP = {
   createTestNameSelector: name => `[data-testname="${name}"]`,
   findAllNodes: (container, nodes) =>
     container.querySelectorAll(nodes.join(' ')),
-  ...ReactDOM,
+  ...ReactDOMClient,
 };
diff --git a/packages/react-devtools-shell/src/e2e-regression/devtools.js b/packages/react-devtools-shell/src/e2e-regression/devtools.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
@@ -32,7 +32,7 @@ function init(appIframe, devtoolsContainer, appSource) {
   const DevTools = createDevTools(contentWindow);
 
   inject(contentDocument, appSource, () => {
-    createRoot(devtoolsContainer).render(
+    ReactDOMClient.createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}
@@ -55,4 +55,5 @@ init(
 );
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
-window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
+window.parent.REACT_DOM_DEVTOOLS =
+  'createTestNameSelector' in ReactDOMClient ? ReactDOMClient : ReactDOM;
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
@@ -3,8 +3,7 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
 
 const container = document.createElement('div');
 
@@ -14,8 +13,8 @@ const container = document.createElement('div');
 // so that it can load things other than just ToDoList.
 const App = require('../e2e-apps/ListApp').default;
 
-const root = createRoot(container);
+const root = ReactDOMClient.createRoot(container);
 root.render(<App />);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
-window.parent.REACT_DOM_APP = ReactDOM;
+window.parent.REACT_DOM_APP = ReactDOMClient;
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -8,8 +8,7 @@
  */
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
@@ -41,7 +40,7 @@ function init(appIframe, devtoolsContainer, appSource) {
   const DevTools = createDevTools(contentWindow);
 
   inject(contentDocument, appSource, () => {
-    createRoot(devtoolsContainer).render(
+    ReactDOMClient.createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}
@@ -58,4 +57,4 @@ const devtoolsContainer = document.getElementById('devtools');
 init(iframe, devtoolsContainer, 'dist/e2e-app.js');
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
-window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
+window.parent.REACT_DOM_DEVTOOLS = ReactDOMClient;
diff --git a/packages/react-devtools-shell/webpack-server.js b/packages/react-devtools-shell/webpack-server.js
@@ -124,6 +124,8 @@ const makeConfig = (entry, alias) => ({
   },
 });
 
+const clientAsSeparateBuild = semver.gte(REACT_VERSION, '19.0.0');
+
 const app = makeConfig(
   {
     'app-index': './src/app/index.js',
@@ -142,8 +144,14 @@ const app = makeConfig(
     react: resolve(builtModulesDir, 'react'),
     'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
     'react-devtools-feature-flags': resolveFeatureFlags('shell'),
-    'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
-    'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+    'react-dom/client': resolve(
+      builtModulesDir,
+      clientAsSeparateBuild ? 'react-dom/unstable_testing' : 'react-dom/client',
+    ),
+    'react-dom': resolve(
+      builtModulesDir,
+      clientAsSeparateBuild ? 'react-dom' : 'react-dom/unstable_testing',
+    ),
     'react-is': resolve(builtModulesDir, 'react-is'),
     scheduler: resolve(builtModulesDir, 'scheduler'),
   },