@react-router/dev 7.0.0-pre.3 → 7.0.0-pre.5

package/dist/cli/index.js

@@ -1,5 +1,6 @@
+#!/usr/bin/env node
 /**
- * @react-router/dev v7.0.0-pre.3
+ * @react-router/dev v7.0.0-pre.5
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -18,9 +19,6 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -86,6 +84,10 @@ var init_node_adapter = __esm({
 async function preloadViteEsm() {
   vite = await import("vite");
 }
+function importViteEsmSync() {
+  invariant(vite, "importViteEsmSync() called before preloadViteEsm()");
+  return vite;
+}
 var vite;
 var init_import_vite_esm_sync = __esm({
   "vite/import-vite-esm-sync.ts"() {
@@ -144,6 +146,44 @@ var init_remove_exports = __esm({
 });
 
 // config/routes.ts
+function configRoutesToRouteManifest(routes2, rootId = "root") {
+  let routeManifest = {};
+  function walk(route, parentId) {
+    let id2 = route.id || createRouteId(route.file);
+    let manifestItem = {
+      id: id2,
+      parentId,
+      file: route.file,
+      path: route.path,
+      index: route.index,
+      caseSensitive: route.caseSensitive
+    };
+    if (routeManifest.hasOwnProperty(id2)) {
+      throw new Error(
+        `Unable to define routes with duplicate route id: "${id2}"`
+      );
+    }
+    routeManifest[id2] = manifestItem;
+    if (route.children) {
+      for (let child of route.children) {
+        walk(child, id2);
+      }
+    }
+  }
+  for (let route of routes2) {
+    walk(route, rootId);
+  }
+  return routeManifest;
+}
+function createRouteId(file) {
+  return normalizeSlashes(stripFileExtension(file));
+}
+function normalizeSlashes(file) {
+  return file.split(import_node_path.win32.sep).join("/");
+}
+function stripFileExtension(file) {
+  return file.replace(/\.[a-z0-9]+$/i, "");
+}
 var import_node_path, v, import_pick, routeConfigEntrySchema, resolvedRouteConfigSchema;
 var init_routes = __esm({
   "config/routes.ts"() {
@@ -177,7 +217,14 @@ var init_detectPackageManager = __esm({
 });
 
 // vite/config.ts
-var import_node_child_process, import_node_path2, import_fs_extra, import_picocolors, import_pick2, import_omit, import_package_json, branchRouteProperties, configRouteToBranchRoute;
+function findEntry(dir, basename2) {
+  for (let ext of entryExts) {
+    let file = import_node_path2.default.resolve(dir, basename2 + ext);
+    if (import_fs_extra.default.existsSync(file)) return import_node_path2.default.relative(dir, file);
+  }
+  return void 0;
+}
+var import_node_child_process, import_node_path2, import_fs_extra, import_picocolors, import_pick2, import_omit, import_package_json, branchRouteProperties, configRouteToBranchRoute, entryExts;
 var init_config = __esm({
   "vite/config.ts"() {
     "use strict";
@@ -198,6 +245,7 @@ var init_config = __esm({
       "index"
     ];
     configRouteToBranchRoute = (configRoute) => (0, import_pick2.default)(configRoute, branchRouteProperties);
+    entryExts = [".js", ".jsx", ".ts", ".tsx"];
   }
 });
 
@@ -214,6 +262,43 @@ var init_with_props = __esm({
 });
 
 // vite/vite-node.ts
+async function createContext(viteConfig = {}) {
+  await preloadViteEsm();
+  const vite2 = importViteEsmSync();
+  const devServer = await vite2.createServer(
+    vite2.mergeConfig(
+      {
+        server: {
+          preTransformRequests: false,
+          hmr: false
+        },
+        optimizeDeps: {
+          noDiscovery: true
+        },
+        configFile: false,
+        envFile: false,
+        plugins: []
+      },
+      viteConfig
+    )
+  );
+  await devServer.pluginContainer.buildStart({});
+  const server = new import_server.ViteNodeServer(devServer);
+  (0, import_source_map.installSourcemapsSupport)({
+    getSourceMap: (source) => server.getSourceMap(source)
+  });
+  const runner = new import_client.ViteNodeRunner({
+    root: devServer.config.root,
+    base: devServer.config.base,
+    fetchModule(id2) {
+      return server.fetchModule(id2);
+    },
+    resolveId(id2, importer) {
+      return server.resolveId(id2, importer);
+    }
+  });
+  return { devServer, server, runner };
+}
 var import_server, import_client, import_source_map;
 var init_vite_node = __esm({
   "vite/vite-node.ts"() {
@@ -385,7 +470,7 @@ var init_profiler = __esm({
       });
     };
     profileCount = 0;
-    stop = (log) => {
+    stop = (log2) => {
       let session = getSession();
       if (!session) return;
       return new Promise((res, rej) => {
@@ -393,7 +478,7 @@ var init_profiler = __esm({
           if (err) return rej(err);
           let outPath = import_node_path3.default.resolve(`./react-router-${profileCount++}.cpuprofile`);
           import_node_fs.default.writeFileSync(outPath, JSON.stringify(profile));
-          log(
+          log2(
             import_picocolors3.default.yellow(
               `CPU profile written to ${import_picocolors3.default.white(import_picocolors3.default.dim(outPath))}`
             )
@@ -565,7 +650,7 @@ async function build(root, {
   const ctx = await extractPluginContext(viteConfig);
   if (!ctx) {
     console.error(
-      import_picocolors4.default.red("React Router Vite plugin not found in Vite config")
+      import_picocolors6.default.red("React Router Vite plugin not found in Vite config")
     );
     process.exit(1);
   }
@@ -617,13 +702,13 @@ async function build(root, {
     viteConfig
   });
 }
-var import_node_path4, import_fs_extra2, import_picocolors4;
+var import_node_path4, import_fs_extra2, import_picocolors6;
 var init_build = __esm({
   "vite/build.ts"() {
     "use strict";
     import_node_path4 = __toESM(require("path"));
     import_fs_extra2 = __toESM(require("fs-extra"));
-    import_picocolors4 = __toESM(require("picocolors"));
+    import_picocolors6 = __toESM(require("picocolors"));
     init_plugin();
     init_config();
     init_invariant();
@@ -661,7 +746,7 @@ async function dev(root, {
   });
   if (!server.config.plugins.find((plugin2) => plugin2.name === "react-router")) {
     console.error(
-      import_picocolors5.default.red("React Router Vite plugin not found in Vite config")
+      import_picocolors7.default.red("React Router Vite plugin not found in Vite config")
     );
     process.exit(1);
   }
@@ -684,198 +769,27 @@ async function dev(root, {
   ];
   server.bindCLIShortcuts({ print: true, customShortcuts });
 }
-var import_picocolors5;
+var import_picocolors7;
 var init_dev = __esm({
   "vite/dev.ts"() {
     "use strict";
-    import_picocolors5 = __toESM(require("picocolors"));
+    import_picocolors7 = __toESM(require("picocolors"));
     init_import_vite_esm_sync();
     init_profiler();
   }
 });
 
-// package.json
-var require_package = __commonJS({
-  "package.json"(exports2, module2) {
-    module2.exports = {
-      name: "@react-router/dev",
-      version: "7.0.0-pre.3",
-      description: "Dev tools and CLI for React Router",
-      homepage: "https://reactrouter.com",
-      bugs: {
-        url: "https://github.com/remix-run/react-router/issues"
-      },
-      repository: {
-        type: "git",
-        url: "https://github.com/remix-run/react-router",
-        directory: "packages/react-router-dev"
-      },
-      license: "MIT",
-      main: "./dist/typescript/plugin.ts",
-      exports: {
-        "./routes": {
-          types: "./dist/routes.d.ts",
-          default: "./dist/routes.js"
-        },
-        "./vite": {
-          types: "./dist/vite.d.ts",
-          default: "./dist/vite.js"
-        },
-        "./vite/cloudflare": {
-          types: "./dist/vite/cloudflare.d.ts",
-          default: "./dist/vite/cloudflare.js"
-        },
-        "./package.json": "./package.json"
-      },
-      bin: {
-        "react-router": "bin.js"
-      },
-      scripts: {
-        build: "wireit"
-      },
-      wireit: {
-        build: {
-          command: "tsup",
-          files: [
-            "cli/**",
-            "config/**",
-            "typescript/**",
-            "vite/**",
-            "*.ts",
-            "bin.js",
-            "tsconfig.json",
-            "package.json"
-          ],
-          output: [
-            "dist/**"
-          ]
-        }
-      },
-      dependencies: {
-        "@babel/core": "^7.21.8",
-        "@babel/generator": "^7.21.5",
-        "@babel/parser": "^7.21.8",
-        "@babel/plugin-syntax-decorators": "^7.22.10",
-        "@babel/plugin-syntax-jsx": "^7.21.4",
-        "@babel/preset-typescript": "^7.21.5",
-        "@babel/traverse": "^7.23.2",
-        "@babel/types": "^7.22.5",
-        "@npmcli/package-json": "^4.0.1",
-        "@react-router/node": "workspace:*",
-        arg: "^5.0.1",
-        "babel-dead-code-elimination": "^1.0.6",
-        chalk: "^4.1.2",
-        chokidar: "^4.0.0",
-        dedent: "^1.5.3",
-        "es-module-lexer": "^1.3.1",
-        "exit-hook": "2.2.1",
-        "fs-extra": "^10.0.0",
-        "gunzip-maybe": "^1.4.2",
-        jsesc: "3.0.2",
-        lodash: "^4.17.21",
-        pathe: "^1.1.2",
-        picocolors: "^1.0.0",
-        picomatch: "^2.3.1",
-        prettier: "^2.7.1",
-        "react-refresh": "^0.14.0",
-        semver: "^7.3.7",
-        "set-cookie-parser": "^2.6.0",
-        valibot: "^0.41.0",
-        "vite-node": "^1.6.0"
-      },
-      devDependencies: {
-        "@react-router/serve": "workspace:*",
-        "@types/babel__core": "^7.20.5",
-        "@types/babel__generator": "^7.6.8",
-        "@types/babel__traverse": "^7.20.5",
-        "@types/dedent": "^0.7.0",
-        "@types/express": "^4.17.9",
-        "@types/fs-extra": "^8.1.2",
-        "@types/gunzip-maybe": "^1.4.0",
-        "@types/jsesc": "^3.0.1",
-        "@types/lodash": "^4.14.182",
-        "@types/node": "^18.17.1",
-        "@types/npmcli__package-json": "^4.0.0",
-        "@types/picomatch": "^2.3.0",
-        "@types/prettier": "^2.7.3",
-        "@types/set-cookie-parser": "^2.4.1",
-        dotenv: "^16.0.0",
-        "esbuild-register": "^3.3.2",
-        execa: "5.1.1",
-        express: "^4.19.2",
-        "fast-glob": "3.2.11",
-        "react-router": "workspace:^",
-        "strip-ansi": "^6.0.1",
-        "tiny-invariant": "^1.2.0",
-        tsup: "^8.3.0",
-        typescript: "^5.1.6",
-        vite: "^5.1.0",
-        wireit: "0.14.9",
-        wrangler: "^3.28.2"
-      },
-      peerDependencies: {
-        "@react-router/serve": "workspace:^",
-        "react-router": "workspace:^",
-        typescript: "^5.1.0",
-        vite: "^5.1.0",
-        wrangler: "^3.28.2"
-      },
-      peerDependenciesMeta: {
-        "@react-router/serve": {
-          optional: true
-        },
-        typescript: {
-          optional: true
-        },
-        wrangler: {
-          optional: true
-        }
-      },
-      engines: {
-        node: ">=20.0.0"
-      },
-      files: [
-        "dist/",
-        "bin.js",
-        "CHANGELOG.md",
-        "LICENSE.md",
-        "README.md"
-      ]
-    };
-  }
-});
-
 // cli/run.ts
 var import_arg = __toESM(require("arg"));
 var import_semver = __toESM(require("semver"));
-
-// colors.ts
-var import_chalk = __toESM(require("chalk"));
-var useColor = import_chalk.default.supportsColor && !process.env.NO_COLOR;
-var identity = (x) => x;
-var safe = (style) => useColor ? style : identity;
-var heading = safe(import_chalk.default.underline);
-var arg = safe(import_chalk.default.yellowBright);
-var error = safe(import_chalk.default.red);
-var warning = safe(import_chalk.default.yellow);
-var hint = safe(import_chalk.default.blue);
-var logoBlue = safe(import_chalk.default.blueBright);
-var logoGreen = safe(import_chalk.default.greenBright);
-var logoYellow = safe(import_chalk.default.yellowBright);
-var logoPink = safe(import_chalk.default.magentaBright);
-var logoRed = safe(import_chalk.default.redBright);
-var bold = safe(import_chalk.default.bold);
-var blue = safe(import_chalk.default.blue);
-var cyan = safe(import_chalk.default.cyan);
-var gray = safe(import_chalk.default.gray);
-var red = safe(import_chalk.default.red);
-var yellow = safe(import_chalk.default.yellow);
+var import_picocolors9 = __toESM(require("picocolors"));
 
 // cli/commands.ts
 var path7 = __toESM(require("path"));
 var import_fs_extra3 = __toESM(require("fs-extra"));
 var import_package_json2 = __toESM(require("@npmcli/package-json"));
 var import_exit_hook = __toESM(require("exit-hook"));
+var import_picocolors8 = __toESM(require("picocolors"));
 
 // config/format.ts
 function formatRoutes(routeManifest, format) {
@@ -957,12 +871,53 @@ function transpile(tsx, options = {}) {
 // cli/commands.ts
 init_profiler();
 
-// typescript/typegen.ts
+// typegen.ts
 var import_node_fs2 = __toESM(require("fs"));
 var import_chokidar = __toESM(require("chokidar"));
 var import_dedent2 = __toESM(require("dedent"));
 var Path = __toESM(require("pathe"));
 var Pathe = __toESM(require("pathe/utils"));
+var import_picocolors5 = __toESM(require("picocolors"));
+
+// logger.ts
+var import_picocolors4 = __toESM(require("picocolors"));
+var DATE_TIME_FORMAT = new Intl.DateTimeFormat([], {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hour12: false
+});
+var log = (level) => (body, options = {}) => {
+  const dest = level === "error" ? process.stderr : process.stdout;
+  let message = getPrefix(level, options) + " " + body;
+  if (options.durationMs) {
+    const duration = options.durationMs < 1e3 ? `${Math.round(options.durationMs)}ms` : `${(options.durationMs / 1e3).toFixed(2)}s`;
+    message += " " + import_picocolors4.default.dim(duration);
+  }
+  dest.write(message + "\n");
+};
+function getPrefix(level, options) {
+  const timestamp = `${DATE_TIME_FORMAT.format(/* @__PURE__ */ new Date())}`;
+  const prefix = [];
+  if (level === "error" || level === "warn") {
+    prefix.push(import_picocolors4.default.bold(timestamp));
+    prefix.push(`[${level.toUpperCase()}]`);
+  } else {
+    prefix.push(timestamp);
+  }
+  if (options.label) {
+    prefix.push(`[${options.label}]`);
+  }
+  if (level === "error") return import_picocolors4.default.red(prefix.join(" "));
+  if (level === "warn") return import_picocolors4.default.yellow(prefix.join(" "));
+  if (prefix.length === 1) return import_picocolors4.default.dim(prefix[0]);
+  return import_picocolors4.default.dim(prefix[0]) + " " + import_picocolors4.default.blue(prefix.splice(1).join(" "));
+}
+var info = log("info");
+var warn = log("warn");
+var error = log("error");
+
+// typegen.ts
 init_routes();
 init_vite_node();
 init_config();
@@ -970,19 +925,100 @@ init_plugin();
 function getDirectory(ctx) {
   return Path.join(ctx.rootDirectory, ".react-router/types");
 }
-function getPath(ctx, route) {
-  return Path.join(
-    getDirectory(ctx),
-    "app",
-    Path.dirname(route.file),
-    "+types." + Pathe.filename(route.file) + ".d.ts"
+async function watch(rootDirectory, options = {}) {
+  const watchStart = performance.now();
+  const vitePluginCtx = await loadPluginContext({
+    root: rootDirectory,
+    configFile: options.configFile
+  });
+  const routeConfigFile = findEntry(
+    vitePluginCtx.reactRouterConfig.appDirectory,
+    "routes"
+  );
+  if (!routeConfigFile) {
+    warn(
+      `Could not find route config within ${import_picocolors5.default.blue(
+        Path.relative(
+          vitePluginCtx.rootDirectory,
+          vitePluginCtx.reactRouterConfig.appDirectory
+        )
+      )}`
+    );
+    process.exit(1);
+  }
+  const routeConfigPath = Path.join(
+    vitePluginCtx.reactRouterConfig.appDirectory,
+    routeConfigFile
   );
+  const routesViteNodeContext = await createContext({
+    root: rootDirectory
+  });
+  async function getRoutes() {
+    const routes2 = {};
+    const rootRouteFile = findEntry(
+      vitePluginCtx.reactRouterConfig.appDirectory,
+      "root"
+    );
+    if (rootRouteFile) {
+      routes2.root = { path: "", id: "root", file: rootRouteFile };
+    } else {
+      warn(`Could not find \`root\` route`);
+    }
+    routesViteNodeContext.devServer.moduleGraph.invalidateAll();
+    routesViteNodeContext.runner.moduleCache.clear();
+    const routeConfig = (await routesViteNodeContext.runner.executeFile(routeConfigPath)).routes;
+    return {
+      ...routes2,
+      ...configRoutesToRouteManifest(await routeConfig)
+    };
+  }
+  const ctx = {
+    rootDirectory,
+    appDirectory: vitePluginCtx.reactRouterConfig.appDirectory,
+    routes: await getRoutes()
+  };
+  await writeAll(ctx);
+  info("generated initial types", {
+    durationMs: performance.now() - watchStart
+  });
+  const watcher = import_chokidar.default.watch(ctx.appDirectory, { ignoreInitial: true });
+  watcher.on("all", async (event, path8) => {
+    const eventStart = performance.now();
+    path8 = Path.normalize(path8);
+    ctx.routes = await getRoutes();
+    const routeConfigChanged = Boolean(
+      routesViteNodeContext.devServer.moduleGraph.getModuleById(path8)
+    );
+    if (routeConfigChanged) {
+      await writeAll(ctx);
+      info("changed route config", {
+        durationMs: performance.now() - eventStart
+      });
+      return;
+    }
+    const route = Object.values(ctx.routes).find(
+      (route2) => path8 === Path.join(ctx.appDirectory, route2.file)
+    );
+    if (route && (event === "add" || event === "unlink")) {
+      await writeAll(ctx);
+      info(
+        `${event === "add" ? "added" : "removed"} route ${import_picocolors5.default.blue(route.file)}`,
+        { durationMs: performance.now() - eventStart }
+      );
+      return;
+    }
+  });
 }
 async function writeAll(ctx) {
   import_node_fs2.default.rmSync(getDirectory(ctx), { recursive: true, force: true });
   Object.values(ctx.routes).forEach((route) => {
     if (!import_node_fs2.default.existsSync(Path.join(ctx.appDirectory, route.file))) return;
-    const typesPath = getPath(ctx, route);
+    const typesPath = Path.join(
+      getDirectory(ctx),
+      Path.relative(ctx.rootDirectory, ctx.appDirectory),
+      Path.dirname(route.file),
+      "+types." + Pathe.filename(route.file) + ".d.ts"
+    );
     const content = getModule(ctx.routes, route);
     import_node_fs2.default.mkdirSync(Path.dirname(typesPath), { recursive: true });
     import_node_fs2.default.writeFileSync(typesPath, content);
@@ -997,19 +1033,21 @@ function getModule(routes2, route) {
 
     export type Params = {${formattedParamsProperties(routes2, route)}}
 
-    type Route = typeof import("./${Pathe.filename(route.file)}")
+    type RouteModule = typeof import("./${Pathe.filename(route.file)}")
 
-    export type LoaderData = T.CreateLoaderData<Route>
-    export type ActionData = T.CreateActionData<Route>
+    export namespace Route {
+      export type LoaderData = T.CreateLoaderData<RouteModule>
+      export type ActionData = T.CreateActionData<RouteModule>
 
-    export type LoaderArgs = T.CreateServerLoaderArgs<Params>
-    export type ClientLoaderArgs = T.CreateClientLoaderArgs<Params, Route>
-    export type ActionArgs = T.CreateServerActionArgs<Params>
-    export type ClientActionArgs = T.CreateClientActionArgs<Params, Route>
+      export type LoaderArgs = T.CreateServerLoaderArgs<Params>
+      export type ClientLoaderArgs = T.CreateClientLoaderArgs<Params, RouteModule>
+      export type ActionArgs = T.CreateServerActionArgs<Params>
+      export type ClientActionArgs = T.CreateClientActionArgs<Params, RouteModule>
 
-    export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
-    export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
-    export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
+      export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
+      export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
+      export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
+    }
   `;
 }
 function formattedParamsProperties(routes2, route) {
@@ -1019,12 +1057,12 @@ function formattedParamsProperties(routes2, route) {
   const properties = Object.entries(params).map(([name, values]) => {
     if (values.length === 1) {
       const isOptional = values[0];
-      return indent + (isOptional ? `${name}?: string` : `${name}: string`);
+      return indent + (isOptional ? `"${name}"?: string` : `"${name}": string`);
     }
     const items = values.map(
       (isOptional) => isOptional ? "string | undefined" : "string"
     );
-    return indent + `${name}: [${items.join(", ")}]`;
+    return indent + `"${name}": [${items.join(", ")}]`;
   });
   const body = properties.length === 0 ? "" : "\n" + properties.join("\n") + "\n";
   return body;
@@ -1052,6 +1090,8 @@ function parseParams(urlpath) {
     result[param].push(isOptional);
     return;
   });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = [false];
   return result;
 }
 
@@ -1063,7 +1103,7 @@ async function routes(reactRouterRoot, flags = {}) {
   });
   if (!ctx) {
     console.error(
-      red("React Router Vite plugin not found in Vite config")
+      import_picocolors8.default.red("React Router Vite plugin not found in Vite config")
     );
     process.exit(1);
   }
@@ -1117,14 +1157,14 @@ async function generateEntry(entry, reactRouterRoot, flags = {}) {
     let entriesArray = Array.from(entries);
     let list = conjunctionListFormat.format(entriesArray);
     console.error(
-      error(`Invalid entry file. Valid entry files are ${list}`)
+      import_picocolors8.default.red(`Invalid entry file. Valid entry files are ${list}`)
     );
     return;
   }
   let pkgJson = await import_package_json2.default.load(rootDirectory);
   let deps = pkgJson.content.dependencies ?? {};
   if (!deps["@react-router/node"]) {
-    console.error(error(`No default server entry detected.`));
+    console.error(import_picocolors8.default.red(`No default server entry detected.`));
     return;
   }
   let defaultsDirectory = path7.resolve(
@@ -1154,7 +1194,7 @@ async function generateEntry(entry, reactRouterRoot, flags = {}) {
     await import_fs_extra3.default.writeFile(outputFile2, contents, "utf-8");
   }
   console.log(
-    blue(
+    import_picocolors8.default.blue(
       `Entry file ${entry} created at ${path7.relative(
         rootDirectory,
         outputFile2
@@ -1167,8 +1207,8 @@ async function checkForEntry(rootDirectory, appDirectory, entries2) {
     let entryPath = path7.resolve(appDirectory, entry);
     let exists = await import_fs_extra3.default.pathExists(entryPath);
     if (exists) {
-      let relative5 = path7.relative(rootDirectory, entryPath);
-      console.error(error(`Entry file ${relative5} already exists.`));
+      let relative6 = path7.relative(rootDirectory, entryPath);
+      console.error(import_picocolors8.default.red(`Entry file ${relative6} already exists.`));
       return process.exit(1);
     }
   }
@@ -1183,8 +1223,15 @@ async function createClientEntry(rootDirectory, appDirectory, inputFile) {
   let contents = await import_fs_extra3.default.readFile(inputFile, "utf-8");
   return contents;
 }
-async function typegen(root) {
-  let ctx = await loadPluginContext({ root });
+async function typegen(root, flags) {
+  root ??= process.cwd();
+  if (flags.watch) {
+    await watch(root, { configFile: flags.config });
+    await new Promise(() => {
+    });
+    return;
+  }
+  let ctx = await loadPluginContext({ root, configFile: flags.config });
   await writeAll({
     rootDirectory: root,
     appDirectory: ctx.reactRouterConfig.appDirectory,
@@ -1194,14 +1241,14 @@ async function typegen(root) {
 
 // cli/run.ts
 var helpText = `
-${logoBlue("react-router")}
+${import_picocolors9.default.blueBright("react-router")}
 
-  ${heading("Usage")}:
-    $ react-router build [${arg("projectDir")}]
-    $ react-router dev [${arg("projectDir")}]
-    $ react-router routes [${arg("projectDir")}]
+  ${import_picocolors9.default.underline("Usage")}:
+    $ react-router build [${import_picocolors9.default.yellowBright("projectDir")}]
+    $ react-router dev [${import_picocolors9.default.yellowBright("projectDir")}]
+    $ react-router routes [${import_picocolors9.default.yellowBright("projectDir")}]
 
-  ${heading("Options")}:
+  ${import_picocolors9.default.underline("Options")}:
     --help, -h          Print this help message and exit
     --version, -v       Print the CLI version and exit
     --no-color          Disable ANSI colors in console output
@@ -1234,23 +1281,26 @@ ${logoBlue("react-router")}
   \`reveal\` Options:
     --config, -c        Use specified Vite config file (string)
     --no-typescript     Generate plain JavaScript files
+  \`typegen\` Options:
+    --config, -c        Use specified Vite config file (string)
+    --watch             Automatically regenerate types whenever route config (\`routes.ts\`) or route modules change
 
-  ${heading("Build your project")}:
+  ${import_picocolors9.default.underline("Build your project")}:
 
     $ react-router build
 
-  ${heading("Run your project locally in development")}:
+  ${import_picocolors9.default.underline("Run your project locally in development")}:
 
     $ react-router dev
 
-  ${heading("Show all routes in your app")}:
+  ${import_picocolors9.default.underline("Show all routes in your app")}:
 
     $ react-router routes
     $ react-router routes my-app
     $ react-router routes --json
     $ react-router routes --config vite.react-router.config.ts
 
-  ${heading("Reveal the used entry point")}:
+  ${import_picocolors9.default.underline("Reveal the used entry point")}:
 
     $ react-router reveal entry.client
     $ react-router reveal entry.server
@@ -1258,9 +1308,11 @@ ${logoBlue("react-router")}
     $ react-router reveal entry.server --no-typescript
     $ react-router reveal entry.server --config vite.react-router.config.ts
 
-  ${heading("Generate types for route modules")}:
+  ${import_picocolors9.default.underline("Generate types for route modules")}:
 
    $ react-router typegen
+   $ react-router typegen --watch
+   $ react-router typegen --config vite.react-router.config.ts
 `;
 async function run(argv = process.argv.slice(2)) {
   let versions = process.versions;
@@ -1270,8 +1322,8 @@ async function run(argv = process.argv.slice(2)) {
       `\uFE0F\u{1F6A8} Oops, Node v${versions.node} detected. react-router requires a Node version greater than ${MINIMUM_NODE_VERSION}.`
     );
   }
-  let isBooleanFlag = (arg3) => {
-    let index = argv.indexOf(arg3);
+  let isBooleanFlag = (arg2) => {
+    let index = argv.indexOf(arg2);
     let nextArg = argv[index + 1];
     return !nextArg || nextArg.startsWith("-");
   };
@@ -1304,7 +1356,8 @@ async function run(argv = process.argv.slice(2)) {
       "--strictPort": Boolean,
       "--profile": Boolean,
       "--sourcemapClient": isBooleanFlag("--sourcemapClient") ? Boolean : String,
-      "--sourcemapServer": isBooleanFlag("--sourcemapServer") ? Boolean : String
+      "--sourcemapServer": isBooleanFlag("--sourcemapServer") ? Boolean : String,
+      "--watch": Boolean
     },
     {
       argv
@@ -1321,7 +1374,7 @@ async function run(argv = process.argv.slice(2)) {
     return;
   }
   if (flags.version) {
-    let version = require_package().version;
+    let version = require("../package.json").version;
     console.log(version);
     return;
   }
@@ -1345,7 +1398,7 @@ async function run(argv = process.argv.slice(2)) {
       await dev2(input[1], flags);
       break;
     case "typegen":
-      await typegen(input[1]);
+      await typegen(input[1], flags);
       break;
     default:
       await dev2(input[0], flags);