W
writing-vite-devtools-integrations
Creates devtools integrations for Vite using @vitejs/devtools-kit. Use when building Vite plugins with devtools panels, RPC functions, dock entries, shared state, or any devtools-related functionality. Applies to files importing from @vitejs/devtools-kit or containing
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Creates devtools integrations for Vite using @vitejs/devtools-kit. Use when building Vite plugins with devtools panels, RPC functions, dock entries, shared state, or any devtools-related functionality. Applies to files importing from @vitejs/devtools-kit or containing devtools.setup hooks in Vite plugins.
How to use
- Zainstaluj @vitejs/devtools-kit w swoim projekcie wtyczki Vite jako zależność deweloperską. 2. W pliku głównym wtyczki dodaj hook devtools.setup(ctx) do obiektu konfiguracji wtyczki, obok standardowych właściwości name i apply. 3. Wewnątrz funkcji setup zarejestruj elementy interfejsu za pomocą dostępnych metod kontekstu: ctx.docks.register() dla paneli, ctx.rpc dla funkcji zdalnych, ctx.logs dla wiadomości i powiadomień. 4. Dla panelu iframe określ identyfikator, tytuł, ikonę oraz URL do zasobu UI — możesz hostować statyczne pliki za pomocą ctx.views. 5. Jeśli potrzebujesz synchronizacji stanu między serwerem a klientem, użyj ctx.rpc.sharedState do definiowania i aktualizacji danych w czasie rzeczywistym. 6. Przetestuj wtyczkę w środowisku deweloperskim Vite — nowy panel powinien pojawić się w interfejsie Vite DevTools po załadowaniu wtyczki.