rsbuild-plugin-react-router 0.5.0 → 0.6.0

package/src/mode-plan.ts

@@ -0,0 +1,367 @@
+import type {
+  RsbuildConfig,
+  RsbuildEntryDescription,
+  RsbuildPluginAPI,
+  Rspack,
+} from '@rsbuild/core';
+import { rspack } from '@rsbuild/core';
+import type { RouteConfigEntry } from '@react-router/dev/routes';
+import { resolve } from 'pathe';
+import type {
+  Config,
+  ResolvedReactRouterConfig,
+} from './react-router-config.js';
+import type { RouteChunkCache, RouteChunkConfig } from './route-chunks.js';
+import type { DevHmrPlanOptions } from './dev-hmr.js';
+import type { Route } from './types.js';
+import { createReactRouterDevServerSetup } from './dev-server.js';
+import { resolveAppPackagePath } from './plugin-utils.js';
+import { resolvePrerenderPaths } from './prerender.js';
+import { createReactRouterNodeEntries } from './server-build-plan.js';
+import { getSsrExternals } from './ssr-externals.js';
+import {
+  createClassicBuildArtifacts,
+  createClassicVirtualModules,
+  createClassicWebRouteEntries,
+  type ClassicBuildArtifacts,
+} from './classic-mode.js';
+import {
+  createReactRouterRscDevServerSetup,
+  createReactRouterRscResolveAliases,
+  createReactRouterRscVirtualModules,
+} from './rsc-support.js';
+
+type CommonModePlan = {
+  routeChunkConfig: RouteChunkConfig;
+  manifestChunkNames: Set<string>;
+  webEntries: Record<string, string | RsbuildEntryDescription>;
+  nodeEntries: Record<string, string | RsbuildEntryDescription>;
+  createVirtualModules(
+    publicPath: string,
+    jsDistPath: string
+  ): Record<string, string>;
+  createResolveConfig(rootPath: string): Rspack.Configuration['resolve'];
+  server: RsbuildConfig['server'] | undefined;
+  webExternalsType: 'module' | undefined;
+  webOutput: NonNullable<Rspack.Configuration['output']>;
+  webOptimization: NonNullable<Rspack.Configuration['optimization']>;
+  nodeExternals: string[] | undefined;
+  nodeDependencies: { dependencies?: string[] };
+};
+
+export type ClassicModePlan = CommonModePlan & {
+  kind: 'classic';
+  artifacts: ClassicBuildArtifacts;
+  routeChunkOptions: {
+    splitRouteModules: Config['splitRouteModules'];
+    rootRouteFile: string;
+    isBuild: boolean;
+    cache: RouteChunkCache;
+  };
+};
+
+export type RscModePlan = CommonModePlan & {
+  kind: 'rsc';
+  prerenderPaths: string[];
+};
+
+export type ReactRouterModePlan = ClassicModePlan | RscModePlan;
+
+// Fields both mode planners need. Mode-specific inputs live on the
+// per-mode option types below so each planner owns only what it uses.
+type ModePlanContext = {
+  allowedActionOriginsForBuild: string[] | undefined;
+  api: RsbuildPluginAPI;
+  appDirectory: string;
+  basename: string;
+  customServer: boolean;
+  splitRouteModules: Config['splitRouteModules'];
+  isBuild: boolean;
+  isSpaMode: boolean;
+  prerenderConfig: Config['prerender'];
+  routeConfig: RouteConfigEntry[];
+  routeDiscovery: Config['routeDiscovery'];
+  routes: Record<string, Route>;
+  rootRouteFile: string;
+  ssr: boolean;
+};
+
+type CreateClassicModePlanOptions = ModePlanContext & {
+  assetsBuildDirectory: string;
+  devHmr?: DevHmrPlanOptions;
+  defaultEntryName: string;
+  entryServerPath: string;
+  finalEntryClientPath: string;
+  future: Config['future'];
+  hasServerApp: boolean;
+  reactRouterConfig: ResolvedReactRouterConfig;
+  routeChunkCache: RouteChunkCache;
+  serverAppPath: string;
+  shouldDependOnWebCompiler: boolean;
+};
+
+type CreateRscModePlanOptions = ModePlanContext & {
+  buildDirectory: string;
+  finalEntryRscClientPath: string;
+  finalEntryRscPath: string;
+  outputClientPath: string;
+  pluginName: string;
+  serverBuildFile: string | undefined;
+};
+
+type CreateReactRouterModePlanOptions =
+  | ({ isRscMode: true } & CreateRscModePlanOptions)
+  | ({ isRscMode: false } & CreateClassicModePlanOptions);
+
+const RSC_LAYERS = rspack.experiments.rsc.Layers;
+
+const createReactRouterPackageAliases = (): Record<string, string> => {
+  const reactRouterPath = resolveAppPackagePath('react-router');
+  const reactRouterDomPath = resolveAppPackagePath('react-router/dom');
+  return {
+    ...(reactRouterPath ? { 'react-router$': reactRouterPath } : {}),
+    ...(reactRouterDomPath ? { 'react-router/dom$': reactRouterDomPath } : {}),
+  };
+};
+
+const createRscModePlan = async ({
+  allowedActionOriginsForBuild,
+  api,
+  appDirectory,
+  basename,
+  buildDirectory,
+  customServer,
+  finalEntryRscClientPath,
+  finalEntryRscPath,
+  isBuild,
+  outputClientPath,
+  pluginName,
+  prerenderConfig,
+  routeConfig,
+  routeDiscovery,
+  routes,
+  rootRouteFile,
+  serverBuildFile,
+  splitRouteModules,
+  ssr,
+}: CreateRscModePlanOptions): Promise<RscModePlan> => {
+  const rscServerEntryName = (serverBuildFile || 'index.js').replace(
+    /\.js$/,
+    ''
+  );
+  const prerenderPaths = await resolvePrerenderPaths(
+    prerenderConfig,
+    ssr,
+    routeConfig,
+    {
+      logWarning: true,
+      warn: message => api.logger.warn(message),
+    }
+  );
+  return {
+    kind: 'rsc',
+    prerenderPaths,
+    // RSC route chunking is content-detected; the config value only gates
+    // 'enforce' validation, matching upstream's RSC Vite plugin.
+    routeChunkConfig: {
+      splitRouteModules,
+      appDirectory,
+      rootRouteFile,
+    },
+    manifestChunkNames: new Set<string>(['index']),
+    webEntries: {
+      index: {
+        import: finalEntryRscClientPath,
+        html: false,
+      },
+    },
+    nodeEntries: {
+      [rscServerEntryName]: {
+        import: finalEntryRscPath,
+        layer: RSC_LAYERS.rsc,
+      },
+    },
+    createVirtualModules: (publicPath: string, jsDistPath: string) =>
+      createReactRouterRscVirtualModules({
+        allowedActionOrigins: allowedActionOriginsForBuild,
+        appDirectory,
+        basename,
+        buildDirectory,
+        isBuild,
+        jsDistPath,
+        outputClientPath,
+        publicPath,
+        routeDiscovery,
+        routes,
+        ssr,
+      }),
+    createResolveConfig: (rootPath: string) => ({
+      modules: [resolve(rootPath, 'node_modules'), 'node_modules'],
+      alias: createReactRouterRscResolveAliases(rootPath),
+    }),
+    server: !customServer
+      ? {
+          setup: createReactRouterRscDevServerSetup({
+            entryName: rscServerEntryName,
+            pluginName,
+          }),
+        }
+      : undefined,
+    webExternalsType: undefined,
+    webOutput: {
+      chunkFormat: 'array-push',
+      chunkLoading: 'jsonp',
+      workerChunkLoading: 'import-scripts',
+      wasmLoading: 'fetch',
+      module: false,
+    },
+    webOptimization: {
+      splitChunks: false,
+      // Flight resolves client references dynamically by export name. Preserve
+      // every export and its public name in production so the manifest can
+      // resolve route components, data exports, and React Router boundaries.
+      ...(isBuild ? { mangleExports: false, usedExports: false } : {}),
+      runtimeChunk: false,
+    },
+    nodeExternals: undefined,
+    nodeDependencies: {},
+  };
+};
+
+const createClassicModePlan = async ({
+  api,
+  allowedActionOriginsForBuild,
+  appDirectory,
+  assetsBuildDirectory,
+  basename,
+  customServer,
+  defaultEntryName,
+  devHmr,
+  entryServerPath,
+  finalEntryClientPath,
+  future,
+  hasServerApp,
+  isBuild,
+  isSpaMode,
+  prerenderConfig,
+  reactRouterConfig,
+  routeChunkCache,
+  routeConfig,
+  routeDiscovery,
+  routes,
+  rootRouteFile,
+  serverAppPath,
+  shouldDependOnWebCompiler,
+  splitRouteModules,
+  ssr,
+}: CreateClassicModePlanOptions): Promise<ClassicModePlan> => {
+  const routeChunkConfig: RouteChunkConfig = {
+    splitRouteModules,
+    appDirectory,
+    rootRouteFile,
+  };
+  const routeChunkOptions = {
+    splitRouteModules,
+    rootRouteFile,
+    isBuild,
+    cache: routeChunkCache,
+  };
+  const { manifestChunkNames, webRouteEntries } = createClassicWebRouteEntries({
+    appDirectory,
+    isBuild,
+    routes,
+    splitRouteModules: Boolean(splitRouteModules),
+  });
+  const artifacts = await createClassicBuildArtifacts({
+    api,
+    defaultEntryName,
+    isBuild,
+    prerenderConfig,
+    reactRouterConfig,
+    routeConfig,
+    routes,
+    rootDirectory: process.cwd(),
+    ssr,
+    devHmr,
+  });
+  const reactRouterAliases = createReactRouterPackageAliases();
+  return {
+    kind: 'classic',
+    artifacts,
+    routeChunkConfig,
+    routeChunkOptions,
+    manifestChunkNames,
+    webEntries: {
+      // `html: false` prevents rsbuild from emitting a stray entry.client.html
+      // into build/client; React Router renders HTML itself.
+      'entry.client': { import: finalEntryClientPath, html: false },
+      'virtual/react-router/browser-manifest': {
+        import: 'virtual/react-router/browser-manifest',
+        html: false,
+      },
+      ...webRouteEntries,
+    },
+    nodeEntries: createReactRouterNodeEntries({
+      hasServerApp,
+      isBuild,
+      serverAppPath,
+      entryServerPath,
+      serverBuildFile: reactRouterConfig.serverBuildFile,
+      defaultEntryName,
+      serverBundleEntries: artifacts.serverBundleEntries,
+    }),
+    createVirtualModules: (publicPath: string, _jsDistPath: string) =>
+      createClassicVirtualModules({
+        allowedActionOrigins: allowedActionOriginsForBuild,
+        appDirectory,
+        assetsBuildDirectory,
+        basename,
+        devHmrRuntimeModule: devHmr?.runtimeModule,
+        entryServerPath,
+        future,
+        isSpaMode,
+        prerenderPaths: artifacts.prerenderPaths,
+        publicPath,
+        routeDiscovery,
+        routes,
+        routesByServerBundleId: artifacts.routesByServerBundleId,
+        ssr,
+      }),
+    createResolveConfig: () => ({ alias: reactRouterAliases }),
+    server: customServer
+      ? undefined
+      : {
+          setup: [
+            createReactRouterDevServerSetup({
+              loadBuild: artifacts.devRuntime.createBuildLoader(),
+            }),
+          ],
+        },
+    webExternalsType: 'module',
+    webOutput: {
+      chunkFormat: 'module',
+      chunkLoading: 'import',
+      workerChunkLoading: 'import',
+      wasmLoading: 'fetch',
+      library: { type: 'module' },
+      module: true,
+    },
+    webOptimization: {
+      avoidEntryIife: true,
+      runtimeChunk: 'single',
+    },
+    nodeExternals: Array.from(
+      new Set(['express', ...getSsrExternals(process.cwd())])
+    ),
+    nodeDependencies: shouldDependOnWebCompiler
+      ? { dependencies: ['web'] }
+      : {},
+  };
+};
+
+export const createReactRouterModePlan = (
+  options: CreateReactRouterModePlanOptions
+): Promise<ReactRouterModePlan> =>
+  options.isRscMode
+    ? createRscModePlan(options)
+    : createClassicModePlan(options);

package/src/modify-browser-manifest.ts

@@ -1,11 +1,16 @@
+import { createHash } from 'node:crypto';
 import type { Route, PluginOptions } from './types.js';
 import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
 import {
+  createReactRouterManifestOptions,
   createReactRouterManifestStats,
   generateReactRouterManifestForDev,
   getReactRouterManifestChunkNames,
-  getReactRouterManifestForDev,
   getReactRouterManifestPath,
+  type ReactRouterManifestForDev as ReactRouterManifest,
+  type RouteChunkManifestOptions,
+  type RouteManifestModuleExports,
+  type RouteModuleAnalysisProvider,
 } from './manifest.js';
 import { combineURLs } from './plugin-utils.js';
 import jsesc from 'jsesc';
@@ -21,6 +26,7 @@ type StatsWithIntegrity = {
 
 type CompilationAssetWithIntegrity = {
   name: string;
+  source?: { source(): string | Buffer };
   info?: {
     integrity?: unknown;
   };
@@ -33,15 +39,14 @@ type CompilationWithIntegrityAssets =
   | Pick<Rspack.Compilation, 'getAssets'>;
 
 type ModifyBrowserManifestOptions = {
-  future?: { unstable_subResourceIntegrity?: boolean };
   subResourceIntegrity?: boolean;
+  future?: { unstable_subResourceIntegrity?: boolean };
   manifestChunkNames?: ReadonlySet<string>;
+  routeModuleAnalysis?: RouteModuleAnalysisProvider;
   onManifest?: (
-    manifest: Awaited<ReturnType<typeof getReactRouterManifestForDev>>,
+    manifest: ReactRouterManifest,
     sri: Record<string, string> | true | undefined,
-    moduleExportsByRouteId: Awaited<
-      ReturnType<typeof generateReactRouterManifestForDev>
-    >['moduleExportsByRouteId'],
+    moduleExportsByRouteId: RouteManifestModuleExports,
     context: {
       compilation: Rspack.Compilation;
       manifestStats: ReturnType<typeof createReactRouterManifestStats>;
@@ -51,18 +56,9 @@ type ModifyBrowserManifestOptions = {
 
 type ProcessAssetsApi = Pick<RsbuildPluginAPI, 'processAssets'>;
 type AssetPrefixInput = string | (() => string);
-type ReactRouterManifest = Awaited<
-  ReturnType<typeof getReactRouterManifestForDev>
->;
-type RouteManifestModuleExports = Awaited<
-  ReturnType<typeof generateReactRouterManifestForDev>
->['moduleExportsByRouteId'];
-type GeneratedManifest = {
-  manifest: ReactRouterManifest;
-  moduleExportsByRouteId: RouteManifestModuleExports;
-  manifestStats: ReturnType<typeof createReactRouterManifestStats>;
-  assetPrefix: string;
-};
+type ManifestProcessAssetsContext = Parameters<
+  Parameters<RsbuildPluginAPI['processAssets']>[1]
+>[0];
 
 const BROWSER_MANIFEST_ASSET =
   'static/js/virtual/react-router/browser-manifest.js';
@@ -85,12 +81,27 @@ const addIntegrity = (
   assetName: unknown,
   integrity: unknown
 ) => {
-  if (typeof assetName !== 'string' || typeof integrity !== 'string') {
+  if (
+    typeof assetName !== 'string' ||
+    !assetName.endsWith('.js') ||
+    typeof integrity !== 'string'
+  ) {
     return;
   }
   sri[toManifestAssetUrl(assetPrefix, assetName)] = integrity;
 };
 
+const computeSubresourceIntegrity = (
+  source: CompilationAssetWithIntegrity['source']
+): string | undefined => {
+  if (!source) {
+    return undefined;
+  }
+  return `sha384-${createHash('sha384')
+    .update(source.source())
+    .digest('base64')}`;
+};
+
 export const collectSubresourceIntegrity = (
   stats: StatsWithIntegrity | undefined,
   compilation: CompilationWithIntegrityAssets | undefined,
@@ -106,7 +117,15 @@ export const collectSubresourceIntegrity = (
     const assets =
       compilation.getAssets() as readonly CompilationAssetWithIntegrity[];
     for (const asset of assets) {
-      addIntegrity(sri, assetPrefix, asset.name, asset.info?.integrity);
+      if (!asset.name.endsWith('.js')) {
+        continue;
+      }
+      addIntegrity(
+        sri,
+        assetPrefix,
+        asset.name,
+        computeSubresourceIntegrity(asset.source) ?? asset.info?.integrity
+      );
     }
   }
 
@@ -119,7 +138,7 @@ export function registerModifyBrowserManifestAssets(
   pluginOptions: PluginOptions,
   appDirectory: string,
   assetPrefix: AssetPrefixInput = '/',
-  routeChunkOptions?: Parameters<typeof getReactRouterManifestForDev>[5],
+  routeChunkOptions?: RouteChunkManifestOptions,
   options?: ModifyBrowserManifestOptions
 ): void {
   const getAssetPrefix =
@@ -130,117 +149,104 @@ export function registerModifyBrowserManifestAssets(
       routes,
       routeChunkOptions?.splitRouteModules
     );
+  const isBuild = Boolean(routeChunkOptions?.isBuild);
   const finalizeSri = Boolean(
-    routeChunkOptions?.isBuild &&
+    isBuild &&
     (options?.subResourceIntegrity ??
       options?.future?.unstable_subResourceIntegrity)
   );
-  const generatedManifests = finalizeSri
-    ? new WeakMap<Rspack.Compilation, GeneratedManifest>()
-    : undefined;
-
-  api.processAssets(
-    { stage: 'additions', environments: ['web'] },
-    async ({ assets, sources, compilation }) => {
-      const currentAssetPrefix = getAssetPrefix();
-      const stats = createReactRouterManifestStats(
-        compilation,
-        manifestChunkNames
+
+  // Build the React Router manifest from the compilation's current asset names,
+  // emit the build-mode `manifest-<version>.js` asset (or replace the dev
+  // browser-manifest placeholder), and fire the `onManifest` callback.
+  const buildAndEmitManifest = async (
+    { assets, sources, compilation }: ManifestProcessAssetsContext,
+    { withSri }: { withSri: boolean }
+  ): Promise<void> => {
+    const currentAssetPrefix = getAssetPrefix();
+    const stats = createReactRouterManifestStats(
+      compilation,
+      manifestChunkNames
+    );
+    const { manifest, moduleExportsByRouteId } =
+      await generateReactRouterManifestForDev(
+        routes,
+        pluginOptions,
+        stats,
+        appDirectory,
+        currentAssetPrefix,
+        createReactRouterManifestOptions({
+          routeChunks: routeChunkOptions,
+          routeModuleAnalysis: options?.routeModuleAnalysis,
+        })
       );
-      const { manifest, moduleExportsByRouteId } =
-        await generateReactRouterManifestForDev(
-          routes,
-          pluginOptions,
-          stats,
-          appDirectory,
-          currentAssetPrefix,
-          routeChunkOptions
-        );
-      const manifestForBrowser = finalizeSri
-        ? { ...manifest, sri: true as const }
-        : manifest;
-
-      const browserManifestAsset = assets[BROWSER_MANIFEST_ASSET];
-      if (browserManifestAsset) {
-        const originalSource = browserManifestAsset.source().toString();
-        const serializedManifest = jsesc(manifestForBrowser, { es6: true });
-        const newSource = originalSource.replace(
-          /["'`]PLACEHOLDER["'`]/,
-          () => serializedManifest
-        );
-        compilation.updateAsset(
-          BROWSER_MANIFEST_ASSET,
-          new sources.RawSource(newSource)
-        );
-      }
+    const browserManifest = { ...manifest };
+    delete browserManifest.sri;
+
+    const browserManifestAsset = assets[BROWSER_MANIFEST_ASSET];
+    if (browserManifestAsset) {
+      const originalSource = browserManifestAsset.source().toString();
+      const serializedManifest = jsesc(browserManifest, { es6: true });
+      const newSource = originalSource.replace(
+        /["'`]PLACEHOLDER["'`]/,
+        () => serializedManifest
+      );
+      compilation.updateAsset(
+        BROWSER_MANIFEST_ASSET,
+        new sources.RawSource(newSource)
+      );
+    }
 
-      if (routeChunkOptions?.isBuild) {
-        const entryAssets = stats?.assetsByChunkName?.['entry.client'];
-        const entryJsAssets =
-          entryAssets?.filter(asset => asset.endsWith('.js')) || [];
-        const manifestPath = getReactRouterManifestPath({
-          version: manifest.version,
-          isBuild: true,
-          entryModulePath: entryJsAssets[0],
-        });
-        const manifestSource = `window.__reactRouterManifest=${jsesc(
-          manifestForBrowser,
-          { es6: true }
-        )};`;
-        const source = new sources.RawSource(manifestSource);
-        if (compilation.getAsset(manifestPath)) {
-          compilation.updateAsset(manifestPath, source);
-        } else {
-          compilation.emitAsset(manifestPath, source);
-        }
+    if (isBuild) {
+      const entryAssets = stats?.assetsByChunkName?.['entry.client'];
+      const entryJsAssets =
+        entryAssets?.filter(asset => asset.endsWith('.js')) || [];
+      const manifestPath = getReactRouterManifestPath({
+        version: manifest.version,
+        isBuild: true,
+        entryModulePath: entryJsAssets[0],
+      });
+      const manifestSource = `window.__reactRouterManifest=${jsesc(
+        browserManifest,
+        { es6: true }
+      )};`;
+      const source = new sources.RawSource(manifestSource);
+      if (compilation.getAsset(manifestPath)) {
+        compilation.updateAsset(manifestPath, source);
+      } else {
+        compilation.emitAsset(manifestPath, source);
       }
+    }
 
-      if (generatedManifests) {
-        generatedManifests.set(compilation, {
-          manifest,
-          moduleExportsByRouteId,
-          manifestStats: stats,
-          assetPrefix: currentAssetPrefix,
-        });
-        return;
-      }
+    // Rspack's SRI stats are finalized by a later report-stage hook. Hash the
+    // finalized JavaScript sources here as a fallback, matching React Router's
+    // Vite integration. Browser manifests intentionally omit `sri`; hydration
+    // receives it from the server-rendered import map.
+    const sri = withSri
+      ? (collectSubresourceIntegrity(
+          compilation.getStats().toJson({
+            all: false,
+            assets: true,
+          }) as StatsWithIntegrity,
+          compilation,
+          currentAssetPrefix
+        ) ?? true)
+      : undefined;
+
+    options?.onManifest?.(manifest, sri, moduleExportsByRouteId, {
+      compilation,
+      manifestStats: stats,
+    });
+  };
 
-      options?.onManifest?.(manifest, undefined, moduleExportsByRouteId, {
-        compilation,
-        manifestStats: stats,
-      });
-    }
+  // In production, Rspack renames content-hashed assets during
+  // `realContentHash` (PROCESS_ASSETS_STAGE_OPTIMIZE_HASH = 2500). Reading
+  // asset names before that stage yields pre-rename hashes that never appear
+  // in the output, so CSS/JS URLs in the manifest 404. In dev, CSS extraction
+  // can also attach entry CSS after `additions`. Defer manifest generation and
+  // emission to the `report` stage (PROCESS_ASSETS_STAGE_REPORT = 5000), which
+  // runs after the rename, late CSS attachment, and SRI integrity finalization.
+  api.processAssets({ stage: 'report', environments: ['web'] }, context =>
+    buildAndEmitManifest(context, { withSri: finalizeSri })
   );
-
-  if (generatedManifests) {
-    api.processAssets(
-      { stage: 'report', environments: ['web'] },
-      ({ compilation }) => {
-        const generatedManifest = generatedManifests.get(compilation);
-        if (!generatedManifest) {
-          return;
-        }
-
-        generatedManifests.delete(compilation);
-        const sri =
-          collectSubresourceIntegrity(
-            undefined,
-            compilation,
-            generatedManifest.assetPrefix
-          ) ?? true;
-        options?.onManifest?.(
-          {
-            ...generatedManifest.manifest,
-            sri,
-          },
-          sri,
-          generatedManifest.moduleExportsByRouteId,
-          {
-            compilation,
-            manifestStats: generatedManifest.manifestStats,
-          }
-        );
-      }
-    );
-  }
 }