Incorporate changes from facebook/react#26300

Author: unstubbable

package-lock.json

@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "htmlescape": "^1.1.1",
-    "react": "18.3.0-next-41110021f-20230301",
-    "react-dom": "18.3.0-next-41110021f-20230301",
+    "react": "18.3.0-next-49f741046-20230305",
+    "react-dom": "18.3.0-next-49f741046-20230305",
     "react-markdown": "^8.0.5",
-    "react-server-dom-webpack": "18.3.0-next-41110021f-20230301",
+    "react-server-dom-webpack": "18.3.0-next-49f741046-20230305",
     "server-only": "^0.0.1"
   },
   "devDependencies": {

package.json

@@ -48,8 +48,9 @@ async function rscLoader(content) {
   // instead of the file URL, so that it can be imported from within the RSC
   // worker bundle.
   return sourceCode.replace(
-    /\$\$filepath: \{value: "[^"]+"\}/,
-    () => `$$filepath: {value: ${webpack.RuntimeGlobals.moduleId}}`,
+    /(\$\$typeof: \{value: Symbol.for\("react.server.reference"\)\},\$\$id: \{value: )"[^#]+#([^"]*)"/,
+    (_match, prefix, exportName) =>
+      `${prefix}${webpack.RuntimeGlobals.moduleId}+"#${exportName}"`,
   );
 }
 

rsc-loader.cjs

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

src/call-server.ts

@@ -1,7 +1,7 @@
 import {getAssetFromKV} from '@cloudflare/kv-asset-handler';
 import staticContentManifest from '__STATIC_CONTENT_MANIFEST';
 import * as React from 'react';
-import type {ServerRef, WebpackMap} from 'react-server-dom-webpack';
+import type {WebpackMap} from 'react-server-dom-webpack';
 import type {ReactModel} from 'react-server-dom-webpack/server';
 import ReactServerDOMServer from 'react-server-dom-webpack/server';
 import {App} from '../app.js';
@@ -12,7 +12,7 @@ export interface RscWorkerEnv {
   __STATIC_CONTENT: {};
 }
 
-declare var __webpack_require__: (id: string) => Record<string, unknown>;
+declare var __webpack_require__: (moduleId: string) => Record<string, unknown>;
 
 const handleGet: ExportedHandlerFetchHandler<RscWorkerEnv> = async (
   request,
@@ -42,14 +42,18 @@ const handleGet: ExportedHandlerFetchHandler<RscWorkerEnv> = async (
 const handlePost: ExportedHandlerFetchHandler<RscWorkerEnv> = async (
   request,
 ) => {
-  const rscActionHeader = request.headers.get(`x-rsc-action`);
+  const serverReferenceId = request.headers.get(`x-rsc-action`);
+  const [moduleId, exportName] = serverReferenceId?.split(`#`) ?? [];
+
+  if (!moduleId || !exportName) {
+    console.error(
+      `Invalid server reference ID: ${JSON.stringify(serverReferenceId)}`,
+    );
 
-  if (!rscActionHeader) {
     return new Response(null, {status: 400});
   }
 
-  const {id, name} = JSON.parse(rscActionHeader) as ServerRef;
-  const action = __webpack_require__(id)[name];
+  const action = __webpack_require__(moduleId)[exportName];
 
   if (!isValidServerReference(action)) {
     console.error(action, `is not a valid server reference.`);

src/rsc-worker/index.ts

@@ -1,13 +1,13 @@
 declare module 'react-server-dom-webpack/client.browser' {
   import type {Thenable} from 'react';
-  import type {ServerRef, WebpackMap} from 'react-server-dom-webpack';
+  import type {WebpackMap} from 'react-server-dom-webpack';
 
   export interface ReactServerDomClientOptions {
     callServer?: CallServerCallback;
   }
 
   export type CallServerCallback = (
-    ref: ServerRef,
+    id: string,
     args: unknown,
   ) => Thenable<unknown>;
 

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

@@ -1,19 +1,11 @@
 declare module 'react-server-dom-webpack' {
   export interface WebpackMap {
-    [filepath: string]: {
-      [name: string]: ClientReferenceMetadata;
-    };
+    [id: string]: ClientReferenceMetadata;
   }
 
   export interface ClientReferenceMetadata {
     id: string;
     chunks: string[];
     name: string;
-    async: boolean;
-  }
-
-  export interface ServerRef {
-    id: string;
-    name: string;
   }
 }