rsbuild-plugin-react-router 0.5.0 → 0.6.0

package/src/dev-source-maps.ts

@@ -0,0 +1,257 @@
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { SourceMap, type SourceMapPayload } from 'node:module';
+import { dirname, isAbsolute, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Rspack } from '@rsbuild/core';
+
+type CachedSourceMap = {
+  cacheKey: string;
+  sourceMap: SourceMap | null;
+};
+
+type InMemorySourceMap = {
+  load: () => SourceMapPayload | null;
+  sourceMap?: SourceMap | null;
+};
+
+const SOURCE_MAPPING_URL_MARKER = '//# sourceMappingURL=';
+const GENERATED_JS_FRAME_RE =
+  /(file:\/\/\/[^\s()]+\.m?js|\/[^\s()]+\.m?js):(\d+):(\d+)/g;
+
+let installed = false;
+let previousPrepareStackTrace: typeof Error.prepareStackTrace;
+const sourceMapCache = new Map<string, CachedSourceMap>();
+const inMemorySourceMaps = new Map<string, InMemorySourceMap>();
+const generatedFilesByOutputPath = new Map<string, Set<string>>();
+
+const getGeneratedFilePath = (fileName: string): string => {
+  if (fileName.startsWith('file://')) {
+    return fileURLToPath(fileName);
+  }
+  return fileName;
+};
+
+const getCacheKey = (filePath: string): string | null => {
+  try {
+    const generatedStats = statSync(filePath);
+    const mapPath = `${filePath}.map`;
+    const mapStats = existsSync(mapPath) ? statSync(mapPath) : undefined;
+    return [
+      generatedStats.mtimeMs,
+      generatedStats.size,
+      mapStats?.mtimeMs ?? 0,
+      mapStats?.size ?? 0,
+    ].join(':');
+  } catch {
+    return null;
+  }
+};
+
+const parseSourceMapPayload = (sourceMapJson: string): SourceMapPayload => {
+  const payload = JSON.parse(sourceMapJson) as Partial<SourceMapPayload>;
+  return {
+    file: payload.file ?? '',
+    version: payload.version ?? 3,
+    sources: payload.sources ?? [],
+    sourcesContent: payload.sourcesContent ?? [],
+    names: payload.names ?? [],
+    mappings: payload.mappings ?? '',
+    sourceRoot: payload.sourceRoot ?? '',
+  };
+};
+
+const toSourceMapPayload = (value: unknown): SourceMapPayload | null => {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const payload = value as Partial<SourceMapPayload>;
+  return {
+    file: payload.file ?? '',
+    version: payload.version ?? 3,
+    sources: payload.sources ?? [],
+    sourcesContent: payload.sourcesContent ?? [],
+    names: payload.names ?? [],
+    mappings: payload.mappings ?? '',
+    sourceRoot: payload.sourceRoot ?? '',
+  };
+};
+
+const readInlineSourceMap = (filePath: string): string | null => {
+  const source = readFileSync(filePath, 'utf8');
+  const markerIndex = source.lastIndexOf(SOURCE_MAPPING_URL_MARKER);
+  if (markerIndex === -1) {
+    return null;
+  }
+
+  const sourceMapUrlStart = markerIndex + SOURCE_MAPPING_URL_MARKER.length;
+  const nextLineIndex = source.indexOf('\n', sourceMapUrlStart);
+  const sourceMapUrl = source
+    .slice(sourceMapUrlStart, nextLineIndex === -1 ? undefined : nextLineIndex)
+    .trim();
+  if (!sourceMapUrl.startsWith('data:')) {
+    return null;
+  }
+
+  const commaIndex = sourceMapUrl.indexOf(',');
+  if (commaIndex === -1) {
+    return null;
+  }
+
+  const metadata = sourceMapUrl.slice(0, commaIndex);
+  const data = sourceMapUrl.slice(commaIndex + 1);
+  return metadata.endsWith(';base64')
+    ? Buffer.from(data, 'base64').toString('utf8')
+    : decodeURIComponent(data);
+};
+
+const readSourceMapPayload = (filePath: string): SourceMapPayload | null => {
+  const inlineSourceMap = readInlineSourceMap(filePath);
+  if (inlineSourceMap) {
+    return parseSourceMapPayload(inlineSourceMap);
+  }
+
+  const externalSourceMapPath = `${filePath}.map`;
+  if (!existsSync(externalSourceMapPath)) {
+    return null;
+  }
+
+  return parseSourceMapPayload(readFileSync(externalSourceMapPath, 'utf8'));
+};
+
+const getSourceMap = (filePath: string): SourceMap | null => {
+  const inMemory = inMemorySourceMaps.get(filePath);
+  if (inMemory) {
+    if (inMemory.sourceMap !== undefined) {
+      return inMemory.sourceMap;
+    }
+    try {
+      const payload = inMemory.load();
+      inMemory.sourceMap = payload ? new SourceMap(payload) : null;
+    } catch {
+      inMemory.sourceMap = null;
+    }
+    return inMemory.sourceMap;
+  }
+
+  const cacheKey = getCacheKey(filePath);
+  if (!cacheKey) {
+    return null;
+  }
+
+  const cached = sourceMapCache.get(filePath);
+  if (cached?.cacheKey === cacheKey) {
+    return cached.sourceMap;
+  }
+
+  let sourceMap: SourceMap | null = null;
+  try {
+    const payload = readSourceMapPayload(filePath);
+    sourceMap = payload ? new SourceMap(payload) : null;
+  } catch {
+    sourceMap = null;
+  }
+
+  sourceMapCache.set(filePath, { cacheKey, sourceMap });
+  return sourceMap;
+};
+
+export const registerDevServerSourceMaps = (
+  compilation: Pick<Rspack.Compilation, 'getAssets' | 'outputOptions'>
+): void => {
+  const outputPath = compilation.outputOptions.path;
+  if (!outputPath) {
+    return;
+  }
+  const previousFiles = generatedFilesByOutputPath.get(outputPath);
+  if (previousFiles) {
+    for (const filePath of previousFiles) {
+      inMemorySourceMaps.delete(filePath);
+    }
+  }
+
+  const assets = compilation.getAssets();
+  const assetsByName = new Map(assets.map(asset => [asset.name, asset]));
+  const generatedFiles = new Set<string>();
+
+  for (const asset of assets) {
+    if (!/\.m?js$/.test(asset.name)) {
+      continue;
+    }
+
+    const generatedFilePath = resolve(outputPath, asset.name);
+    const externalMap = assetsByName.get(`${asset.name}.map`);
+    const load = externalMap
+      ? () =>
+          parseSourceMapPayload(externalMap.source.buffer().toString('utf8'))
+      : () => toSourceMapPayload(asset.source.map());
+
+    generatedFiles.add(generatedFilePath);
+    inMemorySourceMaps.set(generatedFilePath, { load });
+  }
+
+  generatedFilesByOutputPath.set(outputPath, generatedFiles);
+};
+
+const resolveOriginalFileName = (
+  generatedFilePath: string,
+  originalFileName: string
+): string => {
+  if (
+    isAbsolute(originalFileName) ||
+    originalFileName.startsWith('node:') ||
+    originalFileName.includes('://')
+  ) {
+    return originalFileName;
+  }
+  return resolve(dirname(generatedFilePath), originalFileName);
+};
+
+export const remapDevServerStack = (stack: string): string =>
+  stack.replace(GENERATED_JS_FRAME_RE, (match, fileName, line, column) => {
+    const generatedFilePath = getGeneratedFilePath(fileName);
+    const sourceMap = getSourceMap(generatedFilePath);
+    const origin = sourceMap?.findOrigin(Number(line), Number(column));
+    if (!origin || !('fileName' in origin)) {
+      return match;
+    }
+
+    return `${resolveOriginalFileName(
+      generatedFilePath,
+      origin.fileName
+    )}:${origin.lineNumber}:${origin.columnNumber}`;
+  });
+
+const formatStackTrace = (
+  error: Error,
+  callSites: NodeJS.CallSite[]
+): string => {
+  const message = error.message
+    ? `${error.name}: ${error.message}`
+    : error.name;
+  const frames = callSites.map(callSite => `    at ${callSite.toString()}`);
+  return [message, ...frames].join('\n');
+};
+
+const prepareStackTrace: NonNullable<typeof Error.prepareStackTrace> = (
+  error,
+  callSites
+) => {
+  const formattedStack =
+    previousPrepareStackTrace && previousPrepareStackTrace !== prepareStackTrace
+      ? previousPrepareStackTrace(error, callSites)
+      : formatStackTrace(error, callSites);
+
+  return typeof formattedStack === 'string'
+    ? remapDevServerStack(formattedStack)
+    : formattedStack;
+};
+
+export const installDevServerSourceMapSupport = (): void => {
+  if (installed) {
+    return;
+  }
+
+  installed = true;
+  previousPrepareStackTrace = Error.prepareStackTrace;
+  Error.prepareStackTrace = prepareStackTrace;
+};

package/src/effect-runtime.ts

@@ -1,9 +1,80 @@
 import * as Cause from 'effect/Cause';
+import * as Context from 'effect/Context';
 import * as Duration from 'effect/Duration';
 import * as Effect from 'effect/Effect';
+import * as ExecutionStrategy from 'effect/ExecutionStrategy';
 import * as Exit from 'effect/Exit';
 import * as Fiber from 'effect/Fiber';
+import * as FiberSet from 'effect/FiberSet';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
 import * as Option from 'effect/Option';
+import * as Scope from 'effect/Scope';
+
+const PluginFibers = Context.GenericTag<FiberSet.FiberSet>(
+  'rsbuild-plugin-react-router/PluginFibers'
+);
+type PluginResources = { readonly scope: Scope.CloseableScope };
+const PluginResources: Context.Tag<PluginResources, PluginResources> =
+  Context.GenericTag<PluginResources>(
+    'rsbuild-plugin-react-router/PluginResources'
+  );
+
+type PluginRuntimeContext = Scope.Scope | FiberSet.FiberSet | PluginResources;
+
+const PluginRuntimeLive = Layer.scopedContext(
+  Effect.gen(function* () {
+    const scope = yield* Effect.scope;
+    const resources = yield* Scope.fork(scope, ExecutionStrategy.sequential);
+    const fiberScope = yield* Scope.fork(scope, ExecutionStrategy.sequential);
+    const fibers = yield* FiberSet.make().pipe(
+      Effect.provideService(Scope.Scope, fiberScope)
+    );
+    return Context.make(Scope.Scope, resources).pipe(
+      Context.add(PluginFibers, fibers),
+      Context.add(PluginResources, { scope: resources })
+    );
+  })
+);
+
+export type PluginEffectRuntime = Pick<
+  ManagedRuntime.ManagedRuntime<PluginRuntimeContext, never>,
+  'runFork' | 'runPromise'
+> & {
+  readonly dispose: () => Promise<void>;
+};
+
+export const createPluginEffectRuntime = (): PluginEffectRuntime => {
+  const runtime = ManagedRuntime.make(PluginRuntimeLive);
+  let fiberRunFork: typeof runtime.runFork | undefined;
+
+  let disposePromise: Promise<void> | undefined;
+
+  return {
+    runPromise: runtime.runPromise,
+    runFork: (effect, options) => {
+      if (disposePromise) return Effect.runFork(Effect.interrupt);
+      return (fiberRunFork ??= runtime.runSync(
+        Effect.flatMap(PluginFibers, fibers =>
+          FiberSet.runtime(fibers)<PluginRuntimeContext>()
+        )
+      ))(effect, options);
+    },
+    // Resource finalizers cancel their owned fibers before runtime disposal
+    // closes the fiber scope and interrupts any stragglers. Deferring by one
+    // microtask also lets a managed fiber request its own shutdown safely.
+    dispose: (): Promise<void> =>
+      (disposePromise ??= Promise.resolve()
+        .then(() =>
+          runtime.runPromise(
+            Effect.flatMap(PluginResources, ({ scope }) =>
+              Scope.close(scope, Exit.void)
+            )
+          )
+        )
+        .finally(() => runtime.dispose())),
+  };
+};
 
 export const DEV_BACKGROUND_STARTUP_DELAY_MS = 3_000;
 
@@ -27,14 +98,6 @@ export const runPluginEffect = async <A, E>(
   throw normalizeEffectCause(exit.cause);
 };
 
-export const tryPluginSync = <A>(
-  evaluate: () => A
-): Effect.Effect<A, Error, never> =>
-  Effect.try({
-    try: evaluate,
-    catch: normalizeEffectError,
-  });
-
 export const tryPluginPromise = <A>(
   evaluate: () => PromiseLike<A> | A
 ): Effect.Effect<A, Error, never> =>
@@ -46,45 +109,38 @@ export const tryPluginPromise = <A>(
 type DelayedPluginTask = {
   schedule(): void;
   reschedule(): void;
-  cancelEffect(): Effect.Effect<void, Error, never>;
-  cancel(): Promise<void>;
+  cancelEffect(): Effect.Effect<void>;
 };
 
 export const createDelayedPluginTask = ({
+  runtime,
   delayMs,
   run,
   onError,
 }: {
+  runtime: PluginEffectRuntime;
   delayMs: number;
-  run: () => Effect.Effect<void, Error, never>;
+  run: () => Effect.Effect<void, Error, Scope.Scope>;
   onError: (error: Error) => void;
 }): DelayedPluginTask => {
-  let activeFiber: ReturnType<typeof Effect.runFork> | undefined;
-  let version = 0;
-
-  const cancelActiveEffect = (): Effect.Effect<void, Error, never> =>
-    Effect.sync(() => {
-      const fiber = activeFiber;
-      activeFiber = undefined;
-      return fiber;
-    }).pipe(
-      Effect.flatMap(fiber =>
-        fiber ? Fiber.interrupt(fiber).pipe(Effect.asVoid) : Effect.void
-      )
-    );
-
-  const cancelEffect = (): Effect.Effect<void, Error, never> =>
-    Effect.sync(() => {
-      version += 1;
-    }).pipe(Effect.zipRight(cancelActiveEffect()));
-
-  const start = (taskVersion: number): void => {
-    if (activeFiber || version !== taskVersion) {
+  let fiber: ReturnType<PluginEffectRuntime['runFork']> | null | undefined;
+
+  const cancelEffect = (): Effect.Effect<void> =>
+    Effect.suspend(() => {
+      const activeFiber = fiber;
+      fiber = null;
+      return activeFiber
+        ? Fiber.interrupt(activeFiber).pipe(Effect.asVoid)
+        : Effect.void;
+    });
+
+  const start = (): void => {
+    if (fiber !== undefined) {
       return;
     }
 
-    let fiber: ReturnType<typeof Effect.runFork>;
-    fiber = Effect.runFork(
+    let activeFiber: ReturnType<PluginEffectRuntime['runFork']>;
+    activeFiber = runtime.runFork(
       Effect.sleep(Duration.millis(delayMs)).pipe(
         Effect.zipRight(Effect.suspend(run)),
         Effect.catchAll(error =>
@@ -94,37 +150,29 @@ export const createDelayedPluginTask = ({
         ),
         Effect.ensuring(
           Effect.sync(() => {
-            if (activeFiber === fiber) {
-              activeFiber = undefined;
+            if (fiber === activeFiber) {
+              fiber = undefined;
             }
           })
         )
       )
     );
-    activeFiber = fiber;
+    fiber = activeFiber;
   };
 
-  return {
-    schedule(): void {
-      if (activeFiber) {
-        return;
-      }
-      version += 1;
-      start(version);
-    },
-
-    reschedule(): void {
-      version += 1;
-      const taskVersion = version;
-      void runPluginEffect(cancelActiveEffect())
-        .then(() => start(taskVersion))
-        .catch(onError);
-    },
+  const reschedule = (): void => {
+    if (fiber) {
+      runtime.runFork(
+        Fiber.interrupt(fiber).pipe(Effect.ensuring(Effect.sync(start)))
+      );
+    } else {
+      start();
+    }
+  };
 
+  return {
+    schedule: start,
+    reschedule,
     cancelEffect,
-
-    async cancel(): Promise<void> {
-      await runPluginEffect(cancelEffect());
-    },
   };
 };

package/src/entry-paths.ts

@@ -0,0 +1,80 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'pathe';
+import { findEntryFile } from './plugin-utils.js';
+
+type ReactRouterEntryPathsOptions = {
+  appDirectory: string;
+  templatesDirectory: string;
+};
+
+export type ReactRouterEntryPaths = {
+  devServerBuildEntryName: string;
+  finalEntryClientPath: string;
+  finalEntryRscClientPath: string;
+  finalEntryRscPath: string;
+  finalEntryRscSsrPath: string;
+  finalEntryServerPath: string;
+  hasServerApp: boolean;
+  serverAppPath: string;
+};
+
+const resolveEntryWithTemplate = ({
+  appDirectory,
+  entryName,
+  templateName,
+  templatesDirectory,
+}: ReactRouterEntryPathsOptions & {
+  entryName: string;
+  templateName: string;
+}): string => {
+  const userEntryPath = findEntryFile(resolve(appDirectory, entryName));
+  return existsSync(userEntryPath)
+    ? userEntryPath
+    : resolve(templatesDirectory, templateName);
+};
+
+export const resolveReactRouterEntryPaths = ({
+  appDirectory,
+  templatesDirectory,
+}: ReactRouterEntryPathsOptions): ReactRouterEntryPaths => {
+  const serverAppPath = findEntryFile(resolve(appDirectory, '../server/index'));
+  const hasServerApp = existsSync(serverAppPath);
+
+  return {
+    devServerBuildEntryName: hasServerApp
+      ? 'static/js/react-router-server-build'
+      : 'static/js/app',
+    finalEntryClientPath: resolveEntryWithTemplate({
+      appDirectory,
+      entryName: 'entry.client',
+      templateName: 'entry.client.js',
+      templatesDirectory,
+    }),
+    finalEntryServerPath: resolveEntryWithTemplate({
+      appDirectory,
+      entryName: 'entry.server',
+      templateName: 'entry.server.js',
+      templatesDirectory,
+    }),
+    finalEntryRscClientPath: resolveEntryWithTemplate({
+      appDirectory,
+      entryName: 'entry.rsc.client',
+      templateName: 'entry.rsc.client.js',
+      templatesDirectory,
+    }),
+    finalEntryRscPath: resolveEntryWithTemplate({
+      appDirectory,
+      entryName: 'entry.rsc',
+      templateName: 'entry.rsc.js',
+      templatesDirectory,
+    }),
+    finalEntryRscSsrPath: resolveEntryWithTemplate({
+      appDirectory,
+      entryName: 'entry.ssr',
+      templateName: 'entry.rsc.ssr.js',
+      templatesDirectory,
+    }),
+    hasServerApp,
+    serverAppPath,
+  };
+};

package/src/environment-output.ts

@@ -0,0 +1,55 @@
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import { ensureFederationAsyncStartup } from './federation.js';
+
+export const registerReactRouterEnvironmentOutput = ({
+  api,
+  federation,
+  resolvedServerOutput,
+}: {
+  api: RsbuildPluginAPI;
+  federation: boolean | undefined;
+  resolvedServerOutput: 'commonjs' | 'module';
+}): void => {
+  api.modifyEnvironmentConfig(
+    async (config, { name, mergeEnvironmentConfig }) => {
+      if (name !== 'web' && name !== 'node') {
+        return config;
+      }
+
+      return mergeEnvironmentConfig(config, {
+        tools: {
+          rspack: rspackConfig => {
+            if (federation) {
+              ensureFederationAsyncStartup(rspackConfig);
+            }
+
+            if (name === 'node') {
+              const output = rspackConfig.output;
+              if (output) {
+                const library = output.library;
+                const libraryOptions =
+                  library &&
+                  typeof library === 'object' &&
+                  !Array.isArray(library)
+                    ? library
+                    : {};
+                rspackConfig.output = {
+                  ...output,
+                  library: {
+                    ...libraryOptions,
+                    type:
+                      resolvedServerOutput === 'module'
+                        ? 'module'
+                        : 'commonjs2',
+                  },
+                };
+              }
+            }
+
+            return rspackConfig;
+          },
+        },
+      });
+    }
+  );
+};

package/src/export-utils.ts

@@ -15,7 +15,7 @@ type ExportInfo = {
   readonly exportAllModules: readonly string[];
 };
 
-type RouteModuleAnalysis = {
+export type RouteModuleAnalysis = {
   readonly code: string;
   readonly exports: readonly string[];
   readonly exportAllModules: readonly string[];
@@ -94,10 +94,7 @@ const parseProgram = (code: string, resourcePath?: string): ProgramNode => {
   return getProgram(normalizedResult);
 };
 
-const getExportInfoCacheKey = (
-  code: string,
-  resourcePath?: string
-): string => {
+const getExportInfoCacheKey = (code: string, resourcePath?: string): string => {
   const lang = resourcePath
     ? langFromPath(stripResourcePathQuery(resourcePath))
     : 'inline';
@@ -236,6 +233,18 @@ export const getExportNamesAndExportAll = async (
   return trackedExportInfo;
 };
 
+export const analyzeRouteModuleCode = (
+  code: string,
+  resourcePath?: string
+): RouteModuleAnalysis => {
+  const program = parseProgram(code, resourcePath);
+  return {
+    code,
+    exports: collectProgramExportNames(program),
+    exportAllModules: collectExportAllModules(program),
+  };
+};
+
 export const getRouteModuleAnalysis = async (
   resourcePath: string
 ): Promise<RouteModuleAnalysis> => {
@@ -247,12 +256,7 @@ export const getRouteModuleAnalysis = async (
 
   const analysis = (async () => {
     const source = await readFile(resourcePath, 'utf8');
-    const program = parseProgram(source, resourcePath);
-    return {
-      code: source,
-      exports: collectProgramExportNames(program),
-      exportAllModules: collectExportAllModules(program),
-    };
+    return analyzeRouteModuleCode(source, resourcePath);
   })();
 
   let trackedAnalysis: Promise<RouteModuleAnalysis>;