Expiration times

fixtures/fiber-triangle/index.html

@@ -76,51 +76,54 @@ <h1>Fiber Example</h1>
         }
       }
 
-      function SierpinskiTriangle({ x, y, s, children }) {
-        if (s <= targetSize) {
-          return (
-            <Dot
-              x={x - (targetSize / 2)}
-              y={y - (targetSize / 2)}
-              size={targetSize}
-              text={children}
-            />
+      class SierpinskiTriangle extends React.Component {
+        shouldComponentUpdate(nextProps) {
+          var o = this.props;
+          var n = nextProps;
+          return !(
+            o.x === n.x &&
+            o.y === n.y &&
+            o.s === n.s &&
+            o.children === n.children
           );
-          return r;
         }
-        var newSize = s / 2;
-        var slowDown = true;
-        if (slowDown) {
-          var e = performance.now() + 0.8;
-          while (performance.now() < e) {
-            // Artificially long execution time.
+        render() {
+          let {x, y, s, children} = this.props;
+          if (s <= targetSize) {
+            return (
+              <Dot
+                x={x - (targetSize / 2)}
+                y={y - (targetSize / 2)}
+                size={targetSize}
+                text={children}
+              />
+            );
+            return r;
+          }
+          var newSize = s / 2;
+          var slowDown = true;
+          if (slowDown) {
+            var e = performance.now() + 0.8;
+            while (performance.now() < e) {
+              // Artificially long execution time.
+            }
           }
-        }
 
-        s /= 2;
+          s /= 2;
 
-        return [
-          <SierpinskiTriangle x={x} y={y - (s / 2)} s={s}>
-            {children}
-          </SierpinskiTriangle>,
-          <SierpinskiTriangle x={x - s} y={y + (s / 2)} s={s}>
-            {children}
-          </SierpinskiTriangle>,
-          <SierpinskiTriangle x={x + s} y={y + (s / 2)} s={s}>
-            {children}
-          </SierpinskiTriangle>,
-        ];
+          return [
+            <SierpinskiTriangle x={x} y={y - (s / 2)} s={s}>
+              {children}
+            </SierpinskiTriangle>,
+            <SierpinskiTriangle x={x - s} y={y + (s / 2)} s={s}>
+              {children}
+            </SierpinskiTriangle>,
+            <SierpinskiTriangle x={x + s} y={y + (s / 2)} s={s}>
+              {children}
+            </SierpinskiTriangle>,
+          ];
+        }
       }
-      SierpinskiTriangle.shouldComponentUpdate = function(oldProps, newProps) {
-        var o = oldProps;
-        var n = newProps;
-        return !(
-          o.x === n.x &&
-          o.y === n.y &&
-          o.s === n.s &&
-          o.children === n.children
-        );
-      };
 
       class ExampleApplication extends React.Component {
         constructor() {

src/renderers/art/ReactARTFiberEntry.js

@@ -532,6 +532,8 @@ const ARTRenderer = ReactFiberReconciler({
     );
   },
 
+  now: ReactDOMFrameScheduling.now,
+
   useSyncScheduling: true,
 });
 

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -437,6 +437,8 @@ var DOMRenderer = ReactFiberReconciler({
     }
   },
 
+  now: ReactDOMFrameScheduling.now,
+
   canHydrateInstance(
     instance: Instance | TextInstance,
     type: string,

src/renderers/native-rt/ReactNativeRTFiberRenderer.js

@@ -227,6 +227,11 @@ const NativeRTRenderer = ReactFiberReconciler({
   },
 
   useSyncScheduling: true,
+
+  now(): number {
+    // TODO: Enable expiration by implementing this method.
+    return 0;
+  },
 });
 
 module.exports = NativeRTRenderer;

src/renderers/native/ReactNativeFiberRenderer.js

@@ -377,6 +377,11 @@ const NativeRenderer = ReactFiberReconciler({
   },
 
   useSyncScheduling: true,
+
+  now(): number {
+    // TODO: Enable expiration by implementing this method.
+    return 0;
+  },
 });
 
 module.exports = NativeRenderer;

src/renderers/noop/ReactNoopEntry.js

@@ -83,6 +83,8 @@ function removeChild(
   parentInstance.children.splice(index, 1);
 }
 
+let elapsedTimeInMs = 0;
+
 var NoopRenderer = ReactFiberReconciler({
   getRootHostContext() {
     if (failInBeginPhase) {
@@ -201,6 +203,10 @@ var NoopRenderer = ReactFiberReconciler({
   prepareForCommit(): void {},
 
   resetAfterCommit(): void {},
+
+  now(): number {
+    return elapsedTimeInMs;
+  },
 });
 
 var rootContainers = new Map();
@@ -336,6 +342,14 @@ var ReactNoop = {
     expect(actual).toEqual(expected);
   },
 
+  expire(ms: number): void {
+    elapsedTimeInMs += ms;
+  },
+
+  flushExpired(): Array<mixed> {
+    return ReactNoop.flushUnitsOfWork(0);
+  },
+
   yield(value: mixed) {
     if (yieldedValues === null) {
       yieldedValues = [value];
@@ -400,15 +414,15 @@ var ReactNoop = {
         '  '.repeat(depth + 1) + '~',
         firstUpdate && firstUpdate.partialState,
         firstUpdate.callback ? 'with callback' : '',
-        '[' + firstUpdate.priorityLevel + ']',
+        '[' + firstUpdate.expirationTime + ']',
       );
       var next;
       while ((next = firstUpdate.next)) {
         log(
           '  '.repeat(depth + 1) + '~',
           next.partialState,
           next.callback ? 'with callback' : '',
-          '[' + firstUpdate.priorityLevel + ']',
+          '[' + firstUpdate.expirationTime + ']',
         );
       }
     }
@@ -418,7 +432,7 @@ var ReactNoop = {
         '  '.repeat(depth) +
           '- ' +
           (fiber.type ? fiber.type.name || fiber.type : '[root]'),
-        '[' + fiber.pendingWorkPriority + (fiber.pendingProps ? '*' : '') + ']',
+        '[' + fiber.expirationTime + (fiber.pendingProps ? '*' : '') + ']',
       );
       if (fiber.updateQueue) {
         logUpdateQueue(fiber.updateQueue, depth);

src/renderers/shared/ReactDOMFrameScheduling.js

@@ -37,6 +37,20 @@ if (__DEV__) {
   }
 }
 
+const hasNativePerformanceNow =
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+let now;
+if (hasNativePerformanceNow) {
+  now = function() {
+    return performance.now();
+  };
+} else {
+  now = function() {
+    return Date.now();
+  };
+}
+
 // TODO: There's no way to cancel, because Fiber doesn't atm.
 let rIC: (callback: (deadline: Deadline) => void) => number;
 
@@ -67,19 +81,23 @@ if (!ExecutionEnvironment.canUseDOM) {
   var previousFrameTime = 33;
   var activeFrameTime = 33;
 
-  var frameDeadlineObject = {
-    timeRemaining: typeof performance === 'object' &&
-      typeof performance.now === 'function'
-      ? function() {
-          // We assume that if we have a performance timer that the rAF callback
-          // gets a performance timer value. Not sure if this is always true.
-          return frameDeadline - performance.now();
-        }
-      : function() {
-          // As a fallback we use Date.now.
-          return frameDeadline - Date.now();
-        },
-  };
+  var frameDeadlineObject;
+  if (hasNativePerformanceNow) {
+    frameDeadlineObject = {
+      timeRemaining() {
+        // We assume that if we have a performance timer that the rAF callback
+        // gets a performance timer value. Not sure if this is always true.
+        return frameDeadline - performance.now();
+      },
+    };
+  } else {
+    frameDeadlineObject = {
+      timeRemaining() {
+        // Fallback to Date.now()
+        return frameDeadline - Date.now();
+      },
+    };
+  }
 
   // We use the postMessage trick to defer idle work until after the repaint.
   var messageKey = '__reactIdleCallback$' + Math.random().toString(36).slice(2);
@@ -153,4 +171,5 @@ if (!ExecutionEnvironment.canUseDOM) {
   rIC = requestIdleCallback;
 }
 
+exports.now = now;
 exports.rIC = rIC;