{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberNewContext.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactNewContext-test.internal.js"},{"status":"M","path":"packages\/react\/src\/React.js"},{"status":"M","path":"packages\/react\/src\/ReactElementValidator.js"},{"status":"M","path":"packages\/shared\/ReactContext.js"},{"status":"M","path":"packages\/shared\/ReactFeatureFlags.js"},{"status":"M","path":"packages\/shared\/ReactTypes.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-fabric.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www.js"}],"commit":{"authoredAt":"2018-01-30T13:06:12-08:00","authorName":"Andrew Clark","subject":"Switch to JSX API for context (#12123)","revision":"28aa084ad84a681be1c45def2f4b4c0dd8a43871","shortRevision":"28aa084ad8","authorEmail":"acdlite@me.com"},"body":"* Switch to JSX API for context\r\n\r\n80% sure this will be the final API. Merging this now so we can get this\r\ninto the next www sync in preparation for 16.3.\r\n\r\n* Promote context to a stable API","patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.internal.js\nindex ad351544f1..45fca60634 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.internal.js\n@@ -14,7 +14,6 @@ let React;\n let ReactCallReturn;\n let ReactDOMServer;\n let PropTypes;\n-let ReactFeatureFlags;\n \n function normalizeCodeLocInfo(str) {\n return str && str.replace(\/\$at .+?:\\d+\$\/g, '(at **)');\n@@ -23,8 +22,6 @@ function normalizeCodeLocInfo(str) {\n describe('ReactDOMServer', () => {\n beforeEach(() => {\n jest.resetModules();\n- ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n- ReactFeatureFlags.enableNewContextAPI = true;\n React = require('react');\n ReactCallReturn = require('react-call-return');\n PropTypes = require('prop-types');\n@@ -388,36 +385,32 @@ describe('ReactDOMServer', () => {\n });\n \n it('renders with new context API', () => {\n- const Context = React.unstable_createContext(0);\n-\n- function Provider(props) {\n- return Context.provide(props.value, props.children);\n- }\n+ const Context = React.createContext(0);\n \n function Consumer(props) {\n- return Context.consume(value => {\n- return 'Result: ' + value;\n- });\n+ return (\n+ {value => 'Result: ' + value}<\/Context.Consumer>\n+ );\n }\n \n const Indirection = React.Fragment;\n \n function App(props) {\n return (\n- \n- \n+ \n+ \n \n- <\/Provider>\n+ <\/Context.Provider>\n \n \n \n- \n+ \n \n- <\/Provider>\n+ <\/Context.Provider>\n <\/Indirection>\n <\/Indirection>\n \n- <\/Provider>\n+ <\/Context.Provider>\n );\n }\n \n@@ -428,16 +421,12 @@ describe('ReactDOMServer', () => {\n });\n \n it('renders context API, reentrancy', () => {\n- const Context = React.unstable_createContext(0);\n-\n- function Provider(props) {\n- return Context.provide(props.value, props.children);\n- }\n+ const Context = React.createContext(0);\n \n function Consumer(props) {\n- return Context.consume(value => {\n- return 'Result: ' + value;\n- });\n+ return (\n+ {value => 'Result: ' + value}<\/Context.Consumer>\n+ );\n }\n \n let reentrantMarkup;\n@@ -452,21 +441,21 @@ describe('ReactDOMServer', () => {\n \n function App(props) {\n return (\n- \n+ \n {props.reentrant && }\n- \n+ \n \n- <\/Provider>\n+ <\/Context.Provider>\n \n \n \n- \n+ \n \n- <\/Provider>\n+ <\/Context.Provider>\n <\/Indirection>\n <\/Indirection>\n \n- <\/Provider>\n+ <\/Context.Provider>\n );\n }\n \ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 99d409cd12..c5cdc2679d 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -860,10 +860,10 @@ class ReactDOMServerRenderer {\n }\n case REACT_CONTEXT_TYPE: {\n const consumer: ReactConsumer = (nextChild: any);\n- const nextProps = consumer.props;\n+ const nextProps: any = consumer.props;\n const nextValue = consumer.type.currentValue;\n \n- const nextChildren = toArray(nextProps.render(nextValue));\n+ const nextChildren = toArray(nextProps.children(nextValue));\n const frame: Frame = {\n type: nextChild,\n domNamespace: parentNamespace,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex e4732b7846..67b22f96cd 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -15,7 +15,6 @@ import type {HydrationContext} from '.\/ReactFiberHydrationContext';\n import type {FiberRoot} from '.\/ReactFiberRoot';\n import type {ExpirationTime} from '.\/ReactFiberExpirationTime';\n \n-import {enableNewContextAPI} from 'shared\/ReactFeatureFlags';\n import {\n IndeterminateComponent,\n FunctionalComponent,\n@@ -678,87 +677,85 @@ export default function(\n changedBits: number,\n renderExpirationTime: ExpirationTime,\n ): void {\n- if (enableNewContextAPI) {\n- let fiber = workInProgress.child;\n- while (fiber !== null) {\n- let nextFiber;\n- \/\/ Visit this fiber.\n- switch (fiber.tag) {\n- case ContextConsumer:\n- \/\/ Check if the context matches.\n- const observedBits: number = fiber.stateNode | 0;\n- if (fiber.type === context && (observedBits & changedBits) !== 0) {\n- \/\/ Update the expiration time of all the ancestors, including\n- \/\/ the alternates.\n- let node = fiber;\n- while (node !== null) {\n- const alternate = node.alternate;\n+ let fiber = workInProgress.child;\n+ while (fiber !== null) {\n+ let nextFiber;\n+ \/\/ Visit this fiber.\n+ switch (fiber.tag) {\n+ case ContextConsumer:\n+ \/\/ Check if the context matches.\n+ const observedBits: number = fiber.stateNode | 0;\n+ if (fiber.type === context && (observedBits & changedBits) !== 0) {\n+ \/\/ Update the expiration time of all the ancestors, including\n+ \/\/ the alternates.\n+ let node = fiber;\n+ while (node !== null) {\n+ const alternate = node.alternate;\n+ if (\n+ node.expirationTime === NoWork ||\n+ node.expirationTime > renderExpirationTime\n+ ) {\n+ node.expirationTime = renderExpirationTime;\n if (\n- node.expirationTime === NoWork ||\n- node.expirationTime > renderExpirationTime\n- ) {\n- node.expirationTime = renderExpirationTime;\n- if (\n- alternate !== null &&\n- (alternate.expirationTime === NoWork ||\n- alternate.expirationTime > renderExpirationTime)\n- ) {\n- alternate.expirationTime = renderExpirationTime;\n- }\n- } else if (\n alternate !== null &&\n (alternate.expirationTime === NoWork ||\n alternate.expirationTime > renderExpirationTime)\n ) {\n alternate.expirationTime = renderExpirationTime;\n- } else {\n- \/\/ Neither alternate was updated, which means the rest of the\n- \/\/ ancestor path already has sufficient priority.\n- break;\n }\n- node = node.return;\n+ } else if (\n+ alternate !== null &&\n+ (alternate.expirationTime === NoWork ||\n+ alternate.expirationTime > renderExpirationTime)\n+ ) {\n+ alternate.expirationTime = renderExpirationTime;\n+ } else {\n+ \/\/ Neither alternate was updated, which means the rest of the\n+ \/\/ ancestor path already has sufficient priority.\n+ break;\n }\n- \/\/ Don't scan deeper than a matching consumer. When we render the\n- \/\/ consumer, we'll continue scanning from that point. This way the\n- \/\/ scanning work is time-sliced.\n- nextFiber = null;\n- } else {\n- \/\/ Traverse down.\n- nextFiber = fiber.child;\n+ node = node.return;\n }\n- break;\n- case ContextProvider:\n- \/\/ Don't scan deeper if this is a matching provider\n- nextFiber = fiber.type === workInProgress.type ? null : fiber.child;\n- break;\n- default:\n+ \/\/ Don't scan deeper than a matching consumer. When we render the\n+ \/\/ consumer, we'll continue scanning from that point. This way the\n+ \/\/ scanning work is time-sliced.\n+ nextFiber = null;\n+ } else {\n \/\/ Traverse down.\n nextFiber = fiber.child;\n+ }\n+ break;\n+ case ContextProvider:\n+ \/\/ Don't scan deeper if this is a matching provider\n+ nextFiber = fiber.type === workInProgress.type ? null : fiber.child;\n+ break;\n+ default:\n+ \/\/ Traverse down.\n+ nextFiber = fiber.child;\n+ break;\n+ }\n+ if (nextFiber !== null) {\n+ \/\/ Set the return pointer of the child to the work-in-progress fiber.\n+ nextFiber.return = fiber;\n+ } else {\n+ \/\/ No child. Traverse to next sibling.\n+ nextFiber = fiber;\n+ while (nextFiber !== null) {\n+ if (nextFiber === workInProgress) {\n+ \/\/ We're back to the root of this subtree. Exit.\n+ nextFiber = null;\n+ break;\n+ }\n+ let sibling = nextFiber.sibling;\n+ if (sibling !== null) {\n+ nextFiber = sibling;\n break;\n- }\n- if (nextFiber !== null) {\n- \/\/ Set the return pointer of the child to the work-in-progress fiber.\n- nextFiber.return = fiber;\n- } else {\n- \/\/ No child. Traverse to next sibling.\n- nextFiber = fiber;\n- while (nextFiber !== null) {\n- if (nextFiber === workInProgress) {\n- \/\/ We're back to the root of this subtree. Exit.\n- nextFiber = null;\n- break;\n- }\n- let sibling = nextFiber.sibling;\n- if (sibling !== null) {\n- nextFiber = sibling;\n- break;\n- }\n- \/\/ No more siblings. Traverse up.\n- nextFiber = nextFiber.return;\n }\n+ \/\/ No more siblings. Traverse up.\n+ nextFiber = nextFiber.return;\n }\n- fiber = nextFiber;\n }\n+ fiber = nextFiber;\n }\n }\n \n@@ -767,79 +764,75 @@ export default function(\n workInProgress,\n renderExpirationTime,\n ) {\n- if (enableNewContextAPI) {\n- const providerType: ReactProviderType = workInProgress.type;\n- const context: ReactContext = providerType.context;\n-\n- const newProps = workInProgress.pendingProps;\n- const oldProps = workInProgress.memoizedProps;\n-\n- if (hasLegacyContextChanged()) {\n- \/\/ Normally we can bail out on props equality but if context has changed\n- \/\/ we don't do the bailout and we have to reuse existing props instead.\n- } else if (oldProps === newProps) {\n- workInProgress.stateNode = 0;\n- pushProvider(workInProgress);\n- return bailoutOnAlreadyFinishedWork(current, workInProgress);\n- }\n- workInProgress.memoizedProps = newProps;\n+ const providerType: ReactProviderType = workInProgress.type;\n+ const context: ReactContext = providerType.context;\n \n- const newValue = newProps.value;\n+ const newProps = workInProgress.pendingProps;\n+ const oldProps = workInProgress.memoizedProps;\n \n- let changedBits: number;\n- if (oldProps === null) {\n- \/\/ Initial render\n- changedBits = MAX_SIGNED_31_BIT_INT;\n+ if (hasLegacyContextChanged()) {\n+ \/\/ Normally we can bail out on props equality but if context has changed\n+ \/\/ we don't do the bailout and we have to reuse existing props instead.\n+ } else if (oldProps === newProps) {\n+ workInProgress.stateNode = 0;\n+ pushProvider(workInProgress);\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\n+ }\n+ workInProgress.memoizedProps = newProps;\n+\n+ const newValue = newProps.value;\n+\n+ let changedBits: number;\n+ if (oldProps === null) {\n+ \/\/ Initial render\n+ changedBits = MAX_SIGNED_31_BIT_INT;\n+ } else {\n+ const oldValue = oldProps.value;\n+ \/\/ Use Object.is to compare the new context value to the old value.\n+ \/\/ Inlined Object.is polyfill.\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/is\n+ if (\n+ (oldValue === newValue &&\n+ (oldValue !== 0 || 1 \/ oldValue === 1 \/ newValue)) ||\n+ (oldValue !== oldValue && newValue !== newValue) \/\/ eslint-disable-line no-self-compare\n+ ) {\n+ \/\/ No change.\n+ changedBits = 0;\n } else {\n- const oldValue = oldProps.value;\n- \/\/ Use Object.is to compare the new context value to the old value.\n- \/\/ Inlined Object.is polyfill.\n- \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/is\n- if (\n- (oldValue === newValue &&\n- (oldValue !== 0 || 1 \/ oldValue === 1 \/ newValue)) ||\n- (oldValue !== oldValue && newValue !== newValue) \/\/ eslint-disable-line no-self-compare\n- ) {\n- \/\/ No change.\n- changedBits = 0;\n- } else {\n- changedBits =\n- context.calculateChangedBits !== null\n- ? context.calculateChangedBits(oldValue, newValue)\n- : MAX_SIGNED_31_BIT_INT;\n- if (__DEV__) {\n- warning(\n- (changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,\n- 'calculateChangedBits: Expected the return value to be a ' +\n- '31-bit integer. Instead received: %s',\n- changedBits,\n- );\n- }\n- changedBits |= 0;\n-\n- if (changedBits !== 0) {\n- propagateContextChange(\n- workInProgress,\n- context,\n- changedBits,\n- renderExpirationTime,\n- );\n- }\n+ changedBits =\n+ typeof context.calculateChangedBits === 'function'\n+ ? context.calculateChangedBits(oldValue, newValue)\n+ : MAX_SIGNED_31_BIT_INT;\n+ if (__DEV__) {\n+ warning(\n+ (changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,\n+ 'calculateChangedBits: Expected the return value to be a ' +\n+ '31-bit integer. Instead received: %s',\n+ changedBits,\n+ );\n+ }\n+ changedBits |= 0;\n+\n+ if (changedBits !== 0) {\n+ propagateContextChange(\n+ workInProgress,\n+ context,\n+ changedBits,\n+ renderExpirationTime,\n+ );\n }\n }\n+ }\n \n- workInProgress.stateNode = changedBits;\n- pushProvider(workInProgress);\n+ workInProgress.stateNode = changedBits;\n+ pushProvider(workInProgress);\n \n- if (oldProps !== null && oldProps.children === newProps.children) {\n- return bailoutOnAlreadyFinishedWork(current, workInProgress);\n- }\n- const newChildren = newProps.children;\n- reconcileChildren(current, workInProgress, newChildren);\n- return workInProgress.child;\n- } else {\n- return null;\n+ if (oldProps !== null && oldProps.children === newProps.children) {\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n+ const newChildren = newProps.children;\n+ reconcileChildren(current, workInProgress, newChildren);\n+ return workInProgress.child;\n }\n \n function updateContextConsumer(\n@@ -847,38 +840,35 @@ export default function(\n workInProgress,\n renderExpirationTime,\n ) {\n- if (enableNewContextAPI) {\n- const context: ReactContext = workInProgress.type;\n- const newProps = workInProgress.pendingProps;\n+ const context: ReactContext = workInProgress.type;\n+ const newProps = workInProgress.pendingProps;\n \n- const newValue = context.currentValue;\n- const changedBits = context.changedBits;\n+ const newValue = context.currentValue;\n+ const changedBits = context.changedBits;\n \n- if (changedBits !== 0) {\n- \/\/ Context change propagation stops at matching consumers, for time-\n- \/\/ slicing. Continue the propagation here.\n- propagateContextChange(\n- workInProgress,\n- context,\n- changedBits,\n- renderExpirationTime,\n- );\n- }\n-\n- \/\/ Store the observedBits on the fiber's stateNode for quick access.\n- let observedBits = newProps.observedBits;\n- if (observedBits === undefined || observedBits === null) {\n- \/\/ Subscribe to all changes by default\n- observedBits = MAX_SIGNED_31_BIT_INT;\n- }\n- workInProgress.stateNode = observedBits;\n+ if (changedBits !== 0) {\n+ \/\/ Context change propagation stops at matching consumers, for time-\n+ \/\/ slicing. Continue the propagation here.\n+ propagateContextChange(\n+ workInProgress,\n+ context,\n+ changedBits,\n+ renderExpirationTime,\n+ );\n+ }\n \n- const newChildren = newProps.render(newValue);\n- reconcileChildren(current, workInProgress, newChildren);\n- return workInProgress.child;\n- } else {\n- return null;\n+ \/\/ Store the observedBits on the fiber's stateNode for quick access.\n+ let observedBits = newProps.observedBits;\n+ if (observedBits === undefined || observedBits === null) {\n+ \/\/ Subscribe to all changes by default\n+ observedBits = MAX_SIGNED_31_BIT_INT;\n }\n+ workInProgress.stateNode = observedBits;\n+\n+ const render = newProps.children;\n+ const newChildren = render(newValue);\n+ reconcileChildren(current, workInProgress, newChildren);\n+ return workInProgress.child;\n }\n \n \/*\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberNewContext.js b\/packages\/react-reconciler\/src\/ReactFiberNewContext.js\nindex ba59ae5998..af6e94fe7b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberNewContext.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberNewContext.js\n@@ -67,4 +67,5 @@ export function resetProviderStack(): void {\n context._currentRenderer = null;\n }\n }\n+ index = -1;\n }\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactNewContext-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactNewContext-test.internal.js\nindex ed1a96d5e7..73883696c3 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactNewContext-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactNewContext-test.internal.js\n@@ -10,7 +10,6 @@\n 'use strict';\n \n let ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n-ReactFeatureFlags.enableNewContextAPI = true;\n \n let React = require('react');\n let ReactNoop;\n@@ -21,7 +20,6 @@ describe('ReactNewContext', () => {\n jest.resetModules();\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;\n- ReactFeatureFlags.enableNewContextAPI = true;\n React = require('react');\n ReactNoop = require('react-noop-renderer');\n gen = require('random-seed');\n@@ -37,29 +35,27 @@ describe('ReactNewContext', () => {\n }\n \n it('simple mount and update', () => {\n- const Context = React.unstable_createContext(1);\n-\n- function Provider(props) {\n- return Context.provide(props.value, props.children);\n- }\n+ const Context = React.createContext(1);\n \n function Consumer(props) {\n- return Context.consume(value => {\n- return ;\n- });\n+ return (\n+ \n+ {value => }\n+ <\/Context.Consumer>\n+ );\n }\n \n const Indirection = React.Fragment;\n \n function App(props) {\n return (\n- \n+ \n \n \n \n <\/Indirection>\n <\/Indirection>\n- <\/Provider>\n+ <\/Context.Provider>\n );\n }\n \n@@ -74,19 +70,27 @@ describe('ReactNewContext', () => {\n });\n \n it('propagates through shouldComponentUpdate false', () => {\n- const Context = React.unstable_createContext(1);\n+ const Context = React.createContext(1);\n \n function Provider(props) {\n ReactNoop.yield('Provider');\n- return Context.provide(props.value, props.children);\n+ return (\n+ \n+ {props.children}\n+ <\/Context.Provider>\n+ );\n }\n \n function Consumer(props) {\n ReactNoop.yield('Consumer');\n- return Context.consume(value => {\n- ReactNoop.yield('Consumer render prop');\n- return ;\n- });\n+ return (\n+ \n+ {value => {\n+ ReactNoop.yield('Consumer render prop');\n+ return ;\n+ }}\n+ <\/Context.Consumer>\n+ );\n }\n \n class Indirection extends React.Component {\n@@ -134,19 +138,27 @@ describe('ReactNewContext', () => {\n });\n \n it('consumers bail out if context value is the same', () => {\n- const Context = React.unstable_createContext(1);\n+ const Context = React.createContext(1);\n \n function Provider(props) {\n ReactNoop.yield('Provider');\n- return Context.provide(props.value, props.children);\n+ return (\n+ \n+ {props.children}\n+ <\/Context.Provider>\n+ );\n }\n \n function Consumer(props) {\n ReactNoop.yield('Consumer');\n- return Context.consume(value => {\n- ReactNoop.yield('Consumer render prop');\n- return ;\n- });\n+ return (\n+ \n+ {value => {\n+ ReactNoop.yield('Consumer render prop');\n+ return ;\n+ }}\n+ <\/Context.Consumer>\n+ );\n }\n \n class Indirection extends React.Component {\n@@ -194,19 +206,27 @@ describe('ReactNewContext', () => {\n });\n \n it('nested providers', () => {\n- const Context = React.unstable_createContext(1);\n+ const Context = React.createContext(1);\n \n function Provider(props) {\n- return Context.consume(contextValue =>\n- \/\/ Multiply previous context value by 2, unless prop overrides\n- Context.provide(props.value || contextValue * 2, props.children),\n+ return (\n+ \n+ {contextValue => (\n+ \/\/ Multiply previous context value by 2, unless prop overrides\n+ \n+ {props.children}\n+ <\/Context.Provider>\n+ )}\n+ <\/Context.Consumer>\n );\n }\n \n function Consumer(props) {\n- return Context.consume(value => {\n- return ;\n- });\n+ return (\n+ \n+ {value => }\n+ <\/Context.Consumer>\n+ );\n }\n \n class Indirection extends React.Component {\n@@ -247,19 +267,27 @@ describe('ReactNewContext', () => {\n });\n \n it('multiple consumers in different branches', () => {\n- const Context = React.unstable_createContext(1);\n+ const Context = React.createContext(1);\n \n function Provider(props) {\n- return Context.consume(contextValue =>\n- \/\/ Multiply previous context value by 2, unless prop overrides\n- Context.provide(props.value || contextValue * 2, props.children),\n+ return (\n+ \n+ {contextValue => (\n+ \/\/ Multiply previous context value by 2, unless prop overrides\n+ \n+ {props.children}\n+ <\/Context.Provider>\n+ )}\n+ <\/Context.Consumer>\n );\n }\n \n function Consumer(props) {\n- return Context.consume(value => {\n- return ;\n- });\n+ return (\n+ \n+ {value => }\n+ <\/Context.Consumer>\n+ );\n }\n \n class Indirection extends React.Component {\n@@ -313,19 +341,27 @@ describe('ReactNewContext', () => {\n });\n \n it('compares context values with Object.is semantics', () => {\n- const Context = React.unstable_createContext(1);\n+ const Context = React.createContext(1);\n \n function Provider(props) {\n ReactNoop.yield('Provider');\n- return Context.provide(props.value, props.children);\n+ return (\n+ \n+ {props.children}\n+ <\/Context.Provider>\n+ );\n }\n \n function Consumer(props) {\n ReactNoop.yield('Consumer');\n- return Context.consume(value => {\n- ReactNoop.yield('Consumer render prop');\n- return ;\n- });\n+ return (\n+ \n+ {value => {\n+ ReactNoop.yield('Consumer render prop');\n+ return ;\n+ }}\n+ <\/Context.Consumer>\n+ );\n }\n \n class Indirection extends React.Component {\n@@ -374,16 +410,14 @@ describe('ReactNewContext', () => {\n });\n \n it('context unwinds when interrupted', () => {\n- const Context = React.unstable_createContext('Default');\n-\n- function Provider(props) {\n- return Context.provide(props.value, props.children);\n- }\n+ const Context = React.createContext('Default');\n \n function Consumer(props) {\n- return Context.consume(value => {\n- return ;\n- });\n+ return (\n+ \n+ {value => }\n+ <\/Context.Consumer>\n+ );\n }\n \n function BadRender() {\n@@ -406,14 +440,14 @@ describe('ReactNewContext', () => {\n function App(props) {\n return (\n \n- \n+ \n \n- \n+ \n \n- <\/Provider>\n+ <\/Context.Provider>\n <\/ErrorBoundary>\n \n- <\/Provider>\n+ <\/Context.Provider>\n <\/React.Fragment>\n );\n }\n@@ -421,13 +455,13 @@ describe('ReactNewContext', () => {\n ReactNoop.render();\n ReactNoop.flush();\n expect(ReactNoop.getChildren()).toEqual([\n- \/\/ The second provider should use the default value. This proves the\n+ \/\/ The second provider should use the default value.\n span('Result: Does not unwind'),\n ]);\n });\n \n it('can skip consumers with bitmask', () => {\n- const Context = React.unstable_createContext({foo: 0, bar: 0}, (a, b) => {\n+ const Context = React.createContext({foo: 0, bar: 0}, (a, b) => {\n let result = 0;\n if (a.foo !== b.foo) {\n result |= 0b01;\n@@ -439,21 +473,33 @@ describe('ReactNewContext', () => {\n });\n \n function Provider(props) {\n- return Context.provide({foo: props.foo, bar: props.bar}, props.children);\n+ return (\n+ \n+ {props.children}\n+ <\/Context.Provider>\n+ );\n }\n \n function Foo() {\n- return Context.consume(value => {\n- ReactNoop.yield('Foo');\n- return ;\n- }, 0b01);\n+ return (\n+ \n+ {value => {\n+ ReactNoop.yield('Foo');\n+ return ;\n+ }}\n+ <\/Context.Consumer>\n+ );\n }\n \n function Bar() {\n- return Context.consume(value => {\n- ReactNoop.yield('Bar');\n- return ;\n- }, 0b10);\n+ return (\n+ \n+ {value => {\n+ ReactNoop.yield('Bar');\n+ return ;\n+ }}\n+ <\/Context.Consumer>\n+ );\n }\n \n class Indirection extends React.Component {\n@@ -503,20 +549,16 @@ describe('ReactNewContext', () => {\n it('warns if calculateChangedBits returns larger than a 31-bit integer', () => {\n spyOnDev(console, 'error');\n \n- const Context = React.unstable_createContext(\n+ const Context = React.createContext(\n 0,\n (a, b) => Math.pow(2, 32) - 1, \/\/ Return 32 bit int\n );\n \n- function Provider(props) {\n- return Context.provide(props.value, props.children);\n- }\n-\n- ReactNoop.render();\n+ ReactNoop.render();\n ReactNoop.flush();\n \n \/\/ Update\n- ReactNoop.render();\n+ ReactNoop.render();\n ReactNoop.flush();\n \n if (__DEV__) {\n@@ -530,22 +572,19 @@ describe('ReactNewContext', () => {\n \n it('warns if multiple renderers concurrently render the same context', () => {\n spyOnDev(console, 'error');\n- const Context = React.unstable_createContext(0);\n+ const Context = React.createContext(0);\n \n function Foo(props) {\n ReactNoop.yield('Foo');\n return null;\n }\n- function Provider(props) {\n- return Context.provide(props.value, props.children);\n- }\n \n function App(props) {\n return (\n- \n+ \n \n \n- <\/Provider>\n+ <\/Context.Provider>\n );\n }\n \n@@ -556,7 +595,6 @@ describe('ReactNewContext', () => {\n \/\/ Get a new copy of ReactNoop\n jest.resetModules();\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n- ReactFeatureFlags.enableNewContextAPI = true;\n React = require('react');\n ReactNoop = require('react-noop-renderer');\n \n@@ -641,7 +679,7 @@ describe('ReactNewContext', () => {\n function ContextSimulator(maxDepth) {\n const contexts = new Map(\n contextKeys.map(key => {\n- const Context = React.unstable_createContext(0);\n+ const Context = React.createContext(0);\n Context.displayName = 'Context' + key;\n return [key, Context];\n }),\n@@ -661,19 +699,19 @@ describe('ReactNewContext', () => {\n this.props.rand.intBetween(0, contextKeys.length - 1)\n ];\n const Context = contexts.get(randomKey);\n- return Context.consume(\n- value => (\n- \n- \n- \n- <\/Fragment>\n- ),\n- null,\n- i,\n+ return (\n+ \n+ {value => (\n+ \n+ \n+ \n+ <\/Fragment>\n+ )}\n+ <\/Context.Consumer>\n );\n });\n return consumers;\n@@ -684,7 +722,7 @@ describe('ReactNewContext', () => {\n return contextKeys.reduceRight((children, key) => {\n const Context = contexts.get(key);\n const value = props.values[key];\n- return Context.provide(value, children);\n+ return {children}<\/Context.Provider>;\n }, );\n }\n \ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex af19c08b69..d6845d8d32 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -29,7 +29,6 @@ import {\n cloneElementWithValidation,\n } from '.\/ReactElementValidator';\n import ReactDebugCurrentFrame from '.\/ReactDebugCurrentFrame';\n-import {enableNewContextAPI} from 'shared\/ReactFeatureFlags';\n \n const React = {\n Children: {\n@@ -43,6 +42,8 @@ const React = {\n Component,\n PureComponent,\n \n+ createContext,\n+\n Fragment: REACT_FRAGMENT_TYPE,\n StrictMode: REACT_STRICT_MODE_TYPE,\n unstable_AsyncMode: REACT_ASYNC_MODE_TYPE,\n@@ -61,10 +62,6 @@ const React = {\n },\n };\n \n-if (enableNewContextAPI) {\n- React.unstable_createContext = createContext;\n-}\n-\n if (__DEV__) {\n Object.assign(React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, {\n \/\/ These should not be included in production.\ndiff --git a\/packages\/react\/src\/ReactElementValidator.js b\/packages\/react\/src\/ReactElementValidator.js\nindex fe81693165..e227e483a1 100644\n--- a\/packages\/react\/src\/ReactElementValidator.js\n+++ b\/packages\/react\/src\/ReactElementValidator.js\n@@ -20,6 +20,8 @@ import {\n REACT_FRAGMENT_TYPE,\n REACT_STRICT_MODE_TYPE,\n REACT_ASYNC_MODE_TYPE,\n+ REACT_PROVIDER_TYPE,\n+ REACT_CONTEXT_TYPE,\n } from 'shared\/ReactSymbols';\n import checkPropTypes from 'prop-types\/checkPropTypes';\n import warning from 'fbjs\/lib\/warning';\n@@ -289,7 +291,11 @@ export function createElementWithValidation(type, props, children) {\n \/\/ Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.\n type === REACT_FRAGMENT_TYPE ||\n type === REACT_ASYNC_MODE_TYPE ||\n- type === REACT_STRICT_MODE_TYPE;\n+ type === REACT_STRICT_MODE_TYPE ||\n+ (typeof type === 'object' &&\n+ type !== null &&\n+ (type.$$typeof === REACT_PROVIDER_TYPE ||\n+ type.$$typeof === REACT_CONTEXT_TYPE));\n \n \/\/ We warn in this case but don't throw. We expect the element creation to\n \/\/ succeed and there will likely be errors in render.\ndiff --git a\/packages\/shared\/ReactContext.js b\/packages\/shared\/ReactContext.js\nindex 2cc5bd6c43..5e8472f53d 100644\n--- a\/packages\/shared\/ReactContext.js\n+++ b\/packages\/shared\/ReactContext.js\n@@ -7,18 +7,9 @@\n * @flow\n *\/\n \n-import {\n- REACT_PROVIDER_TYPE,\n- REACT_CONTEXT_TYPE,\n- REACT_ELEMENT_TYPE,\n-} from 'shared\/ReactSymbols';\n+import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n \n-import type {\n- ReactContext,\n- ReactConsumer,\n- ReactProvider,\n- ReactNodeList,\n-} from 'shared\/ReactTypes';\n+import type {ReactContext} from 'shared\/ReactTypes';\n \n import warning from 'fbjs\/lib\/warning';\n \n@@ -26,8 +17,6 @@ export function createContext(\n defaultValue: T,\n calculateChangedBits: ?(a: T, b: T) => number,\n ): ReactContext {\n- let providerType;\n-\n if (calculateChangedBits === undefined) {\n calculateChangedBits = null;\n } else {\n@@ -44,44 +33,20 @@ export function createContext(\n \n const context: ReactContext = {\n $$typeof: REACT_CONTEXT_TYPE,\n- provide(value: T, children: ReactNodeList, key?: string): ReactProvider {\n- return {\n- $$typeof: REACT_ELEMENT_TYPE,\n- type: providerType,\n- key: key === null || key === undefined ? null : '' + key,\n- ref: null,\n- props: {\n- value,\n- children,\n- },\n- };\n- },\n- consume(\n- render: (value: T) => ReactNodeList,\n- observedBits?: number,\n- key?: string,\n- ): ReactConsumer {\n- return {\n- $$typeof: REACT_ELEMENT_TYPE,\n- type: context,\n- key: key === null || key === undefined ? null : '' + key,\n- ref: null,\n- props: {\n- observedBits,\n- render,\n- },\n- };\n- },\n calculateChangedBits,\n defaultValue,\n currentValue: defaultValue,\n changedBits: 0,\n+ \/\/ These are circular\n+ Provider: (null: any),\n+ Consumer: (null: any),\n };\n \n- providerType = {\n+ context.Provider = {\n $$typeof: REACT_PROVIDER_TYPE,\n context,\n };\n+ context.Consumer = context;\n \n if (__DEV__) {\n context._currentRenderer = null;\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 1f3c7cd68b..76070673aa 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -19,9 +19,6 @@ export const enableMutatingReconciler = true;\n export const enableNoopReconciler = false;\n \/\/ Experimental persistent mode (Fabric):\n export const enablePersistentReconciler = false;\n-\/\/ Support for new context API\n-export const enableNewContextAPI = false;\n-\n \/\/ Helps identify side effects in begin-phase lifecycle hooks and setState reducers:\n export const debugRenderPhaseSideEffects = false;\n \ndiff --git a\/packages\/shared\/ReactTypes.js b\/packages\/shared\/ReactTypes.js\nindex 0e29678f35..9f0dbcff86 100644\n--- a\/packages\/shared\/ReactTypes.js\n+++ b\/packages\/shared\/ReactTypes.js\n@@ -71,19 +71,15 @@ export type ReactConsumer = {\n key: null | string,\n ref: null,\n props: {\n- render: (value: T) => ReactNodeList,\n+ children: (value: T) => ReactNodeList,\n bits?: number,\n },\n };\n \n export type ReactContext = {\n $$typeof: Symbol | number,\n- provide(value: T, children: ReactNodeList, key?: string): ReactProvider,\n- consume(\n- render: (value: T) => ReactNodeList,\n- observedBits?: number,\n- key?: string,\n- ): ReactConsumer,\n+ Consumer: ReactContext,\n+ Provider: ReactProviderType,\n calculateChangedBits: ((a: T, b: T) => number) | null,\n defaultValue: T,\n currentValue: T,\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fabric.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fabric.js\nindex d4e804a2ad..45a2eac13a 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fabric.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fabric.js\n@@ -17,7 +17,6 @@ export const debugRenderPhaseSideEffectsForStrictMode = false;\n export const enableCreateRoot = false;\n export const enableUserTimingAPI = __DEV__;\n export const warnAboutDeprecatedLifecycles = false;\n-export const enableNewContextAPI = false;\n \n \/\/ React Fabric uses persistent reconciler.\n export const enableMutatingReconciler = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.native.js\nindex 479cddbca3..2455879da0 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native.js\n@@ -25,7 +25,6 @@ export const enableUserTimingAPI = __DEV__;\n export const enableMutatingReconciler = true;\n export const enableNoopReconciler = false;\n export const enablePersistentReconciler = false;\n-export const enableNewContextAPI = false;\n \n \/\/ Only used in www builds.\n export function addUserTimingListener() {\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 002aa16f68..e9326c8084 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -19,7 +19,6 @@ export const {\n \n \/\/ The rest of the flags are static for better dead code elimination.\n export const enableCreateRoot = true;\n-export const enableNewContextAPI = true;\n \n \/\/ The www bundles only use the mutating reconciler.\n export const enableMutatingReconciler = true;\n","parents":["8a09a2fc538e98523f67022095de9120e5dc2c32"]}

dillon1000/react

Files changed