Patch Promise cycles and toString on Server Functions

Co-authored-by: Hendrik Liebau <[email protected]>

Author: 2 people

packages/react-client/src/ReactFlightClient.js

@@ -1372,7 +1372,7 @@ function parseModelString(
         // Symbol
         return Symbol.for(value.slice(2));
       }
-      case 'F': {
+      case 'h': {
         // Server Reference
         const ref = value.slice(2);
         return getOutlinedModel(

packages/react-client/src/ReactFlightReplyClient.js

@@ -107,15 +107,14 @@ function serializePromiseID(id: number): string {
 }
 
 function serializeServerReferenceID(id: number): string {
-  return '$F' + id.toString(16);
+  return '$h' + id.toString(16);
 }
 
 function serializeTemporaryReferenceMarker(): string {
   return '$T';
 }
 
 function serializeFormDataReference(id: number): string {
-  // Why K? F is "Function". D is "Date". What else?
   return '$K' + id.toString(16);
 }
 
@@ -477,8 +476,22 @@ export function processReply(
         }
       }
 
+      const existingReference = writtenObjects.get(value);
+
       // $FlowFixMe[method-unbinding]
       if (typeof value.then === 'function') {
+        if (existingReference !== undefined) {
+          if (modelRoot === value) {
+            // This is the ID we're currently emitting so we need to write it
+            // once but if we discover it again, we refer to it by id.
+            modelRoot = null;
+          } else {
+            // We've already emitted this as an outlined object, so we can
+            // just refer to that by its existing ID.
+            return existingReference;
+          }
+        }
+
         // We assume that any object with a .then property is a "Thenable" type,
         // or a Promise type. Either of which can be represented by a Promise.
         if (formData === null) {
@@ -487,11 +500,19 @@ export function processReply(
         }
         pendingParts++;
         const promiseId = nextPartId++;
+        const promiseReference = serializePromiseID(promiseId);
+        writtenObjects.set(value, promiseReference);
         const thenable: Thenable<any> = (value: any);
         thenable.then(
           partValue => {
             try {
-              const partJSON = serializeModel(partValue, promiseId);
+              const previousReference = writtenObjects.get(partValue);
+              let partJSON;
+              if (previousReference !== undefined) {
+                partJSON = JSON.stringify(previousReference);
+              } else {
+                partJSON = serializeModel(partValue, promiseId);
+              }
               // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
               const data: FormData = formData;
               data.append(formFieldPrefix + promiseId, partJSON);
@@ -507,10 +528,9 @@ export function processReply(
           // that throws on the server instead.
           reject,
         );
-        return serializePromiseID(promiseId);
+        return promiseReference;
       }
 
-      const existingReference = writtenObjects.get(value);
       if (existingReference !== undefined) {
         if (modelRoot === value) {
           // This is the ID we're currently emitting so we need to write it

packages/react-server-dom-esm/src/ReactFlightESMReferences.js

@@ -88,6 +88,12 @@ function bind(this: ServerReference<any>): any {
   return newFn;
 }
 
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
 export function registerServerReference<T: Function>(
   reference: T,
   id: string,
@@ -111,12 +117,14 @@ export function registerServerReference<T: Function>(
             configurable: true,
           },
           bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
         }
       : {
           $$typeof,
           $$id,
           $$bound,
           bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
         },
   );
 }

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -102,6 +102,12 @@ function bind(this: ServerReference<any>): any {
   return newFn;
 }
 
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
 export function registerServerReference<T: Function>(
   reference: T,
   id: string,
@@ -125,12 +131,14 @@ export function registerServerReference<T: Function>(
             configurable: true,
           },
           bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
         }
       : {
           $$typeof,
           $$id,
           $$bound,
           bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
         },
   );
 }

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

@@ -103,6 +103,12 @@ function bind(this: ServerReference<any>): any {
   return newFn;
 }
 
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
 export function registerServerReference<T: Function>(
   reference: T,
   id: string,
@@ -126,12 +132,14 @@ export function registerServerReference<T: Function>(
             configurable: true,
           },
           bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
         }
       : {
           $$typeof,
           $$id,
           $$bound,
           bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
         },
   );
 }