rsbuild-plugin-react-router 0.3.0 → 0.3.1

package/src/dev-runtime-compilation.ts

@@ -1,6 +1,8 @@
 import type { Rspack } from '@rsbuild/core';
 import type {
+  DevCompileAttemptIdentity,
   DevCompilationIdentity,
+  DevRuntimeStats,
   DevGraphChanges,
   DevGraphIdentity,
 } from './dev-runtime-artifacts.js';
@@ -10,13 +12,16 @@ export type DevCompilerPair = {
   node: Rspack.Compiler;
   settledCompilations: WeakSet<Rspack.Compilation>;
   pendingAttempt?: PendingDevCompilation;
+  currentAttemptIdentity?: DevCompileAttemptIdentity;
   latestCompletedWebIdentity?: DevCompilationIdentity;
+  latestCompletedWebStats?: Rspack.Stats;
+  latestCompletedNodeStats?: Rspack.Stats;
   latestWebStart?: CompilationStart;
   latestNodeStart?: CompilationStart;
 };
 
 export type PendingDevCompilation = {
-  stats: Rspack.Stats | Rspack.MultiStats;
+  stats: DevRuntimeStats;
   changes: DevGraphChanges;
   identity: DevGraphIdentity;
   webCompilation: Rspack.Compilation;
@@ -27,6 +32,30 @@ export type CompilationStart =
   | { status: 'pending' }
   | { status: 'started'; identity: DevCompilationIdentity };
 
+type CompilerPairStartSide = 'latestWebStart' | 'latestNodeStart';
+
+export const createDevCompilerPair = ({
+  web,
+  node,
+}: {
+  web: Rspack.Compiler;
+  node: Rspack.Compiler;
+}): DevCompilerPair => ({
+  web,
+  node,
+  settledCompilations: new WeakSet(),
+});
+
+export const resetDevCompilerPair = (pair: DevCompilerPair): void => {
+  pair.pendingAttempt = undefined;
+  pair.currentAttemptIdentity = undefined;
+  pair.latestCompletedWebIdentity = undefined;
+  pair.latestCompletedWebStats = undefined;
+  pair.latestCompletedNodeStats = undefined;
+  pair.latestWebStart = undefined;
+  pair.latestNodeStart = undefined;
+};
+
 export const isLatestStartedCompilation = (
   identity: DevCompilationIdentity | undefined,
   start: CompilationStart | undefined
@@ -37,6 +66,32 @@ export const hasPendingCompilation = (pair: DevCompilerPair): boolean =>
   pair.latestWebStart?.status === 'pending' ||
   pair.latestNodeStart?.status === 'pending';
 
+export const beginDevCompilerAttempt = (pair: DevCompilerPair): void => {
+  pair.pendingAttempt = undefined;
+  pair.currentAttemptIdentity = Symbol();
+};
+
+export const markDevCompilerPending = (
+  pair: DevCompilerPair,
+  side: CompilerPairStartSide
+): boolean => {
+  const attemptAlreadyPending = hasPendingCompilation(pair);
+  pair[side] = { status: 'pending' };
+  pair.pendingAttempt = undefined;
+  if (!attemptAlreadyPending) {
+    pair.currentAttemptIdentity = Symbol();
+  }
+  return !attemptAlreadyPending;
+};
+
+export const clearDevCompilerStart = (
+  pair: DevCompilerPair,
+  side: CompilerPairStartSide
+): void => {
+  pair[side] = undefined;
+  pair.pendingAttempt = undefined;
+};
+
 export type CompilationIdentityTracker = {
   getCompilationIdentity(
     compilation: Rspack.Compilation
@@ -44,6 +99,13 @@ export type CompilationIdentityTracker = {
   getWebIdentityForNodeCompilation(
     compilation: Rspack.Compilation
   ): DevCompilationIdentity | undefined;
+  getAttemptIdentityForCompilation(
+    compilation: Rspack.Compilation
+  ): DevCompileAttemptIdentity | undefined;
+  setAttemptIdentityForCompilation(
+    compilation: Rspack.Compilation,
+    identity: DevCompileAttemptIdentity
+  ): void;
   setWebIdentityForNodeCompilation(
     compilation: Rspack.Compilation,
     identity: DevCompilationIdentity
@@ -60,6 +122,10 @@ export const createCompilationIdentityTracker =
       Rspack.Compilation,
       DevCompilationIdentity
     >();
+    const attemptIdentityByCompilation = new WeakMap<
+      Rspack.Compilation,
+      DevCompileAttemptIdentity
+    >();
 
     return {
       getCompilationIdentity(
@@ -82,6 +148,19 @@ export const createCompilationIdentityTracker =
         return webIdentityByNodeCompilation.get(compilation);
       },
 
+      getAttemptIdentityForCompilation(
+        compilation: Rspack.Compilation
+      ): DevCompileAttemptIdentity | undefined {
+        return attemptIdentityByCompilation.get(compilation);
+      },
+
+      setAttemptIdentityForCompilation(
+        compilation: Rspack.Compilation,
+        identity: DevCompileAttemptIdentity
+      ): void {
+        attemptIdentityByCompilation.set(compilation, identity);
+      },
+
       setWebIdentityForNodeCompilation(
         compilation: Rspack.Compilation,
         identity: DevCompilationIdentity

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,6 +22,8 @@ import {
 import {
   getEnvironmentStats,
   snapshotDevChangedFiles,
+  type DevGraphIdentity,
+  type DevRuntimeStats,
   type ReactRouterDevBuildPlan,
   type ReactRouterDevManifestSet,
 } from './dev-runtime-artifacts.js';
@@ -23,6 +31,12 @@ 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']>,
@@ -107,10 +121,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 +132,46 @@ export const createReactRouterDevRuntimeController = ({
   const compilationIdentities = createCompilationIdentityTracker();
   const { getCompilationIdentity } = compilationIdentities;
 
+  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 (
+            result === 'retry-node' &&
+            sessions.getActiveBinding()?.id === binding.id
+          ) {
+            pair.node.watching?.invalidate();
+          }
+        })
+      ),
+      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 +192,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 +296,7 @@ export const createReactRouterDevRuntimeController = ({
       if (!binding || !pair || hasPendingCompilation(pair)) {
         return;
       }
-      pair.pendingAttempt = undefined;
+      beginDevCompilerAttempt(pair);
       binding.runtime.beginAttempt();
     },
   });
@@ -267,22 +316,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 +337,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 +363,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 +405,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 +448,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 +474,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 +492,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());
+    },
+  };
+};