sync-construction-async-property-ui-render-gate-pattern
Synchroniczna konstrukcja klienta z asynchroniczną inicjalizacją — bez await na poziomie modułu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Wzorzec projektowy do tworzenia klientów, które wymagają asynchronicznej inicjalizacji (bazy danych, połączenia sieciowe), ale muszą być eksportowalne z modułów i dostępne synchronicznie w komponentach UI. Rozwiązuje problem top-level await i getter functions — pozwala importować klienta bezpośrednio, a asynchroniczną pracę przechowujesz jako właściwość do oczekiwania. Idealne dla aplikacji SvelteKit i komponentów, które potrzebują natychmiastowego dostępu do obiektu klienta.
Jak używać
Zdefiniuj funkcję createClient(), która zwraca obiekt klienta synchronicznie, bez await. Funkcja powinna inicjować asynchroniczną pracę (np. połączenie z bazą, załadowanie z dysku) w tle, ale sama musi zakończyć się natychmiast.
Dołącz do obiektu klienta właściwość whenSynced (lub podobną), która przechowuje Promise reprezentujący zakończenie inicjalizacji asynchronicznej. Ta właściwość będzie możliwa do oczekiwania, gdy będzie to potrzebne.
Eksportuj klienta bezpośrednio z modułu: export const client = createClient(). Nie używaj top-level await ani getter functions — klient jest dostępny natychmiast po imporcie.
W komponentach UI importuj klienta normalnie i używaj jego metod synchronicznie: client.save(data), client.load(id). Metody działają od razu, bez czekania na inicjalizację.
Gdy musisz zagwarantować, że inicjalizacja asynchroniczna jest ukończona (np. przed renderowaniem krytycznych danych), użyj await client.whenSynced w odpowiednim miejscu — w funkcji setup komponentu, route guardzie lub effect hook.
W SvelteKit możesz użyć tego wzorca do warunkowego renderowania: czekaj na whenSynced w +page.js lub +layout.js, aby zagwarantować gotowość klienta przed renderowaniem strony.