turbo-morph
turbo-morph copied to clipboard
marcoroth
Morph action for Turbo Streams
trafficstars
Turbo Morph
Getting Started
turbo-morph is a morphdom integration for Turbo Streams. It provides a new Turbo Stream morph action.
Note: Requires Turbo 7.2+
yarn add turbo-morph
// application.js
import * as Turbo from '@hotwired/turbo'
+import TurboMorph from 'turbo-morph'
+TurboMorph.initialize(Turbo.StreamActions)
Example
<turbo-stream action="morph" targets="body">
<template>
<body data-updated="true">
<h1>This is the new body</h1>
</body>
</template>
</turbo-stream>
children-only option
morphdom exposes a childrenOnly option that can be passed to a morph call.
With Turbo Streams you can apply this option by adding the [children-only] attribute to your <turbo-stream> element.
<turbo-stream action="morph" targets="body" children-only>
...
</turbo-stream>
Usage with Rails
The turbo_power-rails gem ships a Rails helper for using turbo_stream.morph in your application. Check out the Getting Started section over there.
Acknowledgments
tubro-morph is MIT-licensed open-source software from Marco Roth.
Turbo is MIT-licensed open-source software from Basecamp.
morphdom is MIT-licensed open-source software from Patrick Steele-Idem
marcoroth