Re-structure `turbo-stream[action=morph]` support #1240

seanpdoyle · 2024-04-04T19:27:37Z

Closes #1163
Follow-up to #1185

This commit re-structures the new support for
turbo-stream[action="morph"] elements introduced in #1185.

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.

-<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>

This commit removes the [action="morph"] support entirely, and re-implements it in terms of the [action="replace"] and [action="update"] support.

By consolidating concepts, the "scope" of the modifications is more clearly communicated to callers that are familiar with the underlying DOM interfaces (Element.replaceWith and Element.innerHTML) that are invoked by the conventionally established Replace and Update actions.

This proposal also aims to reinforce the "method" terminology introduced by the Page Refresh <meta name="turbo-refresh-method" content="morph"> element.

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

seanpdoyle · 2024-04-04T19:42:14Z

I started to open a PR related to hotwired/turbo-rails#583 to remove turbo_stream.morph with extension to its turbo_stream.replace and turbo_stream.update counterparts, but wasn't sure whether or not it'd be worth removing those methods.

For example, the turbo_stream.morph method could serve as an abstraction on top of building a <turbo-stream action="replace" method="morph"> in the same way as a turbo_stream.morph(..., children_only: true) call could be an abstraction on top of building a <turbo-stream action="update" method="morph">.

If this PR's proposal is well-received, I'll open a corresponding PR to turbo-rails.

seanpdoyle · 2024-04-04T20:10:55Z

After doing some more research, I see that the original implementation introduced in #1185 intentionally overlaps with the turbo-stream[action="morph"] element provided by the turbo-morph package.

Since that package integrates with morphdom, support for the [children-only] attribute is a natural corollary to the childrenOnly: Boolean option that Morphdom supports.

Since Turbo 8's morphing is powered by Idiomorph, drawing inspiration from the Morphdom API isn't as compelling as it is for the turbo-morph package.

Instead, utilizing existing Turbo terminology (instead of something like [morph-style] to mirror Idiomorph's morphStyle: "innerHTML" | "outerHTML" option) encapsulates that implementation detail in a way that makes it possible to change the underlying morphing library in the future without affecting downstream applications.

seanpdoyle · 2024-04-08T13:32:58Z

@jorgemanrubia does this feel like an improvement?

jonsgreen · 2024-05-09T11:40:22Z

Not sure that my 2 cents are of value here but I do like the idea of having a different api for stream morphing that would not conflict with the turbo-power library. There are other features in turbo-power that are of value but I would prefer to use turbo with Idiomorph for morphing on a page and I believe that if turbo_rails were to use turbo_stream.morph it would collide with turbo-power.

@seanpdoyle, I am curious if you have a sense of when this feature might be released? As noted in #1229 it is in the docs but not actually functional yet which tripped me up. As other folks have mentioned in #1185 I have a pattern that I use in an app in which I post back to the same action (e.g. new or edit) to update the state of an object but without persisting it to the database so a redirect is not possible. I would like the UI to adjust as the state of the form object changes without doing a full replace since that would lose focus so morphing would be ideal.

I think I did at least finally figure out how to get the full page render to trigger a morph refresh by passing a status code other than 200. Does that sound right? Tricky.

jorgemanrubia · 2024-07-11T07:22:19Z

I love this @seanpdoyle. It makes the API tighter and more consistent. Thanks 🙏 . I would imagine this will require some adjustments after merging #1234. Happy to tackle this one next. Thanks.

jorgemanrubia · 2024-07-12T13:08:40Z

@seanpdoyle if you can rebase and adapt to the last changes I'll merge. Thanks!

This commit re-structures the new support for `turbo-stream[action="morph"]` elements introduced in [hotwired#1185][]. 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> ``` This commit removes the `[action="morph"]` support entirely, and re-implements it in terms of the `[action="replace"]` and `[action="update"]` support. By consolidating concepts, the "scope" of the modifications is more clearly communicated to callers that are familiar with the underlying DOM interfaces (`Element.replaceWith` and `Element.innerHTML`) that are invoked by the conventionally established Replace and Update actions. This proposal also aims to reinforce the "method" terminology introduced by the Page Refresh `<meta name="refresh-method" content="morph">` element. [hotwired#1185]: hotwired#1185

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

seanpdoyle · 2024-07-12T15:21:27Z

@jorgemanrubia I've rebased. I've also opened hotwired/turbo-site#186 to document this change.

omarluq · 2024-07-12T16:20:24Z

@seanpdoyle Im happy to take on the refactor on the turbo-rails side if you haven't started it yet

cc: @jorgemanrubia

seanpdoyle · 2024-07-12T16:52:00Z

@omarluq I hadn't started anything on the Rails side.

Go for it! Thank you for the help.

jorgemanrubia

Thanks, @seanpdoyle. This is a great change 👍 .

searls · 2024-07-15T15:14:50Z

Reading the play-by-play, this change makes a lot of sense to me. Update and Replace are the actions. morph vs replace are the methods by which that's accomplished. Comingling those interests into a single category (turbo stream actions) would have resulted in a bunch of confusion, option duplication, etc.

marcoroth · 2024-07-16T19:46:27Z

Would it make sense to keep the morph action around as a shim and emit a warning saying that this action was "deprecated" in favor of using replace with method=morph?

brunoprietog · 2024-07-16T19:50:20Z

I don't think so, because no version was released with the Turbo stream morph action

searls · 2024-07-16T19:50:27Z

@marcoroth, my understanding was it was never actually included in a release (the fact it didn't work is how I found these issues initially)

marcoroth · 2024-07-16T19:52:43Z

Oh right, nevermind then. I guess I confused it with the refresh action which has nothing to do with this.

jorgemanrubia · 2024-07-19T04:49:23Z

I just released turbo v8.0.5 and turbo-rails v2.0.6. I'll merge those site docs next.

searls · 2024-07-20T12:29:28Z

Thanks! I'll try incorporating this next week and may update this blog post I recently wrote

seanpdoyle mentioned this pull request Apr 4, 2024

Re-structure turbo-stream[action=morph] support hotwired/turbo-site#186

Merged

dahlbyk mentioned this pull request May 9, 2024

Unable to manage history state programmatically (stream response) #792

Closed

seanpdoyle force-pushed the rename-morph-stream-action branch from 057ad5e to 8162495 Compare July 3, 2024 17:51

seanpdoyle mentioned this pull request Jul 3, 2024

Extract and re-use element morphing logic #1234

Merged

seanpdoyle force-pushed the rename-morph-stream-action branch from 8162495 to 9369eb9 Compare July 12, 2024 15:13

jorgemanrubia approved these changes Jul 12, 2024

View reviewed changes

jorgemanrubia merged commit a4f3a90 into hotwired:main Jul 12, 2024
1 check passed

seanpdoyle deleted the rename-morph-stream-action branch July 12, 2024 19:01

brunoprietog mentioned this pull request Jul 13, 2024

Morph action for streams not part of 8.0.4 but in docs #1229

Closed

jorgemanrubia mentioned this pull request Jul 15, 2024

add turbo stream morph actions to broadcasts hotwired/turbo-rails#583

Merged

omarluq mentioned this pull request Jul 16, 2024

Remove morph broadcast helpers hotwired/turbo-rails#647

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Re-structure `turbo-stream[action=morph]` support #1240

Re-structure `turbo-stream[action=morph]` support #1240

seanpdoyle commented Apr 4, 2024 •

edited

Loading

seanpdoyle commented Apr 4, 2024

seanpdoyle commented Apr 4, 2024

seanpdoyle commented Apr 8, 2024

jonsgreen commented May 9, 2024 •

edited

Loading

jorgemanrubia commented Jul 11, 2024

jorgemanrubia commented Jul 12, 2024 •

edited

Loading

seanpdoyle commented Jul 12, 2024

omarluq commented Jul 12, 2024

seanpdoyle commented Jul 12, 2024

jorgemanrubia left a comment

searls commented Jul 15, 2024

marcoroth commented Jul 16, 2024 •

edited

Loading

brunoprietog commented Jul 16, 2024

searls commented Jul 16, 2024

marcoroth commented Jul 16, 2024

jorgemanrubia commented Jul 19, 2024 •

edited

Loading

searls commented Jul 20, 2024

Re-structure turbo-stream[action=morph] support #1240

Re-structure turbo-stream[action=morph] support #1240

Conversation

seanpdoyle commented Apr 4, 2024 • edited Loading

seanpdoyle commented Apr 4, 2024

seanpdoyle commented Apr 4, 2024

seanpdoyle commented Apr 8, 2024

jonsgreen commented May 9, 2024 • edited Loading

jorgemanrubia commented Jul 11, 2024

jorgemanrubia commented Jul 12, 2024 • edited Loading

seanpdoyle commented Jul 12, 2024

omarluq commented Jul 12, 2024

seanpdoyle commented Jul 12, 2024

jorgemanrubia left a comment

Choose a reason for hiding this comment

searls commented Jul 15, 2024

marcoroth commented Jul 16, 2024 • edited Loading

brunoprietog commented Jul 16, 2024

searls commented Jul 16, 2024

marcoroth commented Jul 16, 2024

jorgemanrubia commented Jul 19, 2024 • edited Loading

searls commented Jul 20, 2024

Re-structure `turbo-stream[action=morph]` support #1240

Re-structure `turbo-stream[action=morph]` support #1240

seanpdoyle commented Apr 4, 2024 •

edited

Loading

jonsgreen commented May 9, 2024 •

edited

Loading

jorgemanrubia commented Jul 12, 2024 •

edited

Loading

marcoroth commented Jul 16, 2024 •

edited

Loading

jorgemanrubia commented Jul 19, 2024 •

edited

Loading