[DevTools] Don't inline workers for extensions (#34508)
Sebastian "Sebbie" Silbermann committed
Sep 17, 2025 at 17:59 UTC
128abcfa019c1282f59b3f274051da03a405ead2
9 files changed
+35
-16
.github/workflows/devtools_regression_tests.yml
+1
-1
@@ -201,5 +201,5 @@ jobs:
201
- uses: actions/upload-artifact@v4
202
with:
203
name: screenshots
204
- path: ./tmp/screenshots
204
+ path: ./tmp/playwright-artifacts
205
if-no-files-found: warn
.github/workflows/runtime_build_and_test.yml
+6
@@ -831,6 +831,12 @@ jobs:
831
- run: ./scripts/ci/run_devtools_e2e_tests.js
832
env:
833
RELEASE_CHANNEL: experimental
834
+ - name: Archive Playwright report
835
+ uses: actions/upload-artifact@v4
836
+ with:
837
+ name: devtools-playwright-artifacts
838
+ path: tmp/playwright-artifacts
839
+ if-no-files-found: warn
840
841
# ----- SIZEBOT -----
842
sizebot:
.gitignore
+1
@@ -23,6 +23,7 @@ chrome-user-data
23
.vscode
24
*.swp
25
*.swo
26
+/tmp
27
28
packages/react-devtools-core/dist
29
packages/react-devtools-extensions/chrome/build
packages/react-devtools-core/webpack.standalone.js
+1
@@ -108,6 +108,7 @@ module.exports = {
108
{
109
loader: 'workerize-loader',
110
options: {
111
+ // Workers would have to be exposed on a public path in order to outline them.
112
inline: true,
113
name: '[name]',
114
},
packages/react-devtools-extensions/src/main/index.js
+7
-6
@@ -24,6 +24,7 @@ import {
24
normalizeUrlIfValid,
25
} from 'react-devtools-shared/src/utils';
26
import {checkConditions} from 'react-devtools-shared/src/devtools/views/Editor/utils';
27
+import * as parseHookNames from 'react-devtools-shared/src/hooks/parseHookNames';
28
29
import {
30
setBrowserSelectionFromReact,
@@ -40,6 +41,12 @@ import getProfilingFlags from './getProfilingFlags';
41
import debounce from './debounce';
42
import './requestAnimationFramePolyfill';
43
44
+const resolvedParseHookNames = Promise.resolve(parseHookNames);
45
+// DevTools assumes this is a dynamically imported module. Since we outline
46
+// workers in this bundle, we can sync require the module since it's just a thin
47
+// wrapper around calling the worker.
48
+const hookNamesModuleLoaderFunction = () => resolvedParseHookNames;
49
+
50
function createBridge() {
51
bridge = new Bridge({
52
listen(fn) {
@@ -188,12 +195,6 @@ function createBridgeAndStore() {
195
);
196
};
197
191
- // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
192
- const hookNamesModuleLoaderFunction = () =>
193
- import(
194
- /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
195
- );
196
-
198
root = createRoot(document.createElement('div'));
199
200
render = (overrideTab = mostRecentOverrideTab) => {
packages/react-devtools-extensions/webpack.config.js
+1
-1
@@ -261,7 +261,7 @@ module.exports = {
261
{
262
loader: 'workerize-loader',
263
options: {
264
- inline: true,
264
+ inline: false,
265
name: '[name]',
266
},
267
},
packages/react-devtools-fusebox/webpack.config.frontend.js
+1
@@ -101,6 +101,7 @@ module.exports = {
101
{
102
loader: 'workerize-loader',
103
options: {
104
+ // Workers would have to be exposed on a public path in order to outline them.
105
inline: true,
106
name: '[name]',
107
},
packages/react-devtools-inline/webpack.config.js
+1
@@ -93,6 +93,7 @@ module.exports = {
93
{
94
loader: 'workerize-loader',
95
options: {
96
+ // Workers would have to be exposed on a public path in order to outline them.
97
inline: true,
98
name: '[name]',
99
},
scripts/ci/run_devtools_e2e_tests.js
+16
-8
@@ -9,7 +9,7 @@ const ROOT_PATH = join(__dirname, '..', '..');
9
const reactVersion = process.argv[2];
10
const inlinePackagePath = join(ROOT_PATH, 'packages', 'react-devtools-inline');
11
const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
12
-const screenshotPath = join(ROOT_PATH, 'tmp', 'screenshots');
12
+const playwrightArtifactsPath = join(ROOT_PATH, 'tmp', 'playwright-artifacts');
13
14
const {SUCCESSFUL_COMPILATION_MESSAGE} = require(
15
join(shellPackagePath, 'constants.js')
@@ -125,14 +125,22 @@ function runTestShell() {
125
async function runEndToEndTests() {
126
logBright('Running e2e tests');
127
if (!reactVersion) {
128
- testProcess = spawn('yarn', ['test:e2e', `--output=${screenshotPath}`], {
129
- cwd: inlinePackagePath,
130
- });
128
+ testProcess = spawn(
129
+ 'yarn',
130
+ ['test:e2e', `--output=${playwrightArtifactsPath}`],
131
+ {
132
+ cwd: inlinePackagePath,
133
+ }
134
+ );
135
} else {
132
- testProcess = spawn('yarn', ['test:e2e', `--output=${screenshotPath}`], {
133
- cwd: inlinePackagePath,
134
- env: {...process.env, REACT_VERSION: reactVersion},
135
- });
136
+ testProcess = spawn(
137
+ 'yarn',
138
+ ['test:e2e', `--output=${playwrightArtifactsPath}`],
139
+ {
140
+ cwd: inlinePackagePath,
141
+ env: {...process.env, REACT_VERSION: reactVersion},
142
+ }
143
+ );
144
}
145
146
testProcess.stdout.on('data', data => {