[Flight] Preserve location of bound server actions (#30778)

Follow up to #30741. We need to keep the location of the action when it's bound so we can still jump to it.
facebook · Aug 22, 2024 · eb7570b · eb7570b
1 parent 36c0434
commit eb7570b
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 19 deletions.
diff --git a/packages/react-server-dom-esm/src/ReactFlightESMReferences.js b/packages/react-server-dom-esm/src/ReactFlightESMReferences.js
@@ -52,14 +52,38 @@ function bind(this: ServerReference<any>): any {
   // $FlowFixMe[unsupported-syntax]
   const newFn = FunctionBind.apply(this, arguments);
   if (this.$$typeof === SERVER_REFERENCE_TAG) {
-    // $FlowFixMe[method-unbinding]
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
     const args = ArraySlice.call(arguments, 1);
-    return Object.defineProperties((newFn: any), {
-      $$typeof: {value: SERVER_REFERENCE_TAG},
-      $$id: {value: this.$$id},
-      $$bound: {value: this.$$bound ? this.$$bound.concat(args) : args},
-      bind: {value: bind},
-    });
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      __DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          },
+    );
   }
   return newFn;
 }

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js b/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js
@@ -66,13 +66,38 @@ function bind(this: ServerReference<any>): any {
   // $FlowFixMe[unsupported-syntax]
   const newFn = FunctionBind.apply(this, arguments);
   if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
     const args = ArraySlice.call(arguments, 1);
-    return Object.defineProperties((newFn: any), {
-      $$typeof: {value: SERVER_REFERENCE_TAG},
-      $$id: {value: this.$$id},
-      $$bound: {value: this.$$bound ? this.$$bound.concat(args) : args},
-      bind: {value: bind},
-    });
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      __DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          },
+    );
   }
   return newFn;
 }

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
@@ -75,12 +75,29 @@ function bind(this: ServerReference<any>): any {
       }
     }
     const args = ArraySlice.call(arguments, 1);
-    return Object.defineProperties((newFn: any), {
-      $$typeof: {value: SERVER_REFERENCE_TAG},
-      $$id: {value: this.$$id},
-      $$bound: {value: this.$$bound ? this.$$bound.concat(args) : args},
-      bind: {value: bind},
-    });
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      __DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          },
+    );
   }
   return newFn;
 }