@tanstack/devtools-vite 0.2.4 → 0.2.6

package/dist/esm/editor.d.ts

@@ -18,9 +18,8 @@ export type EditorConfig = {
     open: (path: string, lineNumber: string | undefined, columnNumber?: string) => Promise<void>;
 };
 export declare const DEFAULT_EDITOR_CONFIG: EditorConfig;
-export declare const handleOpenSource: ({ data, openInEditor, appDir, }: {
+export declare const handleOpenSource: ({ data, openInEditor, }: {
     data: OpenSourceData;
-    appDir: string;
     openInEditor: EditorConfig["open"];
 }) => Promise<void>;
 export {};

package/dist/esm/editor.js

@@ -1,54 +1,21 @@
-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}` : ""}"`
+      `code -g "${path.replaceAll("$", "\\$")}${lineNumber ? `:${lineNumber}` : ""}${columnNumber ? `:${columnNumber}` : ""}"`
     );
   }
 };
 const handleOpenSource = async ({
   data,
-  openInEditor,
-  appDir
+  openInEditor
 }) => {
-  const { source, line, routeID } = data.data;
+  const { source, line, column } = data.data;
   const lineNum = line ? `${line}` : void 0;
-  const fs = await import("node:fs");
-  const path = await import("node:path");
+  const columnNum = column ? `${column}` : void 0;
   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);
+    return openInEditor(source, lineNum, columnNum);
   }
 };
 export {

package/dist/esm/editor.js.map

@@ -1 +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;"}
+{"version":3,"file":"editor.js","sources":["../../src/editor.ts"],"sourcesContent":["type 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 \"${path.replaceAll('$', '\\\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}\"`,\n    )\n  },\n}\n\nexport const handleOpenSource = async ({\n  data,\n  openInEditor,\n}: {\n  data: OpenSourceData\n  openInEditor: EditorConfig['open']\n}) => {\n  const { source, line, column } = data.data\n  const lineNum = line ? `${line}` : undefined\n  const columnNum = column ? `${column}` : undefined\n  if (source) {\n    return openInEditor(source, lineNum, columnNum)\n  }\n}\n"],"names":[],"mappings":"AAyBO,MAAM,wBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,OAAO,MAAM,YAAY,iBAAiB;AAC9C,UAAM,EAAE,KAAA,IAAS,MAAM,OAAO,oBAAoB;AAClD;AAAA,MACE,YAAY,KAAK,WAAW,KAAK,KAAK,CAAC,GAAG,aAAa,IAAI,UAAU,KAAK,EAAE,GAAG,eAAe,IAAI,YAAY,KAAK,EAAE;AAAA,IAAA;AAAA,EAEzH;AACF;AAEO,MAAM,mBAAmB,OAAO;AAAA,EACrC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,EAAE,QAAQ,MAAM,OAAA,IAAW,KAAK;AACtC,QAAM,UAAU,OAAO,GAAG,IAAI,KAAK;AACnC,QAAM,YAAY,SAAS,GAAG,MAAM,KAAK;AACzC,MAAI,QAAQ;AACV,WAAO,aAAa,QAAQ,SAAS,SAAS;AAAA,EAChD;AACF;"}

package/dist/esm/inject-source.js

@@ -2,21 +2,141 @@ import { normalizePath } from "vite";
 import { gen, trav } from "./babel.js";
 import { parse } from "@babel/parser";
 import * as t from "@babel/types";
+const getPropsNameFromFunctionDeclaration = (functionDeclaration) => {
+  let propsName = null;
+  if (functionDeclaration.type === "FunctionExpression") {
+    const firstArgument = functionDeclaration.params[0];
+    if (firstArgument && firstArgument.type === "Identifier") {
+      propsName = firstArgument.name;
+    }
+    if (firstArgument && firstArgument.type === "ObjectPattern") {
+      firstArgument.properties.forEach((prop) => {
+        if (prop.type === "RestElement" && prop.argument.type === "Identifier") {
+          propsName = prop.argument.name;
+        }
+      });
+    }
+    return propsName;
+  }
+  if (functionDeclaration.type === "ArrowFunctionExpression") {
+    const firstArgument = functionDeclaration.params[0];
+    if (firstArgument && firstArgument.type === "Identifier") {
+      propsName = firstArgument.name;
+    }
+    if (firstArgument && firstArgument.type === "ObjectPattern") {
+      firstArgument.properties.forEach((prop) => {
+        if (prop.type === "RestElement" && prop.argument.type === "Identifier") {
+          propsName = prop.argument.name;
+        }
+      });
+    }
+    return propsName;
+  }
+  if (functionDeclaration.type === "FunctionDeclaration") {
+    const firstArgument = functionDeclaration.params[0];
+    if (firstArgument && firstArgument.type === "Identifier") {
+      propsName = firstArgument.name;
+    }
+    if (firstArgument && firstArgument.type === "ObjectPattern") {
+      firstArgument.properties.forEach((prop) => {
+        if (prop.type === "RestElement" && prop.argument.type === "Identifier") {
+          propsName = prop.argument.name;
+        }
+      });
+    }
+    return propsName;
+  }
+  if (functionDeclaration.init?.type === "ArrowFunctionExpression" || functionDeclaration.init?.type === "FunctionExpression") {
+    const firstArgument = functionDeclaration.init.params[0];
+    if (firstArgument && firstArgument.type === "Identifier") {
+      propsName = firstArgument.name;
+    }
+    if (firstArgument && firstArgument.type === "ObjectPattern") {
+      firstArgument.properties.forEach((prop) => {
+        if (prop.type === "RestElement" && prop.argument.type === "Identifier") {
+          propsName = prop.argument.name;
+        }
+      });
+    }
+  }
+  return propsName;
+};
+const transformJSX = (element, propsName, file) => {
+  const loc = element.node.loc;
+  if (!loc) return;
+  const line = loc.start.line;
+  const column = loc.start.column;
+  const hasDataSource = element.node.attributes.some(
+    (attr) => attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "data-tsd-source"
+  );
+  const hasSpread = element.node.attributes.some(
+    (attr) => attr.type === "JSXSpreadAttribute" && attr.argument.type === "Identifier" && attr.argument.name === propsName
+  );
+  if (hasSpread || hasDataSource) {
+    return;
+  }
+  element.node.attributes.push(
+    t.jsxAttribute(
+      t.jsxIdentifier("data-tsd-source"),
+      t.stringLiteral(`${file}:${line}:${column}`)
+    )
+  );
+  return true;
+};
 const transform = (ast, file) => {
   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;
-      path.node.attributes.push(
-        t.jsxAttribute(
-          t.jsxIdentifier("data-tsd-source"),
-          t.stringLiteral(`${file}:${line}:${column}`)
-        )
+    FunctionDeclaration(functionDeclaration) {
+      const propsName = getPropsNameFromFunctionDeclaration(
+        functionDeclaration.node
       );
-      didTransform = true;
+      functionDeclaration.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file);
+          if (transformed) {
+            didTransform = true;
+          }
+        }
+      });
+    },
+    ArrowFunctionExpression(path) {
+      const propsName = getPropsNameFromFunctionDeclaration(path.node);
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file);
+          if (transformed) {
+            didTransform = true;
+          }
+        }
+      });
+    },
+    FunctionExpression(path) {
+      const propsName = getPropsNameFromFunctionDeclaration(path.node);
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file);
+          if (transformed) {
+            didTransform = true;
+          }
+        }
+      });
+    },
+    VariableDeclaration(path) {
+      const functionDeclaration = path.node.declarations.find((decl) => {
+        return decl.init?.type === "ArrowFunctionExpression" || decl.init?.type === "FunctionExpression";
+      });
+      if (!functionDeclaration) {
+        return;
+      }
+      const propsName = getPropsNameFromFunctionDeclaration(functionDeclaration);
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file);
+          if (transformed) {
+            didTransform = true;
+          }
+        }
+      });
     }
   });
   return didTransform;

package/dist/esm/inject-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"inject-source.js","sources":["../../src/inject-source.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport { gen, parse, t, trav } from './babel'\nimport type { types as Babel } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\nconst transform = (ast: ParseResult<Babel.File>, file: string) => {\n  let didTransform = false\n  trav(ast, {\n    JSXOpeningElement(path) {\n      const loc = path.node.loc\n      if (!loc) return\n      const line = loc.start.line\n      const column = loc.start.column\n\n      // Inject data-source as a string: \"<file>:<line>:<column>\"\n      path.node.attributes.push(\n        t.jsxAttribute(\n          t.jsxIdentifier('data-tsd-source'),\n          t.stringLiteral(`${file}:${line}:${column}`),\n        ),\n      )\n\n      didTransform = true\n    },\n  })\n\n  return didTransform\n}\n\nexport function addSourceToJsx(code: string, id: string) {\n  const [filePath] = id.split('?')\n  // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n  const location = filePath?.replace(normalizePath(process.cwd()), '')!\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n    const didTransform = transform(ast, location)\n    if (!didTransform) {\n      return { code }\n    }\n    return gen(ast, {\n      sourceMaps: true,\n      filename: id,\n      sourceFileName: filePath,\n    })\n  } catch (e) {\n    return { code }\n  }\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,CAAC,KAA8B,SAAiB;AAChE,MAAI,eAAe;AACnB,OAAK,KAAK;AAAA,IACR,kBAAkB,MAAM;AACtB,YAAM,MAAM,KAAK,KAAK;AACtB,UAAI,CAAC,IAAK;AACV,YAAM,OAAO,IAAI,MAAM;AACvB,YAAM,SAAS,IAAI,MAAM;AAGzB,WAAK,KAAK,WAAW;AAAA,QACnB,EAAE;AAAA,UACA,EAAE,cAAc,iBAAiB;AAAA,UACjC,EAAE,cAAc,GAAG,IAAI,IAAI,IAAI,IAAI,MAAM,EAAE;AAAA,QAAA;AAAA,MAC7C;AAGF,qBAAe;AAAA,IACjB;AAAA,EAAA,CACD;AAED,SAAO;AACT;AAEO,SAAS,eAAe,MAAc,IAAY;AACvD,QAAM,CAAC,QAAQ,IAAI,GAAG,MAAM,GAAG;AAE/B,QAAM,WAAW,UAAU,QAAQ,cAAc,QAAQ,IAAA,CAAK,GAAG,EAAE;AAEnE,MAAI;AACF,UAAM,MAAM,MAAM,MAAM;AAAA,MACtB,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,YAAY;AAAA,IAAA,CAC9B;AACD,UAAM,eAAe,UAAU,KAAK,QAAQ;AAC5C,QAAI,CAAC,cAAc;AACjB,aAAO,EAAE,KAAA;AAAA,IACX;AACA,WAAO,IAAI,KAAK;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAgB;AAAA,IAAA,CACjB;AAAA,EACH,SAAS,GAAG;AACV,WAAO,EAAE,KAAA;AAAA,EACX;AACF;"}
+{"version":3,"file":"inject-source.js","sources":["../../src/inject-source.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport { gen, parse, t, trav } from './babel'\nimport type { types as Babel, NodePath } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\nconst getPropsNameFromFunctionDeclaration = (\n  functionDeclaration:\n    | t.VariableDeclarator\n    | t.FunctionExpression\n    | t.FunctionDeclaration\n    | t.ArrowFunctionExpression,\n) => {\n  let propsName: string | null = null\n\n  if (functionDeclaration.type === 'FunctionExpression') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  if (functionDeclaration.type === 'ArrowFunctionExpression') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  if (functionDeclaration.type === 'FunctionDeclaration') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  // Arrow function case\n  if (\n    functionDeclaration.init?.type === 'ArrowFunctionExpression' ||\n    functionDeclaration.init?.type === 'FunctionExpression'\n  ) {\n    const firstArgument = functionDeclaration.init.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n  }\n  return propsName\n}\n\nconst transformJSX = (\n  element: NodePath<t.JSXOpeningElement>,\n  propsName: string | null,\n  file: string,\n) => {\n  const loc = element.node.loc\n  if (!loc) return\n  const line = loc.start.line\n  const column = loc.start.column\n\n  const hasDataSource = element.node.attributes.some(\n    (attr) =>\n      attr.type === 'JSXAttribute' &&\n      attr.name.type === 'JSXIdentifier' &&\n      attr.name.name === 'data-tsd-source',\n  )\n  // Check if props are spread\n  const hasSpread = element.node.attributes.some(\n    (attr) =>\n      attr.type === 'JSXSpreadAttribute' &&\n      attr.argument.type === 'Identifier' &&\n      attr.argument.name === propsName,\n  )\n\n  if (hasSpread || hasDataSource) {\n    // Do not inject if props are spread\n    return\n  }\n\n  // Inject data-source as a string: \"<file>:<line>:<column>\"\n  element.node.attributes.push(\n    t.jsxAttribute(\n      t.jsxIdentifier('data-tsd-source'),\n      t.stringLiteral(`${file}:${line}:${column}`),\n    ),\n  )\n\n  return true\n}\n\nconst transform = (ast: ParseResult<Babel.File>, file: string) => {\n  let didTransform = false\n\n  trav(ast, {\n    FunctionDeclaration(functionDeclaration) {\n      const propsName = getPropsNameFromFunctionDeclaration(\n        functionDeclaration.node,\n      )\n      functionDeclaration.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    ArrowFunctionExpression(path) {\n      const propsName = getPropsNameFromFunctionDeclaration(path.node)\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    FunctionExpression(path) {\n      const propsName = getPropsNameFromFunctionDeclaration(path.node)\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    VariableDeclaration(path) {\n      const functionDeclaration = path.node.declarations.find((decl) => {\n        return (\n          decl.init?.type === 'ArrowFunctionExpression' ||\n          decl.init?.type === 'FunctionExpression'\n        )\n      })\n      if (!functionDeclaration) {\n        return\n      }\n      const propsName = getPropsNameFromFunctionDeclaration(functionDeclaration)\n\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n  })\n\n  return didTransform\n}\n\nexport function addSourceToJsx(code: string, id: string) {\n  const [filePath] = id.split('?')\n  // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n  const location = filePath?.replace(normalizePath(process.cwd()), '')!\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n    const didTransform = transform(ast, location)\n    if (!didTransform) {\n      return { code }\n    }\n    return gen(ast, {\n      sourceMaps: true,\n      filename: id,\n      sourceFileName: filePath,\n    })\n  } catch (e) {\n    return { code }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/plugin.d.ts

@@ -2,8 +2,6 @@ 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
      */
@@ -22,6 +20,16 @@ export type TanStackDevtoolsViteConfig = {
          */
         enabled: boolean;
     };
+    /**
+     * Configuration for source injection.
+     */
+    injectSource: {
+        /**
+         * Whether to enable source injection via data-tsd-source.
+         * @default true
+         */
+        enabled: boolean;
+    };
 };
 export declare const defineDevtoolsConfig: (config: TanStackDevtoolsViteConfig) => TanStackDevtoolsViteConfig;
 export declare const devtools: (args?: TanStackDevtoolsViteConfig) => Array<Plugin>;

package/dist/esm/plugin.js

@@ -7,15 +7,15 @@ import { addSourceToJsx } from "./inject-source.js";
 const defineDevtoolsConfig = (config) => config;
 const devtools = (args) => {
   let port = 5173;
-  const appDir = args?.appDir || "./src";
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true };
+  const injectSourceConfig = args?.injectSource ?? { enabled: true };
   const bus = new ServerEventBus(args?.eventBusConfig);
   return [
     {
       enforce: "pre",
       name: "@tanstack/devtools:inject-source",
       apply(config) {
-        return config.mode === "development";
+        return config.mode === "development" && injectSourceConfig.enabled;
       },
       transform(code, id) {
         if (id.includes("node_modules") || id.includes("?raw") || id.includes("dist") || id.includes("build"))
@@ -44,11 +44,11 @@ const devtools = (args) => {
           port = server.config.server.port;
         });
         const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG;
-        const openInEditor = async (path, lineNum) => {
+        const openInEditor = async (path, lineNum, columnNum) => {
           if (!path) {
             return;
           }
-          await editor.open(path, lineNum);
+          await editor.open(path, lineNum, columnNum);
         };
         server.middlewares.use(
           (req, res, next) => handleDevToolsViteRequest(req, res, next, (parsedData) => {
@@ -56,8 +56,7 @@ const devtools = (args) => {
             if (routine === "open-source") {
               return handleOpenSource({
                 data: { type: data.type, data },
-                openInEditor,
-                appDir
+                openInEditor
               });
             }
             return;

package/dist/esm/plugin.js.map

@@ -1 +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 { addSourceToJsx } from './inject-source'\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:inject-source',\n      apply(config) {\n        return config.mode === 'development'\n      },\n      transform(code, id) {\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        return addSourceToJsx(code, id)\n      },\n    },\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      transform(code) {\n        if (code.includes('__TSD_PORT__')) {\n          code = code.replace('__TSD_PORT__', String(port))\n        }\n        return code\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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"}
+{"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 { addSourceToJsx } from './inject-source'\nimport type { EditorConfig } from './editor'\nimport type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'\nimport type { Plugin } from 'vite'\n\nexport type TanStackDevtoolsViteConfig = {\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   * Configuration for source injection.\n   */\n  injectSource: {\n    /**\n     * Whether to enable source injection via data-tsd-source.\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 enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }\n  const injectSourceConfig = args?.injectSource ?? { enabled: true }\n  const bus = new ServerEventBus(args?.eventBusConfig)\n\n  return [\n    {\n      enforce: 'pre',\n      name: '@tanstack/devtools:inject-source',\n      apply(config) {\n        return config.mode === 'development' && injectSourceConfig.enabled\n      },\n      transform(code, id) {\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        return addSourceToJsx(code, id)\n      },\n    },\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: EditorConfig['open'] = async (\n          path,\n          lineNum,\n          columnNum,\n        ) => {\n          if (!path) {\n            return\n          }\n          await editor.open(path, lineNum, columnNum)\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              })\n            }\n            return\n          }),\n        )\n      },\n      transform(code) {\n        if (code.includes('__TSD_PORT__')) {\n          code = code.replace('__TSD_PORT__', String(port))\n        }\n        return code\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

@@ -1,10 +1,3 @@
 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

@@ -3,13 +3,15 @@ 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");
+    if (!source) {
+      return;
+    }
+    const [file, line, column] = source.split(":");
     cb({
       type: "open-source",
       routine: "open-source",
       data: {
-        source: source ? normalizePath(`${process.cwd()}/${source}`) : void 0,
+        source: file ? normalizePath(`${process.cwd()}/${file}`) : void 0,
         line,
         column
       }
@@ -36,21 +38,7 @@ const handleDevToolsViteRequest = (req, res, next, cb) => {
     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

@@ -1 +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;"}
+{"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    if (!source) {\n      return\n    }\n    const [file, line, column] = source.split(':')\n\n    cb({\n      type: 'open-source',\n      routine: 'open-source',\n      data: {\n        source: file ? normalizePath(`${process.cwd()}/${file}`) : 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"],"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,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,CAAC,MAAM,MAAM,MAAM,IAAI,OAAO,MAAM,GAAG;AAE7C,OAAG;AAAA,MACD,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ,OAAO,cAAc,GAAG,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI;AAAA,QAC3D;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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-vite",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -52,7 +52,8 @@
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
     "@types/babel__generator": "^7.27.0",
-    "@types/babel__traverse": "^7.28.0"
+    "@types/babel__traverse": "^7.28.0",
+    "happy-dom": "^18.0.1"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/editor.ts

@@ -1,6 +1,3 @@
-import { normalizePath } from 'vite'
-import { checkPath } from './utils.js'
-
 type OpenSourceData = {
   type: 'open-source'
   data: {
@@ -31,7 +28,7 @@ export const DEFAULT_EDITOR_CONFIG: EditorConfig = {
   open: async (path, lineNumber, columnNumber) => {
     const { exec } = await import('node:child_process')
     exec(
-      `code -g "${normalizePath(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
+      `code -g "${path.replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
     )
   },
 }
@@ -39,54 +36,14 @@ export const DEFAULT_EDITOR_CONFIG: EditorConfig = {
 export const handleOpenSource = async ({
   data,
   openInEditor,
-  appDir,
 }: {
   data: OpenSourceData
-  appDir: string
   openInEditor: EditorConfig['open']
 }) => {
-  const { source, line, routeID } = data.data
+  const { source, line, column } = data.data
   const lineNum = line ? `${line}` : undefined
-  const fs = await import('node:fs')
-  const path = await import('node:path')
+  const columnNum = column ? `${column}` : undefined
   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)
+    return openInEditor(source, lineNum, columnNum)
   }
 }

package/src/inject-source.ts

@@ -1,26 +1,198 @@
 import { normalizePath } from 'vite'
 import { gen, parse, t, trav } from './babel'
-import type { types as Babel } from '@babel/core'
+import type { types as Babel, NodePath } from '@babel/core'
 import type { ParseResult } from '@babel/parser'
 
+const getPropsNameFromFunctionDeclaration = (
+  functionDeclaration:
+    | t.VariableDeclarator
+    | t.FunctionExpression
+    | t.FunctionDeclaration
+    | t.ArrowFunctionExpression,
+) => {
+  let propsName: string | null = null
+
+  if (functionDeclaration.type === 'FunctionExpression') {
+    const firstArgument = functionDeclaration.params[0]
+    // handles (props) => {}
+    if (firstArgument && firstArgument.type === 'Identifier') {
+      propsName = firstArgument.name
+    }
+    // handles ({ ...props }) => {}
+    if (firstArgument && firstArgument.type === 'ObjectPattern') {
+      firstArgument.properties.forEach((prop) => {
+        if (
+          prop.type === 'RestElement' &&
+          prop.argument.type === 'Identifier'
+        ) {
+          propsName = prop.argument.name
+        }
+      })
+    }
+    return propsName
+  }
+  if (functionDeclaration.type === 'ArrowFunctionExpression') {
+    const firstArgument = functionDeclaration.params[0]
+    // handles (props) => {}
+    if (firstArgument && firstArgument.type === 'Identifier') {
+      propsName = firstArgument.name
+    }
+    // handles ({ ...props }) => {}
+    if (firstArgument && firstArgument.type === 'ObjectPattern') {
+      firstArgument.properties.forEach((prop) => {
+        if (
+          prop.type === 'RestElement' &&
+          prop.argument.type === 'Identifier'
+        ) {
+          propsName = prop.argument.name
+        }
+      })
+    }
+    return propsName
+  }
+  if (functionDeclaration.type === 'FunctionDeclaration') {
+    const firstArgument = functionDeclaration.params[0]
+    // handles (props) => {}
+    if (firstArgument && firstArgument.type === 'Identifier') {
+      propsName = firstArgument.name
+    }
+    // handles ({ ...props }) => {}
+    if (firstArgument && firstArgument.type === 'ObjectPattern') {
+      firstArgument.properties.forEach((prop) => {
+        if (
+          prop.type === 'RestElement' &&
+          prop.argument.type === 'Identifier'
+        ) {
+          propsName = prop.argument.name
+        }
+      })
+    }
+    return propsName
+  }
+  // Arrow function case
+  if (
+    functionDeclaration.init?.type === 'ArrowFunctionExpression' ||
+    functionDeclaration.init?.type === 'FunctionExpression'
+  ) {
+    const firstArgument = functionDeclaration.init.params[0]
+    // handles (props) => {}
+    if (firstArgument && firstArgument.type === 'Identifier') {
+      propsName = firstArgument.name
+    }
+    // handles ({ ...props }) => {}
+    if (firstArgument && firstArgument.type === 'ObjectPattern') {
+      firstArgument.properties.forEach((prop) => {
+        if (
+          prop.type === 'RestElement' &&
+          prop.argument.type === 'Identifier'
+        ) {
+          propsName = prop.argument.name
+        }
+      })
+    }
+  }
+  return propsName
+}
+
+const transformJSX = (
+  element: NodePath<t.JSXOpeningElement>,
+  propsName: string | null,
+  file: string,
+) => {
+  const loc = element.node.loc
+  if (!loc) return
+  const line = loc.start.line
+  const column = loc.start.column
+
+  const hasDataSource = element.node.attributes.some(
+    (attr) =>
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      attr.name.name === 'data-tsd-source',
+  )
+  // Check if props are spread
+  const hasSpread = element.node.attributes.some(
+    (attr) =>
+      attr.type === 'JSXSpreadAttribute' &&
+      attr.argument.type === 'Identifier' &&
+      attr.argument.name === propsName,
+  )
+
+  if (hasSpread || hasDataSource) {
+    // Do not inject if props are spread
+    return
+  }
+
+  // Inject data-source as a string: "<file>:<line>:<column>"
+  element.node.attributes.push(
+    t.jsxAttribute(
+      t.jsxIdentifier('data-tsd-source'),
+      t.stringLiteral(`${file}:${line}:${column}`),
+    ),
+  )
+
+  return true
+}
+
 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-tsd-source'),
-          t.stringLiteral(`${file}:${line}:${column}`),
-        ),
+    FunctionDeclaration(functionDeclaration) {
+      const propsName = getPropsNameFromFunctionDeclaration(
+        functionDeclaration.node,
       )
+      functionDeclaration.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file)
+          if (transformed) {
+            didTransform = true
+          }
+        },
+      })
+    },
+    ArrowFunctionExpression(path) {
+      const propsName = getPropsNameFromFunctionDeclaration(path.node)
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file)
+          if (transformed) {
+            didTransform = true
+          }
+        },
+      })
+    },
+    FunctionExpression(path) {
+      const propsName = getPropsNameFromFunctionDeclaration(path.node)
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file)
+          if (transformed) {
+            didTransform = true
+          }
+        },
+      })
+    },
+    VariableDeclaration(path) {
+      const functionDeclaration = path.node.declarations.find((decl) => {
+        return (
+          decl.init?.type === 'ArrowFunctionExpression' ||
+          decl.init?.type === 'FunctionExpression'
+        )
+      })
+      if (!functionDeclaration) {
+        return
+      }
+      const propsName = getPropsNameFromFunctionDeclaration(functionDeclaration)
 
-      didTransform = true
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file)
+          if (transformed) {
+            didTransform = true
+          }
+        },
+      })
     },
   })
 

package/src/plugin.ts

@@ -9,8 +9,6 @@ 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
    */
@@ -29,6 +27,16 @@ export type TanStackDevtoolsViteConfig = {
      */
     enabled: boolean
   }
+  /**
+   * Configuration for source injection.
+   */
+  injectSource: {
+    /**
+     * Whether to enable source injection via data-tsd-source.
+     * @default true
+     */
+    enabled: boolean
+  }
 }
 
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
@@ -36,8 +44,8 @@ export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
 
 export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
-  const appDir = args?.appDir || './src'
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
+  const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const bus = new ServerEventBus(args?.eventBusConfig)
 
   return [
@@ -45,7 +53,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
       enforce: 'pre',
       name: '@tanstack/devtools:inject-source',
       apply(config) {
-        return config.mode === 'development'
+        return config.mode === 'development' && injectSourceConfig.enabled
       },
       transform(code, id) {
         if (
@@ -83,14 +91,15 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         })
 
         const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG
-        const openInEditor = async (
-          path: string | undefined,
-          lineNum: string | undefined,
+        const openInEditor: EditorConfig['open'] = async (
+          path,
+          lineNum,
+          columnNum,
         ) => {
           if (!path) {
             return
           }
-          await editor.open(path, lineNum)
+          await editor.open(path, lineNum, columnNum)
         }
         server.middlewares.use((req, res, next) =>
           handleDevToolsViteRequest(req, res, next, (parsedData) => {
@@ -99,7 +108,6 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
               return handleOpenSource({
                 data: { type: data.type, data },
                 openInEditor,
-                appDir,
               })
             }
             return

package/src/utils.ts

@@ -11,15 +11,16 @@ export const handleDevToolsViteRequest = (
   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')
+    if (!source) {
+      return
+    }
+    const [file, line, column] = source.split(':')
+
     cb({
       type: 'open-source',
       routine: 'open-source',
       data: {
-        source: source
-          ? normalizePath(`${process.cwd()}/${source}`)
-          : undefined,
+        source: file ? normalizePath(`${process.cwd()}/${file}`) : undefined,
         line,
         column,
       },
@@ -46,25 +47,3 @@ export const handleDevToolsViteRequest = (
     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
-}