[Fiber] Make DevTools Config use Static Injection (#30522)

sebmarkbage · web-flow · commit 146df7c31183 · 2024-07-30T15:03:54.000-04:00
We use static dependency injection. We shouldn't use this dynamic
dependency injection we do for DevTools internals. There's also meta
programming like spreading and stuff that isn't needed.

This moves the config from `injectIntoDevTools` to the FiberConfig so it
can be statically resolved.

Closure Compiler has some trouble generating optimal code for this
anyway so ideally we'd refactor this further but at least this is better
and saves a few bytes and avoids some code paths (when minified).
diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
@@ -155,12 +155,7 @@ class Text extends React.Component {
   }
 }
 
-injectIntoDevTools({
-  findFiberByHostInstance: () => null,
-  bundleType: __DEV__ ? 1 : 0,
-  version: ReactVersion,
-  rendererPackageName: 'react-art',
-});
+injectIntoDevTools();
 
 /** API */
 
@@ -169,3 +164,5 @@ export const Group = TYPES.GROUP;
 export const Shape = TYPES.SHAPE;
 export const Path = Mode.Path;
 export {LinearGradient, Pattern, RadialGradient, Surface, Text, Transform};
+
+export {ReactVersion as version};
diff --git a/packages/react-art/src/ReactFiberConfigART.js b/packages/react-art/src/ReactFiberConfigART.js
@@ -17,6 +17,10 @@ import {
   NoEventPriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-art';
+export const extraDevToolsConfig = null;
+
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
@@ -441,8 +445,8 @@ export function clearContainer(container) {
   // TODO Implement this
 }
 
-export function getInstanceFromNode(node) {
-  throw new Error('Not implemented.');
+export function getInstanceFromNode(node): null {
+  return null;
 }
 
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -26,7 +26,8 @@ import type {
   PreinitModuleScriptOptions,
 } from 'react-dom/src/shared/ReactDOMTypes';
 
-import {NotPending} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+import {NotPending} from '../shared/ReactDOMFormActions';
+
 import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostContext';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
@@ -106,6 +107,10 @@ import {requestFormReset as requestFormResetOnFiber} from 'react-reconciler/src/
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
 
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-dom';
+export const extraDevToolsConfig = null;
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -616,9 +621,7 @@ const localRequestAnimationFrame =
     ? requestAnimationFrame
     : scheduleTimeout;
 
-export function getInstanceFromNode(node: HTMLElement): null | Object {
-  return getClosestInstanceFromNode(node) || null;
-}
+export {getClosestInstanceFromNode as getInstanceFromNode};
 
 export function preparePortalMount(portalInstance: Instance): void {
   listenToAllSupportedEvents(portalInstance);
diff --git a/packages/react-dom/src/client/ReactDOMClient.js b/packages/react-dom/src/client/ReactDOMClient.js
@@ -16,7 +16,6 @@ import {
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
 
-import {getClosestInstanceFromNode} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
 import Internals from 'shared/ReactDOMSharedInternals';
 
 import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
@@ -52,12 +51,7 @@ Internals.findDOMNode = findDOMNode;
 
 export {ReactVersion as version, createRoot, hydrateRoot};
 
-const foundDevTools = injectIntoDevTools({
-  findFiberByHostInstance: getClosestInstanceFromNode,
-  bundleType: __DEV__ ? 1 : 0,
-  version: ReactVersion,
-  rendererPackageName: 'react-dom',
-});
+const foundDevTools = injectIntoDevTools();
 
 if (__DEV__) {
   if (!foundDevTools && canUseDOM && window.top === window.self) {
diff --git a/packages/react-dom/src/client/ReactDOMClientFB.js b/packages/react-dom/src/client/ReactDOMClientFB.js
@@ -29,7 +29,6 @@ import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomor
 ensureCorrectIsomorphicReactVersion();
 
 import {
-  getClosestInstanceFromNode,
   getInstanceFromNode,
   getNodeFromInstance,
   getFiberCurrentPropsFromNode,
@@ -147,12 +146,7 @@ Internals.Events /* Events */ = [
   unstable_batchedUpdates,
 ];
 
-const foundDevTools = injectIntoDevTools({
-  findFiberByHostInstance: getClosestInstanceFromNode,
-  bundleType: __DEV__ ? 1 : 0,
-  version: ReactVersion,
-  rendererPackageName: 'react-dom',
-});
+const foundDevTools = injectIntoDevTools();
 
 if (__DEV__) {
   if (!foundDevTools && canUseDOM && window.top === window.self) {
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
@@ -28,14 +28,8 @@ import {
 
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
-import ReactVersion from 'shared/ReactVersion';
 
-import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
-import {
-  getInspectorDataForViewTag,
-  getInspectorDataForViewAtPoint,
-  getInspectorDataForInstance,
-} from './ReactNativeFiberInspector';
+import {getInspectorDataForInstance} from './ReactNativeFiberInspector';
 import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {
   findHostInstance_DEPRECATED,
@@ -209,18 +203,4 @@ export {
   isChildPublicInstance,
 };
 
-injectIntoDevTools({
-  // $FlowExpectedError[incompatible-call] The type of `Instance` in `getClosestInstanceFromNode` does not match in Fabric and the legacy renderer, so it fails to typecheck here.
-  findFiberByHostInstance: getClosestInstanceFromNode,
-  bundleType: __DEV__ ? 1 : 0,
-  version: ReactVersion,
-  rendererPackageName: 'react-native-renderer',
-  rendererConfig: {
-    getInspectorDataForInstance,
-    getInspectorDataForViewTag: getInspectorDataForViewTag,
-    getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
-      null,
-      findNodeHandle,
-    ),
-  },
-});
+injectIntoDevTools();
diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
@@ -48,11 +48,27 @@ const {
   unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
 } = nativeFabricUIManager;
 
+import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
+
+import {
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+  getInspectorDataForInstance,
+} from './ReactNativeFiberInspector';
+
 import {
   enableFabricCompleteRootInCommitPhase,
   passChildrenWhenCloningPersistedNodes,
 } from 'shared/ReactFeatureFlags';
 
+export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
+export const rendererPackageName = 'react-native-renderer';
+export const extraDevToolsConfig = {
+  getInspectorDataForInstance,
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+};
+
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 // Counter for uniquely identifying views.
@@ -487,9 +503,7 @@ export function replaceContainerChildren(
   }
 }
 
-export function getInstanceFromNode(node: any): empty {
-  throw new Error('Not yet implemented.');
-}
+export {getClosestInstanceFromNode as getInstanceFromNode};
 
 export function beforeActiveInstanceBlur(
   internalInstanceHandle: InternalInstanceHandle,
diff --git a/packages/react-native-renderer/src/ReactFiberConfigNative.js b/packages/react-native-renderer/src/ReactFiberConfigNative.js
@@ -21,6 +21,7 @@ import {
   precacheFiberNode,
   uncacheFiberNode,
   updateFiberProps,
+  getClosestInstanceFromNode,
 } from './ReactNativeComponentTree';
 import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
@@ -31,6 +32,20 @@ import {
 } from 'react-reconciler/src/ReactEventPriorities';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
+import {
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+  getInspectorDataForInstance,
+} from './ReactNativeFiberInspector';
+
+export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
+export const rendererPackageName = 'react-native-renderer';
+export const extraDevToolsConfig = {
+  getInspectorDataForInstance,
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+};
+
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 export type Type = string;
@@ -506,9 +521,7 @@ export function unhideTextInstance(
   throw new Error('Not yet implemented.');
 }
 
-export function getInstanceFromNode(node: any): empty {
-  throw new Error('Not yet implemented.');
-}
+export {getClosestInstanceFromNode as getInstanceFromNode};
 
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -23,7 +23,10 @@ import {
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
-import {getNodeFromInternalInstanceHandle} from './ReactNativePublicCompat';
+import {
+  getNodeFromInternalInstanceHandle,
+  findNodeHandle,
+} from './ReactNativePublicCompat';
 import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactFiberComponentStack';
 
 const emptyObject = {};
@@ -35,7 +38,7 @@ if (__DEV__) {
 function createHierarchy(fiberHierarchy) {
   return fiberHierarchy.map(fiber => ({
     name: getComponentNameFromType(fiber.type),
-    getInspectorData: findNodeHandle => {
+    getInspectorData: () => {
       return {
         props: getHostProps(fiber),
         measure: callback => {
@@ -49,19 +52,15 @@ function createHierarchy(fiberHierarchy) {
           if (node) {
             nativeFabricUIManager.measure(node, callback);
           } else {
-            return UIManager.measure(
-              getHostNode(fiber, findNodeHandle),
-              callback,
-            );
+            return UIManager.measure(getHostNode(fiber), callback);
           }
         },
       };
     },
   }));
 }
 
-// $FlowFixMe[missing-local-annot]
-function getHostNode(fiber: Fiber | null, findNodeHandle) {
+function getHostNode(fiber: Fiber | null) {
   if (__DEV__ || enableGetInspectorDataForInstanceInProduction) {
     let hostNode;
     // look for children first for the hostNode
@@ -179,7 +178,6 @@ function getInspectorDataForViewTag(viewTag: number): InspectorData {
 }
 
 function getInspectorDataForViewAtPoint(
-  findNodeHandle: (componentOrHandle: any) => ?number,
   inspectedView: Object,
   locationX: number,
   locationY: number,
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -32,16 +32,11 @@ import {
   setBatchingImplementation,
   batchedUpdates,
 } from './legacy-events/ReactGenericBatching';
-import ReactVersion from 'shared/ReactVersion';
 // Modules provided by RN:
 import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
-import {
-  getInspectorDataForViewTag,
-  getInspectorDataForViewAtPoint,
-  getInspectorDataForInstance,
-} from './ReactNativeFiberInspector';
+import {getInspectorDataForInstance} from './ReactNativeFiberInspector';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import {
   findHostInstance_DEPRECATED,
@@ -233,17 +228,4 @@ export {
   isChildPublicInstance,
 };
 
-injectIntoDevTools({
-  findFiberByHostInstance: getClosestInstanceFromNode,
-  bundleType: __DEV__ ? 1 : 0,
-  version: ReactVersion,
-  rendererPackageName: 'react-native-renderer',
-  rendererConfig: {
-    getInspectorDataForInstance,
-    getInspectorDataForViewTag: getInspectorDataForViewTag,
-    getInspectorDataForViewAtPoint: getInspectorDataForViewAtPoint.bind(
-      null,
-      findNodeHandle,
-    ),
-  },
-});
+injectIntoDevTools();
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -42,6 +42,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import ReactVersion from 'shared/ReactVersion';
 
 type Container = {
   rootID: string,
@@ -367,6 +368,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   }
 
   const sharedHostConfig = {
+    rendererVersion: ReactVersion,
+    rendererPackageName: 'react-noop',
+
     supportsSingletons: false,
 
     getRootHostContext() {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.js
@@ -17,7 +17,6 @@ import type {EventPriority} from './ReactEventPriorities';
 // React which this hook might be in.
 type DevToolsProfilingHooks = any;
 
-import {getLabelForLane, TotalLanes} from 'react-reconciler/src/ReactFiberLane';
 import {DidCapture} from './ReactFiberFlags';
 import {
   consoleManagedByDevToolsDuringStrictMode,
@@ -75,17 +74,6 @@ export function injectInternals(internals: Object): boolean {
     return true;
   }
   try {
-    if (enableSchedulingProfiler) {
-      // Conditionally inject these hooks only if Timeline profiler is supported by this build.
-      // This gives DevTools a way to feature detect that isn't tied to version number
-      // (since profiling and timeline are controlled by different feature flags).
-      internals = {
-        ...internals,
-        getLaneLabelMap,
-        injectProfilingHooks,
-      };
-    }
-
     rendererID = hook.inject(internals);
 
     // We have successfully injected, so now it is safe to set up hooks.
@@ -235,27 +223,12 @@ export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
 
 // Profiler API hooks
 
-function injectProfilingHooks(profilingHooks: DevToolsProfilingHooks): void {
+export function injectProfilingHooks(
+  profilingHooks: DevToolsProfilingHooks,
+): void {
   injectedProfilingHooks = profilingHooks;
 }
 
-function getLaneLabelMap(): Map<Lane, string> | null {
-  if (enableSchedulingProfiler) {
-    const map: Map<Lane, string> = new Map();
-
-    let lane = 1;
-    for (let index = 0; index < TotalLanes; index++) {
-      const label = ((getLabelForLane(lane): any): string);
-      map.set(lane, label);
-      lane *= 2;
-    }
-
-    return map;
-  } else {
-    return null;
-  }
-}
-
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
diff --git a/packages/react-test-renderer/src/ReactFiberConfigTestHost.js b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
