Patch bind to forward bound arguments to another server reference

This is not needed on the client since just regular bind works there.

Author: sebmarkbage

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

@@ -18,6 +18,24 @@ module.exports = function register() {
   const SERVER_REFERENCE = Symbol.for('react.server.reference');
   const PROMISE_PROTOTYPE = Promise.prototype;
 
+  // Patch bind on the server to ensure that this creates another
+  // bound server reference with the additional arguments.
+  const originalBind = Function.prototype.bind;
+  /*eslint-disable no-extend-native */
+  Function.prototype.bind = (function bind(this: any, self: any) {
+    // $FlowFixMe[unsupported-syntax]
+    const newFn = originalBind.apply(this, arguments);
+    if (this.$$typeof === SERVER_REFERENCE) {
+      // $FlowFixMe[method-unbinding]
+      const args = Array.prototype.slice.call(arguments, 1);
+      newFn.$$typeof = SERVER_REFERENCE;
+      newFn.$$filepath = this.$$filepath;
+      newFn.$$name = this.$$name;
+      newFn.$$bound = this.$$bound.concat(args);
+    }
+    return newFn;
+  }: any);
+
   const deepProxyHandlers = {
     get: function (target: Function, name: string, receiver: Proxy<Function>) {
       switch (name) {

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -816,6 +816,15 @@ describe('ReactFlightDOMBrowser', () => {
     expect(container.innerHTML).toBe('Hi');
   });
 
+  function requireServerRef(ref) {
+    const metaData = webpackServerMap[ref.id][ref.name];
+    const mod = __webpack_require__(metaData.id);
+    if (metaData.name === '*') {
+      return mod;
+    }
+    return mod[metaData.name];
+  }
+
   it('can pass a function by reference from server to client', async () => {
     let actionProxy;
 
@@ -838,11 +847,6 @@ describe('ReactFlightDOMBrowser', () => {
       webpackMap,
     );
 
-    function requireServerRef(ref) {
-      const metaData = webpackServerMap[ref.id][ref.name];
-      return __webpack_require__(metaData.id)[metaData.name];
-    }
-
     const response = ReactServerDOMReader.createFromReadableStream(stream, {
       async callServer(ref, args) {
         const fn = requireServerRef(ref);
@@ -866,4 +870,46 @@ describe('ReactFlightDOMBrowser', () => {
     const result = await actionProxy('hi');
     expect(result).toBe('HI');
   });
+
+  it('can bind arguments to a server reference', async () => {
+    let actionProxy;
+
+    function Client({action}) {
+      actionProxy = action;
+      return 'Click Me';
+    }
+
+    const greet = serverExports(function greet(a, b, c) {
+      return a + ' ' + b + c;
+    });
+    const ClientRef = clientExports(Client);
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      <ClientRef action={greet.bind(null, 'Hello', 'World')} />,
+      webpackMap,
+    );
+
+    const response = ReactServerDOMReader.createFromReadableStream(stream, {
+      async callServer(ref, args) {
+        const fn = requireServerRef(ref);
+        return fn.apply(null, args);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+    expect(typeof actionProxy).toBe('function');
+    expect(actionProxy).not.toBe(greet);
+
+    const result = await actionProxy('!');
+    expect(result).toBe('Hello World!');
+  });
 });