rsbuild-plugin-react-router 0.1.1 → 0.3.0

package/src/build-output-transforms.ts

@@ -0,0 +1,273 @@
+import type { RsbuildPluginAPI, TransformHandler } from '@rsbuild/core';
+import jsesc from 'jsesc';
+import { relative } from 'pathe';
+import { PLUGIN_NAME } from './constants.js';
+import {
+  getReactRouterManifestForDev,
+  type ReactRouterManifestStats,
+} from './manifest.js';
+import type { RouteTransformExecutor } from './parallel-route-transforms.js';
+import type { ReactRouterPerformanceProfiler } from './performance.js';
+import { createBundlerRouteExportResolver } from './route-export-resolution.js';
+import type { RouteChunkConfig } from './route-chunks.js';
+import type { PluginOptions, Route } from './types.js';
+import { isSourceMapEnabled } from './warnings/warn-on-client-source-maps.js';
+
+type ReactRouterManifest = Awaited<
+  ReturnType<typeof getReactRouterManifestForDev>
+>;
+
+type RegisterBuildOutputTransformsOptions = {
+  api: RsbuildPluginAPI;
+  resolvedServerOutput: 'module' | 'commonjs';
+  performanceProfiler: ReactRouterPerformanceProfiler;
+  getLatestServerManifest: () => ReactRouterManifest | null;
+  getLatestServerManifestByBundleId: (
+    bundleId: string
+  ) => ReactRouterManifest | undefined;
+  routes: Record<string, Route>;
+  pluginOptions: PluginOptions;
+  getClientStats: () => ReactRouterManifestStats | undefined;
+  appDirectory: string;
+  getAssetPrefix: () => string;
+  routeChunkOptions: Parameters<typeof getReactRouterManifestForDev>[5];
+  routeTransformExecutor: RouteTransformExecutor;
+  routeByFilePath: Map<string, Route>;
+  routeChunkConfig: RouteChunkConfig;
+  isBuild: boolean;
+  splitRouteModules: boolean;
+  ssr: boolean;
+  isSpaMode: boolean;
+  rootRoutePath: string;
+};
+
+export const registerBuildOutputTransforms = ({
+  api,
+  resolvedServerOutput,
+  performanceProfiler,
+  getLatestServerManifest,
+  getLatestServerManifestByBundleId,
+  routes,
+  pluginOptions,
+  getClientStats,
+  appDirectory,
+  getAssetPrefix,
+  routeChunkOptions,
+  routeTransformExecutor,
+  routeByFilePath,
+  routeChunkConfig,
+  isBuild,
+  splitRouteModules,
+  ssr,
+  isSpaMode,
+  rootRoutePath,
+}: RegisterBuildOutputTransformsOptions): void => {
+  const transformRouteModule = async (args: Parameters<TransformHandler>[0]) =>
+    performanceProfiler.record(
+      args.environment?.name,
+      'route:module',
+      args.resource,
+      async () =>
+        routeTransformExecutor.run({
+          kind: 'routeModule',
+          code: args.code,
+          resource: args.resource,
+          resourcePath: args.resourcePath,
+          environmentName: args.environment.name,
+          sourceMaps: isSourceMapEnabled(
+            args.environment.config.output.sourceMap
+          ),
+          ssr,
+          isBuild,
+          isSpaMode,
+          rootRoutePath,
+        })
+    );
+
+  api.processAssets(
+    { stage: 'additional', targets: ['node'] },
+    ({ sources, compilation }) => {
+      const packageJsonPath = 'package.json';
+      const source = new sources.RawSource(
+        `{"type": "${resolvedServerOutput}"}`
+      );
+
+      if (compilation.getAsset(packageJsonPath)) {
+        compilation.updateAsset(packageJsonPath, source);
+      } else {
+        compilation.emitAsset(packageJsonPath, source);
+      }
+    }
+  );
+
+  api.transform(
+    {
+      test: /virtual\/react-router\/(browser|server)-manifest/,
+    },
+    async args =>
+      performanceProfiler.record(
+        args.environment?.name,
+        'manifest:transform',
+        args.resource,
+        async () => {
+          if (args.environment.name === 'web') {
+            return {
+              code: `window.__reactRouterManifest = "PLACEHOLDER";`,
+            };
+          }
+
+          const bundleMatch = args.resource.match(
+            /virtual\/react-router\/server-manifest(?:-([^?]+))?/
+          );
+          const bundleId = bundleMatch?.[1]?.replace(/\.js$/, '');
+          const latestServerManifest = getLatestServerManifest();
+          const manifest =
+            (latestServerManifest
+              ? ((bundleId && getLatestServerManifestByBundleId(bundleId)) ??
+                latestServerManifest)
+              : null) ??
+            (await getReactRouterManifestForDev(
+              routes,
+              pluginOptions,
+              getClientStats(),
+              appDirectory,
+              getAssetPrefix(),
+              routeChunkOptions
+            ));
+          return {
+            code: `export default ${jsesc(manifest, { es6: true })};`,
+          };
+        }
+      )
+  );
+
+  api.transform(
+    {
+      resourceQuery: /__react-router-build-client-route/,
+    },
+    async args =>
+      performanceProfiler.record(
+        args.environment?.name,
+        'route:client-entry',
+        args.resource,
+        async () =>
+          routeTransformExecutor.run({
+            kind: 'routeClientEntry',
+            code: args.code,
+            resourcePath: args.resourcePath,
+            environmentName: args.environment?.name,
+            isBuild,
+            routeChunkConfig,
+          })
+      )
+  );
+
+  api.transform(
+    {
+      resourceQuery: /route-chunk=/,
+      environments: ['web'],
+    },
+    async args =>
+      performanceProfiler.record(
+        args.environment?.name,
+        'route:chunk',
+        args.resource,
+        async () =>
+          routeTransformExecutor.run({
+            kind: 'routeChunk',
+            code: args.code,
+            resource: args.resource,
+            resourcePath: args.resourcePath,
+            isBuild,
+            routeChunkConfig,
+          })
+      )
+  );
+
+  if (isBuild && splitRouteModules) {
+    api.transform(
+      {
+        test: path => routeByFilePath.has(path),
+        resourceQuery: {
+          not: /__react-router-build-client-route|react-router-route|route-chunk=/,
+        },
+        environments: ['web'],
+      },
+      async args =>
+        performanceProfiler.record(
+          args.environment?.name,
+          'route:split-exports',
+          args.resource,
+          async () =>
+            routeTransformExecutor.run({
+              kind: 'splitRouteExports',
+              code: args.code,
+              resourcePath: args.resourcePath,
+              routeChunkConfig,
+            })
+        )
+    );
+  }
+
+  api.transform(
+    {
+      test: /[\\/]\.server[\\/]|\.server(\.[cm]?[jt]sx?)?$/,
+      environments: ['web'],
+    },
+    async args =>
+      performanceProfiler.record(
+        args.environment?.name,
+        'module:server-only-guard',
+        args.resource,
+        async () => {
+          const relativePath = relative(process.cwd(), args.resourcePath);
+          throw new Error(
+            `[${PLUGIN_NAME}] Server-only module referenced by client: ${relativePath}`
+          );
+        }
+      )
+  );
+
+  api.transform(
+    {
+      test: /[\\/]\.client[\\/]|\.client(\.[cm]?[jt]sx?)?$/,
+      environments: ['node'],
+    },
+    async args =>
+      performanceProfiler.record(
+        args.environment?.name,
+        'module:client-only-stub',
+        args.resource,
+        async () => {
+          return routeTransformExecutor.run({
+            kind: 'clientOnlyStub',
+            code: args.code,
+            resourcePath: args.resourcePath,
+            resolveExportAllModule:
+              typeof args.resolve === 'function'
+                ? createBundlerRouteExportResolver(args.resolve)
+                : undefined,
+          });
+        }
+      )
+  );
+
+  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=/,
+      },
+      order: 'post',
+    },
+    transformRouteModule
+  );
+};

package/src/concurrency.ts

@@ -0,0 +1,34 @@
+import { availableParallelism, cpus } from 'node:os';
+
+const DEFAULT_RESERVED_CORES = 2;
+
+const getAvailableCpuCount = (): number =>
+  typeof availableParallelism === 'function'
+    ? availableParallelism()
+    : cpus().length;
+
+export const getDefaultConcurrency = (
+  cpuCount: number = getAvailableCpuCount()
+): number => Math.max(0, Math.floor(cpuCount) - DEFAULT_RESERVED_CORES);
+
+export const mapWithConcurrency = async <Item, Result>(
+  items: readonly Item[],
+  concurrency: number,
+  worker: (item: Item, index: number) => Promise<Result>
+): Promise<Result[]> => {
+  const results = new Array<Result>(items.length);
+  let nextIndex = 0;
+  const workerCount = Math.max(1, Math.min(concurrency, items.length));
+  await Promise.all(
+    Array.from({ length: workerCount }, async () => {
+      while (true) {
+        const index = nextIndex++;
+        if (index >= items.length) {
+          return;
+        }
+        results[index] = await worker(items[index], index);
+      }
+    })
+  );
+  return results;
+};

package/src/config-imports.ts

@@ -0,0 +1,45 @@
+import type { ModuleCache } from 'jiti';
+import { resolve } from 'pathe';
+
+const normalizePath = (filePath: string): string => resolve(filePath);
+
+const isNodeModulePath = (filePath: string): boolean =>
+  filePath.split(/[\\/]/).includes('node_modules');
+
+export const collectConfigImportWatchPaths = (
+  configPath: string,
+  moduleCache: ModuleCache,
+  previousCacheKeys: ReadonlySet<string>
+): string[] => {
+  const normalizedConfigPath = normalizePath(configPath);
+  const watchPaths = new Set<string>();
+
+  for (const [cacheKey, module] of Object.entries(moduleCache)) {
+    if (previousCacheKeys.has(cacheKey)) {
+      continue;
+    }
+
+    const importPath = normalizePath(module?.filename ?? cacheKey);
+    if (importPath === normalizedConfigPath || isNodeModulePath(importPath)) {
+      continue;
+    }
+
+    watchPaths.add(importPath);
+  }
+
+  return Array.from(watchPaths);
+};
+
+export const clearConfigImportCache = (
+  moduleCache: ModuleCache,
+  filePaths: readonly string[]
+): void => {
+  const normalizedFilePaths = new Set(filePaths.map(normalizePath));
+
+  for (const [cacheKey, module] of Object.entries(moduleCache)) {
+    const cachedPath = normalizePath(module?.filename ?? cacheKey);
+    if (normalizedFilePaths.has(cachedPath)) {
+      delete moduleCache[cacheKey];
+    }
+  }
+};

package/src/constants.ts

@@ -0,0 +1,91 @@
+export const PLUGIN_NAME = 'rsbuild:react-router';
+
+export const JS_EXTENSIONS = [
+  '.tsx',
+  '.ts',
+  '.jsx',
+  '.js',
+  '.mjs',
+  '.mts',
+] as const;
+
+export const JS_LOADERS = {
+  '.ts': 'ts',
+  '.tsx': 'tsx',
+  '.js': 'js',
+  '.jsx': 'jsx',
+  '.mjs': 'js',
+  '.mts': 'ts',
+} as const;
+
+export const BUILD_CLIENT_ROUTE_QUERY_STRING =
+  '?__react-router-build-client-route';
+
+export const SERVER_ONLY_ROUTE_EXPORTS = [
+  'loader',
+  'action',
+  'middleware',
+  'headers',
+] as const;
+
+export const SERVER_ONLY_ROUTE_EXPORTS_SET: ReadonlySet<string> = new Set(
+  SERVER_ONLY_ROUTE_EXPORTS
+);
+
+// Client route exports are split into non-component exports and component exports.
+// This mirrors upstream React Router Vite plugin intent and is used for export filtering.
+export const CLIENT_NON_COMPONENT_EXPORTS = [
+  'clientAction',
+  'clientLoader',
+  'clientMiddleware',
+  'handle',
+  'meta',
+  'links',
+  'shouldRevalidate',
+] as const;
+
+export const CLIENT_COMPONENT_EXPORTS = [
+  'default',
+  'ErrorBoundary',
+  'HydrateFallback',
+  'Layout',
+] as const;
+
+export const CLIENT_ROUTE_EXPORTS: readonly (
+  | (typeof CLIENT_NON_COMPONENT_EXPORTS)[number]
+  | (typeof CLIENT_COMPONENT_EXPORTS)[number]
+)[] = [...CLIENT_NON_COMPONENT_EXPORTS, ...CLIENT_COMPONENT_EXPORTS];
+
+export const CLIENT_ROUTE_EXPORTS_SET: ReadonlySet<string> = new Set(
+  CLIENT_ROUTE_EXPORTS
+);
+
+export const NAMED_COMPONENT_EXPORTS = [
+  'HydrateFallback',
+  'ErrorBoundary',
+] as const;
+
+export const NAMED_COMPONENT_EXPORTS_SET: ReadonlySet<string> = new Set(
+  NAMED_COMPONENT_EXPORTS
+);
+
+export const SERVER_EXPORTS = {
+  loader: 'loader',
+  action: 'action',
+  middleware: 'middleware',
+  headers: 'headers',
+} as const;
+
+export const CLIENT_EXPORTS = {
+  clientAction: 'clientAction',
+  clientLoader: 'clientLoader',
+  clientMiddleware: 'clientMiddleware',
+  default: 'default',
+  ErrorBoundary: 'ErrorBoundary',
+  handle: 'handle',
+  HydrateFallback: 'HydrateFallback',
+  Layout: 'Layout',
+  links: 'links',
+  meta: 'meta',
+  shouldRevalidate: 'shouldRevalidate',
+} as const;