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`](e7d3662904/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js).
This commit is contained in:
Ruslan Lesiutin
2023-06-09 10:55:34 +01:00
committed by GitHub
parent 910045696b
commit 21a161fa37
5 changed files with 18 additions and 29 deletions

View File

@@ -137,6 +137,7 @@ injectIntoDevTools({
version: ReactVersion,
rendererPackageName: 'react-native-renderer',
rendererConfig: {
getInspectorDataForInstance,
getInspectorDataForViewTag: getInspectorDataForViewTag,
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
null,

View File

@@ -7,7 +7,11 @@
* @flow
*/
import type {TouchedViewDataAtPoint, ViewConfig} from './ReactNativeTypes';
import type {
InspectorData,
TouchedViewDataAtPoint,
ViewConfig,
} from './ReactNativeTypes';
import {create, diff} from './ReactNativeAttributePayload';
import {dispatchEvent} from './ReactFabricEventEmitter';
import {
@@ -15,6 +19,7 @@ import {
DiscreteEventPriority,
type EventPriority,
} from 'react-reconciler/src/ReactEventPriorities';
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import {HostText} from 'react-reconciler/src/ReactWorkTags';
// Modules provided by RN:
@@ -94,6 +99,7 @@ export type NoTimeout = -1;
export type TransitionStatus = mixed;
export type RendererInspectionConfig = $ReadOnly<{
getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
// Deprecated. Replaced with getInspectorDataForViewAtPoint.
getInspectorDataForViewTag?: (tag: number) => Object,
getInspectorDataForViewAtPoint?: (

View File

@@ -7,7 +7,7 @@
* @flow
*/
import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
import type {InspectorData, TouchedViewDataAtPoint} from './ReactNativeTypes';
// Modules provided by RN:
import {
@@ -28,6 +28,7 @@ import {
DefaultEventPriority,
type EventPriority,
} from 'react-reconciler/src/ReactEventPriorities';
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
@@ -49,6 +50,7 @@ export type NoTimeout = -1;
export type TransitionStatus = mixed;
export type RendererInspectionConfig = $ReadOnly<{
getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
// Deprecated. Replaced with getInspectorDataForViewAtPoint.
getInspectorDataForViewTag?: (tag: number) => Object,
getInspectorDataForViewAtPoint?: (

View File

@@ -117,9 +117,11 @@ function getInspectorDataForInstance(
selectedIndex,
source,
};
} else {
return (null: any);
}
throw new Error(
'getInspectorDataForInstance() is not available in production',
);
}
function getOwnerHierarchy(instance: any) {
@@ -153,34 +155,11 @@ function traverseOwnerTreeUp(
}
}
function getInspectorDataForViewTag(viewTag: number): Object {
function getInspectorDataForViewTag(viewTag: number): InspectorData {
if (__DEV__) {
const closestInstance = getClosestInstanceFromNode(viewTag);
// Handle case where user clicks outside of ReactNative
if (!closestInstance) {
return {
hierarchy: [],
props: emptyObject,
selectedIndex: null,
source: null,
};
}
const fiber = findCurrentFiberUsingSlowPath(closestInstance);
const fiberHierarchy = getOwnerHierarchy(fiber);
const instance = lastNonHostInstance(fiberHierarchy);
const hierarchy = createHierarchy(fiberHierarchy);
const props = getHostProps(instance);
const source = instance._debugSource;
const selectedIndex = fiberHierarchy.indexOf(instance);
return {
hierarchy,
props,
selectedIndex,
source,
};
return getInspectorDataForInstance(closestInstance);
} else {
throw new Error(
'getInspectorDataForViewTag() is not available in production',

View File

@@ -145,6 +145,7 @@ injectIntoDevTools({
version: ReactVersion,
rendererPackageName: 'react-native-renderer',
rendererConfig: {
getInspectorDataForInstance,
getInspectorDataForViewTag: getInspectorDataForViewTag,
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
null,