Defer to the actual ReactDOM for HTML rendering for now

This will need to use a variant of Fizz to do inline SSR in Flight.
However, I don't want to build the whole impl right now but also don't
want to exclude the use case yet. So I outsource it to the existing
renderer. Ofc, this doesn't work with Suspense atm.

Author: sebmarkbage

fixtures/flight-browser/index.html

@@ -18,6 +18,7 @@ <h1>Flight Example</h1>
     </div>
     <script src="../../build/dist/react.development.js"></script>
     <script src="../../build/dist/react-dom.development.js"></script>
+    <script src="../../build/dist/react-dom-server.browser.development.js"></script>
     <script src="../../build/dist/react-dom-unstable-flight-server.browser.development.js"></script>
     <script src="../../build/dist/react-dom-unstable-flight-client.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

packages/react-dom/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -15,15 +15,13 @@ global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/e
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
-let Stream;
 let React;
 let ReactFlightDOMServer;
 let ReactFlightDOMClient;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
-    Stream = require('stream');
     React = require('react');
     ReactFlightDOMServer = require('react-dom/unstable-flight-server.browser');
     ReactFlightDOMClient = require('react-dom/unstable-flight-client');

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

@@ -9,6 +9,8 @@
 
 import {convertStringToBuffer} from 'react-server/src/ReactServerHostConfig';
 
+import ReactDOMServer from 'react-dom/server';
+
 export function formatChunkAsString(type: string, props: Object): string {
   let str = '<' + type + '>';
   if (typeof props.children === 'string') {
@@ -21,3 +23,13 @@ export function formatChunkAsString(type: string, props: Object): string {
 export function formatChunk(type: string, props: Object): Uint8Array {
   return convertStringToBuffer(formatChunkAsString(type, props));
 }
+
+export function renderHostChildrenToString(
+  children: React$Element<any>,
+): string {
+  // TODO: This file is used to actually implement a server renderer
+  // so we can't actually reference the renderer here. Instead, we
+  // should replace this method with a reference to Fizz which
+  // then uses this file to implement the server renderer.
+  return ReactDOMServer.renderToStaticMarkup(children);
+}

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

@@ -40,6 +40,9 @@ const ReactNoopFlightServer = ReactFlightServer({
   formatChunk(type: string, props: Object): Uint8Array {
     return Buffer.from(JSON.stringify({type, props}), 'utf8');
   },
+  renderHostChildrenToString(children: React$Element<any>): string {
+    throw new Error('The noop rendered do not support host components');
+  },
 });
 
 function render(model: ReactModel): Destination {

packages/react-server/src/ReactFlightServer.js

@@ -18,7 +18,7 @@ import {
   close,
   convertStringToBuffer,
 } from './ReactServerHostConfig';
-import {formatChunkAsString} from './ReactServerFormatConfig';
+import {renderHostChildrenToString} from './ReactServerFormatConfig';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 export type ReactModel =
@@ -56,32 +56,6 @@ export function createRequest(
   return {destination, model, completedChunks: [], flowing: false};
 }
 
-function resolveChildToHostFormat(child: ReactJSONValue): string {
-  if (typeof child === 'string') {
-    return child;
-  } else if (typeof child === 'number') {
-    return '' + child;
-  } else if (typeof child === 'boolean' || child === null) {
-    // Booleans are like null when they're React children.
-    return '';
-  } else if (Array.isArray(child)) {
-    return (child: Array<ReactModel>)
-      .map(c => resolveChildToHostFormat(resolveModelToJSON('', c)))
-      .join('');
-  } else {
-    throw new Error('Object models are not valid as children of host nodes.');
-  }
-}
-
-function resolveElementToHostFormat(type: string, props: Object): string {
-  let child = resolveModelToJSON('', props.children);
-  let childString = resolveChildToHostFormat(child);
-  return formatChunkAsString(
-    type,
-    Object.assign({}, props, {children: childString}),
-  );
-}
-
 function resolveModelToJSON(key: string, value: ReactModel): ReactJSONValue {
   while (value && value.$$typeof === REACT_ELEMENT_TYPE) {
     let element: React$Element<any> = (value: any);
@@ -93,7 +67,7 @@ function resolveModelToJSON(key: string, value: ReactModel): ReactJSONValue {
       continue;
     } else if (typeof type === 'string') {
       // This is a host element. E.g. HTML.
-      return resolveElementToHostFormat(type, props);
+      return renderHostChildrenToString(element);
     } else {
       throw new Error('Unsupported type.');
     }

packages/react-server/src/forks/ReactServerFormatConfig.custom.js

@@ -28,3 +28,5 @@ export opaque type Destination = mixed; // eslint-disable-line no-undef
 
 export const formatChunkAsString = $$$hostConfig.formatChunkAsString;
 export const formatChunk = $$$hostConfig.formatChunk;
+export const renderHostChildrenToString =
+  $$$hostConfig.renderHostChildrenToString;

scripts/rollup/bundles.js

@@ -160,14 +160,14 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.browser',
     global: 'ReactDOMFizzServer',
-    externals: ['react'],
+    externals: ['react', 'react-dom/server'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.node',
     global: 'ReactDOMFizzServer',
-    externals: ['react'],
+    externals: ['react', 'react-dom/server'],
   },
 
   /******* React DOM Flight Server *******/
@@ -176,14 +176,14 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom/unstable-flight-server.browser',
     global: 'ReactFlightDOMServer',
-    externals: ['react'],
+    externals: ['react', 'react-dom/server'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
     entry: 'react-dom/unstable-flight-server.node',
     global: 'ReactFlightDOMServer',
-    externals: ['react'],
+    externals: ['react', 'react-dom/server'],
   },
 
   /******* React DOM Flight Client *******/

scripts/rollup/modules.js

@@ -17,12 +17,14 @@ const importSideEffects = Object.freeze({
   'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   scheduler: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'scheduler/tracing': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'react-dom/server': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
 });
 
 // Bundles exporting globals that other modules rely on.
 const knownGlobals = Object.freeze({
   react: 'React',
   'react-dom': 'ReactDOM',
+  'react-dom/server': 'ReactDOMServer',
   'react-interactions/events/keyboard': 'ReactEventsKeyboard',
   'react-interactions/events/tap': 'ReactEventsTap',
   scheduler: 'Scheduler',