Merge branch 'main' into feat/learn-devtools-by-codex

Author: RYGRIT

CONTRIBUTING.md

@@ -0,0 +1,111 @@
+# Contributing
+
+Thank you for your interest in contributing to Vite DevTools! Before submitting your contribution, please take a moment to read through the following guidelines.
+
+Please be aware that we are still in the early stages of development, and huge refactoring occasionally are expected.
+
+We are currently focusing on getting the basic data visualization working for **Vite-Rolldown's build mode**. Dev mode will be delayed for later until Vite get the full-bundler dev mode.
+
+You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excluding `hold-off`) if you are interested in helping out.
+
+## Setup
+
+```bash
+pnpm install
+pnpm build  # Required: generates Rolldown meta under ./packages/vite/.rolldown
+pnpm dev    # Start dev server
+```
+
+**Note**: After pulling latest commits, remove `./packages/vite/.rolldown` and rebuild to get the latest data format.
+
+## Project Structure
+
+Monorepo with pnpm workspaces. Each package's scope:
+
+### `packages/core` - `@vitejs/devtools`
+
+Main entry point and core functionality.
+
+- CLI (`vite-devtools` command)
+- Client-side injection scripts
+- Standalone mode
+- WebComponents UI (Dock, Panels, Terminals)
+- Node.js server for DevTools UI
+- RPC server/client setup
+- Host functions and docks management
+
+**Key files**: `src/node/cli.ts`, `src/node/server.ts`, `src/client/webcomponents/`
+
+---
+
+### `packages/kit` - `@vitejs/devtools-kit`
+
+Utility library for integration authors.
+
+- TypeScript types and interfaces
+- Utilities for custom docks, views, panels
+- Event system utilities
+- RPC client helpers
+
+**Key files**: `src/index.ts`, `src/client.ts`, `src/utils/`
+
+---
+
+### `packages/vite` - `@vitejs/devtools-vite`
+
+Built-in UI panel for Vite/Rolldown integration.
+
+- Vite plugin (enabled by default)
+- Nuxt-based UI for build visualization
+- Rolldown build output integration
+- Build analysis panels, module graph, file inspection
+
+**Key files**: `src/index.ts` (plugin entry), `src/` (Nuxt app)
+
+**Note**: Build generates Rolldown metadata in `.rolldown` folder.
+
+---
+
+### `packages/rpc` - `@vitejs/devtools-rpc`
+
+RPC layer for component communication.
+
+- RPC client/server implementations
+- WebSocket presets
+- Message serialization
+- Type-safe RPC methods
+
+**Key files**: `src/index.ts`, `src/client.ts`, `src/server.ts`, `src/presets/ws/`
+
+---
+
+### `packages/webext` - `@vitejs/devtools-webext`
+
+Browser extension (planned for future dev mode). **Not accepting contributions currently.**
+
+---
+
+## Scripts
+
+- `pnpm build` - Build all packages
+- `pnpm watch` - Watch mode
+- `pnpm dev` - Dev server
+- `pnpm lint` - ESLint
+- `pnpm test` - Vitest
+- `pnpm typecheck` - Type check
+
+Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/vite run dev`
+
+## Workflow
+
+1. For new features: open an issue first for discussion
+2. Make changes, run `pnpm test && pnpm typecheck && pnpm lint`
+3. Use conventional commits (`feat:`, `fix:`, etc.)
+4. Submit PR with clear description and related issue reference
+
+## Package Guidelines
+
+- **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
+- **rpc**: Keep methods type-safe, document new methods, test client/server

README.md

@@ -2,44 +2,13 @@
 
 # Vite DevTools
 
-Vite DevTools is a set of tools for visualizing the internal state and build analysis for Vite and Rolldown (currently only work with [`rolldown-vite`](https://github.com/vitejs/rolldown-vite)).
+Vite DevTools is a set of tools for visualizing the internal state and build analysis for Vite and Rolldown.
 
 > [!IMPORTANT]
 > This project is still in development. Not yet usable. You may preview it by building this project from source.
 
-## 🏗️ Project Progress
-
-State: **🚧 Work in progress**
-
-We are currently focusing on getting the basic data visualization working for **Vite-Rolldown's build mode**. Dev mode will be delayed for later until Vite get the full-bundler dev mode.
-
-You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excluding `hold-off`) if you are interested in helping out.
-
-## 📦 Packages
-
-- `packages/core`: `@vitejs/devtools` the entry point of the project. It provides the core functionality of Vite DevTools, including the CLI.
-- `packages/kit`: `@vitejs/devtools-kit` the utility library for integration authors to extend Vite DevTools. Which include types and utilities for the project.
-- `packages/vite`: `@vitejs/devtools-vite` the built-in UI panel for Vite/Rolldown, it's presented as a Vite plugin which is enabled by default.
-- `packages/rpc`: `@vitejs/devtools-rpc` the rpc layer of the project.
-
-## 💡 Contributing Guide
-
-We're really excited that you're interested in contributing to Vite DevTools! Before submitting your contribution, please take a moment to read through the following guidelines:
-
-- For the `devtools-webext` package, we plan to use it for dev mode in the future, so no contributions are needed at this time.
-- For any new feature additions, we recommend submitting an issue for discussion and confirmation first.
-
-## 🧑‍💻 Development Guide
-
-Currently Vite DevTools only supports build time inspection, to develop this project, you first need to build itself to get the Rolldown meta for testing.
-
-- `pnpm install` to install dependencies
-- `pnpm build` first to get the Rolldown logs under `./packages/vite/.rolldown` folder
-- `pnpm dev` to start the dev server
-
-As the data interface between Rolldown is not yet stable, and breaking changes are expected. We locked the Rolldown version in our `pnpm-workspace.yaml`, which means the published version may not work with the latest Rolldown.
-
-When pulling the latest commits, it's recommended to remove the `./packages/vite/.rolldown` folder and run `pnpm build` again to get the latest data format.
+- 📖 [Documentation](https://vite-devtools.netlify.app)
+- 💡 [Contributing Guide](./CONTRIBUTING.md)
 
 ## 📄 Licenses
 

alias.ts

@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { join, relative } from 'pathe'
+
+const root = fileURLToPath(new URL('.', import.meta.url))
+const r = (path: string) => fileURLToPath(new URL(`./packages/${path}`, import.meta.url))
+
+export const alias = {
+  '@vitejs/devtools-rpc': r('rpc/src'),
+  '@vitejs/devtools-rpc/presets/ws/server': r('rpc/src/presets/ws/server.ts'),
+  '@vitejs/devtools-rpc/presets/ws/client': r('rpc/src/presets/ws/client.ts'),
+  '@vitejs/devtools-kit/client': r('kit/src/client/index.ts'),
+  '@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/shared-state': r('kit/src/utils/shared-state.ts'),
+  '@vitejs/devtools-kit': r('kit/src/index.ts'),
+  '@vitejs/devtools-vite': r('vite/src/index.ts'),
+  '@vitejs/devtools/client/inject': r('core/src/client/inject/index.ts'),
+  '@vitejs/devtools/client/webcomponents': r('core/src/client/webcomponents/index.ts'),
+  '@vitejs/devtools': r('core/src/index.ts'),
+}
+
+// update tsconfig.base.json
+const raw = fs.readFileSync(join(root, 'tsconfig.base.json'), 'utf-8').trim()
+const tsconfig = JSON.parse(raw)
+tsconfig.compilerOptions.paths = Object.fromEntries(
+  Object.entries(alias).map(([key, value]) => [key, [`./${relative(root, value)}`]]),
+)
+const newRaw = JSON.stringify(tsconfig, null, 2)
+if (newRaw !== raw)
+  fs.writeFileSync(join(root, 'tsconfig.base.json'), `${newRaw}\n`, 'utf-8')

docs/.vitepress/config.ts

@@ -4,24 +4,32 @@ import {
   groupIconMdPlugin,
   groupIconVitePlugin,
 } from 'vitepress-plugin-group-icons'
+import { version } from '../../package.json'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Vite DevTools',
-  description: 'DevTools for Vite',
+  description: 'Visualize and analyze your Vite build process with powerful developer tools. Extensible architecture for building custom DevTools integrations.',
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
   ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Guide', link: '/guide/' },
-      { text: 'Kit', link: '/kit/' },
+      { text: 'DevTools Kit', link: '/kit/' },
+      {
+        text: `v${version}`,
+        items: [
+          { text: 'Release Notes', link: 'https://github.com/vitejs/devtools/releases' },
+          { text: 'Contributing', link: 'https://github.com/vitejs/devtools/blob/main/CONTRIBUTING.md' },
+        ],
+      },
     ],
 
     sidebar: [
       {
-        text: 'Introduction',
+        text: 'Guide',
         items: [
           { text: 'Getting Started', link: '/guide/' },
         ],
@@ -33,15 +41,25 @@ export default defineConfig({
         ],
       },
     ],
+
+    search: {
+      provider: 'local',
+    },
+
     logo: {
       light: '/logo.svg',
       dark: '/logo_dark.svg',
     },
+
     footer: {
       message: `Released under the MIT License.`,
       copyright: 'Copyright © 2025-present VoidZero Inc. & Vite Contributors',
     },
 
+    lastUpdated: {
+      text: 'Last updated',
+    },
+
     editLink: {
       pattern: 'https://github.com/vitejs/devtools/edit/main/docs/:path',
       text: 'Suggest changes to this page',

docs/guide/index.md

@@ -1,10 +1,28 @@
+---
+outline: deep
+---
+
 # Getting Started
 
 > [!WARNING]
 > Vite DevTools is still in development and not yet ready for production use.
 > And currently Vite DevTools is designed only for Vite-Rolldown's build mode.
 > Dev mode and normal Vite 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.
+
+### 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
+- **🎨 Unified Interface**: All DevTools integrations appear in a consistent dock interface
+- **⚡ Type-Safe**: Full TypeScript support with type-safe RPC communication
+
+## Installation
+
 If you want to give an early preview, you can try it out by building this project from source, or install the preview build with the following steps:
 
 Switch your Vite to [Rolldown Vite](https://vite.dev/guide/rolldown#how-to-try-rolldown):
@@ -54,3 +72,31 @@ Open the DevTools panel in your browser to play with the DevTools:
 ```bash
 pnpm dev
 ```
+
+## 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/)
+- **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:
+
+- **Build mode only**: Currently works with Vite-Rolldown's build mode
+- **Dev mode**: Not yet supported (planned for future releases)
+- **Standard Vite**: Requires Rolldown Vite for now
+
+## 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-vite`**: Built-in UI panel for Vite/Rolldown
+- **`@vitejs/devtools-rpc`**: RPC layer for server-client communication
+
+For more details on extending Vite DevTools, see the [DevTools Kit documentation](/kit/).

docs/index.md

@@ -4,7 +4,7 @@ layout: home
 hero:
   name: Vite DevTools
   text: DevTools for Vite.
-  tagline: Working in Progress
+  tagline: Visualize and analyze your Vite build process with powerful developer tools
   actions:
     - theme: brand
       text: Get Started
@@ -18,13 +18,22 @@ hero:
     alt: Vite DevTools
 
 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.
+  - 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.
   - icon: 🚀
-    title: Feature1
-    details: Description of feature 1.
-  - icon: 🚀
-    title: Feature2
-    details: Description of feature 2.
-  - icon: 🚀
-    title: Feature3
-    details: Description of feature 3.
+    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.
+  - icon: 🔌
+    title: Type-Safe RPC
+    details: Built-in RPC layer for bidirectional communication between server and client. Full TypeScript support for type-safe data exchange.
+  - icon: 🎨
+    title: Flexible UI Options
+    details: Choose from iframe panels, custom renderers, or action buttons. Host your UI as embedded panels, browser extensions, or standalone webpages.
+  - icon: ⚡
+    title: Framework Agnostic
+    details: Works with any framework built on Vite. Use Vue, React, Svelte, or any other framework to build your DevTools UI.
 ---