Map React Router frontend features

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Added Next.js route mapping for `src/app` and `src/pages` layouts, thanks @obatried.
 - Added first-pass Python mapping for project metadata, console scripts, source groups, pytest suites, and conservative validation defaults, thanks @xiamx.
 - Added progress output for `clawpatch revalidate`, thanks @twidtwid.
+- Added React Router and React component mapping, thanks @moritzscheele.
 - Improved Node/TypeScript mapping for large workspaces by splitting package source trees into bounded review groups with package-local tests.
 - Added generic nested SwiftPM, Apple/Xcode, and Gradle/Android app mapping.
 - Fixed Codex provider execution on Windows paths with spaces and npm `.cmd` shims, thanks @1berto.

README.md

@@ -52,6 +52,7 @@ validation commands and records a patch attempt under `.clawpatch/`.
 - Nx project metadata from `project.json`, including project-scoped validation
   targets
 - Next.js `app/` and `pages/` routes, including routes inside monorepo apps
+- React Router routes and React components
 - Go package slices from `go list ./...`, including command packages
 - Go package tests and same-repo imports as review context
 - Java/Kotlin Gradle source groups and root Gradle build/test commands

docs/feature-mapping.md

@@ -31,6 +31,9 @@ Supported deterministic mappers today:
 - Node/TypeScript workspace packages from `package.json` workspaces, `pnpm-workspace.yaml`, and common package folders
 - Nx project metadata from `project.json`, including project names, source roots, project types, and target names
 - bounded Node/TypeScript source groups under `src/`, `lib/`, `app/`, `pages/`, and `scripts/`
+- React Router `<Route path element>` declarations and React components in
+  root or nested frontend packages such as `frontend/`, `client/`, `web/`,
+  workspaces, and packages under `apps/` or `packages/`
 - Next.js `app/` and `pages/` routes at the repo root or inside discovered monorepo projects
 - Go `cmd/*/main.go`
 - Go `internal/*` packages
@@ -72,6 +75,12 @@ clawpatch next --project web
 When an Nx project target is available, nearby tests use the project-scoped
 command, such as `yarn nx test web`, instead of a repository-wide test command.
 
+React mapping discovers packages with a React dependency, including common
+nested frontend directories. It maps React Router route declarations to the
+component they render when the component can be resolved from a local import or
+lazy import, and also maps page/component files under `src/pages` and
+`src/components` as UI-flow slices.
+
 Native app mappers use the same bounded grouping model. SwiftPM packages can be
 discovered below the repo root, Apple projects are grouped by Swift source area,
 and Gradle modules are grouped from `src/main`, `src/test`, and `src/androidTest`.

src/mapper.ts

@@ -7,6 +7,7 @@ import { gradleSeeds } from "./mappers/gradle.js";
 import { nextSeeds } from "./mappers/next.js";
 import { nodeSeeds } from "./mappers/node.js";
 import { pythonSeeds } from "./mappers/python.js";
+import { reactSeeds } from "./mappers/react.js";
 import { discoverNodeProjects } from "./mappers/projects.js";
 import { rubySeeds } from "./mappers/ruby.js";
 import { rustSeeds } from "./mappers/rust.js";
@@ -25,6 +26,7 @@ export type MapResult = {
 const featureMappers: FeatureMapper[] = [
   { name: "node", map: nodeSeeds },
   { name: "next", map: nextSeeds },
+  { name: "react", map: reactSeeds },
   { name: "go", map: goSeeds },
   { name: "python", map: pythonSeeds },
   { name: "ruby", map: rubySeeds },

src/mappers/projects.ts

@@ -28,6 +28,7 @@ export type NodeProjectInfo = {
   projectType: string | null;
   targets: Record<string, NodeProjectTarget>;
   packageManager: string;
+  nxPackageManager: string;
 };
 
 type CandidateContextFile = {
@@ -37,7 +38,7 @@ type CandidateContextFile = {
 
 export async function discoverNodeProjects(root: string): Promise<NodeProjectInfo[]> {
   const rootPackage = await readPackageJson(root);
-  const packageManager = await detectNodePackageManager(root);
+  const rootPackageManager = await detectNodePackageManager(root);
   const byRoot = new Map<string, NodeProjectInfo>();
 
   for (const packageRoot of await discoverPackageRoots(root, rootPackage)) {
@@ -55,7 +56,8 @@ export async function discoverNodeProjects(root: string): Promise<NodeProjectInf
       sourceRoot: null,
       projectType: null,
       targets: {},
-      packageManager,
+      packageManager: await nodePackageManagerForPackage(root, packageRoot, rootPackageManager),
+      nxPackageManager: rootPackageManager,
     });
   }
 
@@ -84,13 +86,37 @@ export async function discoverNodeProjects(root: string): Promise<NodeProjectInf
       sourceRoot: nxProject.sourceRoot,
       projectType: nxProject.projectType,
       targets: nxProject.targets,
-      packageManager,
+      packageManager: await nodePackageManagerForPackage(root, projectRoot, rootPackageManager),
+      nxPackageManager: rootPackageManager,
     });
   }
 
   return [...byRoot.values()].toSorted((left, right) => left.root.localeCompare(right.root));
 }
 
+async function nodePackageManagerForPackage(
+  root: string,
+  packageRoot: string,
+  rootPackageManager: string,
+): Promise<string> {
+  if (packageRoot === ".") {
+    return rootPackageManager;
+  }
+  const packageDir = join(root, packageRoot);
+  for (const lockfile of [
+    "pnpm-lock.yaml",
+    "pnpm-workspace.yaml",
+    "yarn.lock",
+    "bun.lockb",
+    "package-lock.json",
+  ]) {
+    if (await pathExists(join(packageDir, lockfile))) {
+      return detectNodePackageManager(packageDir);
+    }
+  }
+  return rootPackageManager;
+}
+
 export function projectTags(project: NodeProjectInfo): string[] {
   const tags = [`project:${project.name}`, `project-root:${project.root}`];
   if (project.projectType !== null) {
@@ -108,7 +134,7 @@ export function projectContextFiles(
 
 export function projectTargetCommand(project: NodeProjectInfo, target: string): string | null {
   if (project.targets[target] !== undefined) {
-    return nxCommand(project.packageManager, target, project.name);
+    return nxCommand(project.nxPackageManager, target, project.name);
   }
   if (project.packageJson !== null && packageScripts(project.packageJson)[target] !== undefined) {
     return scriptCommand(project.packageManager, project.root, target);
@@ -122,6 +148,9 @@ export function packageRelativePath(packageRoot: string, path: string): string {
 
 export function scriptCommand(packageManager: string, packageRoot: string, script: string): string {
   if (packageRoot === ".") {
+    if (packageManager === "bun") {
+      return `bun run ${script}`;
+    }
     return packageManager === "npm" ? `npm run ${script}` : `${packageManager} ${script}`;
   }
   if (packageManager === "pnpm") {
@@ -233,8 +262,17 @@ async function workspacePatterns(root: string, pkg: NodePackageJson | null): Pro
       patterns.add(pattern);
     }
   }
-  for (const fallback of ["packages/*", "apps/*", "extensions/*", "plugins/*"]) {
-    if (await pathExists(join(root, fallback.slice(0, -2)))) {
+  for (const fallback of [
+    "frontend",
+    "client",
+    "web",
+    "ui",
+    "packages/*",
+    "apps/*",
+    "extensions/*",
+    "plugins/*",
+  ]) {
+    if (await pathExists(join(root, fallback.replace(/\/\*$/u, "")))) {
       patterns.add(fallback);
     }
   }