Fix highlighting timed out Suspense DOM node
Dan Abramov committed
Apr 4, 2019 at 20:15 UTC
48a5aca127a9a0f3e6edb11dcb0e57f8157f10c8
3 files changed
+22
-13
src/backend/agent.js
+2
-5
@@ -210,11 +210,8 @@ export default class Agent extends EventEmitter {
210
}
211
212
let node: HTMLElement | null = null;
213
- if (
214
- renderer !== null &&
215
- typeof renderer.getNativeFromReactElement === 'function'
216
- ) {
217
- node = ((renderer.getNativeFromReactElement(id): any): HTMLElement);
213
+ if (renderer !== null) {
214
+ node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
215
}
216
217
if (node != null) {
src/backend/renderer.js
+19
-7
@@ -1053,18 +1053,30 @@ export function attach(
1053
currentRootID = -1;
1054
}
1055
1056
- // The naming is confusing.
1057
- // They deal with opaque nodes (fibers), not elements.
1058
- function getNativeFromReactElement(id: number) {
1056
+ function findNativeByFiberID(id: number) {
1057
try {
1060
- const primaryFiber = getPrimaryFiber(idToFiberMap.get(id));
1061
- const hostInstance = renderer.findHostInstanceByFiber(primaryFiber);
1062
- return hostInstance;
1058
+ const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));
1059
+ if (fiber === null) {
1060
+ return null;
1061
+ }
1062
+ const isTimedOutSuspense =
1063
+ fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
1064
+ if (!isTimedOutSuspense) {
1065
+ // Normal case.
1066
+ return renderer.findHostInstanceByFiber(fiber);
1067
+ } else {
1068
+ // A timed-out Suspense's findDOMNode is useless.
1069
+ // Try our best to find the fallback directly.
1070
+ const maybeFallbackFiber =
1071
+ (fiber.child && fiber.child.sibling) || fiber;
1072
+ return renderer.findHostInstanceByFiber(maybeFallbackFiber);
1073
+ }
1074
} catch (err) {
1075
// The fiber might have unmounted by now.
1076
return null;
1077
}
1078
}
1079
+
1080
function getFiberIDFromNative(
1081
hostInstance,
1082
findNearestUnfilteredAncestor = false
@@ -1731,7 +1743,7 @@ export function attach(
1743
getCommitDetails,
1744
getFiberIDFromNative,
1745
getInteractions,
1734
- getNativeFromReactElement,
1746
+ findNativeByFiberID,
1747
getProfilingDataForDownload,
1748
getProfilingSummary,
1749
handleCommitFiberRoot,
src/backend/types.js
+1
-1
@@ -86,9 +86,9 @@ export type ProfilingSummary = {|
86
87
export type RendererInterface = {
88
cleanup: () => void,
89
+ findNativeByFiberID: (id: number) => ?NativeType,
90
flushInitialOperations: () => void,
91
getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,
91
- getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,
92
getFiberIDFromNative: (
93
component: NativeType,
94
findNearestUnfilteredAncestor?: boolean