fix tests

Author: AlemTuzlak

.changeset/curly-bikes-play.md

@@ -0,0 +1,13 @@
+---
+'@tanstack/devtools-event-client': patch
+'@tanstack/devtools-client': patch
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools': patch
+---
+
+
+Number of improvements to various parts of the DevTools:
+- Update event client to allow users to disable it
+- Allow trigger to be completely hidden
+- Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
+- Fix bugs inside of the DevTools like plugins being nuked on page refresh.

examples/angular/ssr/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "ssr",
+  "version": "0.0.0",
+  "private": true
+}

examples/react/basic/src/package-json-panel.tsx

@@ -18,11 +18,17 @@ export const PackageJsonPanel = () => {
 
   useEffect(() => {
     devtoolsEventClient.emit('mounted', undefined as any)
-    const off = devtoolsEventClient.on('ready', (event) => {
-      setPackageJson(event.payload.packageJson)
+    const cleanupOutdated = devtoolsEventClient.on("outdated-deps-read", (event) => {
       setOutdatedDeps(event.payload.outdatedDeps || {})
     })
-    return off
+    const cleanupPackageJson = devtoolsEventClient.on("package-json-read", (event) => {
+      console.log('package-json-read', event)
+      setPackageJson(event.payload.packageJson)
+    })
+    return () => {
+      cleanupOutdated()
+      cleanupPackageJson()
+    }
   }, [])
 
   const hasOutdated = Object.keys(outdatedDeps).length > 0
@@ -120,11 +126,11 @@ export const PackageJsonPanel = () => {
   }) => {
     const info = outdatedDeps[dep] as
       | {
-          current: string
-          wanted: string
-          latest: string
-          type?: 'dependencies' | 'devDependencies'
-        }
+        current: string
+        wanted: string
+        latest: string
+        type?: 'dependencies' | 'devDependencies'
+      }
       | undefined
     const current = info?.current ?? specified
     const latest = info?.latest
@@ -147,11 +153,11 @@ export const PackageJsonPanel = () => {
   const UpgradeRowActions = ({ name }: { name: string }) => {
     const info = outdatedDeps[name] as
       | {
-          current: string
-          wanted: string
-          latest: string
-          type?: 'dependencies' | 'devDependencies'
-        }
+        current: string
+        wanted: string
+        latest: string
+        type?: 'dependencies' | 'devDependencies'
+      }
       | undefined
     if (!info) return null
     return (
@@ -242,11 +248,11 @@ export const PackageJsonPanel = () => {
             {Object.entries(deps || {}).map(([dep, version]) => {
               const info = outdatedDeps[dep] as
                 | {
-                    current: string
-                    wanted: string
-                    latest: string
-                    type?: 'dependencies' | 'devDependencies'
-                  }
+                  current: string
+                  wanted: string
+                  latest: string
+                  type?: 'dependencies' | 'devDependencies'
+                }
                 | undefined
               const isOutdated = !!info && info.current !== info.latest
               return (

package.json

@@ -52,7 +52,7 @@
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",
-      "limit": "1 KB"
+      "limit": "1.1 KB"
     }
   ],
   "devDependencies": {
@@ -85,4 +85,4 @@
     "@tanstack/solid-devtools": "workspace:*",
     "@tanstack/devtools-vite": "workspace:*"
   }
-}
+}

packages/devtools-client/package.json

@@ -42,15 +42,10 @@
     "clean": "premove ./build ./dist",
     "lint:fix": "eslint ./src --fix",
     "test:eslint": "eslint ./src",
-    "test:lib": "vitest",
+    "test:lib": "vitest --passWithNoTests",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
     "build": "vite build"
-  },
-  "devDependencies": {
-    "tsup": "^8.5.0",
-    "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8"
   }
-}
+}

packages/devtools-client/src/index.ts

@@ -1,25 +1,58 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
+export interface PackageJson {
+  name?: string
+  version?: string
+  description?: string
+  author?: string
+  license?: string
+  scripts?: Record<string, string>
+  keywords?: Array<string>
+  homepage?: string
+  repository?:
+    | string
+    | {
+        type: string
+        url: string
+      }
+  bugs?:
+    | string
+    | {
+        url?: string
+        email?: string
+      }
+  readme?: string
+  packageManager?: string
+  engines?: Record<string, string>
+  private?: boolean
+  type?: 'module' | 'commonjs'
+  overrides?: Record<string, string>
+  dependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+  peerDependencies?: Record<string, string>
+  [key: string]: any
+}
+
+export interface OutdatedDeps {
+  [key: string]: {
+    current: string
+    wanted: string
+    latest: string
+    dependent: string
+    location: string
+  }
+}
+
 interface EventMap {
   'tanstack-devtools-core:ready': {
-    packageJson: {
-      name?: string
-      version?: string
-      dependencies?: Record<string, string>
-      devDependencies?: Record<string, string>
-      peerDependencies?: Record<string, string>
-      [key: string]: any
-    } | null
-    outdatedDeps: Record<
-      string,
-      {
-        current: string
-        wanted: string
-        latest: string
-        dependent: string
-        location: string
-      }
-    > | null
+    packageJson: PackageJson | null
+    outdatedDeps: OutdatedDeps | null
+  }
+  'tanstack-devtools-core:outdated-deps-read': {
+    outdatedDeps: OutdatedDeps | null
+  }
+  'tanstack-devtools-core:package-json-read': {
+    packageJson: PackageJson | null
   }
   'tanstack-devtools-core:mounted': void
 }

packages/devtools-client/tsconfig.json

@@ -1,8 +1,4 @@
 {
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
-  },
   "extends": "../../tsconfig.json",
   "include": [
     "src",

packages/devtools-vite/package.json

@@ -57,7 +57,6 @@
     "@babel/traverse": "^7.28.4",
     "@babel/types": "^7.28.4",
     "@tanstack/devtools-client": "workspace:*",
-    "@tanstack/devtools-event-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
     "chalk": "^5.6.2",
     "launch-editor": "^2.11.1"
@@ -68,4 +67,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
+}

packages/devtools-vite/src/plugin.ts

@@ -12,6 +12,7 @@ import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import { enhanceConsoleLog } from './enhance-logs'
+import type { OutdatedDeps } from '@tanstack/devtools-client'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -24,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,33 +68,33 @@ export type TanStackDevtoolsViteConfig = {
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
   config
 
-export const devtools = async (
-  args?: TanStackDevtoolsViteConfig,
-): Promise<Array<Plugin>> => {
+const emitOutdatedDeps = async () => {
+  return await new Promise<OutdatedDeps | null>((resolve) => {
+    exec('npm outdated --json', (_, stdout) => {
+      // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)
+        if (!newOutdatedDeps) {
+          return
+        }
+        devtoolsEventClient.emit('outdated-deps-read', {
+          outdatedDeps: newOutdatedDeps,
+        })
+        resolve(newOutdatedDeps)
+      }
+    })
+  })
+}
+
+export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
   const logging = args?.logging ?? true
   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)
-  const packageJson = await readPackageJson()
-  let outdatedDeps: any = null
-  exec('npm outdated --json', (_, stdout) => {
-    // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
-    if (stdout) {
-      outdatedDeps = tryParseJson(stdout)
-      devtoolsEventClient.emit('ready', {
-        packageJson,
-        outdatedDeps,
-      })
-    }
-  })
-  devtoolsEventClient.on('mounted', () => {
-    devtoolsEventClient.emit('ready', {
-      packageJson,
-      outdatedDeps,
-    })
-  })
+
   return [
     {
       enforce: 'pre',
@@ -142,7 +149,9 @@ export const devtools = async (
         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) {
@@ -208,12 +217,37 @@ export const devtools = async (
       },
     },
     {
-      name: '@tanstack/devtools:listener',
+      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)
+
+        // 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')) {
-          console.log(packageJson)
           const newPackageJson = await readPackageJson()
-          console.log(newPackageJson)
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson: newPackageJson,
+          })
+          emitOutdatedDeps()
         }
       },
     },