Toolverse
All skills

developing-with-turbo-streams

by hotwired-laravel

Basics of developing with Turbo Streams in web applications. Activate when working on projects that utilize Turbo Streams for enhancing user experience through real-time updates, dynamic content changes, and partial page updates without full reloads.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
5

About this skill

Basics of developing with Turbo Streams in web applications. Activate when working on projects that utilize Turbo Streams for enhancing user experience through real-time updates, dynamic content changes, and partial page updates without full reloads.

How to use

  1. Zainstaluj skill w swoim środowisku Claude/Copilot jako asystenta do pracy z Turbo Streams w projektach Laravel.

  2. Gdy pracujesz nad formularzem, który powinien zaktualizować stronę bez pełnego przeładowania, użyj helpera turbo_stream() w kontrolerze. Sprawdź najpierw, czy żądanie akceptuje odpowiedzi Turbo Stream za pomocą $request->wantsTurboStream().

  3. Wybierz akcję odpowiednią do Twojego przypadku: użyj append() aby dodać element na koniec kontenera, prepend() aby dodać na początek, replace() aby zastąpić element, update() aby zmienić jego zawartość, remove() aby usunąć, before() lub after() aby wstawić przed lub po elemencie, lub refresh() aby odświeżyć.

  4. Przekaż do helpera model lub widok – skill pomoże Ci zbudować fluent builder z akcją i selektorem CSS. Na przykład turbo_stream()->append('posts', view('posts._post')) doda nowy post do kontenera o id="posts".

  5. Dla transmisji w czasie rzeczywistym użyj Broadcasts trait w modelu i metod broadcastAppend, broadcastPrepend, broadcastReplace, broadcastRemove lub broadcastRefresh. Skill pokaże Ci, jak połączyć je z x-turbo::stream-from na froncie.

  6. Jeśli potrzebujesz bardziej zaawansowanych scenariuszy, użyj TurboStream facade do ręcznych broadcastów lub kombinuj wiele streamów w jednej odpowiedzi – skill będzie Ci doradzać na każdym kroku.

Related skills