implement go to source back into react-router-devtools (#216)

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.7",
+	"version": "5.1.0",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

src/client/hooks/useOpenElementSource.ts

@@ -12,10 +12,10 @@ const useOpenElementSource = () => {
 		e.stopPropagation()
 		e.preventDefault()
 		const target = e.target as HTMLElement
-		const rdtSource = target?.getAttribute("data-source")
+		const rdtSource = target?.getAttribute("data-rrdt-source")
 
 		if (rdtSource) {
-			const [source, line, column] = rdtSource.split(":::")
+			const [source, line, column] = rdtSource.split(":")
 			return sendJsonMessage({
 				type: "open-source",
 				data: { source, line, column },

src/client/hooks/useReactTreeListeners.ts

@@ -6,18 +6,6 @@ import { useHtmlErrors } from "../context/useRDTContext.js"
 
 export const ROUTE_CLASS = "outlet-route"
 
-const isSourceElement = (fiberNode: any) => {
-	return (
-		fiberNode?.elementType &&
-		fiberNode?.stateNode &&
-		fiberNode?._debugSource &&
-		!fiberNode?.stateNode?.getAttribute?.("data-source")
-	)
-}
-
-const isJsxFile = (fiberNode: Fiber<any>) =>
-	fiberNode?._debugSource?.fileName?.includes("tsx") || fiberNode?._debugSource?.fileName?.includes("jsx")
-
 export function useReactTreeListeners() {
 	const invalidHtmlCollection = useRef<HTMLError[]>([])
 	const { setHtmlErrors } = useHtmlErrors()
@@ -155,18 +143,6 @@ export function useReactTreeListeners() {
 
 		onCommitFiberRoot((root) =>
 			traverseFiber(root.current, (fiberNode) => {
-				if (isSourceElement(fiberNode) && typeof import.meta.hot !== "undefined") {
-					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
-
-					fiberNode.stateNode?.setAttribute?.(
-						"data-source",
-						`${fileName}:::${line}` //
-					)
-				}
-
 				if (fiberNode?.stateNode && fiberNode?.elementType === "form") {
 					findIncorrectHtml(fiberNode.child, fiberNode, "form")
 				}

src/client/tabs/PageTab.tsx

@@ -1,12 +1,10 @@
 import clsx from "clsx"
-import { useMemo } from "react"
 import { useMatches, useRevalidator } from "react-router"
 
 import { RouteSegmentInfo } from "../components/RouteSegmentInfo.js"
 
 const PageTab = () => {
 	const routes = useMatches()
-	const reversed = useMemo(() => routes.reverse(), [routes])
 	const { revalidate, state } = useRevalidator()
 
 	return (
@@ -32,7 +30,7 @@ const PageTab = () => {
 				<ol
 					className={clsx("relative border-l border-gray-700", state === "loading" && "pointer-events-none opacity-50")}
 				>
-					{reversed.map((route, i) => (
+					{routes.map((route, i) => (
 						<RouteSegmentInfo route={route} i={i} key={route.id} />
 					))}
 				</ol>

src/vite/editor.ts

@@ -17,14 +17,16 @@ export type OpenSourceData = {
 
 export type EditorConfig = {
 	name: string
-	open(path: string, lineNumber: string | undefined): void
+	open(path: string, lineNumber: string | undefined, columnNumber: string | undefined): void
 }
 
 export const DEFAULT_EDITOR_CONFIG: EditorConfig = {
 	name: "VSCode",
-	open: async (path, lineNumber) => {
+	open: async (path, lineNumber, columnNumber) => {
 		const { exec } = await import("node:child_process")
-		exec(`code -g "${normalizePath(path).replaceAll("$", "\\$")}${lineNumber ? `:${lineNumber}` : ""}"`)
+		exec(
+			`code -g "${normalizePath(path).replaceAll("$", "\\$")}${lineNumber ? `:${lineNumber}` : ""}${columnNumber ? `:${columnNumber}` : ""}"`
+		)
 	},
 }
 
@@ -35,14 +37,16 @@ export const handleOpenSource = async ({
 }: {
 	data: OpenSourceData
 	appDir: string
-	openInEditor: (path: string, lineNum: string | undefined) => Promise<void>
+	openInEditor: (path: string, lineNum: string | undefined, columnNum: string | undefined) => Promise<void>
 }) => {
-	const { source, line, routeID } = data.data
+	const { source, line, column, routeID } = data.data
+
 	const lineNum = line ? `${line}` : undefined
+	const columnNum = column ? `${column}` : undefined
 	const fs = await import("node:fs")
 	const path = await import("node:path")
 	if (source) {
-		return openInEditor(source, lineNum)
+		return openInEditor(source, lineNum, columnNum)
 	}
 
 	if (routeID) {
@@ -64,7 +68,7 @@ export const handleOpenSource = async ({
 			if (!fs.existsSync(appDir)) return
 			const filesInReactRouterPath = fs.readdirSync(appDir)
 			const rootFile = findFileByExtension("root", filesInReactRouterPath)
-			rootFile && openInEditor(path.join(appDir, rootFile), lineNum)
+			rootFile && openInEditor(path.join(appDir, rootFile), lineNum, columnNum)
 			return
 		}
 
@@ -74,9 +78,9 @@ export const handleOpenSource = async ({
 		if (type === "directory") {
 			const filesInFolderRoute = fs.readdirSync(validPath)
 			const routeFile = findFileByExtension("route", filesInFolderRoute)
-			routeFile && openInEditor(path.join(appDir, routeID, routeFile), lineNum)
+			routeFile && openInEditor(path.join(appDir, routeID, routeFile), lineNum, columnNum)
 			return
 		}
-		return openInEditor(validPath, lineNum)
+		return openInEditor(validPath, lineNum, columnNum)
 	}
 }

src/vite/file.ts

@@ -5,7 +5,7 @@ import { GENERATORS, type Generator } from "./generators"
 export type WriteFileData = {
 	type: "write-file"
 	path: string
-	openInEditor: (path: string, lineNum: string | undefined) => void
+	openInEditor: (path: string, lineNum: string | undefined, columnNum: string | undefined) => void
 	options: {
 		loader: boolean
 		clientLoader: boolean
@@ -66,5 +66,5 @@ export const handleWriteFile = async ({ path, options, openInEditor, appDir }: W
 		.filter(Boolean)
 		.join("\n\n")
 	await writeFile(outputFile, fileContent)
-	openInEditor(outputFile, undefined)
+	openInEditor(outputFile, undefined, undefined)
 }

src/vite/plugin.tsx

@@ -12,6 +12,7 @@ import { handleDevToolsViteRequest, processPlugins } from "./utils.js"
 import { augmentDataFetchingFunctions } from "./utils/data-functions-augment.js"
 import { injectRdtClient } from "./utils/inject-client.js"
 import { injectContext } from "./utils/inject-context.js"
+import { addSourceToJsx } from "./utils/inject-source.js"
 // this should mirror the types in server/config.ts as well as they are bundled separately.
 declare global {
 	interface Window {
@@ -98,6 +99,19 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 		process.rdt_config = serverConfig
 	}
 	return [
+		{
+			enforce: "pre",
+			name: "react-router-devtools:inject-source",
+			apply(config) {
+				return config.mode === "development"
+			},
+			transform(code, id) {
+				if (id.includes("node_modules") || id.includes("?raw") || id.includes("dist") || id.includes("build"))
+					return code
+
+				return addSourceToJsx(code, id)
+			},
+		},
 		{
 			name: "react-router-devtools",
 			apply(config) {
@@ -259,11 +273,15 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 				})
 				const channel = server.hot
 				const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG
-				const openInEditor = async (path: string | undefined, lineNum: string | undefined) => {
+				const openInEditor = async (
+					path: string | undefined,
+					lineNum: string | undefined,
+					columnNum: string | undefined
+				) => {
 					if (!path) {
 						return
 					}
-					editor.open(path, lineNum)
+					editor.open(path, lineNum, columnNum)
 				}
 				server.middlewares.use((req, res, next) =>
 					handleDevToolsViteRequest(req, res, next, (parsedData) => {
@@ -343,7 +361,19 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 						)
 					})
 
-					server.hot.on("open-source", (data: OpenSourceData) => handleOpenSource({ data, openInEditor, appDir }))
+					server.hot.on("open-source", (data: OpenSourceData) =>
+						handleOpenSource({
+							data: {
+								...data,
+								data: {
+									...data.data,
+									source: data.data.source ? normalizePath(`${process.cwd()}/${data.data.source}`) : undefined,
+								},
+							},
+							openInEditor,
+							appDir,
+						})
+					)
 					server.hot.on("add-route", (data: WriteFileData) => handleWriteFile({ ...data, openInEditor, appDir }))
 				}
 			},