Use outlined workers for DevTools extensions and update CI artifacts

.github/workflows/devtools_regression_tests.yml

@@ -200,6 +200,6 @@ jobs:
         run: rm -r ./build-regression
       - uses: actions/upload-artifact@v4
         with:
-          name: screenshots
-          path: ./tmp/screenshots
+          name: playwright-artifacts
+          path: ./tmp/playwright-artifacts
           if-no-files-found: warn

.gitignore

@@ -38,3 +38,4 @@ packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-timeline/dist
 
+tmp/

packages/react-devtools-core/webpack.standalone.js

@@ -106,6 +106,9 @@ module.exports = {
         test: /\.worker\.js$/,
         use: [
           {
+          // NOTE: Keep inline: true for standalone builds.
+          // Only extension builds use outlined workers (inline: false)
+          // because they have a known public path.
             loader: 'workerize-loader',
             options: {
               inline: true,

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

@@ -39,6 +39,7 @@ import registerEventsLogger from './registerEventsLogger';
 import getProfilingFlags from './getProfilingFlags';
 import debounce from './debounce';
 import './requestAnimationFramePolyfill';
+import * as ParseHookNames from 'react-devtools-shared/src/hooks/parseHookNames';
 
 function createBridge() {
   bridge = new Bridge({
@@ -189,10 +190,7 @@ function createBridgeAndStore() {
   };
 
   // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
-  const hookNamesModuleLoaderFunction = () =>
-    import(
-      /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
-    );
+  const hookNamesModuleLoaderFunction = () => Promise.resolve(ParseHookNames);
 
   root = createRoot(document.createElement('div'));
 

packages/react-devtools-extensions/webpack.config.js

@@ -261,7 +261,7 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
-              inline: true,
+              inline: false,
               name: '[name]',
             },
           },

packages/react-devtools-fusebox/webpack.config.frontend.js

@@ -99,6 +99,9 @@ module.exports = {
         test: /\.worker\.js$/,
         use: [
           {
+          // NOTE: Keep inline: true for Fusebox builds.
+          // Only extension builds use outlined workers (inline: false)
+          // because they have a known public path.
             loader: 'workerize-loader',
             options: {
               inline: true,

packages/react-devtools-inline/webpack.config.js

@@ -91,6 +91,9 @@ module.exports = {
         test: /\.worker\.js$/,
         use: [
           {
+          // NOTE: Keep inline: true for inline builds.
+          // Only extension builds use outlined workers (inline: false)
+          // because they have a known public path.
             loader: 'workerize-loader',
             options: {
               inline: true,

scripts/ci/run_devtools_e2e_tests.js

@@ -9,7 +9,7 @@ const ROOT_PATH = join(__dirname, '..', '..');
 const reactVersion = process.argv[2];
 const inlinePackagePath = join(ROOT_PATH, 'packages', 'react-devtools-inline');
 const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
-const screenshotPath = join(ROOT_PATH, 'tmp', 'screenshots');
+const screenshotPath = join(ROOT_PATH, 'tmp', 'playwright-artifacts');
 
 const {SUCCESSFUL_COMPILATION_MESSAGE} = require(
   join(shellPackagePath, 'constants.js')