refactor[renderer]: expose getInspectorDataForInstance in rendererCon…

…fig (#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).
facebook · Jun 9, 2023 · 21a161f · 21a161f
1 parent 9100456
commit 21a161f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 29 deletions.
diff --git 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
@@ -7,14 +7,19 @@
  * @flow
  */
 
-import type {TouchedViewDataAtPoint, ViewConfig} from './ReactNativeTypes';
+import type {
+  InspectorData,
+  TouchedViewDataAtPoint,
+  ViewConfig,
+} from './ReactNativeTypes';
 import {create, diff} from './ReactNativeAttributePayload';
 import {dispatchEvent} from './ReactFabricEventEmitter';
 import {
   DefaultEventPriority,
   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
@@ -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
@@ -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
@@ -145,6 +145,7 @@ injectIntoDevTools({
   version: ReactVersion,
   rendererPackageName: 'react-native-renderer',
   rendererConfig: {
+    getInspectorDataForInstance,
     getInspectorDataForViewTag: getInspectorDataForViewTag,
     getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
       null,