chore: update

Author: webfansplz

.vscode/settings.json

@@ -34,5 +34,7 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+
+  "npm.exclude": "**/{docs,examples/**}"
 }

CONTRIBUTING.md

@@ -10,10 +10,20 @@ You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excl
 
 ## Setup
 
+Requires `pnpm@10.x`.
+
 ```bash
 pnpm install
 pnpm build  # Required: generates Rolldown meta under ./packages/rolldown/node_modules/.rolldown
-pnpm dev    # Start dev server
+
+# Start Rolldown devtools UI
+pnpm dev:rolldown
+# Start Vite devtools UI
+pnpm dev:vite
+# Core playground (host app with DevTools overlay)
+pnpm play
+# Standalone client dev
+pnpm play:standalone
 ```
 
 **Note**: After pulling latest commits, remove `./packages/rolldown/node_modules/.rolldown` and rebuild to get the latest data format.
@@ -42,8 +52,8 @@ Main entry point and core functionality.
 
 Utility library for integration authors.
 
-- TypeScript types and interfaces
-- Utilities for custom docks, views, panels
+- TypeScript types and interfaces for docks, views, panels
+- `defineRpcFunction` and shared state utilities
 - Event system utilities
 - RPC client helpers
 
@@ -66,9 +76,21 @@ Built-in UI panel for Rolldown integration.
 
 ---
 
+### `packages/vite` - `@vitejs/devtools-vite`
+
+UI for Vite DevTools (WIP).
+
+---
+
+### `packages/ui` - `@vitejs/devtools-ui`
+
+Shared UI components, composables, and UnoCSS preset (`presetDevToolsUI`).
+
+---
+
 ### `packages/rpc` - `@vitejs/devtools-rpc`
 
-RPC layer for component communication.
+Typed RPC wrapper over `birpc` with WebSocket presets.
 
 - RPC client/server implementations
 - WebSocket presets
@@ -79,6 +101,12 @@ RPC layer for component communication.
 
 ---
 
+### `packages/self-inspect` - `@vitejs/devtools-self-inspect`
+
+Meta-introspection — DevTools for the DevTools itself.
+
+---
+
 ### `packages/webext` - `@vitejs/devtools-webext`
 
 Browser extension (planned for future dev mode). **Not accepting contributions currently.**
@@ -87,14 +115,16 @@ Browser extension (planned for future dev mode). **Not accepting contributions c
 
 ## Scripts
 
-- `pnpm build` - Build all packages
-- `pnpm watch` - Watch mode
-- `pnpm dev` - Dev server
-- `pnpm lint` - ESLint
+- `pnpm build` - Build all packages (via turbo)
+- `pnpm watch` - Watch mode for all packages
+- `pnpm play` - Core playground (host app with DevTools overlay)
+- `pnpm play:standalone` - Standalone client dev
+- `pnpm dev:rolldown` - Rolldown UI dev server
+- `pnpm dev:vite` - Vite UI dev server
+- `pnpm docs` - VitePress docs dev server
+- `pnpm lint` - ESLint (pass `--fix` to auto-fix)
 - `pnpm test` - Vitest
-- `pnpm typecheck` - Type check
-
-Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/rolldown run dev`
+- `pnpm typecheck` - vue-tsc type check
 
 ## Workflow
 
@@ -107,5 +137,5 @@ Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/rolldown ru
 
 - **core**: CLI in `cli-commands.ts`, server in `server.ts`, components in `client/webcomponents/`
 - **kit**: Keep APIs stable, add types for public APIs, consider backward compatibility
-- **vite**: Nuxt 3 app, Vue 3 Composition API, test with `pnpm dev` after build
+- **vite**: Nuxt 4 app, Vue 3 Composition API, test with `pnpm dev` after build
 - **rpc**: Keep methods type-safe, document new methods, test client/server

alias.ts

@@ -17,6 +17,7 @@ export const alias = {
   '@vitejs/devtools-kit/utils/events': r('kit/src/utils/events.ts'),
   '@vitejs/devtools-kit/utils/nanoid': r('kit/src/utils/nanoid.ts'),
   '@vitejs/devtools-kit/utils/human-id': r('kit/src/utils/human-id.ts'),
+  '@vitejs/devtools-kit/utils/when': r('kit/src/utils/when.ts'),
   '@vitejs/devtools-kit/utils/shared-state': r('kit/src/utils/shared-state.ts'),
   '@vitejs/devtools-kit': r('kit/src/index.ts'),
   '@vitejs/devtools-rolldown': r('rolldown/src/index.ts'),

docs/.vitepress/config.ts

@@ -14,6 +14,8 @@ const DevToolsKitNav = [
   { text: 'Dock System', link: '/kit/dock-system' },
   { text: 'RPC', link: '/kit/rpc' },
   { text: 'Shared State', link: '/kit/shared-state' },
+  { text: 'Commands', link: '/kit/commands' },
+  { text: 'When Clauses', link: '/kit/when-clauses' },
   { text: 'Logs & Notifications', link: '/kit/logs' },
   { text: 'Terminals & Processes', link: '/kit/terminals' },
   { text: 'Examples', link: '/kit/examples' },
@@ -30,7 +32,7 @@ const SocialLinks = [
 // https://vitepress.dev/reference/site-config
 export default extendConfig(withMermaid(defineConfig({
   title: 'Vite DevTools',
-  description: 'Visualize and analyze your Vite build process with powerful developer tools. Extensible architecture for building custom DevTools integrations.',
+  description: 'An extensible devtools framework for the Vite ecosystem. Build, compose, and integrate developer tools with a unified foundation.',
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
   ],
@@ -40,6 +42,12 @@ export default extendConfig(withMermaid(defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Guide', link: '/guide/' },
+      {
+        text: 'Builtin DevTools',
+        items: [
+          { text: 'DevTools for Rolldown', link: '/rolldown/' },
+        ],
+      },
       {
         text: 'DevTools Kit',
         items: DevToolsKitNav,
@@ -58,7 +66,13 @@ export default extendConfig(withMermaid(defineConfig({
         text: 'Guide',
         items: [
           { text: 'Getting Started', link: '/guide/' },
-          { text: 'Features', link: '/guide/features/' },
+        ],
+      },
+      {
+        text: 'DevTools for Rolldown',
+        items: [
+          { text: 'Introduction', link: '/rolldown/' },
+          { text: 'Features', link: '/rolldown/features' },
         ],
       },
       {
@@ -69,6 +83,8 @@ export default extendConfig(withMermaid(defineConfig({
           { text: 'Dock System', link: '/kit/dock-system' },
           { text: 'RPC', link: '/kit/rpc' },
           { text: 'Shared State', link: '/kit/shared-state' },
+          { text: 'Commands', link: '/kit/commands' },
+          { text: 'When Clauses', link: '/kit/when-clauses' },
           { text: 'Logs', link: '/kit/logs' },
           { text: 'JSON Render', link: '/kit/json-render' },
           { text: 'Terminals', link: '/kit/terminals' },
@@ -94,7 +110,7 @@ export default extendConfig(withMermaid(defineConfig({
           title: 'Vite DevTools',
           items: [
             { text: 'Guide', link: '/guide/' },
-            { text: 'Features', link: '/guide/features' },
+            { text: 'DevTools for Rolldown', link: '/rolldown/' },
             { text: 'Release Notes', link: 'https://github.com/vitejs/devtools/releases' },
             { text: 'Contributing', link: 'https://github.com/vitejs/devtools/blob/main/CONTRIBUTING.md' },
           ],
@@ -103,6 +119,12 @@ export default extendConfig(withMermaid(defineConfig({
           title: 'DevTools Kit',
           items: DevToolsKitNav,
         },
+        {
+          title: 'Builtin DevTools',
+          items: [
+            { text: 'DevTools for Rolldown', link: '/rolldown/' },
+          ],
+        },
       ],
       social: SocialLinks,
     },

docs/.vitepress/theme/Home.vue

@@ -11,16 +11,16 @@ import Spacer from '@components/shared/Spacer.vue'
 
   <HeadingSection
     heading="Inspect, Analyze, Extend"
-    subheading="Vite DevTools not only provides built-in features, but also a extensible architecture for custom integrations."
+    subheading="Vite DevTools provides an extensible framework with built-in integrations like DevTools for Rolldown, plus an open architecture for custom tools."
   />
 
   <FeatureGrid />
 
   <Spacer />
 
   <Footer
-    heading="Understand your Vite App Better"
-    subheading="Visually inspect modules, plugins, chunks, assets, packages..." button-text="Get Started"
+    heading="Understand Your Vite Ecosystem Better"
+    subheading="Inspect builds, analyze performance, extend with custom integrations..." button-text="Get Started"
     button-link="/guide/"
   />
 </template>

docs/guide/index.md

@@ -4,21 +4,33 @@ outline: deep
 
 # Getting Started
 
-> [!WARNING]
-> Vite DevTools currently only supports build mode of Vite 8+.
-> Dev mode and Vite versions under 8 are not supported yet.
-
 ## What is Vite DevTools?
 
-Vite DevTools is a comprehensive set of developer tools for visualizing and analyzing your Vite build process. It provides deep insights into your build pipeline, module dependencies, and build metadata, helping you understand and optimize your Vite applications.
+Vite DevTools is a devtools framework for the Vite ecosystem. Instead of each tool building its own devtools from scratch, Vite DevTools provides shared infrastructure — a unified dock system, type-safe RPC, shared state management, and flexible UI hosting — so that different tools compose together seamlessly, users get a consistent experience, and tool authors can focus on what makes their integration unique.
+
+Any Vite plugin can hook into Vite DevTools with just a few lines of code, instantly gaining access to the full platform: panels, action buttons, server-client communication, and more.
+
+### Built-in Integrations
+
+- **[DevTools for Rolldown](/rolldown/)** — Build analysis, module graphs, chunks, assets, plugins, and performance insights
+- **DevTools for Vite** — Vite-specific developer tools *(in development)*
+
+### Ecosystem
+
+Vite DevTools Kit is already powering a growing ecosystem of integrations:
+
+- **[Nuxt DevTools v4](https://github.com/nuxt/devtools)** — Built on top of Vite DevTools Kit
+- **[Oxc Inspector](https://github.com/yuyinws/oxc-inspector)** — Integrates via DevTools Kit with custom RPC functions
+- **[UnoCSS Inspector](https://github.com/unocss/unocss)** — Dock integration for UnoCSS
+- **[vite-plugin-vue-tracer](https://github.com/antfu/vite-plugin-vue-tracer)** — Action button that triggers a DOM inspector
 
 ### Key Features
 
-- **🔍 Build Analysis**: Visualize module graphs, dependencies, and build metadata
-- **📊 Performance Insights**: Understand build performance and bottlenecks
-- **🧩 Extensible**: Build custom DevTools integrations with the DevTools Kit
+- **🧩 Extensible Framework**: Any Vite plugin can extend the devtools with a simple hook
+- **🔍 [DevTools for Rolldown](/rolldown/)**: Built-in build analysis with module graphs, dependencies, and build metadata
 - **🎨 Unified Interface**: All DevTools integrations appear in a consistent dock interface
-- **⚡ Type-Safe**: Full TypeScript support with type-safe RPC communication
+- **🔌 Type-Safe RPC**: Built-in bidirectional communication between server and client
+- **⚡ Shared State**: Automatic synchronization of data between server and client
 
 ## Installation
 
@@ -98,30 +110,71 @@ pnpm dev
 
 Then open your app in the browser and open the DevTools panel.
 
+#### Projects without an HTML entry
+
+The embedded DevTools client is usually injected through Vite's `transformIndexHtml` hook. If your app does not start from an HTML entry, keep the `DevTools()` plugin enabled and import the client injector manually in your client entry instead:
+
+```ts twoslash
+import '@vitejs/devtools/client/inject'
+```
+
+This loads the same DevTools client that would normally be added to `index.html`. Put it in a browser entry such as `main.ts` or `entry.client.ts`, not in server-only files or shared SSR entry files.
+
+If your project does have an HTML entry, avoid importing `@vitejs/devtools/client/inject` in addition to the HTML injection, as that would inject the client twice and create duplicate dock elements.
+
+#### 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:
 
-- **Explore the built-in tools**: Check out the various panels and visualizations available in the DevTools interface
-- **Build custom integrations**: Learn how to extend Vite DevTools with your own tools using the [DevTools Kit](/kit/)
+- **Explore the built-in tools**: Check out the [DevTools for Rolldown](/rolldown/) panels and visualizations
+- **Build custom integrations**: Learn how to extend the devtools with your own tools using the [Vite DevTools Kit](/kit/)
 - **Contribute**: Help improve Vite DevTools by checking out our [contributing guide](https://github.com/antfu/contribute)
 
 ## Current Limitations
 
 > [!NOTE]
-> Vite DevTools is currently in active development with the following limitations:
+> Vite DevTools is currently in active development.
 
-- **Build mode only**: Currently works with Vite-Rolldown's build mode
-- **Dev mode**: Not yet supported (planned for future releases)
-- **Vite Version**: Requires Vite 8 or higher versions for now
+- **[DevTools for Rolldown](/rolldown/)**: Currently supports build mode only, requires Vite 8+
+- **Dev mode**: Dev mode support is planned for future releases
 
 ## Architecture Overview
 
 Vite DevTools consists of several core packages:
 
-- **`@vitejs/devtools`**: The main entry point and CLI
-- **`@vitejs/devtools-kit`**: Utilities and types for building custom integrations
-- **`@vitejs/devtools-rolldown`**: Built-in UI panel for Rolldown
+- **`@vitejs/devtools`**: The core framework, CLI, and runtime hosts
+- **`@vitejs/devtools-kit`**: Vite DevTools Kit — utilities and types for building custom integrations
+- **`@vitejs/devtools-rolldown`**: [DevTools for Rolldown](/rolldown/) — built-in build analysis UI
+- **`@vitejs/devtools-vite`**: DevTools for Vite *(in development)*
 - **`@vitejs/devtools-rpc`**: RPC layer for server-client communication
 
-For more details on extending Vite DevTools, see the [DevTools Kit documentation](/kit/).
+Third-party integrations like [Oxc Inspector](https://github.com/yuyinws/oxc-inspector) can also integrate via the DevTools Kit plugin API.
+
+For more details on extending the devtools, see the [Vite DevTools Kit documentation](/kit/).

docs/index.md

@@ -4,8 +4,8 @@ theme: dark
 
 hero:
   name: Vite DevTools
-  text: DevTools for Vite.
-  tagline: Visualize and analyze your Vite build process with powerful developer tools
+  text: DevTools Framework for the Vite Ecosystem.
+  tagline: An extensible foundation for building and composing developer tools across the Vite ecosystem
   actions:
     - theme: brand
       text: Get Started
@@ -19,11 +19,11 @@ hero:
 
 features:
   - icon: 🔍
-    title: Build Analysis
-    details: Deep insights into your Vite-Rolldown build process. Visualize module graphs, dependencies, and build metadata to understand what's happening under the hood.
+    title: DevTools for Rolldown
+    details: Built-in integration for Rolldown build analysis. Visualize module graphs, dependencies, chunks, assets, and build metadata.
   - icon: 🧩
     title: Extensible Architecture
-    details: Build custom DevTools integrations with the DevTools Kit. Extend any Vite plugin with a simple devtools hook to add your own visualizations and tools.
+    details: Build custom DevTools integrations with the DevTools Kit. Any Vite plugin can extend the devtools with a simple hook to add visualizations, inspectors, and tools.
   - icon: 🚀
     title: Unified Dock System
     details: A familiar dock interface (like macOS Dock) where all DevTools integrations appear together. Switch between tools seamlessly in a consistent UI.