Merge branch 'main' into feat/devtools/unwrap-useformstate

Author: eps1lon

packages/react-art/src/__tests__/ReactART-test.js

@@ -22,11 +22,21 @@ import Circle from 'react-art/Circle';
 import Rectangle from 'react-art/Rectangle';
 import Wedge from 'react-art/Wedge';
 
-let ReactDOMClient;
-let act;
-let ReactTestRenderer;
-let ReactNoop;
-let Scheduler;
+// Isolate DOM renderer.
+jest.resetModules();
+
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
+
+// Isolate test renderer.
+jest.resetModules();
+const ReactTestRenderer = require('react-test-renderer');
+
+// Isolate the noop renderer
+jest.resetModules();
+const ReactNoop = require('react-noop-renderer');
+const Scheduler = require('scheduler');
+
 let Group;
 let Shape;
 let Surface;
@@ -63,21 +73,6 @@ describe('ReactART', () => {
   let container;
 
   beforeEach(() => {
-    // Isolate DOM renderer.
-    jest.resetModules();
-
-    ReactDOMClient = require('react-dom/client');
-    act = require('internal-test-utils').act;
-
-    // Isolate test renderer.
-    jest.resetModules();
-    ReactTestRenderer = require('react-test-renderer');
-
-    // Isolate the noop renderer
-    jest.resetModules();
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-
     container = document.createElement('div');
     document.body.appendChild(container);
 

packages/react-client/src/ReactFlightReplyClient.js

@@ -14,10 +14,12 @@ import type {
   RejectedThenable,
   ReactCustomFormAction,
 } from 'shared/ReactTypes';
+import {enableRenderableContext} from 'shared/ReactFeatureFlags';
 
 import {
   REACT_ELEMENT_TYPE,
   REACT_LAZY_TYPE,
+  REACT_CONTEXT_TYPE,
   REACT_PROVIDER_TYPE,
   getIteratorFn,
 } from 'shared/ReactSymbols';
@@ -302,7 +304,10 @@ export function processReply(
             'React Lazy cannot be passed to Server Functions from the Client.%s',
             describeObjectForErrorMessage(parent, key),
           );
-        } else if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
+        } else if (
+          (value: any).$$typeof ===
+          (enableRenderableContext ? REACT_CONTEXT_TYPE : REACT_PROVIDER_TYPE)
+        ) {
           console.error(
             'React Context Providers cannot be passed to Server Functions from the Client.%s',
             describeObjectForErrorMessage(parent, key),

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -42,6 +42,7 @@ let assertLog;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
+    jest.resetModules();
     jest.mock('react', () => require('react/react.react-server'));
     ReactServer = require('react');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');

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

@@ -10,7 +10,6 @@
 import type {
   Awaited,
   ReactContext,
-  ReactProviderType,
   StartTransitionOptions,
   Usable,
   Thenable,
@@ -976,8 +975,11 @@ function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
   let current: null | Fiber = fiber;
   while (current) {
     if (current.tag === ContextProvider) {
-      const providerType: ReactProviderType<any> = current.type;
-      const context: ReactContext<any> = providerType._context;
+      let context: ReactContext<any> = current.type;
+      if ((context: any)._context !== undefined) {
+        // Support inspection of pre-19+ providers.
+        context = (context: any)._context;
+      }
       if (!contextMap.has(context)) {
         // Store the current value that we're going to restore later.
         contextMap.set(context, context._currentValue);

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

@@ -34,6 +34,8 @@ describe('React hooks DevTools integration', () => {
       onCommitFiberUnmount: () => {},
     };
 
+    jest.resetModules();
+
     React = require('react');
     ReactDebugTools = require('react-debug-tools');
     ReactTestRenderer = require('react-test-renderer');

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

@@ -15,6 +15,7 @@ let ReactDebugTools;
 
 describe('ReactHooksInspection', () => {
   beforeEach(() => {
+    jest.resetModules();
     React = require('react');
     ReactDebugTools = require('react-debug-tools');
   });

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

@@ -19,6 +19,7 @@ let useMemoCache;
 
 describe('ReactHooksInspectionIntegration', () => {
   beforeEach(() => {
+    jest.resetModules();
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
     ReactDOM = require('react-dom');

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -924,6 +924,8 @@ describe('console', () => {
 
 describe('console error', () => {
   beforeEach(() => {
+    jest.resetModules();
+
     const Console = require('react-devtools-shared/src/backend/console');
     patchConsole = Console.patch;
     unpatchConsole = Console.unpatch;

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

@@ -51,6 +51,8 @@ export const PROFILER_SYMBOL_STRING = 'Symbol(react.profiler)';
 export const PROVIDER_NUMBER = 0xeacd;
 export const PROVIDER_SYMBOL_STRING = 'Symbol(react.provider)';
 
+export const CONSUMER_SYMBOL_STRING = 'Symbol(react.consumer)';
+
 export const SCOPE_NUMBER = 0xead7;
 export const SCOPE_SYMBOL_STRING = 'Symbol(react.scope)';
 

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

@@ -79,6 +79,7 @@ import {
   PROVIDER_SYMBOL_STRING,
   CONTEXT_NUMBER,
   CONTEXT_SYMBOL_STRING,
+  CONSUMER_SYMBOL_STRING,
   STRICT_MODE_NUMBER,
   STRICT_MODE_SYMBOL_STRING,
   PROFILER_NUMBER,
@@ -525,6 +526,15 @@ export function getInternalReactConstants(version: string): {
           case CONTEXT_NUMBER:
           case CONTEXT_SYMBOL_STRING:
           case SERVER_CONTEXT_SYMBOL_STRING:
+            if (
+              fiber.type._context === undefined &&
+              fiber.type.Provider === fiber.type
+            ) {
+              // In 19+, Context.Provider === Context, so this is a provider.
+              resolvedContext = fiber.type;
+              return `${resolvedContext.displayName || 'Context'}.Provider`;
+            }
+
             // 16.3-16.5 read from "type" because the Consumer is the actual context object.
             // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
             // NOTE Keep in sync with inspectElementRaw()
@@ -533,6 +543,10 @@ export function getInternalReactConstants(version: string): {
             // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
             // If you change the name, figure out a more resilient way to detect it.
             return `${resolvedContext.displayName || 'Context'}.Consumer`;
+          case CONSUMER_SYMBOL_STRING:
+            // 19+
+            resolvedContext = fiber.type._context;
+            return `${resolvedContext.displayName || 'Context'}.Consumer`;
           case STRICT_MODE_NUMBER:
           case STRICT_MODE_SYMBOL_STRING:
             return null;
@@ -3178,8 +3192,14 @@ export function attach(
         }
       }
     } else if (
-      typeSymbol === CONTEXT_NUMBER ||
-      typeSymbol === CONTEXT_SYMBOL_STRING
+      // Detect pre-19 Context Consumers
+      (typeSymbol === CONTEXT_NUMBER || typeSymbol === CONTEXT_SYMBOL_STRING) &&
+      !(
+        // In 19+, CONTEXT_SYMBOL_STRING means a Provider instead.
+        // It will be handled in a different branch below.
+        // Eventually, this entire branch can be removed.
+        (type._context === undefined && type.Provider === type)
+      )
     ) {
       // 16.3-16.5 read from "type" because the Consumer is the actual context object.
       // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
@@ -3209,6 +3229,35 @@ export function attach(
           }
         }
 
+        current = current.return;
+      }
+    } else if (
+      // Detect 19+ Context Consumers
+      typeSymbol === CONSUMER_SYMBOL_STRING
+    ) {
+      // This branch is 19+ only, where Context.Provider === Context.
+      // NOTE Keep in sync with getDisplayNameForFiber()
+      const consumerResolvedContext = type._context;
+
+      // Global context value.
+      context = consumerResolvedContext._currentValue || null;
+
+      // Look for overridden value.
+      let current = ((fiber: any): Fiber).return;
+      while (current !== null) {
+        const currentType = current.type;
+        const currentTypeSymbol = getTypeSymbol(currentType);
+        if (
+          // In 19+, these are Context Providers
+          currentTypeSymbol === CONTEXT_SYMBOL_STRING
+        ) {
+          const providerResolvedContext = currentType;
+          if (providerResolvedContext === consumerResolvedContext) {
+            context = current.memoizedProps.value;
+            break;
+          }
+        }
+
         current = current.return;
       }
     }