[Fizz] Implement Legacy renderToString and renderToNodeStream on top of Fizz (#21276)

* Wire up DOM legacy build

* Hack to filter extra comments for testing purposes

* Use string concat in renderToString

I think this might be faster. We could probably use a combination of this
technique in the stream too to lower the overhead.

* Error if we can't complete the root synchronously

Maybe this should always error but in the async forms we can just delay
the stream until it resolves so it does have some useful semantics.

In the synchronous form it's never useful though. I'm mostly adding the
error because we're testing this behavior for renderToString specifically.

* Gate memory leak tests of internals

These tests don't translate as is to the new implementation and have been
ported to the Fizz tests separately.

* Enable Fizz legacy mode in stable

* Add wrapper around the ServerFormatConfig for legacy mode

This ensures that we can inject custom overrides without negatively
affecting the new implementation.

This adds another field for static mark up for example.

* Wrap pushTextInstance to avoid emitting comments for text in static markup

* Don't emit static mark up for completed suspense boundaries

Completed and client rendered boundaries are only marked for the client
to take over.

Pending boundaries are still supported in case you stream non-hydratable
mark up.

* Wire up generateStaticMarkup to static API entry points

* Mark as renderer for stable

This shouldn't affect the FB one ideally but it's done with the same build
so let's hope this works.

Author: sebmarkbage

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);
+}