[DevTools] Don't inline workers for extensions (facebook#34508)

Author: eps1lon

.github/workflows/devtools_regression_tests.yml

@@ -201,5 +201,5 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: screenshots
-          path: ./tmp/screenshots
+          path: ./tmp/playwright-artifacts
           if-no-files-found: warn

.github/workflows/runtime_build_and_test.yml

@@ -831,6 +831,12 @@ jobs:
       - run: ./scripts/ci/run_devtools_e2e_tests.js
         env:
           RELEASE_CHANNEL: experimental
+      - name: Archive Playwright report
+        uses: actions/upload-artifact@v4
+        with:
+          name: devtools-playwright-artifacts
+          path: tmp/playwright-artifacts
+          if-no-files-found: warn
 
   # ----- SIZEBOT -----
   sizebot:

.gitignore

@@ -23,6 +23,7 @@ chrome-user-data
 .vscode
 *.swp
 *.swo
+/tmp
 
 packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build

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

@@ -108,6 +108,7 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
+              // Workers would have to be exposed on a public path in order to outline them.
               inline: true,
               name: '[name]',
             },

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

@@ -24,6 +24,7 @@ import {
   normalizeUrlIfValid,
 } from 'react-devtools-shared/src/utils';
 import {checkConditions} from 'react-devtools-shared/src/devtools/views/Editor/utils';
+import * as parseHookNames from 'react-devtools-shared/src/hooks/parseHookNames';
 
 import {
   setBrowserSelectionFromReact,
@@ -40,6 +41,12 @@ import getProfilingFlags from './getProfilingFlags';
 import debounce from './debounce';
 import './requestAnimationFramePolyfill';
 
+const resolvedParseHookNames = Promise.resolve(parseHookNames);
+// DevTools assumes this is a dynamically imported module. Since we outline
+// workers in this bundle, we can sync require the module since it's just a thin
+// wrapper around calling the worker.
+const hookNamesModuleLoaderFunction = () => resolvedParseHookNames;
+
 function createBridge() {
   bridge = new Bridge({
     listen(fn) {
@@ -188,12 +195,6 @@ 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'
-    );
-
   root = createRoot(document.createElement('div'));
 
   render = (overrideTab = mostRecentOverrideTab) => {

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

@@ -101,6 +101,7 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
+              // Workers would have to be exposed on a public path in order to outline them.
               inline: true,
               name: '[name]',
             },

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

@@ -93,6 +93,7 @@ module.exports = {
           {
             loader: 'workerize-loader',
             options: {
+              // Workers would have to be exposed on a public path in order to outline them.
               inline: true,
               name: '[name]',
             },

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 playwrightArtifactsPath = join(ROOT_PATH, 'tmp', 'playwright-artifacts');
 
 const {SUCCESSFUL_COMPILATION_MESSAGE} = require(
   join(shellPackagePath, 'constants.js')
@@ -125,14 +125,22 @@ function runTestShell() {
 async function runEndToEndTests() {
   logBright('Running e2e tests');
   if (!reactVersion) {
-    testProcess = spawn('yarn', ['test:e2e', `--output=${screenshotPath}`], {
-      cwd: inlinePackagePath,
-    });
+    testProcess = spawn(
+      'yarn',
+      ['test:e2e', `--output=${playwrightArtifactsPath}`],
+      {
+        cwd: inlinePackagePath,
+      }
+    );
   } else {
-    testProcess = spawn('yarn', ['test:e2e', `--output=${screenshotPath}`], {
-      cwd: inlinePackagePath,
-      env: {...process.env, REACT_VERSION: reactVersion},
-    });
+    testProcess = spawn(
+      'yarn',
+      ['test:e2e', `--output=${playwrightArtifactsPath}`],
+      {
+        cwd: inlinePackagePath,
+        env: {...process.env, REACT_VERSION: reactVersion},
+      }
+    );
   }
 
   testProcess.stdout.on('data', data => {