feat: add go to source functionality to devtools

Author: AlemTuzlak

.changeset/good-guests-prove.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools': patch
+---
+
+Add go to source functionality to devtools

docs/vite-plugin.md

@@ -91,4 +91,14 @@ const open = (file: string, line: number) => {
   enhancedLogs: {
     enabled: true
   }
-}
+}
+```
+
+## Features
+
+### Go to source
+
+Allows you to open the source location on anything in your browser by clicking on it.
+
+To trigger this behavior you need the Devtools Vite plugin installed and configured and
+the Panel available on the page. Simply click on any element while holding down the Shift and Ctrl (or Meta) keys.

examples/react/basic/package.json

@@ -20,6 +20,7 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
+    "vite-plugin-inspect": "11.3.2",
     "@tanstack/devtools-vite": "0.2.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
@@ -38,4 +39,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/react/basic/vite.config.ts

@@ -1,10 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { devtools } from '@tanstack/devtools-vite'
+import Inspect from 'vite-plugin-inspect'
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     devtools(),
+    Inspect(),
     react({
       // babel: {
       //   plugins: [['babel-plugin-react-compiler', { target: '19' }]],

examples/solid/basic/package.json

@@ -17,6 +17,8 @@
     "solid-js": "^1.9.7"
   },
   "devDependencies": {
+    "vite-plugin-inspect": "11.3.2",
+    "@tanstack/devtools-vite": "0.2.3",
     "vite": "^7.0.6",
     "vite-plugin-solid": "^2.11.6"
   },
@@ -32,4 +34,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/solid/basic/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
-
+import { devtools } from '@tanstack/devtools-vite'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [solid({})],
+  plugins: [devtools(), solid({}),],
 })

packages/devtools-vite/package.json

@@ -51,7 +51,18 @@
     "vite": "^7.0.0"
   },
   "dependencies": {
+    "@babel/core": "^7.28.3",
+    "@babel/generator": "^7.28.3",
+    "@babel/parser": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/traverse": "^7.28.3",
+    "@babel/types": "^7.28.2",
     "@tanstack/devtools-event-bus": "workspace:*",
     "chalk": "^5.6.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0"
   }
 }

packages/devtools-vite/src/babel.ts

@@ -0,0 +1,18 @@
+import { parse } from "@babel/parser"
+import * as t from "@babel/types"
+import generate from "@babel/generator"
+import traverse from "@babel/traverse"
+
+export { parse, t }
+
+export const trav =
+	typeof (traverse as any).default !== "undefined"
+		// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+		? ((traverse as any).default as typeof import("@babel/traverse").default)
+		: traverse
+
+export const gen =
+	typeof (generate as any).default !== "undefined"
+		// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+		? ((generate as any).default as typeof import("@babel/generator").default)
+		: generate

packages/devtools-vite/src/inject-source.ts

@@ -0,0 +1,48 @@
+import { normalizePath } from "vite";
+import { gen, parse, t, trav } from "./babel";
+import type { types as Babel } from "@babel/core"
+import type { ParseResult } from "@babel/parser"
+
+
+const transform = (ast: ParseResult<Babel.File>, file: string) => {
+  let didTransform = false;
+  trav(ast, {
+    JSXOpeningElement(path,) {
+      const loc = path.node.loc;
+      if (!loc) return;
+      const line = loc.start.line;
+      const column = loc.start.column;
+
+      // Inject data-source as a string: "<file>:<line>:<column>"
+      path.node.attributes.push(
+        t.jsxAttribute(
+          t.jsxIdentifier('data-source'),
+          t.stringLiteral(`${file}:${line}:${column}`)
+        )
+      );
+
+      didTransform = true;
+    }
+  })
+
+  return didTransform
+}
+
+
+export function addSourceToJsx(code: string, id: string) {
+  const [filePath] = id.split("?")
+  // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+  const location = filePath?.replace(normalizePath(process.cwd()), '')!
+
+  try {
+    const ast = parse(code, { sourceType: "module", plugins: ["jsx", "typescript"] });
+    const didTransform = transform(ast, location)
+    if (!didTransform) {
+      return { code }
+    }
+    return gen(ast, { sourceMaps: true, filename: id, sourceFileName: filePath })
+  } catch (e) {
+
+    return { code }
+  }
+}

packages/devtools-vite/src/plugin.ts

@@ -3,6 +3,7 @@ import chalk from 'chalk'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { handleDevToolsViteRequest } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
+import { addSourceToJsx } from './inject-source'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
 import type { Plugin } from 'vite'
@@ -40,6 +41,24 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   const bus = new ServerEventBus(args?.eventBusConfig)
 
   return [
+    {
+      enforce: "pre",
+      name: '@tanstack/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)
+      }
+    },
     {
       enforce: 'pre',
       name: '@tanstack/devtools:custom-server',
@@ -87,6 +106,12 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           }),
         )
       },
+      transform(code) {
+        if (code.includes("__TSD_PORT__")) {
+          code = code.replace("__TSD_PORT__", String(port))
+        }
+        return code
+      }
     },
     {
       name: '@tanstack/devtools:better-console-logs',