Skip to content

Commit

Permalink
Re-structure turbo-stream[action=morph] support
Browse files Browse the repository at this point in the history
Related to [hotwired/turbo#1240][]

Since the `<turbo-stream action="morph">` hasn't yet been part of a
release, there's an opportunity to rename it without being considerate
of backwards compatibility.

As an alternative to introduce a new Stream Action, this commit changes
existing actions to be more flexible.

For example, the `<turbo-stream method="morph">` element behaves like a
specialized version of a `<turbo-stream method="replace">`, since it
operates on the target element's `outerHTML` property.

Similarly, the `<turbo-stream method="morph" children-only>` element
behaves like a specialized version of a `<turbo-stream
method="update">`, since it operates on the target element's `innerHTML`
property.

```diff
-<turbo-stream action="morph">
+<turbo-stream action="replace" method="morph">
   <template>Replace me with morphing</template>
 </turbo-stream>

-<turbo-stream action="morph" children-only>
+<turbo-stream action="update" method="morph">
   <template>Update me with morphing</template>
 </turbo-stream>
```

[hotwired/turbo#1240]: hotwired/turbo#1240
  • Loading branch information
seanpdoyle committed Jul 12, 2024
1 parent c2a19cd commit 6be3de4
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 38 deletions.
30 changes: 14 additions & 16 deletions _source/handbook/05_streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@ A Turbo Streams message is a fragment of HTML consisting of `<turbo-stream>` ele
</template>
</turbo-stream>

<turbo-stream action="replace" method="morph" target="current_step">
<template>
<!-- The contents of this template will replace the element with ID "current_step" via morph. -->
<li>New item</li>
</template>
</turbo-stream>

<turbo-stream action="update" target="unread_count">
<template>
<!-- The contents of this template will replace the
Expand All @@ -52,6 +59,13 @@ A Turbo Streams message is a fragment of HTML consisting of `<turbo-stream>` ele
</template>
</turbo-stream>

<turbo-stream action="update" method="morph" target="current_step">
<template>
<!-- The contents of this template will replace the children of the element with ID "current_step" via morph. -->
<li>New item</li>
</template>
</turbo-stream>

<turbo-stream action="remove" target="message_1">
<!-- The element with DOM ID "message_1" will be removed.
The contents of this stream element are ignored. -->
Expand All @@ -73,22 +87,6 @@ A Turbo Streams message is a fragment of HTML consisting of `<turbo-stream>` ele
</template>
</turbo-stream>

<turbo-stream action="morph" target="current_step">
<template>
<!-- The contents of this template will replace the
element with ID "current_step" via morph. -->
<li>New item</li>
</template>
</turbo-stream>

<turbo-stream action="morph" target="current_step" children-only>
<template>
<!-- The contents of this template will replace the
children of the element with ID "current_step" via morph. -->
<li>New item</li>
</template>
</turbo-stream>

<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
```

Expand Down
42 changes: 20 additions & 22 deletions _source/reference/streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,16 @@ Replaces the element designated by the target dom id.
</turbo-stream>
```

The `[method="morph"]` attribute can be added to the `turbo-stream` element to replace the element designated by the target dom id via morph.

```html
<turbo-stream action="replace" method="morph" target="dom_id">
<template>
Content to replace the element.
</template>
</turbo-stream>
```

### Update

Updates the content within the template tag to the container designated by the target dom id.
Expand All @@ -58,6 +68,16 @@ Updates the content within the template tag to the container designated by the t
</turbo-stream>
```

The `[method="morph"]` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id.

```html
<turbo-stream action="update" method="morph" target="dom_id">
<template>
Content to replace the element.
</template>
</turbo-stream>
```

### Remove

Removes the element designated by the target dom id.
Expand Down Expand Up @@ -91,28 +111,6 @@ Inserts the content within the template tag after the element designated by the
</turbo-stream>
```

### Morph

Replaces the element designated by the target dom id via morph.

```html
<turbo-stream action="morph" target="dom_id">
<template>
Content to replace the element.
</template>
</turbo-stream>
```

The `children-only` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id.

```html
<turbo-stream action="morph" target="dom_id" children-only>
<template>
Content to replace the element.
</template>
</turbo-stream>
```

### Refresh

Initiates a [Page Refresh](/handbook/page_refreshes) to render new content with
Expand Down

0 comments on commit 6be3de4

Please sign in to comment.