[DevTools] feat: propagate fetchFileWithCaching from initialization options for Fusebox (#34429)
Each integrator: browser extension, Chrome DevTools Frontend fork, Electron shell must define and provide `fetchFileWithCaching` in order for DevTools to be able to fetch application resources, such as scripts or source maps. More specifically, if this is available, React DevTools will be able to symbolicate source locations for component frames, owner stacks, "suspended by" Promises call frames. This will be available with the next release of React DevTools.
Ruslan Lesiutin committed
Sep 9, 2025 at 13:00 UTC
b2cff474722953ac6090898850025e41431276e4
2 files changed
+31
-13
packages/react-devtools-fusebox/src/frontend.d.ts
+27
-13
@@ -5,13 +5,19 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-export type MessagePayload = null | string | number | boolean | { [key: string]: MessagePayload } | MessagePayload[];
9
-export type Message = { event: string, payload?: MessagePayload };
8
+export type MessagePayload =
9
+ | null
10
+ | string
11
+ | number
12
+ | boolean
13
+ | {[key: string]: MessagePayload}
14
+ | MessagePayload[];
15
+export type Message = {event: string; payload?: MessagePayload};
16
17
export type WallListener = (message: Message) => void;
18
export type Wall = {
13
- listen: (fn: WallListener) => Function,
14
- send: (event: string, payload?: MessagePayload) => void,
19
+ listen: (fn: WallListener) => Function;
20
+ send: (event: string, payload?: MessagePayload) => void;
21
};
22
23
export type Bridge = {
@@ -22,7 +28,7 @@ export type Bridge = {
28
export type Store = Object;
29
export type BrowserTheme = 'dark' | 'light';
30
export type Config = {
25
- supportsReloadAndProfile?: boolean,
31
+ supportsReloadAndProfile?: boolean;
32
};
33
34
export function createBridge(wall: Wall): Bridge;
@@ -55,15 +61,23 @@ export type CanViewElementSource = (
61
source: ReactFunctionLocation | ReactCallSite,
62
symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
63
) => boolean;
64
+export type FetchFileWithCaching = (url: string) => Promise<string>;
65
66
export type InitializationOptions = {
60
- bridge: Bridge,
61
- store: Store,
62
- theme?: BrowserTheme,
63
- viewAttributeSourceFunction?: ViewAttributeSource,
64
- viewElementSourceFunction?: ViewElementSource,
65
- canViewElementSourceFunction?: CanViewElementSource,
67
+ bridge: Bridge;
68
+ store: Store;
69
+ theme?: BrowserTheme;
70
+ viewAttributeSourceFunction?: ViewAttributeSource;
71
+ viewElementSourceFunction?: ViewElementSource;
72
+ canViewElementSourceFunction?: CanViewElementSource;
73
+ fetchFileWithCaching?: FetchFileWithCaching;
74
};
75
68
-export function initializeComponents(node: Element | Document, options: InitializationOptions): void;
69
-export function initializeProfiler(node: Element | Document, options: InitializationOptions): void;
76
+export function initializeComponents(
77
+ node: Element | Document,
78
+ options: InitializationOptions,
79
+): void;
80
+export function initializeProfiler(
81
+ node: Element | Document,
82
+ options: InitializationOptions,
83
+): void;
packages/react-devtools-fusebox/src/frontend.js
+4
@@ -24,6 +24,7 @@ import type {
24
ViewAttributeSource,
25
ViewElementSource,
26
} from 'react-devtools-shared/src/devtools/views/DevTools';
27
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
28
import type {Config} from 'react-devtools-shared/src/devtools/store';
29
30
export function createBridge(wall?: Wall): FrontendBridge {
@@ -50,6 +51,7 @@ type InitializationOptions = {
51
viewAttributeSourceFunction?: ViewAttributeSource,
52
viewElementSourceFunction?: ViewElementSource,
53
canViewElementSourceFunction?: CanViewElementSource,
54
+ fetchFileWithCaching?: FetchFileWithCaching,
55
};
56
57
function initializeTab(
@@ -64,6 +66,7 @@ function initializeTab(
66
viewAttributeSourceFunction,
67
viewElementSourceFunction,
68
canViewElementSourceFunction,
69
+ fetchFileWithCaching,
70
} = options;
71
const root = createRoot(contentWindow);
72
@@ -79,6 +82,7 @@ function initializeTab(
82
viewAttributeSourceFunction={viewAttributeSourceFunction}
83
viewElementSourceFunction={viewElementSourceFunction}
84
canViewElementSourceFunction={canViewElementSourceFunction}
85
+ fetchFileWithCaching={fetchFileWithCaching}
86
/>,
87
);
88
}