@tanstack/devtools-vite 0.3.5 → 0.3.7

package/src/plugin.ts

@@ -1,11 +1,18 @@
+import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import { handleDevToolsViteRequest } from './utils'
+import { handleDevToolsViteRequest, readPackageJson } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import { enhanceConsoleLog } from './enhance-logs'
+import { detectDevtoolsFile, injectPluginIntoFile } from './inject-plugin'
+import {
+  addPluginToDevtools,
+  emitOutdatedDeps,
+  installPackage,
+} from './package-manager'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -18,7 +25,13 @@ export type TanStackDevtoolsViteConfig = {
   /**
    * The configuration options for the server event bus
    */
-  eventBusConfig?: ServerEventBusConfig
+  eventBusConfig?: ServerEventBusConfig & {
+    /**
+     * Should the server event bus be enabled or not
+     * @default true
+     */
+    enabled?: boolean // defaults to true
+  }
   /**
    * Configuration for enhanced logging.
    */
@@ -61,8 +74,11 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
+  const serverBusEnabled = args?.eventBusConfig?.enabled ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
 
+  let devtoolsFileId: string | null = null
+
   return [
     {
       enforce: 'pre',
@@ -117,7 +133,9 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return config.mode === 'development'
       },
       configureServer(server) {
-        bus.start()
+        if (serverBusEnabled) {
+          bus.start()
+        }
 
         server.middlewares.use((req, _res, next) => {
           if (req.socket.localPort && req.socket.localPort !== port) {
@@ -182,6 +200,209 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return transform
       },
     },
+    {
+      name: '@tanstack/devtools:event-client-setup',
+      apply(config, { command }) {
+        if (
+          process.env.CI ||
+          process.env.NODE_ENV !== 'development' ||
+          command !== 'serve'
+        )
+          return false
+        return config.mode === 'development'
+      },
+      async configureServer() {
+        const packageJson = await readPackageJson()
+        const outdatedDeps = emitOutdatedDeps().then((deps) => deps)
+
+        // Listen for package installation requests
+        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 installation was successful, automatically add the plugin to devtools
+          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) {
+              // Emit plugin-added event so the UI updates
+              devtoolsEventClient.emit('plugin-added', {
+                packageName,
+                success: true,
+              })
+
+              // Also re-read package.json to update the UI with the newly installed package
+              const updatedPackageJson = await readPackageJson()
+              devtoolsEventClient.emit('package-json-read', {
+                packageJson: updatedPackageJson,
+              })
+            }
+          }
+        })
+
+        // Listen for add plugin to devtools requests
+        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,
+          })
+        })
+
+        // Handle bump-package-version event
+        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}...`,
+            ),
+          )
+
+          // Install the package with the minimum version
+          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}!`,
+            ),
+          )
+
+          // Check if we found the devtools file
+          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
+          }
+
+          // Now inject the devtools plugin
+          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,
+            })
+
+            // Re-read package.json to update the UI
+            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,
+            })
+          }
+        })
+
+        // whenever a client mounts we send all the current info to the subscribers
+        devtoolsEventClient.on('mounted', async () => {
+          devtoolsEventClient.emit('outdated-deps-read', {
+            outdatedDeps: await outdatedDeps,
+          })
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson,
+          })
+        })
+      },
+      async handleHotUpdate({ file }) {
+        if (file.endsWith('package.json')) {
+          const newPackageJson = await readPackageJson()
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson: newPackageJson,
+          })
+          emitOutdatedDeps()
+        }
+      },
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',
@@ -202,5 +423,23 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return enhanceConsoleLog(code, id, port)
       },
     },
+    {
+      name: '@tanstack/devtools:inject-plugin',
+      apply(config, { command }) {
+        return config.mode === 'development' && command === 'serve'
+      },
+      transform(code, id) {
+        // First pass: find where TanStackDevtools is imported
+        if (!devtoolsFileId && detectDevtoolsFile(code)) {
+          // Extract actual file path (remove query params)
+          const [filePath] = id.split('?')
+          if (filePath) {
+            devtoolsFileId = filePath
+          }
+        }
+
+        return undefined
+      },
+    },
   ]
 }

package/src/utils.ts

@@ -1,7 +1,8 @@
+import fs from 'node:fs/promises'
 import { normalizePath } from 'vite'
-// import fs from 'node:fs/promises'
 import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { PackageJson } from '@tanstack/devtools-client'
 
 export const handleDevToolsViteRequest = (
   req: Connect.IncomingMessage,
@@ -66,23 +67,28 @@ export const parseOpenSourceParam = (source: string) => {
   return { file, line, column }
 }
 
-/* export const tryReadFile = async (
-  filePath: string
-) => {
+const tryReadFile = async (filePath: string) => {
   try {
     const data = await fs.readFile(filePath, 'utf-8')
     return data
   } catch (error) {
-
     return null
   }
 }
 
-export const tryParseJson = (jsonString: string) => {
+export const tryParseJson = <T extends any>(
+  jsonString: string | null | undefined,
+) => {
+  if (!jsonString) {
+    return null
+  }
   try {
     const result = JSON.parse(jsonString)
-    return result
+    return result as T
   } catch (error) {
     return null
   }
-} */
+}
+
+export const readPackageJson = async () =>
+  tryParseJson<PackageJson>(await tryReadFile(process.cwd() + '/package.json'))