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
Ruslan Lesiutin committed
Feb 9, 2024 at 11:27 UTC
03d6f7cf007cb3b2a3a65e6ec29be02aafd87870
4 files changed
+17
-10
packages/react-devtools-shell/src/app/index.js
+13
-2
@@ -2,9 +2,11 @@
2
3
// This test harness mounts each test app as a separate root to test multi-root applications.
4
5
+import semver from 'semver';
6
+
7
import {createElement} from 'react';
8
import {createRoot} from 'react-dom/client';
7
-import {render, unmountComponentAtNode} from 'react-dom';
9
+
10
import DeeplyNestedComponents from './DeeplyNestedComponents';
11
import Iframe from './Iframe';
12
import EditableProps from './EditableProps';
@@ -67,6 +69,8 @@ function mountStrictApp(App) {
69
}
70
71
function mountLegacyApp(App: () => React$Node) {
72
+ const {render, unmountComponentAtNode} = require('react-dom');
73
+
74
function LegacyRender() {
75
return createElement(App);
76
}
@@ -78,6 +82,10 @@ function mountLegacyApp(App: () => React$Node) {
82
unmountFunctions.push(() => unmountComponentAtNode(container));
83
}
84
85
+const shouldRenderLegacy = semver.lte(
86
+ process.env.E2E_APP_REACT_VERSION,
87
+ '18.2.0',
88
+);
89
function mountTestApp() {
90
mountStrictApp(ToDoList);
91
mountApp(InspectableElements);
@@ -90,7 +98,10 @@ function mountTestApp() {
98
mountApp(SuspenseTree);
99
mountApp(DeeplyNestedComponents);
100
mountApp(Iframe);
93
- mountLegacyApp(PartiallyStrictApp);
101
+
102
+ if (shouldRenderLegacy) {
103
+ mountLegacyApp(PartiallyStrictApp);
104
+ }
105
}
106
107
function unmountTestApp() {
packages/react-devtools-shell/src/multi/left.js
+1
-1
@@ -7,7 +7,7 @@
7
8
import * as React from 'react';
9
import {useState} from 'react';
10
-import {createRoot} from 'react-dom';
10
+import {createRoot} from 'react-dom/client';
11
12
function createContainer() {
13
const container = document.createElement('div');
packages/react-devtools-shell/src/multi/right.js
+2
-2
@@ -7,7 +7,7 @@
7
8
import * as React from 'react';
9
import {useLayoutEffect, useRef, useState} from 'react';
10
-import {render} from 'react-dom';
10
+import {createRoot} from 'react-dom/client';
11
12
function createContainer() {
13
const container = document.createElement('div');
@@ -37,4 +37,4 @@ function EffectWithState() {
37
);
38
}
39
40
-render(<EffectWithState />, createContainer());
40
+createRoot(createContainer()).render(<EffectWithState />);
packages/react-devtools-shell/webpack-server.js
+1
-5
@@ -1,7 +1,6 @@
1
const {resolve} = require('path');
2
const Webpack = require('webpack');
3
const WebpackDevServer = require('webpack-dev-server');
4
-const fs = require('fs');
4
const {
5
DARK_MODE_DIMMED_WARNING_COLOR,
6
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -17,10 +16,7 @@ const semver = require('semver');
16
17
const {SUCCESSFUL_COMPILATION_MESSAGE} = require('./constants');
18
20
-const ReactVersionSrc = fs.readFileSync(require.resolve('shared/ReactVersion'));
21
-const currentReactVersion = /export default '([^']+)';/.exec(
22
- ReactVersionSrc,
23
-)[1];
19
+const {ReactVersion: currentReactVersion} = require('../../ReactVersions');
20
21
const NODE_ENV = process.env.NODE_ENV;
22
if (!NODE_ENV) {