Split out Edge and Node implementations of the Flight Client (facebook#26187)

This splits out the Edge and Node implementations of Flight Client into
their own implementations. The Node implementation now takes a Node
Stream as input.

I removed the bundler config from the Browser variant because you're
never supposed to use that in the browser since it's only for SSR.
Similarly, it's required on the server. This also enables generating a
SSR manifest from the Webpack plugin. This is necessary for SSR so that
you can reverse look up what a client module is called on the server.

I also removed the option to pass a callServer from the server. We might
want to add it back in the future but basically, we don't recommend
calling Server Functions from render for initial render because if that
happened client-side it would be a client-side waterfall. If it's never
called in initial render, then it also shouldn't ever happen during SSR.
This might be considered too restrictive.

~This also compiles the unbundled packages as ESM. This isn't strictly
necessary because we only need access to dynamic import to load the
modules but we don't have any other build options that leave
`import(...)` intact, and seems appropriate that this would also be an
ESM module.~ Went with `import(...)` in CJS instead.

Author: sebmarkbage

fixtures/flight/loader/index.js

@@ -23,8 +23,17 @@ async function babelLoad(url, context, defaultLoad) {
   const result = await defaultLoad(url, context, defaultLoad);
   if (result.format === 'module') {
     const opt = Object.assign({filename: url}, babelOptions);
-    const {code} = await babel.transformAsync(result.source, opt);
-    return {source: code, format: 'module'};
+    const newResult = await babel.transformAsync(result.source, opt);
+    if (!newResult) {
+      if (typeof result.source === 'string') {
+        return result;
+      }
+      return {
+        source: Buffer.from(result.source).toString('utf8'),
+        format: 'module',
+      };
+    }
+    return {source: newResult.code, format: 'module'};
   }
   return defaultLoad(url, context, defaultLoad);
 }
@@ -39,8 +48,16 @@ async function babelTransformSource(source, context, defaultTransformSource) {
   const {format} = context;
   if (format === 'module') {
     const opt = Object.assign({filename: context.url}, babelOptions);
-    const {code} = await babel.transformAsync(source, opt);
-    return {source: code};
+    const newResult = await babel.transformAsync(source, opt);
+    if (!newResult) {
+      if (typeof source === 'string') {
+        return {source};
+      }
+      return {
+        source: Buffer.from(source).toString('utf8'),
+      };
+    }
+    return {source: newResult.code};
   }
   return defaultTransformSource(source, context, defaultTransformSource);
 }

fixtures/flight/server/handler.js

@@ -1,11 +1,13 @@
 'use strict';
 
-const {renderToPipeableStream} = require('react-server-dom-webpack/server');
 const {readFile} = require('fs').promises;
 const {resolve} = require('path');
 const React = require('react');
 
 module.exports = async function (req, res) {
+  const {renderToPipeableStream} = await import(
+    'react-server-dom-webpack/server'
+  );
   switch (req.method) {
     case 'POST': {
       const serverReference = JSON.parse(req.get('rsc-action'));

packages/react-client/src/ReactFlightClientHostConfigNode.js

@@ -0,0 +1,34 @@
+/**
+ * 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
+ */
+
+import {TextDecoder} from 'util';
+
+export type StringDecoder = TextDecoder;
+
+export const supportsBinaryStreams = true;
+
+export function createStringDecoder(): StringDecoder {
+  return new TextDecoder();
+}
+
+const decoderOptions = {stream: true};
+
+export function readPartialStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  return decoder.decode(buffer, decoderOptions);
+}
+
+export function readFinalStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  return decoder.decode(buffer);
+}

packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js

@@ -7,6 +7,6 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigNode';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
 export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';

packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node.js

@@ -7,6 +7,6 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigNode';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
-export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig';

packages/react-server-dom-webpack/client.browser.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClient';
+export * from './src/ReactFlightDOMClientBrowser';

packages/react-server-dom-webpack/client.edge.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClient';
+export * from './src/ReactFlightDOMClientEdge';

packages/react-server-dom-webpack/client.node.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClient';
+export * from './src/ReactFlightDOMClientNode';

packages/react-server-dom-webpack/client.node.unbundled.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClient';
+export * from './src/ReactFlightDOMClientNode';