writing-vite-devtools-integrations

Skill do tworzenia integracji devtools dla Vite przy użyciu @vitejs/devtools-kit. Pozwala budować wtyczki Vite z panelami deweloperskimi, funkcjami RPC, wpisami dock, synchronizowanym stanem między serwerem a klientem, logami i powiadomieniami. Idealny dla twórców wtyczek, którzy chcą rozszerzyć możliwości Vite DevTools o własne narzędzia diagnostyczne i interfejsy użytkownika.

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