rsbuild-plugin-react-router 0.5.0 → 0.6.0

package/src/plugin-utils.ts

@@ -1,7 +1,71 @@
-import { normalize } from 'pathe';
-import { existsSync } from 'node:fs';
+import { normalize, resolve } from 'pathe';
+import { existsSync, readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
 import { JS_EXTENSIONS } from './constants.js';
 
+const requireFromApp = createRequire(resolve(process.cwd(), 'package.json'));
+
+export const resolveAppPackagePath = (
+  specifier: string
+): string | undefined => {
+  try {
+    return requireFromApp.resolve(specifier);
+  } catch {
+    return undefined;
+  }
+};
+
+export const parseVersionMajorMinor = (
+  version: string | undefined
+): { major: number; minor: number } | undefined => {
+  const match = version?.match(/^(\d+)\.(\d+)\./);
+  if (!match) {
+    return undefined;
+  }
+  return { major: Number(match[1]), minor: Number(match[2]) };
+};
+
+const packageVersionCache = new Map<string, string | undefined>();
+
+export const getPackageVersion = (
+  packageName: string,
+  resolvePackagePath: (
+    specifier: string
+  ) => string | undefined = resolveAppPackagePath
+): string | undefined => {
+  // Only default resolution is cached; injected resolvers (tests) stay live.
+  const cacheable = resolvePackagePath === resolveAppPackagePath;
+  if (cacheable && packageVersionCache.has(packageName)) {
+    return packageVersionCache.get(packageName);
+  }
+  const packageJsonPath = resolvePackagePath(`${packageName}/package.json`);
+  if (!packageJsonPath) {
+    return undefined;
+  }
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8')) as {
+      version?: unknown;
+    };
+    const version =
+      typeof packageJson.version === 'string' ? packageJson.version : undefined;
+    if (cacheable) {
+      packageVersionCache.set(packageName, version);
+    }
+    return version;
+  } catch {
+    if (cacheable) {
+      packageVersionCache.set(packageName, undefined);
+    }
+    return undefined;
+  }
+};
+
+export const escapeHtml = (value: string): string =>
+  value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+
 export function combineURLs(baseURL: string, relativeURL: string): string {
   return relativeURL
     ? `${baseURL.replace(/\/+$/, '')}/${relativeURL.replace(/^\/+/, '')}`
@@ -15,12 +79,38 @@ export function normalizeAssetPrefix(assetPrefix?: string): string {
   return assetPrefix.endsWith('/') ? assetPrefix : `${assetPrefix}/`;
 }
 
-export function stripFileExtension(file: string): string {
-  return file.replace(/\.[^/.]+$/, '');
+/**
+ * Resolve the asset prefix Rsbuild applies to emitted asset URLs for the given
+ * mode. In development the effective prefix is `dev.assetPrefix` (which Rsbuild
+ * defaults from `server.base`, falling back to `output.assetPrefix`); in a
+ * production build it is `output.assetPrefix`. Both fields are already resolved
+ * on the normalized config, so this mirrors Rsbuild's own precedence rather than
+ * re-deriving it from `server.base`.
+ *
+ * `dev.assetPrefix` may be a boolean on the raw config (`false` disables it);
+ * boolean/`'auto'`/empty values normalize to the root prefix `'/'`.
+ */
+export function resolveEffectiveAssetPrefix(config: {
+  dev?: { assetPrefix?: unknown };
+  output?: { assetPrefix?: unknown };
+  isBuild: boolean;
+}): string {
+  const outputPrefix =
+    typeof config.output?.assetPrefix === 'string'
+      ? config.output.assetPrefix
+      : undefined;
+  if (config.isBuild) {
+    return normalizeAssetPrefix(outputPrefix);
+  }
+  const devPrefix =
+    typeof config.dev?.assetPrefix === 'string'
+      ? config.dev.assetPrefix
+      : undefined;
+  return normalizeAssetPrefix(devPrefix ?? outputPrefix);
 }
 
 export function createRouteId(file: string): string {
-  return normalize(stripFileExtension(file));
+  return normalize(file.replace(/\.[^/.]+$/, ''));
 }
 
 export function findEntryFile(basePath: string): string {
@@ -35,41 +125,15 @@ export function findEntryFile(basePath: string): string {
 
 export function generateWithProps() {
   return `
-    import { createElement as h } from "react";
-    import { useActionData, useLoaderData, useMatches, useParams, useRouteError } from "react-router";
+    import {
+      UNSAFE_withComponentProps,
+      UNSAFE_withErrorBoundaryProps,
+      UNSAFE_withHydrateFallbackProps,
+    } from "react-router";
 
-    export function withComponentProps(Component) {
-      return function Wrapped() {
-        const props = {
-          params: useParams(),
-          loaderData: useLoaderData(),
-          actionData: useActionData(),
-          matches: useMatches(),
-        };
-        return h(Component, props);
-      };
-    }
-
-    export function withHydrateFallbackProps(HydrateFallback) {
-      return function Wrapped() {
-        const props = {
-          params: useParams(),
-        };
-        return h(HydrateFallback, props);
-      };
-    }
-
-    export function withErrorBoundaryProps(ErrorBoundary) {
-      return function Wrapped() {
-        const props = {
-          params: useParams(),
-          loaderData: useLoaderData(),
-          actionData: useActionData(),
-          error: useRouteError(),
-        };
-        return h(ErrorBoundary, props);
-      };
-    }
+    export const withComponentProps = UNSAFE_withComponentProps;
+    export const withHydrateFallbackProps = UNSAFE_withHydrateFallbackProps;
+    export const withErrorBoundaryProps = UNSAFE_withErrorBoundaryProps;
   `;
 }
 

package/src/prerender-build.ts

@@ -10,12 +10,15 @@ import {
   type ServerBuild,
 } from 'react-router';
 import { dirname, relative, resolve } from 'pathe';
-import { PLUGIN_NAME } from './constants.js';
+import { PLUGIN_NAME, SPA_FALLBACK_HTML_FILE } from './constants.js';
 import { getBuildManifest } from './build-manifest.js';
 import {
+  createReactRouterManifestOptions,
   generateReactRouterManifestForDev,
-  getReactRouterManifestForDev,
+  type ReactRouterManifestForDev as ReactRouterManifest,
   type ReactRouterManifestStats,
+  type RouteChunkManifestOptions,
+  type RouteModuleAnalysisProvider,
   type RouteManifestModuleExports,
 } from './manifest.js';
 import {
@@ -32,10 +35,6 @@ import { resolveServerBuildModule } from './server-utils.js';
 import type { PluginOptions, Route } from './types.js';
 import { runPluginEffect, tryPluginPromise } from './effect-runtime.js';
 
-type ReactRouterManifest = Awaited<
-  ReturnType<typeof getReactRouterManifestForDev>
->;
-
 type BuildRouteModule = {
   loader?: unknown;
   default?: unknown;
@@ -73,9 +72,10 @@ type RunReactRouterPrerenderBuildOptions = {
   pluginOptions: PluginOptions;
   appDirectory: string;
   assetPrefix: string;
-  routeChunkOptions: Parameters<typeof getReactRouterManifestForDev>[5];
+  routeChunkOptions: RouteChunkManifestOptions | undefined;
+  routeModuleAnalysis?: RouteModuleAnalysisProvider;
   buildManifest: Awaited<ReturnType<typeof getBuildManifest>>;
-  resolvedConfigWithRoutes: ResolvedReactRouterConfig;
+  buildEndReactRouterConfig: ResolvedReactRouterConfig;
   buildEnd: Config['buildEnd'];
 };
 
@@ -160,7 +160,7 @@ export const withBuildRequest = <T>(
   handle: (request: Request) => Promise<T>
 ): Promise<T> => runPluginEffect(createBuildRequestEffect(input, init, handle));
 
-const prerenderData = async ({
+const prerenderDataEffect = ({
   handler,
   prerenderPath,
   onlyRoutes,
@@ -178,7 +178,7 @@ const prerenderData = async ({
   trailingSlashAwareDataRequests: boolean;
   api: PrerenderBuildApi;
   requestInit?: RequestInit;
-}): Promise<string> => {
+}) => {
   const dataOutputPath = createDataRequestPath(
     prerenderPath,
     trailingSlashAwareDataRequests
@@ -199,7 +199,7 @@ const prerenderData = async ({
     url.searchParams.set('_routes', onlyRoutes.join(','));
   }
 
-  return withBuildRequest(url, requestInit, async request => {
+  return createBuildRequestEffect(url, requestInit, async request => {
     const response = await handler(request);
     const data = await response.text();
 
@@ -227,7 +227,7 @@ const prerenderData = async ({
   });
 };
 
-const prerenderRoute = async ({
+const prerenderRouteEffect = ({
   handler,
   prerenderPath,
   clientBuildDir,
@@ -241,9 +241,9 @@ const prerenderRoute = async ({
   basename: string;
   api: PrerenderBuildApi;
   requestInit?: RequestInit;
-}): Promise<void> => {
+}) => {
   const normalizedPath = `${basename}${prerenderPath}/`.replace(/\/\/+/g, '/');
-  await withBuildRequest(
+  return createBuildRequestEffect(
     `http://localhost${normalizedPath}`,
     requestInit,
     async request => {
@@ -290,7 +290,7 @@ const prerenderRoute = async ({
   );
 };
 
-const prerenderResourceRoute = async ({
+const prerenderResourceRouteEffect = ({
   handler,
   prerenderPath,
   clientBuildDir,
@@ -304,11 +304,11 @@ const prerenderResourceRoute = async ({
   basename: string;
   api: PrerenderBuildApi;
   requestInit?: RequestInit;
-}): Promise<void> => {
+}) => {
   const normalizedPath = `${basename}${prerenderPath}/`
     .replace(/\/\/+/g, '/')
     .replace(/\/$/g, '');
-  await withBuildRequest(
+  return createBuildRequestEffect(
     `http://localhost${normalizedPath}`,
     requestInit,
     async request => {
@@ -361,7 +361,7 @@ const handleSpaMode = async ({
       const html = await response.text();
       const isPrerenderSpaFallback = build.prerender?.includes('/');
       const filename = isPrerenderSpaFallback
-        ? '__spa-fallback.html'
+        ? SPA_FALLBACK_HTML_FILE
         : 'index.html';
 
       if (response.status !== 200) {
@@ -374,7 +374,7 @@ const handleSpaMode = async ({
         }
         throw new Error(
           `SPA Mode: Received a ${response.status} status code from ` +
-            `\`entry.server.tsx\` while prerendering your \`${filename}\` file.\n` +
+            '`entry.server.tsx` while prerendering your SPA Fallback HTML file.\n' +
             html
         );
       }
@@ -443,10 +443,10 @@ const validatePrerenderPathMatches = (
   }
 };
 
-export const createBoundedPrerenderTasksEffect = (
-  prerenderPaths: string[],
+export const createBoundedPrerenderTasksEffect = <T>(
+  prerenderPaths: T[],
   concurrency: number,
-  renderPath: (path: string) => Effect.Effect<void, Error, never>
+  renderPath: (path: T) => Effect.Effect<void, Error, never>
 ): Effect.Effect<void, Error, never> =>
   Effect.forEach(prerenderPaths, renderPath, { concurrency, discard: true });
 
@@ -480,27 +480,23 @@ const createPrerenderPathEffect = ({
 
     if (isResourceRoute) {
       if (manifestRoute.loader && routeId) {
-        yield* tryPluginPromise(() =>
-          prerenderData({
-            handler: requestHandler,
-            prerenderPath: path,
-            onlyRoutes: [routeId],
-            clientBuildDir,
-            basename,
-            trailingSlashAwareDataRequests:
-              future.unstable_trailingSlashAwareDataRequests,
-            api,
-          })
-        );
-        yield* tryPluginPromise(() =>
-          prerenderResourceRoute({
-            handler: requestHandler,
-            prerenderPath: path,
-            clientBuildDir,
-            basename,
-            api,
-          })
-        );
+        yield* prerenderDataEffect({
+          handler: requestHandler,
+          prerenderPath: path,
+          onlyRoutes: [routeId],
+          clientBuildDir,
+          basename,
+          trailingSlashAwareDataRequests:
+            future.unstable_trailingSlashAwareDataRequests,
+          api,
+        });
+        yield* prerenderResourceRouteEffect({
+          handler: requestHandler,
+          prerenderPath: path,
+          clientBuildDir,
+          basename,
+          api,
+        });
       } else {
         yield* Effect.sync(() => {
           api.logger.warn(
@@ -519,30 +515,26 @@ const createPrerenderPathEffect = ({
       return build.assets?.routes?.[matchedRouteId]?.hasLoader;
     });
     const data = hasLoaders
-      ? yield* tryPluginPromise(() =>
-          prerenderData({
-            handler: requestHandler,
-            prerenderPath: path,
-            onlyRoutes: null,
-            clientBuildDir,
-            basename,
-            trailingSlashAwareDataRequests:
-              future.unstable_trailingSlashAwareDataRequests,
-            api,
-          })
-        )
+      ? yield* prerenderDataEffect({
+          handler: requestHandler,
+          prerenderPath: path,
+          onlyRoutes: null,
+          clientBuildDir,
+          basename,
+          trailingSlashAwareDataRequests:
+            future.unstable_trailingSlashAwareDataRequests,
+          api,
+        })
       : undefined;
 
-    yield* tryPluginPromise(() =>
-      prerenderRoute({
-        handler: requestHandler,
-        prerenderPath: path,
-        clientBuildDir,
-        basename,
-        api,
-        requestInit: data ? createPrerenderDataRequestInit(data) : undefined,
-      })
-    );
+    yield* prerenderRouteEffect({
+      handler: requestHandler,
+      prerenderPath: path,
+      clientBuildDir,
+      basename,
+      api,
+      requestInit: data ? createPrerenderDataRequestInit(data) : undefined,
+    });
   });
 
 const createPrerenderDataRequestInit = (
@@ -558,35 +550,6 @@ const createPrerenderDataRequestInit = (
     : undefined;
 };
 
-const runPrerenderPaths = async ({
-  build,
-  requestHandler,
-  clientBuildDir,
-  options,
-}: {
-  build: PrerenderServerBuild;
-  requestHandler: (request: Request) => Promise<Response>;
-  clientBuildDir: string;
-  options: RunReactRouterPrerenderBuildOptions;
-}): Promise<void> => {
-  const { prerenderConfig, prerenderPaths } = options;
-  const buildRoutes = createPrerenderRoutes(build.routes);
-  const concurrency = getPrerenderConcurrency(prerenderConfig);
-
-  await runPluginEffect(
-    createBoundedPrerenderTasksEffect(prerenderPaths, concurrency, path =>
-      createPrerenderPathEffect({
-        path,
-        build,
-        buildRoutes,
-        requestHandler,
-        clientBuildDir,
-        options,
-      })
-    )
-  );
-};
-
 export const runReactRouterPrerenderBuild = async (
   options: RunReactRouterPrerenderBuildOptions
 ): Promise<void> => {
@@ -600,6 +563,7 @@ export const runReactRouterPrerenderBuild = async (
     serverBuildFile,
     ssr,
     isPrerenderEnabled,
+    prerenderConfig,
     prerenderPaths,
     routes,
     latestBrowserManifest,
@@ -609,8 +573,9 @@ export const runReactRouterPrerenderBuild = async (
     appDirectory,
     assetPrefix,
     routeChunkOptions,
+    routeModuleAnalysis,
     buildManifest,
-    resolvedConfigWithRoutes,
+    buildEndReactRouterConfig,
     buildEnd,
     basename,
   } = options;
@@ -652,7 +617,10 @@ export const runReactRouterPrerenderBuild = async (
               clientStats,
               appDirectory,
               assetPrefix,
-              routeChunkOptions
+              createReactRouterManifestOptions({
+                routeChunks: routeChunkOptions,
+                routeModuleAnalysis,
+              })
             );
         assertValidSsrFalsePrerenderExports({
           routes,
@@ -671,12 +639,22 @@ export const runReactRouterPrerenderBuild = async (
         );
       }
 
-      await runPrerenderPaths({
-        build,
-        requestHandler,
-        clientBuildDir,
-        options,
-      });
+      const buildRoutes = createPrerenderRoutes(build.routes);
+      await runPluginEffect(
+        createBoundedPrerenderTasksEffect(
+          prerenderPaths,
+          getPrerenderConcurrency(prerenderConfig),
+          path =>
+            createPrerenderPathEffect({
+              path,
+              build,
+              buildRoutes,
+              requestHandler,
+              clientBuildDir,
+              options,
+            })
+        )
+      );
     }
 
     if (!ssr) {
@@ -700,8 +678,8 @@ export const runReactRouterPrerenderBuild = async (
   if (buildEnd) {
     await buildEnd({
       buildManifest,
-      reactRouterConfig: resolvedConfigWithRoutes,
-      viteConfig: api.getNormalizedConfig(),
+      reactRouterConfig: buildEndReactRouterConfig,
+      rsbuildConfig: api.getNormalizedConfig(),
     });
   }
 };

package/src/prerender.ts

@@ -1,4 +1,5 @@
 import type { Config } from './react-router-config.js';
+import type { PrerenderConfigObject, PrerenderPathsConfig } from './types.js';
 import type { RouteConfigEntry } from '@react-router/dev/routes';
 import { matchRoutes } from 'react-router';
 
@@ -6,20 +7,6 @@ type ReactRouterPrerenderConfig = Config['prerender'];
 type MatchRouteObject =
   Parameters<typeof matchRoutes>[0] extends Array<infer R> ? R : never;
 
-type PrerenderPathsConfig =
-  | boolean
-  | string[]
-  | ((args: {
-      getStaticPaths: () => string[];
-    }) => boolean | string[] | Promise<boolean | string[]>);
-
-type PrerenderConfigObject = Extract<
-  NonNullable<ReactRouterPrerenderConfig>,
-  { paths: unknown }
-> & {
-  unstable_concurrency?: number;
-};
-
 type PrerenderConfig = ReactRouterPrerenderConfig | PrerenderConfigObject;
 type PrerenderConcurrencyConfig =
   | {
@@ -78,7 +65,11 @@ export const createPrerenderRoutes = (
   grouped: Record<string, any[]> = groupRoutesByParentId(manifest)
 ): MatchRouteObject[] => {
   return (grouped[parentId] || []).map(route => {
-    const common = { id: route.id, path: route.path };
+    const common = {
+      id: route.id,
+      path: route.path,
+      caseSensitive: route.caseSensitive,
+    };
     if (route.index) {
       return { index: true, ...common } as MatchRouteObject;
     }
@@ -120,10 +111,9 @@ export const getSsrFalsePrerenderExportErrors = ({
   const errors: string[] = [];
   for (const [routeId, route] of Object.entries(manifestRoutes)) {
     const exports = routeExports[routeId] ?? [];
-    const invalidApis: string[] = [];
-
-    if (exports.includes('headers')) invalidApis.push('headers');
-    if (exports.includes('action')) invalidApis.push('action');
+    const invalidApis = ['headers', 'action', 'middleware'].filter(api =>
+      exports.includes(api)
+    );
 
     if (invalidApis.length > 0) {
       errors.push(
@@ -143,11 +133,17 @@ export const getSsrFalsePrerenderExportErrors = ({
         );
       }
 
+      // A loader on an ancestor route is only invalid when the ancestor is not
+      // itself fully prerendered. The root route is exempt: its loader always
+      // runs to render the app shell and it is always part of the prerender set
+      // whenever any path is prerendered, so upstream never flags it here.
       let parentRoute =
-        route.parentId && manifestRoutes[route.parentId]
+        route.parentId &&
+        route.parentId !== 'root' &&
+        manifestRoutes[route.parentId]
           ? manifestRoutes[route.parentId]
           : null;
-      while (parentRoute) {
+      while (parentRoute && parentRoute.id !== 'root') {
         if (parentRoute.hasLoader && !parentRoute.hasClientLoader) {
           errors.push(
             `Prerender: 1 invalid route export in \`${parentRoute.id}\` when ` +
@@ -156,7 +152,9 @@ export const getSsrFalsePrerenderExportErrors = ({
           );
         }
         parentRoute =
-          parentRoute.parentId && manifestRoutes[parentRoute.parentId]
+          parentRoute.parentId &&
+          parentRoute.parentId !== 'root' &&
+          manifestRoutes[parentRoute.parentId]
             ? manifestRoutes[parentRoute.parentId]
             : null;
       }
@@ -247,8 +245,9 @@ export const resolvePrerenderPaths = async (
         });
       warn(
         [
-          'Warning: Paths with dynamic/splat params cannot be prerendered when using `prerender: true`.',
-          'You may want to use the `prerender()` API to prerender the following paths:',
+          '⚠️ Paths with dynamic/splat params cannot be prerendered when ' +
+            'using `prerender: true`. You may want to use the `prerender()` ' +
+            'API to prerender the following paths:',
           ...paramRoutes.map(path => `  - ${path.replace(/^\/(?=[:*])/, '')}`),
         ].join('\n')
       );