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

Morph Plugins #6

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Morph Plugins #6

wants to merge 7 commits into from

Conversation

marcoroth
Copy link
Owner

@marcoroth marcoroth commented Nov 11, 2022

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:

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

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

Successfully merging this pull request may close these issues.

1 participant