mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
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:
@@ -137,6 +137,7 @@ injectIntoDevTools({
|
||||
version: ReactVersion,
|
||||
rendererPackageName: 'react-native-renderer',
|
||||
rendererConfig: {
|
||||
getInspectorDataForInstance,
|
||||
getInspectorDataForViewTag: getInspectorDataForViewTag,
|
||||
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
|
||||
null,
|
||||
|
||||
@@ -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?: (
|
||||
|
||||
@@ -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?: (
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -145,6 +145,7 @@ injectIntoDevTools({
|
||||
version: ReactVersion,
|
||||
rendererPackageName: 'react-native-renderer',
|
||||
rendererConfig: {
|
||||
getInspectorDataForInstance,
|
||||
getInspectorDataForViewTag: getInspectorDataForViewTag,
|
||||
getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
|
||||
null,
|
||||
|
||||
Reference in New Issue
Block a user