|
| 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