chore: gate legacy apis for react-devtools-shell (#28273)

- `react-devtools-shell` is only used for e2e tests - Based on the React version we testing against, we will show/hide roots using legacy render
facebook · Feb 9, 2024 · 03d6f7c · 03d6f7c
1 parent 36b078c
commit 03d6f7c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
@@ -2,9 +2,11 @@
 
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
+import semver from 'semver';
+
 import {createElement} from 'react';
 import {createRoot} from 'react-dom/client';
-import {render, unmountComponentAtNode} from 'react-dom';
+
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import Iframe from './Iframe';
 import EditableProps from './EditableProps';
@@ -67,6 +69,8 @@ function mountStrictApp(App) {
 }
 
 function mountLegacyApp(App: () => React$Node) {
+  const {render, unmountComponentAtNode} = require('react-dom');
+
   function LegacyRender() {
     return createElement(App);
   }
@@ -78,6 +82,10 @@ function mountLegacyApp(App: () => React$Node) {
   unmountFunctions.push(() => unmountComponentAtNode(container));
 }
 
+const shouldRenderLegacy = semver.lte(
+  process.env.E2E_APP_REACT_VERSION,
+  '18.2.0',
+);
 function mountTestApp() {
   mountStrictApp(ToDoList);
   mountApp(InspectableElements);
@@ -90,7 +98,10 @@ function mountTestApp() {
   mountApp(SuspenseTree);
   mountApp(DeeplyNestedComponents);
   mountApp(Iframe);
-  mountLegacyApp(PartiallyStrictApp);
+
+  if (shouldRenderLegacy) {
+    mountLegacyApp(PartiallyStrictApp);
+  }
 }
 
 function unmountTestApp() {

diff --git a/packages/react-devtools-shell/src/multi/left.js b/packages/react-devtools-shell/src/multi/left.js
@@ -7,7 +7,7 @@
 
 import * as React from 'react';
 import {useState} from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 function createContainer() {
   const container = document.createElement('div');

diff --git a/packages/react-devtools-shell/src/multi/right.js b/packages/react-devtools-shell/src/multi/right.js
@@ -7,7 +7,7 @@
 
 import * as React from 'react';
 import {useLayoutEffect, useRef, useState} from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 function createContainer() {
   const container = document.createElement('div');
@@ -37,4 +37,4 @@ function EffectWithState() {
   );
 }
 
-render(<EffectWithState />, createContainer());
+createRoot(createContainer()).render(<EffectWithState />);
diff --git a/packages/react-devtools-shell/webpack-server.js b/packages/react-devtools-shell/webpack-server.js
@@ -1,7 +1,6 @@
 const {resolve} = require('path');
 const Webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const fs = require('fs');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -17,10 +16,7 @@ const semver = require('semver');
 
 const {SUCCESSFUL_COMPILATION_MESSAGE} = require('./constants');
 
-const ReactVersionSrc = fs.readFileSync(require.resolve('shared/ReactVersion'));
-const currentReactVersion = /export default '([^']+)';/.exec(
-  ReactVersionSrc,
-)[1];
+const {ReactVersion: currentReactVersion} = require('../../ReactVersions');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {