From 44ecd16fbdded18c58b8cd23b0f175e5043d66da Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 6 Nov 2017 13:09:02 +0000 Subject: [PATCH] Expose injectIntoDevTools() to renderers (#11463) --- .../react-cs-renderer/src/ReactNativeCS.js | 5 +- packages/react-dom/src/client/ReactDOM.js | 6 +-- .../src/ReactNativeRenderer.js | 5 +- .../src/ReactFiberReconciler.js | 52 ++++++++++++++++--- .../react-rt-renderer/src/ReactNativeRT.js | 5 +- 5 files changed, 49 insertions(+), 24 deletions(-) diff --git a/packages/react-cs-renderer/src/ReactNativeCS.js b/packages/react-cs-renderer/src/ReactNativeCS.js index e0e9d7d858469..a636e91e7d4cd 100644 --- a/packages/react-cs-renderer/src/ReactNativeCS.js +++ b/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', diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index ea6a589de7162..ccbcd6bbce874 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/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'; @@ -956,10 +954,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', diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index 4cfbb8a494552..5b67166bd7e38 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/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', diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js index 42f60bb5f5ae5..bafe91701f0f3 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.js +++ b/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 = { ): void, }; +// 0 is PROD, 1 is DEV. +// Might add PROFILE later. +type BundleType = 0 | 1; + +type DevToolsConfig = {| + 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 = { createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot, updateContainer( @@ -223,6 +241,7 @@ export type Reconciler = { unbatchedUpdates(fn: () => A): A, flushSync(fn: () => A): A, deferredUpdates(fn: () => A): A, + injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean, // Used to extract the return value from the initial render. Legacy API. getPublicRootInstance( @@ -327,6 +346,14 @@ export default function( 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( } }, - 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( } return hostFiber.stateNode; }, + + injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean { + const {findFiberByHostInstance} = devToolsConfig; + return ReactFiberDevToolsHook.injectInternals({ + ...devToolsConfig, + 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); + }, + }); + }, }; } diff --git a/packages/react-rt-renderer/src/ReactNativeRT.js b/packages/react-rt-renderer/src/ReactNativeRT.js index 81f48bd081f37..9ba34b9f6d314 100644 --- a/packages/react-rt-renderer/src/ReactNativeRT.js +++ b/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',