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", 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..11b3870e 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" @@ -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) 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

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