[Fizz/Flight] pipeToNodeWritable(..., writable).startWriting() -> renderToPipeableStream(...).pipe(writable) (#22450)

* Rename pipeToNodeWritable to renderToNodePipe

* Add startWriting API to Flight

We don't really need it in this case because there's way less reason to
delay the stream in Flight.

* Pass the destination to startWriting instead of renderToNode

* Rename startWriting to pipe

This mirrors the ReadableStream API in Node

* Error codes

* Rename to renderToPipeableStream

This mimics the renderToReadableStream API for the browser.

Author: sebmarkbage

fixtures/flight/server/handler.server.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
+const {renderToPipeableStream} = require('react-server-dom-webpack/writer');
 const {readFile} = require('fs');
 const {resolve} = require('path');
 const React = require('react');
@@ -20,7 +20,11 @@ module.exports = function(req, res) {
         const App = m.default.default || m.default;
         res.setHeader('Access-Control-Allow-Origin', '*');
         const moduleMap = JSON.parse(data);
-        pipeToNodeWritable(React.createElement(App), res, moduleMap);
+        const {pipe} = renderToPipeableStream(
+          React.createElement(App),
+          moduleMap
+        );
+        pipe(res);
       }
     );
   });

fixtures/ssr/server/render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {pipeToNodeWritable} from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
 
 import App from '../src/components/App';
 
@@ -20,22 +20,18 @@ export default function render(url, res) {
     console.error('Fatal', error);
   });
   let didError = false;
-  const {startWriting, abort} = pipeToNodeWritable(
-    <App assets={assets} />,
-    res,
-    {
-      onCompleteShell() {
-        // If something errored before we started streaming, we set the error code appropriately.
-        res.statusCode = didError ? 500 : 200;
-        res.setHeader('Content-type', 'text/html');
-        startWriting();
-      },
-      onError(x) {
-        didError = true;
-        console.error(x);
-      },
-    }
-  );
+  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    onCompleteShell() {
+      // If something errored before we started streaming, we set the error code appropriately.
+      res.statusCode = didError ? 500 : 200;
+      res.setHeader('Content-type', 'text/html');
+      pipe(res);
+    },
+    onError(x) {
+      didError = true;
+      console.error(x);
+    },
+  });
   // Abandon and switch to client rendering after 5 seconds.
   // Try lowering this to see the client recover.
   setTimeout(abort, 5000);

fixtures/ssr2/server/render.js

@@ -8,7 +8,7 @@
 
 import * as React from 'react';
 // import {renderToString} from 'react-dom/server';
-import {pipeToNodeWritable} from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
 import App from '../src/App';
 import {DataProvider} from '../src/data';
 import {API_DELAY, ABORT_DELAY} from './delays';
@@ -37,17 +37,16 @@ module.exports = function render(url, res) {
   });
   let didError = false;
   const data = createServerData();
-  const {startWriting, abort} = pipeToNodeWritable(
+  const {pipe, abort} = renderToPipeableStream(
     <DataProvider data={data}>
       <App assets={assets} />
     </DataProvider>,
-    res,
     {
       onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
-        startWriting();
+        pipe(res);
       },
       onError(x) {
         didError = true;

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

@@ -14,4 +14,4 @@ exports.renderToString = l.renderToString;
 exports.renderToStaticMarkup = l.renderToStaticMarkup;
 exports.renderToNodeStream = l.renderToNodeStream;
 exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
-exports.pipeToNodeWritable = s.pipeToNodeWritable;
+exports.renderToPipeableStream = s.renderToPipeableStream;

packages/react-dom/server.node.js

@@ -36,8 +36,8 @@ export function renderToStaticNodeStream() {
   );
 }
 
-export function pipeToNodeWritable() {
-  return require('./src/server/ReactDOMFizzServerNode').pipeToNodeWritable.apply(
+export function renderToPipeableStream() {
+  return require('./src/server/ReactDOMFizzServerNode').renderToPipeableStream.apply(
     this,
     arguments,
   );