Simplify Webpack References by encoding file path + export name as single id (#26300)

We always look up these references in a map so it doesn't matter what their value is. It could be a hash for example. The loaders now encode a single $$id instead of filepath + name. This changes the react-client-manifest to have a single level. The value inside the map is still split into module id + export name because that's what gets looked up in webpack. The react-ssr-manifest is still two levels because that's a reverse lookup.

Author: sebmarkbage

fixtures/flight/public/favicon.ico

@@ -98,8 +98,8 @@ app.post('/', bodyParser.text(), async function (req, res) {
  const {renderToPipeableStream} = await import(
  'react-server-dom-webpack/server'
  );
- const serverReference = JSON.parse(req.get('rsc-action'));
- const {filepath, name} = serverReference;
+ const serverReference = req.get('rsc-action');
+ const [filepath, name] = serverReference.split('#');
  const action = (await import(filepath))[name];
  // Validate that this is actually a function we intended to expose and
  // not the client trying to invoke arbitrary functions. In a real app,

fixtures/flight/server/region.js

@@ -18,7 +18,7 @@ let data = ReactServerDOMReader.createFromFetch(
  method: 'POST',
  headers: {
  Accept: 'text/x-component',
- 'rsc-action': JSON.stringify({filepath: id.id, name: id.name}),
+ 'rsc-action': id,
  },
  body: JSON.stringify(args),
  });

fixtures/flight/src/index.js

@@ -473,7 +473,7 @@ function createModelReject<T>(chunk: SomeChunk<T>): (error: mixed) => void {
 
 function createServerReferenceProxy<A: Iterable<any>, T>(
  response: Response,
- metaData: any,
+ metaData: {id: any, bound: Thenable<Array<any>>},
 ): (...A) => Promise<T> {
  const callServer = response._callServer;
  const proxy = function (): Promise<T> {
@@ -482,12 +482,14 @@ function createServerReferenceProxy<A: Iterable<any>, T>(
  const p = metaData.bound;
  if (p.status === INITIALIZED) {
  const bound = p.value;
- return callServer(metaData, bound.concat(args));
+ return callServer(metaData.id, bound.concat(args));
  }
  // Since this is a fake Promise whose .then doesn't chain, we have to wrap it.
  // TODO: Remove the wrapper once that's fixed.
- return Promise.resolve(p).then(function (bound) {
- return callServer(metaData, bound.concat(args));
+ return ((Promise.resolve(p): any): Promise<Array<any>>).then(function (
+ bound,
+ ) {
+ return callServer(metaData.id, bound.concat(args));
  });
  };
  return proxy;

packages/react-client/src/ReactFlightClient.js

@@ -19,7 +19,7 @@ import isArray from 'shared/isArray';
 
 export type ClientReference<T> = JSResourceReference<T>;
 export type ServerReference<T> = T;
-export type ServerReferenceMetadata = {};
+export type ServerReferenceId = {};
 
 import type {
  Destination,
@@ -69,7 +69,7 @@ export function resolveClientReferenceMetadata<T>(
 export function resolveServerReferenceMetadata<T>(
  config: BundlerConfig,
  resource: ServerReference<T>,
-): ServerReferenceMetadata {
+): {id: ServerReferenceId, bound: Promise<Array<any>>} {
  throw new Error('Not implemented.');
 }
 

packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

@@ -25,7 +25,6 @@ export opaque type ClientReferenceMetadata = {
  id: string,
  chunks: Array<string>,
  name: string,
- async: boolean,
 };
 
 // eslint-disable-next-line no-unused-vars

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

@@ -20,10 +20,7 @@ import {
  close,
 } from 'react-client/src/ReactFlightClientStream';
 
-type CallServerCallback = <A, T>(
- {filepath: string, name: string},
- args: A,
-) => Promise<T>;
+type CallServerCallback = <A, T>(string, args: A) => Promise<T>;
 
 export type Options = {
  callServer?: CallServerCallback,

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

@@ -10,32 +10,24 @@
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
 
 type WebpackMap = {
- [filepath: string]: {
- [name: string]: ClientReferenceMetadata,
- },
+ [id: string]: ClientReferenceMetadata,
 };
 
 export type BundlerConfig = WebpackMap;
 
 export type ServerReference<T: Function> = T & {
  $$typeof: symbol,
- $$filepath: string,
- $$name: string,
+ $$id: string,
  $$bound: Array<ReactModel>,
 };
 
-export type ServerReferenceMetadata = {
- id: string,
- name: string,
- bound: Promise<Array<ReactModel>>,
-};
+export type ServerReferenceId = string;
 
 // eslint-disable-next-line no-unused-vars
 export type ClientReference<T> = {
  $$typeof: symbol,
- filepath: string,
- name: string,
- async: boolean,
+ $$id: string,
+ $$async: boolean,
 };
 
 export type ClientReferenceMetadata = {
@@ -53,12 +45,7 @@ const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
 export function getClientReferenceKey(
  reference: ClientReference<any>,
 ): ClientReferenceKey {
- return (
- reference.filepath +
- '#' +
- reference.name +
- (reference.async ? '#async' : '')
- );
+ return reference.$$async ? reference.$$id + '#async' : reference.$$id;
 }
 
 export function isClientReference(reference: Object): boolean {
@@ -73,9 +60,8 @@ export function resolveClientReferenceMetadata<T>(
  config: BundlerConfig,
  clientReference: ClientReference<T>,
 ): ClientReferenceMetadata {
- const resolvedModuleData =
- config[clientReference.filepath][clientReference.name];
- if (clientReference.async) {
+ const resolvedModuleData = config[clientReference.$$id];
+ if (clientReference.$$async) {
  return {
  id: resolvedModuleData.id,
  chunks: resolvedModuleData.chunks,
@@ -90,10 +76,9 @@ export function resolveClientReferenceMetadata<T>(
 export function resolveServerReferenceMetadata<T>(
  config: BundlerConfig,
  serverReference: ServerReference<T>,
-): ServerReferenceMetadata {
+): {id: ServerReferenceId, bound: Promise<Array<any>>} {
  return {
- id: serverReference.$$filepath,
- name: serverReference.$$name,
+ id: serverReference.$$id,
  bound: Promise.resolve(serverReference.$$bound),
  };
 }

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

@@ -187,8 +187,7 @@ function transformServerModule(
  }
  newSrc += 'Object.defineProperties(' + local + ',{';
  newSrc += '$$typeof: {value: Symbol.for("react.server.reference")},';
- newSrc += '$$filepath: {value: ' + JSON.stringify(url) + '},';
- newSrc += '$$name: { value: ' + JSON.stringify(exported) + '},';
+ newSrc += '$$id: {value: ' + JSON.stringify(url + '#' + exported) + '},';
  newSrc += '$$bound: { value: [] }';
  newSrc += '});\n';
  });
@@ -343,9 +342,8 @@ async function transformClientModule(
  ');';
  }
  newSrc += '},{';
- newSrc += 'name: { value: ' + JSON.stringify(name) + '},';
  newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
- newSrc += 'filepath: {value: ' + JSON.stringify(url) + '}';
+ newSrc += '$$id: {value: ' + JSON.stringify(url + '#' + name) + '}';
  newSrc += '});\n';
  }
  return newSrc;

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

@@ -29,8 +29,7 @@ module.exports = function register() {
  // $FlowFixMe[method-unbinding]
  const args = Array.prototype.slice.call(arguments, 1);
  newFn.$$typeof = SERVER_REFERENCE;
- newFn.$$filepath = this.$$filepath;
- newFn.$$name = this.$$name;
+ newFn.$$id = this.$$id;
  newFn.$$bound = this.$$bound.concat(args);
  }
  return newFn;
@@ -44,14 +43,14 @@ module.exports = function register() {
  // These names are a little too common. We should probably have a way to
  // have the Flight runtime extract the inner target instead.
  return target.$$typeof;
- case 'filepath':
- return target.filepath;
+ case '$$id':
+ return target.$$id;
+ case '$$async':
+ return target.$$async;
  case 'name':
  return target.name;
  case 'displayName':
  return undefined;
- case 'async':
- return target.async;
  // We need to special case this because createElement reads it if we pass this
  // reference.
  case 'defaultProps':
@@ -69,20 +68,8 @@ module.exports = function register() {
  `that itself renders a Client Context Provider.`,
  );
  }
- let expression;
- switch (target.name) {
- case '':
- // eslint-disable-next-line react-internal/safe-string-coercion
- expression = String(name);
- break;
- case '*':
- // eslint-disable-next-line react-internal/safe-string-coercion
- expression = String(name);
- break;
- default:
- // eslint-disable-next-line react-internal/safe-string-coercion
- expression = String(target.name) + '.' + String(name);
- }
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ const expression = String(target.name) + '.' + String(name);
  throw new Error(
  `Cannot access ${expression} on the server. ` +
  'You cannot dot into a client module from a server component. ' +
@@ -103,15 +90,13 @@ module.exports = function register() {
  switch (name) {
  // These names are read by the Flight runtime if you end up using the exports object.
  case '$$typeof':
- // These names are a little too common. We should probably have a way to
- // have the Flight runtime extract the inner target instead.
  return target.$$typeof;
- case 'filepath':
- return target.filepath;
+ case '$$id':
+ return target.$$id;
+ case '$$async':
+ return target.$$async;
  case 'name':
  return target.name;
- case 'async':
- return target.async;
  // We need to special case this because createElement reads it if we pass this
  // reference.
  case 'defaultProps':
@@ -125,7 +110,7 @@ module.exports = function register() {
  case '__esModule':
  // Something is conditionally checking which export to use. We'll pretend to be
  // an ESM compat module but then we'll check again on the client.
- const moduleId = target.filepath;
+ const moduleId = target.$$id;
  target.default = Object.defineProperties(
  (function () {
  throw new Error(
@@ -136,12 +121,11 @@ module.exports = function register() {
  );
  }: any),
  {
+ $$typeof: {value: CLIENT_REFERENCE},
  // This a placeholder value that tells the client to conditionally use the
  // whole object or just the default export.
- name: {value: ''},
- $$typeof: {value: CLIENT_REFERENCE},
- filepath: {value: target.filepath},
- async: {value: target.async},
+ $$id: {value: target.$$id + '#'},
+ $$async: {value: target.$$async},
  },
  );
  return true;
@@ -150,17 +134,15 @@ module.exports = function register() {
  // Use a cached value
  return target.then;
  }
- if (!target.async) {
+ if (!target.$$async) {
  // If this module is expected to return a Promise (such as an AsyncModule) then
  // we should resolve that with a client reference that unwraps the Promise on
  // the client.
 
  const clientReference = Object.defineProperties(({}: any), {
- // Represents the whole Module object instead of a particular import.
- name: {value: '*'},
  $$typeof: {value: CLIENT_REFERENCE},
- filepath: {value: target.filepath},
- async: {value: true},
+ $$id: {value: target.$$id},
+ $$async: {value: true},
  });
  const proxy = new Proxy(clientReference, proxyHandlers);
 
@@ -176,10 +158,9 @@ module.exports = function register() {
  // If this is not used as a Promise but is treated as a reference to a `.then`
  // export then we should treat it as a reference to that name.
  {
- name: {value: 'then'},
  $$typeof: {value: CLIENT_REFERENCE},
- filepath: {value: target.filepath},
- async: {value: false},
+ $$id: {value: target.$$id + '#then'},
+ $$async: {value: false},
  },
  ));
  return then;
@@ -206,8 +187,8 @@ module.exports = function register() {
  {
  name: {value: name},
  $$typeof: {value: CLIENT_REFERENCE},
- filepath: {value: target.filepath},
- async: {value: target.async},
+ $$id: {value: target.$$id + '#' + name},
+ $$async: {value: target.$$async},
  },
  );
  cachedReference = target[name] = new Proxy(
@@ -284,11 +265,10 @@ module.exports = function register() {
  if (useClient) {
  const moduleId: string = (url.pathToFileURL(filename).href: any);
  const clientReference = Object.defineProperties(({}: any), {
- // Represents the whole Module object instead of a particular import.
- name: {value: '*'},
  $$typeof: {value: CLIENT_REFERENCE},
- filepath: {value: moduleId},
- async: {value: false},
+ // Represents the whole Module object instead of a particular import.
+ $$id: {value: moduleId},
+ $$async: {value: false},
  });
  // $FlowFixMe[incompatible-call] found when upgrading Flow
  this.exports = new Proxy(clientReference, proxyHandlers);
@@ -306,10 +286,9 @@ module.exports = function register() {
  if (typeof exports === 'function') {
  // The module exports a function directly,
  Object.defineProperties((exports: any), {
- // Represents the whole Module object instead of a particular import.
  $$typeof: {value: SERVER_REFERENCE},
- $$filepath: {value: moduleId},
- $$name: {value: '*'},
+ // Represents the whole Module object instead of a particular import.
+ $$id: {value: moduleId},
  $$bound: {value: []},
  });
  } else {
@@ -320,8 +299,7 @@ module.exports = function register() {
  if (typeof value === 'function') {
  Object.defineProperties((value: any), {
  $$typeof: {value: SERVER_REFERENCE},
- $$filepath: {value: moduleId},
- $$name: {value: key},
+ $$id: {value: moduleId + '#' + key},
  $$bound: {value: []},
  });
  }