Add named hooks support to react-devtools-inline

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

@@ -287,33 +287,31 @@ 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,
+              hookNamesModuleLoaderFunction,
               overrideTab,
-                  prefetchSourceFiles,
               profilerPortalContainer,
-                  purgeCachedHookNamesMetadata: purgeCachedMetadata,
               showTabBar: false,
               store,
               warnIfUnsupportedVersionDetected: true,
               viewAttributeSourceFunction,
               viewElementSourceFunction,
             }),
           );
-            },
-          );
         };
 
         render();

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;

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

@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
-
+export const enableNamedHooksFeature = true;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************

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

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

packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js

@@ -0,0 +1,18 @@
+/**
+ * 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 {createContext} from 'react';
+
+export type FetchFileWithCaching = (url: string) => Promise<string>;
+export type Context = FetchFileWithCaching | null;
+
+const FetchFileWithCachingContext = createContext<Context>(null);
+FetchFileWithCachingContext.displayName = 'FetchFileWithCachingContext';
+
+export default FetchFileWithCachingContext;

packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js

@@ -0,0 +1,22 @@
+/**
+ * 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 type {Thenable} from 'shared/ReactTypes';
+
+import {createContext} from 'react';
+import typeof * as ParseHookNamesModule from 'react-devtools-shared/src/hooks/parseHookNames';
+
+export type HookNamesModuleLoaderFunction = () => Thenable<ParseHookNamesModule>;
+export type Context = HookNamesModuleLoaderFunction | null;
+
+// TODO (Webpack 5) Hopefully we can remove this context entirely once the Webpack 5 upgrade is completed.
+const HookNamesModuleLoaderContext = createContext<Context>(null);
+HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
+
+export default HookNamesModuleLoaderContext;

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -30,8 +30,11 @@ import {
   hasAlreadyLoadedHookNames,
   loadHookNames,
 } from 'react-devtools-shared/src/hookNamesCache';
-import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
+import {loadModule} from 'react-devtools-shared/src/dynamicImportCache';
+import FetchFileWithCachingContext from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {SettingsContext} from '../Settings/SettingsContext';
+import {enableNamedHooksFeature} from 'react-devtools-feature-flags';
 
 import type {HookNames} from 'react-devtools-shared/src/types';
 import type {ReactNodeList} from 'shared/ReactTypes';
@@ -64,16 +67,17 @@ export type Props = {|
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
-  const {
-    fetchFileWithCaching,
-    loadHookNames: loadHookNamesFunction,
-    prefetchSourceFiles,
-    purgeCachedMetadata,
-  } = useContext(HookNamesContext);
+  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);
 
+  // parseHookNames has a lot of code.
+  // Embedding it into a build makes the build large.
+  // This function enables DevTools to make use of Suspense to lazily import() it only if the feature will be used.
+  // TODO (Webpack 5) Hopefully we can remove this indirection once the Webpack 5 upgrade is completed.
+  const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
+
   const refresh = useCacheRefresh();
 
   // Temporarily stores most recently-inspected (hydrated) path.
@@ -113,13 +117,26 @@ export function InspectedElementContextController({children}: Props) {
     setParseHookNames(parseHookNamesByDefault || alreadyLoadedHookNames);
   }
 
+  const purgeCachedMetadataRef = useRef(null);
+
   // Don't load a stale element from the backend; it wastes bridge bandwidth.
   let hookNames: HookNames | null = null;
   let inspectedElement = null;
   if (!elementHasChanged && element !== null) {
     inspectedElement = inspectElement(element, state.path, store, bridge);
 
+    if (enableNamedHooksFeature) {
+      if (typeof hookNamesModuleLoader === 'function') {
         if (parseHookNames || alreadyLoadedHookNames) {
+          const hookNamesModule = loadModule(hookNamesModuleLoader);
+          if (hookNamesModule !== null) {
+            const {
+              parseHookNames: loadHookNamesFunction,
+              purgeCachedMetadata,
+            } = hookNamesModule;
+
+            purgeCachedMetadataRef.current = purgeCachedMetadata;
+
             if (
               inspectedElement !== null &&
               inspectedElement.hooks !== null &&
@@ -134,6 +151,9 @@ export function InspectedElementContextController({children}: Props) {
             }
           }
         }
+      }
+    }
+  }
 
   const toggleParseHookNames: ToggleParseHookNames = useCallback<ToggleParseHookNames>(() => {
     startTransition(() => {
@@ -163,14 +183,11 @@ export function InspectedElementContextController({children}: Props) {
       inspectedElementRef.current !== inspectedElement
     ) {
       inspectedElementRef.current = inspectedElement;
-
-      if (typeof prefetchSourceFiles === 'function') {
-        prefetchSourceFiles(inspectedElement.hooks, fetchFileWithCaching);
-      }
     }
-  }, [inspectedElement, prefetchSourceFiles]);
+  }, [inspectedElement]);
 
   useEffect(() => {
+    const purgeCachedMetadata = purgeCachedMetadataRef.current;
     if (typeof purgeCachedMetadata === 'function') {
       // When Fast Refresh updates a component, any cached AST metadata may be invalid.
       const fastRefreshScheduled = () => {

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

@@ -22,8 +22,11 @@ import styles from './InspectedElementHooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
-import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
+import {
+  enableNamedHooksFeature,
+  enableProfilerChangedHookIndices,
+} from 'react-devtools-feature-flags';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -53,8 +56,6 @@ export function InspectedElementHooksTree({
 }: HooksTreeViewProps) {
   const {hooks, id} = inspectedElement;
 
-  const {loadHookNames: loadHookNamesFunction} = useContext(HookNamesContext);
-
   // Changing parseHookNames is done in a transition, because it suspends.
   // This value is done outside of the transition, so the UI toggle feels responsive.
   const [parseHookNamesOptimistic, setParseHookNamesOptimistic] = useState(
@@ -65,6 +66,8 @@ export function InspectedElementHooksTree({
     toggleParseHookNames();
   };
 
+  const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
+
   const hookParsingFailed = parseHookNames && hookNames === null;
 
   let toggleTitle;
@@ -85,7 +88,8 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {loadHookNamesFunction !== null &&
+          {enableNamedHooksFeature &&
+            typeof hookNamesModuleLoader === 'function' &&
             (!parseHookNames || hookParsingFailed) && (
               <Toggle
                 className={hookParsingFailed ? styles.ToggleError : null}