Simplify coroutines by making yields stateless

Coroutines was kind of broken because it tried to do reparenting and
enabling state preservation to be passed along the coroutine. However,
since we couldn't determine which Fiber was "current" on a reified yield
this was kind of broken.

This removes the "continuation" part of yields so they're basically just
return values. It is still possible to do continuations by just passing
simple functions or classes as part of the return value but they're not
stateful.

This means that we won't have reparenting, but I actually don't think we
need it. There's another way to structure this by doing all the state in
the first phase and then yielding a stateless representation of the result.
This stateless representation of the tree can then be rendered in different
(or even multiple) locations.

Because we no longer have a stateful continuation, you may have noticed
that this really no longer represent the "coroutine" concept. I will
rename it in a follow up commit.

Author: sebmarkbage

src/isomorphic/classic/element/ReactElementValidator.js

@@ -200,8 +200,7 @@ var ReactElementValidator = {
   createElement: function(type, props, children) {
     var validType =
       typeof type === 'string' ||
-      typeof type === 'function' ||
-      type !== null && typeof type === 'object' && typeof type.tag === 'number';
+      typeof type === 'function';
     // We warn in this case but don't throw. We expect the element creation to
     // succeed and there will likely be errors in render.
     if (!validType) {

src/renderers/shared/fiber/ReactChildFiber.js

@@ -29,7 +29,6 @@ var {
 } = require('ReactPortal');
 
 var ReactFiber = require('ReactFiber');
-var ReactReifiedYield = require('ReactReifiedYield');
 var ReactTypeOfSideEffect = require('ReactTypeOfSideEffect');
 var ReactTypeOfWork = require('ReactTypeOfWork');
 
@@ -53,11 +52,6 @@ const {
   createFiberFromPortal,
 } = ReactFiber;
 
-const {
-  createReifiedYield,
-  createUpdatedReifiedYield,
-} = ReactReifiedYield;
-
 const isArray = Array.isArray;
 
 const {
@@ -318,21 +312,16 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     yieldNode : ReactYield,
     priority : PriorityLevel
   ) : Fiber {
-    // TODO: Should this also compare continuation to determine whether to reuse?
     if (current == null || current.tag !== YieldComponent) {
       // Insert
-      const reifiedYield = createReifiedYield(yieldNode);
       const created = createFiberFromYield(yieldNode, priority);
-      created.type = reifiedYield;
+      created.type = yieldNode.value;
       created.return = returnFiber;
       return created;
     } else {
       // Move based on index
       const existing = useFiber(current, priority);
-      existing.type = createUpdatedReifiedYield(
-        current.type,
-        yieldNode
-      );
+      existing.type = yieldNode.value;
       existing.return = returnFiber;
       return existing;
     }
@@ -413,9 +402,8 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
         }
 
         case REACT_YIELD_TYPE: {
-          const reifiedYield = createReifiedYield(newChild);
           const created = createFiberFromYield(newChild, priority);
-          created.type = reifiedYield;
+          created.type = newChild.value;
           created.return = returnFiber;
           return created;
         }
@@ -476,7 +464,10 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
         }
 
         case REACT_YIELD_TYPE: {
-          if (newChild.key === key) {
+          // Yields doesn't have keys. If the previous node is implicitly keyed
+          // we can continue to replace it without aborting even if it is not a
+          // yield.
+          if (key === null) {
             return updateYield(returnFiber, oldFiber, newChild, priority);
           } else {
             return null;
@@ -529,9 +520,9 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
         }
 
         case REACT_YIELD_TYPE: {
-          const matchedFiber = existingChildren.get(
-            newChild.key === null ? newIdx : newChild.key
-          ) || null;
+          // Yields doesn't have keys, so we neither have to check the old nor
+          // new node for the key. If both are yields, they match.
+          const matchedFiber = existingChildren.get(newIdx) || null;
           return updateYield(returnFiber, matchedFiber, newChild, priority);
         }
 
@@ -563,7 +554,6 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
       switch (child.$$typeof) {
         case REACT_ELEMENT_TYPE:
         case REACT_COROUTINE_TYPE:
-        case REACT_YIELD_TYPE:
         case REACT_PORTAL_TYPE:
           const key = child.key;
           if (typeof key !== 'string') {
@@ -1021,34 +1011,22 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     yieldNode : ReactYield,
     priority : PriorityLevel
   ) : Fiber {
-    const key = yieldNode.key;
+    // There's no need to check for keys on yields since they're stateless.
     let child = currentFirstChild;
-    while (child) {
-      // TODO: If key === null and child.key === null, then this only applies to
-      // the first item in the list.
-      if (child.key === key) {
-        if (child.tag === YieldComponent) {
-          deleteRemainingChildren(returnFiber, child.sibling);
-          const existing = useFiber(child, priority);
-          existing.type = createUpdatedReifiedYield(
-            child.type,
-            yieldNode
-          );
-          existing.return = returnFiber;
-          return existing;
-        } else {
-          deleteRemainingChildren(returnFiber, child);
-          break;
-        }
+    if (child) {
+      if (child.tag === YieldComponent) {
+        deleteRemainingChildren(returnFiber, child.sibling);
+        const existing = useFiber(child, priority);
+        existing.type = yieldNode.value;
+        existing.return = returnFiber;
+        return existing;
       } else {
-        deleteChild(returnFiber, child);
+        deleteRemainingChildren(returnFiber, child);
       }
-      child = child.sibling;
     }
 
-    const reifiedYield = createReifiedYield(yieldNode);
     const created = createFiberFromYield(yieldNode, priority);
-    created.type = reifiedYield;
+    created.type = yieldNode.value;
     created.return = returnFiber;
     return created;
   }

src/renderers/shared/fiber/ReactFiber.js

@@ -393,8 +393,7 @@ exports.createFiberFromCoroutine = function(coroutine : ReactCoroutine, priority
 };
 
 exports.createFiberFromYield = function(yieldNode : ReactYield, priorityLevel : PriorityLevel) : Fiber {
-  const fiber = createFiber(YieldComponent, yieldNode.key);
-  fiber.pendingProps = {};
+  const fiber = createFiber(YieldComponent, null);
   return fiber;
 };
 

src/renderers/shared/fiber/ReactFiberCompleteWork.js

@@ -17,7 +17,6 @@ import type { Fiber } from 'ReactFiber';
 import type { HostContext } from 'ReactFiberHostContext';
 import type { FiberRoot } from 'ReactFiberRoot';
 import type { HostConfig } from 'ReactFiberReconciler';
-import type { ReifiedYield } from 'ReactReifiedYield';
 
 var { reconcileChildFibers } = require('ReactChildFiber');
 var {
@@ -84,7 +83,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     workInProgress.effectTag |= Update;
   }
 
-  function appendAllYields(yields : Array<ReifiedYield>, workInProgress : Fiber) {
+  function appendAllYields(yields : Array<mixed>, workInProgress : Fiber) {
     let node = workInProgress.stateNode;
     while (node) {
       if (node.tag === HostComponent || node.tag === HostText ||
@@ -128,7 +127,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
 
     // Build up the yields.
     // TODO: Compare this to a generator or opaque helpers like Children.
-    var yields : Array<ReifiedYield> = [];
+    var yields : Array<mixed> = [];
     appendAllYields(yields, workInProgress);
     var fn = coroutine.handler;
     var props = coroutine.props;

src/renderers/shared/fiber/ReactReifiedYield.js

@@ -36,8 +36,11 @@ describe('ReactCoroutine', () => {
     function Child({ bar }) {
       ops.push(['Child', bar]);
       return ReactCoroutine.createYield({
-        bar: bar,
-      }, Continuation, null);
+        props: {
+          bar: bar,
+        },
+        continuation: Continuation,
+      });
     }
 
     function Indirection() {
@@ -100,7 +103,7 @@ describe('ReactCoroutine', () => {
     class Child extends React.Component {
       render() {
         ops.push('Child');
-        return ReactCoroutine.createYield({}, Continuation, null);
+        return ReactCoroutine.createYield(Continuation);
       }
       componentWillUnmount() {
         ops.push('Unmount Child');
@@ -109,7 +112,7 @@ describe('ReactCoroutine', () => {
 
     function HandleYields(props, yields) {
       ops.push('HandleYields');
-      return yields.map(y => <y.continuation />);
+      return yields.map(ContinuationComponent => <ContinuationComponent />);
     }
 
     class Parent extends React.Component {

src/renderers/shared/fiber/__tests__/ReactCoroutine-test.js

@@ -16,30 +16,29 @@ import type { ReactNodeList } from 'ReactTypes';
 
 // The Symbol used to tag the special React types. If there is no native Symbol
 // nor polyfill, then a plain number is used for performance.
-var REACT_COROUTINE_TYPE =
-  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.coroutine')) ||
-  0xeac8;
+var REACT_COROUTINE_TYPE;
+var REACT_YIELD_TYPE;
+if (typeof Symbol === 'function' && Symbol.for) {
+  REACT_COROUTINE_TYPE = Symbol.for('react.coroutine');
+  REACT_YIELD_TYPE = Symbol.for('react.yield');
+} else {
+  REACT_COROUTINE_TYPE = 0xeac8;
+  REACT_YIELD_TYPE = 0xeac9;
+}
 
-var REACT_YIELD_TYPE =
-  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.yield')) ||
-  0xeac9;
-
-type ReifiedYield = { continuation: Object, props: Object };
-type CoroutineHandler<T> = (props: T, yields: Array<ReifiedYield>) => ReactNodeList;
+type CoroutineHandler<T> = (props: T, yields: Array<mixed>) => ReactNodeList;
 
 export type ReactCoroutine = {
   $$typeof: Symbol | number,
   key: null | string,
   children: any,
   // This should be a more specific CoroutineHandler
-  handler: (props: any, yields: Array<ReifiedYield>) => ReactNodeList,
+  handler: (props: any, yields: Array<mixed>) => ReactNodeList,
   props: any,
 };
 export type ReactYield = {
   $$typeof: Symbol | number,
-  key: null | string,
-  props: Object,
-  continuation: mixed
+  value: mixed,
 };
 
 exports.createCoroutine = function<T>(
@@ -68,19 +67,16 @@ exports.createCoroutine = function<T>(
   return coroutine;
 };
 
-exports.createYield = function(props : mixed, continuation : mixed, key : ?string = null) {
+exports.createYield = function(value : mixed) : ReactYield {
   var yieldNode = {
     // This tag allow us to uniquely identify this as a React Yield
     $$typeof: REACT_YIELD_TYPE,
-    key: key == null ? null : '' + key,
-    props: props,
-    continuation: continuation,
+    value: value,
   };
 
   if (__DEV__) {
     // TODO: Add _store property for marking this as validated.
     if (Object.freeze) {
-      Object.freeze(yieldNode.props);
       Object.freeze(yieldNode);
     }
   }