{"files":[{"path":"scripts\/fiber\/tests-passing.txt","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js","status":"M"},{"path":"src\/renderers\/shared\/__tests__\/ReactPerf-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberHostContext.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js","status":"M"},{"path":"src\/renderers\/shared\/hooks\/__tests__\/ReactComponentTreeHook-test.js","status":"M"},{"path":"src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js","status":"M"},{"path":"src\/renderers\/shared\/shared\/__tests__\/ReactUpdates-test.js","status":"M"}],"commit":{"authorName":"Andrew Clark","authorEmail":"acdlite@me.com","shortRevision":"9b015184b7","authoredAt":"2016-12-29T13:11:57-08:00","revision":"9b015184b7ca4e7293bf4c3722713653b1ddd75e","subject":"Merge pull request #8634 from acdlite\/fibersyncmount"},"parents":["df6ca0e2c11e995f8053348e672b7ede62e8bed9","79f01b242531bc3706c7f254871eb37e43f60e85"],"body":"[Fiber] Sync mount and unmount","patch":"diff --git a\/scripts\/fiber\/tests-passing.txt b\/scripts\/fiber\/tests-passing.txt\nindex c56a44b5b2..c749ed37ab 100644\n--- a\/scripts\/fiber\/tests-passing.txt\n+++ b\/scripts\/fiber\/tests-passing.txt\n@@ -1207,6 +1207,7 @@ src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\n * can opt-in to deferred\/animation scheduling inside componentDidMount\/Update\n * performs Task work even after time runs out\n * does not perform animation work after time runs out\n+* can force synchronous updates with syncUpdates, even inside batchedUpdates\n \n src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n * can update child nodes of a host instance\n@@ -1576,6 +1577,7 @@ src\/renderers\/shared\/shared\/__tests__\/ReactUpdates-test.js\n * unstable_batchedUpdates should return value from a callback\n * unmounts and remounts a root in the same batch\n * handles reentrant mounting in synchronous mode\n+* mounts and unmounts are sync even in a batch\n \n src\/renderers\/shared\/shared\/__tests__\/refs-destruction-test.js\n * should remove refs when destroying the parent\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex 20d851dcee..26c3734909 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -67,9 +67,10 @@ type HostContextDev = {\n };\n type HostContextProd = string;\n type HostContext = HostContextDev | HostContextProd;\n-\n-let eventsEnabled : ?boolean = null;\n-let selectionInformation : ?mixed = null;\n+type CommitInfo = {\n+ eventsEnabled: boolean,\n+ selectionInformation: mixed,\n+};\n \n var ELEMENT_NODE_TYPE = 1;\n var DOC_NODE_TYPE = 9;\n@@ -137,17 +138,18 @@ var DOMRenderer = ReactFiberReconciler({\n return getChildNamespace(parentNamespace, type);\n },\n \n- prepareForCommit() : void {\n- eventsEnabled = ReactBrowserEventEmitter.isEnabled();\n+ prepareForCommit() : CommitInfo {\n+ const eventsEnabled = ReactBrowserEventEmitter.isEnabled();\n ReactBrowserEventEmitter.setEnabled(false);\n- selectionInformation = ReactInputSelection.getSelectionInformation();\n+ return {\n+ eventsEnabled,\n+ selectionInformation: ReactInputSelection.getSelectionInformation(),\n+ };\n },\n \n- resetAfterCommit() : void {\n- ReactInputSelection.restoreSelection(selectionInformation);\n- selectionInformation = null;\n- ReactBrowserEventEmitter.setEnabled(eventsEnabled);\n- eventsEnabled = null;\n+ resetAfterCommit(commitInfo : CommitInfo) : void {\n+ ReactInputSelection.restoreSelection(commitInfo.selectionInformation);\n+ ReactBrowserEventEmitter.setEnabled(commitInfo.eventsEnabled);\n },\n \n createInstance(\n@@ -322,9 +324,15 @@ function renderSubtreeIntoContainer(parentComponent : ?ReactComponent {\n+ DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);\n+ });\n+ } else {\n+ DOMRenderer.updateContainer(children, root, parentComponent, callback);\n }\n- DOMRenderer.updateContainer(children, root, parentComponent, callback);\n return DOMRenderer.getPublicRootInstance(root);\n }\n \n@@ -346,8 +354,11 @@ var ReactDOM = {\n unmountComponentAtNode(container : DOMContainerElement) {\n warnAboutUnstableUse();\n if (container._reactRootContainer) {\n- return renderSubtreeIntoContainer(null, null, container, () => {\n- container._reactRootContainer = null;\n+ \/\/ Unmount is always sync, even if we're in a batch.\n+ return DOMRenderer.syncUpdates(() => {\n+ return renderSubtreeIntoContainer(null, null, container, () => {\n+ container._reactRootContainer = null;\n+ });\n });\n }\n },\ndiff --git a\/src\/renderers\/shared\/__tests__\/ReactPerf-test.js b\/src\/renderers\/shared\/__tests__\/ReactPerf-test.js\nindex b8f895fc88..2695e648b2 100644\n--- a\/src\/renderers\/shared\/__tests__\/ReactPerf-test.js\n+++ b\/src\/renderers\/shared\/__tests__\/ReactPerf-test.js\n@@ -16,6 +16,7 @@ describe('ReactPerf', () => {\n var ReactDOM;\n var ReactPerf;\n var ReactTestUtils;\n+ var ReactDOMFeatureFlags;\n var emptyFunction;\n \n var App;\n@@ -38,6 +39,7 @@ describe('ReactPerf', () => {\n ReactDOM = require('ReactDOM');\n ReactPerf = require('ReactPerf');\n ReactTestUtils = require('ReactTestUtils');\n+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');\n emptyFunction = require('emptyFunction');\n \n App = class extends React.Component {\n@@ -614,7 +616,7 @@ describe('ReactPerf', () => {\n }\n }\n class EvilPortal extends React.Component {\n- componentWillMount() {\n+ componentDidMount() {\n var portalContainer = document.createElement('div');\n ReactDOM.render(, portalContainer);\n }\n@@ -645,6 +647,10 @@ describe('ReactPerf', () => {\n var container = document.createElement('div');\n var thrownErr = new Error('Muhaha!');\n \n+ if (ReactDOMFeatureFlags.useFiber) {\n+ spyOn(console, 'error');\n+ }\n+\n class Evil extends React.Component {\n componentWillMount() {\n throw thrownErr;\n@@ -679,6 +685,15 @@ describe('ReactPerf', () => {\n }\n ReactDOM.unmountComponentAtNode(container);\n ReactPerf.stop();\n+\n+ if (ReactDOMFeatureFlags.useFiber) {\n+ \/\/ A sync `render` inside cWM will print a warning. That should be the\n+ \/\/ only warning.\n+ expect(console.error.calls.count()).toEqual(1);\n+ expect(console.error.calls.argsFor(0)[0]).toMatch(\n+ \/Render methods should be a pure function of props and state\/\n+ );\n+ }\n });\n \n it('should not print errant warnings if portal throws in componentDidMount()', () => {\n@@ -694,7 +709,7 @@ describe('ReactPerf', () => {\n }\n }\n class EvilPortal extends React.Component {\n- componentWillMount() {\n+ componentDidMount() {\n var portalContainer = document.createElement('div');\n ReactDOM.render(, portalContainer);\n }\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex 4cfb1f4bb1..e5ee7a831d 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -66,8 +66,8 @@ if (__DEV__) {\n var ReactDebugCurrentFiber = require('ReactDebugCurrentFiber');\n }\n \n-module.exports = function(\n- config : HostConfig,\n+module.exports = function(\n+ config : HostConfig,\n hostContext : HostContext,\n scheduleUpdate : (fiber : Fiber, priorityLevel : PriorityLevel) => void,\n getPriorityContext : () => PriorityLevel,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex bb56a4c78f..429e892e0b 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -33,8 +33,8 @@ var {\n ContentReset,\n } = require('ReactTypeOfSideEffect');\n \n-module.exports = function(\n- config : HostConfig,\n+module.exports = function(\n+ config : HostConfig,\n hostContext : HostContext,\n captureError : (failedFiber : Fiber, error: Error) => ?Fiber\n ) {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex bffecb3c46..8c836cfda5 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -46,8 +46,8 @@ if (__DEV__) {\n var ReactDebugCurrentFiber = require('ReactDebugCurrentFiber');\n }\n \n-module.exports = function(\n- config : HostConfig,\n+module.exports = function(\n+ config : HostConfig,\n hostContext : HostContext,\n ) {\n const {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberHostContext.js b\/src\/renderers\/shared\/fiber\/ReactFiberHostContext.js\nindex 529271de6a..de311124ca 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberHostContext.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberHostContext.js\n@@ -34,8 +34,8 @@ export type HostContext = {\n resetHostContainer() : void,\n };\n \n-module.exports = function(\n- config : HostConfig\n+module.exports = function(\n+ config : HostConfig\n ) : HostContext {\n const {\n getChildHostContext,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex ff55cbddaa..3424ef683f 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -43,7 +43,7 @@ export type Deadline = {\n \n type OpaqueNode = Fiber;\n \n-export type HostConfig = {\n+export type HostConfig = {\n \n getRootHostContext(rootContainerInstance : C) : CX,\n getChildHostContext(parentHostContext : CX, type : T) : CX,\n@@ -69,8 +69,8 @@ export type HostConfig = {\n scheduleAnimationCallback(callback : () => void) : void,\n scheduleDeferredCallback(callback : (deadline : Deadline) => void) : void,\n \n- prepareForCommit() : void,\n- resetAfterCommit() : void,\n+ prepareForCommit() : CI,\n+ resetAfterCommit(commitInfo : CI) : void,\n \n useSyncScheduling ?: boolean,\n };\n@@ -100,7 +100,7 @@ getContextForSubtree._injectFiber(function(fiber : Fiber) {\n parentContext;\n });\n \n-module.exports = function(config : HostConfig) : Reconciler {\n+module.exports = function(config : HostConfig) : Reconciler {\n \n var {\n scheduleUpdate,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 63cea47ee4..20603ec688 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -69,11 +69,12 @@ var {\n if (__DEV__) {\n var ReactFiberInstrumentation = require('ReactFiberInstrumentation');\n var ReactDebugCurrentFiber = require('ReactDebugCurrentFiber');\n+ var warning = require('warning');\n }\n \n var timeHeuristicForUnitOfWork = 1;\n \n-module.exports = function(config : HostConfig) {\n+module.exports = function(config : HostConfig) {\n const hostContext = ReactFiberHostContext(config);\n const { popHostContainer, popHostContext, resetHostContainer } = hostContext;\n const { beginWork, beginFailedWork } = ReactFiberBeginWork(\n@@ -107,10 +108,12 @@ module.exports = function(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(config : HostConfig(fn : (a: A) => R, a : A) : R {\n- const previousIsPerformingWork = isPerformingWork;\n- \/\/ Simulate that we're performing work so that sync work is batched\n- isPerformingWork = true;\n+ const previousShouldDeferSyncUpdates = shouldDeferSyncUpdates;\n+ shouldDeferSyncUpdates = true;\n try {\n return fn(a);\n } finally {\n- isPerformingWork = previousIsPerformingWork;\n- \/\/ If we're not already performing work, we need to flush any task work\n+ shouldDeferSyncUpdates = previousShouldDeferSyncUpdates;\n+ \/\/ If we're not already inside a batch, we need to flush any task work\n \/\/ that was created by the user-provided function.\n- if (!isPerformingWork) {\n+ if (!shouldDeferSyncUpdates) {\n performWork(TaskPriority);\n }\n }\n@@ -1102,11 +1136,14 @@ module.exports = function(config : HostConfig(fn : () => A) : A {\n const previousPriorityContext = priorityContext;\n+ const previousShouldDeferSyncUpdates = shouldDeferSyncUpdates;\n priorityContext = SynchronousPriority;\n+ shouldDeferSyncUpdates = false;\n try {\n return fn();\n } finally {\n priorityContext = previousPriorityContext;\n+ shouldDeferSyncUpdates = previousShouldDeferSyncUpdates;\n }\n }\n \ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\nindex 26e14b99be..33a43df6d6 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\n@@ -340,4 +340,14 @@ describe('ReactIncrementalScheduling', () => {\n \/\/ animation priority.\n expect(ReactNoop.getChildren()).toEqual([span(1)]);\n });\n+\n+ it('can force synchronous updates with syncUpdates, even inside batchedUpdates', done => {\n+ ReactNoop.batchedUpdates(() => {\n+ ReactNoop.syncUpdates(() => {\n+ ReactNoop.render();\n+ expect(ReactNoop.getChildren()).toEqual([span()]);\n+ done();\n+ });\n+ });\n+ });\n });\ndiff --git a\/src\/renderers\/shared\/hooks\/__tests__\/ReactComponentTreeHook-test.js b\/src\/renderers\/shared\/hooks\/__tests__\/ReactComponentTreeHook-test.js\nindex db281517a4..e0114b5643 100644\n--- a\/src\/renderers\/shared\/hooks\/__tests__\/ReactComponentTreeHook-test.js\n+++ b\/src\/renderers\/shared\/hooks\/__tests__\/ReactComponentTreeHook-test.js\n@@ -18,6 +18,7 @@ describe('ReactComponentTreeHook', () => {\n var ReactInstanceMap;\n var ReactComponentTreeHook;\n var ReactComponentTreeTestUtils;\n+ var ReactDOMFeatureFlags;\n \n beforeEach(() => {\n jest.resetModules();\n@@ -28,6 +29,7 @@ describe('ReactComponentTreeHook', () => {\n ReactInstanceMap = require('ReactInstanceMap');\n ReactComponentTreeHook = require('ReactComponentTreeHook');\n ReactComponentTreeTestUtils = require('ReactComponentTreeTestUtils');\n+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');\n });\n \n function assertTreeMatches(pairs) {\n@@ -1841,6 +1843,9 @@ describe('ReactComponentTreeHook', () => {\n \/\/ https:\/\/github.com\/facebook\/react\/issues\/7187\n var el = document.createElement('div');\n var portalEl = document.createElement('div');\n+ if (ReactDOMFeatureFlags.useFiber) {\n+ spyOn(console, 'error');\n+ }\n class Foo extends React.Component {\n componentWillMount() {\n ReactDOM.render(

, portalEl);\n@@ -1850,6 +1855,14 @@ describe('ReactComponentTreeHook', () => {\n }\n }\n ReactDOM.render(, el);\n+ if (ReactDOMFeatureFlags.useFiber) {\n+ \/\/ A sync `render` inside cWM will print a warning. That should be the\n+ \/\/ only warning.\n+ expect(console.error.calls.count()).toEqual(1);\n+ expect(console.error.calls.argsFor(0)[0]).toMatch(\n+ \/Render methods should be a pure function of props and state\/\n+ );\n+ }\n });\n \n it('is created when calling renderToString during render', () => {\ndiff --git a\/src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js b\/src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\nindex 1a302d6fca..af226d2f22 100644\n--- a\/src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\n+++ b\/src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\n@@ -1266,7 +1266,7 @@ describe('ReactCompositeComponent', () => {\n var layer = document.createElement('div');\n \n class Component extends React.Component {\n- componentWillMount() {\n+ componentDidMount() {\n ReactDOM.render(

, layer);\n }\n \ndiff --git a\/src\/renderers\/shared\/shared\/__tests__\/ReactUpdates-test.js b\/src\/renderers\/shared\/shared\/__tests__\/ReactUpdates-test.js\nindex 82113a46d3..638ab6eda2 100644\n--- a\/src\/renderers\/shared\/shared\/__tests__\/ReactUpdates-test.js\n+++ b\/src\/renderers\/shared\/shared\/__tests__\/ReactUpdates-test.js\n@@ -1142,4 +1142,26 @@ describe('ReactUpdates', () => {\n expect(container.textContent).toBe('goodbye');\n expect(mounts).toBe(1);\n });\n+\n+ it('mounts and unmounts are sync even in a batch', () => {\n+ var container1 = document.createElement('div');\n+ var container2 = document.createElement('div');\n+\n+ let called = false;\n+ class Foo extends React.Component {\n+ componentDidMount() {\n+ called = true;\n+ ReactDOM.render(

Hello<\/div>, container2);\n+ expect(container2.textContent).toEqual('Hello');\n+ ReactDOM.unmountComponentAtNode(container2);\n+ expect(container2.textContent).toEqual('');\n+ }\n+ render() {\n+ return

{this.props.step}<\/div>;\n+ }\n+ }\n+\n+ ReactDOM.render(, container1);\n+ expect(called).toEqual(true);\n+ });\n });\n"}

dillon1000/react

Files changed