From 21a161fa37dce969c58ae17f67f2856d06514892 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Fri, 9 Jun 2023 10:55:34 +0100 Subject: [PATCH] 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). --- .../react-native-renderer/src/ReactFabric.js | 1 + .../src/ReactFiberConfigFabric.js | 8 ++++- .../src/ReactFiberConfigNative.js | 4 ++- .../src/ReactNativeFiberInspector.js | 33 ++++--------------- .../src/ReactNativeRenderer.js | 1 + 5 files changed, 18 insertions(+), 29 deletions(-) diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 36be493520..8e6b99ce83 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/packages/react-native-renderer/src/ReactFabric.js @@ -137,6 +137,7 @@ injectIntoDevTools({ version: ReactVersion, rendererPackageName: 'react-native-renderer', rendererConfig: { + getInspectorDataForInstance, getInspectorDataForViewTag: getInspectorDataForViewTag, getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind( null, diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 63fa52acba..d1d669ee82 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js +++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js @@ -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?: ( diff --git a/packages/react-native-renderer/src/ReactFiberConfigNative.js b/packages/react-native-renderer/src/ReactFiberConfigNative.js index 63133c6a19..6c14b62fde 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigNative.js +++ b/packages/react-native-renderer/src/ReactFiberConfigNative.js @@ -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?: ( diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js index d1884c44ea..17b2c5e560 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js +++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js @@ -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', diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index b036c06985..bdc0984395 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/packages/react-native-renderer/src/ReactNativeRenderer.js @@ -145,6 +145,7 @@ injectIntoDevTools({ version: ReactVersion, rendererPackageName: 'react-native-renderer', rendererConfig: { + getInspectorDataForInstance, getInspectorDataForViewTag: getInspectorDataForViewTag, getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind( null,