[DevTools] Enable hook names in standalone app

Author: Juan Tejada

packages/react-devtools-core/hookNames.js

@@ -0,0 +1 @@
+module.exports = require('./dist/hookNames');

packages/react-devtools-core/package.json

@@ -13,7 +13,8 @@
     "dist",
     "backend.js",
     "build-info.json",
-    "standalone.js"
+    "standalone.js",
+    "hookNames.js"
   ],
   "scripts": {
     "build": "yarn build:backend && yarn build:standalone",

packages/react-devtools-core/src/hookNames.js

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+
+import {
+  parseHookNames,
+  parseSourceAndMetadata,
+  purgeCachedMetadata,
+} from 'react-devtools-shared/src/hooks/parseHookNames';
+
+export {parseHookNames, parseSourceAndMetadata, purgeCachedMetadata};

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

@@ -43,6 +43,11 @@ let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (message: string) => {};
 
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+function hookNamesModuleLoaderFunction() {
+  return import('./hookNames');
+}
+
 function setContentDOMNode(value: HTMLElement) {
   node = value;
 
@@ -100,6 +105,7 @@ function reload() {
       createElement(DevTools, {
         bridge: ((bridge: any): FrontendBridge),
         canViewElementSourceFunction,
+        hookNamesModuleLoaderFunction,
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,

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

@@ -38,14 +38,16 @@ const babelOptions = {
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
+  devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
   target: 'electron-main',
   entry: {
     standalone: './src/standalone.js',
+    hookNames: './src/hookNames.js',
   },
   output: {
     path: __dirname + '/dist',
     filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
     library: '[name]',
     libraryTarget: 'commonjs2',
   },

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js

@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
-export const enableNamedHooksFeature = false;
+export const enableNamedHooksFeature = true;
 export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js

@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
-export const enableNamedHooksFeature = false;
+export const enableNamedHooksFeature = true;
 export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 

packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js

@@ -394,33 +394,42 @@ function parseSourceAST(
         hookParsedMetadata.originalSourceCode =
           sourceMetadata.originalSourceCode;
       } else {
-        // TypeScript is the most commonly used typed JS variant so let's default to it
-        // unless we detect explicit Flow usage via the "@flow" pragma.
-        const plugin =
-          originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
-
-        // TODO (named hooks) This is probably where we should check max source length,
-        // rather than in loadSourceAndMetatada -> loadSourceFiles().
-        const originalSourceAST = withSyncPerfMeasurements(
-          '[@babel/parser] parse(originalSourceCode)',
-          () =>
-            parse(originalSourceCode, {
-              sourceType: 'unambiguous',
-              plugins: ['jsx', plugin],
-            }),
-        );
-        hookParsedMetadata.originalSourceAST = originalSourceAST;
+        try {
+          // TypeScript is the most commonly used typed JS variant so let's default to it
+          // unless we detect explicit Flow usage via the "@flow" pragma.
+          const plugin =
+            originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
+
+          // TODO (named hooks) This is probably where we should check max source length,
+          // rather than in loadSourceAndMetatada -> loadSourceFiles().
+          // TODO(#22319): Support source files that are html files with inline script tags.
+          const originalSourceAST = withSyncPerfMeasurements(
+            '[@babel/parser] parse(originalSourceCode)',
+            () =>
+              parse(originalSourceCode, {
+                errorRecovery: true,
+                sourceType: 'unambiguous',
+                plugins: ['jsx', plugin],
+              }),
+          );
+          hookParsedMetadata.originalSourceAST = originalSourceAST;
 
-        if (__DEBUG__) {
-          console.log(
-            `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
+          if (__DEBUG__) {
+            console.log(
+              `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
+            );
+          }
+
+          originalURLToMetadataCache.set(originalSourceURL, {
+            originalSourceAST,
+            originalSourceCode,
+          });
+        } catch (error) {
+          throw new Error(
+            `Failed to parse source file: ${originalSourceURL}\n\n` +
+              `Original error: ${error}`,
           );
         }
-
-        originalURLToMetadataCache.set(originalSourceURL, {
-          originalSourceAST,
-          originalSourceCode,
-        });
       }
     },
   );

packages/react-devtools/app.js

@@ -30,6 +30,7 @@ app.on('ready', function() {
     //titleBarStyle: 'customButtonsOnHover',
     webPreferences: {
       nodeIntegration: true,
+      nodeIntegrationInWorker: true,
     },
   });