[pull] main from facebook:main

fixtures/flight/src/App.js

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import {renderToPipeableStream} from 'react-server-dom-webpack/server';
+import {createFromNodeStream} from 'react-server-dom-webpack/client';
+import {PassThrough, Readable} from 'stream';
 
 import Container from './Container.js';
 
@@ -35,8 +38,50 @@ async function Bar({children}) {
   return <div>{children}</div>;
 }
 
+async function ThirdPartyComponent() {
+  return new Promise(resolve =>
+    setTimeout(() => resolve('hello from a 3rd party'), 30)
+  );
+}
+
+// Using Web streams for tee'ing convenience here.
+let cachedThirdPartyReadableWeb;
+
+function fetchThirdParty(Component) {
+  if (cachedThirdPartyReadableWeb) {
+    const [readableWeb1, readableWeb2] = cachedThirdPartyReadableWeb.tee();
+    cachedThirdPartyReadableWeb = readableWeb1;
+
+    return createFromNodeStream(Readable.fromWeb(readableWeb2), {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+  }
+
+  const stream = renderToPipeableStream(
+    <ThirdPartyComponent />,
+    {},
+    {environmentName: 'third-party'}
+  );
+
+  const readable = new PassThrough();
+  // React currently only supports piping to one stream, so we convert, tee, and
+  // convert back again.
+  // TODO: Switch to web streams without converting when #33442 has landed.
+  const [readableWeb1, readableWeb2] = Readable.toWeb(readable).tee();
+  cachedThirdPartyReadableWeb = readableWeb1;
+  const result = createFromNodeStream(Readable.fromWeb(readableWeb2), {
+    moduleMap: {},
+    moduleLoading: {},
+  });
+  stream.pipe(readable);
+
+  return result;
+}
+
 async function ServerComponent() {
   await new Promise(resolve => setTimeout(() => resolve('deferred text'), 50));
+  return await fetchThirdParty();
 }
 
 export default async function App({prerender}) {

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webstreams.js

@@ -0,0 +1,18 @@
+/**
+ * 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 {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

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';