developing-with-turbo-drive

Skill do pracy z Turbo Drive, biblioteką przyspieszającą nawigację w aplikacjach internetowych. Zamiast przeładowywać całą stronę, Turbo Drive przechwytuje kliknięcia linków i wysyłki formularzy, zamieniając je w żądania fetch. Zachowuje środowisko JavaScript i stan DOM (wartości pól, pozycję scrolla), dając użytkownikowi doświadczenie zbliżone do aplikacji jednostronicowej. Skill aktywuje się przy pracy z atrybutami data-turbo, konfiguracją cache'u, przejściami widoków czy morphingiem stron.

1. Aktywuj skill, gdy pracujesz nad projektem wykorzystującym Turbo Drive lub gdy pojawią się słowa kluczowe takie jak nawigacja, morphing stron, prefetching czy śledzenie zasobów.
2. Skonfiguruj przechwytywanie kliknięć linków — Turbo Drive automatycznie zmienia żądania do linków na tej samej domenie w fetch, aktualizuje URL przez History API i renderuje odpowiedź bez przeładowania.
3. Obsługuj wysyłki formularzy — ustaw formularze tak, aby Turbo Drive przechwytywał je jako fetch, a następnie renderował stronę po przekierowaniu.
4. Zastosuj morphing stron zamiast całkowitego zastąpienia body — użyj atrybutu x-turbo::refreshes-with, aby zachować stan DOM (wartości pól, scroll, fokus) między nawigacjami.
5. Zarządzaj cache'em i śledzeniem zasobów — wykorzystaj atrybuty data-turbo-track, data-turbo-permanent, data-turbo-preload oraz dyrektywy x-turbo::exempts-page-from-cache i x-turbo::page-requires-reload do kontroli buforowania.
6. Włącz przejścia widoków — dodaj x-turbo::page-view-transition, aby wzbogacić doświadczenie wizualne nawigacji, i dostosuj pasek postępu do wyglądu aplikacji.