Expose injectIntoDevTools() to renderers (#11463)
Dan Abramov committed
Nov 6, 2017 at 13:09 UTC
8e7cb857889e0cf626fe221912cf923e82b36457
5 files changed
+49
-24
packages/react-cs-renderer/src/ReactNativeCS.js
+1
-4
@@ -14,7 +14,6 @@ import type {ReactNativeCSType} from './ReactNativeCSTypes';
14
import {CSStatefulComponent} from 'CSStatefulComponent';
15
16
import ReactFiberReconciler from 'react-reconciler';
17
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
17
import ReactVersion from 'shared/ReactVersion';
18
19
const emptyObject = {};
@@ -240,9 +239,7 @@ const ReactNativeCSFiberRenderer = ReactFiberReconciler({
239
},
240
});
241
243
-injectInternals({
244
- findHostInstanceByFiber: ReactNativeCSFiberRenderer.findHostInstance,
245
- // This is an enum because we may add more (e.g. profiler build)
242
+ReactNativeCSFiberRenderer.injectIntoDevTools({
243
bundleType: __DEV__ ? 1 : 0,
244
version: ReactVersion,
245
rendererPackageName: 'react-cs-renderer',
packages/react-dom/src/client/ReactDOM.js
+1
-5
@@ -16,8 +16,6 @@ import './ReactDOMClientInjection';
16
import ReactFiberReconciler from 'react-reconciler';
17
// TODO: direct imports like some-package/src/* are bad. Fix me.
18
import * as ReactPortal from 'react-reconciler/src/ReactPortal';
19
-// TODO: direct imports like some-package/src/* are bad. Fix me.
20
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
19
import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
20
import * as ReactGenericBatching from 'events/ReactGenericBatching';
21
import * as ReactControlledComponent from 'events/ReactControlledComponent';
@@ -956,10 +954,8 @@ if (ReactFeatureFlags.enableCreateRoot) {
954
};
955
}
956
959
-const foundDevTools = injectInternals({
957
+const foundDevTools = DOMRenderer.injectIntoDevTools({
958
findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,
961
- findHostInstanceByFiber: DOMRenderer.findHostInstance,
962
- // This is an enum because we may add more (e.g. profiler build)
959
bundleType: __DEV__ ? 1 : 0,
960
version: ReactVersion,
961
rendererPackageName: 'react-dom',
packages/react-native-renderer/src/ReactNativeRenderer.js
+1
-4
@@ -16,7 +16,6 @@ import './ReactNativeInjection';
16
import * as ReactFiberErrorLogger
17
from 'react-reconciler/src/ReactFiberErrorLogger';
18
import * as ReactPortal from 'react-reconciler/src/ReactPortal';
19
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
19
import * as ReactGenericBatching from 'events/ReactGenericBatching';
20
import TouchHistoryMath from 'events/TouchHistoryMath';
21
import * as ReactGlobalSharedState from 'shared/ReactGlobalSharedState';
@@ -130,11 +129,9 @@ if (__DEV__) {
129
);
130
}
131
133
-injectInternals({
132
+ReactNativeFiberRenderer.injectIntoDevTools({
133
findFiberByHostInstance: ReactNativeComponentTree.getClosestInstanceFromNode,
135
- findHostInstanceByFiber: ReactNativeFiberRenderer.findHostInstance,
134
getInspectorDataForViewTag: getInspectorDataForViewTag,
137
- // This is an enum because we may add more (e.g. profiler build)
135
bundleType: __DEV__ ? 1 : 0,
136
version: ReactVersion,
137
rendererPackageName: 'react-native-renderer',
packages/react-reconciler/src/ReactFiberReconciler.js
+45
-7
@@ -28,6 +28,7 @@ import {
28
processChildContext,
29
} from './ReactFiberContext';
30
import {createFiberRoot} from './ReactFiberRoot';
31
+import * as ReactFiberDevToolsHook from './ReactFiberDevToolsHook';
32
import ReactFiberScheduler from './ReactFiberScheduler';
33
import {insertUpdateIntoFiber} from './ReactFiberUpdateQueue';
34
import ReactFiberInstrumentation from './ReactFiberInstrumentation';
@@ -211,6 +212,23 @@ type HydrationHostConfig<T, P, I, TI, C, CX, PL> = {
212
): void,
213
};
214
215
+// 0 is PROD, 1 is DEV.
216
+// Might add PROFILE later.
217
+type BundleType = 0 | 1;
218
+
219
+type DevToolsConfig<I, TI> = {|
220
+ bundleType: BundleType,
221
+ version: string,
222
+ rendererPackageName: string,
223
+ // Note: this actually *does* depend on Fiber internal fields.
224
+ // Used by "inspect clicked DOM element" in React DevTools.
225
+ findFiberByHostInstance?: (instance: I | TI) => Fiber,
226
+ // Used by RN in-app inspector.
227
+ // This API is unfortunately RN-specific.
228
+ // TODO: Change it to accept Fiber instead and type it properly.
229
+ getInspectorDataForViewTag?: (tag: number) => Object,
230
+|};
231
+
232
export type Reconciler<C, I, TI> = {
233
createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot,
234
updateContainer(
@@ -223,6 +241,7 @@ export type Reconciler<C, I, TI> = {
241
unbatchedUpdates<A>(fn: () => A): A,
242
flushSync<A>(fn: () => A): A,
243
deferredUpdates<A>(fn: () => A): A,
244
+ injectIntoDevTools(devToolsConfig: DevToolsConfig<I, TI>): boolean,
245
246
// Used to extract the return value from the initial render. Legacy API.
247
getPublicRootInstance(
@@ -327,6 +346,14 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
346
scheduleWork(current, expirationTime);
347
}
348
349
+ function findHostInstance(fiber: Fiber): PI | null {
350
+ const hostFiber = findCurrentHostFiber(fiber);
351
+ if (hostFiber === null) {
352
+ return null;
353
+ }
354
+ return hostFiber.stateNode;
355
+ }
356
+
357
return {
358
createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot {
359
return createFiberRoot(containerInfo, hydrate);
@@ -386,13 +413,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
413
}
414
},
415
389
- findHostInstance(fiber: Fiber): PI | null {
390
- const hostFiber = findCurrentHostFiber(fiber);
391
- if (hostFiber === null) {
392
- return null;
393
- }
394
- return hostFiber.stateNode;
395
- },
416
+ findHostInstance,
417
418
findHostInstanceWithNoPortals(fiber: Fiber): PI | null {
419
const hostFiber = findCurrentHostFiberWithNoPortals(fiber);
@@ -401,5 +422,22 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
422
}
423
return hostFiber.stateNode;
424
},
425
+
426
+ injectIntoDevTools(devToolsConfig: DevToolsConfig<I, TI>): boolean {
427
+ const {findFiberByHostInstance} = devToolsConfig;
428
+ return ReactFiberDevToolsHook.injectInternals({
429
+ ...devToolsConfig,
430
+ findHostInstanceByFiber(fiber: Fiber): I | TI | null {
431
+ return findHostInstance(fiber);
432
+ },
433
+ findFiberByHostInstance(instance: I | TI): Fiber | null {
434
+ if (!findFiberByHostInstance) {
435
+ // Might not be implemented by the renderer.
436
+ return null;
437
+ }
438
+ return findFiberByHostInstance(instance);
439
+ },
440
+ });
441
+ },
442
};
443
}
packages/react-rt-renderer/src/ReactNativeRT.js
+1
-4
@@ -17,7 +17,6 @@ import {
17
showDialog,
18
} from 'react-native-renderer/src/ReactNativeFiberErrorDialog';
19
import * as ReactPortal from 'react-reconciler/src/ReactPortal';
20
-import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';
20
import * as ReactGenericBatching from 'events/ReactGenericBatching';
21
import ReactVersion from 'shared/ReactVersion';
22
@@ -83,11 +82,9 @@ const ReactNativeRTFiber: ReactNativeRTType = {
82
flushSync: ReactNativeRTFiberRenderer.flushSync,
83
};
84
86
-injectInternals({
85
+ReactNativeRTFiberRenderer.injectIntoDevTools({
86
findFiberByHostInstance: getFiberFromTag,
88
- findHostInstanceByFiber: ReactNativeRTFiberRenderer.findHostInstance,
87
getInspectorDataForViewTag: ReactNativeRTFiberInspector.getInspectorDataForViewTag,
90
- // This is an enum because we may add more (e.g. profiler build)
88
bundleType: __DEV__ ? 1 : 0,
89
version: ReactVersion,
90
rendererPackageName: 'react-rt-renderer',