refactor(cli): migrate dev command to devframe createDevServer (#150)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: antfu

CLAUDE.md

@@ -19,3 +19,6 @@ Migrate the Node Modules Inspector to use `devframe` as the underlying framework
 ### Open Questions
 - Which parts of the codebase need to be refactored vs. kept as-is?
 - Are there any performance implications of using devframe?
+
+### Implementation Notes
+- CLI implementation should leverage devframe patterns from vitejs/devtools PR #304 for consistency and best practices.

packages/node-modules-inspector/package.json

@@ -51,7 +51,6 @@
     "p-limit": "catalog:deps",
     "pathe": "catalog:deps",
     "publint": "catalog:deps",
-    "sirv": "catalog:deps",
     "structured-clone-es": "catalog:deps",
     "tinyglobby": "catalog:deps",
     "unconfig": "catalog:deps",

packages/node-modules-inspector/src/node/cli.ts

@@ -4,6 +4,7 @@ import process from 'node:process'
 
 import c from 'ansis'
 import cac from 'cac'
+import { createDevServer, resolveDevServerPort } from 'devframe/adapters/dev'
 import {
   DEVTOOLS_CONNECTION_META_FILENAME,
   DEVTOOLS_RPC_DUMP_DIRNAME,
@@ -13,12 +14,9 @@ import {
   collectStaticRpcDump,
   createH3DevToolsHost,
   createHostContext,
-  startHttpAndWs,
 } from 'devframe/node'
 import { strictJsonStringify, structuredCloneStringify } from 'devframe/rpc'
-import { createApp, eventHandler, fromNodeMiddleware } from 'h3'
 import { dirname, relative, resolve } from 'pathe'
-import sirv from 'sirv'
 import { glob } from 'tinyglobby'
 import { distDir } from '../dirs'
 import { MARK_CHECK, MARK_NODE } from './constants'
@@ -117,58 +115,29 @@ cli
   .option('--port <port>', 'Port', { default: process.env.PORT || 9999 })
   .option('--open', 'Open browser', { default: true })
   .action(async (options) => {
-    const { getPort } = await import('get-port-please')
-    const open = (await import('open')).default
     const host = options.host
-    const port = await getPort({ port: Number(options.port), portRange: [9999, 15000], host })
-
-    console.log(c.green`${MARK_NODE} Starting Node Modules Inspector at`, c.green(`http://${host === '127.0.0.1' ? 'localhost' : host}:${port}`), '\n')
+    const port = await resolveDevServerPort(devtool, {
+      host,
+      defaultPort: Number(options.port),
+    })
+    const url = `http://${host === '127.0.0.1' ? 'localhost' : host}:${port}`
 
-    const origin = `http://${host}:${port}`
-    const app = createApp()
+    console.log(c.green`${MARK_NODE} Starting Node Modules Inspector at`, c.green(url), '\n')
 
-    const ctx = await createHostContext({
-      cwd: options.root,
-      mode: 'dev',
-      host: createH3DevToolsHost({ origin }),
-    })
-    await devtool.setup(ctx, {
+    const server = await createDevServer(devtool, {
+      host,
+      port,
       flags: {
         root: options.root,
         config: options.config,
         depth: Number(options.depth),
       },
+      openBrowser: options.open ? url : false,
     })
 
-    const jsonSerializableMethods: string[] = []
-    for (const def of ctx.rpc.definitions.values()) {
-      if (def.jsonSerializable === true)
-        jsonSerializableMethods.push(def.name)
-    }
-
-    app.use(`/${DEVTOOLS_CONNECTION_META_FILENAME}`, eventHandler((event) => {
-      event.node.res.setHeader('Content-Type', 'application/json')
-      return event.node.res.end(JSON.stringify({ backend: 'websocket', websocket: port, jsonSerializableMethods }))
-    }))
-
-    app.use('/', fromNodeMiddleware(sirv(distDir, { dev: true, single: true })))
-
-    setTimeout(() => {
-      const invoke = ctx.rpc.invokeLocal as (method: string, ...args: any[]) => Promise<any>
-      invoke('nmi:get-payload').catch(() => {})
-    }, 1)
-
-    await startHttpAndWs({
-      context: ctx,
-      host,
-      port,
-      app,
-      auth: false,
-      onReady: async () => {
-        if (options.open)
-          await open(`http://${host === '127.0.0.1' ? 'localhost' : host}:${port}`)
-      },
-    })
+    // Warm the payload; rpcGroup.functions is a Proxy returning Promise<handler>.
+    const handlers = server.rpcGroup.functions as Record<string, Promise<(...args: unknown[]) => unknown> | undefined>
+    handlers['nmi:get-payload']?.then(fn => fn?.()).catch(() => {})
   })
 
 cli.help()

pnpm-lock.yaml

@@ -41,7 +41,6 @@ catalogs:
     pathe: ^2.0.3
     publint: ^0.3.19
     semver: ^7.7.4
-    sirv: ^3.0.2
     stream-json: ^2.1.0
     structured-clone-es: ^2.0.0
     tinyexec: ^1.1.2