Flatten ReactSharedInternals

Author: sebmarkbage

packages/react-cache/src/ReactCacheOld.js

@@ -44,12 +44,11 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-const ReactCurrentDispatcher =
-  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
-    .ReactCurrentDispatcher;
+const SharedInternals =
+  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
 function readContext(Context: ReactContext<mixed>) {
-  const dispatcher = ReactCurrentDispatcher.current;
+  const dispatcher = SharedInternals.H;
   if (dispatcher === null) {
     // This wasn't being minified but we're going to retire this package anyway.
     // eslint-disable-next-line react-internal/prod-error-codes

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

@@ -37,7 +37,7 @@ import {
 } from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
-type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
+type CurrentDispatcherRef = typeof ReactSharedInternals;
 
 // Used to track hooks called during a render
 
@@ -1075,11 +1075,11 @@ export function inspectHooks<Props>(
   // 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.ReactCurrentDispatcher;
+    currentDispatcher = ReactSharedInternals;
   }
 
-  const previousDispatcher = currentDispatcher.current;
-  currentDispatcher.current = DispatcherProxy;
+  const previousDispatcher = currentDispatcher.H;
+  currentDispatcher.H = DispatcherProxy;
 
   let readHookLog;
   let ancestorStackError;
@@ -1093,7 +1093,7 @@ export function inspectHooks<Props>(
     readHookLog = hookLog;
     hookLog = [];
     // $FlowFixMe[incompatible-use] found when upgrading Flow
-    currentDispatcher.current = previousDispatcher;
+    currentDispatcher.H = previousDispatcher;
   }
   const rootStack = ErrorStackParser.parse(ancestorStackError);
   return buildTree(rootStack, readHookLog);
@@ -1129,9 +1129,9 @@ function inspectHooksOfForwardRef<Props, Ref>(
   ref: Ref,
   currentDispatcher: CurrentDispatcherRef,
 ): HooksTree {
-  const previousDispatcher = currentDispatcher.current;
+  const previousDispatcher = currentDispatcher.H;
   let readHookLog;
-  currentDispatcher.current = DispatcherProxy;
+  currentDispatcher.H = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();
@@ -1141,7 +1141,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
   } finally {
     readHookLog = hookLog;
     hookLog = [];
-    currentDispatcher.current = previousDispatcher;
+    currentDispatcher.H = previousDispatcher;
   }
   const rootStack = ErrorStackParser.parse(ancestorStackError);
   return buildTree(rootStack, readHookLog);
@@ -1169,7 +1169,7 @@ export function inspectHooksOfFiber(
   // 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.ReactCurrentDispatcher;
+    currentDispatcher = ReactSharedInternals;
   }
 
   if (

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js

@@ -453,39 +453,6 @@ describe('ReactHooksInspection', () => {
     `);
   });
 
-  it('should support an injected dispatcher', () => {
-    const initial = {
-      useState() {
-        throw new Error("Should've been proxied");
-      },
-    };
-    let current = initial;
-    let getterCalls = 0;
-    const setterCalls = [];
-    const FakeDispatcherRef = {
-      get current() {
-        getterCalls++;
-        return current;
-      },
-      set current(value) {
-        setterCalls.push(value);
-        current = value;
-      },
-    };
-
-    function Foo(props) {
-      const [state] = FakeDispatcherRef.current.useState('hello world');
-      return <div>{state}</div>;
-    }
-
-    ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
-
-    expect(getterCalls).toBe(2);
-    expect(setterCalls).toHaveLength(2);
-    expect(setterCalls[0]).not.toBe(initial);
-    expect(setterCalls[1]).toBe(initial);
-  });
-
   it('should inspect use() calls for Promise and Context', async () => {
     const MyContext = React.createContext('hi');
     const promise = Promise.resolve('world');

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -2345,61 +2345,6 @@ describe('ReactHooksInspectionIntegration', () => {
     `);
   });
 
-  it('should support an injected dispatcher', async () => {
-    function Foo(props) {
-      const [state] = React.useState('hello world');
-      return <div>{state}</div>;
-    }
-
-    const initial = {};
-    let current = initial;
-    let getterCalls = 0;
-    const setterCalls = [];
-    const FakeDispatcherRef = {
-      get current() {
-        getterCalls++;
-        return current;
-      },
-      set current(value) {
-        setterCalls.push(value);
-        current = value;
-      },
-    };
-
-    let renderer;
-    await act(() => {
-      renderer = ReactTestRenderer.create(<Foo />, {
-        unstable_isConcurrent: true,
-      });
-    });
-    const childFiber = renderer.root._currentFiber();
-
-    let didCatch = false;
-
-    try {
-      ReactDebugTools.inspectHooksOfFiber(childFiber, FakeDispatcherRef);
-    } catch (error) {
-      expect(error.message).toBe('Error rendering inspected component');
-      expect(error.cause).toBeInstanceOf(Error);
-      expect(error.cause.message).toBe(
-        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
-          ' one of the following reasons:\n' +
-          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-          '2. You might be breaking the Rules of Hooks\n' +
-          '3. You might have more than one copy of React in the same app\n' +
-          'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
-      );
-      didCatch = true;
-    }
-    // avoid false positive if no error was thrown at all
-    expect(didCatch).toBe(true);
-
-    expect(getterCalls).toBe(1);
-    expect(setterCalls).toHaveLength(2);
-    expect(setterCalls[0]).not.toBe(initial);
-    expect(setterCalls[1]).toBe(initial);
-  });
-
   // This test case is based on an open source bug report:
   // https://github.com/facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
   it('should properly advance the current hook for useContext', async () => {

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

@@ -86,8 +86,8 @@ export function describeNativeComponentFrame(
   // Note that unlike the code this was forked from (in ReactComponentStackFrame)
   // DevTools should override the dispatcher even when DevTools is compiled in production mode,
   // because the app itself may be in development mode and log errors/warnings.
-  const previousDispatcher = currentDispatcherRef.current;
-  currentDispatcherRef.current = null;
+  const previousDispatcher = currentDispatcherRef.H;
+  currentDispatcherRef.H = null;
   disableLogs();
 
   // NOTE: keep in sync with the implementation in ReactComponentStackFrame
@@ -270,7 +270,7 @@ export function describeNativeComponentFrame(
 
     Error.prepareStackTrace = previousPrepareStackTrace;
 
-    currentDispatcherRef.current = previousDispatcher;
+    currentDispatcherRef.H = previousDispatcher;
     reenableLogs();
   }
   // Fallback to just using the name if we couldn't make it throw.

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

@@ -9,14 +9,15 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
+  LegacyDispatcherRef,
   CurrentDispatcherRef,
   ReactRenderer,
   WorkTagMap,
   ConsolePatchSettings,
 } from './types';
 import {format, formatWithStyles} from './utils';
 
-import {getInternalReactConstants} from './renderer';
+import {getInternalReactConstants, getDispatcherRef} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 import {castBool, castBrowserTheme} from '../utils';
@@ -75,7 +76,7 @@ type OnErrorOrWarning = (
 const injectedRenderers: Map<
   ReactRenderer,
   {
-    currentDispatcherRef: CurrentDispatcherRef,
+    currentDispatcherRef: LegacyDispatcherRef | CurrentDispatcherRef,
     getCurrentFiber: () => Fiber | null,
     onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
@@ -215,12 +216,9 @@ 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 {
-            currentDispatcherRef,
-            getCurrentFiber,
-            onErrorOrWarning,
-            workTagMap,
-          } of injectedRenderers.values()) {
+          for (const renderer of injectedRenderers.values()) {
+            const currentDispatcherRef = getDispatcherRef(renderer);
+            const {getCurrentFiber, onErrorOrWarning, workTagMap} = renderer;
             const current: ?Fiber = getCurrentFiber();
             if (current != null) {
               try {
@@ -241,7 +239,7 @@ export function patch({
                   const componentStack = getStackByFiberInDevAndProd(
                     workTagMap,
                     current,
-                    currentDispatcherRef,
+                    (currentDispatcherRef: any),
                   );
                   if (componentStack !== '') {
                     if (isStrictModeOverride(args, method)) {

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

@@ -119,6 +119,8 @@ import type {
   RendererInterface,
   SerializedElement,
   WorkTagMap,
+  CurrentDispatcherRef,
+  LegacyDispatcherRef,
 } from './types';
 import type {
   ComponentFilter,
@@ -140,6 +142,31 @@ 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;
@@ -694,7 +721,7 @@ export function attach(
       getDisplayNameForFiber,
       getIsProfiling: () => isProfiling,
       getLaneLabelMap,
-      currentDispatcherRef: renderer.currentDispatcherRef,
+      currentDispatcherRef: getDispatcherRef(renderer),
       workTagMap: ReactTypeOfWork,
       reactVersion: version,
     });
@@ -3344,10 +3371,7 @@ export function attach(
       }
 
       try {
-        hooks = inspectHooksOfFiber(
-          fiber,
-          (renderer.currentDispatcherRef: any),
-        );
+        hooks = inspectHooksOfFiber(fiber, getDispatcherRef(renderer));
       } finally {
         // Restore original console functionality.
         for (const method in originalConsoleMethods) {
@@ -4571,7 +4595,7 @@ export function attach(
   function getComponentStackForFiber(fiber: Fiber): string | null {
     let componentStack = fiberToComponentStackMap.get(fiber);
     if (componentStack == null) {
-      const dispatcherRef = renderer.currentDispatcherRef;
+      const dispatcherRef = getDispatcherRef(renderer);
       if (dispatcherRef == null) {
         return null;
       }

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

@@ -87,7 +87,12 @@ export type NativeType = Object;
 export type RendererID = number;
 
 type Dispatcher = any;
-export type CurrentDispatcherRef = {current: null | Dispatcher};
+export type LegacyDispatcherRef = {current: null | Dispatcher};
+type SharedInternalsSubset = {
+  H: null | Dispatcher,
+  ...
+};
+export type CurrentDispatcherRef = SharedInternalsSubset;
 
 export type GetDisplayNameForFiberID = (
   id: number,
@@ -155,7 +160,7 @@ export type ReactRenderer = {
   scheduleUpdate?: ?(fiber: Object) => void,
   setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,
   // Only injected by React v16.8+ in order to support hooks inspection.
-  currentDispatcherRef?: CurrentDispatcherRef,
+  currentDispatcherRef?: LegacyDispatcherRef | CurrentDispatcherRef,
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,

packages/react-devtools-shared/src/devtools/cache.js

@@ -59,11 +59,11 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-const ReactCurrentDispatcher = (React: any)
-  .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
+const ReactSharedInternals = (React: any)
+  .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
 function readContext(Context: ReactContext<null>) {
-  const dispatcher = ReactCurrentDispatcher.current;
+  const dispatcher = ReactSharedInternals.H;
   if (dispatcher === null) {
     throw new Error(
       'react-cache: read and preload may only be called from within a ' +