Add named hooks support to react-devtools-inline (#22263)
This commit builds on PR #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 #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.
Brian Vaughn committed
Sep 9, 2021 at 15:25 UTC
225740be4864ee8eeb349b38b329291450245578
24 files changed
+415
-278
packages/react-devtools-extensions/src/main.js
+20
-22
@@ -287,32 +287,30 @@ function createPanelIfReactLoaded() {
287
};
288
}
289
290
+ // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
291
+ const hookNamesModuleLoaderFunction = () =>
292
+ import('react-devtools-inline/hookNames');
293
+
294
root = createRoot(document.createElement('div'));
295
296
render = (overrideTab = mostRecentOverrideTab) => {
297
mostRecentOverrideTab = overrideTab;
294
- import('react-devtools-shared/src/hooks/parseHookNames').then(
295
- ({parseHookNames, prefetchSourceFiles, purgeCachedMetadata}) => {
296
- root.render(
297
- createElement(DevTools, {
298
- bridge,
299
- browserTheme: getBrowserTheme(),
300
- componentsPortalContainer,
301
- enabledInspectedElementContextMenu: true,
302
- fetchFileWithCaching,
303
- loadHookNames: parseHookNames,
304
- overrideTab,
305
- prefetchSourceFiles,
306
- profilerPortalContainer,
307
- purgeCachedHookNamesMetadata: purgeCachedMetadata,
308
- showTabBar: false,
309
- store,
310
- warnIfUnsupportedVersionDetected: true,
311
- viewAttributeSourceFunction,
312
- viewElementSourceFunction,
313
- }),
314
- );
315
- },
298
+ root.render(
299
+ createElement(DevTools, {
300
+ bridge,
301
+ browserTheme: getBrowserTheme(),
302
+ componentsPortalContainer,
303
+ enabledInspectedElementContextMenu: true,
304
+ fetchFileWithCaching,
305
+ hookNamesModuleLoaderFunction,
306
+ overrideTab,
307
+ profilerPortalContainer,
308
+ showTabBar: false,
309
+ store,
310
+ warnIfUnsupportedVersionDetected: true,
311
+ viewAttributeSourceFunction,
312
+ viewElementSourceFunction,
313
+ }),
314
);
315
};
316
packages/react-devtools-extensions/webpack.config.js
+1
@@ -52,6 +52,7 @@ module.exports = {
52
path: __dirname + '/build',
53
publicPath: '/build/',
54
filename: '[name].js',
55
+ chunkFilename: '[name].chunk.js',
56
},
57
node: {
58
// Don't define a polyfill on window.setImmediate
packages/react-devtools-inline/README.md
+17
@@ -64,6 +64,23 @@ const DevTools = initialize(contentWindow);
64
65
## Examples
66
67
+### Supporting named hooks
68
+
69
+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.
70
+
71
+To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
72
+```js
73
+// Follow code examples above to configure the backend and frontend.
74
+// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop.
75
+const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');
76
+
77
+// Render:
78
+<DevTools
79
+ hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
80
+ {...otherProps}
81
+/>;
82
+```
83
+
84
### Configuring a same-origin `iframe`
85
86
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
new
+1
@@ -0,0 +1 @@
1
+module.exports = require('./dist/hookNames');
packages/react-devtools-inline/package.json
+4
-1
@@ -20,7 +20,10 @@
20
"prepublish": "yarn run build",
21
"start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
22
},
23
- "dependencies": {},
23
+ "dependencies": {
24
+ "source-map-js": "^0.6.2",
25
+ "sourcemap-codec": "^1.4.8"
26
+ },
27
"devDependencies": {
28
"@babel/core": "^7.11.1",
29
"@babel/plugin-proposal-class-properties": "^7.10.4",
packages/react-devtools-inline/src/hookNames.js
new
+9
@@ -0,0 +1,9 @@
1
+/** @flow */
2
+
3
+import {
4
+ parseHookNames,
5
+ parseSourceAndMetadata,
6
+ purgeCachedMetadata,
7
+} from 'react-devtools-shared/src/hooks/parseHookNames';
8
+
9
+export {parseHookNames, parseSourceAndMetadata, purgeCachedMetadata};
packages/react-devtools-inline/webpack.config.js
+2
@@ -37,10 +37,12 @@ module.exports = {
37
entry: {
38
backend: './src/backend.js',
39
frontend: './src/frontend.js',
40
+ hookNames: './src/hookNames.js',
41
},
42
output: {
43
path: __dirname + '/dist',
44
filename: '[name].js',
45
+ chunkFilename: '[name].chunk.js',
46
library: '[name]',
47
libraryTarget: 'commonjs2',
48
},
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+1
-1
@@ -15,7 +15,7 @@
15
16
export const enableProfilerChangedHookIndices = true;
17
export const isInternalFacebookBuild = true;
18
-
18
+export const enableNamedHooksFeature = false;
19
export const consoleManagedByDevToolsDuringStrictMode = false;
20
21
/************************************************************************
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+1
-1
@@ -15,7 +15,7 @@
15
16
export const enableProfilerChangedHookIndices = false;
17
export const isInternalFacebookBuild = false;
18
-
18
+export const enableNamedHooksFeature = false;
19
export const consoleManagedByDevToolsDuringStrictMode = false;
20
21
/************************************************************************
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+1
-1
@@ -15,5 +15,5 @@
15
16
export const enableProfilerChangedHookIndices = false;
17
export const isInternalFacebookBuild = false;
18
-
18
+export const enableNamedHooksFeature = true;
19
export const consoleManagedByDevToolsDuringStrictMode = true;
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+1
-1
@@ -15,7 +15,7 @@
15
16
export const enableProfilerChangedHookIndices = true;
17
export const isInternalFacebookBuild = true;
18
-
18
+export const enableNamedHooksFeature = true;
19
export const consoleManagedByDevToolsDuringStrictMode = true;
20
21
/************************************************************************
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+1
-1
@@ -15,7 +15,7 @@
15
16
export const enableProfilerChangedHookIndices = true;
17
export const isInternalFacebookBuild = false;
18
-
18
+export const enableNamedHooksFeature = true;
19
export const consoleManagedByDevToolsDuringStrictMode = true;
20
21
/************************************************************************
packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
new
+18
@@ -0,0 +1,18 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import {createContext} from 'react';
11
+
12
+export type FetchFileWithCaching = (url: string) => Promise<string>;
13
+export type Context = FetchFileWithCaching | null;
14
+
15
+const FetchFileWithCachingContext = createContext<Context>(null);
16
+FetchFileWithCachingContext.displayName = 'FetchFileWithCachingContext';
17
+
18
+export default FetchFileWithCachingContext;
packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
deleted
-26
@@ -1,26 +0,0 @@
1
-// @flow
2
-
3
-import {createContext} from 'react';
4
-import type {
5
- FetchFileWithCaching,
6
- LoadHookNamesFunction,
7
- PrefetchSourceFiles,
8
- PurgeCachedHookNamesMetadata,
9
-} from '../DevTools';
10
-
11
-export type Context = {
12
- fetchFileWithCaching: FetchFileWithCaching | null,
13
- loadHookNames: LoadHookNamesFunction | null,
14
- prefetchSourceFiles: PrefetchSourceFiles | null,
15
- purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,
16
-};
17
-
18
-const HookNamesContext = createContext<Context>({
19
- fetchFileWithCaching: null,
20
- loadHookNames: null,
21
- prefetchSourceFiles: null,
22
- purgeCachedMetadata: null,
23
-});
24
-HookNamesContext.displayName = 'HookNamesContext';
25
-
26
-export default HookNamesContext;
packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
new
+22
@@ -0,0 +1,22 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import type {Thenable} from 'shared/ReactTypes';
11
+
12
+import {createContext} from 'react';
13
+import typeof * as ParseHookNamesModule from 'react-devtools-shared/src/hooks/parseHookNames';
14
+
15
+export type HookNamesModuleLoaderFunction = () => Thenable<ParseHookNamesModule>;
16
+export type Context = HookNamesModuleLoaderFunction | null;
17
+
18
+// TODO (Webpack 5) Hopefully we can remove this context entirely once the Webpack 5 upgrade is completed.
19
+const HookNamesModuleLoaderContext = createContext<Context>(null);
20
+HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
21
+
22
+export default HookNamesModuleLoaderContext;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+41
-24
@@ -30,8 +30,11 @@ import {
30
hasAlreadyLoadedHookNames,
31
loadHookNames,
32
} from 'react-devtools-shared/src/hookNamesCache';
33
-import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
33
+import {loadModule} from 'react-devtools-shared/src/dynamicImportCache';
34
+import FetchFileWithCachingContext from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
35
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
36
import {SettingsContext} from '../Settings/SettingsContext';
37
+import {enableNamedHooksFeature} from 'react-devtools-feature-flags';
38
39
import type {HookNames} from 'react-devtools-shared/src/types';
40
import type {ReactNodeList} from 'shared/ReactTypes';
@@ -64,16 +67,17 @@ export type Props = {|
67
68
export function InspectedElementContextController({children}: Props) {
69
const {selectedElementID} = useContext(TreeStateContext);
67
- const {
68
- fetchFileWithCaching,
69
- loadHookNames: loadHookNamesFunction,
70
- prefetchSourceFiles,
71
- purgeCachedMetadata,
72
- } = useContext(HookNamesContext);
70
+ const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
71
const bridge = useContext(BridgeContext);
72
const store = useContext(StoreContext);
73
const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);
74
75
+ // parseHookNames has a lot of code.
76
+ // Embedding it into a build makes the build large.
77
+ // This function enables DevTools to make use of Suspense to lazily import() it only if the feature will be used.
78
+ // TODO (Webpack 5) Hopefully we can remove this indirection once the Webpack 5 upgrade is completed.
79
+ const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
80
+
81
const refresh = useCacheRefresh();
82
83
// Temporarily stores most recently-inspected (hydrated) path.
@@ -113,24 +117,40 @@ export function InspectedElementContextController({children}: Props) {
117
setParseHookNames(parseHookNamesByDefault || alreadyLoadedHookNames);
118
}
119
120
+ const purgeCachedMetadataRef = useRef(null);
121
+
122
// Don't load a stale element from the backend; it wastes bridge bandwidth.
123
let hookNames: HookNames | null = null;
124
let inspectedElement = null;
125
if (!elementHasChanged && element !== null) {
126
inspectedElement = inspectElement(element, state.path, store, bridge);
127
122
- if (parseHookNames || alreadyLoadedHookNames) {
123
- if (
124
- inspectedElement !== null &&
125
- inspectedElement.hooks !== null &&
126
- loadHookNamesFunction !== null
127
- ) {
128
- hookNames = loadHookNames(
129
- element,
130
- inspectedElement.hooks,
131
- loadHookNamesFunction,
132
- fetchFileWithCaching,
133
- );
128
+ if (enableNamedHooksFeature) {
129
+ if (typeof hookNamesModuleLoader === 'function') {
130
+ if (parseHookNames || alreadyLoadedHookNames) {
131
+ const hookNamesModule = loadModule(hookNamesModuleLoader);
132
+ if (hookNamesModule !== null) {
133
+ const {
134
+ parseHookNames: loadHookNamesFunction,
135
+ purgeCachedMetadata,
136
+ } = hookNamesModule;
137
+
138
+ purgeCachedMetadataRef.current = purgeCachedMetadata;
139
+
140
+ if (
141
+ inspectedElement !== null &&
142
+ inspectedElement.hooks !== null &&
143
+ loadHookNamesFunction !== null
144
+ ) {
145
+ hookNames = loadHookNames(
146
+ element,
147
+ inspectedElement.hooks,
148
+ loadHookNamesFunction,
149
+ fetchFileWithCaching,
150
+ );
151
+ }
152
+ }
153
+ }
154
}
155
}
156
}
@@ -163,14 +183,11 @@ export function InspectedElementContextController({children}: Props) {
183
inspectedElementRef.current !== inspectedElement
184
) {
185
inspectedElementRef.current = inspectedElement;
166
-
167
- if (typeof prefetchSourceFiles === 'function') {
168
- prefetchSourceFiles(inspectedElement.hooks, fetchFileWithCaching);
169
- }
186
}
171
- }, [inspectedElement, prefetchSourceFiles]);
187
+ }, [inspectedElement]);
188
189
useEffect(() => {
190
+ const purgeCachedMetadata = purgeCachedMetadataRef.current;
191
if (typeof purgeCachedMetadata === 'function') {
192
// When Fast Refresh updates a component, any cached AST metadata may be invalid.
193
const fastRefreshScheduled = () => {
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+9
-5
@@ -22,8 +22,11 @@ import styles from './InspectedElementHooksTree.css';
22
import useContextMenu from '../../ContextMenu/useContextMenu';
23
import {meta} from '../../../hydration';
24
import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
25
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
26
-import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
25
+import {
26
+ enableNamedHooksFeature,
27
+ enableProfilerChangedHookIndices,
28
+} from 'react-devtools-feature-flags';
29
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
30
31
import type {InspectedElement} from './types';
32
import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -53,8 +56,6 @@ export function InspectedElementHooksTree({
56
}: HooksTreeViewProps) {
57
const {hooks, id} = inspectedElement;
58
56
- const {loadHookNames: loadHookNamesFunction} = useContext(HookNamesContext);
57
-
59
// Changing parseHookNames is done in a transition, because it suspends.
60
// This value is done outside of the transition, so the UI toggle feels responsive.
61
const [parseHookNamesOptimistic, setParseHookNamesOptimistic] = useState(
@@ -65,6 +66,8 @@ export function InspectedElementHooksTree({
66
toggleParseHookNames();
67
};
68
69
+ const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
70
+
71
const hookParsingFailed = parseHookNames && hookNames === null;
72
73
let toggleTitle;
@@ -85,7 +88,8 @@ export function InspectedElementHooksTree({
88
<div className={styles.HooksTreeView}>
89
<div className={styles.HeaderRow}>
90
<div className={styles.Header}>hooks</div>
88
- {loadHookNamesFunction !== null &&
91
+ {enableNamedHooksFeature &&
92
+ typeof hookNamesModuleLoader === 'function' &&
93
(!parseHookNames || hookParsingFailed) && (
94
<Toggle
95
className={hookParsingFailed ? styles.ToggleError : null}
packages/react-devtools-shared/src/devtools/views/DevTools.js
+53
-76
@@ -27,7 +27,8 @@ import TabBar from './TabBar';
27
import {SettingsContextController} from './Settings/SettingsContext';
28
import {TreeContextController} from './Components/TreeContext';
29
import ViewElementSourceContext from './Components/ViewElementSourceContext';
30
-import HookNamesContext from './Components/HookNamesContext';
30
+import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
31
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
32
import {ProfilerContextController} from './Profiler/ProfilerContext';
33
import {SchedulingProfilerContextController} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
34
import {ModalDialogContextController} from './ModalDialog';
@@ -42,28 +43,18 @@ import styles from './DevTools.css';
43
44
import './root.css';
45
45
-import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
46
import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
47
+import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext';
48
+import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
49
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
48
-import type {HookNames} from 'react-devtools-shared/src/types';
49
-import type {Thenable} from '../cache';
50
51
export type BrowserTheme = 'dark' | 'light';
52
export type TabID = 'components' | 'profiler';
53
54
-export type FetchFileWithCaching = (url: string) => Promise<string>;
55
-export type PrefetchSourceFiles = (
56
- hooksTree: HooksTree,
57
- fetchFileWithCaching: FetchFileWithCaching | null,
58
-) => void;
54
export type ViewElementSource = (
55
id: number,
56
inspectedElement: InspectedElement,
57
) => void;
63
-export type LoadHookNamesFunction = (
64
- hooksTree: HooksTree,
65
-) => Thenable<HookNames>;
66
-export type PurgeCachedHookNamesMetadata = () => void;
58
export type ViewAttributeSource = (
59
id: number,
60
path: Array<string | number>,
@@ -107,9 +98,8 @@ export type Props = {|
98
// and extracts hook "names" based on the variables the hook return values get assigned to.
99
// Not every DevTools build can load source maps, so this property is optional.
100
fetchFileWithCaching?: ?FetchFileWithCaching,
110
- loadHookNames?: ?LoadHookNamesFunction,
111
- prefetchSourceFiles?: ?PrefetchSourceFiles,
112
- purgeCachedHookNamesMetadata?: ?PurgeCachedHookNamesMetadata,
101
+ // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
102
+ hookNamesModuleLoaderFunction?: ?HookNamesModuleLoaderFunction,
103
|};
104
105
const componentsTab = {
@@ -135,11 +125,9 @@ export default function DevTools({
125
defaultTab = 'components',
126
enabledInspectedElementContextMenu = false,
127
fetchFileWithCaching,
138
- loadHookNames,
128
+ hookNamesModuleLoaderFunction,
129
overrideTab,
130
profilerPortalContainer,
141
- prefetchSourceFiles,
142
- purgeCachedHookNamesMetadata,
131
showTabBar = false,
132
store,
133
warnIfLegacyBackendDetected = false,
@@ -199,21 +187,6 @@ export default function DevTools({
187
[enabledInspectedElementContextMenu, viewAttributeSourceFunction],
188
);
189
202
- const hookNamesContext = useMemo(
203
- () => ({
204
- fetchFileWithCaching: fetchFileWithCaching || null,
205
- loadHookNames: loadHookNames || null,
206
- prefetchSourceFiles: prefetchSourceFiles || null,
207
- purgeCachedMetadata: purgeCachedHookNamesMetadata || null,
208
- }),
209
- [
210
- fetchFileWithCaching,
211
- loadHookNames,
212
- prefetchSourceFiles,
213
- purgeCachedHookNamesMetadata,
214
- ],
215
- );
216
-
190
const devToolsRef = useRef<HTMLElement | null>(null);
191
192
useEffect(() => {
@@ -270,51 +243,55 @@ export default function DevTools({
243
componentsPortalContainer={componentsPortalContainer}
244
profilerPortalContainer={profilerPortalContainer}>
245
<ViewElementSourceContext.Provider value={viewElementSource}>
273
- <HookNamesContext.Provider value={hookNamesContext}>
274
- <TreeContextController>
275
- <ProfilerContextController>
276
- <SchedulingProfilerContextController>
277
- <ThemeProvider>
278
- <div
279
- className={styles.DevTools}
280
- ref={devToolsRef}
281
- data-react-devtools-portal-root={true}>
282
- {showTabBar && (
283
- <div className={styles.TabBar}>
284
- <ReactLogo />
285
- <span className={styles.DevToolsVersion}>
286
- {process.env.DEVTOOLS_VERSION}
287
- </span>
288
- <div className={styles.Spacer} />
289
- <TabBar
290
- currentTab={tab}
291
- id="DevTools"
292
- selectTab={setTab}
293
- tabs={tabs}
294
- type="navigation"
246
+ <HookNamesModuleLoaderContext.Provider
247
+ value={hookNamesModuleLoaderFunction || null}>
248
+ <FetchFileWithCachingContext.Provider
249
+ value={fetchFileWithCaching || null}>
250
+ <TreeContextController>
251
+ <ProfilerContextController>
252
+ <SchedulingProfilerContextController>
253
+ <ThemeProvider>
254
+ <div
255
+ className={styles.DevTools}
256
+ ref={devToolsRef}
257
+ data-react-devtools-portal-root={true}>
258
+ {showTabBar && (
259
+ <div className={styles.TabBar}>
260
+ <ReactLogo />
261
+ <span className={styles.DevToolsVersion}>
262
+ {process.env.DEVTOOLS_VERSION}
263
+ </span>
264
+ <div className={styles.Spacer} />
265
+ <TabBar
266
+ currentTab={tab}
267
+ id="DevTools"
268
+ selectTab={setTab}
269
+ tabs={tabs}
270
+ type="navigation"
271
+ />
272
+ </div>
273
+ )}
274
+ <div
275
+ className={styles.TabContent}
276
+ hidden={tab !== 'components'}>
277
+ <Components
278
+ portalContainer={componentsPortalContainer}
279
+ />
280
+ </div>
281
+ <div
282
+ className={styles.TabContent}
283
+ hidden={tab !== 'profiler'}>
284
+ <Profiler
285
+ portalContainer={profilerPortalContainer}
286
/>
287
</div>
297
- )}
298
- <div
299
- className={styles.TabContent}
300
- hidden={tab !== 'components'}>
301
- <Components
302
- portalContainer={componentsPortalContainer}
303
- />
304
- </div>
305
- <div
306
- className={styles.TabContent}
307
- hidden={tab !== 'profiler'}>
308
- <Profiler
309
- portalContainer={profilerPortalContainer}
310
- />
288
</div>
312
- </div>
313
- </ThemeProvider>
314
- </SchedulingProfilerContextController>
315
- </ProfilerContextController>
316
- </TreeContextController>
317
- </HookNamesContext.Provider>
289
+ </ThemeProvider>
290
+ </SchedulingProfilerContextController>
291
+ </ProfilerContextController>
292
+ </TreeContextController>
293
+ </FetchFileWithCachingContext.Provider>
294
+ </HookNamesModuleLoaderContext.Provider>
295
</ViewElementSourceContext.Provider>
296
</SettingsContextController>
297
<UnsupportedBridgeProtocolDialog />
packages/react-devtools-shared/src/dynamicImportCache.js
new
+159
@@ -0,0 +1,159 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
11
+
12
+import type {Thenable, Wakeable} from 'shared/ReactTypes';
13
+
14
+const TIMEOUT = 30000;
15
+
16
+const Pending = 0;
17
+const Resolved = 1;
18
+const Rejected = 2;
19
+
20
+type PendingRecord = {|
21
+ status: 0,
22
+ value: Wakeable,
23
+|};
24
+
25
+type ResolvedRecord<T> = {|
26
+ status: 1,
27
+ value: T,
28
+|};
29
+
30
+type RejectedRecord = {|
31
+ status: 2,
32
+ value: null,
33
+|};
34
+
35
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
36
+
37
+type Module = any;
38
+type ModuleLoaderFunction = () => Thenable<Module>;
39
+
40
+// This is intentionally a module-level Map, rather than a React-managed one.
41
+// Otherwise, refreshing the inspected element cache would also clear this cache.
42
+// Modules are static anyway.
43
+const moduleLoaderFunctionToModuleMap: Map<
44
+ ModuleLoaderFunction,
45
+ Module,
46
+> = new Map();
47
+
48
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
49
+ if (record.status === Resolved) {
50
+ // This is just a type refinement.
51
+ return record;
52
+ } else if (record.status === Rejected) {
53
+ // This is just a type refinement.
54
+ return record;
55
+ } else {
56
+ throw record.value;
57
+ }
58
+}
59
+
60
+// TODO Flow type
61
+export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
62
+ let record = moduleLoaderFunctionToModuleMap.get(moduleLoaderFunction);
63
+
64
+ if (__DEBUG__) {
65
+ console.log(
66
+ `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}")`,
67
+ );
68
+ }
69
+
70
+ if (!record) {
71
+ const callbacks = new Set();
72
+ const wakeable: Wakeable = {
73
+ then(callback) {
74
+ callbacks.add(callback);
75
+ },
76
+ };
77
+
78
+ const wake = () => {
79
+ if (timeoutID) {
80
+ clearTimeout(timeoutID);
81
+ timeoutID = null;
82
+ }
83
+
84
+ // This assumes they won't throw.
85
+ callbacks.forEach(callback => callback());
86
+ callbacks.clear();
87
+ };
88
+
89
+ const newRecord: Record<Module> = (record = {
90
+ status: Pending,
91
+ value: wakeable,
92
+ });
93
+
94
+ let didTimeout = false;
95
+
96
+ moduleLoaderFunction().then(
97
+ module => {
98
+ if (__DEBUG__) {
99
+ console.log(
100
+ `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") then()`,
101
+ );
102
+ }
103
+
104
+ if (didTimeout) {
105
+ return;
106
+ }
107
+
108
+ const resolvedRecord = ((newRecord: any): ResolvedRecord<Module>);
109
+ resolvedRecord.status = Resolved;
110
+ resolvedRecord.value = module;
111
+
112
+ wake();
113
+ },
114
+ error => {
115
+ if (__DEBUG__) {
116
+ console.log(
117
+ `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") catch()`,
118
+ );
119
+ }
120
+
121
+ if (didTimeout) {
122
+ return;
123
+ }
124
+
125
+ console.log(error);
126
+
127
+ const thrownRecord = ((newRecord: any): RejectedRecord);
128
+ thrownRecord.status = Rejected;
129
+ thrownRecord.value = null;
130
+
131
+ wake();
132
+ },
133
+ );
134
+
135
+ // Eventually timeout and stop trying to load the module.
136
+ let timeoutID = setTimeout(function onTimeout() {
137
+ if (__DEBUG__) {
138
+ console.log(
139
+ `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") onTimeout()`,
140
+ );
141
+ }
142
+
143
+ timeoutID = null;
144
+
145
+ didTimeout = true;
146
+
147
+ const timedoutRecord = ((newRecord: any): RejectedRecord);
148
+ timedoutRecord.status = Rejected;
149
+ timedoutRecord.value = null;
150
+
151
+ wake();
152
+ }, TIMEOUT);
153
+
154
+ moduleLoaderFunctionToModuleMap.set(moduleLoaderFunction, record);
155
+ }
156
+
157
+ const response = readRecord(record).value;
158
+ return response;
159
+}
packages/react-devtools-shared/src/hookNamesCache.js
+1
-1
@@ -17,7 +17,7 @@ import type {
17
HookSourceLocationKey,
18
} from 'react-devtools-shared/src/types';
19
import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
20
-import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
20
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
21
22
const TIMEOUT = 30000;
23
packages/react-devtools-shared/src/hooks/parseHookNames/index.js
+2
-8
@@ -10,21 +10,15 @@
10
import type {HookSourceAndMetadata} from './loadSourceAndMetadata';
11
import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
12
import type {HookNames} from 'react-devtools-shared/src/types';
13
-import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
13
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
14
15
import {withAsyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
16
import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
17
import typeof * as ParseSourceAndMetadataModule from './parseSourceAndMetadata';
18
-import {
19
- flattenHooksList,
20
- loadSourceAndMetadata,
21
- prefetchSourceFiles,
22
-} from './loadSourceAndMetadata';
18
+import {flattenHooksList, loadSourceAndMetadata} from './loadSourceAndMetadata';
19
20
const workerizedParseHookNames: ParseSourceAndMetadataModule = WorkerizedParseSourceAndMetadata();
21
26
-export {prefetchSourceFiles};
27
-
22
export function parseSourceAndMetadata(
23
hooksList: Array<HooksNode>,
24
locationKeyToHookSourceAndMetadata: Map<string, HookSourceAndMetadata>,
packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
+37
-109
@@ -45,7 +45,6 @@
45
// This is the fastest option since our custom metadata file is much smaller than a full source map,
46
// and there is no need to convert runtime code to the original source.
47
48
-import LRU from 'lru-cache';
48
import {__DEBUG__} from 'react-devtools-shared/src/constants';
49
import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
50
import {sourceMapIncludesSource} from '../SourceMapUtils';
@@ -55,14 +54,13 @@ import {
54
withSyncPerformanceMark,
55
} from 'react-devtools-shared/src/PerformanceMarks';
56
58
-import type {LRUCache} from 'react-devtools-shared/src/types';
57
import type {
58
HooksNode,
59
HookSource,
60
HooksTree,
61
} from 'react-debug-tools/src/ReactDebugHooks';
62
import type {MixedSourceMap} from '../SourceMapTypes';
65
-import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
63
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
64
65
// Prefer a cached albeit stale response to reduce download time.
66
// We wouldn't want to load/parse a newer version of the source (even if one existed).
@@ -70,14 +68,6 @@ const FETCH_OPTIONS = {cache: 'force-cache'};
68
69
const MAX_SOURCE_LENGTH = 100_000_000;
70
73
-// Fetch requests originated from an extension might not have origin headers
74
-// which may prevent subsequent requests from using cached responses
75
-// if the server returns a Vary: 'Origin' header
76
-// so this cache will temporarily store pre-fetches sources in memory.
77
-const prefetchedSources: LRUCache<string, string> = new LRU({
78
- max: 15,
79
-});
80
-
71
export type HookSourceAndMetadata = {|
72
// Generated by react-debug-tools.
73
hookSource: HookSource,
@@ -477,109 +467,47 @@ function loadSourceFiles(
467
locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
468
const {runtimeSourceURL} = hookSourceAndMetadata;
469
480
- const prefetchedSourceCode = prefetchedSources.get(runtimeSourceURL);
481
- if (prefetchedSourceCode != null) {
482
- hookSourceAndMetadata.runtimeSourceCode = prefetchedSourceCode;
483
- } else {
484
- let fetchFileFunction = fetchFile;
485
- if (fetchFileWithCaching != null) {
486
- // If a helper function has been injected to fetch with caching,
487
- // use it to fetch the (already loaded) source file.
488
- fetchFileFunction = url => {
489
- return withAsyncPerformanceMark(
490
- `fetchFileWithCaching("${url}")`,
491
- () => {
492
- return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
493
- },
494
- );
495
- };
496
- }
470
+ let fetchFileFunction = fetchFile;
471
+ if (fetchFileWithCaching != null) {
472
+ // If a helper function has been injected to fetch with caching,
473
+ // use it to fetch the (already loaded) source file.
474
+ fetchFileFunction = url => {
475
+ return withAsyncPerformanceMark(
476
+ `fetchFileWithCaching("${url}")`,
477
+ () => {
478
+ return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
479
+ },
480
+ );
481
+ };
482
+ }
483
498
- const fetchPromise =
499
- dedupedFetchPromises.get(runtimeSourceURL) ||
500
- fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => {
501
- // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps,
502
- // because then we need to parse the full source file as an AST.
503
- if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
504
- throw Error('Source code too large to parse');
505
- }
484
+ const fetchPromise =
485
+ dedupedFetchPromises.get(runtimeSourceURL) ||
486
+ fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => {
487
+ // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps,
488
+ // because then we need to parse the full source file as an AST.
489
+ if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
490
+ throw Error('Source code too large to parse');
491
+ }
492
507
- if (__DEBUG__) {
508
- console.groupCollapsed(
509
- `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
510
- );
511
- console.log(runtimeSourceCode);
512
- console.groupEnd();
513
- }
493
+ if (__DEBUG__) {
494
+ console.groupCollapsed(
495
+ `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
496
+ );
497
+ console.log(runtimeSourceCode);
498
+ console.groupEnd();
499
+ }
500
515
- return runtimeSourceCode;
516
- });
517
- dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);
501
+ return runtimeSourceCode;
502
+ });
503
+ dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);
504
519
- setterPromises.push(
520
- fetchPromise.then(runtimeSourceCode => {
521
- hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
522
- }),
523
- );
524
- }
505
+ setterPromises.push(
506
+ fetchPromise.then(runtimeSourceCode => {
507
+ hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
508
+ }),
509
+ );
510
});
511
512
return Promise.all(setterPromises);
513
}
529
-
530
-export function prefetchSourceFiles(
531
- hooksTree: HooksTree,
532
- fetchFileWithCaching: FetchFileWithCaching | null,
533
-): void {
534
- // Deduplicate fetches, since there can be multiple location keys per source map.
535
- const dedupedFetchPromises = new Set();
536
-
537
- let fetchFileFunction = null;
538
- if (fetchFileWithCaching != null) {
539
- // If a helper function has been injected to fetch with caching,
540
- // use it to fetch the (already loaded) source file.
541
- fetchFileFunction = url => {
542
- return withAsyncPerformanceMark(
543
- `[pre] fetchFileWithCaching("${url}")`,
544
- () => {
545
- return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
546
- },
547
- );
548
- };
549
- } else {
550
- fetchFileFunction = url => fetchFile(url, '[pre] fetchFile');
551
- }
552
-
553
- const hooksQueue = Array.from(hooksTree);
554
-
555
- for (let i = 0; i < hooksQueue.length; i++) {
556
- const hook = hooksQueue.pop();
557
- if (isUnnamedBuiltInHook(hook)) {
558
- continue;
559
- }
560
-
561
- const hookSource = hook.hookSource;
562
- if (hookSource == null) {
563
- continue;
564
- }
565
-
566
- const runtimeSourceURL = ((hookSource.fileName: any): string);
567
-
568
- if (prefetchedSources.has(runtimeSourceURL)) {
569
- // If we've already fetched this source, skip it.
570
- continue;
571
- }
572
-
573
- if (!dedupedFetchPromises.has(runtimeSourceURL)) {
574
- dedupedFetchPromises.add(runtimeSourceURL);
575
-
576
- fetchFileFunction(runtimeSourceURL).then(text => {
577
- prefetchedSources.set(runtimeSourceURL, text);
578
- });
579
- }
580
-
581
- if (hook.subHooks.length > 0) {
582
- hooksQueue.push(...hook.subHooks);
583
- }
584
- }
585
-}
packages/react-devtools-shell/src/devtools.js
+11
@@ -10,6 +10,11 @@ import {
10
import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
11
import {initDevTools} from 'react-devtools-shared/src/devtools';
12
13
+// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
14
+// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
15
+// $FlowFixMe
16
+__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
17
+
18
const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
19
20
const {contentDocument, contentWindow} = iframe;
@@ -50,6 +55,11 @@ mountButton.addEventListener('click', function() {
55
}
56
});
57
58
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
59
+function hookNamesModuleLoaderFunction() {
60
+ return import('react-devtools-inline/hookNames');
61
+}
62
+
63
inject('dist/app.js', () => {
64
initDevTools({
65
connect(cb) {
@@ -58,6 +68,7 @@ inject('dist/app.js', () => {
68
createElement(DevTools, {
69
browserTheme: 'light',
70
enabledInspectedElementContextMenu: true,
71
+ hookNamesModuleLoaderFunction,
72
showTabBar: true,
73
warnIfLegacyBackendDetected: true,
74
warnIfUnsupportedVersionDetected: true,
packages/react-devtools-shell/webpack.config.js
+3
-1
@@ -32,7 +32,7 @@ const DEVTOOLS_VERSION = getVersionString();
32
33
const config = {
34
mode: __DEV__ ? 'development' : 'production',
35
- devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
35
+ devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
36
entry: {
37
app: './src/app/index.js',
38
devtools: './src/devtools.js',
@@ -108,6 +108,7 @@ const config = {
108
};
109
110
if (TARGET === 'local') {
111
+ // Local dev server build.
112
config.devServer = {
113
hot: true,
114
port: 8080,
@@ -116,6 +117,7 @@ if (TARGET === 'local') {
117
stats: 'errors-only',
118
};
119
} else {
120
+ // Static build to deploy somewhere else.
121
config.output = {
122
path: resolve(__dirname, 'dist'),
123
filename: '[name].js',