[DevTools] Enable hook names in standalone app (#22320)

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

@@ -43,6 +43,13 @@ 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(
+    /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+  );
+}
+
 function setContentDOMNode(value: HTMLElement) {
   node = value;
 
@@ -100,6 +107,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

@@ -46,6 +46,7 @@ module.exports = {
   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,41 @@ 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';
+        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().
-        const originalSourceAST = withSyncPerfMeasurements(
-          '[@babel/parser] parse(originalSourceCode)',
-          () =>
-            parse(originalSourceCode, {
-              sourceType: 'unambiguous',
-              plugins: ['jsx', plugin],
-            }),
-        );
-        hookParsedMetadata.originalSourceAST = originalSourceAST;
+          // 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, {
+                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,
     },
   });