perf(devtools): trim @nuxt/devtools runtime dependencies (#1066)

Author: antfubot

package.json

@@ -40,7 +40,6 @@
     "@nuxt/schema": "catalog:types",
     "@playwright/test": "catalog:cli",
     "@types/node": "catalog:types",
-    "@types/ws": "catalog:types",
     "@unocss/eslint-config": "catalog:buildtools",
     "@vitejs/devtools-kit": "catalog:types",
     "bumpp": "catalog:cli",
@@ -57,7 +56,6 @@
     "simple-git-hooks": "catalog:cli",
     "skills-npm": "catalog:buildtools",
     "taze": "catalog:cli",
-    "tinyexec": "catalog:prod",
     "tsx": "catalog:cli",
     "turbo": "catalog:buildtools",
     "typescript": "catalog:cli",

packages/devtools/client/components/AssetFontPreview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AssetInfo } from '~/../src/types'
 import { useStyleTag } from '@vueuse/core'
-import { hash } from 'ohash'
+import { hash } from 'devframe/utils/hash'
 import { computed } from 'vue'
 
 const props = defineProps<{

packages/devtools/client/nuxt.config.ts

@@ -128,7 +128,7 @@ export default defineNuxtConfig({
         'error-stack-parser-es',
         'fuse.js',
         'json-editor-vue',
-        'ohash',
+        'devframe/utils/hash',
         'perfect-debounce',
         'scule',
         'vue-virtual-scroller',

packages/devtools/package.json

@@ -66,28 +66,22 @@
     "@nuxt/devtools-kit": "workspace:*",
     "@vitejs/devtools": "catalog:buildtools",
     "@vitejs/devtools-kit": "catalog:types",
-    "birpc": "catalog:frontend",
     "consola": "catalog:prod",
     "destr": "catalog:prod",
+    "devframe": "catalog:prod",
     "error-stack-parser-es": "catalog:frontend",
     "fast-npm-meta": "catalog:prod",
     "hookable": "catalog:frontend",
     "image-meta": "catalog:prod",
-    "launch-editor": "catalog:prod",
     "local-pkg": "catalog:prod",
     "magicast": "catalog:prod",
-    "ohash": "catalog:frontend",
     "pathe": "catalog:frontend",
     "perfect-debounce": "catalog:frontend",
     "pkg-types": "catalog:prod",
-    "sirv": "catalog:prod",
-    "structured-clone-es": "catalog:frontend",
-    "tinyexec": "catalog:prod",
     "tinyglobby": "catalog:prod",
     "unstorage": "catalog:prod",
     "verkit": "catalog:prod",
-    "vite-plugin-vue-tracer": "catalog:prod",
-    "ws": "catalog:prod"
+    "vite-plugin-vue-tracer": "catalog:prod"
   },
   "devDependencies": {
     "@antfu/utils": "catalog:frontend",
@@ -126,6 +120,7 @@
     "scule": "catalog:frontend",
     "shiki": "catalog:frontend",
     "shiki-codegen": "catalog:buildtools",
+    "structured-clone-es": "catalog:frontend",
     "theme-vitesse": "catalog:frontend",
     "tsx": "catalog:cli",
     "ua-parser-modern": "catalog:frontend",

packages/devtools/src/module-main.ts

@@ -10,8 +10,8 @@ import os from 'node:os'
 import { deprecate, NUXT_DEVTOOLS_GROUP_ID } from '@nuxt/devtools-kit'
 import { addImports, addPlugin, addTemplate, addVitePlugin, extendViteConfig, logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
+import { serveStaticNodeMiddleware } from 'devframe/utils/serve-static'
 import { join } from 'pathe'
-import sirv from 'sirv'
 import { searchForWorkspaceRoot } from 'vite'
 import { version } from '../package.json'
 import { createDefaultTabOptions, setServerTasksEnabledByDefault } from './constant'
@@ -249,14 +249,13 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
   nuxt.hook('vite:serverCreated', (server) => {
     const devtoolsAnalyzeDir = join(nuxt.options.rootDir, 'node_modules/.cache/nuxt-devtools/analyze')
 
-    server.middlewares.use(ROUTE_ANALYZE, sirv(devtoolsAnalyzeDir, { single: false, dev: true, dotfiles: true, ignores: false }))
+    server.middlewares.use(ROUTE_ANALYZE, serveStaticNodeMiddleware(devtoolsAnalyzeDir, { single: false }))
 
     // Serve the front end in production
     if (clientDirExists) {
       const indexHtmlPath = join(clientDir, 'index.html')
       const indexContent = fs.readFile(indexHtmlPath, 'utf-8')
-      const handleStatic = sirv(clientDir, {
-        dev: true,
+      const handleStatic = serveStaticNodeMiddleware(clientDir, {
         single: false,
       })
       // We replace the base URL in the index.html based on user's settings

packages/devtools/src/server-rpc/analyze-build.ts

@@ -1,12 +1,15 @@
 import type { NuxtAnalyzeMeta } from '@nuxt/schema'
 import type { AnalyzeBuildMeta, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import { execFile } from 'node:child_process'
 import fs from 'node:fs'
 import fsp from 'node:fs/promises'
+import { promisify } from 'node:util'
 import { dirname, join } from 'pathe'
-import { x } from 'tinyexec'
 import { glob } from 'tinyglobby'
 import { createUniqueSessionId } from '../utils/session-id'
 
+const execFileAsync = promisify(execFile)
+
 const COLON_RE = /:/g
 
 export function setupAnalyzeBuildRPC(ctx: NuxtDevtoolsServerContext) {
@@ -128,8 +131,8 @@ export function setupAnalyzeBuildRPC(ctx: NuxtDevtoolsServerContext) {
   }
 
   async function git(...args: string[]): Promise<string> {
-    const result = await x('git', args, { nodeOptions: { cwd: nuxt.options.rootDir }, throwOnError: true })
-    return result.stdout.trim()
+    const { stdout } = await execFileAsync('git', args, { cwd: nuxt.options.rootDir })
+    return stdout.trim()
   }
 
   async function generateAnalyzeBuildName() {

packages/devtools/src/server-rpc/general.ts

@@ -223,7 +223,7 @@ export function setupGeneralRPC({
         let editor = getOptions()?.behavior.openInEditor ?? undefined
         if (editor === 'auto')
           editor = undefined
-        await import('launch-editor').then(r => (r.default || r)(path + suffix, editor))
+        await import('devframe/utils/launch-editor').then(r => r.launchEditor(path + suffix, editor))
         return true
       }
       catch (e) {

packages/devtools/src/utils/local-options.ts

@@ -2,7 +2,7 @@ import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import { homedir } from 'node:os'
 import { dirname } from 'node:path'
-import { hash } from 'ohash'
+import { hash } from 'devframe/utils/hash'
 import { join } from 'pathe'
 
 interface LocalOptionSearchOptions {