rsbuild-plugin-react-router 0.4.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsbuild-plugin-react-router",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "React Router plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -37,6 +37,18 @@
       "types": "./dist/templates/entry.server.d.ts",
       "import": "./dist/templates/entry.server.js",
       "require": "./dist/templates/entry.server.cjs"
+    },
+    "./templates/entry.rsc": {
+      "types": "./dist/templates/entry.rsc.d.ts",
+      "import": "./dist/templates/entry.rsc.js"
+    },
+    "./templates/entry.rsc.client": {
+      "types": "./dist/templates/entry.rsc.client.d.ts",
+      "import": "./dist/templates/entry.rsc.client.js"
+    },
+    "./templates/entry.rsc.ssr": {
+      "types": "./dist/templates/entry.rsc.ssr.d.ts",
+      "import": "./dist/templates/entry.rsc.ssr.js"
     }
   },
   "main": "./dist/index.cjs",
@@ -49,8 +61,9 @@
     "ignoreMissingDts": true
   },
   "dependencies": {
-    "@react-router/node": "^7.13.0",
-    "@remix-run/node-fetch-server": "^0.13.0",
+    "@jridgewell/remapping": "^2.3.5",
+    "@react-router/node": "^7.13.0 || ^8.0.0",
+    "@remix-run/node-fetch-server": "^0.13.3",
     "@rspack/plugin-react-refresh": "^2.0.2",
     "execa": "^9.6.1",
     "fs-extra": "11.3.3",
@@ -65,39 +78,78 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "@codspeed/vitest-plugin": "^5.7.1",
+    "@jridgewell/trace-mapping": "^0.3.31",
+    "@playwright/test": "^1.61.1",
     "@react-router/dev": "^8.0.1",
-    "@rsbuild/core": "2.1.0",
+    "@react-router/express": "^8.0.1",
+    "@react-router/fs-routes": "^8.0.1",
+    "@react-router/remix-routes-option-adapter": "^8.0.1",
+    "@react-router/serve": "^8.0.1",
+    "@rsbuild/core": "2.2.0",
+    "@rsbuild/plugin-less": "1.6.4",
+    "@rsbuild/plugin-mdx": "^1.1.3",
     "@rsbuild/plugin-react": "2.1.0",
-    "@rslib/core": "^0.22.1",
-    "@rspack/core": "2.1.0",
-    "@rstest/core": "^0.8.1",
-    "@rstest/coverage-istanbul": "^0.2.0",
+    "@rsbuild/plugin-sass": "1.5.3",
+    "@rsbuild/plugin-svgr": "2.0.4",
+    "@rsbuild/plugin-tailwindcss": "2.0.3",
+    "@rslib/core": "^0.23.2",
+    "@rspack/core": "2.2.0",
+    "@rstest/core": "^0.11.4",
+    "@rstest/coverage-istanbul": "^0.11.4",
     "@swc/helpers": "^0.5.23",
     "@types/fs-extra": "11.0.4",
     "@types/jsesc": "^3.0.3",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "effect": "^3.21.4",
+    "@types/webpack-env": "^1.18.8",
+    "@vanilla-extract/css": "^1.20.1",
+    "cheerio": "^1.2.0",
+    "cross-spawn": "^7.0.6",
+    "dedent": "^1.7.2",
+    "effect": "^3.22.0",
     "es-module-lexer": "1.7.0",
+    "express": "^4.22.2",
+    "fast-glob": "^3.3.3",
+    "get-port": "7.1.0",
     "kill-port": "^2.0.1",
     "pkg-pr-new": "^0.0.75",
     "playwright": "^1.61.1",
     "prettier": "3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router": "^7.13.0",
-    "react-router-dom": "^7.13.0",
+    "react-router": "^7.18.0",
+    "react-router-dom": "^7.18.0",
+    "react-server-dom-rspack": "0.1.0",
+    "rsbuild-plugin-rsc": "^0.1.1",
+    "semver": "^7.8.5",
+    "shelljs": "^0.10.0",
+    "strip-ansi": "^7.2.0",
+    "strip-indent": "^4.1.1",
+    "tailwindcss": "4.3.2",
+    "type-fest": "^5.7.0",
     "typescript": "^5.9.3",
+    "vitest": "^4.1.10",
+    "wait-on": "^9.0.10",
     "@rsbuild/config": "1.0.1"
   },
   "peerDependencies": {
     "@react-router/dev": "^7.13.0 || ^8.0.0",
-    "@rsbuild/core": "^2.0.0"
+    "@rsbuild/core": "^2.2.0",
+    "react-router": "^7.13.0 || ^8.0.0",
+    "react-server-dom-rspack": "0.1.0",
+    "rsbuild-plugin-rsc": "^0.1.1"
   },
   "peerDependenciesMeta": {
     "@react-router/dev": {
       "optional": true
+    },
+    "react-server-dom-rspack": {
+      "optional": true
+    },
+    "rsbuild-plugin-rsc": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -107,22 +159,24 @@
   },
   "scripts": {
     "build": "rslib build",
-    "bench": "node scripts/bench-builds.mts",
-    "bench:ci-report": "node scripts/report-benchmark-ci.mts",
-    "bench:compare": "node scripts/compare-benchmarks.mts",
-    "bench:smoke": "node scripts/bench-builds.mts --profile smoke --iterations 1 --warmup 0 --format both --out .benchmark/results/smoke",
-    "bench:baseline": "node scripts/bench-builds.mts --profile default --iterations 5 --warmup 1 --clean build --format both --out .benchmark/results/baseline",
-    "bench:full": "node scripts/bench-builds.mts --profile full --iterations 5 --warmup 1 --clean build --format both --out .benchmark/results/full",
-    "bench:large": "node scripts/bench-builds.mts --profile large --iterations 1 --warmup 0 --clean cold --format both --out .benchmark/results/large",
-    "bench:synthetic-app": "node scripts/bench-synthetic-app.mjs",
-    "e2e": "pnpm build && pnpm test:package-interop && pnpm --filter './examples/{default-template,spa-mode,prerender,custom-node-server,cloudflare,client-only}' test:e2e",
+    "bench": "pnpm build && node benchmarks/run.mts",
+    "bench:smoke": "pnpm build && node benchmarks/run.mts --iterations 1 --warmup 0",
+    "bench:codspeed": "pnpm build && vitest bench --run --config vitest.benchmark.config.mts -t build-256-ssr",
+    "e2e": "pnpm build && pnpm e2e:no-build",
+    "e2e:no-build": "pnpm test:package-interop && pnpm --filter './examples/{default-template,spa-mode,prerender,custom-node-server,cloudflare,client-only,react-router-8,rsc-mode}' test:e2e",
     "dev": "rslib build --watch",
-    "test": "rstest run",
+    "test": "pnpm typecheck && rstest run",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.tests.json && pnpm --filter integration typecheck && pnpm --filter integration-rsbuild-template typecheck && pnpm --filter integration-rsc-framework typecheck && pnpm --filter integration-rsc-preview typecheck",
     "test:watch": "rstest watch",
     "test:coverage": "rstest run --coverage",
     "test:core": "rstest run -c ./rstest.config.ts",
     "test:core:watch": "rstest watch -c ./rstest.config.ts",
     "test:package-interop": "node scripts/test-package-interop.mts",
+    "test:react-router-framework": "pnpm build && playwright test --config tests/react-router-framework/integration/playwright.config.ts",
+    "test:react-router-framework:failfast": "pnpm build && pnpm test:react-router-framework:failfast:no-build",
+    "test:react-router-framework:failfast:no-build": "RR_FRAMEWORK_MAX_WORKERS=2 playwright test --config tests/react-router-framework/integration/playwright.config.ts tests/react-router-framework/integration/hmr-hdr-test.ts --workers=2 --max-failures=1 --retries=0 --reporter=line && RR_FRAMEWORK_MAX_WORKERS=2 playwright test --config tests/react-router-framework/integration/playwright.config.ts tests/react-router-framework/integration/hmr-hdr-rsc-test.ts --workers=2 --max-failures=1 --retries=0 --reporter=line && RR_FRAMEWORK_MAX_WORKERS=4 playwright test --config tests/react-router-framework/integration/playwright.config.ts --grep-invert 'HMR & HDR' --workers=4 --max-failures=1 --retries=0 --reporter=line",
+    "test:react-router-framework:smoke": "pnpm build && playwright test --config tests/react-router-framework/integration/playwright.config.ts use-route-test.ts loader-test.ts",
+    "check:react-router-framework-upstream": "node scripts/check-react-router-framework-upstream.mjs",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "changeset": "changeset",

package/src/build-output-transforms.ts

@@ -3,19 +3,77 @@ import jsesc from 'jsesc';
 import { relative } from 'pathe';
 import { PLUGIN_NAME } from './constants.js';
 import {
+  createReactRouterManifestOptions,
   getReactRouterManifestForDev,
+  type ReactRouterManifestForDev as ReactRouterManifest,
+  type RouteChunkManifestOptions,
+  type RouteModuleAnalysisProvider,
   type ReactRouterManifestStats,
 } from './manifest.js';
-import type { RouteTransformExecutor } from './parallel-route-transforms.js';
 import type { ReactRouterPerformanceProfiler } from './performance.js';
+import {
+  validateSpaModeRouteExports,
+  type RouteTransformRunner,
+} from './route-transform-tasks.js';
 import { createBundlerRouteExportResolver } from './route-export-resolution.js';
-import type { RouteChunkConfig } from './route-chunks.js';
+import {
+  getRouteChunkNameFromModuleId,
+  type RouteChunkConfig,
+} from './route-chunks.js';
 import type { PluginOptions, Route } from './types.js';
 import { isSourceMapEnabled } from './warnings/warn-on-client-source-maps.js';
+import {
+  analyzeRouteModuleCode,
+  type RouteModuleAnalysis,
+} from './export-utils.js';
+import {
+  relocateServerAssetsToClient,
+  type RelocatableAssetCompilation,
+} from './ssr-asset-relocation.js';
 
-type ReactRouterManifest = Awaited<
-  ReturnType<typeof getReactRouterManifestForDev>
->;
+/**
+ * Register the node-compilation hook that relocates server-only static assets
+ * (`?url` imports, `.css?url` files, and other `asset/resource` outputs
+ * referenced only by loaders or `.server` modules) into the client build. The
+ * loader/`links()` export returns the asset URL to the client, which fetches it
+ * from `build/client` at runtime, so the file must exist there even though only
+ * the node compilation referenced it. The assets are also stripped from the
+ * server build to avoid shipping duplicate static files, mirroring upstream
+ * React Router's Vite plugin. This runs for every node compilation, so it also
+ * covers `serverBundles` (multiple node outputs) and dev mode (where
+ * `writeToDisk` is enabled).
+ *
+ * Registered by both the classic build-output transforms and the RSC branch so
+ * `.css?url`/`?url` assets referenced from `links()` resolve in RSC framework
+ * mode too.
+ */
+export const registerSsrAssetRelocation = ({
+  api,
+  outputClientPath,
+  performanceProfiler,
+}: {
+  api: RsbuildPluginAPI;
+  outputClientPath: string;
+  performanceProfiler: ReactRouterPerformanceProfiler;
+}): void => {
+  const relocatedDestinations = new Map<string, string>();
+  api.processAssets(
+    { stage: 'report', targets: ['node'] },
+    async ({ compilation }) => {
+      await performanceProfiler.record(
+        'node',
+        'assets:relocate-ssr-only',
+        'ssr-only-assets',
+        () =>
+          relocateServerAssetsToClient({
+            compilation: compilation as unknown as RelocatableAssetCompilation,
+            outputClientPath,
+            relocatedDestinations,
+          })
+      );
+    }
+  );
+};
 
 type RegisterBuildOutputTransformsOptions = {
   api: RsbuildPluginAPI;
@@ -30,16 +88,23 @@ type RegisterBuildOutputTransformsOptions = {
   getClientStats: () => ReactRouterManifestStats | undefined;
   appDirectory: string;
   getAssetPrefix: () => string;
-  routeChunkOptions: Parameters<typeof getReactRouterManifestForDev>[5];
-  routeTransformExecutor: RouteTransformExecutor;
+  routeChunkOptions: RouteChunkManifestOptions | undefined;
+  routeModuleAnalysis?: RouteModuleAnalysisProvider;
+  routeTransformRunner: RouteTransformRunner;
   routeByFilePath: Map<string, Route>;
   routeChunkConfig: RouteChunkConfig;
   isBuild: boolean;
   splitRouteModules: boolean;
+  useRouteModuleTransformApi: boolean;
   ssr: boolean;
   isSpaMode: boolean;
   rootRoutePath: string;
+  outputClientPath: string;
   isDevHmrEnabled?: () => boolean;
+  onRouteModuleAnalysis?: (
+    resourcePath: string,
+    analysis: RouteModuleAnalysis
+  ) => void;
 };
 
 export const registerBuildOutputTransforms = ({
@@ -54,23 +119,41 @@ export const registerBuildOutputTransforms = ({
   appDirectory,
   getAssetPrefix,
   routeChunkOptions,
-  routeTransformExecutor,
+  routeModuleAnalysis,
+  routeTransformRunner,
   routeByFilePath,
   routeChunkConfig,
   isBuild,
   splitRouteModules,
+  useRouteModuleTransformApi,
   ssr,
   isSpaMode,
   rootRoutePath,
+  outputClientPath,
   isDevHmrEnabled = () => false,
+  onRouteModuleAnalysis,
 }: RegisterBuildOutputTransformsOptions): void => {
-  const transformRouteModule = async (args: Parameters<TransformHandler>[0]) =>
-    performanceProfiler.record(
+  const rememberRouteModuleAnalysis = (
+    args: Parameters<TransformHandler>[0]
+  ): void => {
+    if (!routeByFilePath.has(args.resourcePath)) {
+      return;
+    }
+    onRouteModuleAnalysis?.(
+      args.resourcePath,
+      analyzeRouteModuleCode(args.code)
+    );
+  };
+
+  const transformRouteModule = async (
+    args: Parameters<TransformHandler>[0]
+  ) => {
+    return performanceProfiler.record(
       args.environment?.name,
       'route:module',
       args.resource,
       async () =>
-        routeTransformExecutor.run({
+        routeTransformRunner({
           kind: 'routeModule',
           code: args.code,
           resource: args.resource,
@@ -86,6 +169,7 @@ export const registerBuildOutputTransforms = ({
           devHmr: isDevHmrEnabled(),
         })
     );
+  };
 
   api.processAssets(
     { stage: 'additional', targets: ['node'] },
@@ -103,6 +187,8 @@ export const registerBuildOutputTransforms = ({
     }
   );
 
+  registerSsrAssetRelocation({ api, outputClientPath, performanceProfiler });
+
   api.transform(
     {
       test: /virtual\/react-router\/(browser|server)-manifest/,
@@ -135,7 +221,10 @@ export const registerBuildOutputTransforms = ({
               getClientStats(),
               appDirectory,
               getAssetPrefix(),
-              routeChunkOptions
+              createReactRouterManifestOptions({
+                routeChunks: routeChunkOptions,
+                routeModuleAnalysis,
+              })
             ));
           return {
             code: `export default ${jsesc(manifest, { es6: true })};`,
@@ -147,14 +236,16 @@ export const registerBuildOutputTransforms = ({
   api.transform(
     {
       resourceQuery: /__react-router-build-client-route/,
+      order: 'post',
     },
-    async args =>
-      performanceProfiler.record(
+    async args => {
+      rememberRouteModuleAnalysis(args);
+      return performanceProfiler.record(
         args.environment?.name,
         'route:client-entry',
         args.resource,
         async () =>
-          routeTransformExecutor.run({
+          routeTransformRunner({
             kind: 'routeClientEntry',
             code: args.code,
             resourcePath: args.resourcePath,
@@ -164,29 +255,67 @@ export const registerBuildOutputTransforms = ({
             routeId: routeByFilePath.get(args.resourcePath)?.id,
             devHmr: isDevHmrEnabled(),
           })
-      )
+      );
+    }
   );
 
   api.transform(
     {
       resourceQuery: /route-chunk=/,
       environments: ['web'],
+      order: 'post',
     },
-    async args =>
-      performanceProfiler.record(
+    async args => {
+      return performanceProfiler.record(
         args.environment?.name,
         'route:chunk',
         args.resource,
-        async () =>
-          routeTransformExecutor.run({
+        async () => {
+          const routeChunkName = getRouteChunkNameFromModuleId(args.resource);
+          if (isBuild && isSpaMode && routeChunkName === 'main') {
+            validateSpaModeRouteExports({
+              exportNames: analyzeRouteModuleCode(args.code, args.resourcePath)
+                .exports,
+              resourcePath: args.resourcePath,
+              rootRoutePath,
+            });
+          }
+
+          const routeChunkArtifact = await routeTransformRunner({
             kind: 'routeChunk',
             code: args.code,
             resource: args.resource,
             resourcePath: args.resourcePath,
             isBuild,
             routeChunkConfig,
-          })
-      )
+          });
+
+          // Invariant with the transformRouteModule registration below: in
+          // split-chunk production builds, web route modules are transformed
+          // HERE (on the main chunk) and the shared registration is scoped to
+          // ['node']. If either gate changes, web modules get transformed
+          // twice or not at all.
+          if (!isBuild || routeChunkName !== 'main') {
+            return routeChunkArtifact;
+          }
+
+          return routeTransformRunner({
+            kind: 'routeModule',
+            code: routeChunkArtifact.code,
+            resource: args.resource,
+            resourcePath: args.resourcePath,
+            environmentName: 'web',
+            sourceMaps: isSourceMapEnabled(
+              args.environment.config.output.sourceMap
+            ),
+            ssr,
+            isBuild,
+            isSpaMode,
+            rootRoutePath,
+          });
+        }
+      );
+    }
   );
 
   if (isBuild && splitRouteModules) {
@@ -197,20 +326,22 @@ export const registerBuildOutputTransforms = ({
           not: /__react-router-build-client-route|react-router-route|route-chunk=/,
         },
         environments: ['web'],
+        order: 'post',
       },
-      async args =>
-        performanceProfiler.record(
+      async args => {
+        return performanceProfiler.record(
           args.environment?.name,
           'route:split-exports',
           args.resource,
           async () =>
-            routeTransformExecutor.run({
+            routeTransformRunner({
               kind: 'splitRouteExports',
               code: args.code,
               resourcePath: args.resourcePath,
               routeChunkConfig,
             })
-        )
+        );
+      }
     );
   }
 
@@ -244,7 +375,7 @@ export const registerBuildOutputTransforms = ({
         'module:client-only-stub',
         args.resource,
         async () => {
-          return routeTransformExecutor.run({
+          return routeTransformRunner({
             kind: 'clientOnlyStub',
             code: args.code,
             resourcePath: args.resourcePath,
@@ -257,22 +388,29 @@ export const registerBuildOutputTransforms = ({
       )
   );
 
-  api.transform(
-    {
-      resourceQuery: /\?react-router-route/,
-      order: 'post',
-    },
-    transformRouteModule
-  );
+  if (useRouteModuleTransformApi) {
+    api.transform(
+      {
+        resourceQuery: /\?react-router-route/,
+        order: 'post',
+      },
+      transformRouteModule
+    );
 
-  api.transform(
-    {
-      test: path => routeByFilePath.has(path),
-      resourceQuery: {
-        not: /__react-router-build-client-route|react-router-route|route-chunk=/,
+    api.transform(
+      {
+        test: path => routeByFilePath.has(path),
+        resourceQuery: {
+          not: /__react-router-build-client-route|react-router-route|route-chunk=/,
+        },
+        // Invariant with the route-chunk= handler above: when split-chunk
+        // production builds transform web modules on the main chunk, this
+        // registration must stay scoped to ['node'] so web modules are not
+        // transformed twice.
+        environments: isBuild && splitRouteModules ? ['node'] : undefined,
+        order: 'post',
       },
-      order: 'post',
-    },
-    transformRouteModule
-  );
+      transformRouteModule
+    );
+  }
 };