Refactor progressed work model

fixtures/fiber-triangle/index.html

@@ -26,6 +26,7 @@ <h1>Fiber Example</h1>
         font: 'normal 15px sans-serif',
         textAlign: 'center',
         cursor: 'pointer',
+        color: 'white',
       };
 
       var containerStyle = {
@@ -40,6 +41,10 @@ <h1>Fiber Example</h1>
 
       var targetSize = 25;
 
+      let dotCount = 0;
+
+      const colors = ['red', 'blue', 'green', 'orange', 'purple', 'black'];
+
       class Dot extends React.Component {
         constructor() {
           super();
@@ -66,11 +71,12 @@ <h1>Fiber Example</h1>
             top: (props.y) + 'px',
             borderRadius: (s / 2) + 'px',
             lineHeight: (s) + 'px',
-            background: this.state.hover ? '#ff0' : dotStyle.background
+            background: this.state.hover ? '#ff0' : colors[props.text % colors.length],
+            color: this.state.hover ? 'black' : dotStyle.color,
           };
           return (
-            <div style={style} onMouseEnter={() => this.enter()} onMouseLeave={() => this.leave()}>
-              {this.state.hover ? '*' + props.text + '*' : props.text}
+            <div ref={div => this.div = div} style={style} onMouseEnter={() => this.enter()} onMouseLeave={() => this.leave()}>
+              {this.state.hover ? `*${props.text}*` : props.text}
             </div>
           );
         }

scripts/fiber/tests-failing.txt

@@ -3,3 +3,6 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * should not blow away user-entered text on successful reconnect to a controlled checkbox
 * should not blow away user-selected value on successful reconnect to an uncontrolled select
 * should not blow away user-selected value on successful reconnect to an controlled select
+
+src/renderers/shared/fiber/__tests__/ReactIncrementalTriangle-test.js
+* resumes work by comparing the priority at which the work-in-progress was created/updated

scripts/fiber/tests-passing-except-dev.txt

@@ -86,12 +86,6 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders a div with a single child surrounded by whitespace with client render on top of bad server markup
 * renders >,<, and & as single child with client render on top of bad server markup
 * renders >,<, and & as multiple children with client render on top of bad server markup
-* throws when rendering a string component with clean client render
-* throws when rendering a string component with client render on top of bad server markup
-* throws when rendering an undefined component with clean client render
-* throws when rendering an undefined component with client render on top of bad server markup
-* throws when rendering a number component with clean client render
-* throws when rendering a number component with client render on top of bad server markup
 * renders an input with a value and an onChange with client render on top of bad server markup
 * renders an input with a value and readOnly with client render on top of bad server markup
 * renders an input with a value and no onChange/readOnly with client render on top of bad server markup

scripts/fiber/tests-passing.txt

@@ -1121,8 +1121,14 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders >,<, and & as multiple children with clean client render
 * renders >,<, and & as multiple children with client render on top of good server markup
 * throws when rendering a string component with server string render
+* throws when rendering a string component with clean client render
+* throws when rendering a string component with client render on top of bad server markup
 * throws when rendering an undefined component with server string render
+* throws when rendering an undefined component with clean client render
+* throws when rendering an undefined component with client render on top of bad server markup
 * throws when rendering a number component with server string render
+* throws when rendering a number component with clean client render
+* throws when rendering a number component with client render on top of bad server markup
 * throws when rendering null with server string render
 * throws when rendering null with clean client render
 * throws when rendering null with client render on top of bad server markup
@@ -1860,13 +1866,18 @@ src/renderers/shared/fiber/__tests__/ReactIncrementalSideEffects-test.js
 * can defer side-effects and resume them later on
 * can defer side-effects and reuse them later - complex
 * deprioritizes setStates that happens within a deprioritized tree
+* does not drop priority from a progressed subtree
+* does not complete already completed work
 * calls callback after update is flushed
 * calls setState callback even if component bails out
 * calls componentWillUnmount after a deletion, even if nested
 * calls componentDidMount/Update after insertion/update
 * invokes ref callbacks after insertion/update/unmount
 * supports string refs
 
+src/renderers/shared/fiber/__tests__/ReactIncrementalTriangle-test.js
+* works
+
 src/renderers/shared/fiber/__tests__/ReactIncrementalUpdates-test.js
 * applies updates in order of priority
 * applies updates with equal priority in insertion order

src/renderers/__tests__/ReactComponent-test.js

@@ -44,7 +44,12 @@ describe('ReactComponent', () => {
     var instance = <div ref="badDiv" />;
     expect(function() {
       instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow();
+    }).toThrow(
+      'Only a ReactOwner can have refs. You might be adding a ref to a ' +
+        "component that was not created inside a component's `render` " +
+        'method, or you have multiple copies of React loaded (details: ' +
+        'https://fb.me/react-refs-must-have-owner).',
+    );
   });
 
   it('should warn when children are mutated during render', () => {

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -115,7 +115,9 @@ function getReactRootElementInContainer(container: any) {
 
 function shouldReuseContent(container) {
   const rootElement = getReactRootElementInContainer(container);
-  return !!(rootElement && rootElement.getAttribute(ID_ATTRIBUTE_NAME));
+  return !!(rootElement &&
+    rootElement.nodeType === ELEMENT_NODE &&
+    rootElement.getAttribute(ID_ATTRIBUTE_NAME));
 }
 
 function shouldAutoFocusHostComponent(type: string, props: Props): boolean {

src/renderers/noop/ReactNoop.js

@@ -212,6 +212,40 @@ var rootContainers = new Map();
 var roots = new Map();
 var DEFAULT_ROOT_ID = '<default>';
 
+let yieldBeforeNextUnitOfWork = false;
+let yieldValue = null;
+
+function* flushUnitsOfWork(n: number): Generator<mixed, void, void> {
+  var didStop = false;
+  while (!didStop && scheduledDeferredCallback !== null) {
+    var cb = scheduledDeferredCallback;
+    scheduledDeferredCallback = null;
+    yieldBeforeNextUnitOfWork = false;
+    yieldValue = null;
+    var unitsRemaining = n;
+    var didYield = false;
+    cb({
+      timeRemaining() {
+        if (yieldBeforeNextUnitOfWork) {
+          didYield = true;
+          return 0;
+        }
+        if (unitsRemaining-- > 0) {
+          return 999;
+        }
+        didStop = true;
+        return 0;
+      },
+    });
+
+    if (didYield) {
+      const valueToYield = yieldValue;
+      yieldValue = null;
+      yield valueToYield;
+    }
+  }
+}
+
 var ReactNoop = {
   getChildren(rootID: string = DEFAULT_ROOT_ID) {
     const container = rootContainers.get(rootID);
@@ -277,29 +311,48 @@ var ReactNoop = {
   },
 
   flushDeferredPri(timeout: number = Infinity) {
-    var cb = scheduledDeferredCallback;
-    if (cb === null) {
-      return;
+    // The legacy version of this function decremented the timeout before
+    // returning the new time.
+    // TODO: Convert tests to use flushUnitsOfWork or flushAndYield instead.
+    const n = timeout / 5 - 1;
+    const iterator = flushUnitsOfWork(n);
+    let value = iterator.next();
+    while (!value.done) {
+      value = iterator.next();
     }
-    scheduledDeferredCallback = null;
-    var timeRemaining = timeout;
-    cb({
-      timeRemaining() {
-        // Simulate a fix amount of time progressing between each call.
-        timeRemaining -= 5;
-        if (timeRemaining < 0) {
-          timeRemaining = 0;
-        }
-        return timeRemaining;
-      },
-    });
+    // Don't flush animation priority in this legacy function. Some tests may
+    // still rely on this behavior.
   },
 
   flush() {
     ReactNoop.flushAnimationPri();
     ReactNoop.flushDeferredPri();
   },
 
+  *flushAndYield(unitsOfWork: number = Infinity): Generator<mixed, void, void> {
+    for (const value of flushUnitsOfWork(unitsOfWork)) {
+      yield value;
+    }
+    ReactNoop.flushAnimationPri();
+  },
+
+  flushUnitsOfWork(n: number) {
+    const iterator = flushUnitsOfWork(n);
+    let value = iterator.next();
+    while (!value.done) {
+      value = iterator.next();
+    }
+    // TODO: We should always flush animation priority after flushing normal/low
+    // priority. Move this to flushUnitsOfWork generator once tests
+    // are converted.
+    ReactNoop.flushAnimationPri();
+  },
+
+  yield(value: mixed) {
+    yieldBeforeNextUnitOfWork = true;
+    yieldValue = value;
+  },
+
   performAnimationWork(fn: Function) {
     NoopRenderer.performWithPriority(AnimationPriority, fn);
   },
@@ -377,7 +430,7 @@ var ReactNoop = {
       if (fiber.updateQueue) {
         logUpdateQueue(fiber.updateQueue, depth);
       }
-      const childInProgress = fiber.progressedChild;
+      const childInProgress = fiber.progressedWork.child;
       if (childInProgress && childInProgress !== fiber.child) {
         log(
           '  '.repeat(depth + 1) + 'IN PROGRESS: ' + fiber.progressedPriority,