Morph Plugins

README.md

@@ -22,7 +22,20 @@
 
 ## Getting Started
 
-`turbo-morph` is a [morphdom](https://github.com/patrick-steele-idem/morphdom) integration for [Turbo Streams](https://turbo.hotwired.dev/reference/streams). It provides a new Turbo Stream `morph` action.
+`turbo-morph` is a Morph integration for [Turbo Streams](https://turbo.hotwired.dev/reference/streams). It provides a new Turbo Stream `morph` action which uses `morphdom` under the hood by default.
+
+
+Supported morph plugins:
+* [`morphdom`(default)](https://github.com/patrick-steele-idem/morphdom)
+* [`@alpinejs/morph`](http://alpinejs.dev/plugins/morph)
+* [`nanomorph`](https://github.com/choojs/nanomorph)
+* [`micromorph`](https://github.com/natemoo-re/micromorph)
+* [`idiomorph`](https://github.com/bigskysoftware/idiomorph)
+* [`diffhtml`](https://github.com/tbranyen/diffhtml)
+* [`diff-dom`](https://github.com/fiduswriter/diffDOM)
+
+
+## Installation
 
 **Note:** Requires Turbo **7.2+**
 
@@ -35,11 +48,43 @@ yarn add turbo-morph
 // application.js
 import * as Turbo from '@hotwired/turbo'
 
+// using morphdom as default
 +import TurboMorph from 'turbo-morph'
 +TurboMorph.initialize(Turbo.StreamActions)
 ```
 
-## Example
+Using a non-default morph plugin:
+
+```diff
+// application.js
+import * as Turbo from '@hotwired/turbo'
+
+// using nanomorph as default
++import TurboMorph from 'turbo-morph/nanomorph'
++TurboMorph.initialize(Turbo.StreamActions)
+```
+
+Using multiple morph plugins:
+
+```diff
+// application.js
+import * as Turbo from '@hotwired/turbo'
+
++import { morph as morphdom } from 'turbo-morph'
++import { morph as nanomorph } from 'turbo-morph/nanomorph'
++import { morph as micromorph } from 'turbo-morph/micromorph'
+
+ // Set the one you want as default
++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
+```
+
+
+## Example using the default
 
 ```html
 <turbo-stream action="morph" target="body">

package.json

@@ -2,14 +2,24 @@
   "name": "turbo-morph",
   "version": "0.1.0",
   "description": "Morphdom integration for Turbo Streams",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
   "unpkg": "dist/index.umd.js",
   "types": "dist/types/index.d.ts",
   "author": "Marco Roth",
   "license": "MIT",
   "repository": "https://github.com/marcoroth/turbo-morph",
   "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./morphdom": "./dist/plugins/morphdom.mjs",
+    "./alpine": "./dist/plugins/alpine.mjs",
+    "./diff-dom": "./dist/plugins/diff-dom.mjs",
+    "./diffhtml": "./dist/plugins/diffhtml.mjs",
+    "./idiomorph": "./dist/plugins/idiomorph.mjs",
+    "./micromorph": "./dist/plugins/micromorph.mjs",
+    "./nanomorph": "./dist/plugins/nanomorph.mjs"
+  },
   "scripts": {
     "start": "cd playground && yarn start",
     "prebuild": "yarn clean",
@@ -23,6 +33,7 @@
     "@hotwired/turbo": "^7.2.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-typescript": "^8.2.5",
+    "@types/alpinejs": "^3.7.1",
     "concurrently": "^7.3.0",
     "morphdom": "^2.6.1",
     "rimraf": "^3.0.2",
@@ -35,7 +46,15 @@
     "vitest": "^0.18.1"
   },
   "peerDependencies": {
+    "@alpinejs/morph": "^3.10.5",
     "@hotwired/turbo": ">= 7.2",
-    "morphdom": ">= 2.6"
+    "alpinejs": "^3.10.5",
+    "diff-dom": "^4.2.8",
+    "diffhtml": "^1.0.0-beta.29",
+    "idiomorph": "^0.0.7",
+    "micromorph": "^0.3.1",
+    "morphdom": ">= 2.6",
+    "nanohtml": "^1.10.0",
+    "nanomorph": "^5.4.3"
   }
 }

playground/index.js

@@ -1,4 +1,8 @@
 import * as Turbo from "@hotwired/turbo"
+// import * as TurboMorph from 'turbo-morph/morphdom'
+// TurboMorph.initialize(Turbo.StreamActions)
 
-import { registerMorph } from "turbo-morph"
-registerMorph()
+import "diffhtml"
+
+import * as TurboMorph from 'turbo-morph/diffhtml'
+TurboMorph.initialize(Turbo.StreamActions)

playground/package.json

@@ -6,7 +6,15 @@
   "license": "MIT",
   "repository": "https://github.com/marcoroth/turbo-morph",
   "dependencies": {
+    "@alpinejs/morph": "^3.10.5",
     "@hotwired/turbo": "^7.2.0",
+    "alpinejs": "^3.10.5",
+    "diff-dom": "^4.2.8",
+    "diffhtml": "^1.0.0-beta.29",
+    "idiomorph": "^0.0.7",
+    "micromorph": "^0.3.1",
+    "nanohtml": "^1.10.0",
+    "nanomorph": "^5.4.3",
     "turbo-morph": "link:../"
   },
   "scripts": {