removed custom behavior and rely on tanstack devtools for open source and uses event client for route info

Author: AlemTuzlak

packages/react-router-devtools/src/client/components/EditorButton.tsx

@@ -2,14 +2,13 @@ import { useStyles } from "../styles/use-styles.js"
 
 interface EditorButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 	onClick: () => void
-	name: string
 }
 
-const EditorButton = ({ name, onClick, ...props }: EditorButtonProps) => {
+const EditorButton = ({ onClick, ...props }: EditorButtonProps) => {
 	const { styles } = useStyles()
 	return (
 		<button onClick={onClick} type="button" className={styles.editorButton} {...props}>
-			Open in {name}
+			Open in Editor
 		</button>
 	)
 }

packages/react-router-devtools/src/client/components/RouteSegmentInfo.tsx

@@ -1,10 +1,9 @@
 import type { UIMatch } from "react-router"
 import { parseCacheControlHeader } from "../../server/parser.js"
-import type { OpenSourceData } from "../../vite/editor.js"
 import { type ServerRouteInfo, defaultServerRouteState } from "../context/rdtReducer.js"
 import { useServerInfo, useSettingsContext } from "../context/useRDTContext.js"
-import { useDevServerConnection } from "../hooks/useDevServerConnection.js"
 import { cx, useStyles } from "../styles/use-styles.js"
+import { openSource } from "../utils/open-source.js"
 import { isLayoutRoute } from "../utils/routing.js"
 import { CacheInfo } from "./CacheInfo.js"
 import { EditorButton } from "./EditorButton.js"
@@ -72,13 +71,12 @@ const ROUTE_COLORS = {
 export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown>; i: number }) => {
 	const { styles } = useStyles()
 	const { server, setServerInfo } = useServerInfo()
-	const { isConnected, sendJsonMessage } = useDevServerConnection()
+	const isDev = typeof import.meta.hot !== "undefined"
 	// biome-ignore lint/suspicious/noExplicitAny: we don't know or care about loader data type
 	const loaderData = getLoaderData(route.loaderData ?? (route.data as any))
 	const serverInfo = server?.routes?.[route.id]
 	const isRoot = route.id === "root"
 	const { setSettings, settings } = useSettingsContext()
-	const editorName = settings.editorName
 	const cacheControl = serverInfo?.lastLoader.responseHeaders
 		? parseCacheControlHeader(new Headers(serverInfo?.lastLoader.responseHeaders))
 		: undefined
@@ -132,15 +130,11 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
 						/>
 					)}
 					<div className={styles.routeSegmentInfo.actionButtons}>
-						{isConnected && import.meta.env.DEV && (
+						{isDev && import.meta.env.DEV && entryRoute?.module && (
 							<EditorButton
-								name={editorName}
 								data-testid={`${route.id}-open-source`}
 								onClick={() => {
-									sendJsonMessage({
-										type: "open-source",
-										data: { routeID: route.id },
-									} satisfies OpenSourceData)
+									openSource(`${entryRoute.module}`)
 								}}
 							/>
 						)}

packages/react-router-devtools/src/client/hooks/useDevServerConnection.ts

@@ -1,9 +1,7 @@
+import { openSource } from "../utils/open-source.js"
 import { useAttachDocumentListener } from "./useAttachListener.js"
-import { useDevServerConnection } from "./useDevServerConnection.js"
 
 const useOpenElementSource = () => {
-	const { sendJsonMessage } = useDevServerConnection()
-
 	// biome-ignore lint/suspicious/noExplicitAny: this should be fixed
 	useAttachDocumentListener("contextmenu", (e: any) => {
 		if (!e.shiftKey || !e) {
@@ -17,10 +15,7 @@ const useOpenElementSource = () => {
 
 		if (rdtSource) {
 			const [source, line, column] = rdtSource.split(":")
-			return sendJsonMessage({
-				type: "open-source",
-				data: { source, line, column },
-			})
+			return openSource(source, line, column)
 		}
 		for (const key in e.target) {
 			if (key.startsWith("__reactFiber")) {
@@ -30,12 +25,10 @@ const useOpenElementSource = () => {
 				const originalSource = fiberNode?._debugSource
 				const source = fiberNode?._debugOwner?._debugSource ?? fiberNode?._debugSource
 				const line = source?.fileName?.startsWith("/") ? originalSource?.lineNumber : source?.lineNumber
+
 				const fileName = source?.fileName?.startsWith("/") ? originalSource?.fileName : source?.fileName
 				if (fileName && line) {
-					return sendJsonMessage({
-						type: "open-source",
-						data: { source: fileName, line, column: 0 },
-					})
+					return openSource(fileName, line)
 				}
 			}
 		}

packages/react-router-devtools/src/client/hooks/useOnWindowResize.ts

@@ -1,8 +1,6 @@
 import * as Test from "@testing-library/react"
 import * as testSuite from "../context/useRDTContext"
 
-import * as devHook from "../hooks/useDevServerConnection.js"
-
 describe("ErrorsTab", () => {
 	it("should show no errors title if there are no errors", async ({ renderDevTools }) => {
 		const { container } = renderDevTools({
@@ -61,23 +59,16 @@ describe("ErrorsTab", () => {
 			],
 			setHtmlErrors: vi.fn(),
 		})
-		const sendOpenSource = vi.fn()
-		vi.spyOn(devHook, "useDevServerConnection").mockReturnValue({
-			sendJsonMessage: sendOpenSource,
-			connectionStatus: "Open",
-			isConnected: true,
-		})
+		const mockOpenSource = vi.fn()
+		vi.mock("../utils/open-source", () => ({
+			openSource: mockOpenSource,
+		}))
 		const { container } = renderDevTools({
 			activeTab: "errors",
 		})
 		const parentElement = container.getByText("./src/client/context/useRDTContext.ts")
 		Test.fireEvent.click(parentElement)
-		expect(sendOpenSource).toHaveBeenCalledWith({
-			data: {
-				source: "./src/client/context/useRDTContext.ts",
-			},
-			type: "open-source",
-		})
+		expect(mockOpenSource).toHaveBeenCalledWith("./src/client/context/useRDTContext.ts")
 	})
 
 	it("should send the open source request when clicked on the child element text", async ({ renderDevTools }) => {
@@ -96,23 +87,16 @@ describe("ErrorsTab", () => {
 			],
 			setHtmlErrors: vi.fn(),
 		})
-		const sendOpenSource = vi.fn()
-		vi.spyOn(devHook, "useDevServerConnection").mockReturnValue({
-			sendJsonMessage: sendOpenSource,
-			connectionStatus: "Open",
-			isConnected: true,
-		})
+		const mockOpenSource = vi.fn()
+		vi.mock("../utils/open-source", () => ({
+			openSource: mockOpenSource,
+		}))
 		const { container } = renderDevTools({
 			activeTab: "errors",
 		})
 		const childEl = container.getByText("./src/client/tabs/ErrorsTab.test.tsx")
 		Test.fireEvent.click(childEl)
-		expect(sendOpenSource).toHaveBeenCalledWith({
-			data: {
-				source: "./src/client/tabs/ErrorsTab.test.tsx",
-			},
-			type: "open-source",
-		})
+		expect(mockOpenSource).toHaveBeenCalledWith("./src/client/tabs/ErrorsTab.test.tsx")
 	})
 
 	it("should show a hydration mismatch error if the server has a mismatch", async ({ renderDevTools }) => {

packages/react-router-devtools/src/client/hooks/useOpenElementSource.ts

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react"
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
 import { Icon } from "../components/icon/Icon.js"
 import { useHtmlErrors } from "../context/useRDTContext.js"
-import { useDevServerConnection } from "../hooks/useDevServerConnection.js"
 import { useStyles } from "../styles/use-styles.js"
+import { openSource } from "../utils/open-source.js"
 // @ts-expect-error
 const DiffViewer: typeof ReactDiffViewer.default = ReactDiffViewer.default
 	? // @ts-expect-error
@@ -16,7 +16,6 @@ const DiffViewer: typeof ReactDiffViewer.default = ReactDiffViewer.default
 const ErrorsTab = () => {
 	const { styles } = useStyles()
 	const { htmlErrors } = useHtmlErrors()
-	const { sendJsonMessage } = useDevServerConnection()
 	const [SSRHtml, setSSRHtml] = useState("")
 	const [CSRHtml, setCSRHtml] = useState("")
 	const [hasHydrationMismatch, setHasHydrationMismatch] = useState(false)
@@ -63,12 +62,7 @@ const ErrorsTab = () => {
 								The parent element is located inside of the
 								{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 								<div
-									onClick={() =>
-										sendJsonMessage({
-											type: "open-source",
-											data: { source: error.parent.file },
-										})
-									}
+									onClick={() => error.parent.file && openSource(error.parent.file)}
 									className={styles.errorsTab.errorFile}
 								>
 									{error.parent.file}
@@ -79,12 +73,7 @@ const ErrorsTab = () => {
 								The child element is located inside of the
 								{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 								<div
-									onClick={() =>
-										sendJsonMessage({
-											type: "open-source",
-											data: { source: error.child.file },
-										})
-									}
+									onClick={() => error.child.file && openSource(error.child.file)}
 									className={styles.errorsTab.errorFile}
 								>
 									{error.child.file}

packages/react-router-devtools/src/client/tabs/ErrorsTab.test.tsx

@@ -126,9 +126,12 @@ describe("PageTab", () => {
 	it("should attempt to open the route in the editor when the open in editor button is clicked", async ({
 		renderDevTools,
 	}) => {
-		const sendOpenSource = vi.fn()
+		const mockOpenSource = vi.fn()
+		vi.mock("../utils/open-source", () => ({
+			openSource: mockOpenSource,
+		}))
 		vi.spyOn(devHook, "useDevServerConnection").mockReturnValue({
-			sendJsonMessage: sendOpenSource,
+			sendJsonMessage: vi.fn(),
 			connectionStatus: "Open",
 			isConnected: true,
 		})
@@ -138,12 +141,7 @@ describe("PageTab", () => {
 
 		Test.fireEvent.click(openInEditor)
 
-		expect(sendOpenSource).toHaveBeenCalledWith({
-			data: {
-				routeID: "root",
-			},
-			type: "open-source",
-		})
+		expect(mockOpenSource).toHaveBeenCalled()
 	})
 
 	it("should show the route cache information if recieved from the server and last loader timestamp is available, also should display it as private if it's private", async ({