Expose renderToReadableStream in Node

In Node `renderToReadableStream` is currently not exposed, even though Node has supported `ReadableStream` since 18.0.0. Users such as Remix use `renderToPipeableStream` only to immediately turn the `PipeableStream` into a `ReadableStream`. This is unfortunate and causes slowdowns.

This commit exposes `renderToReadableStream` from the Node build of `react-dom/server`.

Additionally this commit changes the `deno` export condition to use the Node build, because there is no reason that Deno users should not be able to use `renderToPipeableStream`, because Deno supports Node's `WriteableStream`.

Author: lucacasonato

packages/react-dom/package.json

@@ -61,7 +61,6 @@
       "react-server": "./server.react-server.js",
       "workerd": "./server.edge.js",
       "bun": "./server.bun.js",
-      "deno": "./server.browser.js",
       "worker": "./server.browser.js",
       "node": "./server.node.js",
       "edge-light": "./server.edge.js",

packages/react-dom/server.node.js

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

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

@@ -56,7 +56,7 @@ function createCancelHandler(request: Request, reason: string) {
   };
 }
 
-type Options = {
+type RenderToPipeableStreamOptions = {
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
@@ -92,7 +92,10 @@ type PipeableStream = {
   pipe<T: Writable>(destination: T): T,
 };
 
-function createRequestImpl(children: ReactNodeList, options: void | Options) {
+function createRequestImpl(
+  children: ReactNodeList,
+  options: void | RenderToPipeableStreamOptions,
+) {
   const resumableState = createResumableState(
     options ? options.identifierPrefix : undefined,
     options ? options.unstable_externalRuntimeSrc : undefined,
@@ -125,7 +128,7 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
 
 function renderToPipeableStream(
   children: ReactNodeList,
-  options?: Options,
+  options?: RenderToPipeableStreamOptions,
 ): PipeableStream {
   const request = createRequestImpl(children, options);
   let hasStartedFlowing = false;
@@ -160,6 +163,120 @@ function renderToPipeableStream(
   };
 }
 
+type RenderToReadableStreamOptions = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  nonce?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  onPostpone?: (reason: string, postponeInfo: PostponeInfo) => void,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  formState?: ReactFormState<any, any> | null,
+  onHeaders?: (headers: Headers) => void,
+  maxHeadersLength?: number,
+};
+
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: RenderToReadableStreamOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.onPostpone : undefined,
+      options ? options.formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function resumeRequestImpl(
   children: ReactNodeList,
   postponedState: PostponedState,
@@ -220,6 +337,7 @@ function resumeToPipeableStream(
 
 export {
   renderToPipeableStream,
+  renderToReadableStream,
   resumeToPipeableStream,
   ReactVersion as version,
 };

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

@@ -7,5 +7,9 @@
  * @flow
  */
 
-export {renderToPipeableStream, version} from './ReactDOMFizzServerNode.js';
+export {
+  renderToPipeableStream,
+  renderToReadableStream,
+  version,
+} from './ReactDOMFizzServerNode.js';
 export {prerenderToNodeStream} from './ReactDOMFizzStaticNode.js';