rsbuild-plugin-react-router 0.3.0 → 0.4.0

package/src/index.ts

@@ -11,13 +11,14 @@ import {
 import { createJiti } from 'jiti';
 import { relative, resolve } from 'pathe';
 
+import { getDefaultConcurrency } from './concurrency.js';
 import {
   BUILD_CLIENT_ROUTE_QUERY_STRING,
   JS_EXTENSIONS,
   PLUGIN_NAME,
 } from './constants.js';
 import { guardReactRouterLazyCompilation } from './lazy-compilation.js';
-import { createDevServerMiddleware } from './dev-server.js';
+import { createReactRouterDevServerSetup } from './dev-server.js';
 import {
   generateWithProps,
   findEntryFile,
@@ -37,7 +38,6 @@ import {
 import {
   getReactRouterManifestForDev,
   configRoutesToRouteManifest,
-  configRoutesToRouteManifestEntries,
   createReactRouterManifestStats,
   type ReactRouterManifestStats,
   type RouteManifestModuleExports,
@@ -55,14 +55,7 @@ import {
   createRouteTransformExecutor,
   shouldParallelizeRouteTransforms,
 } from './parallel-route-transforms.js';
-import {
-  createRouteTopologyWatcher,
-  createRouteManifestSnapshot,
-  ensureDevRestartMarker,
-  getRouteRestartMarkerPath,
-  mergeWatchFiles,
-  type WatchFileConfig,
-} from './route-watch.js';
+import { getRouteRestartMarkerPath, mergeWatchFiles } from './route-watch.js';
 import { validateRouteConfig } from './route-config.js';
 import {
   getBuildManifest,
@@ -81,15 +74,38 @@ import {
 } from './performance.js';
 import { mapVirtualModules } from './virtual-modules.js';
 import { createReactRouterDevRuntimeController } from './dev-runtime-controller.js';
+import { runPluginEffect, tryPluginPromise } from './effect-runtime.js';
 import { registerReactRouterTypegen } from './typegen.js';
+import { importConfigWithWatchPaths } from './config-imports.js';
+import {
+  createReactRouterRouteTopology,
+  createReactRouterRouteWatchFiles,
+  registerReactRouterDevBackgroundResources,
+} from './dev-background-resources.js';
 import {
-  clearConfigImportCache,
-  collectConfigImportWatchPaths,
-} from './config-imports.js';
+  createDevHdrRevisionSignal,
+  generateDevHmrRuntimeModule,
+  getDevHdrRevisionFilePath,
+  isRspackSwcReactRefreshEnabled,
+  resolveReactRefreshRuntimePath,
+  DEV_HMR_RUNTIME_MODULE_ID,
+} from './dev-hmr.js';
 
+export type { Config as ReactRouterRsbuildConfig } from './react-router-config.js';
 export { loadReactRouterServerBuild } from './dev-generation.js';
 export { resolveReactRouterServerBuild };
 
+const MIN_PARALLEL_ENVIRONMENT_BUILD_SPARE_CORES = 4;
+
+export const shouldParallelizeEnvironmentBuilds = ({
+  isBuild,
+  spareCoreCount = getDefaultConcurrency(),
+}: {
+  isBuild: boolean;
+  spareCoreCount?: number;
+}): boolean =>
+  !isBuild && spareCoreCount >= MIN_PARALLEL_ENVIRONMENT_BUILD_SPARE_CORES;
+
 type ModuleFederationPluginLike = {
   name?: string;
   _options?: { experiments?: { asyncStartup?: boolean } };
@@ -139,6 +155,7 @@ export const pluginReactRouter = (
   async setup(api) {
     const defaultOptions = {
       customServer: false,
+      lazyCompilation: true,
       serverOutput: 'module' as const,
     };
 
@@ -181,8 +198,6 @@ export const pluginReactRouter = (
       warnOnClientSourceMaps(normalized, msg => api.logger.warn(msg), 'web');
     });
 
-    registerReactRouterTypegen(api);
-
     const configPath = findEntryFile(resolve('react-router.config'));
     const configExists = existsSync(configPath);
     let configWatchPaths: string | string[] = configExists
@@ -197,22 +212,10 @@ export const pluginReactRouter = (
       );
     } else {
       const displayPath = relative(process.cwd(), configPath);
-      const configJiti = createJiti(process.cwd(), {
-        moduleCache: true,
-      });
-      const cacheKeysBeforeImport = new Set(Object.keys(configJiti.cache));
       try {
-        const imported = await configJiti.import<Config>(configPath, {
-          default: true,
-        });
-        const importedConfigPaths = collectConfigImportWatchPaths(
-          configPath,
-          configJiti.cache,
-          cacheKeysBeforeImport
-        );
-        if (importedConfigPaths.length > 0) {
-          configWatchPaths = [configPath, ...importedConfigPaths];
-        }
+        const { value: imported, watchPaths } =
+          await importConfigWithWatchPaths<Config>(configPath);
+        configWatchPaths = watchPaths;
         if (imported === undefined) {
           throw new Error(`${displayPath} must provide a default export`);
         }
@@ -222,22 +225,9 @@ export const pluginReactRouter = (
         reactRouterUserConfig = imported;
       } catch (error) {
         throw new Error(`Error loading ${displayPath}: ${error}`);
-      } finally {
-        clearConfigImportCache(configJiti.cache, [
-          configPath,
-          ...collectConfigImportWatchPaths(
-            configPath,
-            configJiti.cache,
-            cacheKeysBeforeImport
-          ),
-        ]);
       }
     }
 
-    const jiti = createJiti(process.cwd(), {
-      moduleCache: false,
-    });
-
     const {
       resolved: resolvedConfig,
       presets: configPresets,
@@ -259,6 +249,8 @@ export const pluginReactRouter = (
       buildEnd,
     } = resolvedConfig;
 
+    registerReactRouterTypegen(api, { appDirectory });
+
     const hasExplicitServerOutput = Object.prototype.hasOwnProperty.call(
       options,
       'serverOutput'
@@ -334,8 +326,13 @@ export const pluginReactRouter = (
       );
     }
 
-    const loadRouteConfig = async (): Promise<RouteConfigEntry[]> => {
-      const routeConfigExport = await jiti.import<RouteConfigEntry[]>(
+    const jiti = createJiti(process.cwd(), {
+      moduleCache: false,
+    });
+    const importRouteConfig = async (
+      importer: Pick<typeof jiti, 'import'>
+    ): Promise<RouteConfigEntry[]> => {
+      const routeConfigExport = await importer.import<RouteConfigEntry[]>(
         routesPath,
         {
           default: true,
@@ -351,7 +348,9 @@ export const pluginReactRouter = (
       }
       return validation.routeConfig;
     };
-    const routeConfig = await loadRouteConfig();
+    const loadRouteConfig = () => importRouteConfig(jiti);
+    const { value: routeConfig, watchPaths: routeConfigWatchPaths } =
+      await importConfigWithWatchPaths(routesPath, importRouteConfig);
 
     const entryClientPath = findEntryFile(
       resolve(appDirectory, 'entry.client')
@@ -384,22 +383,13 @@ export const pluginReactRouter = (
     // React Router's server build expects route files relative to `appDirectory`
     // so it can resolve them correctly during compilation.
     const rootRouteFile = relative(appDirectory, rootRoutePath);
-    const createRouteTopologySnapshot = (
-      routeFile: string,
-      routeConfig: RouteConfigEntry[]
-    ) =>
-      createRouteManifestSnapshot([
-        ['root', { path: '', id: 'root', file: routeFile }],
-        ...configRoutesToRouteManifestEntries(appDirectory, routeConfig),
-      ]);
-    const getWatchedRouteTopology = async (): Promise<Set<string>> => {
-      const latestRouteConfig = await loadRouteConfig();
-      const latestRootRouteFile = relative(appDirectory, getRootRoutePath());
-      return createRouteTopologySnapshot(
-        latestRootRouteFile,
-        latestRouteConfig
-      );
-    };
+    const routeTopology = createReactRouterRouteTopology({
+      appDirectory,
+      rootRouteFile,
+      routeConfig,
+      loadRouteConfig,
+      getRootRoutePath,
+    });
 
     const routes = {
       root: { path: '', id: 'root', file: rootRouteFile },
@@ -426,6 +416,9 @@ export const pluginReactRouter = (
     }
 
     const isBuild = api.context.action === 'build';
+    const shouldDependOnWebCompiler = !shouldParallelizeEnvironmentBuilds({
+      isBuild,
+    });
     const isPrerenderEnabled =
       prerenderConfig !== undefined && prerenderConfig !== false;
     const isSpaMode = !ssr && !isPrerenderEnabled;
@@ -442,6 +435,7 @@ export const pluginReactRouter = (
         shouldParallelizeRouteTransforms(routeCount),
       routeChunkCache,
       splitRouteModules: Boolean(splitRouteModules),
+      isBuild,
     });
     const routeChunkOptions = {
       splitRouteModules,
@@ -453,56 +447,22 @@ export const pluginReactRouter = (
     const assetsBuildDirectory = relative(process.cwd(), outputClientPath);
     const watchDirectory = resolve(appDirectory);
     const routeRestartMarkerPath = getRouteRestartMarkerPath(outputClientPath);
-    const routeTopologyWatchFiles: WatchFileConfig[] =
-      pluginOptions.onRouteTopologyChange
-        ? []
-        : [
-            {
-              paths: routesPath,
-              type: 'reload-server',
-            },
-            {
-              paths: routeRestartMarkerPath,
-              type: 'reload-server',
-            },
-          ];
-    const routeWatchFiles: WatchFileConfig[] = [
-      {
-        paths: configWatchPaths,
-        type: 'reload-server',
-      },
-      ...routeTopologyWatchFiles,
-    ];
-    let closeRouteTopologyWatcher: (() => Promise<void>) | undefined;
-
-    api.onBeforeStartDevServer(async () => {
-      await ensureDevRestartMarker(routeRestartMarkerPath);
-      closeRouteTopologyWatcher = await createRouteTopologyWatcher({
-        watchDirectory,
-        getRouteTopology: getWatchedRouteTopology,
-        initialRouteTopology: createRouteTopologySnapshot(
-          rootRouteFile,
-          routeConfig
-        ),
-        restartMarkerPath: routeRestartMarkerPath,
-        onRouteTopologyChange: pluginOptions.onRouteTopologyChange,
-        onError: error => {
-          api.logger.warn(
-            `[${PLUGIN_NAME}] Failed to watch route topology changes: ${error}`
-          );
-        },
-      });
-    });
-
-    api.onCloseDevServer(async () => {
-      await closeRouteTopologyWatcher?.();
-      closeRouteTopologyWatcher = undefined;
-    });
-    api.onCloseBuild(async () => {
-      await routeTransformExecutor.close();
+    const routeWatchFiles = createReactRouterRouteWatchFiles({
+      configWatchPaths,
+      routeConfigWatchPaths,
+      routeRestartMarkerPath,
+      onRouteTopologyChange: pluginOptions.onRouteTopologyChange,
     });
-    api.onCloseDevServer(async () => {
-      await routeTransformExecutor.close();
+    const devBackgroundResources = registerReactRouterDevBackgroundResources({
+      api,
+      isBuild,
+      lazyCompilationPrewarm: pluginOptions.unstableLazyCompilationPrewarm,
+      routeTransformExecutor,
+      routeRestartMarkerPath,
+      watchDirectory,
+      getRouteTopology: routeTopology.getRouteTopology,
+      initialRouteTopology: routeTopology.initialRouteTopology,
+      onRouteTopologyChange: pluginOptions.onRouteTopologyChange,
     });
 
     type ReactRouterManifest = Awaited<
@@ -526,6 +486,7 @@ export const pluginReactRouter = (
         'virtual/react-router/browser-manifest',
         () => {
           latestBrowserManifest = manifest;
+          devBackgroundResources.setManifest(manifest);
           latestBrowserManifestModuleExports = moduleExportsByRouteId;
           const baseServerManifest = {
             ...manifest,
@@ -623,10 +584,26 @@ export const pluginReactRouter = (
       defaultEntryName: devServerBuildEntryName,
     });
     const { serverBundleEntries } = serverBuildPlan;
+
+    const devHmrRefreshRuntimePath = isBuild
+      ? undefined
+      : resolveReactRefreshRuntimePath(api.context.rootPath);
+    const devHdrSignal = devHmrRefreshRuntimePath
+      ? createDevHdrRevisionSignal({
+          filePath: getDevHdrRevisionFilePath(api.context.rootPath),
+          onError: error =>
+            api.logger.debug(
+              `[${PLUGIN_NAME}] Failed to signal hot data revalidation: ${error.message}`
+            ),
+        })
+      : undefined;
+    let devHmrEnabled = false;
+
     const devRuntime = createReactRouterDevRuntimeController({
       api,
       isBuild,
       buildPlan: serverBuildPlan,
+      onNodeRebuildCommitted: () => devHdrSignal?.bump(),
     });
 
     let clientStats: ReactRouterManifestStats | undefined;
@@ -662,31 +639,35 @@ export const pluginReactRouter = (
       }
     );
 
-    api.onAfterBuild(async ({ environments }) => {
-      await runReactRouterPrerenderBuild({
-        api,
-        hasWebEnvironment: Boolean(environments.web),
-        buildDirectory,
-        serverBuildFile,
-        ssr,
-        isPrerenderEnabled,
-        prerenderConfig,
-        prerenderPaths,
-        basename,
-        future,
-        routes,
-        latestBrowserManifest,
-        latestBrowserManifestModuleExports,
-        clientStats,
-        pluginOptions,
-        appDirectory,
-        assetPrefix,
-        routeChunkOptions,
-        buildManifest,
-        resolvedConfigWithRoutes,
-        buildEnd,
-      });
-    });
+    api.onAfterBuild(({ environments }) =>
+      runPluginEffect(
+        tryPluginPromise(() =>
+          runReactRouterPrerenderBuild({
+            api,
+            hasWebEnvironment: Boolean(environments.web),
+            buildDirectory,
+            serverBuildFile,
+            ssr,
+            isPrerenderEnabled,
+            prerenderConfig,
+            prerenderPaths,
+            basename,
+            future,
+            routes,
+            latestBrowserManifest,
+            latestBrowserManifestModuleExports,
+            clientStats,
+            pluginOptions,
+            appDirectory,
+            assetPrefix,
+            routeChunkOptions,
+            buildManifest,
+            resolvedConfigWithRoutes,
+            buildEnd,
+          })
+        )
+      )
+    );
 
     const allowedActionOriginsForBuild =
       allowedActionOrigins === false ? undefined : allowedActionOrigins;
@@ -746,6 +727,16 @@ export const pluginReactRouter = (
           ...bundleVirtualModules,
           ...bundleManifestModules,
           'virtual/react-router/with-props': generateWithProps(),
+          ...(devHmrRefreshRuntimePath
+            ? {
+                [DEV_HMR_RUNTIME_MODULE_ID]: generateDevHmrRuntimeModule({
+                  reactRefreshRuntimePath: devHmrRefreshRuntimePath,
+                  hdrRevisionFilePath: getDevHdrRevisionFilePath(
+                    api.context.rootPath
+                  ),
+                }),
+              }
+            : {}),
         })
       );
     };
@@ -770,13 +761,18 @@ export const pluginReactRouter = (
         serverBundleEntries,
       });
 
-      const configuredLazyCompilation =
-        pluginOptions.lazyCompilation === undefined
-          ? config.dev?.lazyCompilation
-          : pluginOptions.lazyCompilation;
+      const configuredLazyCompilation = Object.prototype.hasOwnProperty.call(
+        options,
+        'lazyCompilation'
+      )
+        ? pluginOptions.lazyCompilation
+        : (config.dev?.lazyCompilation ?? pluginOptions.lazyCompilation);
       const guardedLazyCompilation = guardReactRouterLazyCompilation({
         lazyCompilation: configuredLazyCompilation,
         entryClientPath: finalEntryClientPath,
+        prewarmReactRouterModules: Boolean(
+          pluginOptions.unstableLazyCompilationPrewarm
+        ),
       });
       const lazyCompilation =
         guardedLazyCompilation === undefined
@@ -807,19 +803,23 @@ export const pluginReactRouter = (
           writeToDisk: true,
           ...lazyCompilation,
           watchFiles: mergeWatchFiles(config.dev?.watchFiles, routeWatchFiles),
-          setupMiddlewares:
-            pluginOptions.customServer || !ssr
-              ? []
-              : [
-                  middlewares => {
-                    middlewares.push(
-                      createDevServerMiddleware({
-                        loadBuild: devRuntime.createBuildLoader(),
-                      })
-                    );
-                  },
-                ],
         },
+        // React Router's request handler natively supports `ssr:false`
+        // builds (it renders the SPA shell for document requests), so the
+        // middleware is registered for SPA mode too — without it, dev
+        // requests would 404 because no HTML entry exists.
+        ...(pluginOptions.customServer
+          ? {}
+          : {
+              server: {
+                setup: [
+                  createReactRouterDevServerSetup({
+                    // Lazy: the dev runtime binding does not exist yet here.
+                    loadBuild: () => devRuntime.createBuildLoader()(),
+                  }),
+                ],
+              },
+            }),
         tools: {
           rspack: {
             plugins: [vmodPlugin],
@@ -919,7 +919,7 @@ export const pluginReactRouter = (
                   ],
                 },
                 externals: nodeExternals,
-                dependencies: ['web'],
+                ...(shouldDependOnWebCompiler ? { dependencies: ['web'] } : {}),
                 externalsType: resolvedServerOutput,
                 output: {
                   chunkFormat: resolvedServerOutput,
@@ -948,6 +948,18 @@ export const pluginReactRouter = (
                 ensureFederationAsyncStartup(rspackConfig);
               }
 
+              if (name === 'web') {
+                devHmrEnabled =
+                  !isBuild &&
+                  devHmrRefreshRuntimePath !== undefined &&
+                  config.mode === 'development' &&
+                  config.dev?.hmr !== false &&
+                  isRspackSwcReactRefreshEnabled(rspackConfig);
+                if (devHmrEnabled) {
+                  devHdrSignal?.ensure();
+                }
+              }
+
               if (name === 'node') {
                 const output = rspackConfig.output;
                 if (output) {
@@ -1020,6 +1032,7 @@ export const pluginReactRouter = (
       ssr,
       isSpaMode,
       rootRoutePath,
+      isDevHmrEnabled: () => devHmrEnabled,
     });
   },
 });