using module/path#export syntax for the reference IDs

facebook · Jun 11, 2023 · d5a7af9 · d5a7af9
1 parent 6a226c9
commit d5a7af9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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,26 +31,21 @@ export function resolveClientReference<T>(
   bundlerConfig: SSRManifest,
   metadata: ClientReferenceMetadata,
 ): ClientReference<T> {
+  const [specifier, name] = metadata.split('#');
   return {
-    specifier: metadata[0],
-    name: metadata[1],
+    specifier,
+    name,
   };
 }
 
 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
@@ -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;