Add a feature flag for new behavior

Author: gaearon

packages/react-client/src/ReactFlightReplyClient.js

@@ -14,11 +14,13 @@ 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';
 
@@ -297,7 +299,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_CONTEXT_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-debug-tools/src/ReactDebugHooks.js

@@ -821,7 +821,11 @@ function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
   let current: null | Fiber = fiber;
   while (current) {
     if (current.tag === ContextProvider) {
-      const context: ReactContext<any> = current.type;
+      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-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js

@@ -296,6 +296,13 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('should treat Context as Context.Provider', async render => {
+      // The `itRenders` helpers don't work with the gate pragma, so we have to do
+      // this instead.
+      if (gate(flags => !flags.enableRenderableContext)) {
+        it("empty test so Jest doesn't complain", () => {});
+        return;
+      }
+
       const Theme = React.createContext('dark');
       const Language = React.createContext('french');
 

packages/react-dom/src/__tests__/ReactServerRendering-test.js

@@ -1000,6 +1000,7 @@ describe('ReactDOMServer', () => {
     ]);
   });
 
+  // @gate enableRenderableContext
   it('should warn if an invalid contextType is defined', () => {
     const Context = React.createContext();
     class ComponentA extends React.Component {

packages/react-is/src/ReactIs.js

@@ -18,12 +18,14 @@ import {
   REACT_MEMO_TYPE,
   REACT_PORTAL_TYPE,
   REACT_PROFILER_TYPE,
+  REACT_PROVIDER_TYPE,
   REACT_CONSUMER_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
 } from 'shared/ReactSymbols';
 import isValidElementType from 'shared/isValidElementType';
+import {enableRenderableContext} from 'shared/ReactFeatureFlags';
 
 export function typeOf(object: any): mixed {
   if (typeof object === 'object' && object !== null) {
@@ -47,8 +49,19 @@ export function typeOf(object: any): mixed {
               case REACT_FORWARD_REF_TYPE:
               case REACT_LAZY_TYPE:
               case REACT_MEMO_TYPE:
-              case REACT_CONSUMER_TYPE:
                 return $$typeofType;
+              case REACT_CONSUMER_TYPE:
+                if (enableRenderableContext) {
+                  return $$typeofType;
+                } else {
+                  // Fallthrough to default
+                }
+              case REACT_PROVIDER_TYPE:
+                if (enableRenderableContext) {
+                  // Fallthrough to default
+                } else {
+                  return $$typeofType;
+                }
               default:
                 return $$typeof;
             }
@@ -61,8 +74,12 @@ export function typeOf(object: any): mixed {
   return undefined;
 }
 
-export const ContextConsumer = REACT_CONSUMER_TYPE;
-export const ContextProvider = REACT_CONTEXT_TYPE;
+export const ContextConsumer: symbol = enableRenderableContext
+  ? REACT_CONSUMER_TYPE
+  : REACT_CONTEXT_TYPE;
+export const ContextProvider: symbol = enableRenderableContext
+  ? REACT_CONTEXT_TYPE
+  : REACT_PROVIDER_TYPE;
 export const Element = REACT_ELEMENT_TYPE;
 export const ForwardRef = REACT_FORWARD_REF_TYPE;
 export const Fragment = REACT_FRAGMENT_TYPE;
@@ -77,10 +94,18 @@ export const SuspenseList = REACT_SUSPENSE_LIST_TYPE;
 export {isValidElementType};
 
 export function isContextConsumer(object: any): boolean {
-  return typeOf(object) === REACT_CONSUMER_TYPE;
+  if (enableRenderableContext) {
+    return typeOf(object) === REACT_CONSUMER_TYPE;
+  } else {
+    return typeOf(object) === REACT_CONTEXT_TYPE;
+  }
 }
 export function isContextProvider(object: any): boolean {
-  return typeOf(object) === REACT_CONTEXT_TYPE;
+  if (enableRenderableContext) {
+    return typeOf(object) === REACT_CONTEXT_TYPE;
+  } else {
+    return typeOf(object) === REACT_PROVIDER_TYPE;
+  }
 }
 export function isElement(object: any): boolean {
   return (

packages/react-reconciler/src/ReactFiber.js

@@ -38,6 +38,7 @@ import {
   enableDebugTracing,
   enableFloat,
   enableDO_NOT_USE_disableStrictPassiveEffect,
+  enableRenderableContext,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
@@ -94,6 +95,7 @@ import {
   REACT_DEBUG_TRACING_MODE_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_PROFILER_TYPE,
+  REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
   REACT_CONSUMER_TYPE,
   REACT_SUSPENSE_TYPE,
@@ -578,13 +580,28 @@ export function createFiberFromTypeAndProps(
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
+            case REACT_PROVIDER_TYPE:
+              if (enableRenderableContext) {
+                // Fallthrough to error
+              } else {
+                fiberTag = ContextProvider;
+                break getTag;
+              }
             case REACT_CONTEXT_TYPE:
-              fiberTag = ContextProvider;
-              break getTag;
+              if (enableRenderableContext) {
+                fiberTag = ContextProvider;
+                break getTag;
+              } else {
+                fiberTag = ContextConsumer;
+                break getTag;
+              }
             case REACT_CONSUMER_TYPE:
-              // This is a consumer
-              fiberTag = ContextConsumer;
-              break getTag;
+              if (enableRenderableContext) {
+                fiberTag = ContextConsumer;
+                break getTag;
+              } else {
+                // Fallthrough to error
+              }
             case REACT_FORWARD_REF_TYPE:
               fiberTag = ForwardRef;
               if (__DEV__) {

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -110,6 +110,7 @@ import {
   enableFormActions,
   enableAsyncActions,
   enablePostpone,
+  enableRenderableContext,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -3528,7 +3529,12 @@ function updateContextProvider(
   workInProgress: Fiber,
   renderLanes: Lanes,
 ) {
-  const context: ReactContext<any> = workInProgress.type;
+  let context: ReactContext<any>;
+  if (enableRenderableContext) {
+    context = workInProgress.type;
+  } else {
+    context = workInProgress.type._context;
+  }
   const newProps = workInProgress.pendingProps;
   const oldProps = workInProgress.memoizedProps;
 
@@ -3590,9 +3596,18 @@ function updateContextConsumer(
   workInProgress: Fiber,
   renderLanes: Lanes,
 ) {
-  const consumerType: ReactConsumerType<any> = workInProgress.type;
-  const context = consumerType._context;
-
+  let context: ReactContext<any>;
+  if (enableRenderableContext) {
+    const consumerType: ReactConsumerType<any> = workInProgress.type;
+    context = consumerType._context;
+  } else {
+    context = workInProgress.type;
+    if (__DEV__) {
+      if ((context: any)._context !== undefined) {
+        context = (context: any)._context;
+      }
+    }
+  }
   const newProps = workInProgress.pendingProps;
   const render = newProps.children;
 
@@ -3838,7 +3853,12 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       break;
     case ContextProvider: {
       const newValue = workInProgress.memoizedProps.value;
-      const context: ReactContext<any> = workInProgress.type;
+      let context: ReactContext<any>;
+      if (enableRenderableContext) {
+        context = workInProgress.type;
+      } else {
+        context = workInProgress.type._context;
+      }
       pushProvider(workInProgress, context, newValue);
       break;
     }

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -39,6 +39,7 @@ import {
   enableCache,
   enableTransitionTracing,
   enableFloat,
+  enableRenderableContext,
   passChildrenWhenCloningPersistedNodes,
 } from 'shared/ReactFeatureFlags';
 
@@ -1505,7 +1506,12 @@ function completeWork(
       return null;
     case ContextProvider:
       // Pop provider fiber
-      const context: ReactContext<any> = workInProgress.type;
+      let context: ReactContext<any>;
+      if (enableRenderableContext) {
+        context = workInProgress.type;
+      } else {
+        context = workInProgress.type._context;
+      }
       popProvider(context, workInProgress);
       bubbleProperties(workInProgress);
       return null;

packages/react-reconciler/src/ReactFiberNewContext.js

@@ -46,6 +46,7 @@ import {
   enableLazyContextPropagation,
   enableFormActions,
   enableAsyncActions,
+  enableRenderableContext,
 } from 'shared/ReactFeatureFlags';
 import {
   getHostTransitionProvider,
@@ -561,7 +562,12 @@ function propagateParentContextChanges(
 
       const oldProps = currentParent.memoizedProps;
       if (oldProps !== null) {
-        const context: ReactContext<any> = parent.type;
+        let context: ReactContext<any>;
+        if (enableRenderableContext) {
+          context = parent.type;
+        } else {
+          context = parent.type._context;
+        }
 
         const newProps = parent.pendingProps;
         const newValue = newProps.value;

packages/react-reconciler/src/ReactFiberScope.js

@@ -22,7 +22,10 @@ import {
 import {isFiberSuspenseAndTimedOut} from './ReactFiberTreeReflection';
 
 import {HostComponent, ScopeComponent, ContextProvider} from './ReactWorkTags';
-import {enableScopeAPI} from 'shared/ReactFeatureFlags';
+import {
+  enableScopeAPI,
+  enableRenderableContext,
+} from 'shared/ReactFeatureFlags';
 
 function getSuspenseFallbackChild(fiber: Fiber): Fiber | null {
   return ((((fiber.child: any): Fiber).sibling: any): Fiber).child;
@@ -113,7 +116,10 @@ function collectNearestContextValues<T>(
   context: ReactContext<T>,
   childContextValues: Array<T>,
 ): void {
-  if (node.tag === ContextProvider && node.type === context) {
+  if (
+    node.tag === ContextProvider &&
+    (enableRenderableContext ? node.type : node.type._context) === context
+  ) {
     const contextValue = node.memoizedProps.value;
     childContextValues.push(contextValue);
   } else {