[Fizz] Implement Legacy renderToString and renderToNodeStream on top of Fizz

packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';

packages/react-dom/server.browser.classic.fb.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './src/server/ReactDOMServerBrowser';

packages/react-dom/server.browser.js

@@ -13,4 +13,4 @@ export {
   renderToNodeStream,
   renderToStaticNodeStream,
   version,
-} from './src/server/ReactDOMServerBrowser';
+} from './src/server/ReactDOMLegacyServerBrowser';

packages/react-dom/server.browser.stable.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './src/server/ReactDOMServerBrowser';

packages/react-dom/server.node.classic.fb.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// For some reason Flow doesn't like export * in this file. I don't know why.
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './src/server/ReactDOMServerNode';

packages/react-dom/server.node.js

@@ -14,4 +14,4 @@ export {
   renderToNodeStream,
   renderToStaticNodeStream,
   version,
-} from './src/server/ReactDOMServerNode';
+} from './src/server/ReactDOMLegacyServerNode';

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

@@ -487,6 +487,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     // Regression test for https://github.com/facebook/react/issues/14705
+    // @gate !experimental && www
     it('does not pollute later renders when stream destroyed', () => {
       const LoggedInUser = React.createContext('default');
 
@@ -529,6 +530,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     // Regression test for https://github.com/facebook/react/issues/14705
+    // @gate !experimental && www
     it('frees context value reference when stream destroyed', () => {
       const LoggedInUser = React.createContext('default');
 

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

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import ReactVersion from 'shared/ReactVersion';
+import invariant from 'shared/invariant';
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerLegacyFormatConfig';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+function onError() {
+  // Non-fatal errors are ignored.
+}
+
+function renderToStringImpl(
+  children: ReactNodeList,
+  options: void | ServerOptions,
+  generateStaticMarkup: boolean,
+): string {
+  let didFatal = false;
+  let fatalError = null;
+  let result = '';
+  const destination = {
+    push(chunk) {
+      if (chunk !== null) {
+        result += chunk;
+      }
+      return true;
+    },
+    destroy(error) {
+      didFatal = true;
+      fatalError = error;
+    },
+  };
+
+  let readyToStream = false;
+  function onReadyToStream() {
+    readyToStream = true;
+  }
+  const request = createRequest(
+    children,
+    destination,
+    createResponseState(
+      generateStaticMarkup,
+      options ? options.identifierPrefix : undefined,
+    ),
+    createRootFormatContext(undefined),
+    Infinity,
+    onError,
+    undefined,
+    onReadyToStream,
+  );
+  startWork(request);
+  // If anything suspended and is still pending, we'll abort it before writing.
+  // That way we write only client-rendered boundaries from the start.
+  abort(request);
+  startFlowing(request);
+  if (didFatal) {
+    throw fatalError;
+  }
+  invariant(
+    readyToStream,
+    'A React component suspended while rendering, but no fallback UI was specified.\n' +
+      '\n' +
+      'Add a <Suspense fallback=...> component higher in the tree to ' +
+      'provide a loading indicator or placeholder to display.',
+  );
+  return result;
+}
+
+function renderToString(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(children, options, false);
+}
+
+function renderToStaticMarkup(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(children, options, true);
+}
+
+function renderToNodeStream() {
+  invariant(
+    false,
+    'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
+      'in the browser. Use ReactDOMServer.renderToString() instead.',
+  );
+}
+
+function renderToStaticNodeStream() {
+  invariant(
+    false,
+    'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
+      'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
+  );
+}
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  ReactVersion as version,
+};

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

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerLegacyFormatConfig';
+
+import {
+  version,
+  renderToString,
+  renderToStaticMarkup,
+} from './ReactDOMLegacyServerBrowser';
+
+import {Readable} from 'stream';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+class ReactMarkupReadableStream extends Readable {
+  request: Request;
+  startedFlowing: boolean;
+  constructor() {
+    // Calls the stream.Readable(options) constructor. Consider exposing built-in
+    // features like highWaterMark in the future.
+    super({});
+    this.request = (null: any);
+    this.startedFlowing = false;
+  }
+
+  _destroy(err, callback) {
+    abort(this.request);
+    // $FlowFixMe: The type definition for the callback should allow undefined and null.
+    callback(err);
+  }
+
+  _read(size) {
+    if (this.startedFlowing) {
+      startFlowing(this.request);
+    }
+  }
+}
+
+function onError() {
+  // Non-fatal errors are ignored.
+}
+
+function renderToNodeStreamImpl(
+  children: ReactNodeList,
+  options: void | ServerOptions,
+  generateStaticMarkup: boolean,
+): Readable {
+  function onCompleteAll() {
+    // We wait until everything has loaded before starting to write.
+    // That way we only end up with fully resolved HTML even if we suspend.
+    destination.startedFlowing = true;
+    startFlowing(request);
+  }
+  const destination = new ReactMarkupReadableStream();
+  const request = createRequest(
+    children,
+    destination,
+    createResponseState(false, options ? options.identifierPrefix : undefined),
+    createRootFormatContext(undefined),
+    Infinity,
+    onError,
+    onCompleteAll,
+    undefined,
+  );
+  destination.request = request;
+  startWork(request);
+  return destination;
+}
+
+function renderToNodeStream(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): Readable {
+  return renderToNodeStreamImpl(children, options, false);
+}
+
+function renderToStaticNodeStream(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): Readable {
+  return renderToNodeStreamImpl(children, options, true);
+}
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+};

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

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type Destination = {
+  push(chunk: string | null): boolean,
+  destroy(error: Error): mixed,
+  ...
+};
+
+export type PrecomputedChunk = string;
+export type Chunk = string;
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {}
+
+export function beginWriting(destination: Destination) {}
+
+let prevWasCommentSegmenter = false;
+export function writeChunk(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk,
+): boolean {
+  if (prevWasCommentSegmenter) {
+    prevWasCommentSegmenter = false;
+    if (chunk[0] !== '<') {
+      destination.push('<!-- -->');
+    }
+  }
+  if (chunk === '<!-- -->') {
+    prevWasCommentSegmenter = true;
+    return true;
+  }
+  return destination.push(chunk);
+}
+
+export function completeWriting(destination: Destination) {}
+
+export function close(destination: Destination) {
+  destination.push(null);
+}
+
+export function stringToChunk(content: string): Chunk {
+  return content;
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  return content;
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe: This is an Error object or the destination accepts other types.
+  destination.destroy(error);
+}