Skip to content

Commit 438d53f

Browse files
committed
[DevTools] find best renderer when inspecting
1 parent d300ceb commit 438d53f

File tree

6 files changed

+49
-14
lines changed

6 files changed

+49
-14
lines changed

packages/react-devtools-shared/src/backend/agent.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ import type {
3939
RendererInterface,
4040
} from './types';
4141
import type {ComponentFilter} from '../types';
42-
import {isSynchronousXHRSupported} from './utils';
42+
import {
43+
isSynchronousXHRSupported,
44+
getBestMatchingRendererInterface,
45+
} from './utils';
4346
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
4447

4548
const debug = (methodName, ...args) => {
@@ -310,20 +313,16 @@ export default class Agent extends EventEmitter<{|
310313
}
311314

312315
getIDForNode(node: Object): number | null {
316+
const renderers = [];
313317
for (const rendererID in this._rendererInterfaces) {
314318
const renderer = ((this._rendererInterfaces[
315319
(rendererID: any)
316320
]: 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);
327326
}
328327
return null;
329328
}

packages/react-devtools-shared/src/backend/legacy/renderer.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,6 +1084,11 @@ export function attach(
10841084

10851085
function unpatchConsoleForStrictMode() {}
10861086

1087+
function getFiberForNative() {
1088+
// Not implemented
1089+
return null;
1090+
}
1091+
10871092
return {
10881093
clearErrorsAndWarnings,
10891094
clearErrorsForFiberID,
@@ -1094,6 +1099,7 @@ export function attach(
10941099
flushInitialOperations,
10951100
getBestMatchForTrackedPath,
10961101
getDisplayNameForFiberID,
1102+
getFiberForNative,
10971103
getFiberIDForNative: getInternalIDForNative,
10981104
getInstanceAndStyle,
10991105
findNativeNodesForFiberID: (id: number) => {

packages/react-devtools-shared/src/backend/renderer.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2818,6 +2818,10 @@ export function attach(
28182818
return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
28192819
}
28202820

2821+
function getFiberForNative(hostInstance) {
2822+
return renderer.findFiberByHostInstance(hostInstance);
2823+
}
2824+
28212825
function getFiberIDForNative(
28222826
hostInstance,
28232827
findNearestUnfilteredAncestor = false,
@@ -4490,6 +4494,7 @@ export function attach(
44904494
flushInitialOperations,
44914495
getBestMatchForTrackedPath,
44924496
getDisplayNameForFiberID,
4497+
getFiberForNative,
44934498
getFiberIDForNative,
44944499
getInstanceAndStyle,
44954500
getOwnersList,

packages/react-devtools-shared/src/backend/types.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,7 @@ export type RendererInterface = {
350350
findNativeNodesForFiberID: FindNativeNodesForFiberID,
351351
flushInitialOperations: () => void,
352352
getBestMatchForTrackedPath: () => PathMatch | null,
353+
getFiberForNative: (hostInstance: NativeType) => ?Fiber,
353354
getFiberIDForNative: GetFiberIDForNative,
354355
getDisplayNameForFiberID: GetDisplayNameForFiberID,
355356
getInstanceAndStyle(id: number): InstanceAndStyle,

packages/react-devtools-shared/src/backend/utils.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import {copy} from 'clipboard-js';
1212
import {dehydrate} from '../hydration';
1313
import isArray from 'shared/isArray';
14+
import type {RendererInterface} from './types';
1415

1516
import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
1617

@@ -273,3 +274,23 @@ export function isSynchronousXHRSupported(): boolean {
273274
window.document.featurePolicy.allowsFeature('sync-xhr')
274275
);
275276
}
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+
}

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
11+
import {getBestMatchingRendererInterface} from '../../utils';
1112

1213
const assign = Object.assign;
1314

@@ -233,13 +234,15 @@ export default class Overlay {
233234
const hook: DevToolsHook =
234235
node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__;
235236
if (hook != null && hook.rendererInterfaces != null) {
237+
const rendererInterface = getBestMatchingRendererInterface(
238+
hook.rendererInterfaces.values(),
239+
node,
240+
);
236241
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) {
239243
const id = rendererInterface.getFiberIDForNative(node, true);
240244
if (id !== null) {
241245
ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
242-
break;
243246
}
244247
}
245248

0 commit comments

Comments
 (0)