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).
Ruslan Lesiutin committed
Jun 9, 2023 at 10:55 UTC
21a161fa37dce969c58ae17f67f2856d06514892
5 files changed
+18
-29
packages/react-native-renderer/src/ReactFabric.js
+1
@@ -137,6 +137,7 @@ injectIntoDevTools({
137
version: ReactVersion,
138
rendererPackageName: 'react-native-renderer',
139
rendererConfig: {
140
+ getInspectorDataForInstance,
141
getInspectorDataForViewTag: getInspectorDataForViewTag,
142
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
143
null,
packages/react-native-renderer/src/ReactFiberConfigFabric.js
+7
-1
@@ -7,7 +7,11 @@
7
* @flow
8
*/
9
10
-import type {TouchedViewDataAtPoint, ViewConfig} from './ReactNativeTypes';
10
+import type {
11
+ InspectorData,
12
+ TouchedViewDataAtPoint,
13
+ ViewConfig,
14
+} from './ReactNativeTypes';
15
import {create, diff} from './ReactNativeAttributePayload';
16
import {dispatchEvent} from './ReactFabricEventEmitter';
17
import {
@@ -15,6 +19,7 @@ import {
19
DiscreteEventPriority,
20
type EventPriority,
21
} from 'react-reconciler/src/ReactEventPriorities';
22
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
23
import {HostText} from 'react-reconciler/src/ReactWorkTags';
24
25
// Modules provided by RN:
@@ -94,6 +99,7 @@ export type NoTimeout = -1;
99
export type TransitionStatus = mixed;
100
101
export type RendererInspectionConfig = $ReadOnly<{
102
+ getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
103
// Deprecated. Replaced with getInspectorDataForViewAtPoint.
104
getInspectorDataForViewTag?: (tag: number) => Object,
105
getInspectorDataForViewAtPoint?: (
packages/react-native-renderer/src/ReactFiberConfigNative.js
+3
-1
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
10
+import type {InspectorData, TouchedViewDataAtPoint} from './ReactNativeTypes';
11
12
// Modules provided by RN:
13
import {
@@ -28,6 +28,7 @@ import {
28
DefaultEventPriority,
29
type EventPriority,
30
} from 'react-reconciler/src/ReactEventPriorities';
31
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
32
33
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
34
@@ -49,6 +50,7 @@ export type NoTimeout = -1;
50
export type TransitionStatus = mixed;
51
52
export type RendererInspectionConfig = $ReadOnly<{
53
+ getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
54
// Deprecated. Replaced with getInspectorDataForViewAtPoint.
55
getInspectorDataForViewTag?: (tag: number) => Object,
56
getInspectorDataForViewAtPoint?: (
packages/react-native-renderer/src/ReactNativeFiberInspector.js
+6
-27
@@ -117,9 +117,11 @@ function getInspectorDataForInstance(
117
selectedIndex,
118
source,
119
};
120
- } else {
121
- return (null: any);
120
}
121
+
122
+ throw new Error(
123
+ 'getInspectorDataForInstance() is not available in production',
124
+ );
125
}
126
127
function getOwnerHierarchy(instance: any) {
@@ -153,34 +155,11 @@ function traverseOwnerTreeUp(
155
}
156
}
157
156
-function getInspectorDataForViewTag(viewTag: number): Object {
158
+function getInspectorDataForViewTag(viewTag: number): InspectorData {
159
if (__DEV__) {
160
const closestInstance = getClosestInstanceFromNode(viewTag);
161
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);
163
} else {
164
throw new Error(
165
'getInspectorDataForViewTag() is not available in production',
packages/react-native-renderer/src/ReactNativeRenderer.js
+1
@@ -145,6 +145,7 @@ injectIntoDevTools({
145
version: ReactVersion,
146
rendererPackageName: 'react-native-renderer',
147
rendererConfig: {
148
+ getInspectorDataForInstance,
149
getInspectorDataForViewTag: getInspectorDataForViewTag,
150
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
151
null,