@tanstack/devtools-vite 0.3.6 → 0.3.8

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

@@ -0,0 +1,21 @@
+import { PluginInjection } from '@tanstack/devtools-client';
+import { types as Babel } from '@babel/core';
+import { ParseResult } from '@babel/parser';
+/**
+ * Finds the TanStackDevtools component name in the file
+ * Handles renamed imports and namespace imports
+ */
+export declare const findDevtoolsComponentName: (ast: ParseResult<Babel.File>) => string | null;
+export declare const transformAndInject: (ast: ParseResult<Babel.File>, injection: PluginInjection, devtoolsComponentName: string) => boolean;
+/**
+ * Detects if a file contains TanStack devtools import
+ */
+export declare function detectDevtoolsFile(code: string): boolean;
+/**
+ * Injects a plugin into the TanStackDevtools component in a file
+ * Reads the file, transforms it, and writes it back
+ */
+export declare function injectPluginIntoFile(filePath: string, injection: PluginInjection): {
+    success: boolean;
+    error?: string;
+};

package/dist/esm/inject-plugin.js

@@ -0,0 +1,228 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { gen, trav } from "./babel.js";
+import { parse } from "@babel/parser";
+import * as t from "@babel/types";
+const detectDevtoolsImport = (code) => {
+  const devtoolsPackages = [
+    "@tanstack/react-devtools",
+    "@tanstack/solid-devtools",
+    "@tanstack/vue-devtools",
+    "@tanstack/svelte-devtools",
+    "@tanstack/angular-devtools"
+  ];
+  try {
+    const ast = parse(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"]
+    });
+    let hasDevtoolsImport = false;
+    trav(ast, {
+      ImportDeclaration(path) {
+        const importSource = path.node.source.value;
+        if (devtoolsPackages.includes(importSource)) {
+          hasDevtoolsImport = true;
+          path.stop();
+        }
+      }
+    });
+    return hasDevtoolsImport;
+  } catch (e) {
+    return false;
+  }
+};
+const findDevtoolsComponentName = (ast) => {
+  let componentName = null;
+  const devtoolsPackages = [
+    "@tanstack/react-devtools",
+    "@tanstack/solid-devtools",
+    "@tanstack/vue-devtools",
+    "@tanstack/svelte-devtools",
+    "@tanstack/angular-devtools"
+  ];
+  trav(ast, {
+    ImportDeclaration(path) {
+      const importSource = path.node.source.value;
+      if (devtoolsPackages.includes(importSource)) {
+        const namedImport = path.node.specifiers.find(
+          (spec) => t.isImportSpecifier(spec) && t.isIdentifier(spec.imported) && spec.imported.name === "TanStackDevtools"
+        );
+        if (namedImport && t.isImportSpecifier(namedImport)) {
+          componentName = namedImport.local.name;
+          path.stop();
+          return;
+        }
+        const namespaceImport = path.node.specifiers.find(
+          (spec) => t.isImportNamespaceSpecifier(spec)
+        );
+        if (namespaceImport && t.isImportNamespaceSpecifier(namespaceImport)) {
+          componentName = `${namespaceImport.local.name}.TanStackDevtools`;
+          path.stop();
+          return;
+        }
+      }
+    }
+  });
+  return componentName;
+};
+const transformAndInject = (ast, injection, devtoolsComponentName) => {
+  let didTransform = false;
+  const importName = injection.pluginImport?.importName;
+  const pluginType = injection.pluginImport?.type || "jsx";
+  const displayName = injection.pluginName;
+  if (!importName) {
+    return false;
+  }
+  const isNamespaceImport = devtoolsComponentName.includes(".");
+  trav(ast, {
+    JSXOpeningElement(path) {
+      const elementName = path.node.name;
+      let matches = false;
+      if (isNamespaceImport) {
+        if (t.isJSXMemberExpression(elementName)) {
+          const fullName = `${t.isJSXIdentifier(elementName.object) ? elementName.object.name : ""}.${t.isJSXIdentifier(elementName.property) ? elementName.property.name : ""}`;
+          matches = fullName === devtoolsComponentName;
+        }
+      } else {
+        matches = t.isJSXIdentifier(elementName) && elementName.name === devtoolsComponentName;
+      }
+      if (matches) {
+        const pluginsProp = path.node.attributes.find(
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === "plugins"
+        );
+        if (pluginsProp && t.isJSXAttribute(pluginsProp)) {
+          if (pluginsProp.value && t.isJSXExpressionContainer(pluginsProp.value)) {
+            const expression = pluginsProp.value.expression;
+            if (t.isArrayExpression(expression)) {
+              const pluginExists = expression.elements.some((element) => {
+                if (!element) return false;
+                if (pluginType === "function") {
+                  return t.isCallExpression(element) && t.isIdentifier(element.callee) && element.callee.name === importName;
+                }
+                if (!t.isObjectExpression(element)) return false;
+                return element.properties.some((prop) => {
+                  if (!t.isObjectProperty(prop) || !t.isIdentifier(prop.key) || prop.key.name !== "name") {
+                    return false;
+                  }
+                  return t.isStringLiteral(prop.value) && prop.value.value === displayName;
+                });
+              });
+              if (!pluginExists) {
+                if (pluginType === "function") {
+                  expression.elements.push(
+                    t.callExpression(t.identifier(importName), [])
+                  );
+                } else {
+                  const renderValue = t.jsxElement(
+                    t.jsxOpeningElement(t.jsxIdentifier(importName), [], true),
+                    null,
+                    [],
+                    true
+                  );
+                  expression.elements.push(
+                    t.objectExpression([
+                      t.objectProperty(
+                        t.identifier("name"),
+                        t.stringLiteral(displayName)
+                      ),
+                      t.objectProperty(t.identifier("render"), renderValue)
+                    ])
+                  );
+                }
+                didTransform = true;
+              }
+            }
+          }
+        } else {
+          let pluginElement;
+          if (pluginType === "function") {
+            pluginElement = t.callExpression(t.identifier(importName), []);
+          } else {
+            const renderValue = t.jsxElement(
+              t.jsxOpeningElement(t.jsxIdentifier(importName), [], true),
+              null,
+              [],
+              true
+            );
+            pluginElement = t.objectExpression([
+              t.objectProperty(
+                t.identifier("name"),
+                t.stringLiteral(displayName)
+              ),
+              t.objectProperty(t.identifier("render"), renderValue)
+            ]);
+          }
+          path.node.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier("plugins"),
+              t.jsxExpressionContainer(t.arrayExpression([pluginElement]))
+            )
+          );
+          didTransform = true;
+        }
+      }
+    }
+  });
+  if (didTransform) {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier(importName), t.identifier(importName))],
+      t.stringLiteral(injection.packageName)
+    );
+    let lastImportIndex = -1;
+    ast.program.body.forEach((node, index) => {
+      if (t.isImportDeclaration(node)) {
+        lastImportIndex = index;
+      }
+    });
+    ast.program.body.splice(lastImportIndex + 1, 0, importDeclaration);
+  }
+  return didTransform;
+};
+function detectDevtoolsFile(code) {
+  return detectDevtoolsImport(code);
+}
+function injectPluginIntoFile(filePath, injection) {
+  try {
+    const code = readFileSync(filePath, "utf-8");
+    const ast = parse(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"]
+    });
+    const devtoolsComponentName = findDevtoolsComponentName(ast);
+    if (!devtoolsComponentName) {
+      return {
+        success: false,
+        error: "Could not find TanStackDevtools import"
+      };
+    }
+    const didTransform = transformAndInject(
+      ast,
+      injection,
+      devtoolsComponentName
+    );
+    if (!didTransform) {
+      return {
+        success: false,
+        error: "Plugin already exists or no TanStackDevtools component found"
+      };
+    }
+    const result = gen(ast, {
+      sourceMaps: false,
+      retainLines: false
+    });
+    writeFileSync(filePath, result.code, "utf-8");
+    return { success: true };
+  } catch (e) {
+    console.error("Error injecting plugin:", e);
+    return {
+      success: false,
+      error: e instanceof Error ? e.message : "Unknown error"
+    };
+  }
+}
+export {
+  detectDevtoolsFile,
+  findDevtoolsComponentName,
+  injectPluginIntoFile,
+  transformAndInject
+};
+//# sourceMappingURL=inject-plugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inject-plugin.js","sources":["../../src/inject-plugin.ts"],"sourcesContent":["import { readFileSync, writeFileSync } from 'node:fs'\nimport { gen, parse, t, trav } from './babel'\nimport type { PluginInjection } from '@tanstack/devtools-client'\nimport type { types as Babel } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\n/**\n * Detects if a file imports TanStack devtools packages\n * Handles: import X from '@tanstack/react-devtools'\n *          import * as X from '@tanstack/react-devtools'\n *          import { TanStackDevtools } from '@tanstack/react-devtools'\n */\nconst detectDevtoolsImport = (code: string): boolean => {\n  const devtoolsPackages = [\n    '@tanstack/react-devtools',\n    '@tanstack/solid-devtools',\n    '@tanstack/vue-devtools',\n    '@tanstack/svelte-devtools',\n    '@tanstack/angular-devtools',\n  ]\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n\n    let hasDevtoolsImport = false\n\n    trav(ast, {\n      ImportDeclaration(path) {\n        const importSource = path.node.source.value\n        if (devtoolsPackages.includes(importSource)) {\n          hasDevtoolsImport = true\n          path.stop()\n        }\n      },\n    })\n\n    return hasDevtoolsImport\n  } catch (e) {\n    return false\n  }\n}\n\n/**\n * Finds the TanStackDevtools component name in the file\n * Handles renamed imports and namespace imports\n */\nexport const findDevtoolsComponentName = (\n  ast: ParseResult<Babel.File>,\n): string | null => {\n  let componentName: string | null = null\n  const devtoolsPackages = [\n    '@tanstack/react-devtools',\n    '@tanstack/solid-devtools',\n    '@tanstack/vue-devtools',\n    '@tanstack/svelte-devtools',\n    '@tanstack/angular-devtools',\n  ]\n\n  trav(ast, {\n    ImportDeclaration(path) {\n      const importSource = path.node.source.value\n      if (devtoolsPackages.includes(importSource)) {\n        // Check for: import { TanStackDevtools } from '@tanstack/...'\n        const namedImport = path.node.specifiers.find(\n          (spec) =>\n            t.isImportSpecifier(spec) &&\n            t.isIdentifier(spec.imported) &&\n            spec.imported.name === 'TanStackDevtools',\n        )\n        if (namedImport && t.isImportSpecifier(namedImport)) {\n          componentName = namedImport.local.name\n          path.stop()\n          return\n        }\n\n        // Check for: import * as DevtoolsName from '@tanstack/...'\n        const namespaceImport = path.node.specifiers.find((spec) =>\n          t.isImportNamespaceSpecifier(spec),\n        )\n        if (namespaceImport && t.isImportNamespaceSpecifier(namespaceImport)) {\n          // For namespace imports, we need to look for DevtoolsName.TanStackDevtools\n          componentName = `${namespaceImport.local.name}.TanStackDevtools`\n          path.stop()\n          return\n        }\n      }\n    },\n  })\n\n  return componentName\n}\n\nexport const transformAndInject = (\n  ast: ParseResult<Babel.File>,\n  injection: PluginInjection,\n  devtoolsComponentName: string,\n) => {\n  let didTransform = false\n\n  // Use pluginImport if provided, otherwise generate from package name\n  const importName = injection.pluginImport?.importName\n  const pluginType = injection.pluginImport?.type || 'jsx'\n  const displayName = injection.pluginName\n\n  if (!importName) {\n    return false\n  }\n  // Handle namespace imports like DevtoolsModule.TanStackDevtools\n  const isNamespaceImport = devtoolsComponentName.includes('.')\n\n  // Find and modify the TanStackDevtools JSX element\n  trav(ast, {\n    JSXOpeningElement(path) {\n      const elementName = path.node.name\n      let matches = false\n\n      if (isNamespaceImport) {\n        // Handle <DevtoolsModule.TanStackDevtools />\n        if (t.isJSXMemberExpression(elementName)) {\n          const fullName = `${t.isJSXIdentifier(elementName.object) ? elementName.object.name : ''}.${t.isJSXIdentifier(elementName.property) ? elementName.property.name : ''}`\n          matches = fullName === devtoolsComponentName\n        }\n      } else {\n        // Handle <TanStackDevtools /> or <RenamedDevtools />\n        matches =\n          t.isJSXIdentifier(elementName) &&\n          elementName.name === devtoolsComponentName\n      }\n\n      if (matches) {\n        // Find the plugins prop\n        const pluginsProp = path.node.attributes.find(\n          (attr) =>\n            t.isJSXAttribute(attr) &&\n            t.isJSXIdentifier(attr.name) &&\n            attr.name.name === 'plugins',\n        )\n        // plugins found\n        if (pluginsProp && t.isJSXAttribute(pluginsProp)) {\n          // Check if plugins prop has a value\n          if (\n            pluginsProp.value &&\n            t.isJSXExpressionContainer(pluginsProp.value)\n          ) {\n            const expression = pluginsProp.value.expression\n\n            // If it's an array expression, add our plugin to it\n            if (t.isArrayExpression(expression)) {\n              // Check if plugin already exists\n              const pluginExists = expression.elements.some((element) => {\n                if (!element) return false\n\n                // For function-based plugins, check if the function call exists\n                if (pluginType === 'function') {\n                  return (\n                    t.isCallExpression(element) &&\n                    t.isIdentifier(element.callee) &&\n                    element.callee.name === importName\n                  )\n                }\n\n                // For JSX plugins, check object with name property\n                if (!t.isObjectExpression(element)) return false\n\n                return element.properties.some((prop) => {\n                  if (\n                    !t.isObjectProperty(prop) ||\n                    !t.isIdentifier(prop.key) ||\n                    prop.key.name !== 'name'\n                  ) {\n                    return false\n                  }\n\n                  return (\n                    t.isStringLiteral(prop.value) &&\n                    prop.value.value === displayName\n                  )\n                })\n              })\n\n              if (!pluginExists) {\n                // For function-based plugins, add them directly as function calls\n                // For JSX plugins, wrap them in objects with name and render\n                if (pluginType === 'function') {\n                  // Add directly: FormDevtoolsPlugin()\n                  expression.elements.push(\n                    t.callExpression(t.identifier(importName), []),\n                  )\n                } else {\n                  // Add as object: { name: \"...\", render: <Component /> }\n                  const renderValue = t.jsxElement(\n                    t.jsxOpeningElement(t.jsxIdentifier(importName), [], true),\n                    null,\n                    [],\n                    true,\n                  )\n\n                  expression.elements.push(\n                    t.objectExpression([\n                      t.objectProperty(\n                        t.identifier('name'),\n                        t.stringLiteral(displayName),\n                      ),\n                      t.objectProperty(t.identifier('render'), renderValue),\n                    ]),\n                  )\n                }\n\n                didTransform = true\n              }\n            }\n          }\n        } else {\n          // No plugins prop exists, create one with our plugin\n          // For function-based plugins, add them directly as function calls\n          // For JSX plugins, wrap them in objects with name and render\n          let pluginElement\n          if (pluginType === 'function') {\n            // Add directly: plugins={[FormDevtoolsPlugin()]}\n            pluginElement = t.callExpression(t.identifier(importName), [])\n          } else {\n            // Add as object: plugins={[{ name: \"...\", render: <Component /> }]}\n            const renderValue = t.jsxElement(\n              t.jsxOpeningElement(t.jsxIdentifier(importName), [], true),\n              null,\n              [],\n              true,\n            )\n\n            pluginElement = t.objectExpression([\n              t.objectProperty(\n                t.identifier('name'),\n                t.stringLiteral(displayName),\n              ),\n              t.objectProperty(t.identifier('render'), renderValue),\n            ])\n          }\n\n          path.node.attributes.push(\n            t.jsxAttribute(\n              t.jsxIdentifier('plugins'),\n              t.jsxExpressionContainer(t.arrayExpression([pluginElement])),\n            ),\n          )\n\n          didTransform = true\n        }\n      }\n    },\n  })\n\n  // Add import at the top of the file if transform happened\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (didTransform) {\n    const importDeclaration = t.importDeclaration(\n      [t.importSpecifier(t.identifier(importName), t.identifier(importName))],\n      t.stringLiteral(injection.packageName),\n    )\n\n    // Find the last import declaration\n    let lastImportIndex = -1\n    ast.program.body.forEach((node, index) => {\n      if (t.isImportDeclaration(node)) {\n        lastImportIndex = index\n      }\n    })\n\n    // Insert after the last import or at the beginning\n    ast.program.body.splice(lastImportIndex + 1, 0, importDeclaration)\n  }\n\n  return didTransform\n}\n\n/**\n * Detects if a file contains TanStack devtools import\n */\nexport function detectDevtoolsFile(code: string): boolean {\n  return detectDevtoolsImport(code)\n}\n\n/**\n * Injects a plugin into the TanStackDevtools component in a file\n * Reads the file, transforms it, and writes it back\n */\nexport function injectPluginIntoFile(\n  filePath: string,\n  injection: PluginInjection,\n): { success: boolean; error?: string } {\n  try {\n    // Read the file\n    const code = readFileSync(filePath, 'utf-8')\n\n    // Parse the code\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n\n    // Find the devtools component name (handles renamed imports)\n    const devtoolsComponentName = findDevtoolsComponentName(ast)\n    if (!devtoolsComponentName) {\n      return {\n        success: false,\n        error: 'Could not find TanStackDevtools import',\n      }\n    }\n\n    // Transform and inject\n    const didTransform = transformAndInject(\n      ast,\n      injection,\n      devtoolsComponentName,\n    )\n\n    if (!didTransform) {\n      return {\n        success: false,\n        error: 'Plugin already exists or no TanStackDevtools component found',\n      }\n    }\n\n    // Generate the new code\n    const result = gen(ast, {\n      sourceMaps: false,\n      retainLines: false,\n    })\n\n    // Write back to file\n    writeFileSync(filePath, result.code, 'utf-8')\n\n    return { success: true }\n  } catch (e) {\n    console.error('Error injecting plugin:', e)\n    return {\n      success: false,\n      error: e instanceof Error ? e.message : 'Unknown error',\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/inject-plugin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/package-manager.d.ts

@@ -0,0 +1,16 @@
+import { OutdatedDeps } from '@tanstack/devtools-client';
+/**
+ * Adds a plugin to the devtools configuration file
+ */
+export declare const addPluginToDevtools: (devtoolsFileId: string | null, packageName: string, pluginName: string, pluginImport?: {
+    importName: string;
+    type: "jsx" | "function";
+}) => {
+    success: boolean;
+    error?: string;
+};
+export declare const installPackage: (packageName: string) => Promise<{
+    success: boolean;
+    error?: string;
+}>;
+export declare const emitOutdatedDeps: () => Promise<OutdatedDeps | null>;

package/dist/esm/package-manager.js

@@ -0,0 +1,139 @@
+import { exec } from "node:child_process";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { devtoolsEventClient } from "@tanstack/devtools-client";
+import chalk from "chalk";
+import { tryParseJson, readPackageJson } from "./utils.js";
+import { injectPluginIntoFile } from "./inject-plugin.js";
+const getOutdatedCommand = (packageManager) => {
+  switch (packageManager) {
+    case "yarn":
+      return "yarn outdated --json";
+    case "pnpm":
+      return "pnpm outdated --format json";
+    case "bun":
+      return "bun outdated --json";
+    case "npm":
+    default:
+      return "npm outdated --json";
+  }
+};
+const addPluginToDevtools = (devtoolsFileId, packageName, pluginName, pluginImport) => {
+  if (!devtoolsFileId) {
+    const error = "Devtools file not found";
+    console.log(
+      chalk.yellowBright(
+        `[@tanstack/devtools-vite] Could not add plugin. ${error}.`
+      )
+    );
+    return { success: false, error };
+  }
+  const result = injectPluginIntoFile(devtoolsFileId, {
+    packageName,
+    pluginName,
+    pluginImport
+  });
+  if (result.success) {
+    console.log(
+      chalk.greenBright(
+        `[@tanstack/devtools-vite] Successfully added ${packageName} to devtools!`
+      )
+    );
+  } else {
+    console.log(
+      chalk.yellowBright(
+        `[@tanstack/devtools-vite] Could not add plugin: ${result.error}`
+      )
+    );
+  }
+  return result;
+};
+const getInstallCommand = (packageManager, packageName) => {
+  switch (packageManager) {
+    case "yarn":
+      return `yarn add -D ${packageName}`;
+    case "pnpm":
+      return `pnpm add -D ${packageName}`;
+    case "bun":
+      return `bun add -D ${packageName}`;
+    case "npm":
+    default:
+      return `npm install -D ${packageName}`;
+  }
+};
+const installPackage = async (packageName) => {
+  return new Promise((resolve) => {
+    const packageManager = detectPackageManager();
+    const installCommand = getInstallCommand(packageManager, packageName);
+    console.log(
+      chalk.blueBright(
+        `[@tanstack/devtools-vite] Installing ${packageName}...`
+      )
+    );
+    exec(installCommand, async (installError) => {
+      if (installError) {
+        console.error(
+          chalk.redBright(
+            `[@tanstack/devtools-vite] Failed to install ${packageName}:`
+          ),
+          installError.message
+        );
+        resolve({
+          success: false,
+          error: installError.message
+        });
+        return;
+      }
+      console.log(
+        chalk.greenBright(
+          `[@tanstack/devtools-vite] Successfully installed ${packageName}`
+        )
+      );
+      const updatedPackageJson = await readPackageJson();
+      devtoolsEventClient.emit("package-json-updated", {
+        packageJson: updatedPackageJson
+      });
+      resolve({ success: true });
+    });
+  });
+};
+const detectPackageManager = () => {
+  const cwd = process.cwd();
+  if (existsSync(join(cwd, "bun.lockb")) || existsSync(join(cwd, "bun.lock"))) {
+    return "bun";
+  }
+  if (existsSync(join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (existsSync(join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  if (existsSync(join(cwd, "package-lock.json"))) {
+    return "npm";
+  }
+  return "pnpm";
+};
+const emitOutdatedDeps = async () => {
+  return await new Promise((resolve) => {
+    const packageManager = detectPackageManager();
+    const outdatedCommand = getOutdatedCommand(packageManager);
+    exec(outdatedCommand, (_, stdout) => {
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson(stdout);
+        if (!newOutdatedDeps) {
+          return;
+        }
+        devtoolsEventClient.emit("outdated-deps-read", {
+          outdatedDeps: newOutdatedDeps
+        });
+        resolve(newOutdatedDeps);
+      }
+    });
+  });
+};
+export {
+  addPluginToDevtools,
+  emitOutdatedDeps,
+  installPackage
+};
+//# sourceMappingURL=package-manager.js.map

package/dist/esm/package-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package-manager.js","sources":["../../src/package-manager.ts"],"sourcesContent":["import { exec } from 'node:child_process'\nimport { existsSync } from 'node:fs'\nimport { join } from 'node:path'\nimport { devtoolsEventClient } from '@tanstack/devtools-client'\nimport chalk from 'chalk'\nimport { readPackageJson, tryParseJson } from './utils'\nimport { injectPluginIntoFile } from './inject-plugin'\nimport type { OutdatedDeps } from '@tanstack/devtools-client'\n\n/**\n * Gets the outdated command for the detected package manager\n */\nconst getOutdatedCommand = (packageManager: string): string => {\n  switch (packageManager) {\n    case 'yarn':\n      return 'yarn outdated --json'\n    case 'pnpm':\n      return 'pnpm outdated --format json'\n    case 'bun':\n      return 'bun outdated --json'\n    case 'npm':\n    default:\n      return 'npm outdated --json'\n  }\n}\n\n/**\n * Adds a plugin to the devtools configuration file\n */\nexport const addPluginToDevtools = (\n  devtoolsFileId: string | null,\n  packageName: string,\n  pluginName: string,\n  pluginImport?: { importName: string; type: 'jsx' | 'function' },\n): { success: boolean; error?: string } => {\n  // Check if we found the devtools file\n  if (!devtoolsFileId) {\n    const error = 'Devtools file not found'\n    console.log(\n      chalk.yellowBright(\n        `[@tanstack/devtools-vite] Could not add plugin. ${error}.`,\n      ),\n    )\n    return { success: false, error }\n  }\n\n  // Inject the plugin into the file\n  const result = injectPluginIntoFile(devtoolsFileId, {\n    packageName,\n    pluginName,\n    pluginImport,\n  })\n\n  if (result.success) {\n    console.log(\n      chalk.greenBright(\n        `[@tanstack/devtools-vite] Successfully added ${packageName} to devtools!`,\n      ),\n    )\n  } else {\n    console.log(\n      chalk.yellowBright(\n        `[@tanstack/devtools-vite] Could not add plugin: ${result.error}`,\n      ),\n    )\n  }\n\n  return result\n}\n/**\n * Gets the install command for the detected package manager\n */\nconst getInstallCommand = (\n  packageManager: string,\n  packageName: string,\n): string => {\n  switch (packageManager) {\n    case 'yarn':\n      return `yarn add -D ${packageName}`\n    case 'pnpm':\n      return `pnpm add -D ${packageName}`\n    case 'bun':\n      return `bun add -D ${packageName}`\n    case 'npm':\n    default:\n      return `npm install -D ${packageName}`\n  }\n}\n\nexport const installPackage = async (\n  packageName: string,\n): Promise<{\n  success: boolean\n  error?: string\n}> => {\n  return new Promise((resolve) => {\n    const packageManager = detectPackageManager()\n    const installCommand = getInstallCommand(packageManager, packageName)\n\n    console.log(\n      chalk.blueBright(\n        `[@tanstack/devtools-vite] Installing ${packageName}...`,\n      ),\n    )\n\n    exec(installCommand, async (installError) => {\n      if (installError) {\n        console.error(\n          chalk.redBright(\n            `[@tanstack/devtools-vite] Failed to install ${packageName}:`,\n          ),\n          installError.message,\n        )\n        resolve({\n          success: false,\n          error: installError.message,\n        })\n        return\n      }\n\n      console.log(\n        chalk.greenBright(\n          `[@tanstack/devtools-vite] Successfully installed ${packageName}`,\n        ),\n      )\n\n      // Read the updated package.json and emit the event\n      const updatedPackageJson = await readPackageJson()\n      devtoolsEventClient.emit('package-json-updated', {\n        packageJson: updatedPackageJson,\n      })\n\n      resolve({ success: true })\n    })\n  })\n}\n\n/**\n * Detects the package manager used in the project by checking for lock files\n */\nconst detectPackageManager = (): 'npm' | 'yarn' | 'pnpm' | 'bun' => {\n  const cwd = process.cwd()\n\n  // Check for lock files in order of specificity\n  if (existsSync(join(cwd, 'bun.lockb')) || existsSync(join(cwd, 'bun.lock'))) {\n    return 'bun'\n  }\n  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) {\n    return 'pnpm'\n  }\n  if (existsSync(join(cwd, 'yarn.lock'))) {\n    return 'yarn'\n  }\n  if (existsSync(join(cwd, 'package-lock.json'))) {\n    return 'npm'\n  }\n\n  // Default to pnpm if no lock file is found\n  return 'pnpm'\n}\n\nexport const emitOutdatedDeps = async () => {\n  return await new Promise<OutdatedDeps | null>((resolve) => {\n    const packageManager = detectPackageManager()\n    const outdatedCommand = getOutdatedCommand(packageManager)\n\n    exec(outdatedCommand, (_, stdout) => {\n      // outdated commands exit with code 1 if there are outdated packages, but still output valid JSON\n      if (stdout) {\n        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)\n        if (!newOutdatedDeps) {\n          return\n        }\n        devtoolsEventClient.emit('outdated-deps-read', {\n          outdatedDeps: newOutdatedDeps,\n        })\n        resolve(newOutdatedDeps)\n      }\n    })\n  })\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/plugin.js

@@ -1,30 +1,15 @@
-import { exec } from "node:child_process";
 import { devtoolsEventClient } from "@tanstack/devtools-client";
 import { ServerEventBus } from "@tanstack/devtools-event-bus/server";
 import { normalizePath } from "vite";
 import chalk from "chalk";
-import { handleDevToolsViteRequest, readPackageJson, tryParseJson } from "./utils.js";
+import { handleDevToolsViteRequest, readPackageJson } from "./utils.js";
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from "./editor.js";
 import { removeDevtools } from "./remove-devtools.js";
 import { addSourceToJsx } from "./inject-source.js";
 import { enhanceConsoleLog } from "./enhance-logs.js";
+import { detectDevtoolsFile, injectPluginIntoFile } from "./inject-plugin.js";
+import { emitOutdatedDeps, installPackage, addPluginToDevtools } from "./package-manager.js";
 const defineDevtoolsConfig = (config) => config;
-const emitOutdatedDeps = async () => {
-  return await new Promise((resolve) => {
-    exec("npm outdated --json", (_, stdout) => {
-      if (stdout) {
-        const newOutdatedDeps = tryParseJson(stdout);
-        if (!newOutdatedDeps) {
-          return;
-        }
-        devtoolsEventClient.emit("outdated-deps-read", {
-          outdatedDeps: newOutdatedDeps
-        });
-        resolve(newOutdatedDeps);
-      }
-    });
-  });
-};
 const devtools = (args) => {
   let port = 5173;
   const logging = args?.logging ?? true;
@@ -33,6 +18,7 @@ const devtools = (args) => {
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true;
   const serverBusEnabled = args?.eventBusConfig?.enabled ?? true;
   const bus = new ServerEventBus(args?.eventBusConfig);
+  let devtoolsFileId = null;
   return [
     {
       enforce: "pre",
@@ -100,13 +86,12 @@ const devtools = (args) => {
     },
     {
       name: "@tanstack/devtools:remove-devtools-on-build",
-      apply(_, { command }) {
-        return command === "build" && removeDevtoolsOnBuild;
+      apply(config, { command }) {
+        return (command !== "serve" || config.mode === "production") && removeDevtoolsOnBuild;
       },
       enforce: "pre",
       transform(code, id) {
-        if (id.includes("node_modules") || id.includes("?raw") || id.includes("dist") || id.includes("build"))
-          return;
+        if (id.includes("node_modules") || id.includes("?raw")) return;
         const transform = removeDevtools(code, id);
         if (!transform) return;
         if (logging) {
@@ -129,6 +114,139 @@ ${chalk.greenBright(`[@tanstack/devtools-vite]`)} Removed devtools code from: ${
       async configureServer() {
         const packageJson = await readPackageJson();
         const outdatedDeps = emitOutdatedDeps().then((deps) => deps);
+        devtoolsEventClient.on("install-devtools", async (event) => {
+          const result = await installPackage(event.payload.packageName);
+          devtoolsEventClient.emit("devtools-installed", {
+            packageName: event.payload.packageName,
+            success: result.success,
+            error: result.error
+          });
+          if (result.success) {
+            const { packageName, pluginName, pluginImport } = event.payload;
+            console.log(
+              chalk.blueBright(
+                `[@tanstack/devtools-vite] Auto-adding ${packageName} to devtools...`
+              )
+            );
+            const injectResult = addPluginToDevtools(
+              devtoolsFileId,
+              packageName,
+              pluginName,
+              pluginImport
+            );
+            if (injectResult.success) {
+              devtoolsEventClient.emit("plugin-added", {
+                packageName,
+                success: true
+              });
+              const updatedPackageJson = await readPackageJson();
+              devtoolsEventClient.emit("package-json-read", {
+                packageJson: updatedPackageJson
+              });
+            }
+          }
+        });
+        devtoolsEventClient.on("add-plugin-to-devtools", (event) => {
+          const { packageName, pluginName, pluginImport } = event.payload;
+          console.log(
+            chalk.blueBright(
+              `[@tanstack/devtools-vite] Adding ${packageName} to devtools...`
+            )
+          );
+          const result = addPluginToDevtools(
+            devtoolsFileId,
+            packageName,
+            pluginName,
+            pluginImport
+          );
+          devtoolsEventClient.emit("plugin-added", {
+            packageName,
+            success: result.success,
+            error: result.error
+          });
+        });
+        devtoolsEventClient.on("bump-package-version", async (event) => {
+          const {
+            packageName,
+            devtoolsPackage,
+            pluginName,
+            minVersion,
+            pluginImport
+          } = event.payload;
+          console.log(
+            chalk.blueBright(
+              `[@tanstack/devtools-vite] Bumping ${packageName} to version ${minVersion}...`
+            )
+          );
+          const packageWithVersion = minVersion ? `${packageName}@^${minVersion}` : packageName;
+          const result = await installPackage(packageWithVersion);
+          if (!result.success) {
+            console.log(
+              chalk.redBright(
+                `[@tanstack/devtools-vite] Failed to bump ${packageName}: ${result.error}`
+              )
+            );
+            devtoolsEventClient.emit("devtools-installed", {
+              packageName: devtoolsPackage,
+              success: false,
+              error: result.error
+            });
+            return;
+          }
+          console.log(
+            chalk.greenBright(
+              `[@tanstack/devtools-vite] Successfully bumped ${packageName} to ${minVersion}!`
+            )
+          );
+          if (!devtoolsFileId) {
+            console.log(
+              chalk.yellowBright(
+                `[@tanstack/devtools-vite] Devtools file not found. Skipping auto-injection.`
+              )
+            );
+            devtoolsEventClient.emit("devtools-installed", {
+              packageName: devtoolsPackage,
+              success: true
+            });
+            return;
+          }
+          console.log(
+            chalk.blueBright(
+              `[@tanstack/devtools-vite] Adding ${devtoolsPackage} to devtools...`
+            )
+          );
+          const injectResult = injectPluginIntoFile(devtoolsFileId, {
+            packageName: devtoolsPackage,
+            pluginName,
+            pluginImport
+          });
+          if (injectResult.success) {
+            console.log(
+              chalk.greenBright(
+                `[@tanstack/devtools-vite] Successfully added ${devtoolsPackage} to devtools!`
+              )
+            );
+            devtoolsEventClient.emit("plugin-added", {
+              packageName: devtoolsPackage,
+              success: true
+            });
+            const updatedPackageJson = await readPackageJson();
+            devtoolsEventClient.emit("package-json-read", {
+              packageJson: updatedPackageJson
+            });
+          } else {
+            console.log(
+              chalk.redBright(
+                `[@tanstack/devtools-vite] Failed to add ${devtoolsPackage} to devtools: ${injectResult.error}`
+              )
+            );
+            devtoolsEventClient.emit("plugin-added", {
+              packageName: devtoolsPackage,
+              success: false,
+              error: injectResult.error
+            });
+          }
+        });
         devtoolsEventClient.on("mounted", async () => {
           devtoolsEventClient.emit("outdated-deps-read", {
             outdatedDeps: await outdatedDeps
@@ -159,6 +277,21 @@ ${chalk.greenBright(`[@tanstack/devtools-vite]`)} Removed devtools code from: ${
           return;
         return enhanceConsoleLog(code, id, port);
       }
+    },
+    {
+      name: "@tanstack/devtools:inject-plugin",
+      apply(config, { command }) {
+        return config.mode === "development" && command === "serve";
+      },
+      transform(code, id) {
+        if (!devtoolsFileId && detectDevtoolsFile(code)) {
+          const [filePath] = id.split("?");
+          if (filePath) {
+            devtoolsFileId = filePath;
+          }
+        }
+        return void 0;
+      }
     }
   ];
 };