@tanstack/devtools-vite 0.3.5 → 0.3.7

package/src/inject-plugin.ts

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

package/src/package-manager.ts

@@ -0,0 +1,181 @@
+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 { readPackageJson, tryParseJson } from './utils'
+import { injectPluginIntoFile } from './inject-plugin'
+import type { OutdatedDeps } from '@tanstack/devtools-client'
+
+/**
+ * Gets the outdated command for the detected package manager
+ */
+const getOutdatedCommand = (packageManager: string): string => {
+  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'
+  }
+}
+
+/**
+ * Adds a plugin to the devtools configuration file
+ */
+export const addPluginToDevtools = (
+  devtoolsFileId: string | null,
+  packageName: string,
+  pluginName: string,
+  pluginImport?: { importName: string; type: 'jsx' | 'function' },
+): { success: boolean; error?: string } => {
+  // Check if we found the devtools file
+  if (!devtoolsFileId) {
+    const error = 'Devtools file not found'
+    console.log(
+      chalk.yellowBright(
+        `[@tanstack/devtools-vite] Could not add plugin. ${error}.`,
+      ),
+    )
+    return { success: false, error }
+  }
+
+  // Inject the plugin into the file
+  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
+}
+/**
+ * Gets the install command for the detected package manager
+ */
+const getInstallCommand = (
+  packageManager: string,
+  packageName: string,
+): string => {
+  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}`
+  }
+}
+
+export const installPackage = async (
+  packageName: string,
+): Promise<{
+  success: boolean
+  error?: string
+}> => {
+  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}`,
+        ),
+      )
+
+      // Read the updated package.json and emit the event
+      const updatedPackageJson = await readPackageJson()
+      devtoolsEventClient.emit('package-json-updated', {
+        packageJson: updatedPackageJson,
+      })
+
+      resolve({ success: true })
+    })
+  })
+}
+
+/**
+ * Detects the package manager used in the project by checking for lock files
+ */
+const detectPackageManager = (): 'npm' | 'yarn' | 'pnpm' | 'bun' => {
+  const cwd = process.cwd()
+
+  // Check for lock files in order of specificity
+  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'
+  }
+
+  // Default to pnpm if no lock file is found
+  return 'pnpm'
+}
+
+export const emitOutdatedDeps = async () => {
+  return await new Promise<OutdatedDeps | null>((resolve) => {
+    const packageManager = detectPackageManager()
+    const outdatedCommand = getOutdatedCommand(packageManager)
+
+    exec(outdatedCommand, (_, stdout) => {
+      // outdated commands exit with code 1 if there are outdated packages, but still output valid JSON
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)
+        if (!newOutdatedDeps) {
+          return
+        }
+        devtoolsEventClient.emit('outdated-deps-read', {
+          outdatedDeps: newOutdatedDeps,
+        })
+        resolve(newOutdatedDeps)
+      }
+    })
+  })
+}