DevTools: Parse named source AST in a worker

packages/react-devtools-extensions/package.json

@@ -19,7 +19,6 @@
     "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
-    "acorn-jsx": "^5.2.0",
     "@babel/core": "^7.11.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-flow-strip-types": "^7.10.4",
@@ -28,6 +27,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "acorn-jsx": "^5.2.0",
     "archiver": "^3.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
@@ -55,7 +55,8 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "workerize-loader": "^1.3.0"
   },
   "dependencies": {
     "web-ext": "^4"

packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js

@@ -11,10 +11,15 @@
 // This is done to control if and how the code is transformed at runtime.
 // Do not declare test components within this test file as it is very fragile.
 
+const {parse} = require('@babel/parser');
+const babelParserWorker = require('../workerizedBabelParser/babelParser.worker.js');
+
 describe('parseHookNames', () => {
   let fetchMock;
   let inspectHooks;
   let parseHookNames;
+  let babelParserMock;
+  let workerizedParseMock;
 
   beforeEach(() => {
     jest.resetModules();
@@ -23,6 +28,25 @@ describe('parseHookNames', () => {
       console.trace('source-map-support');
     });
 
+    window.Worker = undefined;
+
+    babelParserMock = jest.fn(parse);
+    workerizedParseMock = jest.fn(babelParserWorker.workerizedParse);
+
+    jest.mock('@babel/parser', () => {
+      return {
+        __esModule: true,
+        parse: babelParserMock,
+      };
+    });
+
+    jest.mock('../workerizedBabelParser/babelParser.worker.js', () => {
+      return {
+        __esModule: true,
+        default: () => ({workerizedParse: workerizedParseMock}),
+      };
+    });
+
     fetchMock = require('jest-fetch-mock');
     fetchMock.enableMocks();
 
@@ -89,6 +113,30 @@ describe('parseHookNames', () => {
     return hookNames;
   }
 
+  it('should use worker when available', async () => {
+    const Component = require('./__source__/__untransformed__/ComponentWithUseState')
+      .Component;
+
+    window.Worker = true;
+    // resets module so mocked worker instance can be updated
+    jest.resetModules();
+    parseHookNames = require('../parseHookNames').parseHookNames;
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+    expect(workerizedParseMock).toHaveBeenCalledTimes(3);
+  });
+
+  it('should use babel parser when worker is not available', async () => {
+    const Component = require('./__source__/__untransformed__/ComponentWithUseState')
+      .Component;
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+    expect(workerizedParseMock).toHaveBeenCalledTimes(0);
+    expect(babelParserMock).toHaveBeenCalledTimes(3);
+  });
+
   it('should parse names for useState()', async () => {
     const Component = require('./__source__/__untransformed__/ComponentWithUseState')
       .Component;

packages/react-devtools-extensions/src/parseHookNames.js

@@ -9,11 +9,11 @@
  * @flow
  */
 
-import {parse} from '@babel/parser';
 import LRU from 'lru-cache';
 import {SourceMapConsumer} from 'source-map';
 import {getHookName} from './astUtils';
 import {areSourceMapsAppliedToErrors} from './ErrorTester';
+import {workerizedParse} from './workerizedBabelParser';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 
@@ -471,6 +471,7 @@ function loadSourceFiles(
 async function parseSourceAST(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
+  const promises = [];
   locationKeyToHookSourceData.forEach(hookSourceData => {
     if (hookSourceData.originalSourceAST !== null) {
       // Use cached metadata.
@@ -550,24 +551,26 @@ async function parseSourceAST(
       const plugin =
         originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
 
-      // TODO (named hooks) Parsing should ideally be done off of the main thread.
-      const originalSourceAST = parse(originalSourceCode, {
+      const parsePromise = workerizedParse(originalSourceCode, {
         sourceType: 'unambiguous',
         plugins: ['jsx', plugin],
+      }).then(originalSourceAST => {
+        hookSourceData.originalSourceAST = originalSourceAST;
+        if (__DEBUG__) {
+          console.log(
+            `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
+          );
+        }
+        originalURLToMetadataCache.set(originalSourceURL, {
+          originalSourceAST,
+          originalSourceCode,
+        });
       });
-      hookSourceData.originalSourceAST = originalSourceAST;
-      if (__DEBUG__) {
-        console.log(
-          `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
-        );
-      }
-      originalURLToMetadataCache.set(originalSourceURL, {
-        originalSourceAST,
-        originalSourceCode,
-      });
+
+      promises.push(parsePromise);
     }
   });
-  return Promise.resolve();
+  return Promise.all(promises);
 }
 
 function flattenHooksList(

packages/react-devtools-extensions/src/workerizedBabelParser/babelParser.worker.js

@@ -0,0 +1,5 @@
+import {parse} from '@babel/parser';
+
+export function workerizedParse(...params) {
+  return parse(...params);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// This file uses workerize to load ./babelParse.worker as a webworker
+// and instanciates it, exposing flow typed functions that can be used
+// on other files.
+
+import {parse} from '@babel/parser';
+import WorkerizedBabelParser from './babelParser.worker';
+
+const workerizedBabelParser = window.Worker && WorkerizedBabelParser();
+
+type Parse = typeof parse;
+
+export const workerizedParse = async (
+  input: string,
+  options?: {
+    plugins: string[],
+  },
+) => {
+  // Checks if worker is not available runs regular babel parse
+  if (workerizedBabelParser) {
+    const workerParse: Parse = workerizedBabelParser.workerizedParse;
+    return workerParse(input, options);
+  }
+  return parse(input, options);
+};

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

@@ -109,6 +109,11 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.worker\.js$/,
+        // inline: true due to limitations with extensions
+        use: {loader: 'workerize-loader', options: {inline: true}},
+      },
     ],
   },
 };