Make routes tab great again

Author: AlemTuzlak

package-lock.json

@@ -139,6 +139,7 @@
 		"tsx": "^4.19.2",
 		"typescript": "^5.7.3",
 		"vite": "^6.0.11",
+		"vite-node": "^3.1.2",
 		"vitest": "^3.0.4"
 	},
 	"dependencies": {

package.json

@@ -3,6 +3,7 @@ import type { MouseEvent } from "react"
 import { Link } from "react-router"
 import { useSettingsContext } from "../context/useRDTContext.js"
 import { type ExtendedRoute, constructRoutePath } from "../utils/routing.js"
+import { findParentErrorBoundary } from "../utils/sanitize.js"
 import { Input } from "./Input.js"
 import { Tag } from "./Tag.js"
 import { Icon } from "./icon/Icon.js"
@@ -14,20 +15,22 @@ interface RouteInfoProps {
 	onClose?: () => void
 }
 
-export const RouteInfo = ({ route, className, openNewRoute, onClose }: RouteInfoProps) => {
+export const RouteInfo = ({ route: routeToUse, className, openNewRoute, onClose }: RouteInfoProps) => {
+	const route = window.__reactRouterManifest?.routes[routeToUse.id] || routeToUse
 	const { settings, setSettings } = useSettingsContext()
 	const { routeWildcards, routeViewMode } = settings
-	const { hasWildcard, path, pathToOpen } = constructRoutePath(route, routeWildcards)
+	const { hasWildcard, path, pathToOpen } = constructRoutePath(routeToUse, routeWildcards)
 	const isTreeView = routeViewMode === "tree"
-	const hasParentErrorBoundary = route.errorBoundary.errorBoundaryId && route.errorBoundary.errorBoundaryId !== route.id
-	const hasErrorBoundary = route.errorBoundary.hasErrorBoundary
+	const { hasErrorBoundary, errorBoundaryId } = findParentErrorBoundary(route)
+	const hasParentErrorBoundary = errorBoundaryId && errorBoundaryId !== route.id
+
 	return (
 		<div className={clsx(className, "relative")}>
 			{isTreeView && (
 				<>
 					<Icon onClick={onClose} className="absolute right-2 top-2 cursor-pointer text-red-600" name="X" />
 
-					<h1 className="text-xl font-semibold">{route.url}</h1>
+					<h1 className="text-xl font-semibold">{routeToUse.url}</h1>
 					<hr className="mb-4 mt-1" />
 					<h3>
 						<span className="text-gray-500">Path:</span> {path}
@@ -41,12 +44,19 @@ export const RouteInfo = ({ route, className, openNewRoute, onClose }: RouteInfo
 				<span className="whitespace-nowrap text-gray-500">Route file:</span>
 				{route.id}
 			</div>
+
 			<div className="mb-4 mt-4 flex flex-col gap-2">
 				<span className="text-gray-500">Components contained in the route:</span>
-				<div className="flex gap-2">
+				<div className="flex flex-wrap gap-2">
 					<Tag className="h-max" color={route.hasLoader ? "GREEN" : "RED"}>
 						Loader
 					</Tag>
+					<Tag className="h-max" color={route.hasClientLoader ? "GREEN" : "RED"}>
+						Client Loader
+					</Tag>
+					<Tag className="h-max" color={route.hasClientAction ? "GREEN" : "RED"}>
+						Client Action
+					</Tag>
 					<Tag className="h-max" color={route.hasAction ? "GREEN" : "RED"}>
 						Action
 					</Tag>
@@ -60,17 +70,15 @@ export const RouteInfo = ({ route, className, openNewRoute, onClose }: RouteInfo
 				</div>
 				{hasErrorBoundary ? (
 					<div className="mr-2">
-						{hasParentErrorBoundary
-							? `Covered by parent ErrorBoundary located in: ${route.errorBoundary.errorBoundaryId}`
-							: ""}
+						{hasParentErrorBoundary ? `Covered by parent ErrorBoundary located in: ${errorBoundaryId}` : ""}
 					</div>
 				) : null}
 			</div>
 			{hasWildcard && (
 				<>
 					<p className="mb-2 text-gray-500">Wildcard parameters:</p>
 					<div className={clsx("mb-4 grid w-full grid-cols-2 gap-2", isTreeView && "grid-cols-1")}>
-						{route.url
+						{routeToUse.url
 							.split("/")
 							.filter((p) => p.startsWith(":"))
 							.map((param) => (

src/client/components/RouteInfo.tsx

@@ -1,4 +1,4 @@
-import { type MouseEvent, useState } from "react"
+import { type MouseEvent, useEffect, useState } from "react"
 import { useMatches, useNavigate } from "react-router"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/Accordion.js"
 import { NewRouteForm } from "../components/NewRouteForm.js"
@@ -22,7 +22,7 @@ const RoutesTab = () => {
 	const { detachedWindow } = useDetachedWindowControls()
 	const [activeRoute, setActiveRoute] = useState<ExtendedRoute | null>(null)
 	const [routes] = useState<ExtendedRoute[]>(createExtendedRoutes() as ExtendedRoute[])
-	const [treeRoutes] = useState(createRouteTree(window.__reactRouterManifest?.routes))
+	const [treeRoutes, setTreeRoutes] = useState(createRouteTree(window.__reactRouterManifest?.routes))
 	const isTreeView = routeViewMode === "tree"
 	const openNewRoute = (path: string) => (e?: MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
 		e?.preventDefault()
@@ -32,6 +32,26 @@ const RoutesTab = () => {
 		}
 	}
 
+	useEffect(function fetchAllRoutesOnMount() {
+		import.meta.hot?.send("routes-info")
+		const cb = (event: any) => {
+			const parsed = JSON.parse(event)
+			const data = parsed.data as Record<string, any>[]
+
+			const routeObject: Record<string, any> = {}
+			for (const route of data) {
+				routeObject[route.id] = route
+			}
+
+			routeObject.root = window.__reactRouterManifest?.routes?.root
+
+			setTreeRoutes(createRouteTree(routeObject))
+		}
+		import.meta.hot?.on("routes-info", cb)
+		return () => {
+			import.meta.hot?.off("routes-info", cb)
+		}
+	}, [])
 	return (
 		<div className={clsx("relative h-full w-full ", !isTreeView && "pt-8")}>
 			<RouteToggle />
@@ -40,7 +60,11 @@ const RoutesTab = () => {
 					<Tree
 						translate={{ x: window.innerWidth / 2 - (isTreeView && activeRoute ? 0 : 0), y: 30 }}
 						pathClassFunc={(link) =>
-							activeRoutes.includes((link.target.data.attributes as any).id) ? "stroke-yellow-500" : "stroke-gray-400"
+							activeRoutes.includes((link.target.data.attributes as any).id)
+								? "stroke-yellow-500"
+								: window.__reactRouterManifest?.routes?.[link.target.data.attributes.id]
+									? "stroke-gray-400"
+									: "stroke-gray-400/20"
 						}
 						renderCustomNodeElement={(props) =>
 							RouteNode({

src/client/tabs/RoutesTab.tsx

@@ -89,8 +89,7 @@ export const createExtendedRoutes = () => {
 				...route,
 				// biome-ignore lint/style/noNonNullAssertion: <explanation>
 				url: convertReactRouterPathToUrl(window.__reactRouterManifest!.routes, route),
-				// biome-ignore lint/style/noNonNullAssertion: <explanation>
-				errorBoundary: findParentErrorBoundary(window.__reactRouterManifest!.routes, route),
+				errorBoundary: findParentErrorBoundary(route),
 			}
 		})
 		.filter((route) => isLeafRoute(route as any))

src/client/utils/routing.ts

@@ -21,7 +21,9 @@ export const convertReactRouterPathToUrl = (routes: any, route: Route) => {
 	return output === "" ? "/" : output
 }
 
-export const findParentErrorBoundary = (routes: RouteManifest, route: Route) => {
+export const findParentErrorBoundary = (route: Route) => {
+	// biome-ignore lint/style/noNonNullAssertion: <explanation>
+	const routes = window.__reactRouterManifest?.routes!
 	let currentRoute: Route | null = route
 
 	while (currentRoute) {
@@ -64,7 +66,7 @@ const constructTree = (routes: any, parentId?: string): RawNodeDatum[] => {
 					...route,
 					url,
 				},
-				errorBoundary: findParentErrorBoundary(routes, route),
+				errorBoundary: findParentErrorBoundary(route),
 				children: constructTree(routes, route.id),
 			}
 			nodes.push(node)

src/client/utils/sanitize.ts

@@ -0,0 +1,49 @@
+import { createServer, version as viteVersion } from "vite"
+import { ViteNodeRunner } from "vite-node/client"
+import { ViteNodeServer } from "vite-node/server"
+import { installSourcemapsSupport } from "vite-node/source-map"
+
+// create vite server
+const server = await createServer({
+	server: {
+		preTransformRequests: false,
+		hmr: false,
+		watch: null,
+	},
+
+	optimizeDeps: {
+		noDiscovery: true,
+	},
+	configFile: false,
+	envFile: false,
+	plugins: [],
+})
+// For old Vite, this is need to initialize the plugins.
+if (Number(viteVersion.split(".")[0]) < 6) {
+	await server.pluginContainer.buildStart({})
+}
+
+// create vite-node server
+const node = new ViteNodeServer(server)
+
+// fixes stacktraces in Errors
+installSourcemapsSupport({
+	getSourceMap: (source) => node.getSourceMap(source),
+})
+
+// create vite-node runner
+const runner = new ViteNodeRunner({
+	root: server.config.root,
+	base: server.config.base,
+	// when having the server and runner in a different context,
+	// you will need to handle the communication between them
+	// and pass to this function
+	fetchModule(id) {
+		return node.fetchModule(id)
+	},
+	resolveId(id, importer) {
+		return node.resolveId(id, importer)
+	},
+})
+
+export { runner }