@tanstack/devtools-vite 0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TanStack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @tanstack/devtools-vite
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
+
+## General Usage
+
+The `@tanstack/devtools-vite` package is designed to work with Vite projects.
+Plug it into your plugins array:
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    // Important to include it first!
+    devtools(),
+    ... //rest of the plugins
+  ],
+}
+```

package/dist/esm/editor.d.ts

@@ -0,0 +1,26 @@
+type OpenSourceData = {
+    type: 'open-source';
+    data: {
+        /** The source file to open */
+        source?: string;
+        /** The react router route ID, usually discovered via the hook useMatches */
+        routeID?: string;
+        /** The line number in the source file */
+        line?: number;
+        /** The column number in the source file */
+        column?: number;
+    };
+};
+export type EditorConfig = {
+    /** The name of the editor, used for debugging purposes */
+    name: string;
+    /** Callback to open a file in the editor */
+    open: (path: string, lineNumber: string | undefined, columnNumber?: string) => Promise<void>;
+};
+export declare const DEFAULT_EDITOR_CONFIG: EditorConfig;
+export declare const handleOpenSource: ({ data, openInEditor, appDir, }: {
+    data: OpenSourceData;
+    appDir: string;
+    openInEditor: EditorConfig["open"];
+}) => Promise<void>;
+export {};

package/dist/esm/editor.js

@@ -0,0 +1,58 @@
+import { normalizePath } from "vite";
+import { checkPath } from "./utils.js";
+const DEFAULT_EDITOR_CONFIG = {
+  name: "VSCode",
+  open: async (path, lineNumber, columnNumber) => {
+    const { exec } = await import("node:child_process");
+    exec(
+      `code -g "${normalizePath(path).replaceAll("$", "\\$")}${lineNumber ? `:${lineNumber}` : ""}${columnNumber ? `:${columnNumber}` : ""}"`
+    );
+  }
+};
+const handleOpenSource = async ({
+  data,
+  openInEditor,
+  appDir
+}) => {
+  const { source, line, routeID } = data.data;
+  const lineNum = line ? `${line}` : void 0;
+  const fs = await import("node:fs");
+  const path = await import("node:path");
+  if (source) {
+    return openInEditor(source, lineNum);
+  }
+  if (routeID) {
+    const routePath = path.join(appDir, routeID);
+    const checkedPath = await checkPath(routePath);
+    if (!checkedPath) return;
+    const { type, validPath } = checkedPath;
+    const reactExtensions = ["tsx", "jsx"];
+    const allExtensions = ["ts", "js", ...reactExtensions];
+    const isRoot = routeID === "root";
+    const findFileByExtension = (prefix, filePaths) => {
+      const file = filePaths.find(
+        (file2) => allExtensions.some((ext) => file2 === `${prefix}.${ext}`)
+      );
+      return file;
+    };
+    if (isRoot) {
+      if (!fs.existsSync(appDir)) return;
+      const filesInReactRouterPath = fs.readdirSync(appDir);
+      const rootFile = findFileByExtension("root", filesInReactRouterPath);
+      rootFile && openInEditor(path.join(appDir, rootFile), lineNum);
+      return;
+    }
+    if (type === "directory") {
+      const filesInFolderRoute = fs.readdirSync(validPath);
+      const routeFile = findFileByExtension("route", filesInFolderRoute);
+      routeFile && openInEditor(path.join(appDir, routeID, routeFile), lineNum);
+      return;
+    }
+    return openInEditor(validPath, lineNum);
+  }
+};
+export {
+  DEFAULT_EDITOR_CONFIG,
+  handleOpenSource
+};
+//# sourceMappingURL=editor.js.map

package/dist/esm/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","sources":["../../src/editor.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport { checkPath } from './utils.js'\n\ntype OpenSourceData = {\n  type: 'open-source'\n  data: {\n    /** The source file to open */\n    source?: string\n    /** The react router route ID, usually discovered via the hook useMatches */\n    routeID?: string\n    /** The line number in the source file */\n    line?: number\n    /** The column number in the source file */\n    column?: number\n  }\n}\n\nexport type EditorConfig = {\n  /** The name of the editor, used for debugging purposes */\n  name: string\n  /** Callback to open a file in the editor */\n  open: (\n    path: string,\n    lineNumber: string | undefined,\n    columnNumber?: string,\n  ) => Promise<void>\n}\n\nexport const DEFAULT_EDITOR_CONFIG: EditorConfig = {\n  name: 'VSCode',\n  open: async (path, lineNumber, columnNumber) => {\n    const { exec } = await import('node:child_process')\n    exec(\n      `code -g \"${normalizePath(path).replaceAll('$', '\\\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}\"`,\n    )\n  },\n}\n\nexport const handleOpenSource = async ({\n  data,\n  openInEditor,\n  appDir,\n}: {\n  data: OpenSourceData\n  appDir: string\n  openInEditor: EditorConfig['open']\n}) => {\n  const { source, line, routeID } = data.data\n  const lineNum = line ? `${line}` : undefined\n  const fs = await import('node:fs')\n  const path = await import('node:path')\n  if (source) {\n    return openInEditor(source, lineNum)\n  }\n\n  if (routeID) {\n    const routePath = path.join(appDir, routeID)\n    const checkedPath = await checkPath(routePath)\n\n    if (!checkedPath) return\n    const { type, validPath } = checkedPath\n\n    const reactExtensions = ['tsx', 'jsx']\n    const allExtensions = ['ts', 'js', ...reactExtensions]\n    const isRoot = routeID === 'root'\n    const findFileByExtension = (prefix: string, filePaths: Array<string>) => {\n      const file = filePaths.find((file) =>\n        allExtensions.some((ext) => file === `${prefix}.${ext}`),\n      )\n      return file\n    }\n\n    if (isRoot) {\n      if (!fs.existsSync(appDir)) return\n      const filesInReactRouterPath = fs.readdirSync(appDir)\n      const rootFile = findFileByExtension('root', filesInReactRouterPath)\n      rootFile && openInEditor(path.join(appDir, rootFile), lineNum)\n      return\n    }\n\n    // If its not the root route, then we find the file or folder in the routes folder\n    // We know that the route ID is in the form of \"routes/contact\" or \"routes/user.profile\" when is not root\n    // so the ID already contains the \"routes\" segment, so we just need to find the file or folder in the routes folder\n    if (type === 'directory') {\n      const filesInFolderRoute = fs.readdirSync(validPath)\n      const routeFile = findFileByExtension('route', filesInFolderRoute)\n      routeFile && openInEditor(path.join(appDir, routeID, routeFile), lineNum)\n      return\n    }\n    return openInEditor(validPath, lineNum)\n  }\n}\n"],"names":["file"],"mappings":";;AA4BO,MAAM,wBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,OAAO,MAAM,YAAY,iBAAiB;AAC9C,UAAM,EAAE,KAAA,IAAS,MAAM,OAAO,oBAAoB;AAClD;AAAA,MACE,YAAY,cAAc,IAAI,EAAE,WAAW,KAAK,KAAK,CAAC,GAAG,aAAa,IAAI,UAAU,KAAK,EAAE,GAAG,eAAe,IAAI,YAAY,KAAK,EAAE;AAAA,IAAA;AAAA,EAExI;AACF;AAEO,MAAM,mBAAmB,OAAO;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,EAAE,QAAQ,MAAM,QAAA,IAAY,KAAK;AACvC,QAAM,UAAU,OAAO,GAAG,IAAI,KAAK;AACnC,QAAM,KAAK,MAAM,OAAO,SAAS;AACjC,QAAM,OAAO,MAAM,OAAO,WAAW;AACrC,MAAI,QAAQ;AACV,WAAO,aAAa,QAAQ,OAAO;AAAA,EACrC;AAEA,MAAI,SAAS;AACX,UAAM,YAAY,KAAK,KAAK,QAAQ,OAAO;AAC3C,UAAM,cAAc,MAAM,UAAU,SAAS;AAE7C,QAAI,CAAC,YAAa;AAClB,UAAM,EAAE,MAAM,UAAA,IAAc;AAE5B,UAAM,kBAAkB,CAAC,OAAO,KAAK;AACrC,UAAM,gBAAgB,CAAC,MAAM,MAAM,GAAG,eAAe;AACrD,UAAM,SAAS,YAAY;AAC3B,UAAM,sBAAsB,CAAC,QAAgB,cAA6B;AACxE,YAAM,OAAO,UAAU;AAAA,QAAK,CAACA,UAC3B,cAAc,KAAK,CAAC,QAAQA,UAAS,GAAG,MAAM,IAAI,GAAG,EAAE;AAAA,MAAA;AAEzD,aAAO;AAAA,IACT;AAEA,QAAI,QAAQ;AACV,UAAI,CAAC,GAAG,WAAW,MAAM,EAAG;AAC5B,YAAM,yBAAyB,GAAG,YAAY,MAAM;AACpD,YAAM,WAAW,oBAAoB,QAAQ,sBAAsB;AACnE,kBAAY,aAAa,KAAK,KAAK,QAAQ,QAAQ,GAAG,OAAO;AAC7D;AAAA,IACF;AAKA,QAAI,SAAS,aAAa;AACxB,YAAM,qBAAqB,GAAG,YAAY,SAAS;AACnD,YAAM,YAAY,oBAAoB,SAAS,kBAAkB;AACjE,mBAAa,aAAa,KAAK,KAAK,QAAQ,SAAS,SAAS,GAAG,OAAO;AACxE;AAAA,IACF;AACA,WAAO,aAAa,WAAW,OAAO;AAAA,EACxC;AACF;"}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { devtools, defineDevtoolsConfig } from './plugin.js';
+export type { TanStackDevtoolsViteConfig } from './plugin.js';

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+import { defineDevtoolsConfig, devtools } from "./plugin.js";
+export {
+  defineDevtoolsConfig,
+  devtools
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/plugin.d.ts

@@ -0,0 +1,27 @@
+import { EditorConfig } from './editor.js';
+import { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server';
+import { Plugin } from 'vite';
+export type TanStackDevtoolsViteConfig = {
+    /** The directory where the react router app is located. Defaults to the "./src" relative to where vite.config is being defined. */
+    appDir?: string;
+    /**
+     * Configuration for the editor integration. Defaults to opening in VS code
+     */
+    editor?: EditorConfig;
+    /**
+     * The configuration options for the server event bus
+     */
+    eventBusConfig?: ServerEventBusConfig;
+    /**
+     * Configuration for enhanced logging.
+     */
+    enhancedLogs?: {
+        /**
+         * Whether to enable enhanced logging.
+         * @default true
+         */
+        enabled: boolean;
+    };
+};
+export declare const defineDevtoolsConfig: (config: TanStackDevtoolsViteConfig) => TanStackDevtoolsViteConfig;
+export declare const devtools: (args?: TanStackDevtoolsViteConfig) => Array<Plugin>;

package/dist/esm/plugin.js

@@ -0,0 +1,96 @@
+import { normalizePath } from "vite";
+import chalk from "chalk";
+import { ServerEventBus } from "@tanstack/devtools-event-bus/server";
+import { handleDevToolsViteRequest } from "./utils.js";
+import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from "./editor.js";
+const defineDevtoolsConfig = (config) => config;
+const devtools = (args) => {
+  let port = 5173;
+  const appDir = args?.appDir || "./src";
+  const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true };
+  const bus = new ServerEventBus(args?.eventBusConfig);
+  return [
+    {
+      enforce: "pre",
+      name: "@tanstack/devtools:custom-server",
+      apply(config) {
+        return config.mode === "development";
+      },
+      configureServer(server) {
+        bus.start();
+        server.middlewares.use((req, _res, next) => {
+          if (req.socket.localPort && req.socket.localPort !== port) {
+            port = req.socket.localPort;
+          }
+          next();
+        });
+        if (server.config.server.port) {
+          port = server.config.server.port;
+        }
+        server.httpServer?.on("listening", () => {
+          port = server.config.server.port;
+        });
+        const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG;
+        const openInEditor = async (path, lineNum) => {
+          if (!path) {
+            return;
+          }
+          await editor.open(path, lineNum);
+        };
+        server.middlewares.use(
+          (req, res, next) => handleDevToolsViteRequest(req, res, next, (parsedData) => {
+            const { data, routine } = parsedData;
+            if (routine === "open-source") {
+              return handleOpenSource({
+                data: { type: data.type, data },
+                openInEditor,
+                appDir
+              });
+            }
+            return;
+          })
+        );
+      }
+    },
+    {
+      name: "@tanstack/devtools:better-console-logs",
+      enforce: "pre",
+      apply(config) {
+        return config.mode === "development" && enhancedLogsConfig.enabled;
+      },
+      transform(code, id) {
+        if (id.includes("node_modules") || id.includes("?raw") || id.includes("dist") || id.includes("build"))
+          return code;
+        if (!code.includes("console.")) {
+          return code;
+        }
+        const lines = code.split("\n");
+        return lines.map((line, lineNumber) => {
+          if (line.trim().startsWith("//") || line.trim().startsWith("/**") || line.trim().startsWith("*")) {
+            return line;
+          }
+          if (line.replaceAll(" ", "").includes("=>console.") || line.includes("return console.")) {
+            return line;
+          }
+          const column = line.indexOf("console.");
+          const location = `${id.replace(normalizePath(process.cwd()), "")}:${lineNumber + 1}:${column + 1}`;
+          const logMessage = `'${chalk.magenta("LOG")} ${chalk.blueBright(`${location} - http://localhost:${port}/__tsd/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);
+          }
+          if (line.includes("console.error(")) {
+            const newLine = `console.error(${logMessage},`;
+            return line.replace("console.error(", newLine);
+          }
+          return line;
+        }).join("\n");
+      }
+    }
+  ];
+};
+export {
+  defineDevtoolsConfig,
+  devtools
+};
+//# sourceMappingURL=plugin.js.map

package/dist/esm/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../src/plugin.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport chalk from 'chalk'\nimport { ServerEventBus } from '@tanstack/devtools-event-bus/server'\nimport { handleDevToolsViteRequest } from './utils'\nimport { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'\nimport type { EditorConfig } from './editor'\nimport type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'\nimport type { Plugin } from 'vite'\n\nexport type TanStackDevtoolsViteConfig = {\n  /** The directory where the react router app is located. Defaults to the \"./src\" relative to where vite.config is being defined. */\n  appDir?: string\n  /**\n   * Configuration for the editor integration. Defaults to opening in VS code\n   */\n  editor?: EditorConfig\n  /**\n   * The configuration options for the server event bus\n   */\n  eventBusConfig?: ServerEventBusConfig\n  /**\n   * Configuration for enhanced logging.\n   */\n  enhancedLogs?: {\n    /**\n     * Whether to enable enhanced logging.\n     * @default true\n     */\n    enabled: boolean\n  }\n}\n\nexport const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>\n  config\n\nexport const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {\n  let port = 5173\n  const appDir = args?.appDir || './src'\n  const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }\n  const bus = new ServerEventBus(args?.eventBusConfig)\n\n  return [\n    {\n      enforce: 'pre',\n      name: '@tanstack/devtools:custom-server',\n      apply(config) {\n        // Custom server is only needed in development for piping events to the client\n        return config.mode === 'development'\n      },\n      configureServer(server) {\n        bus.start()\n        server.middlewares.use((req, _res, next) => {\n          if (req.socket.localPort && req.socket.localPort !== port) {\n            port = req.socket.localPort\n          }\n          next()\n        })\n        if (server.config.server.port) {\n          port = server.config.server.port\n        }\n\n        server.httpServer?.on('listening', () => {\n          port = server.config.server.port\n        })\n\n        const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG\n        const openInEditor = async (\n          path: string | undefined,\n          lineNum: string | undefined,\n        ) => {\n          if (!path) {\n            return\n          }\n          await editor.open(path, lineNum)\n        }\n        server.middlewares.use((req, res, next) =>\n          handleDevToolsViteRequest(req, res, next, (parsedData) => {\n            const { data, routine } = parsedData\n            if (routine === 'open-source') {\n              return handleOpenSource({\n                data: { type: data.type, data },\n                openInEditor,\n                appDir,\n              })\n            }\n            return\n          }),\n        )\n      },\n    },\n    {\n      name: '@tanstack/devtools:better-console-logs',\n      enforce: 'pre',\n      apply(config) {\n        return config.mode === 'development' && enhancedLogsConfig.enabled\n      },\n      transform(code, id) {\n        // Ignore anything external\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build')\n        )\n          return code\n\n        if (!code.includes('console.')) {\n          return code\n        }\n        const lines = code.split('\\n')\n        return lines\n          .map((line, lineNumber) => {\n            if (\n              line.trim().startsWith('//') ||\n              line.trim().startsWith('/**') ||\n              line.trim().startsWith('*')\n            ) {\n              return line\n            }\n            // Do not add for arrow functions or return statements\n            if (\n              line.replaceAll(' ', '').includes('=>console.') ||\n              line.includes('return console.')\n            ) {\n              return line\n            }\n\n            const column = line.indexOf('console.')\n            const location = `${id.replace(normalizePath(process.cwd()), '')}:${lineNumber + 1}:${column + 1}`\n            const logMessage = `'${chalk.magenta('LOG')} ${chalk.blueBright(`${location} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(id.replace(normalizePath(process.cwd()), ''))}&line=${lineNumber + 1}&column=${column + 1}`)}\\\\n → '`\n            if (line.includes('console.log(')) {\n              const newLine = `console.log(${logMessage},`\n              return line.replace('console.log(', newLine)\n            }\n            if (line.includes('console.error(')) {\n              const newLine = `console.error(${logMessage},`\n              return line.replace('console.error(', newLine)\n            }\n            return line\n          })\n          .join('\\n')\n      },\n    },\n  ]\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/utils.d.ts

@@ -0,0 +1,10 @@
+import { Connect } from 'vite';
+import { IncomingMessage, ServerResponse } from 'node:http';
+export declare const handleDevToolsViteRequest: (req: Connect.IncomingMessage, res: ServerResponse<IncomingMessage>, next: Connect.NextFunction, cb: (data: any) => void) => void;
+export declare function checkPath(routePath: string, extensions?: string[]): Promise<{
+    readonly validPath: string;
+    readonly type: "directory";
+} | {
+    readonly validPath: string;
+    readonly type: "file";
+} | null>;

package/dist/esm/utils.js

@@ -0,0 +1,56 @@
+import { normalizePath } from "vite";
+const handleDevToolsViteRequest = (req, res, next, cb) => {
+  if (req.url?.includes("__tsd/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}`) : void 0,
+        line,
+        column
+      }
+    });
+    res.setHeader("Content-Type", "text/html");
+    res.write(`<script> window.close(); <\/script>`);
+    res.end();
+    return;
+  }
+  if (!req.url?.includes("__tsd")) {
+    return next();
+  }
+  const chunks = [];
+  req.on("data", (chunk) => {
+    chunks.push(chunk);
+  });
+  req.on("end", () => {
+    const dataToParse = Buffer.concat(chunks);
+    try {
+      const parsedData = JSON.parse(dataToParse.toString());
+      cb(parsedData);
+    } catch (e) {
+    }
+    res.write("OK");
+  });
+};
+async function checkPath(routePath, extensions = [".tsx", ".jsx", ".ts", ".js"]) {
+  const fs = await import("node:fs");
+  if (fs.existsSync(routePath) && fs.lstatSync(routePath).isDirectory()) {
+    return { validPath: routePath, type: "directory" };
+  }
+  for (const ext of extensions) {
+    const filePath = `${routePath}${ext}`;
+    if (fs.existsSync(filePath) && fs.lstatSync(filePath).isFile()) {
+      return { validPath: filePath, type: "file" };
+    }
+  }
+  return null;
+}
+export {
+  checkPath,
+  handleDevToolsViteRequest
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport type { Connect } from 'vite'\nimport type { IncomingMessage, ServerResponse } from 'node:http'\n\nexport const handleDevToolsViteRequest = (\n  req: Connect.IncomingMessage,\n  res: ServerResponse<IncomingMessage>,\n  next: Connect.NextFunction,\n  cb: (data: any) => void,\n) => {\n  if (req.url?.includes('__tsd/open-source')) {\n    const searchParams = new URLSearchParams(req.url.split('?')[1])\n    const source = searchParams.get('source')\n    const line = searchParams.get('line')\n    const column = searchParams.get('column')\n    cb({\n      type: 'open-source',\n      routine: 'open-source',\n      data: {\n        source: source\n          ? normalizePath(`${process.cwd()}/${source}`)\n          : undefined,\n        line,\n        column,\n      },\n    })\n    res.setHeader('Content-Type', 'text/html')\n    res.write(`<script> window.close(); </script>`)\n    res.end()\n    return\n  }\n  if (!req.url?.includes('__tsd')) {\n    return next()\n  }\n\n  const chunks: Array<any> = []\n  req.on('data', (chunk) => {\n    chunks.push(chunk)\n  })\n  req.on('end', () => {\n    const dataToParse = Buffer.concat(chunks)\n    try {\n      const parsedData = JSON.parse(dataToParse.toString())\n      cb(parsedData)\n    } catch (e) {}\n    res.write('OK')\n  })\n}\n\nexport async function checkPath(\n  routePath: string,\n  extensions = ['.tsx', '.jsx', '.ts', '.js'],\n) {\n  const fs = await import('node:fs')\n  // Check if the path exists as a directory\n  if (fs.existsSync(routePath) && fs.lstatSync(routePath).isDirectory()) {\n    return { validPath: routePath, type: 'directory' } as const\n  }\n\n  // Check if the path exists as a file with one of the given extensions\n  for (const ext of extensions) {\n    const filePath = `${routePath}${ext}`\n    if (fs.existsSync(filePath) && fs.lstatSync(filePath).isFile()) {\n      return { validPath: filePath, type: 'file' } as const\n    }\n  }\n\n  // If neither a file nor a directory is found\n  return null\n}\n"],"names":[],"mappings":";AAIO,MAAM,4BAA4B,CACvC,KACA,KACA,MACA,OACG;AACH,MAAI,IAAI,KAAK,SAAS,mBAAmB,GAAG;AAC1C,UAAM,eAAe,IAAI,gBAAgB,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC;AAC9D,UAAM,SAAS,aAAa,IAAI,QAAQ;AACxC,UAAM,OAAO,aAAa,IAAI,MAAM;AACpC,UAAM,SAAS,aAAa,IAAI,QAAQ;AACxC,OAAG;AAAA,MACD,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ,SACJ,cAAc,GAAG,QAAQ,KAAK,IAAI,MAAM,EAAE,IAC1C;AAAA,QACJ;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,QAAI,UAAU,gBAAgB,WAAW;AACzC,QAAI,MAAM,qCAAoC;AAC9C,QAAI,IAAA;AACJ;AAAA,EACF;AACA,MAAI,CAAC,IAAI,KAAK,SAAS,OAAO,GAAG;AAC/B,WAAO,KAAA;AAAA,EACT;AAEA,QAAM,SAAqB,CAAA;AAC3B,MAAI,GAAG,QAAQ,CAAC,UAAU;AACxB,WAAO,KAAK,KAAK;AAAA,EACnB,CAAC;AACD,MAAI,GAAG,OAAO,MAAM;AAClB,UAAM,cAAc,OAAO,OAAO,MAAM;AACxC,QAAI;AACF,YAAM,aAAa,KAAK,MAAM,YAAY,UAAU;AACpD,SAAG,UAAU;AAAA,IACf,SAAS,GAAG;AAAA,IAAC;AACb,QAAI,MAAM,IAAI;AAAA,EAChB,CAAC;AACH;AAEA,eAAsB,UACpB,WACA,aAAa,CAAC,QAAQ,QAAQ,OAAO,KAAK,GAC1C;AACA,QAAM,KAAK,MAAM,OAAO,SAAS;AAEjC,MAAI,GAAG,WAAW,SAAS,KAAK,GAAG,UAAU,SAAS,EAAE,eAAe;AACrE,WAAO,EAAE,WAAW,WAAW,MAAM,YAAA;AAAA,EACvC;AAGA,aAAW,OAAO,YAAY;AAC5B,UAAM,WAAW,GAAG,SAAS,GAAG,GAAG;AACnC,QAAI,GAAG,WAAW,QAAQ,KAAK,GAAG,UAAU,QAAQ,EAAE,UAAU;AAC9D,aAAO,EAAE,WAAW,UAAU,MAAM,OAAA;AAAA,IACtC;AAAA,EACF;AAGA,SAAO;AACT;"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/devtools-vite",
+  "version": "0.2.3",
+  "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "devtools"
+  ],
+  "type": "module",
+  "types": "dist/esm//index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "peerDependencies": {
+    "vite": "^7.0.0"
+  },
+  "dependencies": {
+    "chalk": "^5.6.0",
+    "@tanstack/devtools-event-bus": "0.2.2"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/editor.ts

@@ -0,0 +1,92 @@
+import { normalizePath } from 'vite'
+import { checkPath } from './utils.js'
+
+type OpenSourceData = {
+  type: 'open-source'
+  data: {
+    /** The source file to open */
+    source?: string
+    /** The react router route ID, usually discovered via the hook useMatches */
+    routeID?: string
+    /** The line number in the source file */
+    line?: number
+    /** The column number in the source file */
+    column?: number
+  }
+}
+
+export type EditorConfig = {
+  /** The name of the editor, used for debugging purposes */
+  name: string
+  /** Callback to open a file in the editor */
+  open: (
+    path: string,
+    lineNumber: string | undefined,
+    columnNumber?: string,
+  ) => Promise<void>
+}
+
+export const DEFAULT_EDITOR_CONFIG: EditorConfig = {
+  name: 'VSCode',
+  open: async (path, lineNumber, columnNumber) => {
+    const { exec } = await import('node:child_process')
+    exec(
+      `code -g "${normalizePath(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
+    )
+  },
+}
+
+export const handleOpenSource = async ({
+  data,
+  openInEditor,
+  appDir,
+}: {
+  data: OpenSourceData
+  appDir: string
+  openInEditor: EditorConfig['open']
+}) => {
+  const { source, line, routeID } = data.data
+  const lineNum = line ? `${line}` : undefined
+  const fs = await import('node:fs')
+  const path = await import('node:path')
+  if (source) {
+    return openInEditor(source, lineNum)
+  }
+
+  if (routeID) {
+    const routePath = path.join(appDir, routeID)
+    const checkedPath = await checkPath(routePath)
+
+    if (!checkedPath) return
+    const { type, validPath } = checkedPath
+
+    const reactExtensions = ['tsx', 'jsx']
+    const allExtensions = ['ts', 'js', ...reactExtensions]
+    const isRoot = routeID === 'root'
+    const findFileByExtension = (prefix: string, filePaths: Array<string>) => {
+      const file = filePaths.find((file) =>
+        allExtensions.some((ext) => file === `${prefix}.${ext}`),
+      )
+      return file
+    }
+
+    if (isRoot) {
+      if (!fs.existsSync(appDir)) return
+      const filesInReactRouterPath = fs.readdirSync(appDir)
+      const rootFile = findFileByExtension('root', filesInReactRouterPath)
+      rootFile && openInEditor(path.join(appDir, rootFile), lineNum)
+      return
+    }
+
+    // If its not the root route, then we find the file or folder in the routes folder
+    // We know that the route ID is in the form of "routes/contact" or "routes/user.profile" when is not root
+    // so the ID already contains the "routes" segment, so we just need to find the file or folder in the routes folder
+    if (type === 'directory') {
+      const filesInFolderRoute = fs.readdirSync(validPath)
+      const routeFile = findFileByExtension('route', filesInFolderRoute)
+      routeFile && openInEditor(path.join(appDir, routeID, routeFile), lineNum)
+      return
+    }
+    return openInEditor(validPath, lineNum)
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { devtools, defineDevtoolsConfig } from './plugin'
+export type { TanStackDevtoolsViteConfig } from './plugin'

package/src/plugin.ts

@@ -0,0 +1,145 @@
+import { normalizePath } from 'vite'
+import chalk from 'chalk'
+import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
+import { handleDevToolsViteRequest } from './utils'
+import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
+import type { EditorConfig } from './editor'
+import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
+import type { Plugin } from 'vite'
+
+export type TanStackDevtoolsViteConfig = {
+  /** The directory where the react router app is located. Defaults to the "./src" relative to where vite.config is being defined. */
+  appDir?: string
+  /**
+   * Configuration for the editor integration. Defaults to opening in VS code
+   */
+  editor?: EditorConfig
+  /**
+   * The configuration options for the server event bus
+   */
+  eventBusConfig?: ServerEventBusConfig
+  /**
+   * Configuration for enhanced logging.
+   */
+  enhancedLogs?: {
+    /**
+     * Whether to enable enhanced logging.
+     * @default true
+     */
+    enabled: boolean
+  }
+}
+
+export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
+  config
+
+export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
+  let port = 5173
+  const appDir = args?.appDir || './src'
+  const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
+  const bus = new ServerEventBus(args?.eventBusConfig)
+
+  return [
+    {
+      enforce: 'pre',
+      name: '@tanstack/devtools:custom-server',
+      apply(config) {
+        // Custom server is only needed in development for piping events to the client
+        return config.mode === 'development'
+      },
+      configureServer(server) {
+        bus.start()
+        server.middlewares.use((req, _res, next) => {
+          if (req.socket.localPort && req.socket.localPort !== port) {
+            port = req.socket.localPort
+          }
+          next()
+        })
+        if (server.config.server.port) {
+          port = server.config.server.port
+        }
+
+        server.httpServer?.on('listening', () => {
+          port = server.config.server.port
+        })
+
+        const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG
+        const openInEditor = async (
+          path: string | undefined,
+          lineNum: string | undefined,
+        ) => {
+          if (!path) {
+            return
+          }
+          await editor.open(path, lineNum)
+        }
+        server.middlewares.use((req, res, next) =>
+          handleDevToolsViteRequest(req, res, next, (parsedData) => {
+            const { data, routine } = parsedData
+            if (routine === 'open-source') {
+              return handleOpenSource({
+                data: { type: data.type, data },
+                openInEditor,
+                appDir,
+              })
+            }
+            return
+          }),
+        )
+      },
+    },
+    {
+      name: '@tanstack/devtools:better-console-logs',
+      enforce: 'pre',
+      apply(config) {
+        return config.mode === 'development' && enhancedLogsConfig.enabled
+      },
+      transform(code, id) {
+        // Ignore anything external
+        if (
+          id.includes('node_modules') ||
+          id.includes('?raw') ||
+          id.includes('dist') ||
+          id.includes('build')
+        )
+          return code
+
+        if (!code.includes('console.')) {
+          return code
+        }
+        const lines = code.split('\n')
+        return lines
+          .map((line, lineNumber) => {
+            if (
+              line.trim().startsWith('//') ||
+              line.trim().startsWith('/**') ||
+              line.trim().startsWith('*')
+            ) {
+              return line
+            }
+            // Do not add for arrow functions or return statements
+            if (
+              line.replaceAll(' ', '').includes('=>console.') ||
+              line.includes('return console.')
+            ) {
+              return line
+            }
+
+            const column = line.indexOf('console.')
+            const location = `${id.replace(normalizePath(process.cwd()), '')}:${lineNumber + 1}:${column + 1}`
+            const logMessage = `'${chalk.magenta('LOG')} ${chalk.blueBright(`${location} - http://localhost:${port}/__tsd/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)
+            }
+            if (line.includes('console.error(')) {
+              const newLine = `console.error(${logMessage},`
+              return line.replace('console.error(', newLine)
+            }
+            return line
+          })
+          .join('\n')
+      },
+    },
+  ]
+}

package/src/utils.ts

@@ -0,0 +1,70 @@
+import { normalizePath } from 'vite'
+import type { Connect } from 'vite'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+
+export const handleDevToolsViteRequest = (
+  req: Connect.IncomingMessage,
+  res: ServerResponse<IncomingMessage>,
+  next: Connect.NextFunction,
+  cb: (data: any) => void,
+) => {
+  if (req.url?.includes('__tsd/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(`<script> window.close(); </script>`)
+    res.end()
+    return
+  }
+  if (!req.url?.includes('__tsd')) {
+    return next()
+  }
+
+  const chunks: Array<any> = []
+  req.on('data', (chunk) => {
+    chunks.push(chunk)
+  })
+  req.on('end', () => {
+    const dataToParse = Buffer.concat(chunks)
+    try {
+      const parsedData = JSON.parse(dataToParse.toString())
+      cb(parsedData)
+    } catch (e) {}
+    res.write('OK')
+  })
+}
+
+export async function checkPath(
+  routePath: string,
+  extensions = ['.tsx', '.jsx', '.ts', '.js'],
+) {
+  const fs = await import('node:fs')
+  // Check if the path exists as a directory
+  if (fs.existsSync(routePath) && fs.lstatSync(routePath).isDirectory()) {
+    return { validPath: routePath, type: 'directory' } as const
+  }
+
+  // Check if the path exists as a file with one of the given extensions
+  for (const ext of extensions) {
+    const filePath = `${routePath}${ext}`
+    if (fs.existsSync(filePath) && fs.lstatSync(filePath).isFile()) {
+      return { validPath: filePath, type: 'file' } as const
+    }
+  }
+
+  // If neither a file nor a directory is found
+  return null
+}