[Flight] createServerReference should export $$FORM_ACTION on the Ser…

…ver (#26987)

Currently, only the browser build exposes the `$$FORM_ACTION` helper.
It's used for creating progressive enhancement fro Server Actions
imported from Client Components. This helper is only useful in SSR
builds so it should be included in the Edge/Node builds of the client.

I also removed it from the browser build. We assume that only the Edge
or Node builds of the client are used
together with SSR. On the client this feature is not needed so we can
exclude the code. This might be a bit unnecessary because it's not that
much code and in theory you might use SSR in a Service Worker or
something where the Browser build would be used but currently we assume
that build is only for the client. That's why it also don't take an
option for reverse
look up of file names.

packages/react-client/src/ReactFlightClient.js

@@ -29,6 +29,7 @@ import {
   readPartialStringChunk,
   readFinalStringChunk,
   createStringDecoder,
+  usedWithSSR,
 } from './ReactFlightClientConfig';
 
 import {
@@ -529,8 +530,10 @@ function createServerReferenceProxy<A: Iterable<any>, T>(
     });
   };
   // Expose encoder for use by SSR.
-  // TODO: Only expose this in SSR builds and not the browser client.
-  proxy.$$FORM_ACTION = encodeFormAction;
+  if (usedWithSSR) {
+    // Only expose this in builds that would actually use it. Not needed on the client.
+    (proxy: any).$$FORM_ACTION = encodeFormAction;
+  }
   knownServerReferences.set(proxy, metaData);
   return proxy;
 }

packages/react-client/src/ReactFlightReplyClient.js

@@ -28,6 +28,8 @@ import type {
   RejectedThenable,
 } from '../../shared/ReactTypes';
 
+import {usedWithSSR} from './ReactFlightClientConfig';
+
 type ReactJSONValue =
   | string
   | boolean
@@ -496,8 +498,10 @@ export function createServerReference<A: Iterable<any>, T>(
     return callServer(id, args);
   };
   // Expose encoder for use by SSR.
-  // TODO: Only expose this in SSR builds and not the browser client.
-  proxy.$$FORM_ACTION = encodeFormAction;
+  if (usedWithSSR) {
+    // Only expose this in builds that would actually use it. Not needed on the client.
+    (proxy: any).$$FORM_ACTION = encodeFormAction;
+  }
   knownServerReferences.set(proxy, {id: id, bound: null});
   return proxy;
 }

packages/react-client/src/forks/ReactFlightClientConfig.custom.js

@@ -35,6 +35,7 @@ export const resolveServerReference = $$$config.resolveServerReference;
 export const preloadModule = $$$config.preloadModule;
 export const requireModule = $$$config.requireModule;
 export const dispatchHint = $$$config.dispatchHint;
+export const usedWithSSR = true;
 
 export opaque type Source = mixed;
 

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js

@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;

packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js

@@ -20,3 +20,4 @@ export const resolveClientReference: any = null;
 export const resolveServerReference: any = null;
 export const preloadModule: any = null;
 export const requireModule: any = null;
+export const usedWithSSR = true;

packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js

@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js

@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js

@@ -11,3 +11,4 @@
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js

@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientConfigNode';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js

@@ -10,3 +10,4 @@
 export * from 'react-client/src/ReactFlightClientConfigNode';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigNodeBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

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

@@ -21,6 +21,8 @@ import {
   close,
 } from 'react-client/src/ReactFlightClient';
 
+import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient';
+
 function noServerCall() {
   throw new Error(
     'Server Functions cannot be called during initial render. ' +
@@ -33,7 +35,7 @@ export function createServerReference<A: Iterable<any>, T>(
   id: any,
   callServer: any,
 ): (...A) => Promise<T> {
-  return noServerCall;
+  return createServerReferenceImpl(id, noServerCall);
 }
 
 function createFromNodeStream<T>(

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

@@ -21,6 +21,8 @@ import {
   close,
 } from 'react-client/src/ReactFlightClient';
 
+import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient';
+
 function noServerCall() {
   throw new Error(
     'Server Functions cannot be called during initial render. ' +
@@ -33,7 +35,7 @@ export function createServerReference<A: Iterable<any>, T>(
   id: any,
   callServer: any,
 ): (...A) => Promise<T> {
-  return noServerCall;
+  return createServerReferenceImpl(id, noServerCall);
 }
 
 export type Options = {

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

@@ -23,6 +23,8 @@ import {
   close,
 } from 'react-client/src/ReactFlightClient';
 
+import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient';
+
 function noServerCall() {
   throw new Error(
     'Server Functions cannot be called during initial render. ' +
@@ -35,7 +37,7 @@ export function createServerReference<A: Iterable<any>, T>(
   id: any,
   callServer: any,
 ): (...A) => Promise<T> {
-  return noServerCall;
+  return createServerReferenceImpl(id, noServerCall);
 }
 
 function createFromNodeStream<T>(

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

@@ -17,6 +17,10 @@ global.ReadableStream =
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
+// Don't wait before processing work on the server.
+// TODO: we can replace this with FlightServer.act().
+global.setTimeout = cb => cb();
+
 let container;
 let serverExports;
 let webpackServerMap;
@@ -25,16 +29,16 @@ let ReactDOMServer;
 let ReactServerDOMServer;
 let ReactServerDOMClient;
 
-describe('ReactFlightDOMReply', () => {
+describe('ReactFlightDOMForm', () => {
   beforeEach(() => {
     jest.resetModules();
     const WebpackMock = require('./utils/WebpackMock');
     serverExports = WebpackMock.serverExports;
     webpackServerMap = WebpackMock.webpackServerMap;
     React = require('react');
-    ReactServerDOMServer = require('react-server-dom-webpack/server.browser');
-    ReactServerDOMClient = require('react-server-dom-webpack/client');
-    ReactDOMServer = require('react-dom/server.browser');
+    ReactServerDOMServer = require('react-server-dom-webpack/server.edge');
+    ReactServerDOMClient = require('react-server-dom-webpack/client.edge');
+    ReactDOMServer = require('react-dom/server.edge');
     container = document.createElement('div');
     document.body.appendChild(container);
   });