rsbuild-plugin-react-router 0.7.2 → 0.8.0

package/src/manifest-assets.ts

@@ -0,0 +1,228 @@
+import { DEFAULT_JS_DIST_PATH } from './constants.js';
+
+export type ReactRouterManifestStats = {
+  assetsByChunkName?: Record<string, string[]>;
+  entrypointFilesByName?: Record<string, string[]>;
+  assetTypesByName?: Record<string, string>;
+};
+
+type ManifestStatsChunk = {
+  files?: Iterable<string>;
+};
+type ManifestStatsEntrypoint = {
+  getFiles?: () => Iterable<string>;
+};
+type ManifestStatsLookup<T> = Iterable<[string, T | null | undefined]> & {
+  get?: (name: string) => T | null | undefined;
+};
+type ManifestStatsCompilation = {
+  namedChunks: ManifestStatsLookup<ManifestStatsChunk>;
+  entrypoints?: ManifestStatsLookup<ManifestStatsEntrypoint>;
+  getAsset?: (name: string) => {
+    name?: string;
+    info?: { assetType?: string; javascriptModule?: boolean };
+  } | void;
+};
+
+export const stripAssetQuery = (name: string): string =>
+  name.replace(/[?#].*$/, '');
+
+export const getManifestAssetType = (
+  name: string,
+  assetTypesByName?: Readonly<Record<string, string>>
+): string | undefined => {
+  if (/\.hot-update\.[cm]?js(?:[?#]|$)/.test(name)) return undefined;
+  const assetType = assetTypesByName?.[name];
+  if (assetType !== undefined) {
+    return assetType === 'extract-css' ? 'css' : assetType;
+  }
+
+  // Synthetic stats and older bundlers may not supply asset metadata.
+  const path = stripAssetQuery(name);
+  if (/\.[cm]?js$/.test(path)) {
+    return 'javascript';
+  }
+  return path.endsWith('.css') ? 'css' : undefined;
+};
+
+const orderChunkFiles = (
+  chunkName: string,
+  files: string[],
+  assetTypesByName: Record<string, string>
+): string[] => {
+  const ownFileIndex = files.findIndex(
+    file =>
+      getManifestAssetType(file, assetTypesByName) === 'javascript' &&
+      stripAssetQuery(file)
+        .replace(/\.[^.]+$/, '')
+        .endsWith(chunkName)
+  );
+  if (ownFileIndex <= 0) {
+    return files;
+  }
+  return [
+    files[ownFileIndex],
+    ...files.slice(0, ownFileIndex),
+    ...files.slice(ownFileIndex + 1),
+  ];
+};
+
+const collectManifestFilesByName = <T>(
+  items: ManifestStatsLookup<T>,
+  names: ReadonlySet<string> | undefined,
+  getFiles: (item: T) => string[]
+): Record<string, string[]> => {
+  const filesByName: Record<string, string[]> = {};
+  if (!names) {
+    for (const [name, item] of items) {
+      if (item == null) continue;
+      filesByName[name] = getFiles(item);
+    }
+    return filesByName;
+  }
+
+  const missingNames = new Set(names);
+  if (typeof items.get === 'function') {
+    for (const name of names) {
+      const item = items.get(name);
+      if (!item) {
+        continue;
+      }
+      if (item == null) continue;
+      filesByName[name] = getFiles(item);
+      missingNames.delete(name);
+    }
+  }
+  if (missingNames.size === 0) {
+    return filesByName;
+  }
+
+  for (const [name, item] of items) {
+    if (!missingNames.has(name)) {
+      continue;
+    }
+    if (item == null) continue;
+    filesByName[name] = getFiles(item);
+    missingNames.delete(name);
+    if (missingNames.size === 0) {
+      break;
+    }
+  }
+  return filesByName;
+};
+
+export const createReactRouterManifestStats = (
+  compilation: ManifestStatsCompilation | undefined,
+  chunkNames?: ReadonlySet<string>
+): ReactRouterManifestStats | undefined => {
+  if (!compilation) {
+    return undefined;
+  }
+
+  const assetsByChunkName = collectManifestFilesByName(
+    compilation.namedChunks,
+    chunkNames,
+    chunk => Array.from(chunk.files ?? [])
+  );
+  const entrypointFilesByName = compilation.entrypoints
+    ? collectManifestFilesByName(
+        compilation.entrypoints,
+        chunkNames,
+        entrypoint => Array.from(entrypoint.getFiles?.() ?? [])
+      )
+    : {};
+  const assetTypesByName: Record<string, string> = {};
+  if (compilation.getAsset) {
+    const files = new Set([
+      ...Object.values(assetsByChunkName).flat(),
+      ...Object.values(entrypointFilesByName).flat(),
+    ]);
+    for (const file of files) {
+      const info = compilation.getAsset(file)?.info;
+      const assetType =
+        info?.assetType ??
+        (typeof info?.javascriptModule === 'boolean'
+          ? 'javascript'
+          : undefined);
+      if (assetType !== undefined) {
+        assetTypesByName[file] = assetType;
+      }
+    }
+  }
+  for (const [chunkName, files] of Object.entries(assetsByChunkName)) {
+    assetsByChunkName[chunkName] = orderChunkFiles(
+      chunkName,
+      files,
+      assetTypesByName
+    );
+  }
+
+  return {
+    assetsByChunkName,
+    ...(Object.keys(entrypointFilesByName).length > 0
+      ? { entrypointFilesByName }
+      : {}),
+    ...(Object.keys(assetTypesByName).length > 0 ? { assetTypesByName } : {}),
+  };
+};
+
+type ChunkAssets = { js: string[]; css: string[] };
+
+export const createChunkAssetResolver = (
+  clientStats: ReactRouterManifestStats | undefined,
+  includeEntrypointJavaScript: boolean
+): ((chunkName: string) => ChunkAssets) => {
+  const chunkAssetsByName = new Map<string, ChunkAssets>();
+  const getAssetType = (name: string) =>
+    getManifestAssetType(name, clientStats?.assetTypesByName);
+
+  return (chunkName: string): ChunkAssets => {
+    const cached = chunkAssetsByName.get(chunkName);
+    if (cached) {
+      return cached;
+    }
+    const assets = clientStats?.assetsByChunkName?.[chunkName];
+    if (!assets) {
+      const result = {
+        js: [`${DEFAULT_JS_DIST_PATH}/${chunkName}.js`],
+        css: [],
+      };
+      chunkAssetsByName.set(chunkName, result);
+      return result;
+    }
+
+    const cssAssets = new Set<string>();
+    const jsAssets: string[] = [];
+    for (const asset of assets) {
+      const assetType = getAssetType(asset);
+      if (assetType === 'css') {
+        cssAssets.add(asset);
+      } else if (assetType === 'javascript') {
+        jsAssets.push(asset);
+      }
+    }
+
+    if (jsAssets.length === 0) {
+      throw new Error(
+        `[react-router] Chunk "${chunkName}" emitted no JavaScript asset the browser manifest can reference (files: ${assets.join(', ') || 'none'}). Check the web \`output.filename.js\` scheme.`
+      );
+    }
+    // Entrypoint files contain the synchronous chunk group, not async children.
+    // Keep the route's own module first even when the runtime is listed first.
+    for (const asset of clientStats?.entrypointFilesByName?.[chunkName] ?? []) {
+      const assetType = getAssetType(asset);
+      if (assetType === 'css') {
+        cssAssets.add(asset);
+      } else if (includeEntrypointJavaScript && assetType === 'javascript') {
+        jsAssets.push(asset);
+      }
+    }
+
+    const result = {
+      js: [...new Set(jsAssets)],
+      css: [...cssAssets],
+    };
+    chunkAssetsByName.set(chunkName, result);
+    return result;
+  };
+};

package/src/manifest-snapshot.ts

@@ -0,0 +1,80 @@
+import type {
+  ReactRouterManifestForDev,
+  RouteManifestModuleExports,
+} from './manifest.js';
+import type { ReactRouterServerBuildPlan } from './server-build-plan.js';
+import type { Route } from './types.js';
+
+export type ReactRouterManifestSnapshot = {
+  browser: ReactRouterManifestForDev;
+  moduleExportsByRouteId: RouteManifestModuleExports;
+  server: ReactRouterManifestForDev;
+  serverByBundleId: Readonly<Record<string, ReactRouterManifestForDev>>;
+  serverByEntryName: Readonly<Record<string, ReactRouterManifestForDev>>;
+};
+
+export const createReactRouterManifestSnapshot = ({
+  manifest,
+  sri,
+  moduleExportsByRouteId,
+  serverBuildPlan,
+  routesByServerBundleId,
+}: {
+  manifest: ReactRouterManifestForDev;
+  sri: ReactRouterManifestForDev['sri'];
+  moduleExportsByRouteId: RouteManifestModuleExports;
+  serverBuildPlan: Pick<
+    ReactRouterServerBuildPlan,
+    'defaultEntryName' | 'serverBundleEntries'
+  >;
+  routesByServerBundleId: Readonly<
+    Record<string, Readonly<Record<string, Route>>>
+  >;
+}): ReactRouterManifestSnapshot => {
+  // Detach caller-owned data once so every derived view belongs to this snapshot.
+  const { server, moduleExportsByRouteId: detachedModuleExports } =
+    structuredClone({
+      server: { ...manifest, sri },
+      moduleExportsByRouteId,
+    });
+  const browser: ReactRouterManifestForDev = {
+    ...server,
+    sri: undefined,
+  };
+  const bundles = serverBuildPlan.serverBundleEntries.flatMap(
+    ({ bundleId, entryName }) => {
+      const bundleRoutes = routesByServerBundleId[bundleId];
+      if (!bundleRoutes) {
+        return [];
+      }
+
+      return [
+        {
+          bundleId,
+          entryName,
+          manifest: {
+            ...server,
+            routes: Object.fromEntries(
+              Object.entries(server.routes).filter(([routeId]) =>
+                Object.hasOwn(bundleRoutes, routeId)
+              )
+            ),
+          },
+        },
+      ];
+    }
+  );
+
+  return {
+    browser,
+    moduleExportsByRouteId: detachedModuleExports,
+    server,
+    serverByBundleId: Object.fromEntries(
+      bundles.map(({ bundleId, manifest }) => [bundleId, manifest])
+    ),
+    serverByEntryName: Object.fromEntries([
+      [serverBuildPlan.defaultEntryName, server],
+      ...bundles.map(({ entryName, manifest }) => [entryName, manifest]),
+    ]),
+  };
+};

package/src/manifest-state.ts

@@ -0,0 +1,71 @@
+import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
+import type { ReactRouterManifestSnapshot } from './manifest-snapshot.js';
+
+type ReactRouterManifestState = {
+  stage(
+    compilation: Rspack.Compilation,
+    snapshot: ReactRouterManifestSnapshot
+  ): void;
+  read(): ReactRouterManifestSnapshot | null;
+};
+
+export const createReactRouterManifestState = ({
+  api,
+  isBuild,
+  onPublish,
+}: {
+  api: Pick<
+    RsbuildPluginAPI,
+    'onBeforeEnvironmentCompile' | 'onAfterEnvironmentCompile'
+  >;
+  isBuild: boolean;
+  onPublish: (
+    compilation: Rspack.Compilation,
+    snapshot: ReactRouterManifestSnapshot
+  ) => void;
+}): ReactRouterManifestState => {
+  let latest: ReactRouterManifestSnapshot | null = null;
+  const pending = new WeakMap<
+    Rspack.Compilation,
+    ReactRouterManifestSnapshot
+  >();
+  const publish = (
+    compilation: Rspack.Compilation,
+    snapshot: ReactRouterManifestSnapshot
+  ) => {
+    latest = snapshot;
+    onPublish(compilation, snapshot);
+  };
+
+  if (isBuild) {
+    api.onBeforeEnvironmentCompile(({ environment }) => {
+      if (environment.name === 'web') {
+        // A failed web rebuild must not expose the previous build's manifest.
+        // A node-only rebuild may continue using the last successful snapshot.
+        latest = null;
+      }
+    });
+  }
+  api.onAfterEnvironmentCompile(({ environment, stats }) => {
+    if (environment.name !== 'web') {
+      return;
+    }
+    const snapshot =
+      stats && !stats.hasErrors() ? pending.get(stats.compilation) : undefined;
+    if (stats) {
+      pending.delete(stats.compilation);
+    }
+    if (snapshot && stats) {
+      publish(stats.compilation, snapshot);
+    } else if (isBuild) {
+      latest = null;
+    }
+  });
+
+  return {
+    stage(compilation, snapshot) {
+      pending.set(compilation, snapshot);
+    },
+    read: () => latest,
+  };
+};

package/src/manifest.ts

@@ -1,3 +1,14 @@
+import {
+  createChunkAssetResolver,
+  type ReactRouterManifestStats,
+  stripAssetQuery,
+  getManifestAssetType,
+} from './manifest-assets.js';
+export {
+  createReactRouterManifestStats,
+  type ReactRouterManifestStats,
+} from './manifest-assets.js';
+import { BROWSER_MANIFEST_ENTRY_NAME } from './constants.js';
 import { createHash } from 'node:crypto';
 import { dirname, isAbsolute, relative, resolve } from 'pathe';
 import * as Effect from 'effect/Effect';
@@ -143,30 +154,6 @@ export type ReactRouterManifestForDev = {
   routes: Record<string, RouteManifestItem>;
 };
 
-export type ReactRouterManifestStats = {
-  assetsByChunkName?: Record<string, string[]>;
-  entrypointFilesByName?: Record<string, string[]>;
-};
-
-type ReactRouterManifestStatsChunk = {
-  files?: Iterable<string>;
-};
-
-type ReactRouterManifestStatsEntrypoint = {
-  getFiles?: () => Iterable<string>;
-};
-
-type ReactRouterManifestStatsLookup<T> = Iterable<
-  [string, T | null | undefined]
-> & {
-  get?: (name: string) => T | null | undefined;
-};
-
-type ReactRouterManifestStatsCompilation = {
-  namedChunks: ReactRouterManifestStatsLookup<ReactRouterManifestStatsChunk>;
-  entrypoints?: ReactRouterManifestStatsLookup<ReactRouterManifestStatsEntrypoint>;
-};
-
 // Emitted asset names may carry a query (`output.filename.js:
 // '[name].js?v=[contenthash:8]'`); classify on the pathname but keep the full
 // reference, since the query is part of the URL the browser must request.
@@ -252,81 +239,6 @@ export const collectUnsupportedRscScriptAssets = (
   return [...unsupported];
 };
 
-const collectManifestFilesByName = <T>(
-  items: ReactRouterManifestStatsLookup<T>,
-  names: ReadonlySet<string> | undefined,
-  getFiles: (name: string, item: T) => string[]
-): Record<string, string[]> => {
-  const filesByName: Record<string, string[]> = {};
-  if (!names) {
-    for (const [name, item] of items) {
-      if (item == null) {
-        continue;
-      }
-      filesByName[name] = getFiles(name, item);
-    }
-    return filesByName;
-  }
-
-  const missingNames = new Set(names);
-  if (typeof items.get === 'function') {
-    for (const name of names) {
-      const item = items.get(name);
-      if (item == null) {
-        continue;
-      }
-      filesByName[name] = getFiles(name, item);
-      missingNames.delete(name);
-    }
-  }
-
-  if (missingNames.size === 0) {
-    return filesByName;
-  }
-
-  for (const [name, item] of items) {
-    if (!missingNames.has(name)) {
-      continue;
-    }
-    if (item == null) {
-      continue;
-    }
-    filesByName[name] = getFiles(name, item);
-    missingNames.delete(name);
-    if (missingNames.size === 0) {
-      break;
-    }
-  }
-
-  return filesByName;
-};
-
-export const createReactRouterManifestStats = (
-  compilation: ReactRouterManifestStatsCompilation | undefined,
-  chunkNames?: ReadonlySet<string>
-): ReactRouterManifestStats | undefined => {
-  if (!compilation) {
-    return undefined;
-  }
-
-  const assetsByChunkName = collectManifestFilesByName(
-    compilation.namedChunks,
-    chunkNames,
-    (_chunkName, chunk) => Array.from(chunk.files ?? [])
-  );
-  const entrypointFilesByName = compilation.entrypoints
-    ? collectManifestFilesByName(
-        compilation.entrypoints,
-        chunkNames,
-        (_name, entrypoint) => Array.from(entrypoint.getFiles?.() ?? [])
-      )
-    : {};
-
-  return Object.keys(entrypointFilesByName).length > 0
-    ? { assetsByChunkName, entrypointFilesByName }
-    : { assetsByChunkName };
-};
-
 export type RouteManifestModuleExports = Record<string, readonly string[]>;
 
 export type ReactRouterManifestGenerationResult = {
@@ -334,11 +246,6 @@ export type ReactRouterManifestGenerationResult = {
   moduleExportsByRouteId: RouteManifestModuleExports;
 };
 
-type ChunkAssets = {
-  js: string[];
-  css: string[];
-};
-
 type RouteManifestAnalysis = {
   cssAssets: string[];
   exports: Set<string>;
@@ -351,61 +258,6 @@ type RouteManifestAnalysis = {
 const DEFAULT_MANIFEST_DIR = DEFAULT_JS_DIST_PATH;
 const CSS_IMPORT_RE = /\.(?:css|less|sass|scss)(?:\?[^'"`]+)?['"`]/;
 
-const createChunkAssetResolver = (
-  clientStats: ReactRouterManifestStats | undefined,
-  includeEntrypointJs: boolean
-): ((chunkName: string) => ChunkAssets) => {
-  const chunkAssetsByName = new Map<string, ChunkAssets>();
-
-  return (chunkName: string): ChunkAssets => {
-    const cached = chunkAssetsByName.get(chunkName);
-    if (cached) {
-      return cached;
-    }
-
-    const assets = clientStats?.assetsByChunkName?.[chunkName];
-    if (!assets) {
-      const fallback = `${DEFAULT_MANIFEST_DIR}/${chunkName}.js`;
-      const result = { js: [fallback], css: [] };
-      chunkAssetsByName.set(chunkName, result);
-      return result;
-    }
-
-    const cssAssets = new Set<string>();
-    const jsAssets = new Set<string>();
-    // The chunk's own files come first so `js[0]` is the route module itself;
-    // entrypoint files (runtime, shared vendor chunks) follow as `imports`.
-    for (const asset of assets) {
-      if (isManifestCssAsset(asset)) {
-        cssAssets.add(asset);
-      } else if (isManifestJsAsset(asset)) {
-        jsAssets.add(asset);
-      }
-    }
-    for (const asset of clientStats?.entrypointFilesByName?.[chunkName] ?? []) {
-      if (isManifestCssAsset(asset)) {
-        cssAssets.add(asset);
-      } else if (includeEntrypointJs && isManifestJsAsset(asset)) {
-        jsAssets.add(asset);
-      }
-    }
-    if (jsAssets.size === 0) {
-      // Compilation metadata exists for this chunk but names no module script.
-      // Guessing `<dir>/<chunk>.js` here would turn an identifiable build
-      // problem into a browser 404, so surface it at build time instead.
-      throw new Error(
-        `[react-router] Chunk "${chunkName}" emitted no JavaScript asset the browser manifest can reference (files: ${
-          assets.join(', ') || 'none'
-        }). Check the web \`output.filename.js\` scheme.`
-      );
-    }
-
-    const result = { js: [...jsAssets], css: [...cssAssets] };
-    chunkAssetsByName.set(chunkName, result);
-    return result;
-  };
-};
-
 const analyzeRouteForManifestEffect = ({
   discoveredCssAssets,
   isBuild,
@@ -696,14 +548,24 @@ function generateReactRouterManifestForDevEffect(
     const manifestPath = getReactRouterManifestPath({
       version,
       isBuild,
-      entryModulePath: entryJsAssets[0],
+      entryModulePath: stripAssetQuery(entryJsAssets[0] ?? ''),
     });
 
+    const browserManifestPath =
+      clientStats?.assetsByChunkName?.[BROWSER_MANIFEST_ENTRY_NAME]?.find(
+        name =>
+          getManifestAssetType(name, clientStats.assetTypesByName) ===
+          'javascript'
+      ) ?? manifestPath;
+    // Report-stage serialization happens after hashing, so retain the version
+    // query even when the virtual manifest has a content-hashed filename.
     const manifest = {
       version,
       url: combineURLs(
         assetPrefix,
-        isBuild ? manifestPath : `${manifestPath}?v=${version}`
+        isBuild
+          ? manifestPath
+          : `${browserManifestPath}${browserManifestPath.includes('?') ? '&' : '?'}v=${version}`
       ),
       hmr: undefined,
       entry: fingerprintedValues.entry,

package/src/mode-plan.ts

@@ -113,9 +113,14 @@ type CreateReactRouterModePlanOptions =
 
 const RSC_LAYERS = rspack.experiments.rsc.Layers;
 
-const createReactRouterPackageAliases = (): Record<string, string> => {
-  const reactRouterPath = resolveAppPackagePath('react-router');
-  const reactRouterDomPath = resolveAppPackagePath('react-router/dom');
+const createReactRouterPackageAliases = (
+  rootPath: string
+): Record<string, string> => {
+  const reactRouterPath = resolveAppPackagePath('react-router', rootPath);
+  const reactRouterDomPath = resolveAppPackagePath(
+    'react-router/dom',
+    rootPath
+  );
   return {
     ...(reactRouterPath ? { 'react-router$': reactRouterPath } : {}),
     ...(reactRouterDomPath ? { 'react-router/dom$': reactRouterDomPath } : {}),
@@ -284,7 +289,9 @@ const createClassicModePlan = async ({
     ssr,
     devHmr,
   });
-  const reactRouterAliases = createReactRouterPackageAliases();
+  const reactRouterAliases = createReactRouterPackageAliases(
+    api.context.rootPath
+  );
   return {
     kind: 'classic',
     artifacts,
@@ -334,6 +341,7 @@ const createClassicModePlan = async ({
           setup: [
             createReactRouterDevServerSetup({
               loadBuild: artifacts.devRuntime.createBuildLoader(),
+              rootPath: api.context.rootPath,
             }),
           ],
         },