Integrate changes from facebook/react#26360 (Flight Reply)

Author: unstubbable

package-lock.json

@@ -30,10 +30,10 @@
     "cssnano": "^5.1.15",
     "history": "^5.3.0",
     "htmlescape": "^1.1.1",
-    "react": "18.3.0-next-703c67560-20230307",
-    "react-dom": "18.3.0-next-703c67560-20230307",
+    "react": "18.3.0-next-f828bad38-20230313",
+    "react-dom": "18.3.0-next-f828bad38-20230313",
     "react-markdown": "^8.0.5",
-    "react-server-dom-webpack": "18.3.0-next-703c67560-20230307",
+    "react-server-dom-webpack": "18.3.0-next-f828bad38-20230313",
     "server-only": "^0.0.1"
   },
   "devDependencies": {

package.json

@@ -1,12 +1,15 @@
-import type {Thenable} from 'react';
+import type {ReactServerValue} from 'react-server-dom-webpack';
 import ReactServerDOMClient from 'react-server-dom-webpack/client.browser';
 
-export function callServer(id: string, args: unknown): Thenable<unknown> {
+export async function callServer(
+  id: string,
+  args: ReactServerValue,
+): Promise<unknown> {
   return ReactServerDOMClient.createFromFetch(
     fetch(`/`, {
       method: `POST`,
       headers: {'accept': `text/x-component`, 'x-rsc-action': id},
-      body: JSON.stringify(args),
+      body: await ReactServerDOMClient.encodeReply(args),
     }),
   );
 }

src/call-server.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type {WebpackMap} from 'react-server-dom-webpack';
+import type {ClientManifest} from 'react-server-dom-webpack';
 import ReactServerDOMServer from 'react-server-dom-webpack/server';
 import {App} from '../../components/server/app.js';
 import {PathnameServerContextName} from '../../pathname-server-context.js';
@@ -31,7 +31,7 @@ const handleGet: ExportedHandlerFetchHandler<EnvWithStaticContent> = async (
       />
       <App />
     </>,
-    reactClientManifest as WebpackMap,
+    reactClientManifest as ClientManifest,
     {
       context: [
         [`WORKAROUND`, null], // TODO: First value has a bug where the value is not set on the second request: https://github.com/facebook/react/issues/24849
@@ -69,7 +69,8 @@ const handlePost: ExportedHandlerFetchHandler<EnvWithStaticContent> = async (
     return new Response(null, {status: 500});
   }
 
-  const args = (await request.json()) as unknown[];
+  const body = await request.text();
+  const args = await ReactServerDOMServer.decodeReply(body);
   const actionPromise = action.apply(null, args);
 
   const reactClientManifest = await getJsonFromKv(
@@ -79,11 +80,13 @@ const handlePost: ExportedHandlerFetchHandler<EnvWithStaticContent> = async (
 
   const rscStream = ReactServerDOMServer.renderToReadableStream(
     actionPromise,
-    reactClientManifest as WebpackMap,
+    reactClientManifest as ClientManifest,
     {
       onError: (error) => {
         console.error(error);
 
+        // TODO: Sending the error message as digest kind of defeats the purpose
+        // of having a digest to mask the error in production.
         return error instanceof Error ? error.message : `Unknown Error`;
       },
     },

src/workers/rsc/index.tsx

@@ -1,8 +1,8 @@
-import type {ReactModel} from 'react-server-dom-webpack/server';
+import type {ReactClientValue} from 'react-server-dom-webpack';
 
 export function isValidServerReference(
   action: unknown,
-): action is (...args: unknown[]) => Promise<ReactModel> {
+): action is (...args: unknown[]) => Promise<ReactClientValue> {
   // TODO: Check against a server reference manifest.
   return (
     typeof action === `function` &&

src/workers/rsc/is-valid-server-reference.ts

@@ -1,14 +1,18 @@
 declare module 'react-server-dom-webpack/client.browser' {
   import type {Thenable} from 'react';
-  import type {WebpackMap} from 'react-server-dom-webpack';
+  import type {
+    ClientManifest,
+    ReactServerValue,
+    ServerReference,
+  } from 'react-server-dom-webpack';
 
   export interface ReactServerDomClientOptions {
     callServer?: CallServerCallback;
   }
 
   export type CallServerCallback = (
     id: string,
-    args: unknown,
+    args: ReactServerValue,
   ) => Thenable<unknown>;
 
   export function createFromFetch<T>(
@@ -20,14 +24,18 @@ declare module 'react-server-dom-webpack/client.browser' {
     stream: ReadableStream,
     options?: ReactServerDomClientOptions,
   ): Thenable<T>;
+
+  export function encodeReply(
+    value: ReactServerValue,
+  ): Promise<string | FormData>;
 }
 
 declare module 'react-server-dom-webpack/client.edge' {
   import type {Thenable} from 'react';
-  import type {WebpackMap} from 'react-server-dom-webpack';
+  import type {SSRManifest} from 'react-server-dom-webpack';
 
   export interface CreateFromReadableStreamOptions {
-    moduleMap?: WebpackMap;
+    moduleMap?: SSRManifest;
   }
 
   export function createFromReadableStream<T>(

types/react-server-dom-webpack-client.d.ts

@@ -1,18 +1,10 @@
 declare module 'react-server-dom-webpack/server' {
-  import type {ReactElement} from 'react';
-  import type {WebpackMap} from 'react-server-dom-webpack';
-
-  export type ReactModel =
-    | ReactElement
-    | LazyComponent<any, any>
-    | string
-    | boolean
-    | number
-    | symbol
-    | null
-    | Iterable<ReactModel>
-    | {[key: string]: ReactModel}
-    | Promise<ReactModel>;
+  import type {ReactElement, Thenable} from 'react';
+  import type {
+    ClientManifest,
+    ReactClientValue,
+    ReactServerValue,
+  } from 'react-server-dom-webpack';
 
   export type LazyComponent<T, P> = {
     $$typeof: symbol | number;
@@ -36,8 +28,10 @@ declare module 'react-server-dom-webpack/server' {
     | {[key: string]: ServerContextJSONValue};
 
   export function renderToReadableStream(
-    model: ReactModel,
-    webpackMap?: WebpackMap | null,
+    model: ReactClientValue,
+    webpackMap?: ClientManifest | null,
     options?: RenderToReadableStreamOptions,
   ): ReadableStream<Uint8Array>;
+
+  export function decodeReply(body: string | FormData): Thenable<unknown[]>;
 }

types/react-server-dom-webpack-server.d.ts

@@ -1,11 +1,75 @@
 declare module 'react-server-dom-webpack' {
-  export interface WebpackMap {
+  import type {
+    Component,
+    Context,
+    LazyExoticComponent,
+    ReactElement,
+  } from 'react';
+
+  export interface ClientManifest {
     [id: string]: ClientReferenceMetadata;
   }
 
+  export interface SSRManifest {
+    [clientId: string]: {
+      [clientExportName: string]: ClientReferenceMetadata;
+    };
+  }
+
   export interface ClientReferenceMetadata {
     id: string;
     chunks: string[];
     name: string;
   }
+
+  export interface ServerReference {
+    $$typeof: symbol;
+    $$id: string;
+    $$bound: null | ReactClientValue[];
+  }
+
+  // Serializable values for the client
+  export type ReactClientValue =
+    // Server Elements and Lazy Components are unwrapped on the Server
+    | ReactElement
+    | LazyExoticComponent<ReactClientValue>
+    // References are passed by their value
+    | ClientReferenceMetadata
+    | ServerReference
+    // The rest are passed as is. Sub-types can be passed in but lose their
+    // subtype, so the receiver can only accept once of these.
+    | ReactElement<string>
+    | ReactElement<ClientReferenceMetadata>
+    | Context<any> // ServerContext
+    | string
+    | boolean
+    | number
+    | symbol
+    | null
+    | void
+    | Iterable<ReactClientValue>
+    | ReactClientValue[]
+    | ReactClientObject
+    | Promise<ReactClientValue>; // Thenable<ReactClientValue>
+
+  export type ReactClientObject = {[key: string]: ReactClientValue};
+
+  // Serializable values for the server
+  export type ReactServerValue =
+    // References are passed by their value
+    | ServerReference
+    // The rest are passed as is. Sub-types can be passed in but lose their
+    // subtype, so the receiver can only accept once of these.
+    | string
+    | boolean
+    | number
+    | symbol
+    | null
+    | void
+    | Iterable<ReactServerValue>
+    | ReactServerValue[]
+    | ReactServerObject
+    | Promise<ReactServerValue>; // Thenable<ReactServerValue>
+
+  export type ReactServerObject = {[key: string]: ReactServerValue};
 }