Skip to content

Commit 5a3af68

Browse files
committed
docs: update
1 parent 9795ffb commit 5a3af68

File tree

1 file changed

+68
-0
lines changed

1 file changed

+68
-0
lines changed
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Example: DevTools Kit File Explorer Plugin
2+
3+
This example shows how to build a custom Vite DevTools panel with `@vitejs/devtools-kit`.
4+
5+
It provides a **File Explorer** dock that:
6+
- lists files under a target directory
7+
- reads file content on demand
8+
- writes file content in dev (websocket) mode
9+
- works in static mode via RPC dump files
10+
11+
## How It Works
12+
13+
The example has three main parts:
14+
15+
1. Node plugin (`src/node/plugin.ts`)
16+
- creates RPC functions
17+
- registers them with `context.rpc.register(...)`
18+
- hosts the built UI with `context.views.hostStatic(...)`
19+
- registers a dock entry (`type: 'iframe'`) for the panel
20+
21+
2. RPC functions (`src/node/rpc/functions/*`)
22+
- `kit-plugin-file-explorer:getInfo` (`type: 'static'`)
23+
- `kit-plugin-file-explorer:listFiles` (`type: 'query'`, dumped with empty args)
24+
- `kit-plugin-file-explorer:readFile` (`type: 'query'`, fallback `null`)
25+
- `kit-plugin-file-explorer:writeFile` (`type: 'action'`, dev-only behavior)
26+
27+
3. UI app (`src/ui/main.tsx`)
28+
- connects using `getDevToolsRpcClient()`
29+
- detects backend mode (`websocket` vs `static`)
30+
- hides write controls in static mode
31+
32+
## Run The Example
33+
34+
From the `examples/plugin-file-explorer` directory (`cd examples/plugin-file-explorer`):
35+
36+
```bash
37+
pnpm play:dev
38+
```
39+
40+
Then open the app URL, open Vite DevTools, and switch to the **File Explorer** dock.
41+
42+
## Static Build / Preview
43+
44+
Build static output:
45+
46+
```bash
47+
pnpm play:build
48+
```
49+
50+
Preview generated static files:
51+
52+
```bash
53+
pnpm play:preview
54+
```
55+
56+
Static artifacts are generated under:
57+
58+
- `playground/.vite-devtools/.devtools/.connection.json`
59+
- `playground/.vite-devtools/.devtools/.rpc-dump/index.json`
60+
- `playground/.vite-devtools/.devtools/.rpc-dump/*.json`
61+
62+
## Notes
63+
64+
- Default UI base: `/.plugin-file-explorer/`
65+
- Default target directory: `src`
66+
- You can override via options or env:
67+
- `KIT_PLUGIN_FILE_EXPLORER_UI_BASE`
68+
- `KIT_PLUGIN_FILE_EXPLORER_TARGET_DIR`

0 commit comments

Comments
 (0)