rsbuild-plugin-react-router 0.1.1 → 0.3.0

package/src/templates/entry.server.tsx

@@ -0,0 +1,76 @@
+import { PassThrough } from 'node:stream';
+import { createReadableStreamFromReadable } from '@react-router/node';
+import { isbot } from 'isbot';
+import * as React from 'react';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type {
+  // AppLoadContext,
+  EntryContext,
+} from 'react-router';
+import { ServerRouter } from 'react-router';
+
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext
+  // loadContext: AppLoadContext
+): Promise<Response> {
+  return new Promise<Response>((resolve, reject) => {
+    let shellRendered = false;
+    let statusCode = responseStatusCode;
+    const userAgent = request.headers.get('user-agent');
+
+    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    const readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
+        ? 'onAllReady'
+        : 'onShellReady';
+    let abortDelay: ReturnType<typeof setTimeout> | undefined;
+    let ready = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        [readyOption]() {
+          ready = true;
+          if (readyOption === 'onAllReady' && abortDelay) {
+            clearTimeout(abortDelay);
+          }
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: statusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          statusCode = 500;
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    abortDelay = setTimeout(abort, ABORT_DELAY);
+    if (readyOption === 'onAllReady' && ready) {
+      clearTimeout(abortDelay);
+    }
+  });
+}

package/src/typegen.ts

@@ -0,0 +1,49 @@
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import type { ResultPromise } from 'execa';
+
+export const registerReactRouterTypegen = (api: RsbuildPluginAPI): void => {
+  let typegenProcess: ResultPromise | undefined;
+
+  api.onBeforeStartDevServer(async () => {
+    if (typegenProcess) {
+      return;
+    }
+    const { execa } = await import('execa');
+    const process = execa(
+      'npx',
+      ['--yes', 'react-router', 'typegen', '--watch'],
+      {
+        stdio: 'inherit',
+        detached: false,
+        cleanup: true,
+      }
+    );
+    typegenProcess = process;
+    process
+      .catch(() => {
+        // Ignore errors when the process is killed on server shutdown.
+      })
+      .finally(() => {
+        if (typegenProcess === process) {
+          typegenProcess = undefined;
+        }
+      });
+  });
+
+  api.onCloseDevServer(async () => {
+    const process = typegenProcess;
+    typegenProcess = undefined;
+    if (!process) {
+      return;
+    }
+    process.kill('SIGTERM');
+    await process.catch(() => undefined);
+  });
+
+  api.onBeforeBuild(async () => {
+    const { execa } = await import('execa');
+    await execa('npx', ['--yes', 'react-router', 'typegen'], {
+      stdio: 'inherit',
+    });
+  });
+};

package/src/types.ts

@@ -0,0 +1,82 @@
+import type { RsbuildConfig } from '@rsbuild/core';
+
+export type Route = {
+  id: string;
+  parentId?: string;
+  file: string;
+  path?: string;
+  index?: boolean;
+  caseSensitive?: boolean;
+  children?: Route[];
+};
+
+export type PluginOptions = {
+  /**
+   * Whether to disable automatic middleware setup for custom server implementation.
+   * Use this when you want to handle server setup manually.
+   * @default false
+   */
+  customServer?: boolean;
+
+  /**
+   * The output format for server builds.
+   * When set to "module", no package.json will be emitted.
+   * @default "module"
+   */
+  serverOutput?: 'module' | 'commonjs';
+
+  /**
+   * Federation mode configuration
+   */
+  federation?: boolean;
+
+  /**
+   * Opt in to Rsbuild's dev-only lazy compilation behavior.
+   *
+   * React Router hydration modules remain eager so initial dev requests can
+   * load the browser manifest and route modules without lazy proxy delays.
+   *
+   * @default undefined
+   */
+  lazyCompilation?: NonNullable<RsbuildConfig['dev']>['lazyCompilation'];
+
+  /**
+   * Emit structured React Router plugin timing logs.
+   * @default false
+   */
+  logPerformance?: boolean;
+
+  /**
+   * Run route transforms in a worker-thread pool.
+   * Pass `true` to force the default worker count, a positive integer to set
+   * the worker count, or `false` to disable.
+   * @default Automatically enabled for 256+ resolved routes. The automatic
+   * pool uses available CPU cores minus 2.
+   */
+  parallelRouteTransform?: boolean | number;
+
+  /**
+   * Called when the route graph changes during development.
+   * Programmatic/custom servers can use this to recreate their Rsbuild server;
+   * the CLI uses its built-in reload-server watcher when this is omitted. This
+   * notification is not awaited, so it may safely close the current server.
+   */
+  onRouteTopologyChange?: () => void | Promise<void>;
+};
+
+export type RouteManifestItem = Omit<Route, 'file' | 'children'> & {
+  module: string;
+  clientActionModule?: string;
+  clientLoaderModule?: string;
+  clientMiddlewareModule?: string;
+  hydrateFallbackModule?: string;
+  hasAction: boolean;
+  hasLoader: boolean;
+  hasClientAction: boolean;
+  hasClientLoader: boolean;
+  hasClientMiddleware: boolean;
+  hasDefaultExport: boolean;
+  hasErrorBoundary: boolean;
+  imports: string[];
+  css: string[];
+};

package/src/validation/validate-plugin-order.ts

@@ -0,0 +1,76 @@
+import type { RsbuildConfig } from '@rsbuild/core';
+
+function pluginId(name: string) {
+  return `rsbuild:${name}`;
+}
+
+function flattenPlugins(input: unknown): Array<{ name?: string }> {
+  if (!Array.isArray(input)) return [];
+  const out: Array<{ name?: string }> = [];
+  for (const item of input) {
+    if (!item) continue;
+    if (Array.isArray(item)) {
+      out.push(...flattenPlugins(item));
+      continue;
+    }
+    if (typeof (item as any)?.then === 'function') {
+      // Skip promises - normalized config should already be resolved.
+      continue;
+    }
+    if (typeof item === 'object') {
+      out.push(item as any);
+    }
+  }
+  return out;
+}
+
+function indexOfPlugin(plugins: Array<{ name?: string }>, names: string[]) {
+  return plugins.findIndex(p => (p?.name ? names.includes(p.name) : false));
+}
+
+export type PluginOrderIssue =
+  | {
+      kind: 'error';
+      message: string;
+    }
+  | {
+      kind: 'warn';
+      message: string;
+    };
+
+export function validatePluginOrderFromConfig(
+  config: RsbuildConfig
+): PluginOrderIssue[] {
+  const plugins = flattenPlugins(config.plugins);
+  const issues: PluginOrderIssue[] = [];
+
+  // Best-effort port of upstream validate-plugin-order:
+  // - `rsbuild:mdx` must be before `rsbuild:react-router` so that route files
+  //   can be authored in MDX and still have exports parsed correctly.
+  const rrIndex = indexOfPlugin(plugins, ['rsbuild:react-router']);
+  const mdxIndex = indexOfPlugin(plugins, [pluginId('mdx')]);
+  if (rrIndex >= 0 && mdxIndex >= 0 && mdxIndex > rrIndex) {
+    issues.push({
+      kind: 'error',
+      message:
+        `The \"rsbuild:mdx\" plugin should be placed before the React Router plugin ` +
+        `in your Rsbuild config. This ensures route modules authored in MDX are ` +
+        `compiled before React Router inspects route exports.`,
+    });
+  }
+
+  // Rsbuild/React Router expectation: user should also include React support
+  // (JSX transform + refresh). We can only warn since Rsbuild configs may not
+  // use React at all (or may provide a custom JSX pipeline).
+  const hasReact = plugins.some(p => p?.name === pluginId('react'));
+  if (rrIndex >= 0 && !hasReact) {
+    issues.push({
+      kind: 'warn',
+      message:
+        `React Router plugin detected without \"rsbuild:react\". If you are using ` +
+        `JSX/TSX route modules, add \"@rsbuild/plugin-react\" to your plugins list.`,
+    });
+  }
+
+  return issues;
+}

package/src/virtual-modules.ts

@@ -0,0 +1,30 @@
+const VIRTUAL_MODULE_PREFIX = 'virtual/react-router/';
+
+export const getVirtualModuleFilePath = (moduleId: string): string => {
+  if (!moduleId.startsWith(VIRTUAL_MODULE_PREFIX)) {
+    throw new Error(
+      `Virtual module id must start with ${JSON.stringify(VIRTUAL_MODULE_PREFIX)}: ${moduleId}`
+    );
+  }
+
+  const relativeId = moduleId.slice(VIRTUAL_MODULE_PREFIX.length);
+  const segments = relativeId.split('/');
+  if (
+    !relativeId ||
+    segments.some(segment => !segment || segment === '.' || segment === '..')
+  ) {
+    throw new Error(`Invalid virtual module id: ${moduleId}`);
+  }
+
+  return `node_modules/${moduleId}.js`;
+};
+
+export const mapVirtualModules = (
+  modules: Record<string, string>
+): Record<string, string> =>
+  Object.fromEntries(
+    Object.entries(modules).map(([moduleId, contents]) => [
+      getVirtualModuleFilePath(moduleId),
+      contents,
+    ])
+  );

package/src/warnings/warn-on-client-source-maps.ts

@@ -0,0 +1,96 @@
+import type { NormalizedConfig } from '@rsbuild/core';
+
+type Warn = (message: string) => void;
+type ToolsRspackConfig = NonNullable<NormalizedConfig['tools']>['rspack'];
+type SourceMapConfigObject = { js?: unknown };
+
+function isProdBuild(mode?: string): boolean {
+  // Prefer Rsbuild's normalized `mode` (explicit) and fall back to NODE_ENV.
+  return mode === 'production' || process.env.NODE_ENV === 'production';
+}
+
+export function isSourceMapEnabled(value: unknown): boolean {
+  // Rsbuild normalizes `output.sourceMap` into either:
+  //  - boolean
+  //  - { js?: devtool; css: boolean }
+  if (value === true) return true;
+  if (value === false || value == null) return false;
+  if (typeof value === 'string') return true;
+  if (typeof value === 'object') {
+    const js = (value as SourceMapConfigObject).js;
+    // Any truthy devtool string/object means source maps are on for JS.
+    return Boolean(js);
+  }
+  return false;
+}
+
+function isDevtoolSourceMap(value: unknown): boolean {
+  if (value === true) return true;
+  if (value == null || value === false) return false;
+  if (typeof value === 'string') {
+    return value.includes('source-map');
+  }
+  // Unknown object shape - treat as enabled to be safe.
+  return typeof value === 'object';
+}
+
+export function getClientSourceMapSetting(
+  normalized: NormalizedConfig,
+  clientEnvName = 'web'
+): unknown {
+  // Prefer environment setting, fallback to global.
+  return (
+    normalized.environments?.[clientEnvName]?.output?.sourceMap ??
+    normalized.output?.sourceMap
+  );
+}
+
+export function getClientDevtoolSetting(
+  normalized: NormalizedConfig,
+  clientEnvName = 'web'
+): unknown {
+  const envTools = normalized.environments?.[clientEnvName]?.tools?.rspack;
+  const rootTools = normalized.tools?.rspack;
+  return (
+    getDevtoolFromRspackConfig(envTools) ??
+    getDevtoolFromRspackConfig(rootTools)
+  );
+}
+
+function getDevtoolFromRspackConfig(config?: ToolsRspackConfig): unknown {
+  if (!config) return undefined;
+  if (typeof config === 'function') return undefined;
+  if (typeof config !== 'object') return undefined;
+  return (config as { devtool?: unknown }).devtool;
+}
+
+export function warnOnClientSourceMaps(
+  normalized: NormalizedConfig,
+  warn: Warn,
+  clientEnvName = 'web'
+): void {
+  // Only warn on production builds.
+  if (!isProdBuild(normalized.mode)) {
+    return;
+  }
+
+  const sourceMapSetting = getClientSourceMapSetting(normalized, clientEnvName);
+  const devtoolSetting = getClientDevtoolSetting(normalized, clientEnvName);
+  if (
+    !isSourceMapEnabled(sourceMapSetting) &&
+    !isDevtoolSourceMap(devtoolSetting)
+  ) {
+    return;
+  }
+
+  warn(
+    [
+      '',
+      '  WARNING: Source maps are enabled in production',
+      '  This makes your server code publicly visible in the browser.',
+      '  This is highly discouraged! If you insist, ensure that you are using',
+      '  environment variables for secrets and not hard-coding them in your source code.',
+      '',
+    ].join('\n')
+  );
+}

package/src/yuku.ts

@@ -0,0 +1,67 @@
+import {
+  parse as yukuParse,
+  walk,
+  type ParseOptions,
+  type ParseResult,
+} from 'yuku-parser';
+import type { Rspack } from '@rsbuild/core';
+import { print } from 'yuku-codegen';
+
+export const parse = (
+  code: string,
+  options: ParseOptions = {}
+): ParseResult => {
+  const result = yukuParse(code, {
+    ...options,
+    sourceType: options.sourceType ?? 'module',
+    lang: options.lang ?? 'tsx',
+    attachComments: options.attachComments ?? true,
+  });
+  const errors = result.diagnostics.filter(
+    diagnostic => diagnostic.severity === 'error'
+  );
+  if (errors.length > 0) {
+    throw new Error(errors.map(error => error.message).join('\n'));
+  }
+  return result;
+};
+
+export const traverse: typeof walk = walk;
+
+export const generate = (
+  ast: ParseResult | { type: 'Program' },
+  options: {
+    sourceMaps?: boolean;
+    filename?: string;
+    sourceFileName?: string;
+  } = {}
+): { code: string; map: Rspack.RawSourceMap | null } => {
+  const result = 'program' in ast ? ast : { program: ast, lineStarts: [] };
+  const generated = print(result.program as Parameters<typeof print>[0], {
+    comments: true,
+    sourceMaps: options.sourceMaps
+      ? {
+          lineStarts: result.lineStarts,
+          file: options.filename,
+          sourceFileName: options.sourceFileName,
+        }
+      : undefined,
+  });
+  if (generated.errors.length > 0) {
+    throw new Error(generated.errors.map(error => error.message).join('\n'));
+  }
+  const map = generated.map
+    ? {
+        ...generated.map,
+        file: generated.map.file ?? options.filename ?? '',
+        sourceRoot: generated.map.sourceRoot ?? undefined,
+        sourcesContent:
+          generated.map.sourcesContent?.map(source => source ?? '') ??
+          undefined,
+      }
+    : null;
+
+  return { code: generated.code, map };
+};
+
+export type { ParseResult };

package/dist/906.js

@@ -1 +0,0 @@
-export { ServerRouter, createRequestHandler, matchRoutes } from "react-router";

package/dist/946.js

@@ -1 +0,0 @@
-export { StrictMode, createElement, startTransition } from "react";

package/dist/babel.d.ts

@@ -1,8 +0,0 @@
-import type { types as Babel } from '@babel/core';
-import { type ParseResult, parse } from '@babel/parser';
-import type { NodePath } from '@babel/traverse';
-import * as t from '@babel/types';
-declare const traverse: typeof import('@babel/traverse').default;
-declare const generate: typeof import('@babel/generator').default;
-export { traverse, generate, parse, t };
-export type { Babel, NodePath, ParseResult };

package/dist/rslib-runtime.js

@@ -1,23 +0,0 @@
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    return __webpack_modules__[moduleId](module, module.exports, __webpack_require__), module.exports;
-}
-__webpack_require__.add = function(modules) {
-    Object.assign(__webpack_require__.m, modules);
-}, __webpack_require__.n = (module)=>{
-    var getter = module && module.__esModule ? ()=>module.default : ()=>module;
-    return __webpack_require__.d(getter, {
-        a: getter
-    }), getter;
-}, __webpack_require__.d = (exports, definition)=>{
-    for(var key in definition)__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key) && Object.defineProperty(exports, key, {
-        enumerable: !0,
-        get: definition[key]
-    });
-}, __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-export { __webpack_require__ };