[DevTools] Extract getDispatcherRef and fork inspectHooks() to avoid pulling React into the build artifact (react#36681)

This is just a refactor to unblock the work on the Facade. This PR
contains 2 changes:
1. `getDispatcherRef` was extracted from `fiber/renderer` into its own
shared module.
2. `inspectHooksOfFiber` was forked. The new version specifies
dispatcher as required and doesn't set it to default as
`ReactSharedInternals`, which are pulling the whole `react` module as
part of them:


https://github.com/facebook/react/blob/63e95c2b51d9e9b8b9e15d656c1e11c393277699/packages/shared/ReactSharedInternals.js#L10-L15

Author: hoxyq

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -1194,17 +1194,13 @@ function handleRenderFunctionError(error: any): void {
   throw wrapperError;
 }
 
-export function inspectHooks<Props>(
+// Shared implementation. Requires an explicit dispatcher and never references
+// ReactSharedInternals, so importing it does not pull React into the bundle.
+function inspectHooksImpl<Props>(
   renderFunction: Props => React$Node,
   props: Props,
-  currentDispatcher: ?CurrentDispatcherRef,
+  currentDispatcher: CurrentDispatcherRef,
 ): HooksTree {
-  // DevTools will pass the current renderer's injected dispatcher.
-  // Other apps might compile debug hooks as part of their app though.
-  if (currentDispatcher == null) {
-    currentDispatcher = ReactSharedInternals;
-  }
-
   const previousDispatcher = currentDispatcher.H;
   currentDispatcher.H = DispatcherProxy;
 
@@ -1229,6 +1225,31 @@ export function inspectHooks<Props>(
   return buildTree(rootStack, readHookLog);
 }
 
+// DevTools will pass the current renderer's injected dispatcher. Other apps
+// might compile debug hooks as part of their app though, so default to the
+// running React's shared internals when no dispatcher is provided.
+export function inspectHooks<Props>(
+  renderFunction: Props => React$Node,
+  props: Props,
+  currentDispatcher: ?CurrentDispatcherRef,
+): HooksTree {
+  return inspectHooksImpl(
+    renderFunction,
+    props,
+    currentDispatcher ?? ReactSharedInternals,
+  );
+}
+
+// Like inspectHooks but requires an explicit dispatcher and never references
+// ReactSharedInternals, so importing it does not pull React into the bundle.
+export function inspectHooksWithoutDefaultDispatcher<Props>(
+  renderFunction: Props => React$Node,
+  props: Props,
+  currentDispatcher: CurrentDispatcherRef,
+): HooksTree {
+  return inspectHooksImpl(renderFunction, props, currentDispatcher);
+}
+
 function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
   let current: null | Fiber = fiber;
   while (current) {
@@ -1295,16 +1316,13 @@ function resolveDefaultProps(Component: any, baseProps: any) {
   return baseProps;
 }
 
-export function inspectHooksOfFiber(
+// Shared implementation. Requires an explicit dispatcher and never references
+// ReactSharedInternals (it delegates to inspectHooksImpl), so importing it does
+// not pull React into the bundle.
+function inspectHooksOfFiberImpl(
   fiber: Fiber,
-  currentDispatcher: ?CurrentDispatcherRef,
+  currentDispatcher: CurrentDispatcherRef,
 ): HooksTree {
-  // DevTools will pass the current renderer's injected dispatcher.
-  // Other apps might compile debug hooks as part of their app though.
-  if (currentDispatcher == null) {
-    currentDispatcher = ReactSharedInternals;
-  }
-
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
@@ -1381,7 +1399,7 @@ export function inspectHooksOfFiber(
       );
     }
 
-    return inspectHooks(type, props, currentDispatcher);
+    return inspectHooksImpl(type, props, currentDispatcher);
   } finally {
     currentFiber = null;
     currentHook = null;
@@ -1392,3 +1410,27 @@ export function inspectHooksOfFiber(
     restoreContexts(contextMap);
   }
 }
+
+// DevTools will pass the current renderer's injected dispatcher. Other apps
+// might compile debug hooks as part of their app though, so default to the
+// running React's shared internals when no dispatcher is provided.
+export function inspectHooksOfFiber(
+  fiber: Fiber,
+  currentDispatcher: ?CurrentDispatcherRef,
+): HooksTree {
+  return inspectHooksOfFiberImpl(
+    fiber,
+    currentDispatcher ?? ReactSharedInternals,
+  );
+}
+
+// Like inspectHooksOfFiber but requires an explicit dispatcher and never
+// references ReactSharedInternals. Callers that always have the renderer's
+// injected dispatcher (e.g. react-devtools-facade) can use this to avoid
+// pulling React into their bundle.
+export function inspectHooksOfFiberWithoutDefaultDispatcher(
+  fiber: Fiber,
+  currentDispatcher: CurrentDispatcherRef,
+): HooksTree {
+  return inspectHooksOfFiberImpl(fiber, currentDispatcher);
+}

packages/react-debug-tools/src/ReactDebugTools.js

@@ -7,6 +7,16 @@
  * @flow
  */
 
-import {inspectHooks, inspectHooksOfFiber} from './ReactDebugHooks';
+import {
+  inspectHooks,
+  inspectHooksWithoutDefaultDispatcher,
+  inspectHooksOfFiber,
+  inspectHooksOfFiberWithoutDefaultDispatcher,
+} from './ReactDebugHooks';
 
-export {inspectHooks, inspectHooksOfFiber};
+export {
+  inspectHooks,
+  inspectHooksWithoutDefaultDispatcher,
+  inspectHooksOfFiber,
+  inspectHooksOfFiberWithoutDefaultDispatcher,
+};

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -171,8 +171,6 @@ import type {
   RendererInterface,
   SerializedElement,
   SerializedAsyncInfo,
-  CurrentDispatcherRef,
-  LegacyDispatcherRef,
   ProfilingSettings,
 } from '../types';
 import type {
@@ -194,6 +192,7 @@ import {
   VIRTUAL_INSTANCE,
   FILTERED_FIBER_INSTANCE,
 } from './shared/DevToolsFiberTypes';
+import {getDispatcherRef} from '../shared/DevToolsReactDispatcher';
 import {getSourceLocationByFiber} from './DevToolsFiberComponentStack';
 import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
 
@@ -275,31 +274,6 @@ function createSuspenseNode(
   });
 }
 
-export function getDispatcherRef(renderer: {
-  +currentDispatcherRef?: LegacyDispatcherRef | CurrentDispatcherRef,
-  ...
-}): void | CurrentDispatcherRef {
-  if (renderer.currentDispatcherRef === undefined) {
-    return undefined;
-  }
-  const injectedRef = renderer.currentDispatcherRef;
-  if (
-    typeof injectedRef.H === 'undefined' &&
-    typeof injectedRef.current !== 'undefined'
-  ) {
-    // We got a legacy dispatcher injected, let's create a wrapper proxy to translate.
-    return {
-      get H() {
-        return (injectedRef as any).current;
-      },
-      set H(value) {
-        (injectedRef as any).current = value;
-      },
-    };
-  }
-  return injectedRef as any;
-}
-
 // All environment names we've seen so far. This lets us create a list of filters to apply.
 // This should ideally include env of filtered Components too so that you can add those as
 // filters at the same time as removing some other filter.

packages/react-devtools-shared/src/backend/shared/DevToolsReactDispatcher.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {CurrentDispatcherRef, LegacyDispatcherRef} from '../types';
+
+export function getDispatcherRef(renderer: {
+  +currentDispatcherRef?: LegacyDispatcherRef | CurrentDispatcherRef,
+  ...
+}): void | CurrentDispatcherRef {
+  if (renderer.currentDispatcherRef === undefined) {
+    return undefined;
+  }
+  const injectedRef = renderer.currentDispatcherRef;
+  if (
+    typeof injectedRef.H === 'undefined' &&
+    typeof injectedRef.current !== 'undefined'
+  ) {
+    // We got a legacy dispatcher injected, let's create a wrapper proxy to translate.
+    return {
+      get H() {
+        return (injectedRef as any).current;
+      },
+      set H(value) {
+        (injectedRef as any).current = value;
+      },
+    };
+  }
+  return injectedRef as any;
+}