rsbuild-plugin-react-router 0.7.2 → 0.8.0

package/src/dev-hmr.ts

@@ -1,7 +1,7 @@
-import { mkdirSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import type { Rspack } from '@rsbuild/core';
-import { dirname, join } from 'pathe';
+import { join } from 'pathe';
+import { DEV_HDR_UPDATE_EVENT } from './dev-hdr-channel.js';
 
 export const DEV_HMR_RUNTIME_MODULE_ID = 'virtual/react-router/hmr-runtime';
 export const DEV_MANIFEST_UPDATE_EVENT = 'react-router:manifest-update';
@@ -9,7 +9,6 @@ export const DEV_MANIFEST_UPDATE_EVENT = 'react-router:manifest-update';
 export type DevHmrPlanOptions = {
   isEnabled: () => boolean;
   runtimeModule: string;
-  onNodeRebuildCommitted: () => void;
 };
 
 type SwcLoaderOptions = {
@@ -80,57 +79,6 @@ export const resolveReactRefreshRuntimePath = (
   }
 };
 
-const hdrRevisionModuleContent = (revision: number): string =>
-  `export default ${revision};\n`;
-
-/**
- * The HDR revision module is a real file (not a virtual module) because it
- * must wake the web compiler through the regular file watcher: the browser
- * HMR runtime imports it, so bumping the revision produces a web hot update
- * whenever server code changes, which the client answers by revalidating
- * React Router loader data.
- */
-export const getDevHdrRevisionFilePath = (rootPath: string): string =>
-  join(rootPath, '.react-router', 'hdr-revision.mjs');
-
-export type DevHdrRevisionSignal = {
-  filePath: string;
-  /** Writes the initial revision module so the first compile can resolve it. */
-  ensure: () => void;
-  /** Increments the revision, signaling hot data revalidation to the client. */
-  bump: () => void;
-};
-
-export const createDevHdrRevisionSignal = ({
-  filePath,
-  onError,
-}: {
-  filePath: string;
-  onError?: (error: Error) => void;
-}): DevHdrRevisionSignal => {
-  let revision = 0;
-  let dirEnsured = false;
-  const write = (): void => {
-    try {
-      if (!dirEnsured) {
-        mkdirSync(dirname(filePath), { recursive: true });
-        dirEnsured = true;
-      }
-      writeFileSync(filePath, hdrRevisionModuleContent(revision));
-    } catch (error) {
-      onError?.(error instanceof Error ? error : new Error(String(error)));
-    }
-  };
-  return {
-    filePath,
-    ensure: write,
-    bump() {
-      revision += 1;
-      write();
-    },
-  };
-};
-
 /**
  * Browser-side HMR runtime shared by all route client entries in development.
  *
@@ -143,20 +91,10 @@ export const createDevHdrRevisionSignal = ({
  */
 export const generateDevHmrRuntimeModule = ({
   reactRefreshRuntimePath,
-  hdrRevisionFilePath,
 }: {
   reactRefreshRuntimePath: string;
-  hdrRevisionFilePath: string;
 }): string => `
 import * as __refreshRuntimeModule from ${JSON.stringify(reactRefreshRuntimePath)};
-// Read revision so the import survives sideEffects: false tree-shaking.
-import __hdrRevision from ${JSON.stringify(hdrRevisionFilePath)};
-
-let latestHdrRevision = __hdrRevision;
-
-export function getReactRouterHdrRevision() {
-  return latestHdrRevision;
-}
 
 const RefreshRuntime =
   __refreshRuntimeModule && __refreshRuntimeModule.performReactRefresh
@@ -166,7 +104,24 @@ const RefreshRuntime =
 const pendingRouteUpdates = new Map();
 let flushTimeout;
 let pendingRevalidation = false;
-let pendingComponentRouteRevalidation = false;
+let flushing = false;
+let hdrSession;
+let latestHdrRevision = 0;
+const retiredHdrSessions = new Set();
+
+function receiveHdrRevision(message) {
+  if (!message || typeof message.sessionId !== 'string' ||
+      !Number.isSafeInteger(message.revision) || message.revision < 1 ||
+      retiredHdrSessions.has(message.sessionId)) return;
+  if (hdrSession !== message.sessionId) {
+    if (hdrSession) retiredHdrSessions.add(hdrSession);
+    hdrSession = message.sessionId;
+    latestHdrRevision = 0;
+  }
+  if (message.revision <= latestHdrRevision) return;
+  latestHdrRevision = message.revision;
+  scheduleReactRouterRevalidation();
+}
 
 function getCurrentRouterPath(router) {
   const basename = router.basename || '/';
@@ -207,7 +162,7 @@ export function scheduleReactRouterRouteUpdate(
   scheduleFlush();
 }
 
-export function scheduleReactRouterRevalidation() {
+function scheduleReactRouterRevalidation() {
   pendingRevalidation = true;
   scheduleFlush();
 }
@@ -406,45 +361,50 @@ function applyManifestUpdate(nextRoutes) {
 }
 
 async function flush() {
+  if (flushing) return;
+  if (import.meta.webpackHot && import.meta.webpackHot.status() !== 'idle') {
+    scheduleFlush();
+    return;
+  }
   const router = window.__reactRouterDataRouter;
   const routeModules = window.__reactRouterRouteModules;
   const manifest = window.__reactRouterManifest;
   const context = window.__reactRouterContext;
   if (!router || !routeModules || !manifest || !context) {
+    scheduleFlush();
     return;
   }
-
-  let shouldRevalidate = pendingRevalidation;
-  pendingRevalidation = false;
-  const { nextManifest, hmrRoutes, shouldRefreshRouteState } =
-    applyPendingRouteUpdates(router, routeModules, manifest, context);
-  // Loader updates must be visible during revalidation. Component-only routes
-  // stay staged until revalidation completes, matching React Router's HMR flow.
-  if (nextManifest && shouldRefreshRouteState) {
-    pendingComponentRouteRevalidation = false;
-    if (hmrRoutes) {
-      patchCurrentRouteMatches(router, hmrRoutes);
-    }
-    Object.assign(manifest, nextManifest);
-    await refreshRouteState(router);
-    shouldRevalidate = false;
-  } else if (nextManifest) {
-    if (hmrRoutes) {
-      patchCurrentRouteMatches(router, hmrRoutes);
+  flushing = true;
+  try {
+    let shouldRevalidate = pendingRevalidation;
+    pendingRevalidation = false;
+    const { nextManifest, hmrRoutes, shouldRefreshRouteState } =
+      applyPendingRouteUpdates(router, routeModules, manifest, context);
+    // Loader updates must be visible during revalidation. Component-only routes
+    // stay staged until revalidation completes, matching React Router's HMR flow.
+    if (nextManifest && shouldRefreshRouteState) {
+      if (hmrRoutes) {
+        patchCurrentRouteMatches(router, hmrRoutes);
+      }
+      Object.assign(manifest, nextManifest);
+      await refreshRouteState(router);
+      shouldRevalidate = false;
+    } else if (nextManifest) {
+      if (hmrRoutes) {
+        patchCurrentRouteMatches(router, hmrRoutes);
+      }
+      Object.assign(manifest, nextManifest);
     }
-    Object.assign(manifest, nextManifest);
-    // The node compiler also emits an HDR revision for this route edit. If it
-    // did not arrive in this flush, consume that redundant revalidation later.
-    pendingComponentRouteRevalidation = !shouldRevalidate;
-    shouldRevalidate = false;
-  } else if (shouldRevalidate) {
-    if (pendingComponentRouteRevalidation) {
-      pendingComponentRouteRevalidation = false;
-    } else {
+    // A replay may represent several server edits, not just the component
+    // update in this batch. Only an actual data revalidation can consume it.
+    if (shouldRevalidate) {
       await revalidateRouter(router);
     }
+    performReactRefresh();
+  } finally {
+    flushing = false;
+    if (pendingRevalidation || pendingRouteUpdates.size > 0) scheduleFlush();
   }
-  performReactRefresh();
 }
 
 if (typeof window !== 'undefined' && import.meta.webpackHot) {
@@ -452,12 +412,9 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
     ${JSON.stringify(DEV_MANIFEST_UPDATE_EVENT)},
     applyManifestUpdate
   );
-  import.meta.webpackHot.accept(
-    ${JSON.stringify(hdrRevisionFilePath)},
-    () => {
-      latestHdrRevision = __hdrRevision;
-      scheduleReactRouterRevalidation();
-    }
+  import.meta.webpackHot.on(
+    ${JSON.stringify(DEV_HDR_UPDATE_EVENT)},
+    receiveHdrRevision
   );
 }
 `;

package/src/dev-runtime-controller.ts

@@ -20,6 +20,7 @@ import {
   unregisterReactRouterDevRuntime,
 } from './dev-generation.js';
 import { createDevHdrIntentTracker } from './dev-hdr-intent.js';
+import { createDevHdrChannel } from './dev-hdr-channel.js';
 import { DEV_MANIFEST_UPDATE_EVENT } from './dev-hmr.js';
 import {
   getEnvironmentStats,
@@ -57,18 +58,10 @@ type CreateControllerOptions = {
    * flags) in place, so metadata-only changes no longer need a full reload.
    */
   clientPatchesRouteMetadata?: boolean | (() => boolean);
-  /**
-   * 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 CSS_SOURCE_RELOAD_DELAY_MS = 1000;
 
-const isHdrRevisionFile = (file: string): boolean =>
-  file.includes('.react-router/hdr-revision.mjs');
-
 const isCssSourceFile = (file: string): boolean =>
   /\.css(?:\.[cm]?[jt]s)?$/.test(file);
 
@@ -77,7 +70,6 @@ export const createReactRouterDevRuntimeController = ({
   isBuild,
   buildPlan,
   clientPatchesRouteMetadata,
-  onNodeRebuildCommitted,
 }: CreateControllerOptions): ReactRouterDevRuntimeController => {
   if (isBuild) {
     return {
@@ -122,7 +114,18 @@ export const createReactRouterDevRuntimeController = ({
     }, CSS_SOURCE_RELOAD_DELAY_MS);
   };
 
+  const hdrChannels = new WeakMap<
+    RuntimeBinding,
+    ReturnType<typeof createDevHdrChannel>
+  >();
+  const isHmrEnabled = () =>
+    typeof clientPatchesRouteMetadata === 'function'
+      ? clientPatchesRouteMetadata()
+      : clientPatchesRouteMetadata === true;
+
   const closeBinding = (binding: RuntimeBinding, error?: Error): void => {
+    hdrChannels.get(binding)?.close();
+    hdrChannels.delete(binding);
     if (scheduledCssAssetOwnershipReload) {
       clearTimeout(scheduledCssAssetOwnershipReload);
       scheduledCssAssetOwnershipReload = undefined;
@@ -174,7 +177,7 @@ export const createReactRouterDevRuntimeController = ({
         identity.node === binding.runtime.getCommittedNodeIdentity()
       ) {
         hdrIntentsByPair.get(pair)?.signalCommitted(nodeCompilation, () => {
-          onNodeRebuildCommitted?.();
+          hdrChannels.get(binding)?.publish();
         });
       }
     } catch (cause) {
@@ -278,11 +281,7 @@ export const createReactRouterDevRuntimeController = ({
           if (sessions.getActiveBinding()?.runtime !== runtime) {
             return;
           }
-          const patchesRouteMetadata =
-            typeof clientPatchesRouteMetadata === 'function'
-              ? clientPatchesRouteMetadata()
-              : clientPatchesRouteMetadata;
-          if (patchesRouteMetadata) {
+          if (isHmrEnabled()) {
             server.sockWrite('custom', {
               event: DEV_MANIFEST_UPDATE_EVENT,
               data: manifest.routes,
@@ -294,6 +293,14 @@ export const createReactRouterDevRuntimeController = ({
         onWarning: message => api.logger.warn(message),
       });
       const binding = sessions.createBinding(server, runtime);
+      hdrChannels.set(
+        binding,
+        createDevHdrChannel({
+          hot: server.environments.web.hot,
+          isEnabled: () =>
+            sessions.getActiveBinding() === binding && isHmrEnabled(),
+        })
+      );
       registerReactRouterDevRuntime(server, runtime);
       sessions.bindCloseObservation(binding);
     },
@@ -430,9 +437,7 @@ export const createReactRouterDevRuntimeController = ({
         hdrIntents.capture(
           compilation,
           changes.known &&
-            Array.from(changes.files).some(
-              file => !isHdrRevisionFile(file) && !isCssSourceFile(file)
-            )
+            Array.from(changes.files).some(file => !isCssSourceFile(file))
         );
         pair.latestNodeStart = {
           status: 'started',

package/src/dev-server.ts

@@ -1,7 +1,9 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
+import { pathToFileURL } from 'node:url';
 import type { RsbuildConfig } from '@rsbuild/core';
 import type { ServerBuild } from 'react-router';
 import { installDevServerSourceMapSupport } from './dev-source-maps.js';
+import { resolveAppPackagePath } from './plugin-utils.js';
 
 export type ServerSetup = Exclude<
   NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
@@ -18,6 +20,7 @@ type RequestHandler = (request: Request) => Response | Promise<Response>;
 type BuildProvider = () => Promise<ServerBuild>;
 
 export type DevServerMiddlewareDependencies = {
+  rootPath: string;
   loadBuild: BuildProvider;
   createRequestHandler?: (
     build: BuildProvider,
@@ -39,9 +42,22 @@ export const createDevServerMiddleware = (
 
   const getListener = () => {
     listenerPromise ??= (async () => {
-      const createRequestHandler =
-        dependencies.createRequestHandler ??
-        (await import('react-router')).createRequestHandler;
+      let createRequestHandler = dependencies.createRequestHandler;
+      if (!createRequestHandler) {
+        const reactRouterPath = resolveAppPackagePath(
+          'react-router',
+          dependencies.rootPath
+        );
+        if (!reactRouterPath) {
+          throw new Error('Cannot resolve react-router from the application.');
+        }
+        // Match the application's browser/server bundles, including when the
+        // plugin is linked from a workspace with a different Router version.
+        const routerModule: typeof import('react-router') = await import(
+          pathToFileURL(reactRouterPath).href
+        );
+        createRequestHandler = routerModule.createRequestHandler;
+      }
       const createRequestListener =
         dependencies.createRequestListener ??
         (await import('@remix-run/node-fetch-server')).createRequestListener;
@@ -73,8 +89,10 @@ export const createDevServerMiddleware = (
 
 export const createReactRouterDevServerSetup = ({
   loadBuild,
+  rootPath,
 }: {
   loadBuild: BuildProvider;
+  rootPath: string;
 }): ServerSetup =>
   function reactRouterDevServerSetup(context) {
     if (context.action !== 'dev') {
@@ -85,6 +103,8 @@ export const createReactRouterDevServerSetup = ({
     // request handler.
     return () => {
       installDevServerSourceMapSupport();
-      context.server.middlewares.use(createDevServerMiddleware({ loadBuild }));
+      context.server.middlewares.use(
+        createDevServerMiddleware({ loadBuild, rootPath })
+      );
     };
   };