Split out Edge and Node implementations of the Flight Client

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

packages/react-server-dom-webpack/package.json

@@ -64,7 +64,7 @@
     "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
     "./server.node.unbundled": "./server.node.unbundled.js",
-    "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
+    "./node-loader": "./esm/react-server-dom-webpack-node-loader.production.min.js",
     "./node-register": "./node-register.js",
     "./src/*": "./src/*",
     "./package.json": "./package.json"

packages/react-server-dom-webpack/src/ReactFlightClientNodeBundlerConfig.js

@@ -0,0 +1,98 @@
+/**
+ * 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 type {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+export type WebpackSSRMap = {
+  [clientId: string]: {
+    [clientExportName: string]: ClientReference<any>,
+  },
+};
+
+export type BundlerConfig = WebpackSSRMap;
+
+export opaque type ClientReferenceMetadata = {
+  id: string,
+  chunks: Array<string>,
+  name: string,
+  async: boolean,
+};
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = {
+  specifier: string,
+  name: string,
+};
+
+export function resolveClientReference<T>(
+  bundlerConfig: BundlerConfig,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  const resolvedModuleData = bundlerConfig[metadata.id][metadata.name];
+  return resolvedModuleData;
+}
+
+const asyncModuleCache: Map<string, Thenable<any>> = new Map();
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  const existingPromise = asyncModuleCache.get(metadata.specifier);
+  if (existingPromise) {
+    if (existingPromise.status === 'fulfilled') {
+      return null;
+    }
+    return existingPromise;
+  } else {
+    // $FlowFixMe[unsupported-syntax]
+    const modulePromise: Thenable<T> = import(metadata.specifier);
+    modulePromise.then(
+      value => {
+        const fulfilledThenable: FulfilledThenable<mixed> =
+          (modulePromise: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      },
+      reason => {
+        const rejectedThenable: RejectedThenable<mixed> = (modulePromise: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = reason;
+      },
+    );
+    asyncModuleCache.set(metadata.specifier, modulePromise);
+    return modulePromise;
+  }
+}
+
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  let moduleExports;
+  // We assume that preloadModule has been called before, which
+  // should have added something to the module cache.
+  const promise: any = asyncModuleCache.get(metadata.specifier);
+  if (promise.status === 'fulfilled') {
+    moduleExports = promise.value;
+  } else {
+    throw promise.reason;
+  }
+  if (metadata.name === '*') {
+    // This is a placeholder value that represents that the caller imported this
+    // as a CommonJS module as is.
+    return moduleExports;
+  }
+  if (metadata.name === '') {
+    // This is a placeholder value that represents that the caller accessed the
+    // default property of this if it was an ESM interop module.
+    return moduleExports.default;
+  }
+  return moduleExports[metadata.name];
+}

packages/react-server-dom-webpack/src/ReactFlightDOMClient.js → packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js

@@ -11,8 +11,6 @@ import type {Thenable} from 'shared/ReactTypes.js';
 
 import type {Response as FlightResponse} from 'react-client/src/ReactFlightClientStream';
 
-import type {BundlerConfig} from './ReactFlightClientWebpackBundlerConfig';
-
 import {
   createResponse,
   getRoot,
@@ -28,10 +26,16 @@ type CallServerCallback = <A, T>(
 ) => Promise<T>;
 
 export type Options = {
-  moduleMap?: BundlerConfig,
   callServer?: CallServerCallback,
 };
 
+function createResponseFromOptions(options: void | Options) {
+  return createResponse(
+    null,
+    options && options.callServer ? options.callServer : undefined,
+  );
+}
+
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
@@ -63,10 +67,7 @@ function createFromReadableStream<T>(
   stream: ReadableStream,
   options?: Options,
 ): Thenable<T> {
-  const response: FlightResponse = createResponse(
-    options && options.moduleMap ? options.moduleMap : null,
-    options && options.callServer ? options.callServer : undefined,
-  );
+  const response: FlightResponse = createResponseFromOptions(options);
   startReadingFromStream(response, stream);
   return getRoot(response);
 }
@@ -75,10 +76,7 @@ function createFromFetch<T>(
   promiseForResponse: Promise<Response>,
   options?: Options,
 ): Thenable<T> {
-  const response: FlightResponse = createResponse(
-    options && options.moduleMap ? options.moduleMap : null,
-    options && options.callServer ? options.callServer : undefined,
-  );
+  const response: FlightResponse = createResponseFromOptions(options);
   promiseForResponse.then(
     function (r) {
       startReadingFromStream(response, (r.body: any));
@@ -94,10 +92,7 @@ function createFromXHR<T>(
   request: XMLHttpRequest,
   options?: Options,
 ): Thenable<T> {
-  const response: FlightResponse = createResponse(
-    options && options.moduleMap ? options.moduleMap : null,
-    options && options.callServer ? options.callServer : undefined,
-  );
+  const response: FlightResponse = createResponseFromOptions(options);
   let processedLength = 0;
   function progress(e: ProgressEvent): void {
     const chunk = request.responseText;

packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js

@@ -0,0 +1,95 @@
+/**
+ * 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 type {Thenable} from 'shared/ReactTypes.js';
+
+import type {Response as FlightResponse} from 'react-client/src/ReactFlightClientStream';
+
+import type {BundlerConfig} from './ReactFlightClientWebpackBundlerConfig';
+
+import {
+  createResponse,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClientStream';
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+export type Options = {
+  moduleMap?: BundlerConfig,
+};
+
+function createResponseFromOptions(options: void | Options) {
+  return createResponse(
+    options && options.moduleMap ? options.moduleMap : null,
+    noServerCall,
+  );
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      close(response);
+      return;
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  startReadingFromStream(response, stream);
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      startReadingFromStream(response, (r.body: any));
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+export {createFromFetch, createFromReadableStream};