fix for custom ids

Author: AlemTuzlak

package.json

@@ -132,7 +132,6 @@
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.5.1",
 		"prompt": "^1.3.0",
-		"tailwind-merge": "^3.0.1",
 		"tailwindcss": "^3.4.0",
 		"tailwindcss-animate": "^1.0.7",
 		"tsup": "^8.3.6",
@@ -159,7 +158,8 @@
 		"react-d3-tree": "^3.6.4",
 		"react-diff-viewer-continued": "^4.0.5",
 		"react-hotkeys-hook": "^4.6.1",
-		"react-tooltip": "^5.28.0"
+		"react-tooltip": "^5.28.0",
+		"tailwind-merge": "^3.0.1"
 	},
 	"optionalDependencies": {
 		"@biomejs/cli-darwin-arm64": "^1.9.4",

src/client/components/RouteInfo.tsx

@@ -42,7 +42,7 @@ export const RouteInfo = ({ route: routeToUse, className, openNewRoute, onClose
 			)}
 			<div className="flex gap-2">
 				<span className="whitespace-nowrap text-gray-500">Route file:</span>
-				{route.id}
+				{route.module ?? routeToUse.file}
 			</div>
 
 			<div className="mb-4 mt-4 flex flex-col gap-2">

src/client/utils/routing.ts

@@ -48,18 +48,29 @@ const ROUTE_FILLS = {
 	PURPLE: "fill-purple-500 text-white",
 } as const
 
+const UNDISCOVERED_ROUTE_FILLS = {
+	GREEN: "fill-green-500/20 text-white",
+	BLUE: "fill-blue-500/20 text-white",
+	PURPLE: "fill-purple-500/20 text-white",
+}
+
 export function getRouteColor(route: Route) {
+	const isDiscovered = !!window.__reactRouterManifest?.routes[route.id]
+	const FILL = isDiscovered ? ROUTE_FILLS : UNDISCOVERED_ROUTE_FILLS
 	switch (getRouteType(route)) {
 		case "ROOT":
-			return ROUTE_FILLS.PURPLE
-		case "LAYOUT":
-			return ROUTE_FILLS.BLUE
+			return FILL.PURPLE
+
 		case "ROUTE":
-			return ROUTE_FILLS.GREEN
+			return FILL.GREEN
+
+		case "LAYOUT":
+			return FILL.BLUE
 	}
 }
 export type ExtendedRoute = EntryRoute & {
 	url: string
+	file?: string
 	errorBoundary: { hasErrorBoundary: boolean; errorBoundaryId: string | null }
 }
 

src/vite/node-server.ts

@@ -5,6 +5,8 @@ import { installSourcemapsSupport } from "vite-node/source-map"
 
 // create vite server
 const server = await createServer({
+	mode: "development",
+	root: process.cwd(),
 	server: {
 		preTransformRequests: false,
 		hmr: false,

src/vite/plugin.tsx

@@ -112,7 +112,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 								...recursiveFlatten(
 									routeOrRoutes.children.map((child) => ({
 										...child,
-										parentId: routeOrRoutes.id,
+										parentId: routeOrRoutes.file.split(".").slice(0, -1).join("."),
 									}))
 								),
 							]

test-apps/react-router-vite/app/root.tsx

@@ -28,7 +28,7 @@ export const loader = ({context, devTools }: LoaderFunctionArgs) => {
   });
   const start =devTools?.tracing.start("test")!;
   devTools?.tracing.end("test", start);
-  return  data({ message: "Hello World", mainPromise, bigInt: BigInt(10) }, { headers: { "Cache-Control": "max-age=3600, private" } });
+  return  data({ message: "Hello World", mainPromise, bigInt: BigInt(10) },  );
 }
 
 export const action =async  ({devTools}: ActionFunctionArgs) => {

test-apps/react-router-vite/app/routes.ts

@@ -1,3 +1,8 @@
 
 import { flatRoutes } from "@react-router/fs-routes";
-export default flatRoutes()
+import { type RouteConfig, index, layout, prefix, route } from "@react-router/dev/routes"
+import subroutes from "./subroutes.js"
+
+
+
+export default [...await flatRoutes(), ...subroutes ]

test-apps/react-router-vite/app/subroutes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, index, layout, prefix, route } from "@react-router/dev/routes"
+
+
+export default [
+	route("outside", "./routes/_index.tsx", { id: "something" }),
+
+] satisfies RouteConfig

test-apps/react-router-vite/vite.config.ts

@@ -36,7 +36,9 @@ export default defineConfig({
     reactRouter(),
     tsconfigPaths()
   ],
-
+  optimizeDeps: {
+    noDiscovery: true
+  },
   server: {
     open: true,
     port: 3000,