chore[react-devtools]: extract getDispatcherRef into a separate module

Author: hoxyq

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

@@ -25,7 +25,8 @@ import {
   ANSI_STYLE_DIMMING_TEMPLATE,
   ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
 } from 'react-devtools-shared/src/constants';
-import {getInternalReactConstants, getDispatcherRef} from './fiber/renderer';
+import getDispatcherRef from 'react-devtools-shared/src/backend/fiber/getDispatcherRef';
+import {getInternalReactConstants} from './fiber/renderer';
 import {
   getStackByFiberInDevAndProd,
   getOwnerStackByFiberInDev,
@@ -227,9 +228,13 @@ export function patch({
           // Search for the first renderer that has a current Fiber.
           // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
           // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-          for (const renderer of injectedRenderers.values()) {
+          for (const [
+            renderer,
+            injectedRendererInterface,
+          ] of injectedRenderers.entries()) {
             const currentDispatcherRef = getDispatcherRef(renderer);
-            const {getCurrentFiber, onErrorOrWarning, workTagMap} = renderer;
+            const {getCurrentFiber, onErrorOrWarning, workTagMap} =
+              injectedRendererInterface;
             const current: ?Fiber = getCurrentFiber();
             if (current != null) {
               try {

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

@@ -0,0 +1,40 @@
+/**
+ * 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,
+  ReactRenderer,
+} from 'react-devtools-shared/src/backend/types';
+
+// Do not add / import anything to this file.
+// This function is used from multiple places, including hook.
+
+export default function getDispatcherRef(
+  renderer: ReactRenderer,
+): 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: any).current;
+      },
+      set H(value) {
+        (injectedRef: any).current = value;
+      },
+    };
+  }
+  return (injectedRef: any);
+}

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

@@ -122,8 +122,6 @@ import type {
   RendererInterface,
   SerializedElement,
   WorkTagMap,
-  CurrentDispatcherRef,
-  LegacyDispatcherRef,
 } from '../types';
 import type {
   ComponentFilter,
@@ -133,6 +131,7 @@ import type {
 import type {Source} from 'react-devtools-shared/src/shared/types';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 import getWorkTagMap from 'react-devtools-shared/src/backend/fiber/getWorkTagMap';
+import getDispatcherRef from 'react-devtools-shared/src/backend/fiber/getDispatcherRef';
 
 // Kinds
 const FIBER_INSTANCE = 0;
@@ -204,31 +203,6 @@ type ReactPriorityLevelsType = {
   NoPriority: number,
 };
 
-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: any).current;
-      },
-      set H(value) {
-        (injectedRef: any).current = value;
-      },
-    };
-  }
-  return (injectedRef: any);
-}
-
 function getFiberFlags(fiber: Fiber): number {
   // The name of this field changed from "effectTag" to "flags"
   return fiber.flags !== undefined ? fiber.flags : (fiber: any).effectTag;