Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ dist
packages/vite/src/public/fonts
packages/vite/src/app/public/fonts
packages/vite/runtime
packages/rolldown/src/public/fonts
packages/rolldown/src/app/public/fonts
packages/rolldown/runtime
.rolldown
*.tsbuildinfo
docs/.vitepress/cache
Expand Down
18 changes: 9 additions & 9 deletions AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Quick reference for future agents working on this repo.
- `packages/core` (`@vitejs/devtools`): Vite plugin, CLI, host/runtime (docks, views, terminals), websocket RPC server, standalone/webcomponents client.
- `packages/kit` (`@vitejs/devtools-kit`): public types/utilities (`defineRpcFunction`, shared state, events) for integration authors; client helpers.
- `packages/rpc` (`@vitejs/devtools-rpc`): thin typed RPC wrapper over `birpc`, with WS presets.
- `packages/vite` (`@vitejs/devtools-vite`): Nuxt-based UI served from the plugin; registers Vite dock and RPC functions for Rolldown build data.
- `packages/rolldown` (`@vitejs/devtools-rolldown`): Nuxt-based UI served from the plugin; registers Vite dock and RPC functions for Rolldown build data.
- `packages/webext`: browser extension scaffolding (currently ancillary).
- Docs under `docs/` (VitePress); user-facing guides in `docs/guide`.
- Path aliases defined in `alias.ts` and propagated to `tsconfig.base.json` (do not edit paths manually).
Expand All @@ -18,9 +18,9 @@ Quick reference for future agents working on this repo.
flowchart TD
core["@vitejs/devtools"] --> kit["@vitejs/devtools-kit"]
core --> rpc["@vitejs/devtools-rpc"]
core --> viteUI["@vitejs/devtools-vite (Nuxt UI)"]
viteUI --> kit
viteUI --> rpc
core --> rolldownUI["@vitejs/devtools-rolldown (Nuxt UI)"]
rolldownUI --> kit
rolldownUI --> rpc
webext["@vitejs/devtools-webext"] --> core
```

Expand All @@ -31,19 +31,19 @@ flowchart TD
- **Client context**: webcomponents/Nuxt UI state (`packages/core/src/client/webcomponents/state/*`), holding dock entries, selected panels, and RPC client; created with `clientType` of `embedded` or `standalone`.
- Websocket server (`packages/core/src/node/ws.ts`) exposes RPC via `@vitejs/devtools-rpc/presets/ws`. Auth is skipped in build mode or when `devtools.clientAuth` is `false`; trusted IDs stored under `node_modules/.vite/devtools/auth.json`.
- DevTools middleware (`packages/core/src/node/server.ts`) serves connection meta and standalone client assets.
- The Vite UI plugin (`packages/vite/src/node/plugin.ts`) registers RPC functions (Rolldown data fetchers) and hosts the Nuxt-generated static UI at `/.devtools-vite/`, adding a dock entry.
- Nuxt app config (`packages/vite/src/nuxt.config.ts`): SPA, base `/.devtools-vite/`, disables Nuxt devtools, enables typed pages, uses Unocss/VueUse; sets `vite.devtools.clientAuth = false` for UI.
- The Rolldown UI plugin (`packages/rolldown/src/node/plugin.ts`) registers RPC functions (Rolldown data fetchers) and hosts the Nuxt-generated static UI at `/.devtools-rolldown/`, adding a dock entry.
- Nuxt app config (`packages/rolldown/src/nuxt.config.ts`): SPA, base `/.devtools-rolldown/`, disables Nuxt devtools, enables typed pages, uses Unocss/VueUse; sets `vite.devtools.clientAuth = false` for UI.

## Client Modes (kit/core)
- **Embedded mode**: default overlay injected into the host app; docks render inside the app shell; use `clientType: 'embedded'` when creating client context.
- **Standalone mode**: runs the webcomponents UI as an independent page (see `packages/core/src/client/standalone`); useful for external access or when not injecting into the host app UI.

## Development Workflow
- Install: `pnpm install` (repo requires `pnpm@10.x`).
- Build all: `pnpm build` (runs `turbo run build`; for UI data, build generates Rolldown metadata under `packages/vite/node_modules/.rolldown`).
- Build all: `pnpm build` (runs `turbo run build`; for UI data, build generates Rolldown metadata under `packages/rolldown/node_modules/.rolldown`).
- Dev:
- Core playground: `pnpm -C packages/core run play`
- Vite UI: `pnpm -C packages/vite run dev`
- Rolldown UI: `pnpm -C packages/rolldown run dev`
- Standalone core client: `pnpm -C packages/core run dev:standalone`
- Tests: `pnpm test` (Vitest; projects under `packages/*` and `test`).
- Typecheck: `pnpm typecheck` (via `vue-tsc -b`).
Expand All @@ -64,7 +64,7 @@ flowchart TD
- Core webcomponents: `packages/core/src/client/webcomponents`
- Kit utilities: `packages/kit/src/utils/*`
- RPC presets: `packages/rpc/src/presets/ws/*`
- Vite UI app: `packages/vite/src/app`
- Rolldown UI app: `packages/rolldown/src/app`
- Docs: `docs/guide/*`

## Quick Checks Before PRs
Expand Down
10 changes: 5 additions & 5 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excl

```bash
pnpm install
pnpm build # Required: generates Rolldown meta under ./packages/vite/node_modules/.rolldown
pnpm build # Required: generates Rolldown meta under ./packages/rolldown/node_modules/.rolldown
pnpm dev # Start dev server
```

**Note**: After pulling latest commits, remove `./packages/vite/node_modules/.rolldown` and rebuild to get the latest data format.
**Note**: After pulling latest commits, remove `./packages/rolldown/node_modules/.rolldown` and rebuild to get the latest data format.

## Project Structure

Expand Down Expand Up @@ -51,9 +51,9 @@ Utility library for integration authors.

---

### `packages/vite` - `@vitejs/devtools-vite`
### `packages/rolldown` - `@vitejs/devtools-rolldown`

Built-in UI panel for Vite/Rolldown integration.
Built-in UI panel for Rolldown integration.

- Vite plugin (enabled by default)
- Nuxt-based UI for build visualization
Expand Down Expand Up @@ -94,7 +94,7 @@ Browser extension (planned for future dev mode). **Not accepting contributions c
- `pnpm test` - Vitest
- `pnpm typecheck` - Type check

Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/vite run dev`
Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/rolldown run dev`

## Workflow

Expand Down
2 changes: 1 addition & 1 deletion alias.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const alias = {
'@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-rolldown': r('rolldown/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'),
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ 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-rolldown`**: Built-in UI panel for Rolldown
- **`@vitejs/devtools-rpc`**: RPC layer for server-client communication

For more details on extending Vite DevTools, see the [DevTools Kit documentation](/kit/).
98 changes: 98 additions & 0 deletions docs/public/rolldown-devtools-logo-dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading