Add Fragment as a named export to React

packages/react-noop-renderer/src/ReactNoop.js

@@ -513,7 +513,8 @@ var ReactNoop = {
       log(
         '  '.repeat(depth) +
           '- ' +
-          (fiber.type ? fiber.type.name || fiber.type : '[root]'),
+          // need to explicitly coerce Symbol to a string
+          (fiber.type ? fiber.type.name || fiber.type.toString() : '[root]'),
         '[' + fiber.expirationTime + (fiber.pendingProps ? '*' : '') + ']',
       );
       if (fiber.updateQueue) {

packages/react-reconciler/src/ReactChildFiber.js

@@ -102,6 +102,11 @@ const FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
 const REACT_ELEMENT_TYPE =
   (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
   0xeac7;
+const REACT_FRAGMENT_TYPE =
+  (typeof Symbol === 'function' &&
+    Symbol.for &&
+    Symbol.for('react.fragment')) ||
+  0xeacb;
 
 function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
   if (maybeIterable === null || typeof maybeIterable === 'undefined') {
@@ -375,27 +380,35 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     element: ReactElement,
     expirationTime: ExpirationTime,
   ): Fiber {
-    if (current === null || current.type !== element.type) {
-      // Insert
-      const created = createFiberFromElement(
-        element,
-        returnFiber.internalContextTag,
-        expirationTime,
-      );
-      created.ref = coerceRef(current, element);
-      created.return = returnFiber;
-      return created;
-    } else {
+    // TODO: Split these into branches based on typeof type
+    if (
+      current !== null &&
+      (current.tag === Fragment
+        ? element.type === REACT_FRAGMENT_TYPE
+        : current.type === element.type)
+    ) {
       // Move based on index
       const existing = useFiber(current, expirationTime);
       existing.ref = coerceRef(current, element);
-      existing.pendingProps = element.props;
+      existing.pendingProps = element.type === REACT_FRAGMENT_TYPE
+        ? element.props.children
+        : element.props;
       existing.return = returnFiber;
       if (__DEV__) {
         existing._debugSource = element._source;
         existing._debugOwner = element._owner;
       }
       return existing;
+    } else {
+      // Insert
+      const created = createFiberFromElement(
+        element,
+        returnFiber.internalContextTag,
+        expirationTime,
+      );
+      created.ref = coerceRef(current, element);
+      created.return = returnFiber;
+      return created;
     }
   }
 
@@ -483,13 +496,15 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     current: Fiber | null,
     fragment: Iterable<*>,
     expirationTime: ExpirationTime,
+    key: null | string,
   ): Fiber {
     if (current === null || current.tag !== Fragment) {
       // Insert
       const created = createFiberFromFragment(
         fragment,
         returnFiber.internalContextTag,
         expirationTime,
+        key,
       );
       created.return = returnFiber;
       return created;
@@ -570,6 +585,7 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
           newChild,
           returnFiber.internalContextTag,
           expirationTime,
+          null,
         );
         created.return = returnFiber;
         return created;
@@ -616,6 +632,15 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE: {
           if (newChild.key === key) {
+            if (newChild.type === REACT_FRAGMENT_TYPE) {
+              return updateFragment(
+                returnFiber,
+                oldFiber,
+                newChild.props.children,
+                expirationTime,
+                key,
+              );
+            }
             return updateElement(
               returnFiber,
               oldFiber,
@@ -666,12 +691,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
       }
 
       if (isArray(newChild) || getIteratorFn(newChild)) {
-        // Fragments don't have keys so if the previous key is implicit we can
-        // update it.
-        if (key !== null) {
-          return null;
-        }
-        return updateFragment(returnFiber, oldFiber, newChild, expirationTime);
+        return updateFragment(
+          returnFiber,
+          oldFiber,
+          newChild,
+          expirationTime,
+          key,
+        );
       }
 
       throwOnInvalidObjectType(returnFiber, newChild);
@@ -712,6 +738,15 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
             existingChildren.get(
               newChild.key === null ? newIdx : newChild.key,
             ) || null;
+          if (newChild.type === REACT_FRAGMENT_TYPE) {
+            return updateFragment(
+              returnFiber,
+              matchedFiber,
+              newChild.props.children,
+              expirationTime,
+              newChild.key,
+            );
+          }
           return updateElement(
             returnFiber,
             matchedFiber,
@@ -766,6 +801,7 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
           matchedFiber,
           newChild,
           expirationTime,
+          null,
         );
       }
 
@@ -1203,11 +1239,18 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
       // 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.type === element.type) {
+        // TODO: Split these into branches based on typeof type
+        if (
+          child.tag === Fragment
+            ? element.type === REACT_FRAGMENT_TYPE
+            : child.type === element.type
+        ) {
           deleteRemainingChildren(returnFiber, child.sibling);
           const existing = useFiber(child, expirationTime);
           existing.ref = coerceRef(child, element);
-          existing.pendingProps = element.props;
+          existing.pendingProps = element.type === REACT_FRAGMENT_TYPE
+            ? element.props.children
+            : element.props;
           existing.return = returnFiber;
           if (__DEV__) {
             existing._debugSource = element._source;
@@ -1342,9 +1385,140 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     return created;
   }
 
+  // A fork of reconcileChildFibers to be used when reconcileChildFibers
+  // encounters a top level fragment to treat it as a set of children.
+  // This function is not recursive.
+  function reconcileChildFibersForTopLevelFragment(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChild: any,
+    expirationTime: ExpirationTime,
+  ): Fiber | null {
+    // This function is not recursive.
+    // If the top level item is an array, we treat it as a set of children,
+    // not as a fragment. Nested arrays on the other hand will be treated as
+    // fragment nodes. Recursion happens at the normal flow.
+
+    // Handle object types
+    const isObject = typeof newChild === 'object' && newChild !== null;
+    if (isObject) {
+      switch (newChild.$$typeof) {
+        case REACT_ELEMENT_TYPE:
+          return placeSingleChild(
+            reconcileSingleElement(
+              returnFiber,
+              currentFirstChild,
+              newChild,
+              expirationTime,
+            ),
+          );
+        case REACT_COROUTINE_TYPE:
+          return placeSingleChild(
+            reconcileSingleCoroutine(
+              returnFiber,
+              currentFirstChild,
+              newChild,
+              expirationTime,
+            ),
+          );
+        case REACT_YIELD_TYPE:
+          return placeSingleChild(
+            reconcileSingleYield(
+              returnFiber,
+              currentFirstChild,
+              newChild,
+              expirationTime,
+            ),
+          );
+        case REACT_PORTAL_TYPE:
+          return placeSingleChild(
+            reconcileSinglePortal(
+              returnFiber,
+              currentFirstChild,
+              newChild,
+              expirationTime,
+            ),
+          );
+      }
+    }
+
+    if (typeof newChild === 'string' || typeof newChild === 'number') {
+      return placeSingleChild(
+        reconcileSingleTextNode(
+          returnFiber,
+          currentFirstChild,
+          '' + newChild,
+          expirationTime,
+        ),
+      );
+    }
+
+    if (isArray(newChild)) {
+      return reconcileChildrenArray(
+        returnFiber,
+        currentFirstChild,
+        newChild,
+        expirationTime,
+      );
+    }
+
+    if (getIteratorFn(newChild)) {
+      return reconcileChildrenIterator(
+        returnFiber,
+        currentFirstChild,
+        newChild,
+        expirationTime,
+      );
+    }
+
+    if (isObject) {
+      throwOnInvalidObjectType(returnFiber, newChild);
+    }
+
+    if (__DEV__) {
+      if (typeof newChild === 'function') {
+        warnOnFunctionType();
+      }
+    }
+    if (typeof newChild === 'undefined') {
+      // If the new child is undefined, and the return fiber is a composite
+      // component, throw an error. If Fiber return types are disabled,
+      // we already threw above.
+      switch (returnFiber.tag) {
+        case ClassComponent: {
+          if (__DEV__) {
+            const instance = returnFiber.stateNode;
+            if (instance.render._isMockFunction) {
+              // We allow auto-mocks to proceed as if they're returning null.
+              break;
+            }
+          }
+        }
+        // Intentionally fall through to the next case, which handles both
+        // functions and classes
+        // eslint-disable-next-lined no-fallthrough
+        case FunctionalComponent: {
+          const Component = returnFiber.type;
+          invariant(
+            false,
+            '%s(...): Nothing was returned from render. This usually means a ' +
+              'return statement is missing. Or, to render nothing, ' +
+              'return null.',
+            Component.displayName || Component.name || 'Component',
+          );
+        }
+      }
+    }
+
+    // Remaining cases are all treated as empty.
+    return deleteRemainingChildren(returnFiber, currentFirstChild);
+  }
+
   // This API will tag the children with the side-effect of the reconciliation
   // itself. They will be added to the side-effect list as we pass through the
   // children and the parent.
+  // This function is forked at reconcileChildFibersForTopLevelFragment
+  // Please reflect changes in this function to its fork as well
   function reconcileChildFibers(
     returnFiber: Fiber,
     currentFirstChild: Fiber | null,
@@ -1361,6 +1535,17 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     if (isObject) {
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE:
+          // This function recurses only on a top-level fragment,
+          // so that it is treated as a set of children
+          // Otherwise, we follow the normal flow.
+          if (newChild.type === REACT_FRAGMENT_TYPE && newChild.key === null) {
+            return reconcileChildFibersForTopLevelFragment(
+              returnFiber,
+              currentFirstChild,
+              newChild.props.children,
+              expirationTime,
+            );
+          }
           return placeSingleChild(
             reconcileSingleElement(
               returnFiber,
@@ -1369,7 +1554,6 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
               expirationTime,
             ),
           );
-
         case REACT_COROUTINE_TYPE:
           return placeSingleChild(
             reconcileSingleCoroutine(
@@ -1388,7 +1572,6 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
               expirationTime,
             ),
           );
-
         case REACT_PORTAL_TYPE:
           return placeSingleChild(
             reconcileSinglePortal(