developing-with-turbo-drive

Basics of developing with Turbo Drive in web applications. Activate when working on projects that utilize Turbo Drive for enhancing user experience through faster navigation by intercepting link clicks and form submissions to avoid full page reloads.

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.