From f949b713074cadfcf7d37b178c0aa469ee7d038d Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 May 2025 10:49:10 +0200 Subject: [PATCH 1/4] enhanced browser logs --- src/client/components/RouteSegmentInfo.tsx | 2 +- src/vite/plugin.tsx | 25 +++++++++++-------- src/vite/utils.ts | 23 ++++++++++++++++- .../react-router-vite/app/routes/_index.tsx | 1 + 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/client/components/RouteSegmentInfo.tsx b/src/client/components/RouteSegmentInfo.tsx index 6ae62454..fab1bc7a 100644 --- a/src/client/components/RouteSegmentInfo.tsx +++ b/src/client/components/RouteSegmentInfo.tsx @@ -142,7 +142,7 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch { const routeId = route.id === "root" ? "root" : i.toString() if (routeId !== settings.hoveredRoute) { diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index 84b00e95..f8777bde 100644 --- a/src/vite/plugin.tsx +++ b/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" @@ -237,13 +237,23 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = ( } 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 +305,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 +329,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 +365,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=${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) diff --git a/src/vite/utils.ts b/src/vite/utils.ts index c965d63b..7ba32ca3 100644 --- a/src/vite/utils.ts +++ b/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(``) + res.end() + return + } if (!req.url?.includes("react-router-devtools-request")) { return next() } diff --git a/test-apps/react-router-vite/app/routes/_index.tsx b/test-apps/react-router-vite/app/routes/_index.tsx index 40eb3529..4f035938 100644 --- a/test-apps/react-router-vite/app/routes/_index.tsx +++ b/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 (

Welcome to Remix

From ffce98931bddbaa36620f9d68e078a9c39e944a5 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 May 2025 11:35:44 +0200 Subject: [PATCH 2/4] fix? --- src/vite/plugin.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index f8777bde..67b01091 100644 --- a/src/vite/plugin.tsx +++ b/src/vite/plugin.tsx @@ -235,6 +235,11 @@ 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 From 01ca2ab1d5d5a63bc6c895e4fff2b136107f6323 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 May 2025 11:56:36 +0200 Subject: [PATCH 3/4] fix --- src/vite/plugin.tsx | 2 +- test-apps/react-router-vite/app/routes/epic-test+.tsx | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 test-apps/react-router-vite/app/routes/epic-test+.tsx diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index 67b01091..11b3870e 100644 --- a/src/vite/plugin.tsx +++ b/src/vite/plugin.tsx @@ -370,7 +370,7 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = ( } const column = line.indexOf("console.") - const logMessage = `'${chalk.magenta("LOG")} ${chalk.blueBright(`http://localhost:${port}/open-source?source=${id.replace(normalizePath(process.cwd()), "")}&line=${lineNumber + 1}&column=${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) diff --git a/test-apps/react-router-vite/app/routes/epic-test+.tsx b/test-apps/react-router-vite/app/routes/epic-test+.tsx new file mode 100644 index 00000000..03159851 --- /dev/null +++ b/test-apps/react-router-vite/app/routes/epic-test+.tsx @@ -0,0 +1,6 @@ +export default function Index() { + console.log("Epic test") + return
+ Epic test +
+} \ No newline at end of file From 1b99513da27bd22c79fa3d1cb1a817a52bd7e106 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 May 2025 12:20:27 +0200 Subject: [PATCH 4/4] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b6b7a0d8..81108f17 100644 --- a/package.json +++ b/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",