Move the Webpack manifest config to one level deeper (#26083)

This frees up the Webpack manifest to contain a `serverManifest` part
too.

@shuding

Author: sebmarkbage

fixtures/flight/server/handler.server.js

@@ -20,10 +20,9 @@ module.exports = function (req, res) {
         const App = m.default.default || m.default;
         res.setHeader('Access-Control-Allow-Origin', '*');
         const moduleMap = JSON.parse(data);
-        const {pipe} = renderToPipeableStream(
-          React.createElement(App),
-          moduleMap
-        );
+        const {pipe} = renderToPipeableStream(React.createElement(App), {
+          clientManifest: moduleMap,
+        });
         pipe(res);
       }
     );

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

@@ -27,12 +27,12 @@ type Options = {
 
 function renderToReadableStream(
   model: ReactModel,
-  webpackMap: BundlerConfig,
+  webpackMaps: BundlerConfig,
   options?: Options,
 ): ReadableStream {
   const request = createRequest(
     model,
-    webpackMap,
+    webpackMaps,
     options ? options.onError : undefined,
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,

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

@@ -37,12 +37,12 @@ type PipeableStream = {
 
 function renderToPipeableStream(
   model: ReactModel,
-  webpackMap: BundlerConfig,
+  webpackMaps: BundlerConfig,
   options?: Options,
 ): PipeableStream {
   const request = createRequest(
     model,
-    webpackMap,
+    webpackMaps,
     options ? options.onError : undefined,
     options ? options.context : undefined,
     options ? options.identifierPrefix : undefined,

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

@@ -13,7 +13,9 @@ type WebpackMap = {
   },
 };
 
-export type BundlerConfig = WebpackMap;
+export type BundlerConfig = {
+  clientManifest: WebpackMap,
+};
 
 // eslint-disable-next-line no-unused-vars
 export type ClientReference<T> = {
@@ -54,7 +56,7 @@ export function resolveModuleMetaData<T>(
   clientReference: ClientReference<T>,
 ): ModuleMetaData {
   const resolvedModuleData =
-    config[clientReference.filepath][clientReference.name];
+    config.clientManifest[clientReference.filepath][clientReference.name];
   if (clientReference.async) {
     return {
       id: resolvedModuleData.id,

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

@@ -848,8 +848,8 @@ describe('ReactFlightDOM', () => {
     });
 
     // We simulate a bug in the Webpack bundler which causes an error on the server.
-    for (const id in webpackMap) {
-      Object.defineProperty(webpackMap, id, {
+    for (const id in webpackMap.clientManifest) {
+      Object.defineProperty(webpackMap.clientManifest, id, {
         get: () => {
           throw new Error('bug in the bundler');
         },

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

@@ -473,12 +473,14 @@ describe('ReactFlightDOMBrowser', () => {
     const ClientComponentOnTheServer = clientExports(ClientComponent);
 
     // In the SSR bundle this module won't exist. We simulate this by deleting it.
-    const clientId = webpackMap[ClientComponentOnTheClient.filepath]['*'].id;
+    const clientId =
+      webpackMap.clientManifest[ClientComponentOnTheClient.filepath]['*'].id;
     delete webpackModules[clientId];
 
     // Instead, we have to provide a translation from the client meta data to the SSR
     // meta data.
-    const ssrMetaData = webpackMap[ClientComponentOnTheServer.filepath]['*'];
+    const ssrMetaData =
+      webpackMap.clientManifest[ClientComponentOnTheServer.filepath]['*'];
     const translationMap = {
       [clientId]: {
         '*': ssrMetaData,

packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js

@@ -13,7 +13,7 @@ const Module = require('module');
 let webpackModuleIdx = 0;
 const webpackModules = {};
 const webpackErroredModules = {};
-const webpackMap = {};
+const webpackMap = {clientManifest: {}};
 global.__webpack_require__ = function (id) {
   if (webpackErroredModules[id]) {
     throw webpackErroredModules[id];
@@ -44,7 +44,7 @@ exports.clientModuleError = function clientModuleError(moduleError) {
   const idx = '' + webpackModuleIdx++;
   webpackErroredModules[idx] = moduleError;
   const path = url.pathToFileURL(idx).href;
-  webpackMap[path] = {
+  webpackMap.clientManifest[path] = {
     '': {
       id: idx,
       chunks: [],
@@ -65,7 +65,7 @@ exports.clientExports = function clientExports(moduleExports) {
   const idx = '' + webpackModuleIdx++;
   webpackModules[idx] = moduleExports;
   const path = url.pathToFileURL(idx).href;
-  webpackMap[path] = {
+  webpackMap.clientManifest[path] = {
     '': {
       id: idx,
       chunks: [],
@@ -81,7 +81,7 @@ exports.clientExports = function clientExports(moduleExports) {
     moduleExports.then(
       asyncModuleExports => {
         for (const name in asyncModuleExports) {
-          webpackMap[path][name] = {
+          webpackMap.clientManifest[path][name] = {
             id: idx,
             chunks: [],
             name: name,
@@ -92,7 +92,7 @@ exports.clientExports = function clientExports(moduleExports) {
     );
   }
   for (const name in moduleExports) {
-    webpackMap[path][name] = {
+    webpackMap.clientManifest[path][name] = {
       id: idx,
       chunks: [],
       name: name,