{"files":[{"status":"M","path":"packages\/react-cs-renderer\/src\/ReactNativeCS.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOM.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeRenderer.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/ReactNoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberReconciler.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberScheduler.js"},{"status":"M","path":"packages\/react-rt-renderer\/src\/ReactNativeRT.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestRenderer.js"}],"body":"Makes createRoot the opt-in API for async updates. Now we don't have\r\nto check the top-level element to see if it's an async container.","commit":{"authorName":"Andrew Clark","shortRevision":"4d0e8fc487","authorEmail":"acdlite@me.com","subject":"ReactDOM.createRoot creates an async root (#11769)","revision":"4d0e8fc4878569e7b7a70e9261a7c945cb0ff1d8","authoredAt":"2017-12-04T14:34:02-08:00"},"parents":["d7f6ece27cb7cde67ef0e9c9aea4669f873ddab3"],"patch":"diff --git a\/packages\/react-cs-renderer\/src\/ReactNativeCS.js b\/packages\/react-cs-renderer\/src\/ReactNativeCS.js\nindex 4b87d77ffa..b7ed3e8b36 100644\n--- a\/packages\/react-cs-renderer\/src\/ReactNativeCS.js\n+++ b\/packages\/react-cs-renderer\/src\/ReactNativeCS.js\n@@ -265,7 +265,11 @@ const ReactCS = CSStatefulComponent({\n let container = {\n pendingChild: null,\n };\n- let root = ReactNativeCSFiberRenderer.createContainer(container, false);\n+ let root = ReactNativeCSFiberRenderer.createContainer(\n+ container,\n+ false,\n+ false,\n+ );\n return {root, container};\n },\n render({\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js\nindex a598cf3889..85f13de1be 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js\n@@ -69,26 +69,18 @@ describe('ReactDOMFiberAsync', () => {\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n container = document.createElement('div');\n ReactFeatureFlags.enableAsyncSubtreeAPI = true;\n+ ReactFeatureFlags.enableCreateRoot = true;\n ReactDOM = require('react-dom');\n });\n \n- it('AsyncComponent at the root makes the entire tree async', () => {\n- ReactDOM.render(\n- \n-

Hi<\/div>\n- <\/AsyncComponent>,\n- container,\n- );\n+ it('createRoot makes the entire tree async', () => {\n+ const root = ReactDOM.createRoot(container);\n+ root.render(

Hi<\/div>);\n expect(container.textContent).toEqual('');\n jest.runAllTimers();\n expect(container.textContent).toEqual('Hi');\n \n- ReactDOM.render(\n- \n-

Bye<\/div>\n- <\/AsyncComponent>,\n- container,\n- );\n+ root.render(

Bye<\/div>);\n expect(container.textContent).toEqual('Hi');\n jest.runAllTimers();\n expect(container.textContent).toEqual('Bye');\n@@ -104,12 +96,8 @@ describe('ReactDOMFiberAsync', () => {\n }\n }\n \n- ReactDOM.render(\n- \n- \n- <\/AsyncComponent>,\n- container,\n- );\n+ const root = ReactDOM.createRoot(container);\n+ root.render();\n expect(container.textContent).toEqual('');\n jest.runAllTimers();\n expect(container.textContent).toEqual('0');\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.internal.js\nindex fd3fd0a07b..a16ad96d44 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.internal.js\n@@ -76,14 +76,17 @@ describe('ReactDOMRoot', () => {\n it('renders children', () => {\n const root = ReactDOM.createRoot(container);\n root.render(

Hi<\/div>);\n+ flush();\n expect(container.textContent).toEqual('Hi');\n });\n \n it('unmounts children', () => {\n const root = ReactDOM.createRoot(container);\n root.render(

Hi<\/div>);\n+ flush();\n expect(container.textContent).toEqual('Hi');\n root.unmount();\n+ flush();\n expect(container.textContent).toEqual('');\n });\n \n@@ -138,6 +141,7 @@ describe('ReactDOMRoot', () => {\n \n <\/div>,\n );\n+ flush();\n if (__DEV__) {\n expect(console.error.calls.count()).toBe(0);\n }\n@@ -151,6 +155,7 @@ describe('ReactDOMRoot', () => {\n \n <\/div>,\n );\n+ flush();\n if (__DEV__) {\n expect(console.error.calls.count()).toBe(1);\n expect(console.error.calls.argsFor(0)[0]).toMatch('Extra attributes');\n@@ -167,6 +172,7 @@ describe('ReactDOMRoot', () => {\n d<\/span>\n <\/div>,\n );\n+ flush();\n expect(container.textContent).toEqual('abcd');\n root.render(\n

\n@@ -174,6 +180,7 @@ describe('ReactDOMRoot', () => {\n c<\/span>\n <\/div>,\n );\n+ flush();\n expect(container.textContent).toEqual('abdc');\n });\n \ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOM.js b\/packages\/react-dom\/src\/client\/ReactDOM.js\nindex f898bb673a..eb093e71d2 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOM.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOM.js\n@@ -376,8 +376,8 @@ type Root = {\n _internalRoot: FiberRoot,\n };\n \n-function ReactRoot(container: Container, hydrate: boolean) {\n- const root = DOMRenderer.createContainer(container, hydrate);\n+function ReactRoot(container: Container, isAsync: boolean, hydrate: boolean) {\n+ const root = DOMRenderer.createContainer(container, isAsync, hydrate);\n this._internalRoot = root;\n }\n ReactRoot.prototype.render = function(\n@@ -1031,8 +1031,9 @@ function legacyCreateRootFromDOMContainer(\n );\n }\n }\n- const root: Root = new ReactRoot(container, shouldHydrate);\n- return root;\n+ \/\/ Legacy roots are not async by default.\n+ const isAsync = false;\n+ return new ReactRoot(container, isAsync, shouldHydrate);\n }\n \n function legacyRenderSubtreeIntoContainer(\n@@ -1300,7 +1301,7 @@ if (enableCreateRoot) {\n options?: RootOptions,\n ): ReactRoot {\n const hydrate = options != null && options.hydrate === true;\n- return new ReactRoot(container, hydrate);\n+ return new ReactRoot(container, true, hydrate);\n };\n }\n \ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\nindex 792bca955f..483a049c2c 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n@@ -48,7 +48,11 @@ const ReactNativeRenderer: ReactNativeType = {\n if (!root) {\n \/\/ TODO (bvaughn): If we decide to keep the wrapper component,\n \/\/ We could create a wrapper for containerTag as well to reduce special casing.\n- root = ReactNativeFiberRenderer.createContainer(containerTag, false);\n+ root = ReactNativeFiberRenderer.createContainer(\n+ containerTag,\n+ false,\n+ false,\n+ );\n roots.set(containerTag, root);\n }\n ReactNativeFiberRenderer.updateContainer(element, root, null, callback);\ndiff --git a\/packages\/react-noop-renderer\/src\/ReactNoop.js b\/packages\/react-noop-renderer\/src\/ReactNoop.js\nindex ab778ddbce..f84e01d42c 100644\n--- a\/packages\/react-noop-renderer\/src\/ReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/ReactNoop.js\n@@ -341,7 +341,7 @@ var ReactNoop = {\n if (!root) {\n const container = {rootID: rootID, children: []};\n rootContainers.set(rootID, container);\n- root = NoopRenderer.createContainer(container, false);\n+ root = NoopRenderer.createContainer(container, true, false);\n roots.set(rootID, root);\n }\n NoopRenderer.updateContainer(element, root, null, callback);\n@@ -361,7 +361,7 @@ var ReactNoop = {\n if (!root) {\n const container = {rootID: rootID, children: []};\n rootContainers.set(rootID, container);\n- root = PersistentNoopRenderer.createContainer(container, false);\n+ root = PersistentNoopRenderer.createContainer(container, true, false);\n persistentRoots.set(rootID, root);\n }\n PersistentNoopRenderer.updateContainer(element, root, null, callback);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.js b\/packages\/react-reconciler\/src\/ReactFiber.js\nindex 257dcd65a2..7d19081d36 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.js\n@@ -35,7 +35,7 @@ import {\n import getComponentName from 'shared\/getComponentName';\n \n import {NoWork} from '.\/ReactFiberExpirationTime';\n-import {NoContext} from '.\/ReactTypeOfInternalContext';\n+import {NoContext, AsyncUpdates} from '.\/ReactTypeOfInternalContext';\n \n if (__DEV__) {\n var hasBadMapPolyfill = false;\n@@ -288,9 +288,9 @@ export function createWorkInProgress(\n return workInProgress;\n }\n \n-export function createHostRootFiber(): Fiber {\n- const fiber = createFiber(HostRoot, null, NoContext);\n- return fiber;\n+export function createHostRootFiber(isAsync): Fiber {\n+ const internalContextTag = isAsync ? AsyncUpdates : NoContext;\n+ return createFiber(HostRoot, null, null, internalContextTag);\n }\n \n export function createFiberFromElement(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\nindex dac06f0dd1..b5b319047f 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n@@ -12,7 +12,6 @@ import type {FiberRoot} from '.\/ReactFiberRoot';\n import type {ReactNodeList} from 'shared\/ReactTypes';\n import type {ExpirationTime} from '.\/ReactFiberExpirationTime';\n \n-import {enableAsyncSubtreeAPI} from 'shared\/ReactFeatureFlags';\n import {\n findCurrentHostFiber,\n findCurrentHostFiberWithNoPortals,\n@@ -233,7 +232,11 @@ type DevToolsConfig = {|\n |};\n \n export type Reconciler = {\n- createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot,\n+ createContainer(\n+ containerInfo: C,\n+ isAsync: boolean,\n+ hydrate: boolean,\n+ ): OpaqueRoot,\n updateContainer(\n element: ReactNodeList,\n container: OpaqueRoot,\n@@ -288,7 +291,6 @@ export default function(\n const {getPublicInstance} = config;\n \n const {\n- computeAsyncExpiration,\n computeUniqueAsyncExpiration,\n computeExpirationForFiber,\n scheduleWork,\n@@ -300,25 +302,6 @@ export default function(\n deferredUpdates,\n } = ReactFiberScheduler(config);\n \n- function computeRootExpirationTime(current, element) {\n- let expirationTime;\n- \/\/ Check if the top-level element is an async wrapper component. If so,\n- \/\/ treat updates to the root as async. This is a bit weird but lets us\n- \/\/ avoid a separate `renderAsync` API.\n- if (\n- enableAsyncSubtreeAPI &&\n- element != null &&\n- (element: any).type != null &&\n- (element: any).type.prototype != null &&\n- (element: any).type.prototype.unstable_isAsyncReactComponent === true\n- ) {\n- expirationTime = computeAsyncExpiration();\n- } else {\n- expirationTime = computeExpirationForFiber(current);\n- }\n- return expirationTime;\n- }\n-\n function scheduleRootUpdate(\n current: Fiber,\n element: ReactNodeList,\n@@ -408,8 +391,12 @@ export default function(\n }\n \n return {\n- createContainer(containerInfo: C, hydrate: boolean): OpaqueRoot {\n- return createFiberRoot(containerInfo, hydrate);\n+ createContainer(\n+ containerInfo: C,\n+ isAsync: boolean,\n+ hydrate: boolean,\n+ ): OpaqueRoot {\n+ return createFiberRoot(containerInfo, isAsync, hydrate);\n },\n \n updateContainer(\n@@ -419,7 +406,7 @@ export default function(\n callback: ?Function,\n ): ExpirationTime {\n const current = container.current;\n- const expirationTime = computeRootExpirationTime(current, element);\n+ const expirationTime = computeExpirationForFiber(current);\n return updateContainerAtExpirationTime(\n element,\n container,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\nindex b6e21ed687..1dd87cc14b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n@@ -52,11 +52,12 @@ export type FiberRoot = {\n \n export function createFiberRoot(\n containerInfo: any,\n+ isAsync: boolean,\n hydrate: boolean,\n ): FiberRoot {\n \/\/ Cyclic construction. This cheats the type system right now because\n \/\/ stateNode is any.\n- const uninitializedFiber = createHostRootFiber();\n+ const uninitializedFiber = createHostRootFiber(isAsync);\n const root = {\n current: uninitializedFiber,\n containerInfo: containerInfo,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberScheduler.js b\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\nindex c69f4bbcb3..1a738e9624 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\n@@ -1738,7 +1738,6 @@ export default function(\n }\n \n return {\n- computeAsyncExpiration,\n computeExpirationForFiber,\n scheduleWork,\n requestWork,\ndiff --git a\/packages\/react-rt-renderer\/src\/ReactNativeRT.js b\/packages\/react-rt-renderer\/src\/ReactNativeRT.js\nindex 5b72f15fde..9a21c4dc0a 100644\n--- a\/packages\/react-rt-renderer\/src\/ReactNativeRT.js\n+++ b\/packages\/react-rt-renderer\/src\/ReactNativeRT.js\n@@ -40,7 +40,11 @@ const ReactNativeRTFiber: ReactNativeRTType = {\n if (!root) {\n \/\/ TODO (bvaughn): If we decide to keep the wrapper component,\n \/\/ We could create a wrapper for containerTag as well to reduce special casing.\n- root = ReactNativeRTFiberRenderer.createContainer(containerTag, false);\n+ root = ReactNativeRTFiberRenderer.createContainer(\n+ containerTag,\n+ false,\n+ false,\n+ );\n roots.set(containerTag, root);\n }\n ReactNativeRTFiberRenderer.updateContainer(element, root, null, callback);\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\nindex 24cd1f4bc5..2cb3d9eecb 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n@@ -572,7 +572,11 @@ const ReactTestRendererFiber = {\n createNodeMock,\n tag: 'CONTAINER',\n };\n- let root: FiberRoot | null = TestRenderer.createContainer(container, false);\n+ let root: FiberRoot | null = TestRenderer.createContainer(\n+ container,\n+ false,\n+ false,\n+ );\n invariant(root != null, 'something went wrong');\n TestRenderer.updateContainer(element, root, null, null);\n \n"}

dillon1000/react

Files changed