Expose injectIntoDevTools() to renderers

Author: gaearon

packages/react-cs-renderer/src/ReactNativeCS.js

@@ -14,7 +14,6 @@ import type {ReactNativeCSType} from './ReactNativeCSTypes';
 import {CSStatefulComponent} from 'CSStatefulComponent';
 
 import ReactFiberReconciler from 'react-reconciler';
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
 import ReactVersion from 'shared/ReactVersion';
 
 const emptyObject = {};
@@ -240,9 +239,7 @@ const ReactNativeCSFiberRenderer = ReactFiberReconciler({
   },
 });
 
-injectInternals({
-  findHostInstanceByFiber: ReactNativeCSFiberRenderer.findHostInstance,
-  // This is an enum because we may add more (e.g. profiler build)
+ReactNativeCSFiberRenderer.injectIntoDevTools({
   bundleType: __DEV__ ? 1 : 0,
   version: ReactVersion,
   rendererPackageName: 'react-cs-renderer',

packages/react-dom/src/client/ReactDOM.js

@@ -16,8 +16,6 @@ import './ReactDOMClientInjection';
 import ReactFiberReconciler from 'react-reconciler';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import * as ReactPortal from 'react-reconciler/src/ReactPortal';
-// TODO: direct imports like some-package/src/* are bad. Fix me.
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import * as ReactGenericBatching from 'events/ReactGenericBatching';
 import * as ReactControlledComponent from 'events/ReactControlledComponent';
@@ -955,10 +953,8 @@ if (ReactFeatureFlags.enableCreateRoot) {
   };
 }
 
-const foundDevTools = injectInternals({
+const foundDevTools = DOMRenderer.injectIntoDevTools({
   findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,
-  findHostInstanceByFiber: DOMRenderer.findHostInstance,
-  // This is an enum because we may add more (e.g. profiler build)
   bundleType: __DEV__ ? 1 : 0,
   version: ReactVersion,
   rendererPackageName: 'react-dom',

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -16,7 +16,6 @@ import './ReactNativeInjection';
 import * as ReactFiberErrorLogger
   from 'react-reconciler/src/ReactFiberErrorLogger';
 import * as ReactPortal from 'react-reconciler/src/ReactPortal';
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
 import * as ReactGenericBatching from 'events/ReactGenericBatching';
 import TouchHistoryMath from 'events/TouchHistoryMath';
 import * as ReactGlobalSharedState from 'shared/ReactGlobalSharedState';
@@ -130,11 +129,9 @@ if (__DEV__) {
   );
 }
 
-injectInternals({
+ReactNativeFiberRenderer.injectIntoDevTools({
   findFiberByHostInstance: ReactNativeComponentTree.getClosestInstanceFromNode,
-  findHostInstanceByFiber: ReactNativeFiberRenderer.findHostInstance,
   getInspectorDataForViewTag: getInspectorDataForViewTag,
-  // This is an enum because we may add more (e.g. profiler build)
   bundleType: __DEV__ ? 1 : 0,
   version: ReactVersion,
   rendererPackageName: 'react-native-renderer',

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -28,6 +28,7 @@ import {
   processChildContext,
 } from './ReactFiberContext';
 import {createFiberRoot} from './ReactFiberRoot';
+import * as ReactFiberDevToolsHook from './ReactFiberDevToolsHook';
 import ReactFiberScheduler from './ReactFiberScheduler';
 import {insertUpdateIntoFiber} from './ReactFiberUpdateQueue';
 import ReactFiberInstrumentation from './ReactFiberInstrumentation';
@@ -211,6 +212,23 @@ type HydrationHostConfig<T, P, I, TI, C, CX, PL> = {
   ): void,
 };
 
+// 0 is PROD, 1 is DEV.
+// Might add PROFILE later.
+type BundleType = 0 | 1;
+
+type DevToolsConfig<I, TI> = {|
+  bundleType: BundleType,
+  version: string,
+  rendererPackageName: string,
+  // Note: this actually *does* depend on Fiber internal fields.
+  // Used by "inspect clicked DOM element" in React DevTools.
+  findFiberByHostInstance?: (instance: I | TI) => Fiber,
+  // Used by RN in-app inspector.
+  // This API is unfortunately RN-specific.
+  // TODO: Change it to accept Fiber instead and type it properly.
+  getInspectorDataForViewTag?: (tag: number) => Object,
+|};
+
 export type Reconciler<C, I, TI> = {
   createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot,
   updateContainer(
@@ -223,6 +241,7 @@ export type Reconciler<C, I, TI> = {
   unbatchedUpdates<A>(fn: () => A): A,
   flushSync<A>(fn: () => A): A,
   deferredUpdates<A>(fn: () => A): A,
+  injectIntoDevTools(config: DevToolsConfig<I, TI>): boolean,
 
   // Used to extract the return value from the initial render. Legacy API.
   getPublicRootInstance(
@@ -327,6 +346,14 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
     scheduleWork(current, expirationTime);
   }
 
+  function findHostInstance(fiber: Fiber): PI | null {
+    const hostFiber = findCurrentHostFiber(fiber);
+    if (hostFiber === null) {
+      return null;
+    }
+    return hostFiber.stateNode;
+  }
+
   return {
     createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot {
       return createFiberRoot(containerInfo, hydrate);
@@ -386,13 +413,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
       }
     },
 
-    findHostInstance(fiber: Fiber): PI | null {
-      const hostFiber = findCurrentHostFiber(fiber);
-      if (hostFiber === null) {
-        return null;
-      }
-      return hostFiber.stateNode;
-    },
+    findHostInstance,
 
     findHostInstanceWithNoPortals(fiber: Fiber): PI | null {
       const hostFiber = findCurrentHostFiberWithNoPortals(fiber);
@@ -401,5 +422,22 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
       }
       return hostFiber.stateNode;
     },
+
+    injectIntoDevTools(config: DevToolsConfig<I, TI>): boolean {
+      const {findFiberByHostInstance} = config;
+      return ReactFiberDevToolsHook.injectInternals({
+        ...config,
+        findHostInstanceByFiber(fiber: Fiber): I | TI | null {
+          return findHostInstance(fiber);
+        },
+        findFiberByHostInstance(instance: I | TI): Fiber | null {
+          if (!findFiberByHostInstance) {
+            // Might not be implemented by the renderer.
+            return null;
+          }
+          return findFiberByHostInstance(instance);
+        },
+      });
+    },
   };
 }

packages/react-rt-renderer/src/ReactNativeRT.js

@@ -17,7 +17,6 @@ import {
   showDialog,
 } from 'react-native-renderer/src/ReactNativeFiberErrorDialog';
 import * as ReactPortal from 'react-reconciler/src/ReactPortal';
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
 import * as ReactGenericBatching from 'events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 
@@ -83,11 +82,9 @@ const ReactNativeRTFiber: ReactNativeRTType = {
   flushSync: ReactNativeRTFiberRenderer.flushSync,
 };
 
-injectInternals({
+ReactNativeRTFiberRenderer.injectIntoDevTools({
   findFiberByHostInstance: getFiberFromTag,
-  findHostInstanceByFiber: ReactNativeRTFiberRenderer.findHostInstance,
   getInspectorDataForViewTag: ReactNativeRTFiberInspector.getInspectorDataForViewTag,
-  // This is an enum because we may add more (e.g. profiler build)
   bundleType: __DEV__ ? 1 : 0,
   version: ReactVersion,
   rendererPackageName: 'react-rt-renderer',