vitejs · antfu · May 14, 2026 · May 14, 2026
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -2,4 +2,5 @@ export { createDevToolsContext } from './node/context'
 export { DevTools } from './node/plugins'
 export type { BuiltinServerFunctions } from './node/rpc'
 export { createDevToolsMiddleware } from './node/server'
+export type { DevToolsMiddleware } from './node/server'
 export type { DevToolsInternalContext, InternalAnonymousAuthStorage } from 'devframe/node/internal'
diff --git a/packages/core/src/node/cli-commands.ts b/packages/core/src/node/cli-commands.ts
@@ -43,22 +43,18 @@ export async function start(options: StartOptions) {
   })
 
   const { createServer } = await import('node:http')
-  const { createApp, eventHandler, sendRedirect, toNodeListener } = await import('h3')
-  const { serveStaticHandler } = await import('devframe/utils/serve-static')
+  const { defineHandler, H3, sendRedirect, toNodeHandler } = await import('h3')
+  const { mountStaticHandler } = await import('devframe/utils/serve-static')
 
-  const app = createApp()
+  const app = new H3()
 
-  for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs) {
-    app.use(baseUrl, serveStaticHandler(distDir))
-  }
+  for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs)
+    mountStaticHandler(app, baseUrl, distDir)
 
-  app.use(DEVTOOLS_MOUNT_PATH, h3.handler)
-  app.use('/', eventHandler(async (event) => {
-    if (event.node.req.url === '/')
-      return sendRedirect(event, DEVTOOLS_MOUNT_PATH)
-  }))
+  app.use(DEVTOOLS_MOUNT_PATH, h3)
+  app.use('/', defineHandler(event => sendRedirect(event, DEVTOOLS_MOUNT_PATH, 302)))
 
-  const server = createServer(toNodeListener(app))
+  const server = createServer(toNodeHandler(app))
 
   server.listen(port, host, async () => {
     const url = normalizeHttpServerUrl(host, port)

diff --git a/packages/core/src/node/server.ts b/packages/core/src/node/server.ts
@@ -1,12 +1,20 @@
+import type { NodeHandler } from 'h3'
 import type { CreateWsServerOptions } from './ws'
 import { DEVTOOLS_CONNECTION_META_FILENAME } from '@vitejs/devtools-kit/constants'
 import { consumeTempAuthToken } from 'devframe/node/auth'
 import { getInternalContext } from 'devframe/node/internal'
-import { serveStaticHandler } from 'devframe/utils/serve-static'
-import { createApp, eventHandler, getQuery, toNodeListener } from 'h3'
+import { mountStaticHandler } from 'devframe/utils/serve-static'
+import { defineHandler, getQuery, H3, toNodeHandler } from 'h3'
 import { dirClientStandalone } from '../dirs'
 import { createWsServer } from './ws'
 
+export interface DevToolsMiddleware {
+  h3: H3
+  rpc: Awaited<ReturnType<typeof createWsServer>>['rpc']
+  middleware: NodeHandler
+  getConnectionMeta: Awaited<ReturnType<typeof createWsServer>>['getConnectionMeta']
+}
+
 function generateAuthPageHtml(): string {
   return `<!DOCTYPE html>
 <html>
@@ -56,45 +64,45 @@ function generateAuthPageHtml(): string {
 </html>`
 }
 
-export async function createDevToolsMiddleware(options: CreateWsServerOptions) {
-  const h3 = createApp()
+export async function createDevToolsMiddleware(options: CreateWsServerOptions): Promise<DevToolsMiddleware> {
+  const h3 = new H3()
   const contextInternal = getInternalContext(options.context)
 
   const { rpc, getConnectionMeta } = await createWsServer(options)
 
-  h3.use(`/${DEVTOOLS_CONNECTION_META_FILENAME}`, eventHandler(async (event) => {
-    event.node.res.setHeader('Content-Type', 'application/json')
-    return event.node.res.end(JSON.stringify(await getConnectionMeta()))
+  h3.use(`/${DEVTOOLS_CONNECTION_META_FILENAME}`, defineHandler(async (event) => {
+    event.res.headers.set('Content-Type', 'application/json')
+    return JSON.stringify(await getConnectionMeta())
   }))
 
-  h3.use('/auth-verify', eventHandler((event) => {
+  h3.use('/auth-verify', defineHandler((event) => {
     const { id } = getQuery(event) as { id?: string }
     if (!id) {
-      event.node.res.statusCode = 400
-      return event.node.res.end('Missing id parameter')
+      event.res.status = 400
+      return 'Missing id parameter'
     }
 
     const clientAuthToken = consumeTempAuthToken(id, contextInternal.storage.auth)
     if (!clientAuthToken) {
-      event.node.res.statusCode = 403
-      return event.node.res.end('Invalid or expired auth token')
+      event.res.status = 403
+      return 'Invalid or expired auth token'
     }
 
-    event.node.res.setHeader('Content-Type', 'application/json')
-    return event.node.res.end(JSON.stringify({ authToken: clientAuthToken }))
+    event.res.headers.set('Content-Type', 'application/json')
+    return JSON.stringify({ authToken: clientAuthToken })
   }))
 
-  h3.use('/auth', eventHandler((event) => {
-    event.node.res.setHeader('Content-Type', 'text/html')
-    return event.node.res.end(generateAuthPageHtml())
+  h3.use('/auth', defineHandler((event) => {
+    event.res.headers.set('Content-Type', 'text/html; charset=utf-8')
+    return generateAuthPageHtml()
   }))
 
-  h3.use(serveStaticHandler(dirClientStandalone))
+  mountStaticHandler(h3, '', dirClientStandalone)
 
   return {
     h3,
     rpc,
-    middleware: toNodeListener(h3),
+    middleware: toNodeHandler(h3),
     getConnectionMeta,
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -61,7 +61,7 @@ catalogs:
     diff: ^9.0.0
     envinfo: ^7.21.0
     get-port-please: ^3.2.0
-    h3: ^1.15.11
+    h3: 2.0.1-rc.22
     logs-sdk: ^0.0.6
     mlly: ^1.8.2
     mrmime: ^2.0.1

diff --git a/test/__snapshots__/tsnapi/@vitejs/devtools/index.snapshot.d.ts b/test/__snapshots__/tsnapi/@vitejs/devtools/index.snapshot.d.ts
@@ -1,18 +1,22 @@
 /**
  * Generated by tsnapi — public API snapshot of `@vitejs/devtools`
  */
+// #region Interfaces
+export interface DevToolsMiddleware {
+  h3: H3;
+  rpc: Awaited<ReturnType<typeof createWsServer>>['rpc'];
+  middleware: NodeHandler;
+  getConnectionMeta: Awaited<ReturnType<typeof createWsServer>>['getConnectionMeta'];
+}
+// #endregion
+
 // #region Types
 export type BuiltinServerFunctions = RpcDefinitionsToFunctions<typeof builtinRpcDeclarations>;
 // #endregion
 
 // #region Functions
 export declare function createDevToolsContext(_: ResolvedConfig, _?: ViteDevServer): Promise<ViteDevToolsNodeContext>;
-export declare function createDevToolsMiddleware(_: CreateWsServerOptions): Promise<{
-  h3: _$h3.App;
-  rpc: _$birpc.BirpcGroup<_$devframe_types0.DevToolsRpcClientFunctions, _$_vitejs_devtools_kit0.DevToolsRpcServerFunctions, false>;
-  middleware: _$h3.NodeListener;
-  getConnectionMeta: () => Promise<_$devframe_types0.ConnectionMeta>;
-}>;
+export declare function createDevToolsMiddleware(_: CreateWsServerOptions): Promise<DevToolsMiddleware>;
 export declare function DevTools(_?: DevToolsOptions): Promise<Plugin[]>;
 // #endregion