From d5a7af9e0d1cb44e5fb511246a1507a355ecca54 Mon Sep 17 00:00:00 2001
From: Nikhil Saraf <nsaraf98@gmail.com>
Date: Sun, 11 Jun 2023 23:20:39 +0530
Subject: [PATCH] using module/path#export syntax for the reference IDs

---
 fixtures/flight-vite/server/region.js         |  6 ++--
 fixtures/flight-vite/src/index.js             |  2 +-
 .../src/ReactFlightClientConfigViteBundler.js | 29 +++++--------------
 .../src/ReactFlightViteRuntime.js             |  4 +--
 4 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/fixtures/flight-vite/server/region.js b/fixtures/flight-vite/server/region.js
index 58c6dfb98a67b..8b8cf8d0d0faa 100644
--- a/fixtures/flight-vite/server/region.js
+++ b/fixtures/flight-vite/server/region.js
@@ -66,7 +66,9 @@ async function createApp() {
 
     loadModule = async entry => {
       return await viteServer.ssrLoadModule(
-        path.resolve(viteServer.config.root, entry)
+        path.isAbsolute(entry)
+          ? entry
+          : path.join(viteServer.config.root, entry)
       );
     };
   } else {
@@ -124,7 +126,7 @@ async function createApp() {
     const serverReference = req.get('rsc-action');
     if (serverReference) {
       // This is the client-side case
-      const [filepath, name] = JSON.parse(serverReference);
+      const [filepath, name] = serverReference.split('#');
       const action = (await loadModule(filepath))[name];
       // Validate that this is actually a function we intended to expose and
       // not the client trying to invoke arbitrary functions. In a real app,
diff --git a/fixtures/flight-vite/src/index.js b/fixtures/flight-vite/src/index.js
index f4580e0d25776..66b00364cd9e0 100644
--- a/fixtures/flight-vite/src/index.js
+++ b/fixtures/flight-vite/src/index.js
@@ -24,7 +24,7 @@ async function callServer(id, args) {
     method: 'POST',
     headers: {
       Accept: 'text/x-component',
-      'rsc-action': JSON.stringify(id),
+      'rsc-action': id,
     },
     body: await encodeReply(args),
   });
diff --git a/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js b/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js
index 7a124ef3b12ad..ddfb8c2c43bf0 100644
--- a/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js
+++ b/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js
@@ -17,17 +17,9 @@ export type SSRManifest = string; // Module root path
 
 export type ServerManifest = string; // Module root path
 
-export type ServerReferenceId =
-  | [
-      string, // module path
-      string, // export name
-    ]
-  | string;
+export type ServerReferenceId = string;
 
-export opaque type ClientReferenceMetadata = [
-  string, // module path
-  string, // export name
-];
+export opaque type ClientReferenceMetadata = string;
 
 // eslint-disable-next-line no-unused-vars
 export opaque type ClientReference<T> = {
@@ -39,9 +31,10 @@ export function resolveClientReference<T>(
   bundlerConfig: SSRManifest,
   metadata: ClientReferenceMetadata,
 ): ClientReference<T> {
+  const [specifier, name] = metadata.split('#');
   return {
-    specifier: metadata[0],
-    name: metadata[1],
+    specifier,
+    name,
   };
 }
 
@@ -49,16 +42,10 @@ export function resolveServerReference<T>(
   config: ServerManifest,
   id: ServerReferenceId,
 ): ClientReference<T> {
-  if (typeof id === 'string') {
-    const [specifier, name] = id.split(',');
-    return {
-      specifier,
-      name,
-    };
-  }
+  const [specifier, name] = id.split('#');
   return {
-    specifier: id[0],
-    name: id[1],
+    specifier,
+    name,
   };
 }
 
diff --git a/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js b/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js
index 1eadf79de50b5..bd78f55a80d2a 100644
--- a/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js
+++ b/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js
@@ -197,7 +197,7 @@ export function createClientReference(
   const clientReference = Object.defineProperties(({}: any), {
     $$typeof: {value: CLIENT_REFERENCE},
     // Represents the whole Module object instead of a particular import.
-    $$id: {value: [moduleId, name], configurable: true},
+    $$id: {value: `${moduleId}#${name}`},
     $$async: {value: false},
   });
   return new Proxy(clientReference, proxyHandlers);
@@ -211,7 +211,7 @@ export function createServerReference(
   const serverReference = Object.defineProperties(fn, {
     $$typeof: {value: SERVER_REFERENCE},
     // Represents the whole Module object instead of a particular import.
-    $$id: {value: [moduleId, name], configurable: true},
+    $$id: {value: `${moduleId}#${name}`},
     $$bound: {value: null},
   });
   return serverReference;