Skip to content

Commit 21a161f

Browse files
authored
refactor[renderer]: expose getInspectorDataForInstance in rendererConfig (#26913)
## Summary This is required for the case when we have an instance and want to get inspector data for it. Such case occurs when RN's application being debugged via React DevTools. React DevTools sends instance to RN, which then gets all auxiliary data to highlight some elements. Having `getInspectorDataForInstance` method exposed makes it possible to easily get current props from fiber, which then can be used to display some margins & paddings for hovered element (via props.style). I see that `getInspectorDataForInstance` is being exported at the top level of the renderer, but feels like this should also be inside DevTools global hook, the same way we use it for [`getInspectorDataForViewAtPoint`](https://github.com/facebook/react-native/blob/e7d3662904e0e35e43380ee6d54859388713a592/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js).
1 parent 9100456 commit 21a161f

File tree

5 files changed

+18
-29
lines changed

5 files changed

+18
-29
lines changed

packages/react-native-renderer/src/ReactFabric.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ injectIntoDevTools({
137137
version: ReactVersion,
138138
rendererPackageName: 'react-native-renderer',
139139
rendererConfig: {
140+
getInspectorDataForInstance,
140141
getInspectorDataForViewTag: getInspectorDataForViewTag,
141142
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
142143
null,

packages/react-native-renderer/src/ReactFiberConfigFabric.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,19 @@
77
* @flow
88
*/
99

10-
import type {TouchedViewDataAtPoint, ViewConfig} from './ReactNativeTypes';
10+
import type {
11+
InspectorData,
12+
TouchedViewDataAtPoint,
13+
ViewConfig,
14+
} from './ReactNativeTypes';
1115
import {create, diff} from './ReactNativeAttributePayload';
1216
import {dispatchEvent} from './ReactFabricEventEmitter';
1317
import {
1418
DefaultEventPriority,
1519
DiscreteEventPriority,
1620
type EventPriority,
1721
} from 'react-reconciler/src/ReactEventPriorities';
22+
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
1823
import {HostText} from 'react-reconciler/src/ReactWorkTags';
1924

2025
// Modules provided by RN:
@@ -94,6 +99,7 @@ export type NoTimeout = -1;
9499
export type TransitionStatus = mixed;
95100

96101
export type RendererInspectionConfig = $ReadOnly<{
102+
getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
97103
// Deprecated. Replaced with getInspectorDataForViewAtPoint.
98104
getInspectorDataForViewTag?: (tag: number) => Object,
99105
getInspectorDataForViewAtPoint?: (

packages/react-native-renderer/src/ReactFiberConfigNative.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @flow
88
*/
99

10-
import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
10+
import type {InspectorData, TouchedViewDataAtPoint} from './ReactNativeTypes';
1111

1212
// Modules provided by RN:
1313
import {
@@ -28,6 +28,7 @@ import {
2828
DefaultEventPriority,
2929
type EventPriority,
3030
} from 'react-reconciler/src/ReactEventPriorities';
31+
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
3132

3233
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
3334

@@ -49,6 +50,7 @@ export type NoTimeout = -1;
4950
export type TransitionStatus = mixed;
5051

5152
export type RendererInspectionConfig = $ReadOnly<{
53+
getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
5254
// Deprecated. Replaced with getInspectorDataForViewAtPoint.
5355
getInspectorDataForViewTag?: (tag: number) => Object,
5456
getInspectorDataForViewAtPoint?: (

packages/react-native-renderer/src/ReactNativeFiberInspector.js

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,11 @@ function getInspectorDataForInstance(
117117
selectedIndex,
118118
source,
119119
};
120-
} else {
121-
return (null: any);
122120
}
121+
122+
throw new Error(
123+
'getInspectorDataForInstance() is not available in production',
124+
);
123125
}
124126

125127
function getOwnerHierarchy(instance: any) {
@@ -153,34 +155,11 @@ function traverseOwnerTreeUp(
153155
}
154156
}
155157

156-
function getInspectorDataForViewTag(viewTag: number): Object {
158+
function getInspectorDataForViewTag(viewTag: number): InspectorData {
157159
if (__DEV__) {
158160
const closestInstance = getClosestInstanceFromNode(viewTag);
159161

160-
// Handle case where user clicks outside of ReactNative
161-
if (!closestInstance) {
162-
return {
163-
hierarchy: [],
164-
props: emptyObject,
165-
selectedIndex: null,
166-
source: null,
167-
};
168-
}
169-
170-
const fiber = findCurrentFiberUsingSlowPath(closestInstance);
171-
const fiberHierarchy = getOwnerHierarchy(fiber);
172-
const instance = lastNonHostInstance(fiberHierarchy);
173-
const hierarchy = createHierarchy(fiberHierarchy);
174-
const props = getHostProps(instance);
175-
const source = instance._debugSource;
176-
const selectedIndex = fiberHierarchy.indexOf(instance);
177-
178-
return {
179-
hierarchy,
180-
props,
181-
selectedIndex,
182-
source,
183-
};
162+
return getInspectorDataForInstance(closestInstance);
184163
} else {
185164
throw new Error(
186165
'getInspectorDataForViewTag() is not available in production',

packages/react-native-renderer/src/ReactNativeRenderer.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ injectIntoDevTools({
145145
version: ReactVersion,
146146
rendererPackageName: 'react-native-renderer',
147147
rendererConfig: {
148+
getInspectorDataForInstance,
148149
getInspectorDataForViewTag: getInspectorDataForViewTag,
149150
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
150151
null,

0 commit comments

Comments
 (0)