rsbuild-plugin-react-router 0.4.1 → 0.6.0

package/src/route-module-transform-loader.ts

@@ -0,0 +1,149 @@
+import { threadId } from 'node:worker_threads';
+import remapping, { type SourceMapInput } from '@jridgewell/remapping';
+import type { LoaderDefinition } from '@rspack/core';
+import { createReactRouterPerformanceProfiler } from './performance.js';
+import { executeRouteTransformTask } from './route-transform-tasks.js';
+
+export type RouteModuleTransformLoaderOptions = {
+  environmentName: string;
+  performanceScopeId: string;
+  logPerformance: boolean;
+  ssr: boolean;
+  isBuild: boolean;
+  isSpaMode: boolean;
+  rootRoutePath: string | null;
+  devHmr: boolean;
+};
+
+type LoaderContextWithSourceMap = ThisParameterType<
+  LoaderDefinition<RouteModuleTransformLoaderOptions>
+> & {
+  sourceMap?: boolean;
+};
+type LoaderInputSourceMap = Parameters<
+  LoaderDefinition<RouteModuleTransformLoaderOptions>
+>[1];
+type RawLoaderSourceMap = Exclude<LoaderInputSourceMap, string | undefined>;
+
+const LOADER_PERFORMANCE_FLUSH_DELAY_MS = 50;
+const performanceWorkerId = `process-${process.pid}:thread-${threadId}`;
+
+const composeSourceMaps = (
+  generatedMap: SourceMapInput,
+  inputSourceMap: SourceMapInput
+): RawLoaderSourceMap =>
+  JSON.parse(
+    remapping([generatedMap, inputSourceMap], () => null).toString()
+  ) as RawLoaderSourceMap;
+
+const performanceProfilersByScope = new Map<
+  string,
+  Map<string, ReturnType<typeof createReactRouterPerformanceProfiler>>
+>();
+let performanceFlushTimer: ReturnType<typeof setTimeout> | undefined;
+
+const getPerformanceProfiler = (
+  scopeId: string,
+  environment: string | undefined
+): ReturnType<typeof createReactRouterPerformanceProfiler> => {
+  let profilers = performanceProfilersByScope.get(scopeId);
+  if (!profilers) {
+    profilers = new Map();
+    performanceProfilersByScope.set(scopeId, profilers);
+  }
+  const environmentKey = environment ?? 'unknown';
+  let profiler = profilers.get(environmentKey);
+  if (!profiler) {
+    profiler = createReactRouterPerformanceProfiler({
+      enabled: true,
+      log: message => console.info(message),
+    });
+    profilers.set(environmentKey, profiler);
+  }
+  return profiler;
+};
+
+export const flushRouteModuleTransformLoaderPerformance = (): void => {
+  if (performanceFlushTimer) {
+    clearTimeout(performanceFlushTimer);
+    performanceFlushTimer = undefined;
+  }
+
+  for (const profilers of performanceProfilersByScope.values()) {
+    for (const [environment, profiler] of profilers) {
+      profiler.flush(environment === 'unknown' ? undefined : environment, {
+        partial: true,
+        workerId: performanceWorkerId,
+      });
+    }
+  }
+  performanceProfilersByScope.clear();
+};
+
+const schedulePerformanceFlush = (): void => {
+  if (performanceFlushTimer) {
+    clearTimeout(performanceFlushTimer);
+  }
+  performanceFlushTimer = setTimeout(
+    flushRouteModuleTransformLoaderPerformance,
+    LOADER_PERFORMANCE_FLUSH_DELAY_MS
+  );
+};
+
+process.once('beforeExit', flushRouteModuleTransformLoaderPerformance);
+
+const routeModuleTransformLoader: LoaderDefinition<RouteModuleTransformLoaderOptions> =
+  async function routeModuleTransformLoader(
+    this: LoaderContextWithSourceMap,
+    source,
+    inputSourceMap
+  ) {
+    const callback = this.async();
+    const options = this.getOptions();
+
+    const transform = () =>
+      executeRouteTransformTask({
+        kind: 'routeModule',
+        code: String(source),
+        resource: this.resource,
+        resourcePath: this.resourcePath,
+        environmentName: options.environmentName,
+        sourceMaps: Boolean(this.sourceMap),
+        ssr: options.ssr,
+        isBuild: options.isBuild,
+        isSpaMode: options.isSpaMode,
+        rootRoutePath: options.rootRoutePath,
+        devHmr: options.devHmr,
+      });
+
+    try {
+      const result = options.logPerformance
+        ? await getPerformanceProfiler(
+            options.performanceScopeId,
+            options.environmentName
+          ).record(
+            options.environmentName,
+            'route:module',
+            this.resource,
+            transform
+          )
+        : await transform();
+
+      const outputSourceMap =
+        result.map && inputSourceMap
+          ? composeSourceMaps(
+              result.map as SourceMapInput,
+              inputSourceMap as SourceMapInput
+            )
+          : result.map;
+      callback(null, result.code, outputSourceMap ?? undefined);
+    } catch (error) {
+      callback(error instanceof Error ? error : new Error(String(error)));
+    } finally {
+      if (options.logPerformance) {
+        schedulePerformanceFlush();
+      }
+    }
+  };
+
+export default routeModuleTransformLoader;

package/src/route-module-transform-rules.ts

@@ -0,0 +1,115 @@
+import { fileURLToPath } from 'node:url';
+import type { Rspack } from '@rsbuild/core';
+import type { RouteModuleTransformLoaderOptions } from './route-module-transform-loader.js';
+import type { PluginOptions, Route } from './types.js';
+
+const routeModuleTransformLoaderPath = fileURLToPath(
+  new URL('./route-module-transform-loader.js', import.meta.url)
+);
+
+const getRouteModuleTransformParallel = (
+  parallelRouteTransform: PluginOptions['parallelRouteTransform']
+): Rspack.RuleSetLoaderWithOptions['parallel'] => {
+  if (
+    parallelRouteTransform === undefined ||
+    parallelRouteTransform === false
+  ) {
+    return undefined;
+  }
+  if (parallelRouteTransform === true) {
+    return true;
+  }
+  if (typeof parallelRouteTransform === 'number') {
+    if (
+      !Number.isInteger(parallelRouteTransform) ||
+      parallelRouteTransform < 1
+    ) {
+      throw new Error(
+        '[react-router] parallelRouteTransform must be true, false, or a positive integer.'
+      );
+    }
+    return { maxWorkers: parallelRouteTransform };
+  }
+  throw new Error(
+    '[react-router] parallelRouteTransform must be true, false, or a positive integer.'
+  );
+};
+
+export const shouldUseRouteModuleTransformLoader = (
+  parallelRouteTransform: PluginOptions['parallelRouteTransform']
+): boolean =>
+  getRouteModuleTransformParallel(parallelRouteTransform) !== undefined;
+
+const createRouteModuleTransformUse = (
+  options: RouteModuleTransformLoaderOptions,
+  parallelRouteTransform: PluginOptions['parallelRouteTransform']
+): Rspack.RuleSetLoaderWithOptions => {
+  const parallel = getRouteModuleTransformParallel(parallelRouteTransform);
+  return {
+    loader: routeModuleTransformLoaderPath,
+    options,
+    ...(parallel ? { parallel } : {}),
+  };
+};
+
+export const registerRouteModuleTransformRules = (
+  rspackConfig: Rspack.Configuration,
+  {
+    environmentName,
+    ssr,
+    isBuild,
+    isSpaMode,
+    rootRoutePath,
+    devHmr,
+    logPerformance,
+    routeByFilePath,
+    parallelRouteTransform,
+  }: {
+    environmentName: string;
+    ssr: boolean;
+    isBuild: boolean;
+    isSpaMode: boolean;
+    rootRoutePath: string | null;
+    devHmr: boolean;
+    logPerformance: boolean;
+    routeByFilePath: Map<string, Route>;
+    parallelRouteTransform: PluginOptions['parallelRouteTransform'];
+  }
+): void => {
+  const routeModuleTransformUse = createRouteModuleTransformUse(
+    {
+      environmentName,
+      performanceScopeId: [
+        environmentName,
+        isBuild ? 'build' : 'dev',
+        ssr ? 'ssr' : 'spa',
+        rootRoutePath ?? 'rootless',
+      ].join(':'),
+      logPerformance,
+      ssr,
+      isBuild,
+      isSpaMode,
+      rootRoutePath,
+      devHmr,
+    },
+    parallelRouteTransform
+  );
+
+  rspackConfig.module ??= {};
+  rspackConfig.module.rules ??= [];
+  rspackConfig.module.rules.push(
+    {
+      resourceQuery: /\?react-router-route/,
+      enforce: 'post',
+      use: [routeModuleTransformUse],
+    },
+    {
+      test: path => routeByFilePath.has(path),
+      resourceQuery: {
+        not: /__react-router-build-client-route|react-router-route|route-chunk=/,
+      },
+      enforce: 'post',
+      use: [routeModuleTransformUse],
+    }
+  );
+};

package/src/route-transform-tasks.ts

@@ -24,10 +24,7 @@ import {
   type RouteChunkCache,
   type RouteChunkConfig,
 } from './route-chunks.js';
-import {
-  getProgram,
-  type AnyNode,
-} from './route-ast.js';
+import { getProgram, type AnyNode } from './route-ast.js';
 
 export type RouteTransformResult = {
   code: string;
@@ -88,6 +85,10 @@ export type RouteTransformTaskOptions = {
   routeChunkCache?: RouteChunkCache;
 };
 
+export type RouteTransformRunner = (
+  task: RouteTransformTask
+) => Promise<RouteTransformResult>;
+
 const defaultRouteChunkCache: RouteChunkCache = new Map();
 
 const getRouteChunkCache = (options?: RouteTransformTaskOptions) =>
@@ -309,6 +310,41 @@ const buildComponentRefreshRegistrations = (names: string[]): string => {
   return `\nif (typeof $RefreshReg$ === 'function') {\n${registrations}\n}\n`;
 };
 
+export const validateSpaModeRouteExports = ({
+  exportNames,
+  resourcePath,
+  rootRoutePath,
+}: {
+  exportNames: readonly string[];
+  resourcePath: string;
+  rootRoutePath: string | null;
+}): void => {
+  const isRootRoute = resourcePath === rootRoutePath;
+  const relativePath = relative(process.cwd(), resourcePath);
+  const invalidServerOnly = exportNames.filter(exp => {
+    if (isRootRoute && exp === 'loader') return false;
+    return SERVER_ONLY_ROUTE_EXPORTS_SET.has(exp);
+  });
+
+  if (invalidServerOnly.length > 0) {
+    const list = invalidServerOnly.map(exp => `\`${exp}\``).join(', ');
+    throw new Error(
+      `SPA Mode: ${invalidServerOnly.length} invalid route export(s) in ` +
+        `\`${relativePath}\`: ${list}. ` +
+        `See https://reactrouter.com/how-to/spa for more information.`
+    );
+  }
+
+  if (!isRootRoute && exportNames.includes('HydrateFallback')) {
+    throw new Error(
+      `SPA Mode: Invalid \`HydrateFallback\` export found in ` +
+        `\`${relativePath}\`. ` +
+        `\`HydrateFallback\` is only permitted on the root route in SPA Mode. ` +
+        `See https://reactrouter.com/how-to/spa for more information.`
+    );
+  }
+};
+
 const transformRouteModule = async (
   task: RouteModuleTransformTask
 ): Promise<RouteTransformResult> => {
@@ -324,32 +360,11 @@ const transformRouteModule = async (
 
   const ast = parse(code, { sourceType: 'module' });
   if (task.environmentName === 'web' && !task.ssr && task.isSpaMode) {
-    const resolvedExportNames = collectProgramExportNames(getProgram(ast));
-    const isRootRoute = task.resourcePath === task.rootRoutePath;
-    const relativePath = relative(process.cwd(), task.resourcePath);
-
-    const invalidServerOnly = resolvedExportNames.filter(exp => {
-      if (isRootRoute && exp === 'loader') return false;
-      return SERVER_ONLY_ROUTE_EXPORTS_SET.has(exp);
+    validateSpaModeRouteExports({
+      exportNames: collectProgramExportNames(getProgram(ast)),
+      resourcePath: task.resourcePath,
+      rootRoutePath: task.rootRoutePath,
     });
-
-    if (invalidServerOnly.length > 0) {
-      const list = invalidServerOnly.map(e => `\`${e}\``).join(', ');
-      throw new Error(
-        `SPA Mode: ${invalidServerOnly.length} invalid route export(s) in ` +
-          `\`${relativePath}\`: ${list}. ` +
-          `See https://reactrouter.com/how-to/spa for more information.`
-      );
-    }
-
-    if (!isRootRoute && resolvedExportNames.includes('HydrateFallback')) {
-      throw new Error(
-        `SPA Mode: Invalid \`HydrateFallback\` export found in ` +
-          `\`${relativePath}\`. ` +
-          `\`HydrateFallback\` is only permitted on the root route in SPA Mode. ` +
-          `See https://reactrouter.com/how-to/spa for more information.`
-      );
-    }
   }
 
   const removedServerOnlyExports =