Add named hooks support to react-devtools-inline (facebook#22263)

This commit builds on PR facebook#22260 and makes the following changes:
* Adds a DevTools feature flag for named hooks support. (This allows us to disable it entirely for a build via feature flag.)
* Adds a new Suspense cache for dynamically imported modules. (This allows a component to suspend while importing an external code chunk– like the hook names parsing code).
* DevTools supports a hookNamesModuleLoaderFunction param to import the hook names module. I wish this could be handles as part of the react-devtools-shared package, but I'm not sure how to configure Webpack (4) to serve the chunk from react-devtools-inline. This seemed like a reasonable workaround.

The PR also contains an additional unrelated change:
* Removes pre-fetch optimization (added in DevTools: Improve named hooks network caching facebook#22198). This optimization was mostly only important for cases where sources needed to be re-downloaded, something which we can now avoid in most cases¹ thanks to using cached responses already loaded by the page. (I tested this locally on Facebook and this change has no negative performance impact. There is still some overhead from serializing the JS through the Bridge but that's constant between the two approaches.)

¹ The case where we don't benefit from cached responses is when DevTools are opened after the page has already loaded certain scripts. This seems uncommon enough that I don't think it justified the added complexity of prefetching.

Author: Brian Vaughn

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

@@ -287,32 +287,30 @@ function createPanelIfReactLoaded() {
           };
         }
 
+        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+        const hookNamesModuleLoaderFunction = () =>
+          import('react-devtools-inline/hookNames');
+
         root = createRoot(document.createElement('div'));
 
         render = (overrideTab = mostRecentOverrideTab) => {
           mostRecentOverrideTab = overrideTab;
-          import('react-devtools-shared/src/hooks/parseHookNames').then(
-            ({parseHookNames, prefetchSourceFiles, purgeCachedMetadata}) => {
-              root.render(
-                createElement(DevTools, {
-                  bridge,
-                  browserTheme: getBrowserTheme(),
-                  componentsPortalContainer,
-                  enabledInspectedElementContextMenu: true,
-                  fetchFileWithCaching,
-                  loadHookNames: parseHookNames,
-                  overrideTab,
-                  prefetchSourceFiles,
-                  profilerPortalContainer,
-                  purgeCachedHookNamesMetadata: purgeCachedMetadata,
-                  showTabBar: false,
-                  store,
-                  warnIfUnsupportedVersionDetected: true,
-                  viewAttributeSourceFunction,
-                  viewElementSourceFunction,
-                }),
-              );
-            },
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserTheme: getBrowserTheme(),
+              componentsPortalContainer,
+              enabledInspectedElementContextMenu: true,
+              fetchFileWithCaching,
+              hookNamesModuleLoaderFunction,
+              overrideTab,
+              profilerPortalContainer,
+              showTabBar: false,
+              store,
+              warnIfUnsupportedVersionDetected: true,
+              viewAttributeSourceFunction,
+              viewElementSourceFunction,
+            }),
           );
         };
 

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

@@ -52,6 +52,7 @@ module.exports = {
     path: __dirname + '/build',
     publicPath: '/build/',
     filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
   },
   node: {
     // Don't define a polyfill on window.setImmediate

packages/react-devtools-inline/README.md

@@ -64,6 +64,23 @@ const DevTools = initialize(contentWindow);
 
 ## Examples
 
+### Supporting named hooks
+
+DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and infering the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
+
+To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
+```js
+// Follow code examples above to configure the backend and frontend.
+// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop.
+const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');
+
+// Render:
+<DevTools
+  hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
+  {...otherProps}
+/>;
+```
+
 ### Configuring a same-origin `iframe`
 
 The simplest way to use this package is to install the hook from the parent `window`. This is possible if the `iframe` is not sandboxed and there are no cross-origin restrictions.

packages/react-devtools-inline/hookNames.js

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

packages/react-devtools-inline/package.json

@@ -20,7 +20,10 @@
     "prepublish": "yarn run build",
     "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
   },
-  "dependencies": {},
+  "dependencies": {
+    "source-map-js": "^0.6.2",
+    "sourcemap-codec": "^1.4.8"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",

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

@@ -0,0 +1,9 @@
+/** @flow */
+
+import {
+  parseHookNames,
+  parseSourceAndMetadata,
+  purgeCachedMetadata,
+} from 'react-devtools-shared/src/hooks/parseHookNames';
+
+export {parseHookNames, parseSourceAndMetadata, purgeCachedMetadata};

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

@@ -37,10 +37,12 @@ module.exports = {
   entry: {
     backend: './src/backend.js',
     frontend: './src/frontend.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 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 consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js

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