merge: resolve conflicts with origin/main

Resolve conflicts in ViewBuiltinSettings.vue (keep decomposed
sub-component approach) and .generated/css.ts (auto-merged).
Incorporate HashBadge for action entries from main into SettingsDocks.vue.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

docs/guide/index.md

@@ -98,6 +98,33 @@ pnpm dev
 
 Then open your app in the browser and open the DevTools panel.
 
+#### Building with the App
+
+You can also generate a static DevTools build alongside your app's build output by enabling the `build.withApp` option:
+
+```ts [vite.config.ts] twoslash
+import { DevTools } from '@vitejs/devtools'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    DevTools({
+      build: {
+        withApp: true, // generate DevTools output during `vite build`
+        // outDir: 'custom-dir', // optional, defaults to Vite's build.outDir
+      },
+    }),
+  ],
+  build: {
+    rolldownOptions: {
+      devtools: {},
+    },
+  }
+})
+```
+
+When `build.withApp` is enabled, running `pnpm build` will automatically generate the static DevTools output into the build output directory. This captures real build data from the same build context, so DevTools can display accurate build analysis without a separate build step.
+
 ## What's Next?
 
 Now that you have Vite DevTools set up, you can:

docs/kit/rpc.md

@@ -121,7 +121,7 @@ const plugin: Plugin = {
 
 ### Dump Feature for Build Mode
 
-When using `vite devtools build` to create a static DevTools build, the server cannot execute functions at runtime. The **dump feature** solves this by pre-computing RPC results at build time.
+When creating a static DevTools build (via `vite devtools build` CLI or the [`build.withApp`](/guide/#building-with-the-app) plugin option), the server cannot execute functions at runtime. The **dump feature** solves this by pre-computing RPC results at build time.
 
 #### How It Works
 

packages/core/src/client/webcomponents/.generated/css.ts

@@ -45,6 +45,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
       v-if="isDockVisible(dock)"
       :context="context"
       :dock
+      :is-action="dock.type === 'action'"
       :is-selected="selected?.id === dock.id"
       :is-dimmed="selected ? (selected.id !== dock.id) : false"
       :is-vertical="isVertical"

packages/core/src/client/webcomponents/components/dock/DockEntries.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
   defineProps<{
     context: DocksContext
     dock: DevToolsDockEntryBase
+    isAction?: boolean
     isSelected?: boolean
     isDimmed?: boolean
     isVertical?: boolean
@@ -81,8 +82,9 @@ useEventListener('pointerdown', () => {
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
         isSelected ? 'scale-120 text-purple' : '',
+        isAction ? 'bg-[#8881] hover:bg-[#8882] rounded-full' : 'rounded-xl',
       ]"
-      class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative"
+      class="flex items-center justify-center p1.5 hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative"
     >
       <DockIcon :icon="dock.icon" :title="dock.title" class="w-5 h-5 select-none" />
       <div v-if="badge" class="absolute top-0.5 right-0 bg-gray-6 text-white text-0.6em px-1 rounded-full shadow">

packages/core/src/client/webcomponents/components/dock/DockEntry.vue

@@ -5,6 +5,7 @@ import type { DevToolsDocksUserSettings } from '../../state/dock-settings'
 import { computed } from 'vue'
 import { docksGroupByCategories } from '../../state/dock-settings'
 import { sharedStateToRef } from '../../state/docks'
+import HashBadge from '../display/HashBadge.vue'
 import DockIcon from '../dock/DockIcon.vue'
 
 const props = defineProps<{
@@ -194,11 +195,18 @@ function resetCustomOrderForCategory(category: string) {
               :class="settings.docksHidden.includes(dock.id) ? 'saturate-0' : ''"
             />
             <span
-              class="flex-1 truncate"
+              class="truncate"
               :class="settings.docksHidden.includes(dock.id) ? 'line-through op60' : ''"
             >
               {{ dock.title }}
             </span>
+            <HashBadge
+              v-if="dock.type === 'action'"
+              label="Action"
+              class="flex-none text-xs"
+            />
+
+            <div class="flex flex-auto" />
 
             <!-- Order controls -->
             <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

packages/core/src/client/webcomponents/components/views-builtin/SettingsDocks.vue

@@ -0,0 +1,78 @@
+/* eslint-disable no-console */
+
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
+import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import {
+  DEVTOOLS_CONNECTION_META_FILENAME,
+  DEVTOOLS_DIRNAME,
+  DEVTOOLS_DOCK_IMPORTS_FILENAME,
+  DEVTOOLS_MOUNT_PATH,
+  DEVTOOLS_RPC_DUMP_DIRNAME,
+  DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME,
+} from '@vitejs/devtools-kit/constants'
+import c from 'ansis'
+import { dirname, join, relative, resolve } from 'pathe'
+import { dirClientStandalone } from '../dirs'
+import { MARK_NODE } from './constants'
+
+export interface BuildStaticOptions {
+  context: DevToolsNodeContext
+  outDir: string
+}
+
+export async function buildStaticDevTools(options: BuildStaticOptions): Promise<void> {
+  const { context, outDir } = options
+
+  if (existsSync(outDir))
+    await fs.rm(outDir, { recursive: true })
+
+  const devToolsRoot = join(outDir, DEVTOOLS_DIRNAME)
+  await fs.mkdir(devToolsRoot, { recursive: true })
+  await fs.cp(dirClientStandalone, devToolsRoot, { recursive: true })
+
+  for (const { baseUrl, distDir } of context.views.buildStaticDirs) {
+    console.log(c.cyan`${MARK_NODE} Copying static files from ${distDir} to ${join(outDir, baseUrl)}`)
+    await fs.mkdir(join(outDir, baseUrl), { recursive: true })
+    await fs.cp(distDir, join(outDir, baseUrl), { recursive: true })
+  }
+
+  const { renderDockImportsMap } = await import('./plugins/server')
+
+  await fs.mkdir(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_DIRNAME), { recursive: true })
+  await fs.writeFile(resolve(devToolsRoot, DEVTOOLS_CONNECTION_META_FILENAME), JSON.stringify({ backend: 'static' }, null, 2), 'utf-8')
+  await fs.writeFile(resolve(devToolsRoot, DEVTOOLS_DOCK_IMPORTS_FILENAME), renderDockImportsMap(context.docks.values()), 'utf-8')
+
+  console.log(c.cyan`${MARK_NODE} Writing RPC dump to ${resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME)}`)
+  const { collectStaticRpcDump } = await import('./static-dump')
+  const dump = await collectStaticRpcDump(
+    context.rpc.definitions.values(),
+    context,
+  )
+  for (const [filepath, data] of Object.entries(dump.files)) {
+    const fullpath = resolve(devToolsRoot, filepath)
+    await fs.mkdir(dirname(fullpath), { recursive: true })
+    await fs.writeFile(fullpath, JSON.stringify(data, null, 2), 'utf-8')
+  }
+  await fs.writeFile(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME), JSON.stringify(dump.manifest, null, 2), 'utf-8')
+  await fs.writeFile(
+    resolve(outDir, 'index.html'),
+    [
+      '<!doctype html>',
+      '<html lang="en">',
+      '<head>',
+      '  <meta charset="UTF-8">',
+      '  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
+      '  <title>Vite DevTools</title>',
+      `  <meta http-equiv="refresh" content="0; url=${DEVTOOLS_MOUNT_PATH}">`,
+      '</head>',
+      '<body>',
+      `  <script>location.replace(${JSON.stringify(DEVTOOLS_MOUNT_PATH)})</script>`,
+      '</body>',
+      '</html>',
+    ].join('\n'),
+    'utf-8',
+  )
+
+  console.log(c.green`${MARK_NODE} Built DevTools to ${relative(context.cwd, outDir)}`)
+}

packages/core/src/node/build-static.ts

@@ -1,18 +1,10 @@
 /* eslint-disable no-console */
 
-import { existsSync } from 'node:fs'
-import fs from 'node:fs/promises'
 import {
-  DEVTOOLS_CONNECTION_META_FILENAME,
-  DEVTOOLS_DIRNAME,
-  DEVTOOLS_DOCK_IMPORTS_FILENAME,
   DEVTOOLS_MOUNT_PATH,
-  DEVTOOLS_RPC_DUMP_DIRNAME,
-  DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME,
 } from '@vitejs/devtools-kit/constants'
 import c from 'ansis'
-import { dirname, join, relative, resolve } from 'pathe'
-import { dirClientStandalone } from '../dirs'
+import { resolve } from 'pathe'
 import { MARK_NODE } from './constants'
 import { normalizeHttpServerUrl } from './utils'
 
@@ -93,57 +85,12 @@ export async function build(options: BuildOptions) {
 
   const outDir = resolve(devtools.config.root, options.outDir)
 
-  if (existsSync(outDir))
-    await fs.rm(outDir, { recursive: true })
-
-  const devToolsRoot = join(outDir, DEVTOOLS_DIRNAME)
-  await fs.mkdir(devToolsRoot, { recursive: true })
-  await fs.cp(dirClientStandalone, devToolsRoot, { recursive: true })
-
-  for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs) {
-    console.log(c.cyan`${MARK_NODE} Copying static files from ${distDir} to ${join(outDir, baseUrl)}`)
-    await fs.mkdir(join(outDir, baseUrl), { recursive: true })
-    await fs.cp(distDir, join(outDir, baseUrl), { recursive: true })
-  }
+  const { buildStaticDevTools } = await import('./build-static')
+  await buildStaticDevTools({
+    context: devtools.context,
+    outDir,
+  })
 
-  const { renderDockImportsMap } = await import('./plugins/server')
-
-  await fs.mkdir(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_DIRNAME), { recursive: true })
-  await fs.writeFile(resolve(devToolsRoot, DEVTOOLS_CONNECTION_META_FILENAME), JSON.stringify({ backend: 'static' }, null, 2), 'utf-8')
-  await fs.writeFile(resolve(devToolsRoot, DEVTOOLS_DOCK_IMPORTS_FILENAME), renderDockImportsMap(devtools.context.docks.values()), 'utf-8')
-
-  console.log(c.cyan`${MARK_NODE} Writing RPC dump to ${resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME)}`)
-  const { collectStaticRpcDump } = await import('./static-dump')
-  const dump = await collectStaticRpcDump(
-    devtools.context.rpc.definitions.values(),
-    devtools.context,
-  )
-  for (const [filepath, data] of Object.entries(dump.files)) {
-    const fullpath = resolve(devToolsRoot, filepath)
-    await fs.mkdir(dirname(fullpath), { recursive: true })
-    await fs.writeFile(fullpath, JSON.stringify(data, null, 2), 'utf-8')
-  }
-  await fs.writeFile(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME), JSON.stringify(dump.manifest, null, 2), 'utf-8')
-  await fs.writeFile(
-    resolve(outDir, 'index.html'),
-    [
-      '<!doctype html>',
-      '<html lang="en">',
-      '<head>',
-      '  <meta charset="UTF-8">',
-      '  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
-      '  <title>Vite DevTools</title>',
-      `  <meta http-equiv="refresh" content="0; url=${DEVTOOLS_MOUNT_PATH}">`,
-      '</head>',
-      '<body>',
-      `  <script>location.replace(${JSON.stringify(DEVTOOLS_MOUNT_PATH)})</script>`,
-      '</body>',
-      '</html>',
-    ].join('\n'),
-    'utf-8',
-  )
-
-  console.log(c.green`${MARK_NODE} Built to ${relative(devtools.config.root, outDir)}`)
   console.warn(c.yellow`${MARK_NODE} Static build is still experimental and not yet complete.`)
   console.warn(c.yellow`${MARK_NODE} Generated output may be missing features and can change without notice.`)
 }

packages/core/src/node/cli-commands.ts

@@ -64,7 +64,7 @@ export async function createDevToolsContext(
   // json-render factory
   let jrCounter = 0
   context.createJsonRenderer = (initialSpec: JsonRenderSpec): JsonRenderer => {
-    const stateKey = `__jr:${jrCounter++}`
+    const stateKey = `devtoolskit:internal:json-render:${jrCounter++}`
     const statePromise = rpcHost.sharedState.get(stateKey as any, {
       initialValue: initialSpec as any,
     })

packages/core/src/node/context.ts

@@ -0,0 +1,41 @@
+/* eslint-disable no-console */
+
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { Plugin, ResolvedConfig } from 'vite'
+import c from 'ansis'
+import { resolve } from 'pathe'
+import { MARK_NODE } from '../constants'
+
+export interface DevToolsBuildOptions {
+  outDir?: string
+}
+
+export function DevToolsBuild(options: DevToolsBuildOptions = {}): Plugin {
+  let context: DevToolsNodeContext
+  let resolvedConfig: ResolvedConfig
+
+  return {
+    name: 'vite:devtools:build',
+    apply: 'build',
+
+    configResolved(config) {
+      resolvedConfig = config
+    },
+
+    async buildStart() {
+      const { createDevToolsContext } = await import('../context')
+      context = await createDevToolsContext(resolvedConfig)
+    },
+
+    async closeBundle() {
+      console.log(c.cyan`${MARK_NODE} Building static Vite DevTools...`)
+
+      const outDir = options.outDir
+        ? resolve(resolvedConfig.root, options.outDir)
+        : resolve(resolvedConfig.root, resolvedConfig.build.outDir)
+
+      const { buildStaticDevTools } = await import('../build-static')
+      await buildStaticDevTools({ context, outDir })
+    },
+  }
+}