Improve config change handling

Author: markdalgleish

.changeset/stupid-kiwis-laugh.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Update config when `react-router.config.ts` is created or deleted during development.

packages/react-router-dev/config/config.ts

@@ -3,7 +3,7 @@ import { execSync } from "node:child_process";
 import PackageJson from "@npmcli/package-json";
 import * as ViteNode from "../vite/vite-node";
 import type * as Vite from "vite";
-import path from "pathe";
+import Path from "pathe";
 import chokidar, {
   type FSWatcher,
   type EmitArgs as ChokidarEmitArgs,
@@ -17,12 +17,13 @@ import isEqual from "lodash/isEqual";
 import {
   type RouteManifest,
   type RouteManifestEntry,
-  type RouteConfig,
   setAppDirectory,
   validateRouteConfig,
   configRoutesToRouteManifest,
 } from "./routes";
 import { detectPackageManager } from "../cli/detectPackageManager";
+import { importViteEsmSync } from "../vite/import-vite-esm-sync";
+import { preloadViteEsm } from "../vite/import-vite-esm-sync";
 
 const excludedConfigPresetKeys = ["presets"] as const satisfies ReadonlyArray<
   keyof ReactRouterConfig
@@ -405,14 +406,14 @@ async function resolveConfig({
     );
   }
 
-  let appDirectory = path.resolve(root, userAppDirectory || "app");
-  let buildDirectory = path.resolve(root, userBuildDirectory);
+  let appDirectory = Path.resolve(root, userAppDirectory || "app");
+  let buildDirectory = Path.resolve(root, userBuildDirectory);
 
   let rootRouteFile = findEntry(appDirectory, "root");
   if (!rootRouteFile) {
-    let rootRouteDisplayPath = path.relative(
+    let rootRouteDisplayPath = Path.relative(
       root,
-      path.join(appDirectory, "root.tsx")
+      Path.join(appDirectory, "root.tsx")
     );
     return err(
       `Could not find a root route module in the app directory as "${rootRouteDisplayPath}"`
@@ -427,17 +428,17 @@ async function resolveConfig({
 
   try {
     if (!routeConfigFile) {
-      let routeConfigDisplayPath = path.relative(
+      let routeConfigDisplayPath = Path.relative(
         root,
-        path.join(appDirectory, "routes.ts")
+        Path.join(appDirectory, "routes.ts")
       );
       return err(`Route config file not found at "${routeConfigDisplayPath}".`);
     }
 
     setAppDirectory(appDirectory);
     let routeConfigExport = (
       await viteNodeContext.runner.executeFile(
-        path.join(appDirectory, routeConfigFile)
+        Path.join(appDirectory, routeConfigFile)
       )
     ).default;
     let routeConfig = await routeConfigExport;
@@ -462,7 +463,7 @@ async function resolveConfig({
         "",
         error.loc?.file && error.loc?.column && error.frame
           ? [
-              path.relative(appDirectory, error.loc.file) +
+              Path.relative(appDirectory, error.loc.file) +
                 ":" +
                 error.loc.line +
                 ":" +
@@ -506,7 +507,8 @@ type ChokidarEventName = ChokidarEmitArgs[0];
 
 type ChangeHandler = (args: {
   result: Result<ResolvedReactRouterConfig>;
-  configCodeUpdated: boolean;
+  configCodeChanged: boolean;
+  routeConfigCodeChanged: boolean;
   configChanged: boolean;
   routeConfigChanged: boolean;
   path: string;
@@ -526,20 +528,25 @@ export async function createConfigLoader({
   watch: boolean;
   rootDirectory?: string;
 }): Promise<ConfigLoader> {
-  root = root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
+  root = Path.normalize(root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd());
 
   let viteNodeContext = await ViteNode.createContext({
     root,
     mode: watch ? "development" : "production",
     server: !watch ? { watch: null } : {},
-    ssr: {
-      external: ssrExternals,
-    },
+    ssr: { external: ssrExternals },
+    customLogger: await createCustomLogger(),
   });
 
-  let reactRouterConfigFile = findEntry(root, "react-router.config", {
-    absolute: true,
-  });
+  let reactRouterConfigFile: string | undefined;
+
+  let updateReactRouterConfigFile = () => {
+    reactRouterConfigFile = findEntry(root, "react-router.config", {
+      absolute: true,
+    });
+  };
+
+  updateReactRouterConfigFile();
 
   let getConfig = () =>
     resolveConfig({ root, viteNodeContext, reactRouterConfigFile });
@@ -552,9 +559,9 @@ export async function createConfigLoader({
     throw new Error(initialConfigResult.error);
   }
 
-  appDirectory = initialConfigResult.value.appDirectory;
+  appDirectory = Path.normalize(initialConfigResult.value.appDirectory);
 
-  let lastConfig = initialConfigResult.value;
+  let currentConfig = initialConfigResult.value;
 
   let fsWatcher: FSWatcher | undefined;
   let changeHandlers: ChangeHandler[] = [];
@@ -571,54 +578,106 @@ export async function createConfigLoader({
       changeHandlers.push(handler);
 
       if (!fsWatcher) {
-        fsWatcher = chokidar.watch(
-          [
-            ...(reactRouterConfigFile ? [reactRouterConfigFile] : []),
-            appDirectory,
-          ],
-          { ignoreInitial: true }
-        );
+        fsWatcher = chokidar.watch([root, appDirectory], {
+          ignoreInitial: true,
+          ignored: (path) => {
+            let dirname = Path.dirname(path);
+
+            return (
+              path !== root &&
+              dirname !== root &&
+              !dirname.startsWith(appDirectory)
+            );
+          },
+        });
 
         fsWatcher.on("all", async (...args: ChokidarEmitArgs) => {
           let [event, rawFilepath] = args;
-          let filepath = path.normalize(rawFilepath);
+          let filepath = Path.normalize(rawFilepath);
+
+          let fileAddedOrRemoved = event === "add" || event === "unlink";
 
           let appFileAddedOrRemoved =
-            appDirectory &&
-            (event === "add" || event === "unlink") &&
-            filepath.startsWith(path.normalize(appDirectory));
+            fileAddedOrRemoved &&
+            filepath.startsWith(Path.normalize(appDirectory));
 
-          let configCodeUpdated = Boolean(
-            viteNodeContext.devServer?.moduleGraph.getModuleById(filepath)
-          );
+          let rootRelativeFilepath = Path.relative(root, filepath);
+
+          let configFileAddedOrRemoved =
+            fileAddedOrRemoved &&
+            isEntryFile("react-router.config", rootRelativeFilepath);
 
-          if (configCodeUpdated || appFileAddedOrRemoved) {
-            viteNodeContext.devServer?.moduleGraph.invalidateAll();
-            viteNodeContext.runner?.moduleCache.clear();
+          if (configFileAddedOrRemoved) {
+            updateReactRouterConfigFile();
           }
 
-          if (appFileAddedOrRemoved || configCodeUpdated) {
-            let result = await getConfig();
+          let moduleGraphChanged =
+            configFileAddedOrRemoved ||
+            Boolean(
+              viteNodeContext.devServer?.moduleGraph.getModuleById(filepath)
+            );
 
-            let configChanged = result.ok && !isEqual(lastConfig, result.value);
+          // Bail out if no relevant changes detected
+          if (!moduleGraphChanged && !appFileAddedOrRemoved) {
+            return;
+          }
+
+          viteNodeContext.devServer?.moduleGraph.invalidateAll();
+          viteNodeContext.runner?.moduleCache.clear();
+
+          let result = await getConfig();
+
+          let prevAppDirectory = appDirectory;
+          appDirectory = Path.normalize(
+            (result.value ?? currentConfig).appDirectory
+          );
 
-            let routeConfigChanged =
-              result.ok && !isEqual(lastConfig?.routes, result.value.routes);
+          if (appDirectory !== prevAppDirectory) {
+            fsWatcher!.unwatch(prevAppDirectory);
+            fsWatcher!.add(appDirectory);
+          }
 
-            for (let handler of changeHandlers) {
-              handler({
-                result,
-                configCodeUpdated,
-                configChanged,
-                routeConfigChanged,
-                path: filepath,
-                event,
-              });
-            }
+          let configCodeChanged =
+            configFileAddedOrRemoved ||
+            (typeof reactRouterConfigFile === "string" &&
+              isEntryFileDependency(
+                viteNodeContext.devServer.moduleGraph,
+                reactRouterConfigFile,
+                filepath
+              ));
+
+          let routeConfigFile = findEntry(appDirectory, "routes", {
+            absolute: true,
+          });
+          let routeConfigCodeChanged =
+            typeof routeConfigFile === "string" &&
+            isEntryFileDependency(
+              viteNodeContext.devServer.moduleGraph,
+              routeConfigFile,
+              filepath
+            );
+
+          let configChanged =
+            result.ok &&
+            !isEqual(omitRoutes(currentConfig), omitRoutes(result.value));
+
+          let routeConfigChanged =
+            result.ok && !isEqual(currentConfig?.routes, result.value.routes);
+
+          for (let handler of changeHandlers) {
+            handler({
+              result,
+              configCodeChanged,
+              routeConfigCodeChanged,
+              configChanged,
+              routeConfigChanged,
+              path: filepath,
+              event,
+            });
+          }
 
-            if (result.ok) {
-              lastConfig = result.value;
-            }
+          if (result.ok) {
+            currentConfig = result.value;
           }
         });
       }
@@ -656,8 +715,8 @@ export async function resolveEntryFiles({
 }) {
   let { appDirectory } = reactRouterConfig;
 
-  let defaultsDirectory = path.resolve(
-    path.dirname(require.resolve("@react-router/dev/package.json")),
+  let defaultsDirectory = Path.resolve(
+    Path.dirname(require.resolve("@react-router/dev/package.json")),
     "dist",
     "config",
     "defaults"
@@ -707,12 +766,12 @@ export async function resolveEntryFiles({
   }
 
   let entryClientFilePath = userEntryClientFile
-    ? path.resolve(reactRouterConfig.appDirectory, userEntryClientFile)
-    : path.resolve(defaultsDirectory, entryClientFile);
+    ? Path.resolve(reactRouterConfig.appDirectory, userEntryClientFile)
+    : Path.resolve(defaultsDirectory, entryClientFile);
 
   let entryServerFilePath = userEntryServerFile
-    ? path.resolve(reactRouterConfig.appDirectory, userEntryServerFile)
-    : path.resolve(defaultsDirectory, entryServerFile);
+    ? Path.resolve(reactRouterConfig.appDirectory, userEntryServerFile)
+    : Path.resolve(defaultsDirectory, entryServerFile);
 
   return { entryClientFilePath, entryServerFilePath };
 }
@@ -736,28 +795,90 @@ export const ssrExternals = isInReactRouterMonorepo()
 function isInReactRouterMonorepo() {
   // We use '@react-router/node' for this check since it's a
   // dependency of this package and guaranteed to be in node_modules
-  let serverRuntimePath = path.dirname(
+  let serverRuntimePath = Path.dirname(
     require.resolve("@react-router/node/package.json")
   );
-  let serverRuntimeParentDir = path.basename(
-    path.resolve(serverRuntimePath, "..")
+  let serverRuntimeParentDir = Path.basename(
+    Path.resolve(serverRuntimePath, "..")
   );
   return serverRuntimeParentDir === "packages";
 }
 
+async function createCustomLogger() {
+  await preloadViteEsm();
+  const vite = importViteEsmSync();
+
+  let customLogger = vite.createLogger(undefined, {
+    prefix: "[react-router config]",
+  });
+
+  // Patch the info method to filter out page reload messages that show up in
+  // the terminal when adding or removing the config file
+  let originalInfo = customLogger.info;
+  customLogger.info = function (msg, options) {
+    if (msg.includes("page reload")) {
+      return;
+    }
+    return originalInfo.call(this, msg, options);
+  };
+
+  return customLogger;
+}
+
+function omitRoutes(
+  config: ResolvedReactRouterConfig
+): ResolvedReactRouterConfig {
+  return {
+    ...config,
+    routes: {},
+  };
+}
+
 const entryExts = [".js", ".jsx", ".ts", ".tsx"];
 
+function isEntryFile(entryBasename: string, filename: string) {
+  return entryExts.some((ext) => filename === `${entryBasename}${ext}`);
+}
+
 function findEntry(
   dir: string,
   basename: string,
   options?: { absolute?: boolean }
 ): string | undefined {
   for (let ext of entryExts) {
-    let file = path.resolve(dir, basename + ext);
+    let file = Path.resolve(dir, basename + ext);
     if (fs.existsSync(file)) {
-      return options?.absolute ?? false ? file : path.relative(dir, file);
+      return options?.absolute ?? false ? file : Path.relative(dir, file);
     }
   }
 
   return undefined;
 }
+
+function isEntryFileDependency(
+  moduleGraph: Vite.ModuleGraph,
+  entryFilepath: string,
+  filepath: string
+): boolean {
+  // Ensure normalized paths
+  entryFilepath = Path.normalize(entryFilepath);
+  filepath = Path.normalize(filepath);
+
+  if (filepath === entryFilepath) {
+    return true;
+  }
+
+  let mod = moduleGraph.getModuleById(filepath);
+
+  if (!mod) {
+    return false;
+  }
+
+  for (let importer of mod.importers) {
+    if (importer.id === entryFilepath) {
+      return true;
+    }
+  }
+
+  return false;
+}