feat(dev): add TanStack Devtools source inspector in dev builds (#3218)

Author: adamleithp

apps/code/electron.vite.config.ts

@@ -3,6 +3,7 @@ import { builtinModules, createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
+import { devtools as tanstackDevtools } from "@tanstack/devtools-vite";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "electron-vite";
@@ -198,6 +199,14 @@ export default defineConfig(({ mode }) => {
     renderer: {
       root: __dirname,
       plugins: [
+        // Dev-only "Go to Source" helper: AST transform that stamps every JSX
+        // element with data-tsd-source="<file>:<line>:<col>". Hold the inspector
+        // hotkey (Shift+Alt+Ctrl/Meta) to reveal an element's source location.
+        // Must be first so it sees JSX before other transforms.
+        isDev &&
+          tanstackDevtools({
+            injectSource: { enabled: true },
+          }),
         TanStackRouterVite({
           target: "react",
           autoCodeSplitting: true,

apps/code/package.json

@@ -47,6 +47,7 @@
     "@storybook/addon-a11y": "10.4.1",
     "@storybook/addon-docs": "10.4.1",
     "@storybook/react-vite": "10.4.1",
+    "@tanstack/devtools-vite": "^0.8.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",