Add Node Web Streams bundle for SSR

Author: sebmarkbage

packages/react-dom/npm/server.node.js

@@ -1,12 +1,14 @@
 'use strict';
 
-var l, s;
+var l, s, w;
 if (process.env.NODE_ENV === 'production') {
   l = require('./cjs/react-dom-server-legacy.node.production.js');
   s = require('./cjs/react-dom-server.node.production.js');
+  w = require('./cjs/react-dom-server.node-webstreams.production.js');
 } else {
   l = require('./cjs/react-dom-server-legacy.node.development.js');
   s = require('./cjs/react-dom-server.node.development.js');
+  w = require('./cjs/react-dom-server.node-webstreams.development.js');
 }
 
 exports.version = l.version;
@@ -16,3 +18,7 @@ exports.renderToPipeableStream = s.renderToPipeableStream;
 if (s.resumeToPipeableStream) {
   exports.resumeToPipeableStream = s.resumeToPipeableStream;
 }
+exports.renderToReadableStream = w.renderToReadableStream;
+if (w.resume) {
+  exports.resume = w.resume;
+}

packages/react-dom/npm/static.node.js

@@ -1,12 +1,16 @@
 'use strict';
 
-var s;
+var s, w;
 if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-dom-server.node.production.js');
+  w = require('./cjs/react-dom-server.node-webstreams.production.js');
 } else {
   s = require('./cjs/react-dom-server.node.development.js');
+  w = require('./cjs/react-dom-server.node-webstreams.development.js');
 }
 
 exports.version = s.version;
 exports.prerenderToNodeStream = s.prerenderToNodeStream;
 exports.resumeAndPrerenderToNodeStream = s.resumeAndPrerenderToNodeStream;
+exports.prerender = w.prerender;
+exports.resumeAndPrerender = w.resumeAndPrerender;

packages/react-dom/server.node.js

@@ -37,3 +37,17 @@ export function resumeToPipeableStream() {
     arguments,
   );
 }
+
+export function renderToReadableStream() {
+  return require('./src/server/react-dom-server.node-webstreams').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resume() {
+  return require('./src/server/react-dom-server.node-webstreams').resume.apply(
+    this,
+    arguments,
+  );
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactDOMFizzServer;
+
+describe('ReactDOMFizzServerNodeWebStreams', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useRealTimers();
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server.node');
+  });
+
+  async function readResult(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  it('should call renderToPipeableStream', async () => {
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>hello world</div>,
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+});

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

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+import {
+  getVisibleChildren,
+  insertNodesAndExecuteScripts,
+} from '../test-utils/FizzTestUtils';
+
+let JSDOM;
+let React;
+let ReactDOMFizzServer;
+let ReactDOMFizzStatic;
+let Suspense;
+let container;
+let serverAct;
+
+describe('ReactDOMFizzStaticNodeWebStreams', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    serverAct = require('internal-test-utils').serverAct;
+
+    JSDOM = require('jsdom').JSDOM;
+
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server.node');
+    ReactDOMFizzStatic = require('react-dom/static.node');
+    Suspense = React.Suspense;
+
+    const jsdom = new JSDOM(
+      // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+      '<script>window.requestAnimationFrame = setTimeout;</script>',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    global.window = jsdom.window;
+    global.document = jsdom.window.document;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function readContent(stream) {
+    const reader = stream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return content;
+      }
+      content += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    await insertNodesAndExecuteScripts(temp, container, null);
+    jest.runAllTimers();
+  }
+
+  it('should call prerender', async () => {
+    const result = await serverAct(() =>
+      ReactDOMFizzStatic.prerender(<div>hello world</div>),
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  // @gate enableHalt
+  it('can resume render of a prerender', async () => {
+    const errors = [];
+
+    let resolveA;
+    const promiseA = new Promise(r => (resolveA = r));
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+
+    async function ComponentA() {
+      await promiseA;
+      return (
+        <Suspense fallback="Loading B">
+          <ComponentB />
+        </Suspense>
+      );
+    }
+
+    async function ComponentB() {
+      await promiseB;
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading A">
+            <ComponentA />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const controller = new AbortController();
+    let pendingResult;
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      });
+    });
+
+    controller.abort();
+    const prerendered = await pendingResult;
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    await readIntoContainer(prerendered.prelude);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading A</div>);
+
+    await resolveA();
+
+    expect(prerendered.postponed).not.toBe(null);
+
+    const controller2 = new AbortController();
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.resumeAndPrerender(
+        <App />,
+        JSON.parse(postponedState),
+        {
+          signal: controller2.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      );
+    });
+
+    controller2.abort();
+
+    const prerendered2 = await pendingResult;
+    const postponedState2 = JSON.stringify(prerendered2.postponed);
+
+    await readIntoContainer(prerendered2.prelude);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading B</div>);
+
+    await resolveB();
+
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState2)),
+    );
+
+    await readIntoContainer(dynamic);
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+});

packages/react-dom/src/server/react-dom-server.node-webstreams.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFizzServerEdge.js';
+export {prerender, resumeAndPrerender} from './ReactDOMFizzStaticEdge.js';

packages/react-dom/src/server/react-dom-server.node-webstreams.stable.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {renderToReadableStream, version} from './ReactDOMFizzServerEdge.js';
+export {prerender} from './ReactDOMFizzStaticEdge.js';

packages/react-dom/static.node.js

@@ -3,12 +3,51 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
-export {
-  prerenderToNodeStream,
-  resumeAndPrerenderToNodeStream,
-  version,
-} from './src/server/react-dom-server.node';
+// This file is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function renderToString() {
+  return require('./src/server/ReactDOMLegacyServerNode').renderToString.apply(
+    this,
+    arguments,
+  );
+}
+export function renderToStaticMarkup() {
+  return require('./src/server/ReactDOMLegacyServerNode').renderToStaticMarkup.apply(
+    this,
+    arguments,
+  );
+}
+
+export function prerenderToNodeStream() {
+  return require('./src/server/react-dom-server.node').prerenderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeAndPrerenderToNodeStream() {
+  return require('./src/server/react-dom-server.node').resumeAndPrerenderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function prerender() {
+  return require('./src/server/react-dom-server.node-webstreams').prerender.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeAndPrerender() {
+  return require('./src/server/react-dom-server.node-webstreams').resumeAndPrerender.apply(
+    this,
+    arguments,
+  );
+}