enhanced browser logs (#205)

* enhanced browser logs

* fix?

* fix

* version bump

Author: AlemTuzlak

package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "5.0.1",
+	"version": "5.0.2",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

src/client/components/RouteSegmentInfo.tsx

@@ -142,7 +142,7 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
 							<button
 								type="button"
 								data-testid={`${route.id}-show-route-boundaries`}
-								className="rounded border border-green-600 rounded border border-[#1F9CF0] px-2.5 py-0.5 text-sm font-medium text-green-600"
+								className="border-green-600 rounded border px-2.5 py-0.5 text-sm font-medium text-green-600"
 								onClick={() => {
 									const routeId = route.id === "root" ? "root" : i.toString()
 									if (routeId !== settings.hoveredRoute) {

src/vite/plugin.tsx

@@ -62,7 +62,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 	const includeClient = args?.includeInProd?.client ?? false
 	const includeServer = args?.includeInProd?.server ?? false
 	const includeDevtools = args?.includeInProd?.devTools ?? false
-
+	let port = 5173
 	let routes: Route[] = []
 	let flatRoutes: Route[] = []
 	const appDir = args?.appDir || "./app"
@@ -235,15 +235,30 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 				if (server.config.appType !== "custom") {
 					return
 				}
+				if (server.config.server.port) {
+					process.rdt_port = server.config.server.port ?? 5173
+					port = process.rdt_port
+				}
+
 				server.httpServer?.on("listening", () => {
 					process.rdt_port = server.config.server.port ?? 5173
+					port = process.rdt_port
 				})
 				//@ts-ignore - vite 5/6 compat
 				const channel = server.hot.channels.find((channel) => channel.name === "ws") ?? server.environments?.client.hot
-
+				const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG
+				const openInEditor = async (path: string | undefined, lineNum: string | undefined) => {
+					if (!path) {
+						return
+					}
+					editor.open(path, lineNum)
+				}
 				server.middlewares.use((req, res, next) =>
 					handleDevToolsViteRequest(req, res, next, (parsedData) => {
 						const { type, data, routine } = parsedData
+						if (routine === "open-source") {
+							return handleOpenSource({ data: { type: data.type, data }, openInEditor, appDir })
+						}
 						if (routine === "request-event") {
 							unusedEvents.set(parsedData.id + parsedData.startTime, parsedData)
 							for (const client of server.hot.channels) {
@@ -295,7 +310,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 				})
 
 				if (!server.config.isProduction) {
-					channel?.on("remove-event", (data, client) => {
+					channel?.on("remove-event", (data) => {
 						const parsedData = data
 						const { id, startTime } = parsedData
 
@@ -319,13 +334,6 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 							})
 						)
 					})
-					const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG
-					const openInEditor = async (path: string | undefined, lineNum: string | undefined) => {
-						if (!path) {
-							return
-						}
-						editor.open(path, lineNum)
-					}
 
 					server.hot.on("open-source", (data: OpenSourceData) => handleOpenSource({ data, openInEditor, appDir }))
 					server.hot.on("add-route", (data: WriteFileData) => handleWriteFile({ ...data, openInEditor }))
@@ -362,7 +370,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 							}
 
 							const column = line.indexOf("console.")
-							const logMessage = `"${chalk.magenta("LOG")} ${chalk.blueBright(`${id.replace(normalizePath(process.cwd()), "")}:${lineNumber + 1}:${column + 1}`)}\\n → "`
+							const logMessage = `'${chalk.magenta("LOG")} ${chalk.blueBright(`http://localhost:${port}/open-source?source=${encodeURIComponent(id.replace(normalizePath(process.cwd()), ""))}&line=${lineNumber + 1}&column=${column + 1}`)}\\n → '`
 							if (line.includes("console.log(")) {
 								const newLine = `console.log(${logMessage},`
 								return line.replace("console.log(", newLine)

src/vite/utils.ts

@@ -1,5 +1,5 @@
 import type { IncomingMessage, ServerResponse } from "node:http"
-import type { Connect } from "vite"
+import { type Connect, normalizePath } from "vite"
 
 export async function processPlugins(pluginDirectoryPath: string) {
 	const fs = await import("node:fs")
@@ -28,6 +28,27 @@ export const handleDevToolsViteRequest = (
 	next: Connect.NextFunction,
 	cb: (data: any) => void
 ) => {
+	if (req.url?.includes("open-source")) {
+		const searchParams = new URLSearchParams(req.url.split("?")[1])
+		const source = searchParams.get("source")
+		const line = searchParams.get("line")
+		const column = searchParams.get("column")
+		cb({
+			type: "open-source",
+			routine: "open-source",
+			data: {
+				source: source ? normalizePath(`${process.cwd()}/${source}`) : undefined,
+				line,
+				column,
+			},
+		})
+		res.setHeader("Content-Type", "text/html")
+		res.write(`<script>
+    window.close();
+</script>`)
+		res.end()
+		return
+	}
 	if (!req.url?.includes("react-router-devtools-request")) {
 		return next()
 	}

test-apps/react-router-vite/app/routes/_index.tsx

@@ -77,6 +77,7 @@ export default function Index() {
   data.append("person.name", "test1");
   data.append("person.surname", "test1");
   data.append("obj", JSON.stringify({ test: "test" }));
+  console.log(data);
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix</h1>

test-apps/react-router-vite/app/routes/epic-test+.tsx

@@ -0,0 +1,6 @@
+export default function Index() {
+	console.log("Epic test")
+	return <div>
+		Epic test
+	</div>
+}