|
4 | 4 | - Use Turbo Drive for smooth page transitions without full page reloads. |
5 | 5 | - Decompose pages with Turbo Frames for independent sections that update separately. |
6 | 6 | - Use Turbo Streams for real-time updates and dynamic content changes. |
7 | | -- Leverage Stimulus for progressive JavaScript enhancement when Turbo isn't sufficient. |
8 | | -- Keep Stimulus controllers focused and simple |
| 7 | +- Leverage Stimulus for progressive JavaScript enhancement when Turbo isn't sufficient (if Stimulus is available) |
9 | 8 | - Prefer server-side template rendering and state management over client-side frameworks. |
10 | 9 | - Enable "morphing" for seamless page updates that preserve scroll position and focus. |
11 | 10 | - Use data attributes for JavaScript hooks |
@@ -127,37 +126,6 @@ class Post extends Model |
127 | 126 | </code-snippet> |
128 | 127 | @endverbatim |
129 | 128 |
|
130 | | -## Stimulus Integration |
131 | | -- Use Stimulus for client-side interactivity that requires JavaScript (when Turbo's server-side approach isn't sufficient): |
132 | | -@verbatim |
133 | | -<code-snippet name="Stimulus controller for form enhancements" lang="javascript"> |
134 | | - import { Controller } from "@hotwired/stimulus" |
135 | | - |
136 | | - export default class extends Controller { |
137 | | - static targets = ["input", "counter"] |
138 | | - |
139 | | - connect() { |
140 | | - this.updateCounter() |
141 | | - } |
142 | | - |
143 | | - updateCounter() { |
144 | | - const length = this.inputTarget.value.length |
145 | | - this.counterTarget.textContent = `${length}/280` |
146 | | - } |
147 | | - } |
148 | | -</code-snippet> |
149 | | -@endverbatim |
150 | | -- Connect Stimulus controllers with proper data attributes: |
151 | | -@verbatim |
152 | | - ```blade |
153 | | - <div data-controller="character-counter"> |
154 | | - <textarea data-character-counter-target="input" |
155 | | - data-action="input->character-counter#updateCounter"></textarea> |
156 | | - <span data-character-counter-target="counter">0/280</span> |
157 | | - </div> |
158 | | - ``` |
159 | | -@endverbatim |
160 | | - |
161 | 129 | ## Form Handling & Validation |
162 | 130 | - Use Laravel's resource route naming conventions for automatic form re-rendering, if the matching route exists: |
163 | 131 | - `*.store` action redirects to `*.create` route (shows form again with validation errors) |
|
0 commit comments