@@ -33,7 +33,7 @@ import {
33
33
import { localStorageSetItem } from 'react-devtools-shared/src/storage' ;
34
34
35
35
import type { FrontendBridge } from 'react-devtools-shared/src/bridge' ;
36
- import type { InspectedElement } from 'react-devtools-shared/src/frontend /types' ;
36
+ import type { Source } from 'react-devtools-shared/src/shared /types' ;
37
37
38
38
installHook ( window ) ;
39
39
@@ -127,36 +127,55 @@ function reload() {
127
127
store : ( ( store : any ) : Store ) ,
128
128
warnIfLegacyBackendDetected : true ,
129
129
viewElementSourceFunction,
130
+ fetchFileWithCaching,
130
131
} ) ,
131
132
) ;
132
133
} , 100 ) ;
133
134
}
134
135
136
+ const resourceCache : Map < string , string > = new Map ( ) ;
137
+
138
+ // As a potential improvement, this should be done from the backend of RDT.
139
+ // Browser extension is doing this via exchanging messages
140
+ // between devtools_page and dedicated content script for it, see `fetchFileWithCaching.js`.
141
+ async function fetchFileWithCaching ( url : string ) {
142
+ if ( resourceCache . has ( url ) ) {
143
+ return Promise . resolve ( resourceCache . get ( url ) ) ;
144
+ }
145
+
146
+ return fetch ( url )
147
+ . then ( data => data . text ( ) )
148
+ . then ( content => {
149
+ resourceCache . set ( url , content ) ;
150
+
151
+ return content ;
152
+ } ) ;
153
+ }
154
+
135
155
function canViewElementSourceFunction (
136
- inspectedElement : InspectedElement ,
156
+ _source : Source ,
157
+ symbolicatedSource : Source | null ,
137
158
) : boolean {
138
- if (
139
- inspectedElement . canViewSource === false ||
140
- inspectedElement . source === null
141
- ) {
159
+ if ( symbolicatedSource == null ) {
142
160
return false ;
143
161
}
144
162
145
- const { source } = inspectedElement ;
146
-
147
- return doesFilePathExist ( source . sourceURL , projectRoots ) ;
163
+ return doesFilePathExist ( symbolicatedSource . sourceURL , projectRoots ) ;
148
164
}
149
165
150
166
function viewElementSourceFunction (
151
- id : number ,
152
- inspectedElement : InspectedElement ,
167
+ _source : Source ,
168
+ symbolicatedSource : Source | null ,
153
169
) : void {
154
- const { source } = inspectedElement ;
155
- if ( source !== null ) {
156
- launchEditor ( source . sourceURL , source . line , projectRoots ) ;
157
- } else {
158
- log . error ( 'Cannot inspect element' , id ) ;
170
+ if ( symbolicatedSource == null ) {
171
+ return ;
159
172
}
173
+
174
+ launchEditor (
175
+ symbolicatedSource . sourceURL ,
176
+ symbolicatedSource . line ,
177
+ projectRoots ,
178
+ ) ;
160
179
}
161
180
162
181
function onDisconnected ( ) {
0 commit comments