refactor: use internal devtools config (#21609)

Author: webfansplz

packages/vite/package.json

@@ -96,7 +96,7 @@
     "@rollup/pluginutils": "^5.3.0",
     "@types/escape-html": "^1.0.4",
     "@types/pnpapi": "^0.0.5",
-    "@vitejs/devtools": "^0.0.0-alpha.29",
+    "@vitejs/devtools": "^0.0.0-alpha.31",
     "artichokie": "^0.4.2",
     "baseline-browser-mapping": "^2.9.19",
     "cac": "^6.7.14",
@@ -143,7 +143,7 @@
   },
   "peerDependencies": {
     "@types/node": "^20.19.0 || >=22.12.0",
-    "@vitejs/devtools": "^0.0.0-alpha.24",
+    "@vitejs/devtools": "^0.0.0-alpha.31",
     "esbuild": "^0.27.0",
     "jiti": ">=1.21.0",
     "less": "^4.0.0",

packages/vite/rolldown.config.ts

@@ -81,12 +81,12 @@ const nodeConfig = defineConfig({
     'fsevents',
     /^rolldown\//,
     /^tsx\//,
+    /^@vitejs\/devtools\//,
     /^#/,
     'sugarss', // postcss-import -> sugarss
     'supports-color',
     'utf-8-validate', // ws
     'bufferutil', // ws
-    '@vitejs/devtools/cli-commands',
     ...Object.keys(pkg.dependencies),
     ...Object.keys(pkg.peerDependencies),
   ],

packages/vite/src/node/config.ts

@@ -15,7 +15,10 @@ import {
   type RolldownOptions,
   rolldown,
 } from 'rolldown'
-import type { StartOptions } from '@vitejs/devtools/cli-commands'
+import type {
+  DevToolsConfig,
+  ResolvedDevToolsConfig,
+} from '@vitejs/devtools/config'
 import type { Alias, AliasOptions } from '#dep-types/alias'
 import type { AnymatchFn } from '../types/anymatch'
 import { withTrailingSlash } from '../shared/utils'
@@ -620,15 +623,6 @@ export interface ResolvedWorkerOptions {
   rolldownOptions: RolldownOptions
 }
 
-export interface DevToolsConfig extends Partial<StartOptions> {
-  enabled: boolean
-}
-
-export interface ResolvedDevToolsConfig {
-  config: Omit<DevToolsConfig, 'enabled'> & { host: string }
-  enabled: boolean
-}
-
 export interface InlineConfig extends UserConfig {
   configFile?: string | false
   /** @experimental */
@@ -748,18 +742,32 @@ export interface ResolvedConfig extends Readonly<
 export async function resolveDevToolsConfig(
   config: DevToolsConfig | boolean | undefined,
   host: string | boolean | undefined,
+  logger: Logger,
 ): Promise<ResolvedDevToolsConfig> {
+  const isEnabled = config === true || !!(config && config.enabled)
   const resolvedHostname = await resolveHostname(host)
   const fallbackHostname = resolvedHostname.host ?? 'localhost'
-
-  return {
-    enabled: config === true || !!(config && config.enabled),
+  const fallbackConfig = {
     config: {
-      ...(isObject(config) ? config : {}),
-      host: isObject(config)
-        ? (config?.host ?? fallbackHostname)
-        : fallbackHostname,
+      host: fallbackHostname,
     },
+    enabled: false,
+  }
+  if (!isEnabled) {
+    return fallbackConfig
+  }
+
+  try {
+    const { normalizeDevToolsConfig } = await import('@vitejs/devtools/config')
+    return normalizeDevToolsConfig(config, fallbackHostname)
+  } catch (e) {
+    logger.error(
+      colors.red(
+        `Failed to load Vite DevTools config: ${e.message || e.stack}`,
+      ),
+      { error: e },
+    )
+    return fallbackConfig
   }
 }
 
@@ -1863,6 +1871,7 @@ export async function resolveConfig(
   const resolvedDevToolsConfig = await resolveDevToolsConfig(
     config.devtools,
     server.host,
+    logger,
   )
 
   resolved = {

playground/devtools/package.json

@@ -14,6 +14,6 @@
   },
   "devDependencies": {
     "vite": "workspace:*",
-    "@vitejs/devtools": "^0.0.0-alpha.29"
+    "@vitejs/devtools": "^0.0.0-alpha.31"
   }
 }