rsbuild-plugin-react-router 0.5.0 → 0.6.1

package/src/lazy-compilation-prewarm.ts

@@ -1,7 +1,12 @@
 import * as Effect from 'effect/Effect';
+import type * as Scope from 'effect/Scope';
 import type { ReactRouterManifestForDev } from './manifest.js';
 import type { RouteManifestItem } from './types.js';
-import { createDelayedPluginTask, tryPluginPromise } from './effect-runtime.js';
+import {
+  createDelayedPluginTask,
+  type PluginEffectRuntime,
+  tryPluginPromise,
+} from './effect-runtime.js';
 
 const DEFAULT_LAZY_COMPILATION_TRIGGER_PREFIX = '/_rspack/lazy/trigger';
 const DEFAULT_PREWARM_DELAY_MS = 0;
@@ -9,17 +14,17 @@ const DEFAULT_ROUTE_PREWARM_LIMIT = 8;
 const PREWARM_FETCH_CONCURRENCY = 8;
 const PREWARM_TRIGGER_CANDIDATES = 4;
 
-type LazyCompilationPrewarmConfig = {
+export type LazyCompilationPrewarmConfig = {
   entry: boolean;
   routeLimit: number;
   delayMs: number;
 };
 
-type LazyCompilationPrewarmController = {
+export type LazyCompilationPrewarmController = {
   setServerOrigin(origin: string): void;
   setManifest(manifest: ReactRouterManifestForDev | null): void;
   schedule(): void;
-  cancelEffect(): Effect.Effect<void, Error, never>;
+  cancelEffect(): Effect.Effect<void>;
 };
 
 export type RspackLazyCompilationTriggerClient = {
@@ -221,9 +226,11 @@ const prewarmLazyCompilation = ({
   });
 
 export const createLazyCompilationPrewarmController = ({
+  runtime,
   config,
   onError,
 }: {
+  runtime: PluginEffectRuntime;
   config: LazyCompilationPrewarmConfig;
   onError: (error: Error) => void;
 }): LazyCompilationPrewarmController => {
@@ -231,6 +238,7 @@ export const createLazyCompilationPrewarmController = ({
   let manifest: ReactRouterManifestForDev | null = null;
   let lastPrewarmAssetsKey: string | undefined;
   const task = createDelayedPluginTask({
+    runtime,
     delayMs: config.delayMs,
     run: () =>
       Effect.gen(function* () {
@@ -277,3 +285,11 @@ export const createLazyCompilationPrewarmController = ({
     },
   };
 };
+
+export const acquireLazyCompilationPrewarm = (
+  options: Parameters<typeof createLazyCompilationPrewarmController>[0]
+): Effect.Effect<LazyCompilationPrewarmController, never, Scope.Scope> =>
+  Effect.acquireRelease(
+    Effect.sync(() => createLazyCompilationPrewarmController(options)),
+    controller => controller.cancelEffect()
+  );

package/src/manifest.ts

@@ -3,18 +3,27 @@ import { dirname, isAbsolute, relative, resolve } from 'pathe';
 import * as Effect from 'effect/Effect';
 import type { Route, PluginOptions, RouteManifestItem } from './types.js';
 import { combineURLs, createRouteId } from './plugin-utils.js';
-import { SERVER_EXPORTS, CLIENT_EXPORTS } from './constants.js';
+import {
+  CLIENT_EXPORTS,
+  DEFAULT_JS_DIST_PATH,
+  SERVER_EXPORTS,
+} from './constants.js';
 import {
   buildManifestChunkValidity,
   createEmptyRouteChunkByExportName,
   detectRouteChunksIfEnabled,
   getRouteChunkEntryName,
+  getRouteEntryBaseName,
   routeChunkExportNames,
   validateRouteChunks,
   type RouteChunkCache,
   type RouteChunkConfig,
+  type RouteChunkExportName,
 } from './route-chunks.js';
-import { getRouteModuleAnalysis } from './export-utils.js';
+import {
+  getRouteModuleAnalysis,
+  type RouteModuleAnalysis,
+} from './export-utils.js';
 import { getCappedPluginConcurrency } from './concurrency.js';
 import { runPluginEffect, tryPluginPromise } from './effect-runtime.js';
 
@@ -87,13 +96,38 @@ export function configRoutesToRouteManifestEntries(
   return routeManifestEntries;
 }
 
-type RouteChunkManifestOptions = {
+export type RouteChunkManifestOptions = {
   splitRouteModules?: boolean | 'enforce';
   rootRouteFile?: string;
   isBuild?: boolean;
   cache?: RouteChunkCache;
 };
 
+export type RouteModuleAnalysisProvider = (
+  routeFilePath: string,
+  route: Route
+) => Promise<RouteModuleAnalysis | undefined>;
+
+export type ReactRouterManifestOptions = RouteChunkManifestOptions & {
+  routeModuleAnalysis?: RouteModuleAnalysisProvider;
+};
+
+export const createReactRouterManifestOptions = ({
+  routeChunks,
+  routeModuleAnalysis,
+}: {
+  routeChunks?: RouteChunkManifestOptions;
+  routeModuleAnalysis?: RouteModuleAnalysisProvider;
+}): ReactRouterManifestOptions | undefined => {
+  if (!routeChunks && !routeModuleAnalysis) {
+    return undefined;
+  }
+  return {
+    ...routeChunks,
+    ...(routeModuleAnalysis ? { routeModuleAnalysis } : {}),
+  };
+};
+
 export type ReactRouterManifestForDev = {
   version: string;
   url: string;
@@ -122,8 +156,10 @@ type ReactRouterManifestStatsEntrypoint = {
   getFiles?: () => Iterable<string>;
 };
 
-type ReactRouterManifestStatsLookup<T> = Iterable<[string, T]> & {
-  get?: (name: string) => T | undefined;
+type ReactRouterManifestStatsLookup<T> = Iterable<
+  [string, T | null | undefined]
+> & {
+  get?: (name: string) => T | null | undefined;
 };
 
 type ReactRouterManifestStatsCompilation = {
@@ -153,6 +189,9 @@ const collectManifestFilesByName = <T>(
   const filesByName: Record<string, string[]> = {};
   if (!names) {
     for (const [name, item] of items) {
+      if (item == null) {
+        continue;
+      }
       filesByName[name] = getFiles(name, item);
     }
     return filesByName;
@@ -162,7 +201,7 @@ const collectManifestFilesByName = <T>(
   if (typeof items.get === 'function') {
     for (const name of names) {
       const item = items.get(name);
-      if (!item) {
+      if (item == null) {
         continue;
       }
       filesByName[name] = getFiles(name, item);
@@ -178,6 +217,9 @@ const collectManifestFilesByName = <T>(
     if (!missingNames.has(name)) {
       continue;
     }
+    if (item == null) {
+      continue;
+    }
     filesByName[name] = getFiles(name, item);
     missingNames.delete(name);
     if (missingNames.size === 0) {
@@ -236,11 +278,12 @@ type RouteManifestAnalysis = {
   > | null;
 };
 
-const DEFAULT_MANIFEST_DIR = 'static/js';
+const DEFAULT_MANIFEST_DIR = DEFAULT_JS_DIST_PATH;
 const CSS_IMPORT_RE = /\.(?:css|less|sass|scss)(?:\?[^'"`]+)?['"`]/;
 
 const createChunkAssetResolver = (
-  clientStats: ReactRouterManifestStats | undefined
+  clientStats: ReactRouterManifestStats | undefined,
+  includeEntrypointJs: boolean
 ): ((chunkName: string) => ChunkAssets) => {
   const chunkAssetsByName = new Map<string, ChunkAssets>();
 
@@ -259,24 +302,26 @@ const createChunkAssetResolver = (
     }
 
     const cssAssets = new Set<string>();
-    const jsAssets: string[] = [];
+    const jsAssets = new Set<string>();
     for (const asset of assets) {
       if (asset.endsWith('.css')) {
         cssAssets.add(asset);
       } else if (asset.endsWith('.js')) {
-        jsAssets.push(asset);
+        jsAssets.add(asset);
       }
     }
     for (const asset of clientStats?.entrypointFilesByName?.[chunkName] ?? []) {
       if (asset.endsWith('.css')) {
         cssAssets.add(asset);
+      } else if (includeEntrypointJs && asset.endsWith('.js')) {
+        jsAssets.add(asset);
       }
     }
-    if (jsAssets.length === 0) {
-      jsAssets.push(`${DEFAULT_MANIFEST_DIR}/${chunkName}.js`);
+    if (jsAssets.size === 0) {
+      jsAssets.add(`${DEFAULT_MANIFEST_DIR}/${chunkName}.js`);
     }
 
-    const result = { js: jsAssets, css: [...cssAssets] };
+    const result = { js: [...jsAssets], css: [...cssAssets] };
     chunkAssetsByName.set(chunkName, result);
     return result;
   };
@@ -289,6 +334,8 @@ const analyzeRouteForManifestEffect = ({
   routeChunkConfig,
   routeEntryName,
   routeFilePath,
+  route,
+  routeModuleAnalysis,
 }: {
   discoveredCssAssets: string[];
   isBuild: boolean;
@@ -296,10 +343,13 @@ const analyzeRouteForManifestEffect = ({
   routeChunkConfig: RouteChunkConfig | null;
   routeEntryName: string;
   routeFilePath: string;
+  route: Route;
+  routeModuleAnalysis?: RouteModuleAnalysisProvider;
 }): Effect.Effect<RouteManifestAnalysis, Error, never> =>
   tryPluginPromise(async () => {
     const { code, exports: exportNames } =
-      await getRouteModuleAnalysis(routeFilePath);
+      (await routeModuleAnalysis?.(routeFilePath, route)) ??
+      (await getRouteModuleAnalysis(routeFilePath));
     const cssAssets =
       !isBuild && discoveredCssAssets.length === 0 && CSS_IMPORT_RE.test(code)
         ? [
@@ -363,152 +413,181 @@ export const getReactRouterManifestPath = ({
   return `${dir}/manifest-${version}.js`;
 };
 
-const getManifestVersion = (
-  fingerprintedValues: { entry: unknown; routes: unknown },
-  isBuild: boolean
-): string => {
-  if (!isBuild) {
-    return String(Math.random());
-  }
-  return createHash('md5')
+// The version is derived from the manifest content in every mode. React
+// Router's stale-client detection compares the version the browser loaded with
+// the one the server build was pinned to, and answers a mismatch with a
+// document reload. In development the browser manifest asset is served from
+// the latest web compilation while the server build stays pinned to the
+// compilation it was committed with, so a random per-compilation version made
+// the two disagree whenever a web compilation completed without changing the
+// manifest (for example the hot data revalidation recompile that follows a
+// server change), reloading the document for no reason. Equal content now
+// yields an equal version, and a real manifest change still busts the browser
+// cache through the `?v=` query on the development manifest URL.
+const getManifestVersion = (fingerprintedValues: {
+  entry: unknown;
+  routes: unknown;
+}): string =>
+  createHash('md5')
     .update(JSON.stringify(fingerprintedValues))
     .digest('hex')
     .slice(0, 8);
-};
-
-const getRouteEntryName = (route: Route): string => {
-  const extensionIndex = route.file.lastIndexOf('.');
-  return extensionIndex >= 0 ? route.file.slice(0, extensionIndex) : route.file;
-};
 
 export const getReactRouterManifestChunkNames = (
   routes: Record<string, Route>,
+  appDirectory: string,
   splitRouteModules: boolean | 'enforce' = false
 ): Set<string> => {
   const chunkNames = new Set<string>(['entry.client']);
   for (const route of Object.values(routes)) {
-    chunkNames.add(getRouteEntryName(route));
+    chunkNames.add(getRouteEntryBaseName(route, appDirectory));
     if (!splitRouteModules || route.id === 'root') {
       continue;
     }
     for (const exportName of routeChunkExportNames) {
-      chunkNames.add(getRouteChunkEntryName(route.id, exportName));
+      chunkNames.add(getRouteChunkEntryName(route, exportName, appDirectory));
     }
   }
   return chunkNames;
 };
 
+const createRouteManifestItem = ({
+  route,
+  appDirectory,
+  assetPrefix,
+  jsAssets,
+  routeAnalysis,
+  getModulePathForChunk,
+  getCssAssetsForChunk,
+}: {
+  route: Route;
+  appDirectory: string;
+  assetPrefix: string;
+  jsAssets: string[];
+  routeAnalysis: RouteManifestAnalysis;
+  getModulePathForChunk: (chunkName: string) => string | undefined;
+  getCssAssetsForChunk: (chunkName: string) => string[];
+}): RouteManifestItem => {
+  const routeChunkMap = routeAnalysis.hasRouteChunkByExportName;
+  const chunkModulePath = (exportName: RouteChunkExportName) =>
+    routeChunkMap?.[exportName]
+      ? getModulePathForChunk(
+          getRouteChunkEntryName(route, exportName, appDirectory)
+        )
+      : undefined;
+  const cssAssets = [
+    ...routeAnalysis.cssAssets,
+    ...routeChunkExportNames.flatMap(exportName =>
+      routeChunkMap?.[exportName]
+        ? getCssAssetsForChunk(
+            getRouteChunkEntryName(route, exportName, appDirectory)
+          )
+        : []
+    ),
+  ];
+
+  return {
+    id: route.id,
+    parentId: route.parentId,
+    path: route.path,
+    index: route.index,
+    caseSensitive: route.caseSensitive,
+    module: combineURLs(assetPrefix, jsAssets[0] || ''),
+    clientActionModule: chunkModulePath('clientAction'),
+    clientLoaderModule: chunkModulePath('clientLoader'),
+    clientMiddlewareModule: chunkModulePath('clientMiddleware'),
+    hydrateFallbackModule: chunkModulePath('HydrateFallback'),
+    hasAction: routeAnalysis.exports.has(SERVER_EXPORTS.action),
+    hasLoader: routeAnalysis.exports.has(SERVER_EXPORTS.loader),
+    hasClientAction: routeAnalysis.exports.has(CLIENT_EXPORTS.clientAction),
+    hasClientLoader: routeAnalysis.exports.has(CLIENT_EXPORTS.clientLoader),
+    hasClientMiddleware: routeAnalysis.exports.has(
+      CLIENT_EXPORTS.clientMiddleware
+    ),
+    hasDefaultExport: routeAnalysis.exports.has('default'),
+    hasErrorBoundary: routeAnalysis.exports.has(CLIENT_EXPORTS.ErrorBoundary),
+    // `module` is `jsAssets[0]`; exclude it from `imports` so the browser
+    // manifest does not list the route's own module twice (upstream excludes
+    // the entry chunk's own file from its imports list). Otherwise prefetch
+    // link computations produce duplicate modulepreload hrefs.
+    imports: jsAssets.slice(1).map(asset => combineURLs(assetPrefix, asset)),
+    css: Array.from(new Set(cssAssets)).map(asset =>
+      combineURLs(assetPrefix, asset)
+    ),
+  };
+};
+
 function generateReactRouterManifestForDevEffect(
   routes: Record<string, Route>,
-  _options: PluginOptions,
   clientStats: ReactRouterManifestStats | undefined,
   context: string,
   assetPrefix: string,
-  routeChunkOptions?: RouteChunkManifestOptions
+  manifestOptions?: ReactRouterManifestOptions
 ): Effect.Effect<ReactRouterManifestGenerationResult, Error, never> {
   return Effect.gen(function* () {
     const result: Record<string, RouteManifestItem> = {};
-    const splitRouteModules = routeChunkOptions?.splitRouteModules ?? false;
+    const splitRouteModules = manifestOptions?.splitRouteModules ?? false;
     const enforceSplitRouteModules = splitRouteModules === 'enforce';
-    const isBuild = routeChunkOptions?.isBuild ?? false;
+    const isBuild = manifestOptions?.isBuild ?? false;
     const routeChunkConfig: RouteChunkConfig | null =
-      splitRouteModules && routeChunkOptions?.rootRouteFile
+      splitRouteModules && manifestOptions?.rootRouteFile
         ? {
             splitRouteModules,
             appDirectory: context,
-            rootRouteFile: routeChunkOptions.rootRouteFile,
+            rootRouteFile: manifestOptions.rootRouteFile,
           }
         : null;
 
-    const getAssetsForChunk = createChunkAssetResolver(clientStats);
+    const getAssetsForChunk = createChunkAssetResolver(clientStats, isBuild);
     const getModulePathForChunk = (chunkName: string): string | undefined => {
       const { js: jsAssets } = getAssetsForChunk(chunkName);
       return jsAssets[0] ? combineURLs(assetPrefix, jsAssets[0]) : undefined;
     };
+    const getCssAssetsForChunk = (chunkName: string): string[] =>
+      getAssetsForChunk(chunkName).css;
 
     const manifestEntries = yield* Effect.forEach(
       Object.entries(routes),
       ([key, route]) =>
         Effect.gen(function* () {
-          const routeEntryName = getRouteEntryName(route);
+          const routeEntryName = getRouteEntryBaseName(route, context);
           const { js: jsAssets, css: discoveredCssAssets } =
             getAssetsForChunk(routeEntryName);
           const routeFilePath = resolve(context, route.file);
           const routeAnalysis = yield* analyzeRouteForManifestEffect({
             discoveredCssAssets,
             isBuild,
-            routeChunkCache: routeChunkOptions?.cache,
+            routeChunkCache: manifestOptions?.cache,
             routeChunkConfig,
             routeEntryName,
             routeFilePath,
+            route,
+            routeModuleAnalysis: manifestOptions?.routeModuleAnalysis,
           });
 
-          const hasClientAction = routeAnalysis.exports.has(
-            CLIENT_EXPORTS.clientAction
-          );
-          const hasClientLoader = routeAnalysis.exports.has(
-            CLIENT_EXPORTS.clientLoader
-          );
-          const hasClientMiddleware = routeAnalysis.exports.has(
-            CLIENT_EXPORTS.clientMiddleware
-          );
-          const hasDefaultExport = routeAnalysis.exports.has('default');
-          const routeChunkMap = routeAnalysis.hasRouteChunkByExportName;
-
           if (isBuild && enforceSplitRouteModules && routeChunkConfig) {
             validateRouteChunks({
               config: routeChunkConfig,
               id: routeFilePath,
               valid: buildManifestChunkValidity(
                 routeAnalysis.exports,
-                routeChunkMap ?? createEmptyRouteChunkByExportName()
+                routeAnalysis.hasRouteChunkByExportName ??
+                  createEmptyRouteChunkByExportName()
               ),
             });
           }
 
           return [
             key,
-            {
-              id: route.id,
-              parentId: route.parentId,
-              path: route.path,
-              index: route.index,
-              caseSensitive: route.caseSensitive,
-              module: combineURLs(assetPrefix, jsAssets[0] || ''),
-              clientActionModule: routeChunkMap?.clientAction
-                ? getModulePathForChunk(
-                    getRouteChunkEntryName(route.id, 'clientAction')
-                  )
-                : undefined,
-              clientLoaderModule: routeChunkMap?.clientLoader
-                ? getModulePathForChunk(
-                    getRouteChunkEntryName(route.id, 'clientLoader')
-                  )
-                : undefined,
-              clientMiddlewareModule: routeChunkMap?.clientMiddleware
-                ? getModulePathForChunk(
-                    getRouteChunkEntryName(route.id, 'clientMiddleware')
-                  )
-                : undefined,
-              hydrateFallbackModule: routeChunkMap?.HydrateFallback
-                ? getModulePathForChunk(
-                    getRouteChunkEntryName(route.id, 'HydrateFallback')
-                  )
-                : undefined,
-              hasAction: routeAnalysis.exports.has(SERVER_EXPORTS.action),
-              hasLoader: routeAnalysis.exports.has(SERVER_EXPORTS.loader),
-              hasClientAction,
-              hasClientLoader,
-              hasClientMiddleware,
-              hasDefaultExport,
-              hasErrorBoundary: routeAnalysis.exports.has(
-                CLIENT_EXPORTS.ErrorBoundary
-              ),
-              imports: jsAssets.map(asset => combineURLs(assetPrefix, asset)),
-              css: routeAnalysis.cssAssets.map(asset =>
-                combineURLs(assetPrefix, asset)
-              ),
-            },
+            createRouteManifestItem({
+              route,
+              appDirectory: context,
+              assetPrefix,
+              jsAssets,
+              routeAnalysis,
+              getModulePathForChunk,
+              getCssAssetsForChunk,
+            }),
             routeAnalysis.routeModuleExports,
           ] as const;
         }),
@@ -536,12 +615,17 @@ function generateReactRouterManifestForDevEffect(
     const fingerprintedValues = {
       entry: {
         module: combineURLs(assetPrefix, entryJsAssets[0] || ''),
-        imports: entryJsAssets.map(asset => combineURLs(assetPrefix, asset)),
+        // Exclude the entry's own module (`entryJsAssets[0]`) from imports so it
+        // is not listed twice, matching upstream where `imports` holds only the
+        // chunk's dependency imports.
+        imports: entryJsAssets
+          .slice(1)
+          .map(asset => combineURLs(assetPrefix, asset)),
         css: entryCssAssets.map(asset => combineURLs(assetPrefix, asset)),
       },
       routes: result,
     };
-    const version = getManifestVersion(fingerprintedValues, isBuild);
+    const version = getManifestVersion(fingerprintedValues);
     const manifestPath = getReactRouterManifestPath({
       version,
       isBuild,
@@ -550,7 +634,10 @@ function generateReactRouterManifestForDevEffect(
 
     const manifest = {
       version,
-      url: combineURLs(assetPrefix, manifestPath),
+      url: combineURLs(
+        assetPrefix,
+        isBuild ? manifestPath : `${manifestPath}?v=${version}`
+      ),
       hmr: undefined,
       entry: fingerprintedValues.entry,
       sri: undefined,
@@ -566,20 +653,19 @@ function generateReactRouterManifestForDevEffect(
 
 export async function generateReactRouterManifestForDev(
   routes: Record<string, Route>,
-  options: PluginOptions,
+  _options: PluginOptions,
   clientStats: ReactRouterManifestStats | undefined,
   context: string,
   assetPrefix = '/',
-  routeChunkOptions?: RouteChunkManifestOptions
+  manifestOptions?: ReactRouterManifestOptions
 ): Promise<ReactRouterManifestGenerationResult> {
   return runPluginEffect(
     generateReactRouterManifestForDevEffect(
       routes,
-      options,
       clientStats,
       context,
       assetPrefix,
-      routeChunkOptions
+      manifestOptions
     )
   );
 }