Reorganize client references manifest (#46777)

* Rename client reference plugins from `Flight*` to `ClientReference*`
* Rename `serverComponentManifest` to `clientReferenceManifest`
* Group the key/value in client reference manifest
* Update turbopack crates

packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx

@@ -22,8 +22,8 @@ declare global {
 import type { Ipc } from "@vercel/turbopack-next/ipc/index";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import type {
-  FlightCSSManifest,
-  FlightManifest,
+  ClientCSSReferenceManifest,
+  ClientReferenceManifest,
 } from "next/dist/build/webpack/plugins/flight-manifest-plugin";
 import type { RenderData } from "types/turbopack";
 import type { RenderOpts } from "next/dist/server/app-render/types";
@@ -107,13 +107,6 @@ type LoaderTree = [
   components: ComponentsType
 ];
 
-type ServerComponentsManifest = {
-  [id: string]: ServerComponentsManifestModule;
-};
-type ServerComponentsManifestModule = {
-  [exportName: string]: { id: string; chunks: string[]; name: string };
-};
-
 async function runOperation(renderData: RenderData) {
   const layoutInfoChunks: Record<string, string[]> = {};
   const pageItem = LAYOUT_INFO[LAYOUT_INFO.length - 1];
@@ -140,74 +133,83 @@ async function runOperation(renderData: RenderData) {
 
   const proxyMethodsForModule = (
     id: string
-  ): ProxyHandler<FlightManifest["__ssr_module_mapping__"][""]> => ({
-    get(_target, name) {
-      return {
-        id,
-        chunks: JSON.parse(id)[1],
-        name,
-      };
-    },
-  });
-  const proxyMethodsNested = (): ProxyHandler<
-    FlightManifest["__ssr_module_mapping__"]
+  ): ProxyHandler<ClientReferenceManifest["ssrModuleMapping"]> => {
+    return {
+      get(_target, prop: string) {
+        return {
+          id,
+          chunks: JSON.parse(id)[1],
+          name: prop,
+        };
+      },
+    };
+  }
+
+  const proxyMethodsNested = (type: "ssrModuleMapping" | "clientModules"): ProxyHandler<
+    ClientReferenceManifest["ssrModuleMapping"] | ClientReferenceManifest["clientModules"]
   > => {
     return {
-      get(target, name, receiver) {
-        if (name === "__ssr_module_mapping__") {
-          return manifest;
+      get(_target, key: string) {
+        if (type === "ssrModuleMapping") {
+          return new Proxy({}, proxyMethodsForModule(key as string));
         }
-        if (name === "__entry_css_files__") {
-          return __entry_css_files__;
+        if (type === "clientModules") {
+          // The key is a `${file}#${name}`, but `file` can contain `#` itself.
+          // There are 2 possibilities:
+          //   "file#"    => id = "file", name = ""
+          //   "file#foo" => id = "file", name = "foo"
+          const pos = key.lastIndexOf("#");
+          let id = key;
+          let name = "";
+          if (pos !== -1) {
+            id = key.slice(0, pos);
+            name = key.slice(pos + 1);
+          } else {
+            throw new Error("key need to be in format of ${file}#${name}");
+          }
+
+          return {
+            id,
+            name,
+            chunks: JSON.parse(id)[1],
+          };
         }
-        return new Proxy({}, proxyMethodsForModule(name as string));
       },
     };
   };
-  const proxyMethods = (): ProxyHandler<FlightManifest> => {
+
+  const proxyMethods = (): ProxyHandler<ClientReferenceManifest> => {
+    const clientModulesProxy = new Proxy({}, proxyMethodsNested("clientModules"));
+    const ssrModuleMappingProxy = new Proxy({}, proxyMethodsNested("ssrModuleMapping"));
     return {
-      get(_target, key: string) {
-        if (key === "__ssr_module_mapping__") {
-          return new Proxy({} as any, proxyMethodsNested());
+      get(_target: any, prop: string) {
+        if (prop === "ssrModuleMapping") {
+          return ssrModuleMappingProxy;
         }
-        if (key === "__entry_css_files__") {
-          return __entry_css_files__;
+        if (prop === "clientModules") {
+          return clientModulesProxy;
         }
-
-        // The key is a `${file}#${name}`, but `file` can contain `#` itself.
-        // There are 2 possibilities:
-        //   "file#"    => id = "file", name = ""
-        //   "file#foo" => id = "file", name = "foo"
-        const pos = key.lastIndexOf("#");
-        let id = key;
-        let name = "";
-        if (pos === -1) {
-          throw new Error("key need to be in format of ${file}#${name}");
-        } else {
-          id = key.slice(0, pos);
-          name = key.slice(pos + 1);
+        if (prop === "cssFiles") {
+          return cssFiles;
         }
-
-        return {
-          id,
-          name,
-          chunks: JSON.parse(id)[1],
-        };
       },
     };
   };
-  const manifest: FlightManifest = new Proxy({} as any, proxyMethods());
-  const serverCSSManifest: FlightCSSManifest = {};
-  const __entry_css_files__: FlightManifest["__entry_css_files__"] = {};
+  const manifest: ClientReferenceManifest = new Proxy({} as any, proxyMethods());
+  const serverCSSManifest: ClientCSSReferenceManifest = {
+    cssImports: {},
+    cssModules: {},
+  };
+  const cssFiles: ClientReferenceManifest["cssFiles"] = {};
   for (const [key, chunks] of Object.entries(layoutInfoChunks)) {
     const cssChunks = chunks.filter((path) => path.endsWith(".css"));
-    serverCSSManifest[`${key}.js`] = cssChunks.map((chunk) =>
+    serverCSSManifest.cssImports[`${key}.js`] = cssChunks.map((chunk) =>
       JSON.stringify([chunk, [chunk]])
     );
-    __entry_css_files__[key] = cssChunks;
+    cssFiles[key] = cssChunks;
   }
-  serverCSSManifest.__entry_css_mods__ = {
-    page: serverCSSManifest["page.js"],
+  serverCSSManifest.cssModules = {
+    page: serverCSSManifest.cssImports["page.js"],
   };
   const req: IncomingMessage = {
     url: renderData.url,
@@ -244,7 +246,7 @@ async function runOperation(renderData: RenderData) {
       tree,
       pages: ["page.js"],
     },
-    serverComponentManifest: manifest,
+    clientReferenceManifest: manifest,
     serverCSSManifest,
     runtime: "nodejs",
     serverComponents: true,

packages/next/src/build/utils.ts

@@ -54,7 +54,7 @@ import {
   loadRequireHook,
   overrideBuiltInReactPackages,
 } from './webpack/require-hook'
-import { isClientReference } from './is-client-reference'
+import { isClientReference } from '../lib/client-reference'
 import { StaticGenerationAsyncStorageWrapper } from '../server/async-storage/static-generation-async-storage-wrapper'
 import { IncrementalCache } from '../server/lib/incremental-cache'
 import { patchFetch } from '../server/lib/patch-fetch'

packages/next/src/build/webpack-config.ts

@@ -46,8 +46,8 @@ import { ReactLoadablePlugin } from './webpack/plugins/react-loadable-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
 import { regexLikeCss } from './webpack/config/blocks/css'
 import { CopyFilePlugin } from './webpack/plugins/copy-file-plugin'
-import { FlightManifestPlugin } from './webpack/plugins/flight-manifest-plugin'
-import { FlightClientEntryPlugin } from './webpack/plugins/flight-client-entry-plugin'
+import { ClientReferenceManifestPlugin } from './webpack/plugins/flight-manifest-plugin'
+import { ClientReferenceEntryPlugin } from './webpack/plugins/flight-client-entry-plugin'
 import { NextTypesPlugin } from './webpack/plugins/next-types-plugin'
 import type {
   Feature,
@@ -2224,11 +2224,11 @@ export default async function getBaseWebpackConfig(
       hasAppDir && isClient && new AppBuildManifestPlugin({ dev }),
       hasServerComponents &&
         (isClient
-          ? new FlightManifestPlugin({
+          ? new ClientReferenceManifestPlugin({
               dev,
               appDir,
             })
-          : new FlightClientEntryPlugin({
+          : new ClientReferenceEntryPlugin({
               appDir,
               dev,
               isEdgeServer,

packages/next/src/build/webpack/loaders/next-edge-ssr-loader/index.ts

@@ -149,7 +149,7 @@ export default async function edgeSSRLoader(this: any) {
       appRenderToHTML,
       pagesRenderToHTML,
       reactLoadableManifest,
-      serverComponentManifest: ${isServerComponent} ? rscManifest : null,
+      clientReferenceManifest: ${isServerComponent} ? rscManifest : null,
       serverCSSManifest: ${isServerComponent} ? rscCssManifest : null,
       serverActionsManifest: ${isServerComponent} ? rscServerManifest : null,
       subresourceIntegrityManifest,

packages/next/src/build/webpack/loaders/next-edge-ssr-loader/render.ts

@@ -3,6 +3,7 @@ import type { NextConfigComplete } from '../../../../server/config-shared'
 import type { DocumentType, AppType } from '../../../../shared/lib/utils'
 import type { BuildManifest } from '../../../../server/get-page-files'
 import type { ReactLoadableManifest } from '../../../../server/load-components'
+import type { ClientReferenceManifest } from '../../plugins/flight-manifest-plugin'
 import type { NextFontManifestPlugin } from '../../plugins/next-font-manifest-plugin'
 
 import WebServer from '../../../../server/web-server'
@@ -25,7 +26,7 @@ export function getRender({
   reactLoadableManifest,
   appRenderToHTML,
   pagesRenderToHTML,
-  serverComponentManifest,
+  clientReferenceManifest,
   subresourceIntegrityManifest,
   serverCSSManifest,
   serverActionsManifest,
@@ -47,7 +48,7 @@ export function getRender({
   buildManifest: BuildManifest
   reactLoadableManifest: ReactLoadableManifest
   subresourceIntegrityManifest?: Record<string, string>
-  serverComponentManifest: any
+  clientReferenceManifest?: ClientReferenceManifest
   serverCSSManifest: any
   serverActionsManifest: any
   appServerMod: any
@@ -79,7 +80,7 @@ export function getRender({
         runtime: SERVER_RUNTIME.experimentalEdge,
         supportsDynamicHTML: true,
         disableOptimizedLoading: true,
-        serverComponentManifest,
+        clientReferenceManifest,
         serverCSSManifest,
         serverActionsManifest,
       },

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -3,7 +3,7 @@ import type {
   ClientComponentImports,
   NextFlightClientEntryLoaderOptions,
 } from '../loaders/next-flight-client-entry-loader'
-import type { FlightCSSManifest } from './flight-manifest-plugin'
+import type { ClientCSSReferenceManifest } from './flight-manifest-plugin'
 
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 import { stringify } from 'querystring'
@@ -56,8 +56,8 @@ const pluginState = getProxiedPluginState({
   actionModId: {} as Record<string, string | number>,
 
   // Manifest of CSS entry files for server/edge server.
-  serverCSSManifest: {} as FlightCSSManifest,
-  edgeServerCSSManifest: {} as FlightCSSManifest,
+  serverCSSManifest: {} as ClientCSSReferenceManifest,
+  edgeServerCSSManifest: {} as ClientCSSReferenceManifest,
 
   // Mapping of resource path to module id for server/edge server.
   serverModuleIds: {} as Record<string, string | number>,
@@ -71,7 +71,7 @@ const pluginState = getProxiedPluginState({
   injectedClientEntries: {} as Record<string, string>,
 })
 
-export class FlightClientEntryPlugin {
+export class ClientReferenceEntryPlugin {
   dev: boolean
   appDir: string
   isEdgeServer: boolean
@@ -378,12 +378,10 @@ export class FlightClientEntryPlugin {
           }
 
           const entryCSSInfo: Record<string, string[]> =
-            cssManifest.__entry_css_mods__ || {}
+            cssManifest.cssModules || {}
           entryCSSInfo[entryName] = [...cssImportsForChunk[entryName]]
 
-          Object.assign(cssManifest, {
-            __entry_css_mods__: entryCSSInfo,
-          })
+          cssManifest.cssModules = entryCSSInfo
         })
       })
 
@@ -408,7 +406,8 @@ export class FlightClientEntryPlugin {
             clientEntryDependencyMap,
           })
 
-          Object.assign(cssManifest, cssImports)
+          if (!cssManifest.cssImports) cssManifest.cssImports = {}
+          Object.assign(cssManifest.cssImports, cssImports)
         }
       })
     })
@@ -421,18 +420,17 @@ export class FlightClientEntryPlugin {
         stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH,
       },
       (assets: webpack.Compilation['assets']) => {
-        const manifest = JSON.stringify(
-          {
-            ...pluginState.serverCSSManifest,
-            ...pluginState.edgeServerCSSManifest,
-            __entry_css_mods__: {
-              ...pluginState.serverCSSManifest.__entry_css_mods__,
-              ...pluginState.edgeServerCSSManifest.__entry_css_mods__,
-            },
+        const data: ClientCSSReferenceManifest = {
+          cssImports: {
+            ...pluginState.serverCSSManifest.cssImports,
+            ...pluginState.edgeServerCSSManifest.cssImports,
           },
-          null,
-          this.dev ? 2 : undefined
-        )
+          cssModules: {
+            ...pluginState.serverCSSManifest.cssModules,
+            ...pluginState.edgeServerCSSManifest.cssModules,
+          },
+        }
+        const manifest = JSON.stringify(data, null, this.dev ? 2 : undefined)
         assets[FLIGHT_SERVER_CSS_MANIFEST + '.json'] = new sources.RawSource(
           manifest
         ) as unknown as webpack.sources.RawSource