File tree Expand file tree Collapse file tree 6 files changed +49
-14
lines changed
packages/react-devtools-shared/src/backend Expand file tree Collapse file tree 6 files changed +49
-14
lines changed Original file line number Diff line number Diff line change @@ -39,7 +39,10 @@ import type {
39
39
RendererInterface ,
40
40
} from './types' ;
41
41
import type { ComponentFilter } from '../types' ;
42
- import { isSynchronousXHRSupported } from './utils' ;
42
+ import {
43
+ isSynchronousXHRSupported ,
44
+ getBestMatchingRendererInterface ,
45
+ } from './utils' ;
43
46
import type { BrowserTheme } from 'react-devtools-shared/src/devtools/views/DevTools' ;
44
47
45
48
const debug = ( methodName , ...args ) => {
@@ -310,20 +313,16 @@ export default class Agent extends EventEmitter<{|
310
313
}
311
314
312
315
getIDForNode ( node : Object ) : number | null {
316
+ const renderers = [ ] ;
313
317
for ( const rendererID in this . _rendererInterfaces ) {
314
318
const renderer = ( ( this . _rendererInterfaces [
315
319
( rendererID : any )
316
320
] : any ) : RendererInterface ) ;
317
-
318
- try {
319
- const id = renderer . getFiberIDForNative ( node , true ) ;
320
- if ( id !== null ) {
321
- return id ;
322
- }
323
- } catch ( error ) {
324
- // Some old React versions might throw if they can't find a match.
325
- // If so we should ignore it...
326
- }
321
+ renderers . push ( renderer ) ;
322
+ }
323
+ const rendererInterface = getBestMatchingRendererInterface ( renderers , node ) ;
324
+ if ( rendererInterface != null ) {
325
+ return rendererInterface . getFiberIDForNative ( node , true ) ;
327
326
}
328
327
return null ;
329
328
}
Original file line number Diff line number Diff line change @@ -1084,6 +1084,11 @@ export function attach(
1084
1084
1085
1085
function unpatchConsoleForStrictMode() { }
1086
1086
1087
+ function getFiberForNative() {
1088
+ // Not implemented
1089
+ return null ;
1090
+ }
1091
+
1087
1092
return {
1088
1093
clearErrorsAndWarnings ,
1089
1094
clearErrorsForFiberID ,
@@ -1094,6 +1099,7 @@ export function attach(
1094
1099
flushInitialOperations ,
1095
1100
getBestMatchForTrackedPath ,
1096
1101
getDisplayNameForFiberID ,
1102
+ getFiberForNative ,
1097
1103
getFiberIDForNative : getInternalIDForNative ,
1098
1104
getInstanceAndStyle ,
1099
1105
findNativeNodesForFiberID : ( id : number ) => {
Original file line number Diff line number Diff line change @@ -2818,6 +2818,10 @@ export function attach(
2818
2818
return fiber != null ? getDisplayNameForFiber ( ( ( fiber : any ) : Fiber ) ) : null ;
2819
2819
}
2820
2820
2821
+ function getFiberForNative(hostInstance) {
2822
+ return renderer . findFiberByHostInstance ( hostInstance ) ;
2823
+ }
2824
+
2821
2825
function getFiberIDForNative(
2822
2826
hostInstance,
2823
2827
findNearestUnfilteredAncestor = false,
@@ -4490,6 +4494,7 @@ export function attach(
4490
4494
flushInitialOperations ,
4491
4495
getBestMatchForTrackedPath ,
4492
4496
getDisplayNameForFiberID ,
4497
+ getFiberForNative ,
4493
4498
getFiberIDForNative ,
4494
4499
getInstanceAndStyle ,
4495
4500
getOwnersList ,
Original file line number Diff line number Diff line change @@ -350,6 +350,7 @@ export type RendererInterface = {
350
350
findNativeNodesForFiberID : FindNativeNodesForFiberID ,
351
351
flushInitialOperations : ( ) = > void ,
352
352
getBestMatchForTrackedPath : ( ) = > PathMatch | null ,
353
+ getFiberForNative : ( hostInstance : NativeType ) = > ?Fiber ,
353
354
getFiberIDForNative : GetFiberIDForNative ,
354
355
getDisplayNameForFiberID : GetDisplayNameForFiberID ,
355
356
getInstanceAndStyle ( id : number ) : InstanceAndStyle ,
Original file line number Diff line number Diff line change 11
11
import { copy } from 'clipboard-js' ;
12
12
import { dehydrate } from '../hydration' ;
13
13
import isArray from 'shared/isArray' ;
14
+ import type { RendererInterface } from './types' ;
14
15
15
16
import type { DehydratedData } from 'react-devtools-shared/src/devtools/views/Components/types' ;
16
17
@@ -273,3 +274,23 @@ export function isSynchronousXHRSupported(): boolean {
273
274
window . document . featurePolicy . allowsFeature ( 'sync-xhr' )
274
275
) ;
275
276
}
277
+
278
+ export function getBestMatchingRendererInterface (
279
+ rendererInterfaces : Iterable < RendererInterface > ,
280
+ node : Object ,
281
+ ) : RendererInterface | null {
282
+ let bestMatch = null ;
283
+ for ( const renderer of rendererInterfaces ) {
284
+ const fiber = renderer . getFiberForNative ( node ) ;
285
+ if ( fiber != null ) {
286
+ // check if fiber.stateNode is matching the original hostInstance
287
+ if ( fiber . stateNode === node ) {
288
+ return renderer ;
289
+ } else {
290
+ bestMatch = renderer ;
291
+ }
292
+ }
293
+ }
294
+ // if an exact match is not found, return the best match as fallback
295
+ return bestMatch ;
296
+ }
Original file line number Diff line number Diff line change 8
8
*/
9
9
10
10
import { getElementDimensions , getNestedBoundingClientRect } from '../utils' ;
11
+ import { getBestMatchingRendererInterface } from '../../utils' ;
11
12
12
13
const assign = Object . assign ;
13
14
@@ -233,13 +234,15 @@ export default class Overlay {
233
234
const hook : DevToolsHook =
234
235
node . ownerDocument . defaultView . __REACT_DEVTOOLS_GLOBAL_HOOK__ ;
235
236
if ( hook != null && hook . rendererInterfaces != null ) {
237
+ const rendererInterface = getBestMatchingRendererInterface (
238
+ hook . rendererInterfaces . values ( ) ,
239
+ node ,
240
+ ) ;
236
241
let ownerName = null ;
237
- // eslint-disable-next-line no-for-of-loops/no-for-of-loops
238
- for ( const rendererInterface of hook . rendererInterfaces . values ( ) ) {
242
+ if ( rendererInterface !== null ) {
239
243
const id = rendererInterface . getFiberIDForNative ( node , true ) ;
240
244
if ( id !== null ) {
241
245
ownerName = rendererInterface . getDisplayNameForFiberID ( id , true ) ;
242
- break ;
243
246
}
244
247
}
245
248
You can’t perform that action at this time.
0 commit comments