Skip to content

Commit cc24a53

Browse files
antfuantfu
committed
docs: contribution guide
1 parent a697235 commit cc24a53

File tree

3 files changed

+115
-35
lines changed

3 files changed

+115
-35
lines changed

‎CONTRIBUTING.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# Contributing
2+
3+
Thank you for your interest in contributing to Vite DevTools! Before submitting your contribution, please take a moment to read through the following guidelines.
4+
5+
Please be aware that we are still in the early stages of development, and huge refactoring occasionally are expected.
6+
7+
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.
8+
9+
You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excluding `hold-off`) if you are interested in helping out.
10+
11+
## Setup
12+
13+
```bash
14+
pnpm install
15+
pnpm build # Required: generates Rolldown meta under ./packages/vite/.rolldown
16+
pnpm dev # Start dev server
17+
```
18+
19+
**Note**: After pulling latest commits, remove `./packages/vite/.rolldown` and rebuild to get the latest data format.
20+
21+
## Project Structure
22+
23+
Monorepo with pnpm workspaces. Each package's scope:
24+
25+
### `packages/core` - `@vitejs/devtools`
26+
27+
Main entry point and core functionality.
28+
29+
- CLI (`vite-devtools` command)
30+
- Client-side injection scripts
31+
- Standalone mode
32+
- WebComponents UI (Dock, Panels, Terminals)
33+
- Node.js server for DevTools UI
34+
- RPC server/client setup
35+
- Host functions and docks management
36+
37+
**Key files**: `src/node/cli.ts`, `src/node/server.ts`, `src/client/webcomponents/`
38+
39+
---
40+
41+
### `packages/kit` - `@vitejs/devtools-kit`
42+
43+
Utility library for integration authors.
44+
45+
- TypeScript types and interfaces
46+
- Utilities for custom docks, views, panels
47+
- Event system utilities
48+
- RPC client helpers
49+
50+
**Key files**: `src/index.ts`, `src/client.ts`, `src/utils/`
51+
52+
---
53+
54+
### `packages/vite` - `@vitejs/devtools-vite`
55+
56+
Built-in UI panel for Vite/Rolldown integration.
57+
58+
- Vite plugin (enabled by default)
59+
- Nuxt-based UI for build visualization
60+
- Rolldown build output integration
61+
- Build analysis panels, module graph, file inspection
62+
63+
**Key files**: `src/index.ts` (plugin entry), `src/` (Nuxt app)
64+
65+
**Note**: Build generates Rolldown metadata in `.rolldown` folder.
66+
67+
---
68+
69+
### `packages/rpc` - `@vitejs/devtools-rpc`
70+
71+
RPC layer for component communication.
72+
73+
- RPC client/server implementations
74+
- WebSocket presets
75+
- Message serialization
76+
- Type-safe RPC methods
77+
78+
**Key files**: `src/index.ts`, `src/client.ts`, `src/server.ts`, `src/presets/ws/`
79+
80+
---
81+
82+
### `packages/webext` - `@vitejs/devtools-webext`
83+
84+
Browser extension (planned for future dev mode). **Not accepting contributions currently.**
85+
86+
---
87+
88+
## Scripts
89+
90+
- `pnpm build` - Build all packages
91+
- `pnpm watch` - Watch mode
92+
- `pnpm dev` - Dev server
93+
- `pnpm lint` - ESLint
94+
- `pnpm test` - Vitest
95+
- `pnpm typecheck` - Type check
96+
97+
Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/vite run dev`
98+
99+
## Workflow
100+
101+
1. For new features: open an issue first for discussion
102+
2. Make changes, run `pnpm test && pnpm typecheck && pnpm lint`
103+
3. Use conventional commits (`feat:`, `fix:`, etc.)
104+
4. Submit PR with clear description and related issue reference
105+
106+
## Package Guidelines
107+
108+
- **core**: CLI in `cli-commands.ts`, server in `server.ts`, components in `client/webcomponents/`
109+
- **kit**: Keep APIs stable, add types for public APIs, consider backward compatibility
110+
- **vite**: Nuxt 3 app, Vue 3 Composition API, test with `pnpm dev` after build
111+
- **rpc**: Keep methods type-safe, document new methods, test client/server

‎README.md‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,13 @@
22

33
# Vite DevTools
44

5-
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)).
5+
Vite DevTools is a set of tools for visualizing the internal state and build analysis for Vite and Rolldown.
66

77
> [!IMPORTANT]
88
> This project is still in development. Not yet usable. You may preview it by building this project from source.
99
10-
## 🏗️ Project Progress
11-
12-
State: **🚧 Work in progress**
13-
14-
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.
15-
16-
You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excluding `hold-off`) if you are interested in helping out.
17-
18-
## 📦 Packages
19-
20-
- `packages/core`: `@vitejs/devtools` the entry point of the project. It provides the core functionality of Vite DevTools, including the CLI.
21-
- `packages/kit`: `@vitejs/devtools-kit` the utility library for integration authors to extend Vite DevTools. Which include types and utilities for the project.
22-
- `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.
23-
- `packages/rpc`: `@vitejs/devtools-rpc` the rpc layer of the project.
24-
25-
## 💡 Contributing Guide
26-
27-
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:
28-
29-
- For the `devtools-webext` package, we plan to use it for dev mode in the future, so no contributions are needed at this time.
30-
- For any new feature additions, we recommend submitting an issue for discussion and confirmation first.
31-
32-
## 🧑‍💻 Development Guide
33-
34-
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.
35-
36-
- `pnpm install` to install dependencies
37-
- `pnpm build` first to get the Rolldown logs under `./packages/vite/.rolldown` folder
38-
- `pnpm dev` to start the dev server
39-
40-
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.
41-
42-
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.
10+
- 📖 [Documentation](https://vite-devtools.netlify.app)
11+
- 💡 [Contributing Guide](./CONTRIBUTING.md)
4312

4413
## 📄 Licenses
4514

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default defineConfig({
2222
text: `v${version}`,
2323
items: [
2424
{ text: 'Release Notes', link: 'https://github.com/vitejs/devtools/releases' },
25-
{ text: 'Contributing', link: 'https://github.com/vitejs/devtools#-contributing-guide' },
25+
{ text: 'Contributing', link: 'https://github.com/vitejs/devtools/blob/main/CONTRIBUTING.md' },
2626
],
2727
},
2828
],

0 commit comments

Comments
 (0)