Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

seanpdoyle
Copy link
Contributor

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.

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

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
Copy link
Contributor Author

I'd recently spent some time sharing news of the recent additions to Turbo, and had trouble differentiating morphing from the existing actions.

Explaining morphing in terms of Page Refresh replace versus morph and the [children-only] attribute in terms of updating an element gave me the idea to open this PR to consolidate the concepts.

@omarluq had you considered implementing morphing in this style as part of the initial implementation merged in hotwired/turbo#1185?

@omarluq
Copy link
Contributor

omarluq commented Apr 5, 2024

@seanpdoyle Yes, I did consider this approach. The main reason I opted for a new action instead is due to the existence of the turbo-morph library, which many users are already familiar with. By matching the API, the new action would serve as a drop-in replacement.

However, I'm not opposed to the idea of consolidating the morph action as you suggested. Interestingly, I was asked the exact same question recently while explaining the feature at work. It seems there's a genuine interest in making these concepts more intuitive and unified, which I fully support.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants