Skip to content

Commit 2e43450

Browse files
sebmarkbagesebmarkbage
committed
Change findCurrentFiberUsingSlowPathById to take an instance
This ensures we can reuse an instance we already have and forces us to explicitly handle the VirtualInstance case.
1 parent 4c5d993 commit 2e43450

File tree

1 file changed

+97
-30
lines changed
  • packages/react-devtools-shared/src/backend/fiber

1 file changed

+97
-30
lines changed

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

+97-30
Original file line numberDiff line numberDiff line change
@@ -2891,7 +2891,17 @@ export function attach(
28912891

28922892
function findAllCurrentHostFibers(id: number): $ReadOnlyArray<Fiber> {
28932893
const fibers = [];
2894-
const fiber = findCurrentFiberUsingSlowPathById(id);
2894+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
2895+
if (devtoolsInstance === undefined) {
2896+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
2897+
return fibers;
2898+
}
2899+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
2900+
// TODO: Handle VirtualInstance.
2901+
return fibers;
2902+
}
2903+
const fiber =
2904+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
28952905
if (!fiber) {
28962906
return fibers;
28972907
}
@@ -2925,7 +2935,17 @@ export function attach(
29252935

29262936
function findHostInstancesForElementID(id: number) {
29272937
try {
2928-
const fiber = findCurrentFiberUsingSlowPathById(id);
2938+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
2939+
if (devtoolsInstance === undefined) {
2940+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
2941+
return null;
2942+
}
2943+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
2944+
// TODO: Handle VirtualInstance.
2945+
return null;
2946+
}
2947+
const fiber =
2948+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
29292949
if (fiber === null) {
29302950
return null;
29312951
}
@@ -3028,18 +3048,10 @@ export function attach(
30283048
// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
30293049
// It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
30303050
// BEGIN copied code
3031-
function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
3032-
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
3033-
if (devtoolsInstance === undefined) {
3034-
console.warn(`Could not find Fiber with id "${id}"`);
3035-
return null;
3036-
}
3037-
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
3038-
// TODO: Handle VirtualInstance.
3039-
return null;
3040-
}
3041-
3042-
const fiber = devtoolsInstance.data;
3051+
function findCurrentFiberUsingSlowPathByFiberInstance(
3052+
fiberInstance: FiberInstance,
3053+
): Fiber | null {
3054+
const fiber = fiberInstance.data;
30433055
const alternate = fiber.alternate;
30443056
if (!alternate) {
30453057
// If there is no alternate, then we only need to check if it is mounted.
@@ -3201,7 +3213,7 @@ export function attach(
32013213
function prepareViewElementSource(id: number): void {
32023214
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
32033215
if (devtoolsInstance === undefined) {
3204-
console.warn(`Could not find Fiber with id "${id}"`);
3216+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
32053217
return;
32063218
}
32073219
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
@@ -3246,7 +3258,17 @@ export function attach(
32463258
}
32473259

32483260
function getOwnersList(id: number): Array<SerializedElement> | null {
3249-
const fiber = findCurrentFiberUsingSlowPathById(id);
3261+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
3262+
if (devtoolsInstance === undefined) {
3263+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
3264+
return null;
3265+
}
3266+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
3267+
// TODO: Handle VirtualInstance.
3268+
return null;
3269+
}
3270+
const fiber =
3271+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
32503272
if (fiber == null) {
32513273
return null;
32523274
}
@@ -3275,7 +3297,18 @@ export function attach(
32753297
let instance = null;
32763298
let style = null;
32773299

3278-
const fiber = findCurrentFiberUsingSlowPathById(id);
3300+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
3301+
if (devtoolsInstance === undefined) {
3302+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
3303+
return {instance, style};
3304+
}
3305+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
3306+
// TODO: Handle VirtualInstance.
3307+
return {instance, style};
3308+
}
3309+
3310+
const fiber =
3311+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
32793312
if (fiber !== null) {
32803313
instance = fiber.stateNode;
32813314

@@ -3316,7 +3349,17 @@ export function attach(
33163349
}
33173350

33183351
function inspectElementRaw(id: number): InspectedElement | null {
3319-
const fiber = findCurrentFiberUsingSlowPathById(id);
3352+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
3353+
if (devtoolsInstance === undefined) {
3354+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
3355+
return null;
3356+
}
3357+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
3358+
// TODO: Handle VirtualInstance.
3359+
return null;
3360+
}
3361+
const fiber =
3362+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
33203363
if (fiber == null) {
33213364
return null;
33223365
}
@@ -3505,10 +3548,6 @@ export function attach(
35053548
rootType = fiberRoot._debugRootType;
35063549
}
35073550

3508-
const devtoolsInstance: DevToolsInstance = (idToDevToolsInstanceMap.get(
3509-
id,
3510-
): any);
3511-
35123551
let isErrored = false;
35133552
let targetErrorBoundaryID;
35143553
if (isErrorBoundary(fiber)) {
@@ -3699,7 +3738,7 @@ export function attach(
36993738

37003739
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
37013740
if (devtoolsInstance === undefined) {
3702-
console.warn(`Could not find Fiber with id "${id}"`);
3741+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
37033742
return;
37043743
}
37053744
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
@@ -3841,9 +3880,7 @@ export function attach(
38413880
// Log error & cause for user to debug
38423881
console.error(message + '\n\n', error);
38433882
if (error.cause != null) {
3844-
const fiber = findCurrentFiberUsingSlowPathById(id);
3845-
const componentName =
3846-
fiber != null ? getDisplayNameForFiber(fiber) : null;
3883+
const componentName = getDisplayNameForElementID(id);
38473884
console.error(
38483885
'React DevTools encountered an error while trying to inspect hooks. ' +
38493886
'This is most likely caused by an error in current inspected component' +
@@ -3945,7 +3982,7 @@ export function attach(
39453982
? mostRecentlyInspectedElement
39463983
: inspectElementRaw(id);
39473984
if (result === null) {
3948-
console.warn(`Could not find Fiber with id "${id}"`);
3985+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
39493986
return;
39503987
}
39513988

@@ -3986,7 +4023,17 @@ export function attach(
39864023
hookID: ?number,
39874024
path: Array<string | number>,
39884025
): void {
3989-
const fiber = findCurrentFiberUsingSlowPathById(id);
4026+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
4027+
if (devtoolsInstance === undefined) {
4028+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
4029+
return;
4030+
}
4031+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
4032+
// TODO: Handle VirtualInstance.
4033+
return;
4034+
}
4035+
const fiber =
4036+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
39904037
if (fiber !== null) {
39914038
const instance = fiber.stateNode;
39924039

@@ -4042,7 +4089,17 @@ export function attach(
40424089
oldPath: Array<string | number>,
40434090
newPath: Array<string | number>,
40444091
): void {
4045-
const fiber = findCurrentFiberUsingSlowPathById(id);
4092+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
4093+
if (devtoolsInstance === undefined) {
4094+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
4095+
return;
4096+
}
4097+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
4098+
// TODO: Handle VirtualInstance.
4099+
return;
4100+
}
4101+
const fiber =
4102+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
40464103
if (fiber !== null) {
40474104
const instance = fiber.stateNode;
40484105

@@ -4108,7 +4165,17 @@ export function attach(
41084165
path: Array<string | number>,
41094166
value: any,
41104167
): void {
4111-
const fiber = findCurrentFiberUsingSlowPathById(id);
4168+
const devtoolsInstance = idToDevToolsInstanceMap.get(id);
4169+
if (devtoolsInstance === undefined) {
4170+
console.warn(`Could not find DevToolsInstance with id "${id}"`);
4171+
return;
4172+
}
4173+
if (devtoolsInstance.kind !== FIBER_INSTANCE) {
4174+
// TODO: Handle VirtualInstance.
4175+
return;
4176+
}
4177+
const fiber =
4178+
findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
41124179
if (fiber !== null) {
41134180
const instance = fiber.stateNode;
41144181

0 commit comments

Comments
 (0)