rsbuild-plugin-react-router 0.3.0 → 0.4.0

package/src/dev-runtime-controller.ts

@@ -1,10 +1,16 @@
 import type { RsbuildConfig, RsbuildPluginAPI, Rspack } from '@rsbuild/core';
+import * as Effect from 'effect/Effect';
 import type { ServerBuild } from 'react-router';
 import { PLUGIN_NAME } from './constants.js';
 import {
+  beginDevCompilerAttempt,
+  clearDevCompilerStart,
   createCompilationIdentityTracker,
+  createDevCompilerPair,
   hasPendingCompilation,
   isLatestStartedCompilation,
+  markDevCompilerPending,
+  resetDevCompilerPair,
   type DevCompilerPair,
 } from './dev-runtime-compilation.js';
 import {
@@ -16,13 +22,22 @@ import {
 import {
   getEnvironmentStats,
   snapshotDevChangedFiles,
+  type DevGraphIdentity,
+  type DevRuntimeStats,
   type ReactRouterDevBuildPlan,
   type ReactRouterDevManifestSet,
 } from './dev-runtime-artifacts.js';
+import { DEV_HDR_REVISION_RELATIVE_PATH } from './dev-hmr.js';
 import {
   createDevRuntimeSessionManager,
   type RuntimeBinding,
 } from './dev-runtime-session.js';
+import {
+  normalizeEffectError,
+  runPluginEffect,
+  tryPluginPromise,
+  tryPluginSync,
+} from './effect-runtime.js';
 
 type ServerSetup = Exclude<
   NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
@@ -41,6 +56,11 @@ type CreateControllerOptions = {
   api: RsbuildPluginAPI;
   isBuild: boolean;
   buildPlan: ReactRouterDevBuildPlan;
+  /**
+   * Invoked after a development attempt commits a re-evaluated node build for
+   * changed server files. Used to signal hot data revalidation to the client.
+   */
+  onNodeRebuildCommitted?: () => void;
 };
 
 const escapeHtml = (value: string): string =>
@@ -51,10 +71,29 @@ const escapeHtml = (value: string): string =>
 
 const CSS_SOURCE_RELOAD_DELAY_MS = 1000;
 
+const isHdrRevisionFile = (file: string): boolean =>
+  file.includes(DEV_HDR_REVISION_RELATIVE_PATH);
+
+const isCssSourceFile = (file: string): boolean =>
+  /\.css(?:\.[cm]?[jt]s)?$/.test(file);
+
+// A change that should bump the HDR revision: anything except the revision
+// file itself (the bump's own echo) and CSS sources (styling never changes
+// loader data).
+const hasHdrTriggeringChange = (files: Iterable<string>): boolean => {
+  for (const file of files) {
+    if (!isHdrRevisionFile(file) && !isCssSourceFile(file)) {
+      return true;
+    }
+  }
+  return false;
+};
+
 export const createReactRouterDevRuntimeController = ({
   api,
   isBuild,
   buildPlan,
+  onNodeRebuildCommitted,
 }: CreateControllerOptions): ReactRouterDevRuntimeController => {
   if (isBuild) {
     return {
@@ -107,10 +146,7 @@ export const createReactRouterDevRuntimeController = ({
     reloadAfterCssAssetOwnershipRemoval = false;
     const pair = binding.compilers;
     if (pair) {
-      pair.pendingAttempt = undefined;
-      pair.latestCompletedWebIdentity = undefined;
-      pair.latestWebStart = undefined;
-      pair.latestNodeStart = undefined;
+      resetDevCompilerPair(pair);
     }
     binding.compilers = undefined;
     binding.runtime.close(error);
@@ -121,6 +157,65 @@ export const createReactRouterDevRuntimeController = ({
   const compilationIdentities = createCompilationIdentityTracker();
   const { getCompilationIdentity } = compilationIdentities;
 
+  // Web-only commits reuse the node compiler's stale `modifiedFiles`
+  // snapshot, and every HDR bump itself triggers a web rebuild — so signal
+  // once per node compilation identity or the bump loop self-sustains.
+  const hdrSignaledNodeIdentity = new WeakMap<
+    DevCompilerPair,
+    NonNullable<DevGraphIdentity['node']>
+  >();
+
+  const finishRuntimeAttemptEffect = (
+    binding: RuntimeBinding,
+    pair: DevCompilerPair,
+    stats: DevRuntimeStats,
+    changes: Parameters<RuntimeBinding['runtime']['finishAttempt']>[1],
+    identity: Parameters<RuntimeBinding['runtime']['finishAttempt']>[2]
+  ): Effect.Effect<void, Error, never> =>
+    tryPluginPromise(() =>
+      binding.runtime.finishAttempt(stats, changes, identity)
+    ).pipe(
+      Effect.flatMap(result =>
+        tryPluginSync(() => {
+          if (sessions.getActiveBinding()?.id !== binding.id) {
+            return;
+          }
+          if (result === 'retry-node') {
+            pair.node.watching?.invalidate();
+            return;
+          }
+          if (
+            result === 'committed' &&
+            changes.node.known &&
+            identity.node !== undefined &&
+            hdrSignaledNodeIdentity.get(pair) !== identity.node &&
+            hasHdrTriggeringChange(changes.node.files)
+          ) {
+            hdrSignaledNodeIdentity.set(pair, identity.node);
+            onNodeRebuildCommitted?.();
+          }
+        })
+      ),
+      Effect.catchAll(cause =>
+        tryPluginSync(() => {
+          if (sessions.getActiveBinding()?.id === binding.id) {
+            binding.runtime.failAttempt(normalizeEffectError(cause));
+          }
+        })
+      )
+    );
+
+  const finishRuntimeAttempt = (
+    binding: RuntimeBinding,
+    pair: DevCompilerPair,
+    stats: DevRuntimeStats,
+    changes: Parameters<RuntimeBinding['runtime']['finishAttempt']>[1],
+    identity: Parameters<RuntimeBinding['runtime']['finishAttempt']>[2]
+  ): Promise<void> =>
+    runPluginEffect(
+      finishRuntimeAttemptEffect(binding, pair, stats, changes, identity)
+    );
+
   const flushSettledAttempt = (
     binding: RuntimeBinding,
     pair: DevCompilerPair
@@ -141,15 +236,13 @@ export const createReactRouterDevRuntimeController = ({
     ) {
       return;
     }
-    void binding.runtime
-      .finishAttempt(pending.stats, pending.changes, pending.identity)
-      .catch(cause => {
-        if (sessions.getActiveBinding()?.id === binding.id) {
-          binding.runtime.failAttempt(
-            cause instanceof Error ? cause : new Error(String(cause))
-          );
-        }
-      });
+    void finishRuntimeAttempt(
+      binding,
+      pair,
+      pending.stats,
+      pending.changes,
+      pending.identity
+    );
   };
 
   const rejectUnsupportedCompiler = (reason: string): void => {
@@ -247,7 +340,7 @@ export const createReactRouterDevRuntimeController = ({
       if (!binding || !pair || hasPendingCompilation(pair)) {
         return;
       }
-      pair.pendingAttempt = undefined;
+      beginDevCompilerAttempt(pair);
       binding.runtime.beginAttempt();
     },
   });
@@ -267,22 +360,17 @@ export const createReactRouterDevRuntimeController = ({
     if (!binding) {
       return;
     }
-    const pair: DevCompilerPair = {
-      web,
-      node,
-      settledCompilations: new WeakSet(),
-    };
+    const pair: DevCompilerPair = createDevCompilerPair({ web, node });
     binding.compilers = pair;
     const sessionId = binding.id;
     const runtime = binding.runtime;
     const failCurrentAttempt = (side: 'web' | 'node', error: Error): void => {
       if (sessions.getActiveBinding()?.id === sessionId) {
         if (side === 'web') {
-          pair.latestWebStart = undefined;
+          clearDevCompilerStart(pair, 'latestWebStart');
         } else {
-          pair.latestNodeStart = undefined;
+          clearDevCompilerStart(pair, 'latestNodeStart');
         }
-        pair.pendingAttempt = undefined;
         runtime.failAttempt(error);
       }
     };
@@ -293,12 +381,9 @@ export const createReactRouterDevRuntimeController = ({
         sessions.getActiveBinding()?.id === sessionId &&
         pair[side]?.status !== 'pending'
       ) {
-        const attemptAlreadyPending = hasPendingCompilation(pair);
         // Invalidation can arrive before the aggregate before-compile hook.
         // Supersede any evaluation that could resolve in that gap immediately.
-        pair[side] = { status: 'pending' };
-        pair.pendingAttempt = undefined;
-        if (!attemptAlreadyPending) {
+        if (markDevCompilerPending(pair, side)) {
           runtime.beginAttempt();
         }
         if (side === 'latestWebStart' && reloadAfterCssAssetOwnershipRemoval) {
@@ -322,12 +407,27 @@ export const createReactRouterDevRuntimeController = ({
         pair.latestCompletedWebIdentity = getCompilationIdentity(
           stats.compilation
         );
+        pair.latestCompletedWebStats = stats;
+      }
+    );
+    node.hooks.done.tap(
+      { name: `${PLUGIN_NAME}:dev-node-complete`, stage: -1000 },
+      stats => {
+        if (sessions.getActiveBinding()?.id === sessionId) {
+          pair.latestCompletedNodeStats = stats;
+        }
       }
     );
     web.hooks.thisCompilation.tap(
       `${PLUGIN_NAME}:dev-web-compilation`,
       compilation => {
         if (sessions.getActiveBinding()?.id === sessionId) {
+          if (pair.currentAttemptIdentity) {
+            compilationIdentities.setAttemptIdentityForCompilation(
+              compilation,
+              pair.currentAttemptIdentity
+            );
+          }
           pair.latestWebStart = {
             status: 'started',
             identity: getCompilationIdentity(compilation),
@@ -349,6 +449,12 @@ export const createReactRouterDevRuntimeController = ({
           status: 'started',
           identity: getCompilationIdentity(compilation),
         };
+        if (pair.currentAttemptIdentity) {
+          compilationIdentities.setAttemptIdentityForCompilation(
+            compilation,
+            pair.currentAttemptIdentity
+          );
+        }
         if (pair.latestCompletedWebIdentity) {
           compilationIdentities.setWebIdentityForNodeCompilation(
             compilation,
@@ -386,8 +492,10 @@ export const createReactRouterDevRuntimeController = ({
     if (!binding || !pair) {
       return;
     }
-    const webStats = getEnvironmentStats(stats, 'web');
-    const nodeStats = getEnvironmentStats(stats, 'node');
+    const webStats =
+      getEnvironmentStats(stats, 'web') ?? pair.latestCompletedWebStats;
+    const nodeStats =
+      getEnvironmentStats(stats, 'node') ?? pair.latestCompletedNodeStats;
     if (
       (webStats && webStats.compilation.compiler !== pair.web) ||
       (nodeStats && nodeStats.compilation.compiler !== pair.node)
@@ -410,7 +518,17 @@ export const createReactRouterDevRuntimeController = ({
       web: snapshotDevChangedFiles(pair.web),
       node: snapshotDevChangedFiles(pair.node),
     };
-    const identity = {
+    const webAttempt = webStats
+      ? compilationIdentities.getAttemptIdentityForCompilation(
+          webStats.compilation
+        )
+      : undefined;
+    const nodeAttempt = nodeStats
+      ? compilationIdentities.getAttemptIdentityForCompilation(
+          nodeStats.compilation
+        )
+      : undefined;
+    const identity: DevGraphIdentity = {
       web: webIdentity,
       node: nodeIdentity,
       nodeWeb: nodeStats
@@ -418,13 +536,19 @@ export const createReactRouterDevRuntimeController = ({
             nodeStats.compilation
           )
         : undefined,
+      attempt:
+        webAttempt && nodeAttempt && webAttempt === nodeAttempt
+          ? webAttempt
+          : undefined,
     };
+    const finishStats: DevRuntimeStats =
+      webStats && nodeStats ? { web: webStats, node: nodeStats } : stats;
     if (!webStats || !nodeStats) {
-      await binding.runtime.finishAttempt(stats, changes, identity);
+      await finishRuntimeAttempt(binding, pair, finishStats, changes, identity);
       return;
     }
     pair.pendingAttempt = {
-      stats,
+      stats: finishStats,
       changes,
       identity,
       webCompilation: webStats.compilation,

package/src/dev-runtime-session.ts

@@ -1,7 +1,13 @@
 import type { RsbuildDevServer } from '@rsbuild/core';
+import * as Effect from 'effect/Effect';
 import { PLUGIN_NAME } from './constants.js';
 import type { ReactRouterDevRuntime } from './dev-generation.js';
 import type { DevCompilerPair } from './dev-runtime-compilation.js';
+import {
+  runPluginEffect,
+  tryPluginPromise,
+  tryPluginSync,
+} from './effect-runtime.js';
 
 export type RuntimeBinding = {
   id: number;
@@ -109,18 +115,19 @@ export const createDevRuntimeSessionManager = (
       if (observation.promise) {
         return observation.promise;
       }
-      let closePromise: Promise<void>;
-      try {
-        closePromise = close();
-      } catch (cause) {
-        closePromise = Promise.reject(cause);
-      }
-      observation.promise = closePromise;
-      void closePromise.then(
-        () => applyCloseOutcome(observation, { ok: true }),
-        cause => applyCloseOutcome(observation, { ok: false, cause })
+      observation.promise = runPluginEffect(
+        tryPluginPromise(close).pipe(
+          Effect.tap(() =>
+            tryPluginSync(() => applyCloseOutcome(observation, { ok: true }))
+          ),
+          Effect.catchAll(cause =>
+            tryPluginSync(() =>
+              applyCloseOutcome(observation, { ok: false, cause })
+            ).pipe(Effect.zipRight(Effect.fail(cause)))
+          )
+        )
       );
-      return closePromise;
+      return observation.promise;
     };
     closeObservationByServer.set(server, observation);
     return observation;

package/src/dev-server.ts

@@ -1,6 +1,12 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { RsbuildConfig } from '@rsbuild/core';
 import type { ServerBuild } from 'react-router';
 
+export type ServerSetup = Exclude<
+  NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
+  unknown[]
+>;
+
 export type DevServerMiddleware = (
   req: IncomingMessage,
   res: ServerResponse,
@@ -42,11 +48,18 @@ export const createDevServerMiddleware = (
         dependencies.loadBuild,
         'development'
       );
-      return createRequestListener(requestHandler);
+      return createRequestListener(request => requestHandler(request));
     })();
     return listenerPromise;
   };
 
+  // Warm the handler imports now so the first request does not pay them.
+  // On failure, reset so the first real request retries and surfaces the
+  // error through the middleware's own error path.
+  void getListener().catch(() => {
+    listenerPromise = undefined;
+  });
+
   return async (req, res, next): Promise<void> => {
     try {
       const listener = await getListener();
@@ -56,3 +69,20 @@ export const createDevServerMiddleware = (
     }
   };
 };
+
+export const createReactRouterDevServerSetup = ({
+  loadBuild,
+}: {
+  loadBuild: BuildProvider;
+}): ServerSetup =>
+  function reactRouterDevServerSetup(context) {
+    if (context.action !== 'dev') {
+      return;
+    }
+    // The returned callback runs after Rsbuild registers its built-in
+    // middlewares, so static assets are served before the React Router
+    // request handler.
+    return () => {
+      context.server.middlewares.use(createDevServerMiddleware({ loadBuild }));
+    };
+  };

package/src/effect-runtime.ts

@@ -0,0 +1,130 @@
+import * as Cause from 'effect/Cause';
+import * as Duration from 'effect/Duration';
+import * as Effect from 'effect/Effect';
+import * as Exit from 'effect/Exit';
+import * as Fiber from 'effect/Fiber';
+import * as Option from 'effect/Option';
+
+export const DEV_BACKGROUND_STARTUP_DELAY_MS = 3_000;
+
+export const normalizeEffectError = (cause: unknown): Error =>
+  cause instanceof Error ? cause : new Error(String(cause));
+
+const normalizeEffectCause = <E>(cause: Cause.Cause<E>): Error => {
+  const failure = Cause.failureOption(cause);
+  return normalizeEffectError(
+    Option.isSome(failure) ? failure.value : Cause.squash(cause)
+  );
+};
+
+export const runPluginEffect = async <A, E>(
+  effect: Effect.Effect<A, E, never>
+): Promise<A> => {
+  const exit = await Effect.runPromiseExit(effect);
+  if (Exit.isSuccess(exit)) {
+    return exit.value;
+  }
+  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> =>
+  Effect.tryPromise({
+    try: () => Promise.resolve(evaluate()),
+    catch: normalizeEffectError,
+  });
+
+type DelayedPluginTask = {
+  schedule(): void;
+  reschedule(): void;
+  cancelEffect(): Effect.Effect<void, Error, never>;
+  cancel(): Promise<void>;
+};
+
+export const createDelayedPluginTask = ({
+  delayMs,
+  run,
+  onError,
+}: {
+  delayMs: number;
+  run: () => Effect.Effect<void, Error, never>;
+  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) {
+      return;
+    }
+
+    let fiber: ReturnType<typeof Effect.runFork>;
+    fiber = Effect.runFork(
+      Effect.sleep(Duration.millis(delayMs)).pipe(
+        Effect.zipRight(Effect.suspend(run)),
+        Effect.catchAll(error =>
+          Effect.sync(() => {
+            onError(error);
+          })
+        ),
+        Effect.ensuring(
+          Effect.sync(() => {
+            if (activeFiber === fiber) {
+              activeFiber = undefined;
+            }
+          })
+        )
+      )
+    );
+    activeFiber = fiber;
+  };
+
+  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);
+    },
+
+    cancelEffect,
+
+    async cancel(): Promise<void> {
+      await runPluginEffect(cancelEffect());
+    },
+  };
+};

package/src/export-utils.ts

@@ -1,5 +1,6 @@
 import { readFile, stat } from 'node:fs/promises';
-import { langFromPath, parse } from 'yuku-parser';
+import { rspack } from '@rsbuild/core';
+import { langFromPath, parse, type ParseOptions } from 'yuku-parser';
 import { setBoundedCacheEntry } from './bounded-cache.js';
 import {
   getExportedName,
@@ -34,6 +35,75 @@ const routeModuleAnalysisCache = new Map<
 
 const MAX_EXPORT_UTILS_CACHE_ENTRIES = 2048;
 
+const stripResourcePathQuery = (resourcePath: string): string =>
+  resourcePath.replace(/[?#].*$/, '');
+
+type TypeScriptParseLang = Extract<
+  NonNullable<ParseOptions['lang']>,
+  'ts' | 'tsx'
+>;
+
+const getExportAnalysisCode = (
+  code: string,
+  resourcePath: string,
+  lang: TypeScriptParseLang
+): string =>
+  rspack.experiments.swc.transformSync(code, {
+    filename: resourcePath,
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: lang === 'tsx',
+      },
+    },
+  }).code;
+
+const getParseErrors = (result: ReturnType<typeof parse>) =>
+  result.diagnostics.filter(diagnostic => diagnostic.severity === 'error');
+
+const getParseErrorMessage = (
+  errors: ReturnType<typeof getParseErrors>
+): string => errors.map(error => error.message).join('\n');
+
+const parseProgram = (code: string, resourcePath?: string): ProgramNode => {
+  const sourcePath = resourcePath
+    ? stripResourcePathQuery(resourcePath)
+    : undefined;
+  const lang = sourcePath ? langFromPath(sourcePath) : 'tsx';
+  const result = parse(code, {
+    sourceType: 'module',
+    lang,
+  });
+  const errors = getParseErrors(result);
+  if (errors.length === 0) {
+    return getProgram(result);
+  }
+  if (!sourcePath || (lang !== 'ts' && lang !== 'tsx')) {
+    throw new Error(getParseErrorMessage(errors));
+  }
+
+  const normalizedCode = getExportAnalysisCode(code, sourcePath, lang);
+  const normalizedResult = parse(normalizedCode, {
+    sourceType: 'module',
+    lang: 'js',
+  });
+  const normalizedErrors = getParseErrors(normalizedResult);
+  if (normalizedErrors.length > 0) {
+    throw new Error(getParseErrorMessage(normalizedErrors));
+  }
+  return getProgram(normalizedResult);
+};
+
+const getExportInfoCacheKey = (
+  code: string,
+  resourcePath?: string
+): string => {
+  const lang = resourcePath
+    ? langFromPath(stripResourcePathQuery(resourcePath))
+    : 'inline';
+  return `${lang}\0${code}`;
+};
+
 const cachePromiseOnReject = <T>(
   promise: Promise<T>,
   invalidate: () => void
@@ -43,20 +113,6 @@ const cachePromiseOnReject = <T>(
     throw error;
   });
 
-const parseProgram = (code: string, resourcePath?: string): ProgramNode => {
-  const result = parse(code, {
-    sourceType: 'module',
-    lang: resourcePath ? langFromPath(resourcePath) : 'tsx',
-  });
-  const errors = result.diagnostics.filter(
-    diagnostic => diagnostic.severity === 'error'
-  );
-  if (errors.length > 0) {
-    throw new Error(errors.map(error => error.message).join('\n'));
-  }
-  return getProgram(result);
-};
-
 const isTypeOnlyExport = (node: AnyNode): boolean =>
   node.exportKind === 'type' ||
   node.type === 'TSExportAssignment' ||
@@ -140,21 +196,24 @@ const collectExportAllModules = (program: AnyNode): string[] => {
 };
 
 export const getExportNames = async (
-  code: string
+  code: string,
+  resourcePath?: string
 ): Promise<readonly string[]> => {
-  return (await getExportNamesAndExportAll(code)).exportNames;
+  return (await getExportNamesAndExportAll(code, resourcePath)).exportNames;
 };
 
 export const getExportNamesAndExportAll = async (
-  code: string
+  code: string,
+  resourcePath?: string
 ): Promise<ExportInfo> => {
-  const cached = exportInfoCache.get(code);
+  const cacheKey = getExportInfoCacheKey(code, resourcePath);
+  const cached = exportInfoCache.get(cacheKey);
   if (cached) {
     return cached;
   }
 
   const exportInfo = (async () => {
-    const program = parseProgram(code);
+    const program = parseProgram(code, resourcePath);
     return {
       exportNames: collectProgramExportNames(program),
       exportAllModules: collectExportAllModules(program),
@@ -163,14 +222,14 @@ export const getExportNamesAndExportAll = async (
 
   let trackedExportInfo: Promise<ExportInfo>;
   trackedExportInfo = cachePromiseOnReject(exportInfo, () => {
-    if (exportInfoCache.get(code) === trackedExportInfo) {
-      exportInfoCache.delete(code);
+    if (exportInfoCache.get(cacheKey) === trackedExportInfo) {
+      exportInfoCache.delete(cacheKey);
     }
   });
 
   setBoundedCacheEntry(
     exportInfoCache,
-    code,
+    cacheKey,
     trackedExportInfo,
     MAX_EXPORT_UTILS_CACHE_ENTRIES
   );