Call and Return components should use ReactElement

ReactChildFiber contains lots of branches that do the same thing for
different child types. We can unify them by having more child types be
ReactElements. This requires that the `type` and `key` fields are
sufficient to determine the identity of the child.

The main benefit is decreased file size, especially as we add more
component types, like context providers and consumers.

This updates Call and Return components to use ReactElement. Portals are
left alone for now because their identity includes the host instance.

packages/react-call-return/src/ReactCallReturn.js

@@ -7,25 +7,33 @@
  * @flow
  */
 
-import {REACT_CALL_TYPE, REACT_RETURN_TYPE} from 'shared/ReactSymbols';
+import {
+  REACT_CALL_TYPE,
+  REACT_RETURN_TYPE,
+  REACT_ELEMENT_TYPE,
+} from 'shared/ReactSymbols';
 
 import type {ReactCall, ReactNodeList, ReactReturn} from 'shared/ReactTypes';
 
-type CallHandler<T> = (props: T, returns: Array<mixed>) => ReactNodeList;
+type CallHandler<T, V> = (props: T, returns: Array<V>) => ReactNodeList;
 
-export function unstable_createCall<T>(
-  children: mixed,
-  handler: CallHandler<T>,
+export function unstable_createCall<T, V>(
+  children: ReactNodeList,
+  handler: CallHandler<T, V>,
   props: T,
   key: ?string = null,
-): ReactCall {
+): ReactCall<V> {
   const call = {
     // This tag allow us to uniquely identify this as a React Call
-    $$typeof: REACT_CALL_TYPE,
+    $$typeof: REACT_ELEMENT_TYPE,
+    type: REACT_CALL_TYPE,
     key: key == null ? null : '' + key,
-    children: children,
-    handler: handler,
-    props: props,
+    ref: null,
+    props: {
+      props,
+      handler,
+      children: children,
+    },
   };
 
   if (__DEV__) {
@@ -39,11 +47,16 @@ export function unstable_createCall<T>(
   return call;
 }
 
-export function unstable_createReturn(value: mixed): ReactReturn {
+export function unstable_createReturn<V>(value: V): ReactReturn<V> {
   const returnNode = {
-    // This tag allow us to uniquely identify this as a React Return
-    $$typeof: REACT_RETURN_TYPE,
-    value: value,
+    // This tag allow us to uniquely identify this as a React Call
+    $$typeof: REACT_ELEMENT_TYPE,
+    type: REACT_RETURN_TYPE,
+    key: null,
+    ref: null,
+    props: {
+      value,
+    },
   };
 
   if (__DEV__) {
@@ -63,7 +76,7 @@ export function unstable_isCall(object: mixed): boolean {
   return (
     typeof object === 'object' &&
     object !== null &&
-    object.$$typeof === REACT_CALL_TYPE
+    object.type === REACT_CALL_TYPE
   );
 }
 
@@ -74,7 +87,7 @@ export function unstable_isReturn(object: mixed): boolean {
   return (
     typeof object === 'object' &&
     object !== null &&
-    object.$$typeof === REACT_RETURN_TYPE
+    object.type === REACT_RETURN_TYPE
   );
 }
 

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -621,11 +621,6 @@ class ReactDOMServerRenderer {
             'Portals are not currently supported by the server renderer. ' +
               'Render them conditionally so that they only appear on the client render.',
           );
-          invariant(
-            $$typeof !== REACT_CALL_TYPE && $$typeof !== REACT_RETURN_TYPE,
-            'The experimental Call and Return types are not currently ' +
-              'supported by the server renderer.',
-          );
           // Catch-all to prevent an infinite loop if React.Children.toArray() supports some new type.
           invariant(
             false,
@@ -678,6 +673,12 @@ class ReactDOMServerRenderer {
     context: Object,
     parentNamespace: string,
   ): string {
+    invariant(
+      element.type !== REACT_CALL_TYPE && element.type !== REACT_RETURN_TYPE,
+      'The experimental Call and Return types are not currently ' +
+        'supported by the server renderer.',
+    );
+
     const tag = element.type.toLowerCase();
 
     let namespace = parentNamespace;