Skip to content

Commit fcaa0e0

Browse files
committed
Add docs
1 parent 5158503 commit fcaa0e0

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

docs/turbo-streams.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,40 @@ It will build a `remove` Turbo Stream if the model was just deleted (or if it wa
143143
return turbo_stream($comment, 'append');
144144
```
145145

146+
## Turbo Stream & Morph
147+
148+
Both the `update` and `replace` Turbo Stream actions can specify a `[method="morph"]`, so the action will use DOM morphing instead of the default renderer.
149+
150+
```php
151+
turbo_stream()->replace(dom_id($post, 'comments'), view('comments.partials.comment', [
152+
'comment' => $comment,
153+
]))->morph();
154+
```
155+
156+
This would generate the following Turbo Stream HTML:
157+
158+
```html
159+
<turbo-stream action="replace" target="comments_post_123" method="morph">
160+
<template>...</template>
161+
</turbo-stream>
162+
```
163+
164+
And here's the `update` action version:
165+
166+
```php
167+
turbo_stream()->update(dom_id($post, 'comments'), view('comments.partials.comment', [
168+
'comment' => $comment,
169+
]))->morph();
170+
```
171+
172+
This would generate the following Turbo Stream HTML:
173+
174+
```html
175+
<turbo-stream action="update" target="comments_post_123" method="morph">
176+
<template>...</template>
177+
</turbo-stream>
178+
```
179+
146180
## Target Multiple Elements
147181

148182
Turbo Stream elements can either have a `target` with a DOM ID or a `targets` attribute with a CSS selector to [match multiple elements](https://turbo.hotwired.dev/reference/streams#targeting-multiple-elements). You may use the `xAll` shorthand methods to set the `targets` attribute instead of `target`:

0 commit comments

Comments
 (0)