@tanstack/devtools-vite 0.2.3 → 0.2.5

package/dist/esm/babel.d.ts

@@ -0,0 +1,18 @@
+import { parse } from '@babel/parser';
+import { default as generate } from '@babel/generator';
+import * as t from '@babel/types';
+export { parse, t };
+export declare const trav: {
+    <S>(parent: t.Node, opts: import('@babel/traverse').TraverseOptions<S>, scope: import('@babel/traverse').Scope | undefined, state: S, parentPath?: import('@babel/traverse').NodePath): void;
+    (parent: t.Node, opts?: import('@babel/traverse').TraverseOptions, scope?: import('@babel/traverse').Scope, state?: any, parentPath?: import('@babel/traverse').NodePath): void;
+    visitors: typeof import('@babel/traverse').visitors;
+    verify: typeof import("@babel/traverse").visitors.verify;
+    explode: typeof import("@babel/traverse").visitors.explode;
+    cheap: (node: t.Node, enter: (node: t.Node) => void) => void;
+    node: (node: t.Node, opts: import('@babel/traverse').TraverseOptions, scope?: import('@babel/traverse').Scope, state?: any, path?: import('@babel/traverse').NodePath, skipKeys?: Record<string, boolean>) => void;
+    clearNode: (node: t.Node, opts?: t.RemovePropertiesOptions) => void;
+    removeProperties: (tree: t.Node, opts?: t.RemovePropertiesOptions) => t.Node;
+    hasType: (tree: t.Node, type: t.Node["type"], denylistTypes?: string[]) => boolean;
+    cache: typeof import('@babel/traverse').cache;
+};
+export declare const gen: typeof generate;

package/dist/esm/babel.js

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

package/dist/esm/babel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"babel.js","sources":["../../src/babel.ts"],"sourcesContent":["import { parse } from '@babel/parser'\nimport * as t from '@babel/types'\nimport generate from '@babel/generator'\nimport traverse from '@babel/traverse'\n\nexport { parse, t }\n\nexport const trav =\n  typeof (traverse as any).default !== 'undefined'\n    ? // eslint-disable-next-line @typescript-eslint/consistent-type-imports\n      ((traverse as any).default as typeof import('@babel/traverse').default)\n    : traverse\n\nexport const gen =\n  typeof (generate as any).default !== 'undefined'\n    ? // eslint-disable-next-line @typescript-eslint/consistent-type-imports\n      ((generate as any).default as typeof import('@babel/generator').default)\n    : generate\n"],"names":[],"mappings":";;;;AAOO,MAAM,OACX,OAAQ,SAAiB,YAAY;AAAA;AAAA,EAE/B,SAAiB;AAAA,IACnB;AAEC,MAAM,MACX,OAAQ,SAAiB,YAAY;AAAA;AAAA,EAE/B,SAAiB;AAAA,IACnB;"}

package/dist/esm/inject-source.d.ts

@@ -0,0 +1,3 @@
+export declare function addSourceToJsx(code: string, id: string): import('@babel/generator').GeneratorResult | {
+    code: string;
+};

package/dist/esm/inject-source.js

@@ -0,0 +1,168 @@
+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, {
+    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);
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file);
+          if (transformed) {
+            didTransform = true;
+          }
+        }
+      });
+    }
+  });
+  return didTransform;
+};
+function addSourceToJsx(code, id) {
+  const [filePath] = id.split("?");
+  const location = filePath?.replace(normalizePath(process.cwd()), "");
+  try {
+    const ast = parse(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"]
+    });
+    const didTransform = transform(ast, location);
+    if (!didTransform) {
+      return { code };
+    }
+    return gen(ast, {
+      sourceMaps: true,
+      filename: id,
+      sourceFileName: filePath
+    });
+  } catch (e) {
+    return { code };
+  }
+}
+export {
+  addSourceToJsx
+};
+//# sourceMappingURL=inject-source.js.map

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

@@ -0,0 +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, 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

@@ -22,6 +22,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

@@ -3,13 +3,27 @@ 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";
+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" && injectSourceConfig.enabled;
+      },
+      transform(code, id) {
+        if (id.includes("node_modules") || id.includes("?raw") || id.includes("dist") || id.includes("build"))
+          return code;
+        return addSourceToJsx(code, id);
+      }
+    },
     {
       enforce: "pre",
       name: "@tanstack/devtools:custom-server",
@@ -50,6 +64,12 @@ const devtools = (args) => {
             return;
           })
         );
+      },
+      transform(code) {
+        if (code.includes("__TSD_PORT__")) {
+          code = code.replace("__TSD_PORT__", String(port));
+        }
+        return code;
       }
     },
     {

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 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":";;;;;AAgCO,MAAM,uBAAuB,CAAC,WACnC;AAEK,MAAM,WAAW,CAAC,SAAqD;AAC5E,MAAI,OAAO;AACX,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,qBAAqB,MAAM,gBAAgB,EAAE,SAAS,KAAA;AAC5D,QAAM,MAAM,IAAI,eAAe,MAAM,cAAc;AAEnD,SAAO;AAAA,IACL;AAAA,MACE,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM,QAAQ;AAEZ,eAAO,OAAO,SAAS;AAAA,MACzB;AAAA,MACA,gBAAgB,QAAQ;AACtB,YAAI,MAAA;AACJ,eAAO,YAAY,IAAI,CAAC,KAAK,MAAM,SAAS;AAC1C,cAAI,IAAI,OAAO,aAAa,IAAI,OAAO,cAAc,MAAM;AACzD,mBAAO,IAAI,OAAO;AAAA,UACpB;AACA,eAAA;AAAA,QACF,CAAC;AACD,YAAI,OAAO,OAAO,OAAO,MAAM;AAC7B,iBAAO,OAAO,OAAO,OAAO;AAAA,QAC9B;AAEA,eAAO,YAAY,GAAG,aAAa,MAAM;AACvC,iBAAO,OAAO,OAAO,OAAO;AAAA,QAC9B,CAAC;AAED,cAAM,SAAS,MAAM,UAAU;AAC/B,cAAM,eAAe,OACnB,MACA,YACG;AACH,cAAI,CAAC,MAAM;AACT;AAAA,UACF;AACA,gBAAM,OAAO,KAAK,MAAM,OAAO;AAAA,QACjC;AACA,eAAO,YAAY;AAAA,UAAI,CAAC,KAAK,KAAK,SAChC,0BAA0B,KAAK,KAAK,MAAM,CAAC,eAAe;AACxD,kBAAM,EAAE,MAAM,QAAA,IAAY;AAC1B,gBAAI,YAAY,eAAe;AAC7B,qBAAO,iBAAiB;AAAA,gBACtB,MAAM,EAAE,MAAM,KAAK,MAAM,KAAA;AAAA,gBACzB;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YACH;AACA;AAAA,UACF,CAAC;AAAA,QAAA;AAAA,MAEL;AAAA,IAAA;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM,QAAQ;AACZ,eAAO,OAAO,SAAS,iBAAiB,mBAAmB;AAAA,MAC7D;AAAA,MACA,UAAU,MAAM,IAAI;AAElB,YACE,GAAG,SAAS,cAAc,KAC1B,GAAG,SAAS,MAAM,KAClB,GAAG,SAAS,MAAM,KAClB,GAAG,SAAS,OAAO;AAEnB,iBAAO;AAET,YAAI,CAAC,KAAK,SAAS,UAAU,GAAG;AAC9B,iBAAO;AAAA,QACT;AACA,cAAM,QAAQ,KAAK,MAAM,IAAI;AAC7B,eAAO,MACJ,IAAI,CAAC,MAAM,eAAe;AACzB,cACE,KAAK,KAAA,EAAO,WAAW,IAAI,KAC3B,KAAK,KAAA,EAAO,WAAW,KAAK,KAC5B,KAAK,OAAO,WAAW,GAAG,GAC1B;AACA,mBAAO;AAAA,UACT;AAEA,cACE,KAAK,WAAW,KAAK,EAAE,EAAE,SAAS,YAAY,KAC9C,KAAK,SAAS,iBAAiB,GAC/B;AACA,mBAAO;AAAA,UACT;AAEA,gBAAM,SAAS,KAAK,QAAQ,UAAU;AACtC,gBAAM,WAAW,GAAG,GAAG,QAAQ,cAAc,QAAQ,IAAA,CAAK,GAAG,EAAE,CAAC,IAAI,aAAa,CAAC,IAAI,SAAS,CAAC;AAChG,gBAAM,aAAa,IAAI,MAAM,QAAQ,KAAK,CAAC,IAAI,MAAM,WAAW,GAAG,QAAQ,uBAAuB,IAAI,6BAA6B,mBAAmB,GAAG,QAAQ,cAAc,QAAQ,IAAA,CAAK,GAAG,EAAE,CAAC,CAAC,SAAS,aAAa,CAAC,WAAW,SAAS,CAAC,EAAE,CAAC;AAClP,cAAI,KAAK,SAAS,cAAc,GAAG;AACjC,kBAAM,UAAU,eAAe,UAAU;AACzC,mBAAO,KAAK,QAAQ,gBAAgB,OAAO;AAAA,UAC7C;AACA,cAAI,KAAK,SAAS,gBAAgB,GAAG;AACnC,kBAAM,UAAU,iBAAiB,UAAU;AAC3C,mBAAO,KAAK,QAAQ,kBAAkB,OAAO;AAAA,UAC/C;AACA,iBAAO;AAAA,QACT,CAAC,EACA,KAAK,IAAI;AAAA,MACd;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"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   * 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 appDir = args?.appDir || './src'\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 = 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-vite",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -41,9 +41,20 @@
     "vite": "^7.0.0"
   },
   "dependencies": {
+    "@babel/core": "^7.28.3",
+    "@babel/generator": "^7.28.3",
+    "@babel/parser": "^7.28.3",
+    "@babel/traverse": "^7.28.3",
+    "@babel/types": "^7.28.2",
     "chalk": "^5.6.0",
     "@tanstack/devtools-event-bus": "0.2.2"
   },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
+    "happy-dom": "^18.0.1"
+  },
   "scripts": {
     "clean": "premove ./build ./dist",
     "lint:fix": "eslint ./src --fix",

package/src/babel.ts

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

package/src/inject-source.ts

@@ -0,0 +1,224 @@
+import { normalizePath } from 'vite'
+import { gen, parse, t, trav } from './babel'
+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, {
+    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)
+
+      path.traverse({
+        JSXOpeningElement(element) {
+          const transformed = transformJSX(element, propsName, file)
+          if (transformed) {
+            didTransform = true
+          }
+        },
+      })
+    },
+  })
+
+  return didTransform
+}
+
+export function addSourceToJsx(code: string, id: string) {
+  const [filePath] = id.split('?')
+  // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+  const location = filePath?.replace(normalizePath(process.cwd()), '')!
+
+  try {
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    })
+    const didTransform = transform(ast, location)
+    if (!didTransform) {
+      return { code }
+    }
+    return gen(ast, {
+      sourceMaps: true,
+      filename: id,
+      sourceFileName: filePath,
+    })
+  } catch (e) {
+    return { code }
+  }
+}

package/src/plugin.ts

@@ -3,6 +3,7 @@ import chalk from 'chalk'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { handleDevToolsViteRequest } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
+import { addSourceToJsx } from './inject-source'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
 import type { Plugin } from 'vite'
@@ -28,6 +29,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) =>
@@ -37,9 +48,28 @@ 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 [
+    {
+      enforce: 'pre',
+      name: '@tanstack/devtools:inject-source',
+      apply(config) {
+        return config.mode === 'development' && injectSourceConfig.enabled
+      },
+      transform(code, id) {
+        if (
+          id.includes('node_modules') ||
+          id.includes('?raw') ||
+          id.includes('dist') ||
+          id.includes('build')
+        )
+          return code
+
+        return addSourceToJsx(code, id)
+      },
+    },
     {
       enforce: 'pre',
       name: '@tanstack/devtools:custom-server',
@@ -87,6 +117,12 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           }),
         )
       },
+      transform(code) {
+        if (code.includes('__TSD_PORT__')) {
+          code = code.replace('__TSD_PORT__', String(port))
+        }
+        return code
+      },
     },
     {
       name: '@tanstack/devtools:better-console-logs',