Morph Plugins

[marcoroth]

A bunch of morphdom alternatives emerged over the past few months. Some of them are very similar to morphdom but each of them has their own nuance.

For now morphdom will stay the default, but there should be an option to replace morphdom with another library fairly easily, so you can chose the best suiting morphing library for your project.

In order to be fully compatible with all approaches turbo-morph is going to support the following morphing libraries:

• morphdom (default)
• @alpinejs/morph
• nanomorph
• micromorph
• idiomorph
• diffhtml
• diff-dom

Current import/initialize

Currently the import and initialize of the library looks like:

import * as Turbo from '@hotwired/turbo'

import TurboMorph from 'turbo-morph'
TurboMorph.initialize(Turbo.StreamActions)

With this Pull Request

If you want to be explicit about what you use (if for some reason turbo-morph is going to change the default in the future) you can rewrite the import-statement like so and everything will continue to work as it did before:

import * as Turbo from '@hotwired/turbo'

import * as TurboMorph from 'turbo-morph/morphdom'
TurboMorph.initialize(Turbo.StreamActions)

But with that you can also easily swap out morphdom with the Alpine plugin if you like:

import * as Turbo from '@hotwired/turbo'

import * as TurboMorph from 'turbo-morph/alpine'
TurboMorph.initialize(Turbo.StreamActions)

Using multiple plugins at the same time:

There might be reasons why you would want to use multiple plugins at the same time. For example if one library is better suited in one place whereas another library is better suited in another place in your application.

import * as Turbo from '@hotwired/turbo'

import { morph as morphdom } from 'turbo-morph/morphdom'
import { morph as nanomorph } from 'turbo-morph/nanomorph'
import { morph as micromorph } from 'turbo-morph/micromorph'

 // Set the one you want to use for `morph` if you still have `morph` Stream Action calls in your application 
Turbo.StreamActions.morph = morphdom

// And register the other ones as their own action
Turbo.StreamActions.morphdom = morphdom
Turbo.StreamActions.nanomorph = nanomorph
Turbo.StreamActions.micromorph = micromorph