{"body":"[Fiber] Host Container Fiber and Priority Levels","parents":["6cc037bd0d49f1f55cbdd36fbfd395118c64d393","6a8cedf9858cfef73f70784a377d5c008360e5a0"],"patch":"diff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 1b411a2f3f..9214a1865b 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -19,6 +19,8 @@\n \n 'use strict';\n \n+import type { Fiber } from 'ReactFiber';\n+\n var ReactFiberReconciler = require('ReactFiberReconciler');\n \n var scheduledHighPriCallback = null;\n@@ -38,12 +40,16 @@ var NoopRenderer = ReactFiberReconciler({\n \n });\n \n+var root = null;\n+\n var ReactNoop = {\n \n render(element : ReactElement) {\n-\n- NoopRenderer.mountNewRoot(element);\n-\n+ if (!root) {\n+ root = NoopRenderer.mountContainer(element, null);\n+ } else {\n+ NoopRenderer.updateContainer(element, root);\n+ }\n },\n \n flushHighPri() {\n@@ -79,6 +85,24 @@ var ReactNoop = {\n ReactNoop.flushLowPri();\n },\n \n+ \/\/ Logs the current state of the tree.\n+ dumpTree() {\n+ if (!root) {\n+ console.log('Nothing rendered yet.');\n+ return;\n+ }\n+ function logFiber(fiber : Fiber, depth) {\n+ console.log(' '.repeat(depth) + '- ' + (fiber.type ? fiber.type.name || fiber.type : '[root]'), '[' + fiber.pendingWorkPriority + (fiber.pendingProps ? '*' : '') + ']');\n+ if (fiber.child) {\n+ logFiber(fiber.child, depth + 1);\n+ }\n+ if (fiber.sibling) {\n+ logFiber(fiber.sibling, depth);\n+ }\n+ }\n+ logFiber((root.stateNode : any).current, 0);\n+ },\n+\n };\n \n module.exports = ReactNoop;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\nindex 8921b9f188..dbd08e765f 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n@@ -14,6 +14,7 @@\n \n import type { ReactCoroutine, ReactYield } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n \n import type { ReactNodeList } from 'ReactTypes';\n \n@@ -28,7 +29,7 @@ var {\n var ReactFiber = require('ReactFiber');\n var ReactReifiedYield = require('ReactReifiedYield');\n \n-function createSubsequentChild(parent : Fiber, existingChild : ?Fiber, previousSibling : Fiber, newChildren) : Fiber {\n+function createSubsequentChild(returnFiber : Fiber, existingChild : ?Fiber, previousSibling : Fiber, newChildren, priority : PriorityLevel) : Fiber {\n if (typeof newChildren !== 'object' || newChildren === null) {\n return previousSibling;\n }\n@@ -41,34 +42,35 @@ function createSubsequentChild(parent : Fiber, existingChild : ?Fiber, previousS\n element.key === existingChild.key) {\n \/\/ TODO: This is not sufficient since previous siblings could be new.\n \/\/ Will fix reconciliation properly later.\n- const clone = ReactFiber.cloneFiber(existingChild);\n- clone.input = element.props;\n+ const clone = ReactFiber.cloneFiber(existingChild, priority);\n+ clone.pendingProps = element.props;\n clone.child = existingChild.child;\n clone.sibling = null;\n+ clone.return = returnFiber;\n previousSibling.sibling = clone;\n return clone;\n }\n- const child = ReactFiber.createFiberFromElement(element);\n+ const child = ReactFiber.createFiberFromElement(element, priority);\n previousSibling.sibling = child;\n- child.parent = parent;\n+ child.return = returnFiber;\n return child;\n }\n \n case REACT_COROUTINE_TYPE: {\n const coroutine = (newChildren : ReactCoroutine);\n- const child = ReactFiber.createFiberFromCoroutine(coroutine);\n+ const child = ReactFiber.createFiberFromCoroutine(coroutine, priority);\n previousSibling.sibling = child;\n- child.parent = parent;\n+ child.return = returnFiber;\n return child;\n }\n \n case REACT_YIELD_TYPE: {\n const yieldNode = (newChildren : ReactYield);\n const reifiedYield = ReactReifiedYield.createReifiedYield(yieldNode);\n- const child = ReactFiber.createFiberFromYield(yieldNode);\n+ const child = ReactFiber.createFiberFromYield(yieldNode, priority);\n child.output = reifiedYield;\n previousSibling.sibling = child;\n- child.parent = parent;\n+ child.return = returnFiber;\n return child;\n }\n }\n@@ -77,7 +79,7 @@ function createSubsequentChild(parent : Fiber, existingChild : ?Fiber, previousS\n let prev : Fiber = previousSibling;\n let existing : ?Fiber = existingChild;\n for (var i = 0; i < newChildren.length; i++) {\n- prev = createSubsequentChild(parent, existing, prev, newChildren[i]);\n+ prev = createSubsequentChild(returnFiber, existing, prev, newChildren[i], priority);\n if (prev && existing) {\n \/\/ TODO: This is not correct because there could've been more\n \/\/ than one sibling consumed but I don't want to return a tuple.\n@@ -91,7 +93,7 @@ function createSubsequentChild(parent : Fiber, existingChild : ?Fiber, previousS\n }\n }\n \n-function createFirstChild(parent, existingChild, newChildren) {\n+function createFirstChild(returnFiber, existingChild, newChildren, priority) {\n if (typeof newChildren !== 'object' || newChildren === null) {\n return null;\n }\n@@ -103,21 +105,22 @@ function createFirstChild(parent, existingChild, newChildren) {\n element.type === existingChild.type &&\n element.key === existingChild.key) {\n \/\/ Get the clone of the existing fiber.\n- const clone = ReactFiber.cloneFiber(existingChild);\n- clone.input = element.props;\n+ const clone = ReactFiber.cloneFiber(existingChild, priority);\n+ clone.pendingProps = element.props;\n clone.child = existingChild.child;\n clone.sibling = null;\n+ clone.return = returnFiber;\n return clone;\n }\n- const child = ReactFiber.createFiberFromElement(element);\n- child.parent = parent;\n+ const child = ReactFiber.createFiberFromElement(element, priority);\n+ child.return = returnFiber;\n return child;\n }\n \n case REACT_COROUTINE_TYPE: {\n const coroutine = (newChildren : ReactCoroutine);\n- const child = ReactFiber.createFiberFromCoroutine(coroutine);\n- child.parent = parent;\n+ const child = ReactFiber.createFiberFromCoroutine(coroutine, priority);\n+ child.return = returnFiber;\n return child;\n }\n \n@@ -127,9 +130,9 @@ function createFirstChild(parent, existingChild, newChildren) {\n \/\/ the fragment.\n const yieldNode = (newChildren : ReactYield);\n const reifiedYield = ReactReifiedYield.createReifiedYield(yieldNode);\n- const child = ReactFiber.createFiberFromYield(yieldNode);\n+ const child = ReactFiber.createFiberFromYield(yieldNode, priority);\n child.output = reifiedYield;\n- child.parent = parent;\n+ child.return = returnFiber;\n return child;\n }\n }\n@@ -140,10 +143,10 @@ function createFirstChild(parent, existingChild, newChildren) {\n var existing : ?Fiber = existingChild;\n for (var i = 0; i < newChildren.length; i++) {\n if (prev == null) {\n- prev = createFirstChild(parent, existing, newChildren[i]);\n+ prev = createFirstChild(returnFiber, existing, newChildren[i], priority);\n first = prev;\n } else {\n- prev = createSubsequentChild(parent, existing, prev, newChildren[i]);\n+ prev = createSubsequentChild(returnFiber, existing, prev, newChildren[i], priority);\n }\n if (prev && existing) {\n \/\/ TODO: This is not correct because there could've been more\n@@ -158,6 +161,8 @@ function createFirstChild(parent, existingChild, newChildren) {\n }\n }\n \n-exports.reconcileChildFibers = function(parent : Fiber, currentFirstChild : ?Fiber, newChildren : ReactNodeList) : ?Fiber {\n- return createFirstChild(parent, currentFirstChild, newChildren);\n+\/\/ TODO: This API won't work because we'll need to transfer the side-effects of\n+\/\/ unmounting children to the returnFiber.\n+exports.reconcileChildFibers = function(returnFiber : Fiber, currentFirstChild : ?Fiber, newChildren : ReactNodeList, priority : PriorityLevel) : ?Fiber {\n+ return createFirstChild(returnFiber, currentFirstChild, newChildren, priority);\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 86e5cbaed1..48363ac2a0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -12,18 +12,25 @@\n \n 'use strict';\n \n-var ReactTypesOfWork = require('ReactTypesOfWork');\n+import type { ReactCoroutine, ReactYield } from 'ReactCoroutine';\n+import type { TypeOfWork } from 'ReactTypeOfWork';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n+\n+var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n IndeterminateComponent,\n ClassComponent,\n+ HostContainer,\n HostComponent,\n CoroutineComponent,\n YieldComponent,\n-} = ReactTypesOfWork;\n+} = ReactTypeOfWork;\n \n var ReactElement = require('ReactElement');\n \n-import type { ReactCoroutine, ReactYield } from 'ReactCoroutine';\n+var {\n+ NoWork,\n+} = require('ReactPriorityLevel');\n \n \/\/ An Instance is shared between all versions of a component. We can easily\n \/\/ break this out into a separate object to avoid copying so much to the\n@@ -32,12 +39,7 @@ import type { ReactCoroutine, ReactYield } from 'ReactCoroutine';\n type Instance = {\n \n \/\/ Tag identifying the type of fiber.\n- tag: number,\n-\n- \/\/ The parent Fiber used to create this one. The type is constrained to the\n- \/\/ Instance part of the Fiber since it is not safe to traverse the tree from\n- \/\/ the instance.\n- parent: ?Instance, \/\/ Consider a regenerated temporary parent stack instead.\n+ tag: TypeOfWork,\n \n \/\/ Unique identifier of this child.\n key: null | string,\n@@ -48,12 +50,22 @@ type Instance = {\n \/\/ The local state associated with this fiber.\n stateNode: ?Object,\n \n+ \/\/ Conceptual aliases\n+ \/\/ parent : Instance -> return The parent happens to be the same as the\n+ \/\/ return fiber since we've merged the fiber and instance.\n+\n };\n \n \/\/ A Fiber is work on a Component that needs to be done or was done. There can\n \/\/ be more than one per component.\n export type Fiber = Instance & {\n \n+ \/\/ The Fiber to return to after finishing processing this one.\n+ \/\/ This is effectively the parent, but there can be multiple parents (two)\n+ \/\/ so this is only the parent of the thing we're currently processing.\n+ \/\/ It is conceptually the same as the return address of a stack frame.\n+ return: ?Fiber,\n+\n \/\/ Singly Linked List Tree Structure.\n child: ?Fiber,\n sibling: ?Fiber,\n@@ -63,32 +75,41 @@ export type Fiber = Instance & {\n ref: null | (handle : ?Object) => void,\n \n \/\/ Input is the data coming into process this fiber. Arguments. Props.\n- input: any, \/\/ This type will be more specific once we overload the tag.\n- \/\/ TODO: I think that there is a way to merge input and memoizedInput somehow.\n- memoizedInput: any, \/\/ The input used to create the output.\n+ pendingProps: any, \/\/ This type will be more specific once we overload the tag.\n+ \/\/ TODO: I think that there is a way to merge pendingProps and memoizedProps.\n+ memoizedProps: any, \/\/ The props used to create the output.\n \/\/ Output is the return value of this fiber, or a linked list of return values\n \/\/ if this returns multiple values. Such as a fragment.\n output: any, \/\/ This type will be more specific once we overload the tag.\n \n \/\/ This will be used to quickly determine if a subtree has no pending changes.\n- hasPendingChanges: bool,\n+ pendingWorkPriority: PriorityLevel,\n \n \/\/ This is a pooled version of a Fiber. Every fiber that gets updated will\n \/\/ eventually have a pair. There are cases when we can clean up pairs to save\n \/\/ memory if we need to.\n alternate: ?Fiber,\n \n+ \/\/ Keeps track if we've completed this node or if we're currently in the\n+ \/\/ middle of processing it. We really should know this based on pendingProps\n+ \/\/ or something else. We could also reuse the tag for this purpose. However,\n+ \/\/ I'm not really sure so I'll use a flag for now.\n+ \/\/ TODO: Find another way to infer this flag.\n+ hasWorkInProgress: bool,\n+\n+ \/\/ Conceptual aliases\n+ \/\/ workInProgress : Fiber -> alternate The alternate used for reuse happens\n+ \/\/ to be the same as work in progress.\n+\n };\n \n-var createFiber = function(tag : number, key : null | string) : Fiber {\n+var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n return {\n \n \/\/ Instance\n \n tag: tag,\n \n- parent: null,\n-\n key: key,\n \n type: null,\n@@ -97,16 +118,20 @@ var createFiber = function(tag : number, key : null | string) : Fiber {\n \n \/\/ Fiber\n \n+ return: null,\n+\n child: null,\n sibling: null,\n \n ref: null,\n \n- input: null,\n- memoizedInput: null,\n+ pendingProps: null,\n+ memoizedProps: null,\n output: null,\n \n- hasPendingChanges: true,\n+ pendingWorkPriority: NoWork,\n+\n+ hasWorkInProgress: false,\n \n alternate: null,\n \n@@ -118,35 +143,46 @@ function shouldConstruct(Component) {\n }\n \n \/\/ This is used to create an alternate fiber to do work on.\n-exports.cloneFiber = function(fiber : Fiber) : Fiber {\n+exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fiber {\n \/\/ We use a double buffering pooling technique because we know that we'll only\n \/\/ ever need at most two versions of a tree. We pool the \"other\" unused node\n \/\/ that we're free to reuse. This is lazily created to avoid allocating extra\n \/\/ objects for things that are never updated. It also allow us to reclaim the\n \/\/ extra memory if needed.\n- if (fiber.alternate) {\n- return fiber.alternate;\n- }\n- \/\/ This should not have an alternate already\n- var alt = createFiber(fiber.tag, fiber.key);\n-\n- if (fiber.parent) {\n- \/\/ TODO: This assumes the parent's alternate is already created.\n- \/\/ Stop using the alternates of parents once we have a parent stack.\n- \/\/ $FlowFixMe: This downcast is not safe. It is intentionally an error.\n- alt.parent = fiber.parent.alternate;\n+ let alt = fiber.alternate;\n+ if (alt) {\n+ alt.stateNode = fiber.stateNode;\n+ alt.child = fiber.child;\n+ alt.sibling = fiber.sibling;\n+ alt.ref = alt.ref;\n+ alt.pendingProps = fiber.pendingProps;\n+ alt.pendingWorkPriority = priorityLevel;\n+ return alt;\n }\n \n+ \/\/ This should not have an alternate already\n+ alt = createFiber(fiber.tag, fiber.key);\n alt.type = fiber.type;\n alt.stateNode = fiber.stateNode;\n+ alt.child = fiber.child;\n+ alt.sibling = fiber.sibling;\n+ alt.ref = alt.ref;\n+ alt.pendingWorkPriority = priorityLevel;\n+\n alt.alternate = fiber;\n fiber.alternate = alt;\n return alt;\n };\n \n-exports.createFiberFromElement = function(element : ReactElement) {\n+exports.createHostContainerFiber = function() {\n+ const fiber = createFiber(HostContainer, null);\n+ return fiber;\n+};\n+\n+exports.createFiberFromElement = function(element : ReactElement, priorityLevel : PriorityLevel) {\n const fiber = exports.createFiberFromElementType(element.type, element.key);\n- fiber.input = element.props;\n+ fiber.pendingProps = element.props;\n+ fiber.pendingWorkPriority = priorityLevel;\n return fiber;\n };\n \n@@ -169,14 +205,16 @@ exports.createFiberFromElementType = function(type : mixed, key : null | string)\n return fiber;\n };\n \n-exports.createFiberFromCoroutine = function(coroutine : ReactCoroutine) {\n+exports.createFiberFromCoroutine = function(coroutine : ReactCoroutine, priorityLevel : PriorityLevel) {\n const fiber = createFiber(CoroutineComponent, coroutine.key);\n fiber.type = coroutine.handler;\n- fiber.input = coroutine;\n+ fiber.pendingProps = coroutine;\n+ fiber.pendingWorkPriority = priorityLevel;\n return fiber;\n };\n \n-exports.createFiberFromYield = function(yieldNode : ReactYield) {\n+exports.createFiberFromYield = function(yieldNode : ReactYield, priorityLevel : PriorityLevel) {\n const fiber = createFiber(YieldComponent, yieldNode.key);\n+ fiber.pendingProps = {};\n return fiber;\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex 24ec08db90..ec1d78af03 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -16,63 +16,123 @@ import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n \n var ReactChildFiber = require('ReactChildFiber');\n-var ReactTypesOfWork = require('ReactTypesOfWork');\n+var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n IndeterminateComponent,\n FunctionalComponent,\n ClassComponent,\n+ HostContainer,\n HostComponent,\n CoroutineComponent,\n CoroutineHandlerPhase,\n YieldComponent,\n-} = ReactTypesOfWork;\n+} = ReactTypeOfWork;\n+var {\n+ NoWork,\n+ OffscreenPriority,\n+} = require('ReactPriorityLevel');\n+var { findNextUnitOfWorkAtPriority } = require('ReactFiberPendingWork');\n \n function reconcileChildren(current, workInProgress, nextChildren) {\n+ const priority = workInProgress.pendingWorkPriority;\n workInProgress.child = ReactChildFiber.reconcileChildFibers(\n workInProgress,\n current ? current.child : null,\n- nextChildren\n+ nextChildren,\n+ priority\n );\n }\n \n function updateFunctionalComponent(current, workInProgress) {\n var fn = workInProgress.type;\n- var props = workInProgress.input;\n+ var props = workInProgress.pendingProps;\n console.log('update fn:', fn.name);\n var nextChildren = fn(props);\n reconcileChildren(current, workInProgress, nextChildren);\n+ workInProgress.pendingWorkPriority = NoWork;\n }\n \n function updateHostComponent(current, workInProgress) {\n- console.log('host component', workInProgress.type, typeof workInProgress.input.children === 'string' ? workInProgress.input.children : '');\n+ console.log('host component', workInProgress.type, typeof workInProgress.pendingProps.children === 'string' ? workInProgress.pendingProps.children : '');\n \n- var nextChildren = workInProgress.input.children;\n- reconcileChildren(current, workInProgress, nextChildren);\n+ var nextChildren = workInProgress.pendingProps.children;\n+\n+ let priority = workInProgress.pendingWorkPriority;\n+ if (workInProgress.pendingProps.hidden && priority !== OffscreenPriority) {\n+ \/\/ If this host component is hidden, we can reconcile its children at\n+ \/\/ the lowest priority and bail out from this particular pass. Unless, we're\n+ \/\/ currently reconciling the lowest priority.\n+ workInProgress.child = ReactChildFiber.reconcileChildFibers(\n+ workInProgress,\n+ current ? current.child : null,\n+ nextChildren,\n+ OffscreenPriority\n+ );\n+ workInProgress.pendingWorkPriority = OffscreenPriority;\n+ return null;\n+ } else {\n+ workInProgress.child = ReactChildFiber.reconcileChildFibers(\n+ workInProgress,\n+ current ? current.child : null,\n+ nextChildren,\n+ priority\n+ );\n+ workInProgress.pendingWorkPriority = NoWork;\n+ return workInProgress.child;\n+ }\n }\n \n function mountIndeterminateComponent(current, workInProgress) {\n var fn = workInProgress.type;\n- var props = workInProgress.input;\n+ var props = workInProgress.pendingProps;\n var value = fn(props);\n if (typeof value === 'object' && value && typeof value.render === 'function') {\n console.log('performed work on class:', fn.name);\n \/\/ Proceed under the assumption that this is a class instance\n workInProgress.tag = ClassComponent;\n+ if (workInProgress.alternate) {\n+ workInProgress.alternate.tag = ClassComponent;\n+ }\n } else {\n console.log('performed work on fn:', fn.name);\n \/\/ Proceed under the assumption that this is a functional component\n workInProgress.tag = FunctionalComponent;\n+ if (workInProgress.alternate) {\n+ workInProgress.alternate.tag = FunctionalComponent;\n+ }\n }\n reconcileChildren(current, workInProgress, value);\n+ workInProgress.pendingWorkPriority = NoWork;\n }\n \n function updateCoroutineComponent(current, workInProgress) {\n- var coroutine = (workInProgress.input : ?ReactCoroutine);\n+ var coroutine = (workInProgress.pendingProps : ?ReactCoroutine);\n if (!coroutine) {\n throw new Error('Should be resolved by now');\n }\n console.log('begin coroutine', workInProgress.type.name);\n reconcileChildren(current, workInProgress, coroutine.children);\n+ workInProgress.pendingWorkPriority = NoWork;\n+}\n+\n+function reuseChildren(returnFiber : Fiber, firstChild : Fiber) {\n+ \/\/ TODO: None of this should be necessary if structured better.\n+ \/\/ The returnFiber pointer only needs to be updated when we walk into this child\n+ \/\/ which we don't do right now. If the pending work priority indicated only\n+ \/\/ if a child has work rather than if the node has work, then we would know\n+ \/\/ by a single lookup on workInProgress rather than having to go through\n+ \/\/ each child.\n+ let child = firstChild;\n+ do {\n+ \/\/ Update the returnFiber of the child to the newest fiber.\n+ child.return = returnFiber;\n+ \/\/ Retain the priority if there's any work left to do in the children.\n+ if (child.pendingWorkPriority !== NoWork &&\n+ (returnFiber.pendingWorkPriority === NoWork ||\n+ returnFiber.pendingWorkPriority > child.pendingWorkPriority)) {\n+ returnFiber.pendingWorkPriority = child.pendingWorkPriority;\n+ }\n+ } while (child = child.sibling);\n }\n \n function beginWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n@@ -80,20 +140,51 @@ function beginWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n \/\/ Ideally nothing should rely on this, but relying on it here\n \/\/ means that we don't need an additional field on the work in\n \/\/ progress.\n- if (current && workInProgress.input === current.memoizedInput) {\n+ if (current && workInProgress.pendingProps === current.memoizedProps) {\n \/\/ The most likely scenario is that the previous copy of the tree contains\n- \/\/ the same input as the new one. In that case, we can just copy the output\n+ \/\/ the same props as the new one. In that case, we can just copy the output\n \/\/ and children from that node.\n+ workInProgress.memoizedProps = workInProgress.pendingProps;\n workInProgress.output = current.output;\n- workInProgress.child = current.child;\n+ const priorityLevel = workInProgress.pendingWorkPriority;\n+ workInProgress.pendingProps = null;\n+ workInProgress.pendingWorkPriority = NoWork;\n workInProgress.stateNode = current.stateNode;\n- return null;\n+ if (current.child) {\n+ \/\/ If we bail out but still has work with the current priority in this\n+ \/\/ subtree, we need to go find it right now. If we don't, we won't flush\n+ \/\/ it until the next tick.\n+ workInProgress.child = current.child;\n+ reuseChildren(workInProgress, workInProgress.child);\n+ if (workInProgress.pendingWorkPriority <= priorityLevel) {\n+ \/\/ TODO: This passes the current node and reads the priority level and\n+ \/\/ pending props from that. We want it to read our priority level and\n+ \/\/ pending props from the work in progress. Needs restructuring.\n+ return findNextUnitOfWorkAtPriority(workInProgress.alternate, priorityLevel);\n+ } else {\n+ return null;\n+ }\n+ } else {\n+ workInProgress.child = null;\n+ return null;\n+ }\n }\n- if (workInProgress.input === workInProgress.memoizedInput) {\n- \/\/ In a ping-pong scenario, this version could actually contain the\n- \/\/ old input. In that case, we can just bail out.\n+\n+ if (!workInProgress.hasWorkInProgress &&\n+ workInProgress.pendingProps === workInProgress.memoizedProps &&\n+ workInProgress.pendingWorkPriority === NoWork) {\n+ \/\/ If we started this work before, and finished it, or if we're in a\n+ \/\/ ping-pong update scenario, this version could already be what we're\n+ \/\/ looking for. In that case, we should be able to just bail out.\n+ workInProgress.pendingProps = null;\n+ \/\/ TODO: We should be able to bail out if there is remaining work at a lower\n+ \/\/ priority too. However, I don't know if that is safe or even better since\n+ \/\/ the other tree could've potentially finished that work.\n return null;\n }\n+\n+ workInProgress.hasWorkInProgress = true;\n+\n switch (workInProgress.tag) {\n case IndeterminateComponent:\n mountIndeterminateComponent(current, workInProgress);\n@@ -102,11 +193,22 @@ function beginWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n updateFunctionalComponent(current, workInProgress);\n return workInProgress.child;\n case ClassComponent:\n- console.log('class component', workInProgress.input.type.name);\n+ console.log('class component', workInProgress.pendingProps.type.name);\n return workInProgress.child;\n+ case HostContainer:\n+ reconcileChildren(current, workInProgress, workInProgress.pendingProps);\n+ \/\/ A yield component is just a placeholder, we can just run through the\n+ \/\/ next one immediately.\n+ workInProgress.pendingWorkPriority = NoWork;\n+ if (workInProgress.child) {\n+ return beginWork(\n+ workInProgress.child.alternate,\n+ workInProgress.child\n+ );\n+ }\n+ return null;\n case HostComponent:\n- updateHostComponent(current, workInProgress);\n- return workInProgress.child;\n+ return updateHostComponent(current, workInProgress);\n case CoroutineHandlerPhase:\n \/\/ This is a restart. Reset the tag to the initial phase.\n workInProgress.tag = CoroutineComponent;\n@@ -125,6 +227,7 @@ function beginWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n case YieldComponent:\n \/\/ A yield component is just a placeholder, we can just run through the\n \/\/ next one immediately.\n+ workInProgress.pendingWorkPriority = NoWork;\n if (workInProgress.sibling) {\n return beginWork(\n workInProgress.sibling.alternate,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex f4d72e3d10..d816510b40 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -18,23 +18,24 @@ import type { Fiber } from 'ReactFiber';\n import type { ReifiedYield } from 'ReactReifiedYield';\n \n var ReactChildFiber = require('ReactChildFiber');\n-var ReactTypesOfWork = require('ReactTypesOfWork');\n+var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n IndeterminateComponent,\n FunctionalComponent,\n ClassComponent,\n+ HostContainer,\n HostComponent,\n CoroutineComponent,\n CoroutineHandlerPhase,\n YieldComponent,\n-} = ReactTypesOfWork;\n+} = ReactTypeOfWork;\n \n-function transferOutput(child : ?Fiber, parent : Fiber) {\n+function transferOutput(child : ?Fiber, returnFiber : Fiber) {\n \/\/ If we have a single result, we just pass that through as the output to\n \/\/ avoid unnecessary traversal. When we have multiple output, we just pass\n \/\/ the linked list of fibers that has the individual output values.\n- parent.output = (child && !child.sibling) ? child.output : child;\n- parent.memoizedInput = parent.input;\n+ returnFiber.output = (child && !child.sibling) ? child.output : child;\n+ returnFiber.memoizedProps = returnFiber.pendingProps;\n }\n \n function recursivelyFillYields(yields, output : ?Fiber | ?ReifiedYield) {\n@@ -55,7 +56,7 @@ function recursivelyFillYields(yields, output : ?Fiber | ?ReifiedYield) {\n }\n \n function moveCoroutineToHandlerPhase(current : ?Fiber, workInProgress : Fiber) {\n- var coroutine = (workInProgress.input : ?ReactCoroutine);\n+ var coroutine = (workInProgress.pendingProps : ?ReactCoroutine);\n if (!coroutine) {\n throw new Error('Should be resolved by now');\n }\n@@ -82,10 +83,13 @@ function moveCoroutineToHandlerPhase(current : ?Fiber, workInProgress : Fiber) {\n var nextChildren = fn(props, yields);\n \n var currentFirstChild = current ? current.stateNode : null;\n+ \/\/ Inherit the priority of the returnFiber.\n+ const priority = workInProgress.pendingWorkPriority;\n workInProgress.stateNode = ReactChildFiber.reconcileChildFibers(\n workInProgress,\n currentFirstChild,\n- nextChildren\n+ nextChildren,\n+ priority\n );\n return workInProgress.stateNode;\n }\n@@ -95,25 +99,28 @@ exports.completeWork = function(current : ?Fiber, workInProgress : Fiber) : ?Fib\n case FunctionalComponent:\n console.log('\/functional component', workInProgress.type.name);\n transferOutput(workInProgress.child, workInProgress);\n- break;\n+ return null;\n case ClassComponent:\n console.log('\/class component', workInProgress.type.name);\n transferOutput(workInProgress.child, workInProgress);\n- break;\n+ return null;\n+ case HostContainer:\n+ return null;\n case HostComponent:\n+ transferOutput(workInProgress.child, workInProgress);\n console.log('\/host component', workInProgress.type);\n- break;\n+ return null;\n case CoroutineComponent:\n- console.log('\/coroutine component', workInProgress.input.handler.name);\n+ console.log('\/coroutine component', workInProgress.pendingProps.handler.name);\n return moveCoroutineToHandlerPhase(current, workInProgress);\n case CoroutineHandlerPhase:\n transferOutput(workInProgress.stateNode, workInProgress);\n \/\/ Reset the tag to now be a first phase coroutine.\n workInProgress.tag = CoroutineComponent;\n- break;\n+ return null;\n case YieldComponent:\n \/\/ Does nothing.\n- break;\n+ return null;\n \n \/\/ Error cases\n case IndeterminateComponent:\n@@ -121,5 +128,4 @@ exports.completeWork = function(current : ?Fiber, workInProgress : Fiber) : ?Fib\n default:\n throw new Error('Unknown unit of work tag');\n }\n- return null;\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\nnew file mode 100644\nindex 0000000000..15d1a10134\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\n@@ -0,0 +1,93 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactFiberPendingWork\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+import type { Fiber } from 'ReactFiber';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n+\n+var ReactFiber = require('ReactFiber');\n+\n+var {\n+ NoWork,\n+} = require('ReactPriorityLevel');\n+\n+function cloneSiblings(current : Fiber, workInProgress : Fiber, returnFiber : Fiber) {\n+ while (current.sibling) {\n+ current = current.sibling;\n+ workInProgress = workInProgress.sibling = ReactFiber.cloneFiber(\n+ current,\n+ current.pendingWorkPriority\n+ );\n+ workInProgress.return = returnFiber;\n+ }\n+ workInProgress.sibling = null;\n+}\n+\n+exports.findNextUnitOfWorkAtPriority = function(currentRoot : Fiber, priorityLevel : PriorityLevel) : ?Fiber {\n+ let current = currentRoot;\n+ while (current) {\n+ if (current.pendingWorkPriority !== NoWork &&\n+ current.pendingWorkPriority <= priorityLevel) {\n+ \/\/ This node has work to do that fits our priority level criteria.\n+ if (current.pendingProps !== null) {\n+ \/\/ We found some work to do. We need to return the \"work in progress\"\n+ \/\/ of this node which will be the alternate.\n+ const workInProgress = current.alternate;\n+ if (!workInProgress) {\n+ throw new Error('Should have wip now');\n+ }\n+ workInProgress.pendingProps = current.pendingProps;\n+ return workInProgress;\n+ }\n+ \/\/ If we have a child let's see if any of our children has work to do.\n+ \/\/ Only bother doing this at all if the current priority level matches\n+ \/\/ because it is the highest priority for the whole subtree.\n+ \/\/ TODO: Coroutines can have work in their stateNode which is another\n+ \/\/ type of child that needs to be searched for work.\n+ if (current.child) {\n+ \/\/ Ensure we have a work in progress copy to backtrack through.\n+ let currentChild = current.child;\n+ let workInProgress = current.alternate;\n+ if (!workInProgress) {\n+ throw new Error('Should have wip now');\n+ }\n+ workInProgress.pendingWorkPriority = current.pendingWorkPriority;\n+ workInProgress.child = ReactFiber.cloneFiber(currentChild, NoWork);\n+ workInProgress.child.return = workInProgress;\n+ cloneSiblings(currentChild, workInProgress.child, workInProgress);\n+ current = current.child;\n+ continue;\n+ }\n+ \/\/ If we match the priority but has no child and no work to do,\n+ \/\/ then we can safely reset the flag.\n+ current.pendingWorkPriority = NoWork;\n+ }\n+ if (current === currentRoot) {\n+ return null;\n+ }\n+ while (!current.sibling) {\n+ current = current.return;\n+ if (!current) {\n+ return null;\n+ }\n+ if (current.pendingWorkPriority <= priorityLevel) {\n+ \/\/ If this subtree had work left to do, we would have returned it by\n+ \/\/ now. This could happen if a child with pending work gets cleaned up\n+ \/\/ but we don't clear the flag then. It is safe to reset it now.\n+ current.pendingWorkPriority = NoWork;\n+ }\n+ }\n+ current = current.sibling;\n+ }\n+ return null;\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex e7f0e2a441..3fde615cf0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -13,9 +13,14 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n-var ReactFiber = require('ReactFiber');\n-var { beginWork } = require('ReactFiberBeginWork');\n-var { completeWork } = require('ReactFiberCompleteWork');\n+import type { FiberRoot } from 'ReactFiberRoot';\n+\n+var { createFiberRoot } = require('ReactFiberRoot');\n+var ReactFiberScheduler = require('ReactFiberScheduler');\n+\n+var {\n+ LowPriority,\n+} = require('ReactPriorityLevel');\n \n type ReactHostElement = {\n type: T,\n@@ -26,8 +31,6 @@ type Deadline = {\n timeRemaining : () => number\n };\n \n-var timeHeuristicForUnitOfWork = 1;\n-\n export type HostConfig = {\n \n createHostInstance(element : ReactHostElement) : I,\n@@ -36,112 +39,62 @@ export type HostConfig = {\n \n };\n \n-type OpaqueID = {};\n+type OpaqueNode = Fiber;\n \n export type Reconciler = {\n- mountNewRoot(element : ReactElement) : OpaqueID;\n+ mountContainer(element : ReactElement, containerInfo : ?Object) : OpaqueNode,\n+ updateContainer(element : ReactElement, container : OpaqueNode) : void,\n+ unmountContainer(container : OpaqueNode) : void,\n+\n+ \/\/ Used to extract the return value from the initial render. Legacy API.\n+ getPublicRootInstance(container : OpaqueNode) : ?Object,\n };\n \n module.exports = function(config : HostConfig) : Reconciler {\n \n- \/\/ const scheduleHighPriCallback = config.scheduleHighPriCallback;\n- const scheduleLowPriCallback = config.scheduleLowPriCallback;\n-\n- let nextUnitOfWork : ?Fiber = null;\n-\n- function completeUnitOfWork(workInProgress : Fiber) : ?Fiber {\n- while (true) {\n- \/\/ The current, flushed, state of this fiber is the alternate.\n- \/\/ Ideally nothing should rely on this, but relying on it here\n- \/\/ means that we don't need an additional field on the work in\n- \/\/ progress.\n- const current = workInProgress.alternate;\n- const next = completeWork(current, workInProgress);\n- if (next) {\n- \/\/ If completing this work spawned new work, do that next.\n- return next;\n- } else if (workInProgress.sibling) {\n- \/\/ If there is more work to do in this parent, do that next.\n- return workInProgress.sibling;\n- } else if (workInProgress.parent) {\n- \/\/ If there's no more work in this parent. Complete the parent.\n- \/\/ TODO: Stop using the parent for this purpose. I think this will break\n- \/\/ down in edge cases because when nodes are reused during bailouts, we\n- \/\/ don't know which of two parents was used. Instead we should maintain\n- \/\/ a temporary manual stack.\n- \/\/ $FlowFixMe: This downcast is not safe. It is intentionally an error.\n- workInProgress = workInProgress.parent;\n- } else {\n- \/\/ If we're at the root, there's no more work to do.\n- return null;\n- }\n- }\n- }\n-\n- function performUnitOfWork(workInProgress : Fiber) : ?Fiber {\n- \/\/ The current, flushed, state of this fiber is the alternate.\n- \/\/ Ideally nothing should rely on this, but relying on it here\n- \/\/ means that we don't need an additional field on the work in\n- \/\/ progress.\n- const current = workInProgress.alternate;\n- const next = beginWork(current, workInProgress);\n- if (next) {\n- \/\/ If this spawns new work, do that next.\n- return next;\n- } else {\n- \/\/ Otherwise, complete the current work.\n- return completeUnitOfWork(workInProgress);\n- }\n- }\n-\n- function performLowPriWork(deadline : Deadline) {\n- while (nextUnitOfWork) {\n- if (deadline.timeRemaining() > timeHeuristicForUnitOfWork) {\n- nextUnitOfWork = performUnitOfWork(nextUnitOfWork);\n- } else {\n- scheduleLowPriCallback(performLowPriWork);\n- break;\n- }\n- }\n- }\n-\n- function ensureLowPriIsScheduled() {\n- if (nextUnitOfWork) {\n- return;\n- }\n- scheduleLowPriCallback(performLowPriWork);\n- }\n-\n- \/*\n- function performHighPriWork() {\n- \/\/ There is no such thing as high pri work yet.\n- }\n-\n- function ensureHighPriIsScheduled() {\n- scheduleHighPriCallback(performHighPriWork);\n- }\n- *\/\n-\n- let rootFiber : ?Fiber = null;\n+ var { scheduleLowPriWork } = ReactFiberScheduler(config);\n \n return {\n \n- mountNewRoot(element : ReactElement) : OpaqueID {\n+ mountContainer(element : ReactElement, containerInfo : ?Object) : OpaqueNode {\n+ const root = createFiberRoot(containerInfo);\n+ const container = root.current;\n+ \/\/ TODO: Use pending work\/state instead of props.\n+ container.pendingProps = element;\n+ container.pendingWorkPriority = LowPriority;\n \n- ensureLowPriIsScheduled();\n+ scheduleLowPriWork(root);\n \n- \/\/ TODO: Unify this with ReactChildFiber. We can't now because the parent\n- \/\/ is passed. Should be doable though. Might require a wrapper don't know.\n- if (rootFiber && rootFiber.type === element.type && rootFiber.key === element.key) {\n- nextUnitOfWork = ReactFiber.cloneFiber(rootFiber);\n- nextUnitOfWork.input = element.props;\n- return {};\n- }\n+ \/\/ It may seem strange that we don't return the root here, but that will\n+ \/\/ allow us to have containers that are in the middle of the tree instead\n+ \/\/ of being roots.\n+ return container;\n+ },\n \n- nextUnitOfWork = rootFiber = ReactFiber.createFiberFromElement(element);\n+ updateContainer(element : ReactElement, container : OpaqueNode) : void {\n+ \/\/ TODO: If this is a nested container, this won't be the root.\n+ const root : FiberRoot = (container.stateNode : any);\n+ \/\/ TODO: Use pending work\/state instead of props.\n+ root.current.pendingProps = element;\n+ root.current.pendingWorkPriority = LowPriority;\n \n- return {};\n+ scheduleLowPriWork(root);\n+ },\n+\n+ unmountContainer(container : OpaqueNode) : void {\n+ \/\/ TODO: If this is a nested container, this won't be the root.\n+ const root : FiberRoot = (container.stateNode : any);\n+ \/\/ TODO: Use pending work\/state instead of props.\n+ root.current.pendingProps = [];\n+ root.current.pendingWorkPriority = LowPriority;\n+\n+ scheduleLowPriWork(root);\n+ },\n+\n+ getPublicRootInstance(container : OpaqueNode) : ?Object {\n+ return null;\n },\n \n };\n+\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\nnew file mode 100644\nindex 0000000000..ce186c3fce\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n@@ -0,0 +1,42 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactFiberRoot\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+import type { Fiber } from 'ReactFiber';\n+\n+const { createHostContainerFiber } = require('ReactFiber');\n+\n+export type FiberRoot = {\n+ \/\/ Any additional information from the host associated with this root.\n+ containerInfo: ?Object,\n+ \/\/ The currently active root fiber. This is the mutable root of the tree.\n+ current: Fiber,\n+ \/\/ Determines if this root has already been added to the schedule for work.\n+ isScheduled: bool,\n+ \/\/ The work schedule is a linked list.\n+ nextScheduledRoot: ?FiberRoot,\n+};\n+\n+exports.createFiberRoot = function(containerInfo : ?Object) : FiberRoot {\n+ \/\/ Cyclic construction. This cheats the type system right now because\n+ \/\/ stateNode is any.\n+ const uninitializedFiber = createHostContainerFiber();\n+ const root = {\n+ current: uninitializedFiber,\n+ containerInfo: containerInfo,\n+ isScheduled: false,\n+ nextScheduledRoot: null,\n+ };\n+ uninitializedFiber.stateNode = root;\n+ return root;\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nnew file mode 100644\nindex 0000000000..4b6da086bf\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -0,0 +1,211 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactFiberScheduler\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+import type { Fiber } from 'ReactFiber';\n+import type { FiberRoot } from 'ReactFiberRoot';\n+import type { HostConfig } from 'ReactFiberReconciler';\n+\n+var { cloneFiber } = require('ReactFiber');\n+var { beginWork } = require('ReactFiberBeginWork');\n+var { completeWork } = require('ReactFiberCompleteWork');\n+var { findNextUnitOfWorkAtPriority } = require('ReactFiberPendingWork');\n+\n+var {\n+ NoWork,\n+ HighPriority,\n+ LowPriority,\n+ OffscreenPriority,\n+} = require('ReactPriorityLevel');\n+\n+var timeHeuristicForUnitOfWork = 1;\n+\n+module.exports = function(config : HostConfig) {\n+\n+ \/\/ const scheduleHighPriCallback = config.scheduleHighPriCallback;\n+ const scheduleLowPriCallback = config.scheduleLowPriCallback;\n+\n+ \/\/ The next work in progress fiber that we're currently working on.\n+ let nextUnitOfWork : ?Fiber = null;\n+\n+ \/\/ Linked list of roots with scheduled work on them.\n+ let nextScheduledRoot : ?FiberRoot = null;\n+ let lastScheduledRoot : ?FiberRoot = null;\n+\n+ function findNextUnitOfWork() {\n+ \/\/ Clear out roots with no more work on them.\n+ while (nextScheduledRoot && nextScheduledRoot.current.pendingWorkPriority === NoWork) {\n+ nextScheduledRoot.isScheduled = false;\n+ if (nextScheduledRoot === lastScheduledRoot) {\n+ nextScheduledRoot = null;\n+ lastScheduledRoot = null;\n+ return null;\n+ }\n+ nextScheduledRoot = nextScheduledRoot.nextScheduledRoot;\n+ }\n+ let root = nextScheduledRoot;\n+ while (root) {\n+ cloneFiber(root.current, root.current.pendingWorkPriority);\n+ \/\/ Find the highest possible priority work to do.\n+ \/\/ This loop is unrolled just to satisfy Flow's enum constraint.\n+ \/\/ We could make arbitrary many idle priority levels but having\n+ \/\/ too many just means flushing changes too often.\n+ let work = findNextUnitOfWorkAtPriority(root.current, HighPriority);\n+ if (work) {\n+ return work;\n+ }\n+ work = findNextUnitOfWorkAtPriority(root.current, LowPriority);\n+ if (work) {\n+ return work;\n+ }\n+ work = findNextUnitOfWorkAtPriority(root.current, OffscreenPriority);\n+ if (work) {\n+ return work;\n+ }\n+ \/\/ We didn't find anything to do in this root, so let's try the next one.\n+ root = root.nextScheduledRoot;\n+ }\n+ return null;\n+ }\n+\n+ function completeUnitOfWork(workInProgress : Fiber) : ?Fiber {\n+ while (true) {\n+ \/\/ The current, flushed, state of this fiber is the alternate.\n+ \/\/ Ideally nothing should rely on this, but relying on it here\n+ \/\/ means that we don't need an additional field on the work in\n+ \/\/ progress.\n+ const current = workInProgress.alternate;\n+ const next = completeWork(current, workInProgress);\n+\n+ \/\/ The work is now done. We don't need this anymore. This flags\n+ \/\/ to the system not to redo any work here.\n+ workInProgress.pendingProps = null;\n+ if (workInProgress.pendingWorkPriority === NoWork) {\n+ workInProgress.hasWorkInProgress = false;\n+ }\n+\n+ const returnFiber = workInProgress.return;\n+\n+ \/\/ Ensure that remaining work priority bubbles up.\n+ if (returnFiber && workInProgress.pendingWorkPriority !== NoWork &&\n+ (returnFiber.pendingWorkPriority === NoWork ||\n+ returnFiber.pendingWorkPriority > workInProgress.pendingWorkPriority)) {\n+ returnFiber.pendingWorkPriority = workInProgress.pendingWorkPriority;\n+ }\n+\n+ if (next) {\n+ \/\/ If completing this work spawned new work, do that next.\n+ return next;\n+ } else if (workInProgress.sibling) {\n+ \/\/ If there is more work to do in this returnFiber, do that next.\n+ return workInProgress.sibling;\n+ } else if (returnFiber) {\n+ \/\/ If there's no more work in this returnFiber. Complete the returnFiber.\n+ workInProgress = returnFiber;\n+ } else {\n+ \/\/ If we're at the root, there's no more work to do. We can flush it.\n+ const root : FiberRoot = (workInProgress.stateNode : any);\n+ root.current = workInProgress;\n+ \/\/ TODO: We can be smarter here and only look for more work in the\n+ \/\/ \"next\" scheduled work since we've already scanned passed. That\n+ \/\/ also ensures that work scheduled during reconciliation gets deferred.\n+ \/\/ const hasMoreWork = workInProgress.pendingWorkPriority !== NoWork;\n+ console.log('----- COMPLETED with remaining work:', workInProgress.pendingWorkPriority);\n+ const nextWork = findNextUnitOfWork();\n+ \/\/ if (!nextWork && hasMoreWork) {\n+ \/\/ TODO: This can happen when some deep work completes and we don't\n+ \/\/ know if this was the last one. We should be able to keep track of\n+ \/\/ the highest priority still in the tree for one pass. But if we\n+ \/\/ terminate an update we don't know.\n+ \/\/ throw new Error('FiberRoots should not have flagged more work if there is none.');\n+ \/\/ }\n+ return nextWork;\n+ }\n+ }\n+ }\n+\n+ function performUnitOfWork(workInProgress : Fiber) : ?Fiber {\n+ \/\/ Ignore work if there is nothing to do.\n+ if (workInProgress.pendingProps === null) {\n+ return completeUnitOfWork(workInProgress);\n+ }\n+ \/\/ The current, flushed, state of this fiber is the alternate.\n+ \/\/ Ideally nothing should rely on this, but relying on it here\n+ \/\/ means that we don't need an additional field on the work in\n+ \/\/ progress.\n+ const current = workInProgress.alternate;\n+ const next = beginWork(current, workInProgress);\n+ if (next) {\n+ \/\/ If this spawns new work, do that next.\n+ return next;\n+ } else {\n+ \/\/ Otherwise, complete the current work.\n+ return completeUnitOfWork(workInProgress);\n+ }\n+ }\n+\n+ function performLowPriWork(deadline) {\n+ if (!nextUnitOfWork) {\n+ nextUnitOfWork = findNextUnitOfWork();\n+ }\n+ while (nextUnitOfWork) {\n+ if (deadline.timeRemaining() > timeHeuristicForUnitOfWork) {\n+ nextUnitOfWork = performUnitOfWork(nextUnitOfWork);\n+ if (!nextUnitOfWork) {\n+ \/\/ Find more work. We might have time to complete some more.\n+ nextUnitOfWork = findNextUnitOfWork();\n+ }\n+ } else {\n+ scheduleLowPriCallback(performLowPriWork);\n+ return;\n+ }\n+ }\n+ }\n+\n+ function scheduleLowPriWork(root : FiberRoot) {\n+ \/\/ We must reset the current unit of work pointer so that we restart the\n+ \/\/ search from the root during the next tick, in case there is now higher\n+ \/\/ priority work somewhere earlier than before.\n+ nextUnitOfWork = null;\n+\n+ if (root.isScheduled) {\n+ \/\/ If we're already scheduled, we can bail out.\n+ return;\n+ }\n+ root.isScheduled = true;\n+ if (lastScheduledRoot) {\n+ \/\/ Schedule ourselves to the end.\n+ lastScheduledRoot.nextScheduledRoot = root;\n+ lastScheduledRoot = root;\n+ } else {\n+ \/\/ We're the only work scheduled.\n+ nextScheduledRoot = root;\n+ lastScheduledRoot = root;\n+ scheduleLowPriCallback(performLowPriWork);\n+ }\n+ }\n+\n+ \/*\n+ function performHighPriWork() {\n+ \/\/ There is no such thing as high pri work yet.\n+ }\n+\n+ function ensureHighPriIsScheduled() {\n+ scheduleHighPriCallback(performHighPriWork);\n+ }\n+ *\/\n+\n+ return {\n+ scheduleLowPriWork: scheduleLowPriWork,\n+ };\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactPriorityLevel.js b\/src\/renderers\/shared\/fiber\/ReactPriorityLevel.js\nnew file mode 100644\nindex 0000000000..b6930c2900\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactPriorityLevel.js\n@@ -0,0 +1,24 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactPriorityLevel\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;\n+\n+module.exports = {\n+ NoWork: 0, \/\/ No work is pending.\n+ SynchronousPriority: 1, \/\/ For controlled text inputs. Synchronous side-effects.\n+ AnimationPriority: 2, \/\/ Needs to complete before the next frame.\n+ HighPriority: 3, \/\/ Interaction that needs to complete pretty soon to feel responsive.\n+ LowPriority: 4, \/\/ Data fetching, or result from updating stores.\n+ OffscreenPriority: 5, \/\/ Won't be visible but do the work in case it becomes visible.\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactTypesOfWork.js b\/src\/renderers\/shared\/fiber\/ReactTypeOfWork.js\nsimilarity index 62%\nrename from src\/renderers\/shared\/fiber\/ReactTypesOfWork.js\nrename to src\/renderers\/shared\/fiber\/ReactTypeOfWork.js\nindex d54dc16807..b63813b1d5 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactTypesOfWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactTypeOfWork.js\n@@ -6,20 +6,21 @@\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n- * @providesModule ReactTypesOfWork\n+ * @providesModule ReactTypeOfWork\n * @flow\n *\/\n \n 'use strict';\n \n-var TypesOfWork = {\n+export type TypeOfWork = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;\n+\n+module.exports = {\n IndeterminateComponent: 0, \/\/ Before we know whether it is functional or class\n FunctionalComponent: 1,\n ClassComponent: 2,\n- HostComponent: 3,\n- CoroutineComponent: 4,\n- CoroutineHandlerPhase: 5,\n- YieldComponent: 6,\n+ HostContainer: 3, \/\/ Root of a host tree. Could be nested inside another node.\n+ HostComponent: 4,\n+ CoroutineComponent: 5,\n+ CoroutineHandlerPhase: 6,\n+ YieldComponent: 7,\n };\n-\n-module.exports = TypesOfWork;\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\nindex 5d1af26bcf..1fd0ac9fe9 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n@@ -109,10 +109,332 @@ describe('ReactIncremental', function() {\n ReactNoop.render();\n ReactNoop.flush();\n \n+ \/\/ TODO: Test bail out of host components. This is currently unobservable.\n+\n \/\/ Since this is an update, it should bail out and reuse the work from\n \/\/ Header and Content.\n expect(ops).toEqual(['Foo', 'Content']);\n \n });\n \n+ it('can cancel partially rendered work and restart', function() {\n+\n+ var ops = [];\n+\n+ function Bar(props) {\n+ ops.push('Bar');\n+ return

{props.children}<\/div>;\n+ }\n+\n+ function Foo(props) {\n+ ops.push('Foo');\n+ return (\n+

\n+ {props.text}<\/Bar>\n+ {props.text}<\/Bar>\n+ <\/div>\n+ );\n+ }\n+\n+ \/\/ Init\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ ops = [];\n+\n+ ReactNoop.render();\n+ \/\/ Flush part of the work\n+ ReactNoop.flushLowPri(20);\n+\n+ expect(ops).toEqual(['Foo', 'Bar']);\n+\n+ ops = [];\n+\n+ \/\/ This will abort the previous work and restart\n+ ReactNoop.render();\n+\n+ \/\/ Flush part of the new work\n+ ReactNoop.flushLowPri(20);\n+\n+ expect(ops).toEqual(['Foo', 'Bar']);\n+\n+ \/\/ Flush the rest of the work which now includes the low priority\n+ ReactNoop.flush(20);\n+\n+ expect(ops).toEqual(['Foo', 'Bar', 'Bar']);\n+\n+ });\n+\n+ it('can deprioritize unfinished work and resume it later', function() {\n+\n+ var ops = [];\n+\n+ function Bar(props) {\n+ ops.push('Bar');\n+ return

{props.children}<\/div>;\n+ }\n+\n+ function Middle(props) {\n+ ops.push('Middle');\n+ return {props.children}<\/span>;\n+ }\n+\n+ function Foo(props) {\n+ ops.push('Foo');\n+ return (\n+

\n+ {props.text}<\/Bar>\n+

\n+ {props.text}<\/Middle>\n+ <\/section>\n+ {props.text}<\/Bar>\n+

dillon1000/react

Files changed