Skip to content

Commit 2ec16d4

Browse files
sebmarkbagesebmarkbage
committed
Rename getNearestMountedHostInstance to getNearestMountedDOMNode
This conflict resolution is really only relevant to DOM renderers since there's generally multiple of them per tree and this resolution is only active for those anyway. Making this clear means we can change the implementation details.
1 parent 8619997 commit 2ec16d4

File tree

4 files changed

+118
-82
lines changed

4 files changed

+118
-82
lines changed

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

Lines changed: 102 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -341,84 +341,123 @@ export default class Agent extends EventEmitter<{
341341
}
342342

343343
getIDForHostInstance(target: HostInstance): number | null {
344-
let bestMatch: null | HostInstance = null;
345-
let bestRenderer: null | RendererInterface = null;
346-
// Find the nearest ancestor which is mounted by a React.
347-
for (const rendererID in this._rendererInterfaces) {
348-
const renderer = ((this._rendererInterfaces[
349-
(rendererID: any)
350-
]: any): RendererInterface);
351-
const nearestNode: null = renderer.getNearestMountedHostInstance(target);
352-
if (nearestNode !== null) {
353-
if (nearestNode === target) {
354-
// Exact match we can exit early.
355-
bestMatch = nearestNode;
356-
bestRenderer = renderer;
357-
break;
344+
if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
345+
// In React Native or non-DOM we simply pick any renderer that has a match.
346+
for (const rendererID in this._rendererInterfaces) {
347+
const renderer = ((this._rendererInterfaces[
348+
(rendererID: any)
349+
]: any): RendererInterface);
350+
try {
351+
const match = renderer.getElementIDForHostInstance(target);
352+
if (match != null) {
353+
return match;
354+
}
355+
} catch (error) {
356+
// Some old React versions might throw if they can't find a match.
357+
// If so we should ignore it...
358358
}
359-
if (
360-
bestMatch === null ||
361-
(!isReactNativeEnvironment() && bestMatch.contains(nearestNode))
362-
) {
363-
// If this is the first match or the previous match contains the new match,
364-
// so the new match is a deeper and therefore better match.
365-
bestMatch = nearestNode;
366-
bestRenderer = renderer;
359+
}
360+
return null;
361+
} else {
362+
// In the DOM we use a smarter mechanism to find the deepest a DOM node
363+
// that is registered if there isn't an exact match.
364+
let bestMatch: null | Element = null;
365+
let bestRenderer: null | RendererInterface = null;
366+
// Find the nearest ancestor which is mounted by a React.
367+
for (const rendererID in this._rendererInterfaces) {
368+
const renderer = ((this._rendererInterfaces[
369+
(rendererID: any)
370+
]: any): RendererInterface);
371+
const nearestNode: null | Element = renderer.getNearestMountedDOMNode(
372+
(target: any),
373+
);
374+
if (nearestNode !== null) {
375+
if (nearestNode === target) {
376+
// Exact match we can exit early.
377+
bestMatch = nearestNode;
378+
bestRenderer = renderer;
379+
break;
380+
}
381+
if (bestMatch === null || bestMatch.contains(nearestNode)) {
382+
// If this is the first match or the previous match contains the new match,
383+
// so the new match is a deeper and therefore better match.
384+
bestMatch = nearestNode;
385+
bestRenderer = renderer;
386+
}
367387
}
368388
}
369-
}
370-
if (bestRenderer != null && bestMatch != null) {
371-
try {
372-
return bestRenderer.getElementIDForHostInstance(bestMatch, true);
373-
} catch (error) {
374-
// Some old React versions might throw if they can't find a match.
375-
// If so we should ignore it...
389+
if (bestRenderer != null && bestMatch != null) {
390+
try {
391+
return bestRenderer.getElementIDForHostInstance(bestMatch);
392+
} catch (error) {
393+
// Some old React versions might throw if they can't find a match.
394+
// If so we should ignore it...
395+
}
376396
}
397+
return null;
377398
}
378-
return null;
379399
}
380400

381401
getComponentNameForHostInstance(target: HostInstance): string | null {
382402
// We duplicate this code from getIDForHostInstance to avoid an object allocation.
383-
let bestMatch: null | HostInstance = null;
384-
let bestRenderer: null | RendererInterface = null;
385-
// Find the nearest ancestor which is mounted by a React.
386-
for (const rendererID in this._rendererInterfaces) {
387-
const renderer = ((this._rendererInterfaces[
388-
(rendererID: any)
389-
]: any): RendererInterface);
390-
const nearestNode = renderer.getNearestMountedHostInstance(target);
391-
if (nearestNode !== null) {
392-
if (nearestNode === target) {
393-
// Exact match we can exit early.
394-
bestMatch = nearestNode;
395-
bestRenderer = renderer;
396-
break;
403+
if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
404+
// In React Native or non-DOM we simply pick any renderer that has a match.
405+
for (const rendererID in this._rendererInterfaces) {
406+
const renderer = ((this._rendererInterfaces[
407+
(rendererID: any)
408+
]: any): RendererInterface);
409+
try {
410+
const id = renderer.getElementIDForHostInstance(target);
411+
if (id) {
412+
return renderer.getDisplayNameForElementID(id);
413+
}
414+
} catch (error) {
415+
// Some old React versions might throw if they can't find a match.
416+
// If so we should ignore it...
397417
}
398-
if (
399-
bestMatch === null ||
400-
(!isReactNativeEnvironment() && bestMatch.contains(nearestNode))
401-
) {
402-
// If this is the first match or the previous match contains the new match,
403-
// so the new match is a deeper and therefore better match.
404-
bestMatch = nearestNode;
405-
bestRenderer = renderer;
418+
}
419+
return null;
420+
} else {
421+
// In the DOM we use a smarter mechanism to find the deepest a DOM node
422+
// that is registered if there isn't an exact match.
423+
let bestMatch: null | Element = null;
424+
let bestRenderer: null | RendererInterface = null;
425+
// Find the nearest ancestor which is mounted by a React.
426+
for (const rendererID in this._rendererInterfaces) {
427+
const renderer = ((this._rendererInterfaces[
428+
(rendererID: any)
429+
]: any): RendererInterface);
430+
const nearestNode: null | Element = renderer.getNearestMountedDOMNode(
431+
(target: any),
432+
);
433+
if (nearestNode !== null) {
434+
if (nearestNode === target) {
435+
// Exact match we can exit early.
436+
bestMatch = nearestNode;
437+
bestRenderer = renderer;
438+
break;
439+
}
440+
if (bestMatch === null || bestMatch.contains(nearestNode)) {
441+
// If this is the first match or the previous match contains the new match,
442+
// so the new match is a deeper and therefore better match.
443+
bestMatch = nearestNode;
444+
bestRenderer = renderer;
445+
}
406446
}
407447
}
408-
}
409-
410-
if (bestRenderer != null && bestMatch != null) {
411-
try {
412-
const id = bestRenderer.getElementIDForHostInstance(bestMatch, true);
413-
if (id) {
414-
return bestRenderer.getDisplayNameForElementID(id);
448+
if (bestRenderer != null && bestMatch != null) {
449+
try {
450+
const id = bestRenderer.getElementIDForHostInstance(bestMatch);
451+
if (id) {
452+
return bestRenderer.getDisplayNameForElementID(id);
453+
}
454+
} catch (error) {
455+
// Some old React versions might throw if they can't find a match.
456+
// If so we should ignore it...
415457
}
416-
} catch (error) {
417-
// Some old React versions might throw if they can't find a match.
418-
// If so we should ignore it...
419458
}
459+
return null;
420460
}
421-
return null;
422461
}
423462

424463
getBackendVersion: () => void = () => {

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -804,11 +804,17 @@ function releaseHostResource(
804804
if (resourceInstances.size === 0) {
805805
hostResourceToDevToolsInstanceMap.delete(publicInstance);
806806
publicInstanceToDevToolsInstanceMap.delete(publicInstance);
807-
} else if (publicInstanceToDevToolsInstanceMap.get(publicInstance) === nearestInstance) {
807+
} else if (
808+
publicInstanceToDevToolsInstanceMap.get(publicInstance) ===
809+
nearestInstance
810+
) {
808811
// This was the first one. Store the next first one in the main map for easy access.
809812
// eslint-disable-next-line no-for-of-loops/no-for-of-loops
810813
for (const firstInstance of resourceInstances) {
811-
publicInstanceToDevToolsInstanceMap.set(firstInstance, nearestInstance);
814+
publicInstanceToDevToolsInstanceMap.set(
815+
firstInstance,
816+
nearestInstance,
817+
);
812818
break;
813819
}
814820
}
@@ -3718,9 +3724,7 @@ export function attach(
37183724
}
37193725
}
37203726

3721-
function getNearestMountedHostInstance(
3722-
publicInstance: HostInstance,
3723-
): null | HostInstance {
3727+
function getNearestMountedDOMNode(publicInstance: Element): null | Element {
37243728
// TODO: Remove dependency on findFiberByHostInstance.
37253729
const mountedFiber = renderer.findFiberByHostInstance(publicInstance);
37263730
if (mountedFiber != null) {
@@ -5614,7 +5618,7 @@ export function attach(
56145618
flushInitialOperations,
56155619
getBestMatchForTrackedPath,
56165620
getDisplayNameForElementID,
5617-
getNearestMountedHostInstance,
5621+
getNearestMountedDOMNode,
56185622
getElementIDForHostInstance,
56195623
getInstanceAndStyle,
56205624
getOwnersList,

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -145,15 +145,13 @@ export function attach(
145145
let getElementIDForHostInstance: GetElementIDForHostInstance =
146146
((null: any): GetElementIDForHostInstance);
147147
let findHostInstanceForInternalID: (id: number) => ?HostInstance;
148-
let getNearestMountedHostInstance = (
149-
node: HostInstance,
150-
): null | HostInstance => {
148+
let getNearestMountedDOMNode = (node: Element): null | Element => {
151149
// Not implemented.
152150
return null;
153151
};
154152

155153
if (renderer.ComponentTree) {
156-
getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
154+
getElementIDForHostInstance = node => {
157155
const internalInstance =
158156
renderer.ComponentTree.getClosestInstanceFromNode(node);
159157
return internalInstanceToIDMap.get(internalInstance) || null;
@@ -162,9 +160,7 @@ export function attach(
162160
const internalInstance = idToInternalInstanceMap.get(id);
163161
return renderer.ComponentTree.getNodeFromInstance(internalInstance);
164162
};
165-
getNearestMountedHostInstance = (
166-
node: HostInstance,
167-
): null | HostInstance => {
163+
getNearestMountedDOMNode = (node: Element): null | Element => {
168164
const internalInstance =
169165
renderer.ComponentTree.getClosestInstanceFromNode(node);
170166
if (internalInstance != null) {
@@ -173,7 +169,7 @@ export function attach(
173169
return null;
174170
};
175171
} else if (renderer.Mount.getID && renderer.Mount.getNode) {
176-
getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
172+
getElementIDForHostInstance = node => {
177173
// Not implemented.
178174
return null;
179175
};
@@ -1121,7 +1117,7 @@ export function attach(
11211117
flushInitialOperations,
11221118
getBestMatchForTrackedPath,
11231119
getDisplayNameForElementID,
1124-
getNearestMountedHostInstance,
1120+
getNearestMountedDOMNode,
11251121
getElementIDForHostInstance,
11261122
getInstanceAndStyle,
11271123
findHostInstancesForElementID: (id: number) => {

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ export type GetDisplayNameForElementID = (id: number) => string | null;
9090

9191
export type GetElementIDForHostInstance = (
9292
component: HostInstance,
93-
findNearestUnfilteredAncestor?: boolean,
9493
) => number | null;
9594
export type FindHostInstancesForElementID = (
9695
id: number,
@@ -360,9 +359,7 @@ export type RendererInterface = {
360359
findHostInstancesForElementID: FindHostInstancesForElementID,
361360
flushInitialOperations: () => void,
362361
getBestMatchForTrackedPath: () => PathMatch | null,
363-
getNearestMountedHostInstance: (
364-
component: HostInstance,
365-
) => HostInstance | null,
362+
getNearestMountedDOMNode: (component: Element) => Element | null,
366363
getElementIDForHostInstance: GetElementIDForHostInstance,
367364
getDisplayNameForElementID: GetDisplayNameForElementID,
368365
getInstanceAndStyle(id: number): InstanceAndStyle,

0 commit comments

Comments
 (0)