Fiber Example<\/title>\n+ <link rel=\"stylesheet\" href=\"..\/shared\/css\/base.css\" \/>\n+ <\/head>\n+ <body>\n+ <h1>Fiber Example<\/h1>\n+ <div id=\"container\">\n+ <p>\n+ To install React, follow the instructions on\n+ <a href=\"https:\/\/github.com\/facebook\/react\/\">GitHub<\/a>.\n+ <\/p>\n+ <p>\n+ If you can see this, React is <strong>not<\/strong> working right.\n+ If you checked out the source from GitHub make sure to run <code>grunt<\/code>.\n+ <\/p>\n+ <\/div>\n+ <script src=\"..\/..\/build\/react.js\"><\/script>\n+ <script src=\"..\/..\/build\/react-dom.js\"><\/script>\n+ <script>\n+ function ExampleApplication(props) {\n+ var elapsed = Math.round(props.elapsed \/ 100);\n+ var seconds = elapsed \/ 10 + (elapsed % 10 ? '' : '.0' );\n+ var message =\n+ 'React has been successfully running for ' + seconds + ' seconds.';\n+\n+ return React.DOM.p(null, message);\n+ }\n+\n+ \/\/ Call React.createFactory instead of directly call ExampleApplication({...}) in React.render\n+ var ExampleApplicationFactory = React.createFactory(ExampleApplication);\n+\n+ var start = new Date().getTime();\n+ setInterval(function() {\n+ ReactDOM.render(\n+ ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n+ document.getElementById('container')\n+ );\n+ }, 50);\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/package.json b\/package.json\nindex afa8ed8947..67ac99e5f8 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -43,7 +43,7 @@\n \"eslint-plugin-react-internal\": \"file:eslint-rules\",\n \"fbjs\": \"^0.8.1\",\n \"fbjs-scripts\": \"^0.6.0\",\n- \"flow-bin\": \"^0.26.0\",\n+ \"flow-bin\": \"^0.27.0\",\n \"glob\": \"^6.0.1\",\n \"grunt\": \"^0.4.5\",\n \"grunt-cli\": \"^0.1.13\",\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nnew file mode 100644\nindex 0000000000..74369ac3ea\n--- \/dev\/null\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -0,0 +1,92 @@\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 ReactDOMFiber\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+import type { HostChildren } from 'ReactFiberReconciler';\n+\n+var ReactFiberReconciler = require('ReactFiberReconciler');\n+\n+type DOMContainerElement = Element & { _reactRootContainer: Object };\n+\n+type Container = Element;\n+type Props = { };\n+type Instance = Element;\n+\n+function recursivelyAppendChildren(parent : Element, child : HostChildren<Instance>) {\n+ if (!child) {\n+ return;\n+ }\n+ \/* $FlowFixMe: Element should have this property. *\/\n+ if (child.nodeType === 1) {\n+ \/* $FlowFixMe: Refinement issue. I don't know how to express different. *\/\n+ parent.appendChild(child);\n+ } else {\n+ \/* As a result of the refinement issue this type isn't known. *\/\n+ let node : any = child;\n+ do {\n+ recursivelyAppendChildren(parent, node.output);\n+ } while (node = node.sibling);\n+ }\n+}\n+\n+var DOMRenderer = ReactFiberReconciler({\n+\n+ updateContainer(container : Container, children : HostChildren<Instance>) : void {\n+ container.innerHTML = '';\n+ recursivelyAppendChildren(container, children);\n+ },\n+\n+ createInstance(type : string, props : Props, children : HostChildren<Instance>) : Instance {\n+ const domElement = document.createElement(type);\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof props.children === 'string') {\n+ domElement.textContent = props.children;\n+ }\n+ return domElement;\n+ },\n+\n+ prepareUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : boolean {\n+ return true;\n+ },\n+\n+ commitUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : void {\n+ domElement.innerHTML = '';\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof newProps.children === 'string') {\n+ domElement.textContent = newProps.children;\n+ }\n+ },\n+\n+ deleteInstance(instance : Instance) : void {\n+ \/\/ Noop\n+ },\n+\n+ scheduleHighPriCallback: window.requestAnimationFrame,\n+\n+ scheduleLowPriCallback: window.requestIdleCallback,\n+\n+});\n+\n+var ReactDOM = {\n+\n+ render(element : ReactElement<any>, container : DOMContainerElement) {\n+ if (!container._reactRootContainer) {\n+ container._reactRootContainer = DOMRenderer.mountContainer(element, container);\n+ } else {\n+ DOMRenderer.updateContainer(element, container._reactRootContainer);\n+ }\n+ },\n+\n+};\n+\n+module.exports = ReactDOM;\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 9214a1865b..5682dc9f8a 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -20,33 +20,97 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n+import type { HostChildren } from 'ReactFiberReconciler';\n \n var ReactFiberReconciler = require('ReactFiberReconciler');\n \n var scheduledHighPriCallback = null;\n var scheduledLowPriCallback = null;\n \n+const TERMINAL_TAG = 99;\n+\n+type Container = { rootID: number, children: Array<Instance> };\n+type Props = { };\n+type Instance = { tag: 99, type: string, id: number, children: Array<Instance> };\n+\n+var instanceCounter = 0;\n+\n+function recursivelyAppendChildren(flatArray : Array<Instance>, child : HostChildren<Instance>) {\n+ if (!child) {\n+ return;\n+ }\n+ if (child.tag === TERMINAL_TAG) {\n+ flatArray.push(child);\n+ } else {\n+ let node = child;\n+ do {\n+ recursivelyAppendChildren(flatArray, node.output);\n+ } while (node = node.sibling);\n+ }\n+}\n+\n+function flattenChildren(children : HostChildren<Instance>) {\n+ const flatArray = [];\n+ recursivelyAppendChildren(flatArray, children);\n+ return flatArray;\n+}\n+\n var NoopRenderer = ReactFiberReconciler({\n \n- createHostInstance() {\n+ updateContainer(containerInfo : Container, children : HostChildren<Instance>) : void {\n+ console.log('Update container #' + containerInfo.rootID);\n+ containerInfo.children = flattenChildren(children);\n+ },\n \n+ createInstance(type : string, props : Props, children : HostChildren<Instance>) : Instance {\n+ console.log('Create instance #' + instanceCounter);\n+ const inst = {\n+ tag: TERMINAL_TAG,\n+ id: instanceCounter++,\n+ type: type,\n+ children: flattenChildren(children),\n+ };\n+ \/\/ Hide from unit tests\n+ Object.defineProperty(inst, 'tag', { value: inst.tag, enumerable: false });\n+ Object.defineProperty(inst, 'id', { value: inst.id, enumerable: false });\n+ return inst;\n },\n+\n+ prepareUpdate(instance : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : boolean {\n+ console.log('Prepare for update on #' + instance.id);\n+ return true;\n+ },\n+\n+ commitUpdate(instance : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : void {\n+ console.log('Commit update on #' + instance.id);\n+ instance.children = flattenChildren(children);\n+ },\n+\n+ deleteInstance(instance : Instance) : void {\n+ console.log('Delete #' + instance.id);\n+ },\n+\n scheduleHighPriCallback(callback) {\n scheduledHighPriCallback = callback;\n },\n+\n scheduleLowPriCallback(callback) {\n scheduledLowPriCallback = callback;\n },\n \n });\n \n+var rootContainer = { rootID: 0, children: [] };\n+\n var root = null;\n \n var ReactNoop = {\n \n+ root: rootContainer,\n+\n render(element : ReactElement<any>) {\n if (!root) {\n- root = NoopRenderer.mountContainer(element, null);\n+ root = NoopRenderer.mountContainer(element, rootContainer);\n } else {\n NoopRenderer.updateContainer(element, root);\n }\n@@ -91,6 +155,19 @@ var ReactNoop = {\n console.log('Nothing rendered yet.');\n return;\n }\n+\n+ function logHostInstances(children: Array<Instance>, depth) {\n+ for (var i = 0; i < children.length; i++) {\n+ var child = children[i];\n+ console.log(' '.repeat(depth) + '- ' + child.type + '#' + child.id);\n+ logHostInstances(child.children, depth + 1);\n+ }\n+ }\n+ function logContainer(container : Container, depth) {\n+ console.log(' '.repeat(depth) + '- [root#' + container.rootID + ']');\n+ logHostInstances(container.children, depth + 1);\n+ }\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@@ -100,6 +177,10 @@ var ReactNoop = {\n logFiber(fiber.sibling, depth);\n }\n }\n+\n+ console.log('HOST INSTANCES:');\n+ logContainer(rootContainer, 0);\n+ console.log('FIBERS:');\n logFiber((root.stateNode : any).current, 0);\n },\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 48363ac2a0..39683f001e 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -48,7 +48,7 @@ type Instance = {\n type: any,\n \n \/\/ The local state associated with this fiber.\n- stateNode: ?Object,\n+ stateNode: any,\n \n \/\/ Conceptual aliases\n \/\/ parent : Instance -> return The parent happens to be the same as the\n@@ -82,6 +82,16 @@ export type Fiber = Instance & {\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+ \/\/ Singly linked list fast path to the next fiber with side-effects.\n+ nextEffect: ?Fiber,\n+\n+ \/\/ The first and last fiber with side-effect within this subtree. This allows\n+ \/\/ us to reuse a slice of the linked list when we reuse the work done within\n+ \/\/ this fiber.\n+ firstEffect: ?Fiber,\n+ lastEffect: ?Fiber,\n+\n+\n \/\/ This will be used to quickly determine if a subtree has no pending changes.\n pendingWorkPriority: PriorityLevel,\n \n@@ -129,6 +139,10 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n memoizedProps: null,\n output: null,\n \n+ nextEffect: null,\n+ firstEffect: null,\n+ lastEffect: null,\n+\n pendingWorkPriority: NoWork,\n \n hasWorkInProgress: false,\n@@ -157,6 +171,13 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n alt.ref = alt.ref;\n alt.pendingProps = fiber.pendingProps;\n alt.pendingWorkPriority = priorityLevel;\n+\n+ \/\/ Whenever we clone, we do so to get a new work in progress.\n+ \/\/ This ensures that we've reset these in the new tree.\n+ alt.nextEffect = null;\n+ alt.firstEffect = null;\n+ alt.lastEffect = null;\n+\n return alt;\n }\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex ec1d78af03..4fcf4d87b0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -14,6 +14,7 @@\n \n import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n+import type { HostConfig } from 'ReactFiberReconciler';\n \n var ReactChildFiber = require('ReactChildFiber');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n@@ -33,211 +34,217 @@ var {\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- priority\n- );\n-}\n-\n-function updateFunctionalComponent(current, workInProgress) {\n- var fn = workInProgress.type;\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.pendingProps.children === 'string' ? workInProgress.pendingProps.children : '');\n-\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+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\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 priority\n );\n+ }\n+\n+ function updateFunctionalComponent(current, workInProgress) {\n+ var fn = workInProgress.type;\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- return workInProgress.child;\n }\n-}\n-\n-function mountIndeterminateComponent(current, workInProgress) {\n- var fn = workInProgress.type;\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+ function updateHostComponent(current, workInProgress) {\n+ console.log('host component', workInProgress.type, typeof workInProgress.pendingProps.children === 'string' ? workInProgress.pendingProps.children : '');\n+\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- reconcileChildren(current, workInProgress, value);\n- workInProgress.pendingWorkPriority = NoWork;\n-}\n-\n-function updateCoroutineComponent(current, workInProgress) {\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- \/\/ 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- if (current && workInProgress.pendingProps === current.memoizedProps) {\n- \/\/ The most likely scenario is that the previous copy of the tree contains\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- const priorityLevel = workInProgress.pendingWorkPriority;\n- workInProgress.pendingProps = null;\n- workInProgress.pendingWorkPriority = NoWork;\n- workInProgress.stateNode = current.stateNode;\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+ function mountIndeterminateComponent(current, workInProgress) {\n+ var fn = workInProgress.type;\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- workInProgress.child = null;\n- return null;\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- 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+ function updateCoroutineComponent(current, workInProgress) {\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- workInProgress.hasWorkInProgress = true;\n-\n- switch (workInProgress.tag) {\n- case IndeterminateComponent:\n- mountIndeterminateComponent(current, workInProgress);\n- return workInProgress.child;\n- case FunctionalComponent:\n- updateFunctionalComponent(current, workInProgress);\n- return workInProgress.child;\n- case ClassComponent:\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- return updateHostComponent(current, workInProgress);\n- case CoroutineHandlerPhase:\n- \/\/ This is a restart. Reset the tag to the initial phase.\n- workInProgress.tag = CoroutineComponent;\n- \/\/ Intentionally fall through since this is now the same.\n- case CoroutineComponent:\n- updateCoroutineComponent(current, workInProgress);\n- \/\/ This doesn't take arbitrary time so we could synchronously just begin\n- \/\/ eagerly do the work of workInProgress.child as an optimization.\n- if (workInProgress.child) {\n- return beginWork(\n- workInProgress.child.alternate,\n- workInProgress.child\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- return workInProgress.child;\n- case YieldComponent:\n- \/\/ A yield component is just a placeholder, we can just run through the\n- \/\/ next one immediately.\n+ } while (child = child.sibling);\n+ }\n+\n+ function beginWork(current : ?Fiber, 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+ if (current && workInProgress.pendingProps === current.memoizedProps) {\n+ \/\/ The most likely scenario is that the previous copy of the tree contains\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+ const priorityLevel = workInProgress.pendingWorkPriority;\n+ workInProgress.pendingProps = null;\n workInProgress.pendingWorkPriority = NoWork;\n- if (workInProgress.sibling) {\n- return beginWork(\n- workInProgress.sibling.alternate,\n- workInProgress.sibling\n- );\n+ workInProgress.stateNode = current.stateNode;\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+\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- default:\n- throw new Error('Unknown unit of work tag');\n+ }\n+\n+ workInProgress.hasWorkInProgress = true;\n+\n+ switch (workInProgress.tag) {\n+ case IndeterminateComponent:\n+ mountIndeterminateComponent(current, workInProgress);\n+ return workInProgress.child;\n+ case FunctionalComponent:\n+ updateFunctionalComponent(current, workInProgress);\n+ return workInProgress.child;\n+ case ClassComponent:\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+ return updateHostComponent(current, workInProgress);\n+ case CoroutineHandlerPhase:\n+ \/\/ This is a restart. Reset the tag to the initial phase.\n+ workInProgress.tag = CoroutineComponent;\n+ \/\/ Intentionally fall through since this is now the same.\n+ case CoroutineComponent:\n+ updateCoroutineComponent(current, workInProgress);\n+ \/\/ This doesn't take arbitrary time so we could synchronously just begin\n+ \/\/ eagerly do the work of workInProgress.child as an optimization.\n+ if (workInProgress.child) {\n+ return beginWork(\n+ workInProgress.child.alternate,\n+ workInProgress.child\n+ );\n+ }\n+ return workInProgress.child;\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,\n+ workInProgress.sibling\n+ );\n+ }\n+ return null;\n+ default:\n+ throw new Error('Unknown unit of work tag');\n+ }\n }\n-}\n \n-exports.beginWork = beginWork;\n+ return {\n+ beginWork,\n+ };\n+\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nnew file mode 100644\nindex 0000000000..7792be2102\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -0,0 +1,68 @@\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 ReactFiberCommitWork\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 ReactTypeOfWork = require('ReactTypeOfWork');\n+var {\n+ ClassComponent,\n+ HostContainer,\n+ HostComponent,\n+} = ReactTypeOfWork;\n+\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\n+\n+ const updateContainer = config.updateContainer;\n+ const commitUpdate = config.commitUpdate;\n+\n+ function commitWork(finishedWork : Fiber) : void {\n+ switch (finishedWork.tag) {\n+ case ClassComponent: {\n+ \/\/ TODO: Fire componentDidMount\/componentDidUpdate, update refs\n+ return;\n+ }\n+ case HostContainer: {\n+ \/\/ TODO: Attach children to root container.\n+ const children = finishedWork.output;\n+ const root : FiberRoot = finishedWork.stateNode;\n+ const containerInfo : C = root.containerInfo;\n+ updateContainer(containerInfo, children);\n+ return;\n+ }\n+ case HostComponent: {\n+ if (finishedWork.stateNode == null || !finishedWork.alternate) {\n+ throw new Error('This should only be done during updates.');\n+ }\n+ \/\/ Commit the work prepared earlier.\n+ const child = (finishedWork.child : ?Fiber);\n+ const children = (child && !child.sibling) ? (child.output : ?Fiber | I) : child;\n+ const newProps = finishedWork.memoizedProps;\n+ const current = finishedWork.alternate;\n+ const oldProps = current.memoizedProps;\n+ const instance : I = finishedWork.stateNode;\n+ commitUpdate(instance, oldProps, newProps, children);\n+ return;\n+ }\n+ default:\n+ throw new Error('This unit of work tag should not have side-effects.');\n+ }\n+ }\n+\n+ return {\n+ commitWork,\n+ };\n+\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex d816510b40..9900a5b9fb 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -14,7 +14,7 @@\n \n import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n-\n+import type { HostConfig } from 'ReactFiberReconciler';\n import type { ReifiedYield } from 'ReactReifiedYield';\n \n var ReactChildFiber = require('ReactChildFiber');\n@@ -30,102 +30,162 @@ var {\n YieldComponent,\n } = ReactTypeOfWork;\n \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- returnFiber.output = (child && !child.sibling) ? child.output : child;\n- returnFiber.memoizedProps = returnFiber.pendingProps;\n-}\n-\n-function recursivelyFillYields(yields, output : ?Fiber | ?ReifiedYield) {\n- if (!output) {\n- \/\/ Ignore nulls etc.\n- } else if (output.tag !== undefined) { \/\/ TODO: Fix this fragile duck test.\n- \/\/ Detect if this is a fiber, if so it is a fragment result.\n- \/\/ $FlowFixMe: Refinement issue.\n- var item = (output : Fiber);\n- do {\n- recursivelyFillYields(yields, item.output);\n- item = item.sibling;\n- } while (item);\n- } else {\n- \/\/ $FlowFixMe: Refinement issue. If it is not a Fiber or null, it is a yield\n- yields.push(output);\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\n+\n+ const createInstance = config.createInstance;\n+ const prepareUpdate = config.prepareUpdate;\n+\n+ function markForPreEffect(workInProgress : Fiber) {\n+ \/\/ Schedule a side-effect on this fiber, BEFORE the children's side-effects.\n+ if (workInProgress.firstEffect) {\n+ workInProgress.nextEffect = workInProgress.firstEffect;\n+ workInProgress.firstEffect = workInProgress;\n+ } else {\n+ workInProgress.firstEffect = workInProgress;\n+ workInProgress.lastEffect = workInProgress;\n+ }\n+ }\n+\n+ \/*\n+ function markForPostEffect(workInProgress : Fiber) {\n+ \/\/ Schedule a side-effect on this fiber, AFTER the children's side-effects.\n+ if (workInProgress.lastEffect) {\n+ workInProgress.lastEffect.nextEffect = workInProgress;\n+ } else {\n+ workInProgress.firstEffect = workInProgress;\n+ }\n+ workInProgress.lastEffect = workInProgress;\n+ }\n+ *\/\n+\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+ returnFiber.output = (child && !child.sibling) ? child.output : child;\n+ returnFiber.memoizedProps = returnFiber.pendingProps;\n }\n-}\n \n-function moveCoroutineToHandlerPhase(current : ?Fiber, workInProgress : Fiber) {\n- var coroutine = (workInProgress.pendingProps : ?ReactCoroutine);\n- if (!coroutine) {\n- throw new Error('Should be resolved by now');\n+ function recursivelyFillYields(yields, output : ?Fiber | ?ReifiedYield) {\n+ if (!output) {\n+ \/\/ Ignore nulls etc.\n+ } else if (output.tag !== undefined) { \/\/ TODO: Fix this fragile duck test.\n+ \/\/ Detect if this is a fiber, if so it is a fragment result.\n+ \/\/ $FlowFixMe: Refinement issue.\n+ var item = (output : Fiber);\n+ do {\n+ recursivelyFillYields(yields, item.output);\n+ item = item.sibling;\n+ } while (item);\n+ } else {\n+ \/\/ $FlowFixMe: Refinement issue. If it is not a Fiber or null, it is a yield\n+ yields.push(output);\n+ }\n }\n \n- \/\/ First step of the coroutine has completed. Now we need to do the second.\n- \/\/ TODO: It would be nice to have a multi stage coroutine represented by a\n- \/\/ single component, or at least tail call optimize nested ones. Currently\n- \/\/ that requires additional fields that we don't want to add to the fiber.\n- \/\/ So this requires nested handlers.\n- \/\/ Note: This doesn't mutate the alternate node. I don't think it needs to\n- \/\/ since this stage is reset for every pass.\n- workInProgress.tag = CoroutineHandlerPhase;\n-\n- \/\/ Build up the yields.\n- \/\/ TODO: Compare this to a generator or opaque helpers like Children.\n- var yields : Array<ReifiedYield> = [];\n- var child = workInProgress.child;\n- while (child) {\n- recursivelyFillYields(yields, child.output);\n- child = child.sibling;\n+ function moveCoroutineToHandlerPhase(current : ?Fiber, workInProgress : Fiber) {\n+ var coroutine = (workInProgress.pendingProps : ?ReactCoroutine);\n+ if (!coroutine) {\n+ throw new Error('Should be resolved by now');\n+ }\n+\n+ \/\/ First step of the coroutine has completed. Now we need to do the second.\n+ \/\/ TODO: It would be nice to have a multi stage coroutine represented by a\n+ \/\/ single component, or at least tail call optimize nested ones. Currently\n+ \/\/ that requires additional fields that we don't want to add to the fiber.\n+ \/\/ So this requires nested handlers.\n+ \/\/ Note: This doesn't mutate the alternate node. I don't think it needs to\n+ \/\/ since this stage is reset for every pass.\n+ workInProgress.tag = CoroutineHandlerPhase;\n+\n+ \/\/ Build up the yields.\n+ \/\/ TODO: Compare this to a generator or opaque helpers like Children.\n+ var yields : Array<ReifiedYield> = [];\n+ var child = workInProgress.child;\n+ while (child) {\n+ recursivelyFillYields(yields, child.output);\n+ child = child.sibling;\n+ }\n+ var fn = coroutine.handler;\n+ var props = coroutine.props;\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+ priority\n+ );\n+ return workInProgress.stateNode;\n }\n- var fn = coroutine.handler;\n- var props = coroutine.props;\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- priority\n- );\n- return workInProgress.stateNode;\n-}\n-\n-exports.completeWork = function(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n- switch (workInProgress.tag) {\n- case FunctionalComponent:\n- console.log('\/functional component', workInProgress.type.name);\n- transferOutput(workInProgress.child, workInProgress);\n- return null;\n- case ClassComponent:\n- console.log('\/class component', workInProgress.type.name);\n- transferOutput(workInProgress.child, workInProgress);\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- return null;\n- case CoroutineComponent:\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- return null;\n- case YieldComponent:\n- \/\/ Does nothing.\n- return null;\n-\n- \/\/ Error cases\n- case IndeterminateComponent:\n- throw new Error('An indeterminate component should have become determinate before completing.');\n- default:\n- throw new Error('Unknown unit of work tag');\n+\n+ function completeWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n+ switch (workInProgress.tag) {\n+ case FunctionalComponent:\n+ console.log('\/functional component', workInProgress.type.name);\n+ transferOutput(workInProgress.child, workInProgress);\n+ return null;\n+ case ClassComponent:\n+ console.log('\/class component', workInProgress.type.name);\n+ transferOutput(workInProgress.child, workInProgress);\n+ return null;\n+ case HostContainer:\n+ transferOutput(workInProgress.child, workInProgress);\n+ \/\/ We don't know if a container has updated any children so we always\n+ \/\/ need to update it right now. We schedule this side-effect before\n+ \/\/ all the other side-effects in the subtree. We need to schedule it\n+ \/\/ before so that the entire tree is up-to-date before the life-cycles\n+ \/\/ are invoked.\n+ markForPreEffect(workInProgress);\n+ return null;\n+ case HostComponent:\n+ console.log('\/host component', workInProgress.type);\n+ const child = workInProgress.child;\n+ const children = (child && !child.sibling) ? (child.output : ?Fiber | I) : child;\n+ const newProps = workInProgress.pendingProps;\n+ workInProgress.memoizedProps = newProps;\n+ if (current && workInProgress.stateNode != null) {\n+ \/\/ If we have an alternate, that means this is an update and we need to\n+ \/\/ schedule a side-effect to do the updates.\n+ const oldProps = current.memoizedProps;\n+ const instance : I = workInProgress.stateNode;\n+ if (prepareUpdate(instance, oldProps, newProps, children)) {\n+ \/\/ This returns true if there was something to update.\n+ markForPreEffect(workInProgress);\n+ }\n+ workInProgress.output = instance;\n+ } else {\n+ const instance = createInstance(workInProgress.type, newProps, children);\n+ \/\/ TODO: This seems like unnecessary duplication.\n+ workInProgress.stateNode = instance;\n+ workInProgress.output = instance;\n+ }\n+ return null;\n+ case CoroutineComponent:\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+ return null;\n+ case YieldComponent:\n+ \/\/ Does nothing.\n+ return null;\n+\n+ \/\/ Error cases\n+ case IndeterminateComponent:\n+ throw new Error('An indeterminate component should have become determinate before completing.');\n+ default:\n+ throw new Error('Unknown unit of work tag');\n+ }\n }\n+\n+ return {\n+ completeWork,\n+ };\n+\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex 3fde615cf0..cb22e88421 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -14,6 +14,7 @@\n \n import type { Fiber } from 'ReactFiber';\n import type { FiberRoot } from 'ReactFiberRoot';\n+import type { TypeOfWork } from 'ReactTypeOfWork';\n \n var { createFiberRoot } = require('ReactFiberRoot');\n var ReactFiberScheduler = require('ReactFiberScheduler');\n@@ -22,18 +23,27 @@ var {\n LowPriority,\n } = require('ReactPriorityLevel');\n \n-type ReactHostElement<T, P> = {\n- type: T,\n- props: P\n-};\n-\n type Deadline = {\n timeRemaining : () => number\n };\n \n-export type HostConfig<T, P, I> = {\n+type HostChildNode<I> = { tag: TypeOfWork, output: HostChildren<I>, sibling: any };\n+\n+export type HostChildren<I> = null | void | I | HostChildNode<I>;\n+\n+export type HostConfig<T, P, I, C> = {\n+\n+ \/\/ TODO: We don't currently have a quick way to detect that children didn't\n+ \/\/ reorder so we host will always need to check the set. We should make a flag\n+ \/\/ or something so that it can bailout easily.\n+\n+ updateContainer(containerInfo : C, children : HostChildren<I>) : void;\n+\n+ createInstance(type : T, props : P, children : HostChildren<I>) : I,\n+ prepareUpdate(instance : I, oldProps : P, newProps : P, children : HostChildren<I>) : bool,\n+ commitUpdate(instance : I, oldProps : P, newProps : P, children : HostChildren<I>) : void,\n+ deleteInstance(instance : I) : void,\n \n- createHostInstance(element : ReactHostElement<T, P>) : I,\n scheduleHighPriCallback(callback : () => void) : void,\n scheduleLowPriCallback(callback : (deadline : Deadline) => void) : void\n \n@@ -41,22 +51,22 @@ export type HostConfig<T, P, I> = {\n \n type OpaqueNode = Fiber;\n \n-export type Reconciler = {\n- mountContainer(element : ReactElement<any>, containerInfo : ?Object) : OpaqueNode,\n+export type Reconciler<C> = {\n+ mountContainer(element : ReactElement<any>, containerInfo : C) : OpaqueNode,\n updateContainer(element : ReactElement<any>, 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+ getPublicRootInstance(container : OpaqueNode) : (C | null),\n };\n \n-module.exports = function<T, P, I>(config : HostConfig<T, P, I>) : Reconciler {\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconciler<C> {\n \n var { scheduleLowPriWork } = ReactFiberScheduler(config);\n \n return {\n \n- mountContainer(element : ReactElement<any>, containerInfo : ?Object) : OpaqueNode {\n+ mountContainer(element : ReactElement<any>, containerInfo : C) : OpaqueNode {\n const root = createFiberRoot(containerInfo);\n const container = root.current;\n \/\/ TODO: Use pending work\/state instead of props.\n@@ -91,7 +101,7 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) : Reconciler {\n scheduleLowPriWork(root);\n },\n \n- getPublicRootInstance(container : OpaqueNode) : ?Object {\n+ getPublicRootInstance(container : OpaqueNode) : (C | null) {\n return null;\n },\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\nindex ce186c3fce..c0b312253c 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n@@ -18,7 +18,7 @@ const { createHostContainerFiber } = require('ReactFiber');\n \n export type FiberRoot = {\n \/\/ Any additional information from the host associated with this root.\n- containerInfo: ?Object,\n+ containerInfo: any,\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@@ -27,7 +27,7 @@ export type FiberRoot = {\n nextScheduledRoot: ?FiberRoot,\n };\n \n-exports.createFiberRoot = function(containerInfo : ?Object) : FiberRoot {\n+exports.createFiberRoot = function(containerInfo : any) : FiberRoot {\n \/\/ Cyclic construction. This cheats the type system right now because\n \/\/ stateNode is any.\n const uninitializedFiber = createHostContainerFiber();\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 4b6da086bf..6df6198f9f 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -16,9 +16,11 @@ import type { Fiber } from 'ReactFiber';\n import type { FiberRoot } from 'ReactFiberRoot';\n import type { HostConfig } from 'ReactFiberReconciler';\n \n+var ReactFiberBeginWork = require('ReactFiberBeginWork');\n+var ReactFiberCompleteWork = require('ReactFiberCompleteWork');\n+var ReactFiberCommitWork = require('ReactFiberCommitWork');\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@@ -30,7 +32,11 @@ var {\n \n var timeHeuristicForUnitOfWork = 1;\n \n-module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\n+\n+ const { beginWork } = ReactFiberBeginWork(config);\n+ const { completeWork } = ReactFiberCompleteWork(config);\n+ const { commitWork } = ReactFiberCommitWork(config);\n \n \/\/ const scheduleHighPriCallback = config.scheduleHighPriCallback;\n const scheduleLowPriCallback = config.scheduleLowPriCallback;\n@@ -78,6 +84,22 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\n return null;\n }\n \n+ function commitAllWork(finishedWork : Fiber) {\n+ \/\/ Commit all the side-effects within a tree.\n+ \/\/ TODO: Error handling.\n+ let effectfulFiber = finishedWork.firstEffect;\n+ while (effectfulFiber) {\n+ commitWork(effectfulFiber);\n+ const next = effectfulFiber.nextEffect;\n+ \/\/ Ensure that we clean these up so that we don't accidentally keep them.\n+ \/\/ I'm not actually sure this matters because we can't reset firstEffect\n+ \/\/ and lastEffect since they're on every node, not just the effectful\n+ \/\/ ones. So we have to clean everything as we reuse nodes anyway.\n+ effectfulFiber.nextEffect = null;\n+ effectfulFiber = next;\n+ }\n+ }\n+\n function completeUnitOfWork(workInProgress : Fiber) : ?Fiber {\n while (true) {\n \/\/ The current, flushed, state of this fiber is the alternate.\n@@ -96,11 +118,25 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\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+ if (returnFiber) {\n+ \/\/ Ensure that remaining work priority bubbles up.\n+ if (workInProgress.pendingWorkPriority !== NoWork &&\n+ (returnFiber.pendingWorkPriority === NoWork ||\n+ returnFiber.pendingWorkPriority > workInProgress.pendingWorkPriority)) {\n+ returnFiber.pendingWorkPriority = workInProgress.pendingWorkPriority;\n+ }\n+ \/\/ Ensure that the first and last effect of the parent corresponds\n+ \/\/ to the children's first and last effect. This probably relies on\n+ \/\/ children completing in order.\n+ if (!returnFiber.firstEffect) {\n+ returnFiber.firstEffect = workInProgress.firstEffect;\n+ }\n+ if (workInProgress.lastEffect) {\n+ if (returnFiber.lastEffect) {\n+ returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;\n+ }\n+ returnFiber.lastEffect = workInProgress.lastEffect;\n+ }\n }\n \n if (next) {\n@@ -121,6 +157,7 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\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+ commitAllWork(workInProgress);\n const nextWork = findNextUnitOfWork();\n \/\/ if (!nextWork && hasMoreWork) {\n \/\/ TODO: This can happen when some deep work completes and we don't\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\nnew file mode 100644\nindex 0000000000..c59c12b97d\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n@@ -0,0 +1,97 @@\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+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+var React;\n+var ReactNoop;\n+\n+describe('ReactIncremental', function() {\n+ beforeEach(function() {\n+ React = require('React');\n+ ReactNoop = require('ReactNoop');\n+ spyOn(console, 'log');\n+ });\n+\n+ function div(...children) {\n+ return { type: 'div', children };\n+ }\n+\n+ function span(...children) {\n+ return { type: 'span', children };\n+ }\n+\n+ it('can update child nodes of a host instance', function() {\n+\n+ function Bar(props) {\n+ return <span>{props.text}<\/span>;\n+ }\n+\n+ function Foo(props) {\n+ return (\n+ <div>\n+ <Bar text={props.text} \/>\n+ {props.text === 'World' ? <Bar text={props.text} \/> : null}\n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render(<Foo text=\"Hello\" \/>);\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ div(span()),\n+ ]);\n+\n+ ReactNoop.render(<Foo text=\"World\" \/>);\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ div(span(), span()),\n+ ]);\n+\n+ });\n+\n+ it('does not update child nodes if a flush is aborted', function() {\n+\n+ function Bar(props) {\n+ return <span>{props.text}<\/span>;\n+ }\n+\n+ function Foo(props) {\n+ return (\n+ <div>\n+ <div>\n+ <Bar text={props.text} \/>\n+ {props.text === 'Hello' ? <Bar text={props.text} \/> : null}\n+ <\/div>\n+ <Bar text=\"Yo\" \/>\n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render(<Foo text=\"Hello\" \/>);\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span(), span()), span()),\n+ ]);\n+\n+ ReactNoop.render(<Foo text=\"World\" \/>);\n+ ReactNoop.flushLowPri(35);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span(), span()), span()),\n+ ]);\n+\n+ });\n+\n+ \/\/ TODO: Test that side-effects are not cut off when a work in progress node\n+ \/\/ moves to \"current\" without flushing due to having lower priority. Does this\n+ \/\/ even happen? Maybe a child doesn't get processed because it is lower prio?\n+\n+});\n","body":"[Fiber] Host Side Effects","commit":{"authorName":"Sebastian Markbåge","authoredAt":"2016-06-30T16:35:38-07:00","shortRevision":"cf259a4ff8","subject":"Merge pull request #7154 from sebmarkbage\/sideeffects","authorEmail":"sebastian@calyptus.eu","revision":"cf259a4ff82bb6248b41392e821d2822f9ce46c6"},"parents":["39265cb89266a90dcab4830133979038aeffd8e3","e60fb7eca017b335f8456986a90727beea80e99b"],"files":[{"path":".flowconfig","status":"M"},{"path":"examples\/fiber\/index.html","status":"A"},{"path":"package.json","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js","status":"A"},{"path":"src\/renderers\/noop\/ReactNoop.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiber.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"A"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberRoot.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js","status":"A"}]}</article></body></html>

{"patch":"diff --git a\/.flowconfig b\/.flowconfig\nindex 94ffcb54a2..d15db1c9ab 100644\n--- a\/.flowconfig\n+++ b\/.flowconfig\n@@ -34,4 +34,4 @@ suppress_comment=\\\$.\\\\|\\n\\\$*\\\\$FlowIssue\\\$(\\\\(>=0\\\\.\\\\(2[0-4]\\\\|1[0-9]\\\\|[0-9\n suppress_comment=\\\\(.\\\\|\\n\\\$*\\\\$FlowFixedInNextDeploy\n \n [version]\n-^0.26.0\n+^0.27.0\ndiff --git a\/examples\/fiber\/index.html b\/examples\/fiber\/index.html\nnew file mode 100644\nindex 0000000000..c507993794\n--- \/dev\/null\n+++ b\/examples\/fiber\/index.html\n@@ -0,0 +1,44 @@\n+\n+\n+ \n+ \n+ Fiber Example<\/title>\n+ <link rel=\"stylesheet\" href=\"..\/shared\/css\/base.css\" \/>\n+ <\/head>\n+ <body>\n+ <h1>Fiber Example<\/h1>\n+ <div id=\"container\">\n+ <p>\n+ To install React, follow the instructions on\n+ <a href=\"https:\/\/github.com\/facebook\/react\/\">GitHub<\/a>.\n+ <\/p>\n+ <p>\n+ If you can see this, React is <strong>not<\/strong> working right.\n+ If you checked out the source from GitHub make sure to run <code>grunt<\/code>.\n+ <\/p>\n+ <\/div>\n+ <script src=\"..\/..\/build\/react.js\"><\/script>\n+ <script src=\"..\/..\/build\/react-dom.js\"><\/script>\n+ <script>\n+ function ExampleApplication(props) {\n+ var elapsed = Math.round(props.elapsed \/ 100);\n+ var seconds = elapsed \/ 10 + (elapsed % 10 ? '' : '.0' );\n+ var message =\n+ 'React has been successfully running for ' + seconds + ' seconds.';\n+\n+ return React.DOM.p(null, message);\n+ }\n+\n+ \/\/ Call React.createFactory instead of directly call ExampleApplication({...}) in React.render\n+ var ExampleApplicationFactory = React.createFactory(ExampleApplication);\n+\n+ var start = new Date().getTime();\n+ setInterval(function() {\n+ ReactDOM.render(\n+ ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n+ document.getElementById('container')\n+ );\n+ }, 50);\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/package.json b\/package.json\nindex afa8ed8947..67ac99e5f8 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -43,7 +43,7 @@\n \"eslint-plugin-react-internal\": \"file:eslint-rules\",\n \"fbjs\": \"^0.8.1\",\n \"fbjs-scripts\": \"^0.6.0\",\n- \"flow-bin\": \"^0.26.0\",\n+ \"flow-bin\": \"^0.27.0\",\n \"glob\": \"^6.0.1\",\n \"grunt\": \"^0.4.5\",\n \"grunt-cli\": \"^0.1.13\",\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nnew file mode 100644\nindex 0000000000..74369ac3ea\n--- \/dev\/null\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -0,0 +1,92 @@\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 ReactDOMFiber\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+import type { HostChildren } from 'ReactFiberReconciler';\n+\n+var ReactFiberReconciler = require('ReactFiberReconciler');\n+\n+type DOMContainerElement = Element & { _reactRootContainer: Object };\n+\n+type Container = Element;\n+type Props = { };\n+type Instance = Element;\n+\n+function recursivelyAppendChildren(parent : Element, child : HostChildren<Instance>) {\n+ if (!child) {\n+ return;\n+ }\n+ \/* $FlowFixMe: Element should have this property. *\/\n+ if (child.nodeType === 1) {\n+ \/* $FlowFixMe: Refinement issue. I don't know how to express different. *\/\n+ parent.appendChild(child);\n+ } else {\n+ \/* As a result of the refinement issue this type isn't known. *\/\n+ let node : any = child;\n+ do {\n+ recursivelyAppendChildren(parent, node.output);\n+ } while (node = node.sibling);\n+ }\n+}\n+\n+var DOMRenderer = ReactFiberReconciler({\n+\n+ updateContainer(container : Container, children : HostChildren<Instance>) : void {\n+ container.innerHTML = '';\n+ recursivelyAppendChildren(container, children);\n+ },\n+\n+ createInstance(type : string, props : Props, children : HostChildren<Instance>) : Instance {\n+ const domElement = document.createElement(type);\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof props.children === 'string') {\n+ domElement.textContent = props.children;\n+ }\n+ return domElement;\n+ },\n+\n+ prepareUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : boolean {\n+ return true;\n+ },\n+\n+ commitUpdate(domElement : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : void {\n+ domElement.innerHTML = '';\n+ recursivelyAppendChildren(domElement, children);\n+ if (typeof newProps.children === 'string') {\n+ domElement.textContent = newProps.children;\n+ }\n+ },\n+\n+ deleteInstance(instance : Instance) : void {\n+ \/\/ Noop\n+ },\n+\n+ scheduleHighPriCallback: window.requestAnimationFrame,\n+\n+ scheduleLowPriCallback: window.requestIdleCallback,\n+\n+});\n+\n+var ReactDOM = {\n+\n+ render(element : ReactElement<any>, container : DOMContainerElement) {\n+ if (!container._reactRootContainer) {\n+ container._reactRootContainer = DOMRenderer.mountContainer(element, container);\n+ } else {\n+ DOMRenderer.updateContainer(element, container._reactRootContainer);\n+ }\n+ },\n+\n+};\n+\n+module.exports = ReactDOM;\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 9214a1865b..5682dc9f8a 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -20,33 +20,97 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n+import type { HostChildren } from 'ReactFiberReconciler';\n \n var ReactFiberReconciler = require('ReactFiberReconciler');\n \n var scheduledHighPriCallback = null;\n var scheduledLowPriCallback = null;\n \n+const TERMINAL_TAG = 99;\n+\n+type Container = { rootID: number, children: Array<Instance> };\n+type Props = { };\n+type Instance = { tag: 99, type: string, id: number, children: Array<Instance> };\n+\n+var instanceCounter = 0;\n+\n+function recursivelyAppendChildren(flatArray : Array<Instance>, child : HostChildren<Instance>) {\n+ if (!child) {\n+ return;\n+ }\n+ if (child.tag === TERMINAL_TAG) {\n+ flatArray.push(child);\n+ } else {\n+ let node = child;\n+ do {\n+ recursivelyAppendChildren(flatArray, node.output);\n+ } while (node = node.sibling);\n+ }\n+}\n+\n+function flattenChildren(children : HostChildren<Instance>) {\n+ const flatArray = [];\n+ recursivelyAppendChildren(flatArray, children);\n+ return flatArray;\n+}\n+\n var NoopRenderer = ReactFiberReconciler({\n \n- createHostInstance() {\n+ updateContainer(containerInfo : Container, children : HostChildren<Instance>) : void {\n+ console.log('Update container #' + containerInfo.rootID);\n+ containerInfo.children = flattenChildren(children);\n+ },\n \n+ createInstance(type : string, props : Props, children : HostChildren<Instance>) : Instance {\n+ console.log('Create instance #' + instanceCounter);\n+ const inst = {\n+ tag: TERMINAL_TAG,\n+ id: instanceCounter++,\n+ type: type,\n+ children: flattenChildren(children),\n+ };\n+ \/\/ Hide from unit tests\n+ Object.defineProperty(inst, 'tag', { value: inst.tag, enumerable: false });\n+ Object.defineProperty(inst, 'id', { value: inst.id, enumerable: false });\n+ return inst;\n },\n+\n+ prepareUpdate(instance : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : boolean {\n+ console.log('Prepare for update on #' + instance.id);\n+ return true;\n+ },\n+\n+ commitUpdate(instance : Instance, oldProps : Props, newProps : Props, children : HostChildren<Instance>) : void {\n+ console.log('Commit update on #' + instance.id);\n+ instance.children = flattenChildren(children);\n+ },\n+\n+ deleteInstance(instance : Instance) : void {\n+ console.log('Delete #' + instance.id);\n+ },\n+\n scheduleHighPriCallback(callback) {\n scheduledHighPriCallback = callback;\n },\n+\n scheduleLowPriCallback(callback) {\n scheduledLowPriCallback = callback;\n },\n \n });\n \n+var rootContainer = { rootID: 0, children: [] };\n+\n var root = null;\n \n var ReactNoop = {\n \n+ root: rootContainer,\n+\n render(element : ReactElement<any>) {\n if (!root) {\n- root = NoopRenderer.mountContainer(element, null);\n+ root = NoopRenderer.mountContainer(element, rootContainer);\n } else {\n NoopRenderer.updateContainer(element, root);\n }\n@@ -91,6 +155,19 @@ var ReactNoop = {\n console.log('Nothing rendered yet.');\n return;\n }\n+\n+ function logHostInstances(children: Array<Instance>, depth) {\n+ for (var i = 0; i < children.length; i++) {\n+ var child = children[i];\n+ console.log(' '.repeat(depth) + '- ' + child.type + '#' + child.id);\n+ logHostInstances(child.children, depth + 1);\n+ }\n+ }\n+ function logContainer(container : Container, depth) {\n+ console.log(' '.repeat(depth) + '- [root#' + container.rootID + ']');\n+ logHostInstances(container.children, depth + 1);\n+ }\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@@ -100,6 +177,10 @@ var ReactNoop = {\n logFiber(fiber.sibling, depth);\n }\n }\n+\n+ console.log('HOST INSTANCES:');\n+ logContainer(rootContainer, 0);\n+ console.log('FIBERS:');\n logFiber((root.stateNode : any).current, 0);\n },\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 48363ac2a0..39683f001e 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -48,7 +48,7 @@ type Instance = {\n type: any,\n \n \/\/ The local state associated with this fiber.\n- stateNode: ?Object,\n+ stateNode: any,\n \n \/\/ Conceptual aliases\n \/\/ parent : Instance -> return The parent happens to be the same as the\n@@ -82,6 +82,16 @@ export type Fiber = Instance & {\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+ \/\/ Singly linked list fast path to the next fiber with side-effects.\n+ nextEffect: ?Fiber,\n+\n+ \/\/ The first and last fiber with side-effect within this subtree. This allows\n+ \/\/ us to reuse a slice of the linked list when we reuse the work done within\n+ \/\/ this fiber.\n+ firstEffect: ?Fiber,\n+ lastEffect: ?Fiber,\n+\n+\n \/\/ This will be used to quickly determine if a subtree has no pending changes.\n pendingWorkPriority: PriorityLevel,\n \n@@ -129,6 +139,10 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n memoizedProps: null,\n output: null,\n \n+ nextEffect: null,\n+ firstEffect: null,\n+ lastEffect: null,\n+\n pendingWorkPriority: NoWork,\n \n hasWorkInProgress: false,\n@@ -157,6 +171,13 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n alt.ref = alt.ref;\n alt.pendingProps = fiber.pendingProps;\n alt.pendingWorkPriority = priorityLevel;\n+\n+ \/\/ Whenever we clone, we do so to get a new work in progress.\n+ \/\/ This ensures that we've reset these in the new tree.\n+ alt.nextEffect = null;\n+ alt.firstEffect = null;\n+ alt.lastEffect = null;\n+\n return alt;\n }\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex ec1d78af03..4fcf4d87b0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -14,6 +14,7 @@\n \n import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n+import type { HostConfig } from 'ReactFiberReconciler';\n \n var ReactChildFiber = require('ReactChildFiber');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n@@ -33,211 +34,217 @@ var {\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- priority\n- );\n-}\n-\n-function updateFunctionalComponent(current, workInProgress) {\n- var fn = workInProgress.type;\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.pendingProps.children === 'string' ? workInProgress.pendingProps.children : '');\n-\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+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\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 priority\n );\n+ }\n+\n+ function updateFunctionalComponent(current, workInProgress) {\n+ var fn = workInProgress.type;\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- return workInProgress.child;\n }\n-}\n-\n-function mountIndeterminateComponent(current, workInProgress) {\n- var fn = workInProgress.type;\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+ function updateHostComponent(current, workInProgress) {\n+ console.log('host component', workInProgress.type, typeof workInProgress.pendingProps.children === 'string' ? workInProgress.pendingProps.children : '');\n+\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- reconcileChildren(current, workInProgress, value);\n- workInProgress.pendingWorkPriority = NoWork;\n-}\n-\n-function updateCoroutineComponent(current, workInProgress) {\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- \/\/ 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- if (current && workInProgress.pendingProps === current.memoizedProps) {\n- \/\/ The most likely scenario is that the previous copy of the tree contains\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- const priorityLevel = workInProgress.pendingWorkPriority;\n- workInProgress.pendingProps = null;\n- workInProgress.pendingWorkPriority = NoWork;\n- workInProgress.stateNode = current.stateNode;\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+ function mountIndeterminateComponent(current, workInProgress) {\n+ var fn = workInProgress.type;\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- workInProgress.child = null;\n- return null;\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- 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+ function updateCoroutineComponent(current, workInProgress) {\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- workInProgress.hasWorkInProgress = true;\n-\n- switch (workInProgress.tag) {\n- case IndeterminateComponent:\n- mountIndeterminateComponent(current, workInProgress);\n- return workInProgress.child;\n- case FunctionalComponent:\n- updateFunctionalComponent(current, workInProgress);\n- return workInProgress.child;\n- case ClassComponent:\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- return updateHostComponent(current, workInProgress);\n- case CoroutineHandlerPhase:\n- \/\/ This is a restart. Reset the tag to the initial phase.\n- workInProgress.tag = CoroutineComponent;\n- \/\/ Intentionally fall through since this is now the same.\n- case CoroutineComponent:\n- updateCoroutineComponent(current, workInProgress);\n- \/\/ This doesn't take arbitrary time so we could synchronously just begin\n- \/\/ eagerly do the work of workInProgress.child as an optimization.\n- if (workInProgress.child) {\n- return beginWork(\n- workInProgress.child.alternate,\n- workInProgress.child\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- return workInProgress.child;\n- case YieldComponent:\n- \/\/ A yield component is just a placeholder, we can just run through the\n- \/\/ next one immediately.\n+ } while (child = child.sibling);\n+ }\n+\n+ function beginWork(current : ?Fiber, 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+ if (current && workInProgress.pendingProps === current.memoizedProps) {\n+ \/\/ The most likely scenario is that the previous copy of the tree contains\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+ const priorityLevel = workInProgress.pendingWorkPriority;\n+ workInProgress.pendingProps = null;\n workInProgress.pendingWorkPriority = NoWork;\n- if (workInProgress.sibling) {\n- return beginWork(\n- workInProgress.sibling.alternate,\n- workInProgress.sibling\n- );\n+ workInProgress.stateNode = current.stateNode;\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+\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- default:\n- throw new Error('Unknown unit of work tag');\n+ }\n+\n+ workInProgress.hasWorkInProgress = true;\n+\n+ switch (workInProgress.tag) {\n+ case IndeterminateComponent:\n+ mountIndeterminateComponent(current, workInProgress);\n+ return workInProgress.child;\n+ case FunctionalComponent:\n+ updateFunctionalComponent(current, workInProgress);\n+ return workInProgress.child;\n+ case ClassComponent:\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+ return updateHostComponent(current, workInProgress);\n+ case CoroutineHandlerPhase:\n+ \/\/ This is a restart. Reset the tag to the initial phase.\n+ workInProgress.tag = CoroutineComponent;\n+ \/\/ Intentionally fall through since this is now the same.\n+ case CoroutineComponent:\n+ updateCoroutineComponent(current, workInProgress);\n+ \/\/ This doesn't take arbitrary time so we could synchronously just begin\n+ \/\/ eagerly do the work of workInProgress.child as an optimization.\n+ if (workInProgress.child) {\n+ return beginWork(\n+ workInProgress.child.alternate,\n+ workInProgress.child\n+ );\n+ }\n+ return workInProgress.child;\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,\n+ workInProgress.sibling\n+ );\n+ }\n+ return null;\n+ default:\n+ throw new Error('Unknown unit of work tag');\n+ }\n }\n-}\n \n-exports.beginWork = beginWork;\n+ return {\n+ beginWork,\n+ };\n+\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nnew file mode 100644\nindex 0000000000..7792be2102\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -0,0 +1,68 @@\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 ReactFiberCommitWork\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 ReactTypeOfWork = require('ReactTypeOfWork');\n+var {\n+ ClassComponent,\n+ HostContainer,\n+ HostComponent,\n+} = ReactTypeOfWork;\n+\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\n+\n+ const updateContainer = config.updateContainer;\n+ const commitUpdate = config.commitUpdate;\n+\n+ function commitWork(finishedWork : Fiber) : void {\n+ switch (finishedWork.tag) {\n+ case ClassComponent: {\n+ \/\/ TODO: Fire componentDidMount\/componentDidUpdate, update refs\n+ return;\n+ }\n+ case HostContainer: {\n+ \/\/ TODO: Attach children to root container.\n+ const children = finishedWork.output;\n+ const root : FiberRoot = finishedWork.stateNode;\n+ const containerInfo : C = root.containerInfo;\n+ updateContainer(containerInfo, children);\n+ return;\n+ }\n+ case HostComponent: {\n+ if (finishedWork.stateNode == null || !finishedWork.alternate) {\n+ throw new Error('This should only be done during updates.');\n+ }\n+ \/\/ Commit the work prepared earlier.\n+ const child = (finishedWork.child : ?Fiber);\n+ const children = (child && !child.sibling) ? (child.output : ?Fiber | I) : child;\n+ const newProps = finishedWork.memoizedProps;\n+ const current = finishedWork.alternate;\n+ const oldProps = current.memoizedProps;\n+ const instance : I = finishedWork.stateNode;\n+ commitUpdate(instance, oldProps, newProps, children);\n+ return;\n+ }\n+ default:\n+ throw new Error('This unit of work tag should not have side-effects.');\n+ }\n+ }\n+\n+ return {\n+ commitWork,\n+ };\n+\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex d816510b40..9900a5b9fb 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -14,7 +14,7 @@\n \n import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n-\n+import type { HostConfig } from 'ReactFiberReconciler';\n import type { ReifiedYield } from 'ReactReifiedYield';\n \n var ReactChildFiber = require('ReactChildFiber');\n@@ -30,102 +30,162 @@ var {\n YieldComponent,\n } = ReactTypeOfWork;\n \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- returnFiber.output = (child && !child.sibling) ? child.output : child;\n- returnFiber.memoizedProps = returnFiber.pendingProps;\n-}\n-\n-function recursivelyFillYields(yields, output : ?Fiber | ?ReifiedYield) {\n- if (!output) {\n- \/\/ Ignore nulls etc.\n- } else if (output.tag !== undefined) { \/\/ TODO: Fix this fragile duck test.\n- \/\/ Detect if this is a fiber, if so it is a fragment result.\n- \/\/ $FlowFixMe: Refinement issue.\n- var item = (output : Fiber);\n- do {\n- recursivelyFillYields(yields, item.output);\n- item = item.sibling;\n- } while (item);\n- } else {\n- \/\/ $FlowFixMe: Refinement issue. If it is not a Fiber or null, it is a yield\n- yields.push(output);\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\n+\n+ const createInstance = config.createInstance;\n+ const prepareUpdate = config.prepareUpdate;\n+\n+ function markForPreEffect(workInProgress : Fiber) {\n+ \/\/ Schedule a side-effect on this fiber, BEFORE the children's side-effects.\n+ if (workInProgress.firstEffect) {\n+ workInProgress.nextEffect = workInProgress.firstEffect;\n+ workInProgress.firstEffect = workInProgress;\n+ } else {\n+ workInProgress.firstEffect = workInProgress;\n+ workInProgress.lastEffect = workInProgress;\n+ }\n+ }\n+\n+ \/*\n+ function markForPostEffect(workInProgress : Fiber) {\n+ \/\/ Schedule a side-effect on this fiber, AFTER the children's side-effects.\n+ if (workInProgress.lastEffect) {\n+ workInProgress.lastEffect.nextEffect = workInProgress;\n+ } else {\n+ workInProgress.firstEffect = workInProgress;\n+ }\n+ workInProgress.lastEffect = workInProgress;\n+ }\n+ *\/\n+\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+ returnFiber.output = (child && !child.sibling) ? child.output : child;\n+ returnFiber.memoizedProps = returnFiber.pendingProps;\n }\n-}\n \n-function moveCoroutineToHandlerPhase(current : ?Fiber, workInProgress : Fiber) {\n- var coroutine = (workInProgress.pendingProps : ?ReactCoroutine);\n- if (!coroutine) {\n- throw new Error('Should be resolved by now');\n+ function recursivelyFillYields(yields, output : ?Fiber | ?ReifiedYield) {\n+ if (!output) {\n+ \/\/ Ignore nulls etc.\n+ } else if (output.tag !== undefined) { \/\/ TODO: Fix this fragile duck test.\n+ \/\/ Detect if this is a fiber, if so it is a fragment result.\n+ \/\/ $FlowFixMe: Refinement issue.\n+ var item = (output : Fiber);\n+ do {\n+ recursivelyFillYields(yields, item.output);\n+ item = item.sibling;\n+ } while (item);\n+ } else {\n+ \/\/ $FlowFixMe: Refinement issue. If it is not a Fiber or null, it is a yield\n+ yields.push(output);\n+ }\n }\n \n- \/\/ First step of the coroutine has completed. Now we need to do the second.\n- \/\/ TODO: It would be nice to have a multi stage coroutine represented by a\n- \/\/ single component, or at least tail call optimize nested ones. Currently\n- \/\/ that requires additional fields that we don't want to add to the fiber.\n- \/\/ So this requires nested handlers.\n- \/\/ Note: This doesn't mutate the alternate node. I don't think it needs to\n- \/\/ since this stage is reset for every pass.\n- workInProgress.tag = CoroutineHandlerPhase;\n-\n- \/\/ Build up the yields.\n- \/\/ TODO: Compare this to a generator or opaque helpers like Children.\n- var yields : Array<ReifiedYield> = [];\n- var child = workInProgress.child;\n- while (child) {\n- recursivelyFillYields(yields, child.output);\n- child = child.sibling;\n+ function moveCoroutineToHandlerPhase(current : ?Fiber, workInProgress : Fiber) {\n+ var coroutine = (workInProgress.pendingProps : ?ReactCoroutine);\n+ if (!coroutine) {\n+ throw new Error('Should be resolved by now');\n+ }\n+\n+ \/\/ First step of the coroutine has completed. Now we need to do the second.\n+ \/\/ TODO: It would be nice to have a multi stage coroutine represented by a\n+ \/\/ single component, or at least tail call optimize nested ones. Currently\n+ \/\/ that requires additional fields that we don't want to add to the fiber.\n+ \/\/ So this requires nested handlers.\n+ \/\/ Note: This doesn't mutate the alternate node. I don't think it needs to\n+ \/\/ since this stage is reset for every pass.\n+ workInProgress.tag = CoroutineHandlerPhase;\n+\n+ \/\/ Build up the yields.\n+ \/\/ TODO: Compare this to a generator or opaque helpers like Children.\n+ var yields : Array<ReifiedYield> = [];\n+ var child = workInProgress.child;\n+ while (child) {\n+ recursivelyFillYields(yields, child.output);\n+ child = child.sibling;\n+ }\n+ var fn = coroutine.handler;\n+ var props = coroutine.props;\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+ priority\n+ );\n+ return workInProgress.stateNode;\n }\n- var fn = coroutine.handler;\n- var props = coroutine.props;\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- priority\n- );\n- return workInProgress.stateNode;\n-}\n-\n-exports.completeWork = function(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n- switch (workInProgress.tag) {\n- case FunctionalComponent:\n- console.log('\/functional component', workInProgress.type.name);\n- transferOutput(workInProgress.child, workInProgress);\n- return null;\n- case ClassComponent:\n- console.log('\/class component', workInProgress.type.name);\n- transferOutput(workInProgress.child, workInProgress);\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- return null;\n- case CoroutineComponent:\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- return null;\n- case YieldComponent:\n- \/\/ Does nothing.\n- return null;\n-\n- \/\/ Error cases\n- case IndeterminateComponent:\n- throw new Error('An indeterminate component should have become determinate before completing.');\n- default:\n- throw new Error('Unknown unit of work tag');\n+\n+ function completeWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n+ switch (workInProgress.tag) {\n+ case FunctionalComponent:\n+ console.log('\/functional component', workInProgress.type.name);\n+ transferOutput(workInProgress.child, workInProgress);\n+ return null;\n+ case ClassComponent:\n+ console.log('\/class component', workInProgress.type.name);\n+ transferOutput(workInProgress.child, workInProgress);\n+ return null;\n+ case HostContainer:\n+ transferOutput(workInProgress.child, workInProgress);\n+ \/\/ We don't know if a container has updated any children so we always\n+ \/\/ need to update it right now. We schedule this side-effect before\n+ \/\/ all the other side-effects in the subtree. We need to schedule it\n+ \/\/ before so that the entire tree is up-to-date before the life-cycles\n+ \/\/ are invoked.\n+ markForPreEffect(workInProgress);\n+ return null;\n+ case HostComponent:\n+ console.log('\/host component', workInProgress.type);\n+ const child = workInProgress.child;\n+ const children = (child && !child.sibling) ? (child.output : ?Fiber | I) : child;\n+ const newProps = workInProgress.pendingProps;\n+ workInProgress.memoizedProps = newProps;\n+ if (current && workInProgress.stateNode != null) {\n+ \/\/ If we have an alternate, that means this is an update and we need to\n+ \/\/ schedule a side-effect to do the updates.\n+ const oldProps = current.memoizedProps;\n+ const instance : I = workInProgress.stateNode;\n+ if (prepareUpdate(instance, oldProps, newProps, children)) {\n+ \/\/ This returns true if there was something to update.\n+ markForPreEffect(workInProgress);\n+ }\n+ workInProgress.output = instance;\n+ } else {\n+ const instance = createInstance(workInProgress.type, newProps, children);\n+ \/\/ TODO: This seems like unnecessary duplication.\n+ workInProgress.stateNode = instance;\n+ workInProgress.output = instance;\n+ }\n+ return null;\n+ case CoroutineComponent:\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+ return null;\n+ case YieldComponent:\n+ \/\/ Does nothing.\n+ return null;\n+\n+ \/\/ Error cases\n+ case IndeterminateComponent:\n+ throw new Error('An indeterminate component should have become determinate before completing.');\n+ default:\n+ throw new Error('Unknown unit of work tag');\n+ }\n }\n+\n+ return {\n+ completeWork,\n+ };\n+\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex 3fde615cf0..cb22e88421 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -14,6 +14,7 @@\n \n import type { Fiber } from 'ReactFiber';\n import type { FiberRoot } from 'ReactFiberRoot';\n+import type { TypeOfWork } from 'ReactTypeOfWork';\n \n var { createFiberRoot } = require('ReactFiberRoot');\n var ReactFiberScheduler = require('ReactFiberScheduler');\n@@ -22,18 +23,27 @@ var {\n LowPriority,\n } = require('ReactPriorityLevel');\n \n-type ReactHostElement<T, P> = {\n- type: T,\n- props: P\n-};\n-\n type Deadline = {\n timeRemaining : () => number\n };\n \n-export type HostConfig<T, P, I> = {\n+type HostChildNode<I> = { tag: TypeOfWork, output: HostChildren<I>, sibling: any };\n+\n+export type HostChildren<I> = null | void | I | HostChildNode<I>;\n+\n+export type HostConfig<T, P, I, C> = {\n+\n+ \/\/ TODO: We don't currently have a quick way to detect that children didn't\n+ \/\/ reorder so we host will always need to check the set. We should make a flag\n+ \/\/ or something so that it can bailout easily.\n+\n+ updateContainer(containerInfo : C, children : HostChildren<I>) : void;\n+\n+ createInstance(type : T, props : P, children : HostChildren<I>) : I,\n+ prepareUpdate(instance : I, oldProps : P, newProps : P, children : HostChildren<I>) : bool,\n+ commitUpdate(instance : I, oldProps : P, newProps : P, children : HostChildren<I>) : void,\n+ deleteInstance(instance : I) : void,\n \n- createHostInstance(element : ReactHostElement<T, P>) : I,\n scheduleHighPriCallback(callback : () => void) : void,\n scheduleLowPriCallback(callback : (deadline : Deadline) => void) : void\n \n@@ -41,22 +51,22 @@ export type HostConfig<T, P, I> = {\n \n type OpaqueNode = Fiber;\n \n-export type Reconciler = {\n- mountContainer(element : ReactElement<any>, containerInfo : ?Object) : OpaqueNode,\n+export type Reconciler<C> = {\n+ mountContainer(element : ReactElement<any>, containerInfo : C) : OpaqueNode,\n updateContainer(element : ReactElement<any>, 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+ getPublicRootInstance(container : OpaqueNode) : (C | null),\n };\n \n-module.exports = function<T, P, I>(config : HostConfig<T, P, I>) : Reconciler {\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconciler<C> {\n \n var { scheduleLowPriWork } = ReactFiberScheduler(config);\n \n return {\n \n- mountContainer(element : ReactElement<any>, containerInfo : ?Object) : OpaqueNode {\n+ mountContainer(element : ReactElement<any>, containerInfo : C) : OpaqueNode {\n const root = createFiberRoot(containerInfo);\n const container = root.current;\n \/\/ TODO: Use pending work\/state instead of props.\n@@ -91,7 +101,7 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) : Reconciler {\n scheduleLowPriWork(root);\n },\n \n- getPublicRootInstance(container : OpaqueNode) : ?Object {\n+ getPublicRootInstance(container : OpaqueNode) : (C | null) {\n return null;\n },\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\nindex ce186c3fce..c0b312253c 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n@@ -18,7 +18,7 @@ const { createHostContainerFiber } = require('ReactFiber');\n \n export type FiberRoot = {\n \/\/ Any additional information from the host associated with this root.\n- containerInfo: ?Object,\n+ containerInfo: any,\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@@ -27,7 +27,7 @@ export type FiberRoot = {\n nextScheduledRoot: ?FiberRoot,\n };\n \n-exports.createFiberRoot = function(containerInfo : ?Object) : FiberRoot {\n+exports.createFiberRoot = function(containerInfo : any) : FiberRoot {\n \/\/ Cyclic construction. This cheats the type system right now because\n \/\/ stateNode is any.\n const uninitializedFiber = createHostContainerFiber();\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 4b6da086bf..6df6198f9f 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -16,9 +16,11 @@ import type { Fiber } from 'ReactFiber';\n import type { FiberRoot } from 'ReactFiberRoot';\n import type { HostConfig } from 'ReactFiberReconciler';\n \n+var ReactFiberBeginWork = require('ReactFiberBeginWork');\n+var ReactFiberCompleteWork = require('ReactFiberCompleteWork');\n+var ReactFiberCommitWork = require('ReactFiberCommitWork');\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@@ -30,7 +32,11 @@ var {\n \n var timeHeuristicForUnitOfWork = 1;\n \n-module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\n+module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {\n+\n+ const { beginWork } = ReactFiberBeginWork(config);\n+ const { completeWork } = ReactFiberCompleteWork(config);\n+ const { commitWork } = ReactFiberCommitWork(config);\n \n \/\/ const scheduleHighPriCallback = config.scheduleHighPriCallback;\n const scheduleLowPriCallback = config.scheduleLowPriCallback;\n@@ -78,6 +84,22 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\n return null;\n }\n \n+ function commitAllWork(finishedWork : Fiber) {\n+ \/\/ Commit all the side-effects within a tree.\n+ \/\/ TODO: Error handling.\n+ let effectfulFiber = finishedWork.firstEffect;\n+ while (effectfulFiber) {\n+ commitWork(effectfulFiber);\n+ const next = effectfulFiber.nextEffect;\n+ \/\/ Ensure that we clean these up so that we don't accidentally keep them.\n+ \/\/ I'm not actually sure this matters because we can't reset firstEffect\n+ \/\/ and lastEffect since they're on every node, not just the effectful\n+ \/\/ ones. So we have to clean everything as we reuse nodes anyway.\n+ effectfulFiber.nextEffect = null;\n+ effectfulFiber = next;\n+ }\n+ }\n+\n function completeUnitOfWork(workInProgress : Fiber) : ?Fiber {\n while (true) {\n \/\/ The current, flushed, state of this fiber is the alternate.\n@@ -96,11 +118,25 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\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+ if (returnFiber) {\n+ \/\/ Ensure that remaining work priority bubbles up.\n+ if (workInProgress.pendingWorkPriority !== NoWork &&\n+ (returnFiber.pendingWorkPriority === NoWork ||\n+ returnFiber.pendingWorkPriority > workInProgress.pendingWorkPriority)) {\n+ returnFiber.pendingWorkPriority = workInProgress.pendingWorkPriority;\n+ }\n+ \/\/ Ensure that the first and last effect of the parent corresponds\n+ \/\/ to the children's first and last effect. This probably relies on\n+ \/\/ children completing in order.\n+ if (!returnFiber.firstEffect) {\n+ returnFiber.firstEffect = workInProgress.firstEffect;\n+ }\n+ if (workInProgress.lastEffect) {\n+ if (returnFiber.lastEffect) {\n+ returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;\n+ }\n+ returnFiber.lastEffect = workInProgress.lastEffect;\n+ }\n }\n \n if (next) {\n@@ -121,6 +157,7 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) {\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+ commitAllWork(workInProgress);\n const nextWork = findNextUnitOfWork();\n \/\/ if (!nextWork && hasMoreWork) {\n \/\/ TODO: This can happen when some deep work completes and we don't\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\nnew file mode 100644\nindex 0000000000..c59c12b97d\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n@@ -0,0 +1,97 @@\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+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+var React;\n+var ReactNoop;\n+\n+describe('ReactIncremental', function() {\n+ beforeEach(function() {\n+ React = require('React');\n+ ReactNoop = require('ReactNoop');\n+ spyOn(console, 'log');\n+ });\n+\n+ function div(...children) {\n+ return { type: 'div', children };\n+ }\n+\n+ function span(...children) {\n+ return { type: 'span', children };\n+ }\n+\n+ it('can update child nodes of a host instance', function() {\n+\n+ function Bar(props) {\n+ return <span>{props.text}<\/span>;\n+ }\n+\n+ function Foo(props) {\n+ return (\n+ <div>\n+ <Bar text={props.text} \/>\n+ {props.text === 'World' ? <Bar text={props.text} \/> : null}\n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render(<Foo text=\"Hello\" \/>);\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ div(span()),\n+ ]);\n+\n+ ReactNoop.render(<Foo text=\"World\" \/>);\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ div(span(), span()),\n+ ]);\n+\n+ });\n+\n+ it('does not update child nodes if a flush is aborted', function() {\n+\n+ function Bar(props) {\n+ return <span>{props.text}<\/span>;\n+ }\n+\n+ function Foo(props) {\n+ return (\n+ <div>\n+ <div>\n+ <Bar text={props.text} \/>\n+ {props.text === 'Hello' ? <Bar text={props.text} \/> : null}\n+ <\/div>\n+ <Bar text=\"Yo\" \/>\n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render(<Foo text=\"Hello\" \/>);\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span(), span()), span()),\n+ ]);\n+\n+ ReactNoop.render(<Foo text=\"World\" \/>);\n+ ReactNoop.flushLowPri(35);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span(), span()), span()),\n+ ]);\n+\n+ });\n+\n+ \/\/ TODO: Test that side-effects are not cut off when a work in progress node\n+ \/\/ moves to \"current\" without flushing due to having lower priority. Does this\n+ \/\/ even happen? Maybe a child doesn't get processed because it is lower prio?\n+\n+});\n","body":"[Fiber] Host Side Effects","commit":{"authorName":"Sebastian Markbåge","authoredAt":"2016-06-30T16:35:38-07:00","shortRevision":"cf259a4ff8","subject":"Merge pull request #7154 from sebmarkbage\/sideeffects","authorEmail":"sebastian@calyptus.eu","revision":"cf259a4ff82bb6248b41392e821d2822f9ce46c6"},"parents":["39265cb89266a90dcab4830133979038aeffd8e3","e60fb7eca017b335f8456986a90727beea80e99b"],"files":[{"path":".flowconfig","status":"M"},{"path":"examples\/fiber\/index.html","status":"A"},{"path":"package.json","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js","status":"A"},{"path":"src\/renderers\/noop\/ReactNoop.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiber.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"A"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberRoot.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js","status":"A"}]}</article></body></html>

dillon1000/react

Files changed