[Flight] Client and Server Reference Creation into Runtime

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

@@ -38,6 +38,11 @@ import {
 
 import {decodeAction} from 'react-server/src/ReactFlightActionServer';
 
+export {
+  registerServerReference,
+  registerClientReference,
+} from './ReactFlightESMReferences';
+
 function createDrainHandler(destination: Destination, request: Request) {
   return () => startFlowing(request, destination);
 }

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

@@ -178,18 +178,20 @@ function transformServerModule(
         continue;
     }
   }
-
+  if (localNames.size === 0) {
+    return source;
+  }
   let newSrc = source + '\n\n;';
+  newSrc +=
+    'import {registerServerReference} from "react-server-dom-esm/server";\n';
   localNames.forEach(function (exported, local) {
     if (localTypes.get(local) !== 'function') {
       // We first check if the export is a function and if so annotate it.
       newSrc += 'if (typeof ' + local + ' === "function") ';
     }
-    newSrc += 'Object.defineProperties(' + local + ',{';
-    newSrc += '$$typeof: {value: Symbol.for("react.server.reference")},';
-    newSrc += '$$id: {value: ' + JSON.stringify(url + '#' + exported) + '},';
-    newSrc += '$$bound: { value: null }';
-    newSrc += '});\n';
+    newSrc += 'registerServerReference(' + local + ',';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(exported) + ');\n';
   });
   return newSrc;
 }
@@ -313,13 +315,17 @@ async function transformClientModule(
 
   await parseExportNamesInto(body, names, url, loader);
 
+  if (names.length === 0) {
+    return '';
+  }
+
   let newSrc =
-    "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
+    'import {registerClientReference} from "react-server-dom-esm/server";\n';
   for (let i = 0; i < names.length; i++) {
     const name = names[i];
     if (name === 'default') {
       newSrc += 'export default ';
-      newSrc += 'Object.defineProperties(function() {';
+      newSrc += 'registerClientReference(function() {';
       newSrc +=
         'throw new Error(' +
         JSON.stringify(
@@ -331,7 +337,7 @@ async function transformClientModule(
         ');';
     } else {
       newSrc += 'export const ' + name + ' = ';
-      newSrc += 'Object.defineProperties(function() {';
+      newSrc += 'registerClientReference(function() {';
       newSrc +=
         'throw new Error(' +
         JSON.stringify(
@@ -341,10 +347,9 @@ async function transformClientModule(
         ) +
         ');';
     }
-    newSrc += '},{';
-    newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
-    newSrc += '$$id: {value: ' + JSON.stringify(url + '#' + name) + '}';
-    newSrc += '});\n';
+    newSrc += '},';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(name) + ');\n';
   }
   return newSrc;
 }

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  exportName: string,
+): ClientReference<T> {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {value: CLIENT_REFERENCE_TAG},
+    $$id: {value: id + '#' + exportName},
+  });
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>) {
+  // $FlowFixMe[unsupported-syntax]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    // $FlowFixMe[method-unbinding]
+    const args = ArraySlice.call(arguments, 1);
+    newFn.$$typeof = SERVER_REFERENCE_TAG;
+    newFn.$$id = this.$$id;
+    newFn.$$bound = this.$$bound ? this.$$bound.concat(args) : args;
+  }
+  return newFn;
+}
+
+export function registerServerReference<T>(
+  reference: ServerReference<T>,
+  id: string,
+  exportName: string,
+): ServerReference<T> {
+  return Object.defineProperties((reference: any), {
+    $$typeof: {value: SERVER_REFERENCE_TAG},
+    $$id: {value: id + '#' + exportName},
+    $$bound: {value: null},
+    bind: {value: bind},
+  });
+}

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

@@ -9,21 +9,16 @@
 
 import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
 
-export type ClientManifest = string; // base URL on the file system
+import type {
+  ClientReference,
+  ServerReference,
+} from './ReactFlightESMReferences';
 
-export type ServerReference<T: Function> = T & {
-  $$typeof: symbol,
-  $$id: string,
-  $$bound: null | Array<ReactClientValue>,
-};
+export type {ClientReference, ServerReference};
 
-export type ServerReferenceId = string;
+export type ClientManifest = string; // base URL on the file system
 
-// eslint-disable-next-line no-unused-vars
-export type ClientReference<T> = {
-  $$typeof: symbol,
-  $$id: string,
-};
+export type ServerReferenceId = string;
 
 export type ClientReferenceMetadata = [
   string, // module path
@@ -32,23 +27,14 @@ export type ClientReferenceMetadata = [
 
 export type ClientReferenceKey = string;
 
-const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+export {isClientReference, isServerReference} from './ReactFlightESMReferences';
 
 export function getClientReferenceKey(
   reference: ClientReference<any>,
 ): ClientReferenceKey {
   return reference.$$id;
 }
 
-export function isClientReference(reference: Object): boolean {
-  return reference.$$typeof === CLIENT_REFERENCE_TAG;
-}
-
-export function isServerReference(reference: Object): boolean {
-  return reference.$$typeof === SERVER_REFERENCE_TAG;
-}
-
 export function resolveClientReferenceMetadata<T>(
   config: ClientManifest,
   clientReference: ClientReference<T>,

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

@@ -27,6 +27,12 @@ import {
 
 import {decodeAction} from 'react-server/src/ReactFlightActionServer';
 
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from './ReactFlightWebpackReferences';
+
 type Options = {
   identifierPrefix?: string,
   signal?: AbortSignal,

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

@@ -27,6 +27,12 @@ import {
 
 import {decodeAction} from 'react-server/src/ReactFlightActionServer';
 
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from './ReactFlightWebpackReferences';
+
 type Options = {
   identifierPrefix?: string,
   signal?: AbortSignal,

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

@@ -38,6 +38,12 @@ import {
 
 import {decodeAction} from 'react-server/src/ReactFlightActionServer';
 
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from './ReactFlightWebpackReferences';
+
 function createDrainHandler(destination: Destination, request: Request) {
   return () => startFlowing(request, destination);
 }

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

@@ -9,25 +9,19 @@
 
 import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
 
+import type {
+  ClientReference,
+  ServerReference,
+} from './ReactFlightWebpackReferences';
+
+export type {ClientReference, ServerReference};
+
 export type ClientManifest = {
   [id: string]: ClientReferenceMetadata,
 };
 
-export type ServerReference<T: Function> = T & {
-  $$typeof: symbol,
-  $$id: string,
-  $$bound: null | Array<ReactClientValue>,
-};
-
 export type ServerReferenceId = string;
 
-// eslint-disable-next-line no-unused-vars
-export type ClientReference<T> = {
-  $$typeof: symbol,
-  $$id: string,
-  $$async: boolean,
-};
-
 export type ClientReferenceMetadata = {
   id: string,
   chunks: Array<string>,
@@ -37,23 +31,17 @@ export type ClientReferenceMetadata = {
 
 export type ClientReferenceKey = string;
 
-const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+export {
+  isClientReference,
+  isServerReference,
+} from './ReactFlightWebpackReferences';
 
 export function getClientReferenceKey(
   reference: ClientReference<any>,
 ): ClientReferenceKey {
   return reference.$$async ? reference.$$id + '#async' : reference.$$id;
 }
 
-export function isClientReference(reference: Object): boolean {
-  return reference.$$typeof === CLIENT_REFERENCE_TAG;
-}
-
-export function isServerReference(reference: Object): boolean {
-  return reference.$$typeof === SERVER_REFERENCE_TAG;
-}
-
 export function resolveClientReferenceMetadata<T>(
   config: ClientManifest,
   clientReference: ClientReference<T>,

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

@@ -178,18 +178,20 @@ function transformServerModule(
         continue;
     }
   }
-
+  if (localNames.size === 0) {
+    return source;
+  }
   let newSrc = source + '\n\n;';
+  newSrc +=
+    'import {registerServerReference} from "react-server-dom-webpack/server";\n';
   localNames.forEach(function (exported, local) {
     if (localTypes.get(local) !== 'function') {
       // We first check if the export is a function and if so annotate it.
       newSrc += 'if (typeof ' + local + ' === "function") ';
     }
-    newSrc += 'Object.defineProperties(' + local + ',{';
-    newSrc += '$$typeof: {value: Symbol.for("react.server.reference")},';
-    newSrc += '$$id: {value: ' + JSON.stringify(url + '#' + exported) + '},';
-    newSrc += '$$bound: { value: null }';
-    newSrc += '});\n';
+    newSrc += 'registerServerReference(' + local + ',';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(exported) + ');\n';
   });
   return newSrc;
 }
@@ -313,13 +315,17 @@ async function transformClientModule(
 
   await parseExportNamesInto(body, names, url, loader);
 
+  if (names.length === 0) {
+    return '';
+  }
+
   let newSrc =
-    "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
+    'import {registerClientReference} from "react-server-dom-webpack/server";\n';
   for (let i = 0; i < names.length; i++) {
     const name = names[i];
     if (name === 'default') {
       newSrc += 'export default ';
-      newSrc += 'Object.defineProperties(function() {';
+      newSrc += 'registerClientReference(function() {';
       newSrc +=
         'throw new Error(' +
         JSON.stringify(
@@ -331,7 +337,7 @@ async function transformClientModule(
         ');';
     } else {
       newSrc += 'export const ' + name + ' = ';
-      newSrc += 'Object.defineProperties(function() {';
+      newSrc += 'registerClientReference(function() {';
       newSrc +=
         'throw new Error(' +
         JSON.stringify(
@@ -341,10 +347,9 @@ async function transformClientModule(
         ) +
         ');';
     }
-    newSrc += '},{';
-    newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
-    newSrc += '$$id: {value: ' + JSON.stringify(url + '#' + name) + '}';
-    newSrc += '});\n';
+    newSrc += '},';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(name) + ');\n';
   }
   return newSrc;
 }