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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `@remix-run/dev`
 
+## 7.0.0-pre.5
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@7.0.0-pre.5`
+  - `@react-router/node@7.0.0-pre.5`
+  - `@react-router/serve@7.0.0-pre.5`
+
 ## 7.0.0-pre.4
 
 ### Patch Changes

package/dist/cli/index.d.ts

@@ -1,2 +1 @@
-
-export {  }
+#!/usr/bin/env node

package/dist/cli/index.js

@@ -1,5 +1,6 @@
+#!/usr/bin/env node
 /**
- * @react-router/dev v7.0.0-pre.4
+ * @react-router/dev v7.0.0-pre.5
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -83,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"() {
@@ -141,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"() {
@@ -174,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";
@@ -195,6 +245,7 @@ var init_config = __esm({
       "index"
     ];
     configRouteToBranchRoute = (configRoute) => (0, import_pick2.default)(configRoute, branchRouteProperties);
+    entryExts = [".js", ".jsx", ".ts", ".tsx"];
   }
 });
 
@@ -211,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"() {
@@ -275,9 +363,9 @@ async function loadPluginContext({
   }
   return ctx;
 }
-function findConfig(dir, basename3, extensions) {
+function findConfig(dir, basename2, extensions) {
   for (let ext of extensions) {
-    let name = basename3 + ext;
+    let name = basename2 + ext;
     let file = path4.join(dir, name);
     if (fse2.existsSync(file)) return file;
   }
@@ -382,7 +470,7 @@ var init_profiler = __esm({
       });
     };
     profileCount = 0;
-    stop = (log) => {
+    stop = (log2) => {
       let session = getSession();
       if (!session) return;
       return new Promise((res, rej) => {
@@ -390,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))}`
             )
@@ -562,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);
   }
@@ -614,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();
@@ -658,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);
   }
@@ -681,11 +769,11 @@ 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();
   }
@@ -694,34 +782,14 @@ var init_dev = __esm({
 // 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) {
@@ -803,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();
@@ -816,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),
-    Path.basename(ctx.appDirectory),
-    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);
@@ -843,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) {
@@ -865,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;
@@ -898,6 +1090,8 @@ function parseParams(urlpath) {
     result[param].push(isOptional);
     return;
   });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = [false];
   return result;
 }
 
@@ -909,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);
   }
@@ -963,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(
@@ -1000,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
@@ -1013,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);
     }
   }
@@ -1029,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,
@@ -1040,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
@@ -1080,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
@@ -1104,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;
@@ -1116,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("-");
   };
@@ -1150,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
@@ -1191,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);

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.0.0-pre.4
+ * @react-router/dev v7.0.0-pre.5
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.0.0-pre.4
+ * @react-router/dev v7.0.0-pre.5
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.0.0-pre.4
+ * @react-router/dev v7.0.0-pre.5
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.0.0-pre.4",
+  "version": "7.0.0-pre.5",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -12,7 +12,6 @@
     "directory": "packages/react-router-dev"
   },
   "license": "MIT",
-  "main": "./dist/typescript/plugin.ts",
   "exports": {
     "./routes": {
       "types": "./dist/routes.d.ts",
@@ -61,7 +60,6 @@
     "@npmcli/package-json": "^4.0.1",
     "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",
@@ -71,7 +69,7 @@
     "jsesc": "3.0.2",
     "lodash": "^4.17.21",
     "pathe": "^1.1.2",
-    "picocolors": "^1.0.0",
+    "picocolors": "^1.1.1",
     "picomatch": "^2.3.1",
     "prettier": "^2.7.1",
     "react-refresh": "^0.14.0",
@@ -79,7 +77,7 @@
     "set-cookie-parser": "^2.6.0",
     "valibot": "^0.41.0",
     "vite-node": "^1.6.0",
-    "@react-router/node": "7.0.0-pre.4"
+    "@react-router/node": "7.0.0-pre.5"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -108,15 +106,15 @@
     "vite": "^5.1.0",
     "wireit": "0.14.9",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "7.0.0-pre.4",
-    "react-router": "^7.0.0-pre.4"
+    "@react-router/serve": "7.0.0-pre.5",
+    "react-router": "^7.0.0-pre.5"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "^7.0.0-pre.4",
-    "react-router": "^7.0.0-pre.4"
+    "@react-router/serve": "^7.0.0-pre.5",
+    "react-router": "^7.0.0-pre.5"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {

package/dist/typescript/plugin.d.ts

@@ -1,7 +0,0 @@
-import ts from 'typescript/lib/tsserverlibrary';
-
-declare function init(): {
-    create: (info: ts.server.PluginCreateInfo) => ts.LanguageService;
-};
-
-export { init as default };

package/dist/typescript/plugin.js

@@ -1,500 +0,0 @@
-/**
- * @react-router/dev v7.0.0-pre.4
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// typescript/plugin.ts
-var plugin_exports = {};
-__export(plugin_exports, {
-  default: () => init
-});
-module.exports = __toCommonJS(plugin_exports);
-var Path2 = __toESM(require("pathe"));
-
-// typescript/typegen.ts
-var import_node_fs = __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"));
-
-// config/routes.ts
-var import_node_path = require("path");
-var v = __toESM(require("valibot"));
-var import_pick = __toESM(require("lodash/pick"));
-
-// invariant.ts
-function invariant(value, message) {
-  if (value === false || value === null || typeof value === "undefined") {
-    console.error(
-      "The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose"
-    );
-    throw new Error(message);
-  }
-}
-
-// config/routes.ts
-var routeConfigEntrySchema = v.pipe(
-  v.custom((value) => {
-    return !(typeof value === "object" && value !== null && "then" in value && "catch" in value);
-  }, "Invalid type: Expected object but received a promise. Did you forget to await?"),
-  v.object({
-    id: v.optional(v.string()),
-    path: v.optional(v.string()),
-    index: v.optional(v.boolean()),
-    caseSensitive: v.optional(v.boolean()),
-    file: v.string(),
-    children: v.optional(v.array(v.lazy(() => routeConfigEntrySchema)))
-  })
-);
-var resolvedRouteConfigSchema = v.array(routeConfigEntrySchema);
-function configRoutesToRouteManifest(routes, 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 routes) {
-    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, "");
-}
-
-// vite/vite-node.ts
-var import_server = require("vite-node/server");
-var import_client = require("vite-node/client");
-var import_source_map = require("vite-node/source-map");
-
-// vite/import-vite-esm-sync.ts
-var vite;
-async function preloadViteEsm() {
-  vite = await import("vite");
-}
-function importViteEsmSync() {
-  invariant(vite, "importViteEsmSync() called before preloadViteEsm()");
-  return vite;
-}
-
-// 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 };
-}
-
-// vite/config.ts
-var import_node_child_process = require("child_process");
-var import_node_path2 = __toESM(require("path"));
-var import_fs_extra = __toESM(require("fs-extra"));
-var import_picocolors = __toESM(require("picocolors"));
-var import_pick2 = __toESM(require("lodash/pick"));
-var import_omit = __toESM(require("lodash/omit"));
-var import_package_json = __toESM(require("@npmcli/package-json"));
-var entryExts = [".js", ".jsx", ".ts", ".tsx"];
-function findEntry(dir, basename3) {
-  for (let ext of entryExts) {
-    let file = import_node_path2.default.resolve(dir, basename3 + ext);
-    if (import_fs_extra.default.existsSync(file)) return import_node_path2.default.relative(dir, file);
-  }
-  return void 0;
-}
-
-// vite/plugin.ts
-var import_node_crypto = require("crypto");
-var path4 = __toESM(require("path"));
-var url = __toESM(require("url"));
-var fse2 = __toESM(require("fs-extra"));
-var babel = __toESM(require("@babel/core"));
-var import_react_router2 = require("react-router");
-var import_es_module_lexer = require("es-module-lexer");
-var import_jsesc = __toESM(require("jsesc"));
-var import_picocolors2 = __toESM(require("picocolors"));
-
-// vite/babel.ts
-var import_parser = require("@babel/parser");
-var t = __toESM(require("@babel/types"));
-var traverse = require("@babel/traverse").default;
-var generate = require("@babel/generator").default;
-
-// vite/node-adapter.ts
-var import_node_events = require("events");
-var import_node_stream = require("stream");
-var import_set_cookie_parser = require("set-cookie-parser");
-var import_node = require("@react-router/node");
-
-// vite/styles.ts
-var path3 = __toESM(require("path"));
-var import_react_router = require("react-router");
-
-// vite/resolve-file-url.ts
-var path2 = __toESM(require("path"));
-
-// vite/styles.ts
-var cssFileRegExp = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
-var cssModulesRegExp = new RegExp(`\\.module${cssFileRegExp.source}`);
-
-// vite/vmod.ts
-var id = (name) => `virtual:react-router/${name}`;
-
-// vite/remove-exports.ts
-var import_babel_dead_code_elimination = require("babel-dead-code-elimination");
-
-// vite/with-props.ts
-var import_dedent = __toESM(require("dedent"));
-var vmodId = id("with-props");
-
-// vite/plugin.ts
-async function resolveViteConfig({
-  configFile,
-  mode,
-  root
-}) {
-  let vite2 = await import("vite");
-  let viteConfig = await vite2.resolveConfig(
-    { mode, configFile, root },
-    "build",
-    // command
-    "production",
-    // default mode
-    "production"
-    // default NODE_ENV
-  );
-  if (typeof viteConfig.build.manifest === "string") {
-    throw new Error("Custom Vite manifest paths are not supported");
-  }
-  return viteConfig;
-}
-async function extractPluginContext(viteConfig) {
-  return viteConfig["__reactRouterPluginContext"];
-}
-async function loadPluginContext({
-  configFile,
-  root
-}) {
-  if (!root) {
-    root = process.env.REACT_ROUTER_ROOT || process.cwd();
-  }
-  configFile = configFile ?? findConfig(root, "vite.config", [
-    ".ts",
-    ".cts",
-    ".mts",
-    ".js",
-    ".cjs",
-    ".mjs"
-  ]);
-  if (!configFile) {
-    console.error(import_picocolors2.default.red("Vite config file not found"));
-    process.exit(1);
-  }
-  let viteConfig = await resolveViteConfig({ configFile, root });
-  let ctx = await extractPluginContext(viteConfig);
-  if (!ctx) {
-    console.error(
-      import_picocolors2.default.red("React Router Vite plugin not found in Vite config")
-    );
-    process.exit(1);
-  }
-  return ctx;
-}
-var serverBuildId = id("server-build");
-var serverManifestId = id("server-manifest");
-var browserManifestId = id("browser-manifest");
-var hmrRuntimeId = id("hmr-runtime");
-var injectHmrRuntimeId = id("inject-hmr-runtime");
-var defaultEntriesDir = path4.resolve(
-  path4.dirname(require.resolve("@react-router/dev/package.json")),
-  "dist",
-  "config",
-  "defaults"
-);
-var defaultEntries = fse2.readdirSync(defaultEntriesDir).map((filename2) => path4.join(defaultEntriesDir, filename2));
-invariant(defaultEntries.length > 0, "No default entries found");
-function findConfig(dir, basename3, extensions) {
-  for (let ext of extensions) {
-    let name = basename3 + ext;
-    let file = path4.join(dir, name);
-    if (fse2.existsSync(file)) return file;
-  }
-  return void 0;
-}
-var REACT_REFRESH_HEADER = `
-import RefreshRuntime from "${hmrRuntimeId}";
-
-const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
-let prevRefreshReg;
-let prevRefreshSig;
-
-if (import.meta.hot && !inWebWorker) {
-  if (!window.__vite_plugin_react_preamble_installed__) {
-    throw new Error(
-      "React Router Vite plugin can't detect preamble. Something is wrong."
-    );
-  }
-
-  prevRefreshReg = window.$RefreshReg$;
-  prevRefreshSig = window.$RefreshSig$;
-  window.$RefreshReg$ = (type, id) => {
-    RefreshRuntime.register(type, __SOURCE__ + " " + id)
-  };
-  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
-}`.trim();
-var REACT_REFRESH_FOOTER = `
-if (import.meta.hot && !inWebWorker) {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
-  RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
-    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
-    import.meta.hot.accept((nextExports) => {
-      if (!nextExports) return;
-      __ROUTE_ID__ && window.__reactRouterRouteModuleUpdates.set(__ROUTE_ID__, nextExports);
-      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports, __ACCEPT_EXPORTS__);
-      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
-    });
-  });
-}`.trim();
-
-// typescript/typegen.ts
-function getDirectory(ctx) {
-  return Path.join(ctx.rootDirectory, ".react-router/types");
-}
-function getPath(ctx, route) {
-  return Path.join(
-    getDirectory(ctx),
-    Path.basename(ctx.appDirectory),
-    Path.dirname(route.file),
-    "+types." + Pathe.filename(route.file) + ".d.ts"
-  );
-}
-async function watch(rootDirectory) {
-  const vitePluginCtx = await loadPluginContext({ root: rootDirectory });
-  const routesTsPath = Path.join(
-    vitePluginCtx.reactRouterConfig.appDirectory,
-    "routes.ts"
-  );
-  const routesViteNodeContext = await createContext({
-    root: rootDirectory
-  });
-  async function getRoutes() {
-    const routes = {};
-    const rootRouteFile = findEntry(
-      vitePluginCtx.reactRouterConfig.appDirectory,
-      "root"
-    );
-    if (rootRouteFile) {
-      routes.root = { path: "", id: "root", file: rootRouteFile };
-    }
-    routesViteNodeContext.devServer.moduleGraph.invalidateAll();
-    routesViteNodeContext.runner.moduleCache.clear();
-    const routeConfig = (await routesViteNodeContext.runner.executeFile(routesTsPath)).routes;
-    return {
-      ...routes,
-      ...configRoutesToRouteManifest(await routeConfig)
-    };
-  }
-  const ctx = {
-    rootDirectory,
-    appDirectory: vitePluginCtx.reactRouterConfig.appDirectory,
-    routes: await getRoutes()
-  };
-  await writeAll(ctx);
-  const watcher = import_chokidar.default.watch(ctx.appDirectory, { ignoreInitial: true });
-  watcher.on("all", async (event, path5) => {
-    path5 = Path.normalize(path5);
-    ctx.routes = await getRoutes();
-    const routeConfigChanged = Boolean(
-      routesViteNodeContext.devServer.moduleGraph.getModuleById(path5)
-    );
-    if (routeConfigChanged) {
-      await writeAll(ctx);
-      return;
-    }
-    const isRoute = Object.values(ctx.routes).find(
-      (route) => path5 === Path.join(ctx.appDirectory, route.file)
-    );
-    if (isRoute && (event === "add" || event === "unlink")) {
-      await writeAll(ctx);
-      return;
-    }
-  });
-}
-async function writeAll(ctx) {
-  import_node_fs.default.rmSync(getDirectory(ctx), { recursive: true, force: true });
-  Object.values(ctx.routes).forEach((route) => {
-    if (!import_node_fs.default.existsSync(Path.join(ctx.appDirectory, route.file))) return;
-    const typesPath = getPath(ctx, route);
-    const content = getModule(ctx.routes, route);
-    import_node_fs.default.mkdirSync(Path.dirname(typesPath), { recursive: true });
-    import_node_fs.default.writeFileSync(typesPath, content);
-  });
-}
-function getModule(routes, route) {
-  return import_dedent2.default`
-    // React Router generated types for route:
-    // ${route.file}
-
-    import * as T from "react-router/types"
-
-    export type Params = {${formattedParamsProperties(routes, route)}}
-
-    type Route = typeof import("./${Pathe.filename(route.file)}")
-
-    export type LoaderData = T.CreateLoaderData<Route>
-    export type ActionData = T.CreateActionData<Route>
-
-    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 HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
-    export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
-    export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
-  `;
-}
-function formattedParamsProperties(routes, route) {
-  const urlpath = routeLineage(routes, route).map((route2) => route2.path).join("/");
-  const params = parseParams(urlpath);
-  const indent = "  ".repeat(3);
-  const properties = Object.entries(params).map(([name, values]) => {
-    if (values.length === 1) {
-      const isOptional = values[0];
-      return indent + (isOptional ? `${name}?: string` : `${name}: string`);
-    }
-    const items = values.map(
-      (isOptional) => isOptional ? "string | undefined" : "string"
-    );
-    return indent + `${name}: [${items.join(", ")}]`;
-  });
-  const body = properties.length === 0 ? "" : "\n" + properties.join("\n") + "\n";
-  return body;
-}
-function routeLineage(routes, route) {
-  const result = [];
-  while (route) {
-    result.push(route);
-    if (!route.parentId) break;
-    route = routes[route.parentId];
-  }
-  result.reverse();
-  return result;
-}
-function parseParams(urlpath) {
-  const result = {};
-  let segments = urlpath.split("/");
-  segments.filter((s) => s.startsWith(":")).forEach((param) => {
-    param = param.slice(1);
-    let isOptional = param.endsWith("?");
-    if (isOptional) {
-      param = param.slice(0, -1);
-    }
-    result[param] ??= [];
-    result[param].push(isOptional);
-    return;
-  });
-  return result;
-}
-
-// typescript/plugin.ts
-function init() {
-  function create(info) {
-    const { logger } = info.project.projectService;
-    logger.info("[react-router] setup");
-    const rootDirectory = Path2.normalize(info.project.getCurrentDirectory());
-    watch(rootDirectory);
-    return info.languageService;
-  }
-  return { create };
-}