extract morph action and add children-only option to stream-element

hotwired · Mar 11, 2024 · 276ee38 · 276ee38
1 parent 268dfbc
commit 276ee38
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 74 deletions.
diff --git a/src/core/streams/actions/morph.js b/src/core/streams/actions/morph.js
@@ -0,0 +1,68 @@
+import { Idiomorph } from "idiomorph/dist/idiomorph.esm"
+import { dispatch } from "../../../util"
+
+export default function morph(streamElement) {
+  const morphStyle = streamElement.hasAttribute("children-only") ? "innerHTML" : "outerHTML"
+  streamElement.targetElements.forEach((element) => {
+    try {
+      Idiomorph.morph(element, streamElement.templateContent, {
+        morphStyle: morphStyle,
+        ignoreActiveValue: true,
+        callbacks: {
+          beforeNodeAdded,
+          beforeNodeMorphed,
+          beforeAttributeUpdated,
+          beforeNodeRemoved,
+          afterNodeMorphed,
+        },
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  })
+}
+
+function beforeNodeAdded(node) {
+  return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
+}
+
+function beforeNodeRemoved(node) {
+  return beforeNodeAdded(node)
+}
+
+function beforeNodeMorphed(target, newElement) {
+  if (target instanceof HTMLElement && !target.hasAttribute("data-turbo-permanent")) {
+    const event = dispatch("turbo:before-morph-element", {
+      cancelable: true,
+      detail: {
+        target,
+        newElement,
+      },
+    })
+    return !event.defaultPrevented
+  }
+  return false
+}
+
+function beforeAttributeUpdated(attributeName, target, mutationType) {
+  const event = dispatch("turbo:before-morph-attribute", {
+    cancelable: true,
+    target,
+    detail: {
+      attributeName,
+      mutationType,
+    },
+  })
+  return !event.defaultPrevented
+}
+
+function afterNodeMorphed(target, newElement) {
+  if (newElement instanceof HTMLElement) {
+    dispatch("turbo:morph-element", {
+      target,
+      detail: {
+        newElement,
+      },
+    })
+  }
+}
diff --git a/src/core/streams/stream_actions.js b/src/core/streams/stream_actions.js
@@ -1,6 +1,5 @@
 import { session } from "../"
-import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"
-import { dispatch } from "../../util"
+import morph from "./actions/morph"
 
 export const StreamActions = {
   after() {
@@ -41,73 +40,6 @@ export const StreamActions = {
   },
 
   morph() {
-    this.targetElements.forEach((targetElement) => {
-      try {
-        const morphStyle = targetElement.getAttribute("data-turbo-morph-style") || "outerHTML"
-        Idiomorph.morph(targetElement, this.templateContent, {
-          morphStyle: morphStyle,
-          ignoreActiveValue: true,
-          callbacks: {
-            beforeNodeAdded,
-            beforeNodeMorphed,
-            beforeAttributeUpdated,
-            beforeNodeRemoved,
-            afterNodeMorphed
-          }
-        })
-
-        dispatch("turbo:morph", {
-          detail: {
-            currentElement: targetElement,
-            newElement: this.templateContent
-          }
-        })
-      } catch (error) {
-        console.error(error)
-      }
-    })
-  }
-}
-
-const beforeNodeAdded = (node) => {
-  return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
-}
-
-const beforeNodeMorphed = (target, newElement) => {
-  if (target instanceof HTMLElement && !target.hasAttribute("data-turbo-permanent")) {
-    const event = dispatch("turbo:before-morph-element", {
-      cancelable: true,
-      detail: {
-        target,
-        newElement
-      }
-    })
-    return !event.defaultPrevented
-  }
-  return false
-}
-
-const beforeAttributeUpdated = (attributeName, target, mutationType) => {
-  const event = dispatch("turbo:before-morph-attribute", {
-    cancelable: true,
-    target,
-    detail: {
-      attributeName,
-      mutationType
-    }
-  })
-  return !event.defaultPrevented
-}
-
-const beforeNodeRemoved = beforeNodeMorphed
-
-const afterNodeMorphed = (target, newElement) => {
-  if (newElement instanceof HTMLElement) {
-    dispatch("turbo:morph-element", {
-      target,
-      detail: {
-        newElement
-      }
-    })
-  }
+    morph(this)
+  },
 }
diff --git a/src/tests/unit/stream_element_tests.js b/src/tests/unit/stream_element_tests.js
@@ -210,12 +210,12 @@ test("action=morph", async () => {
   assert.equal(subject.find("h1#hello")?.textContent, "Hello Turbo Morphed")
 })
 
-test("action=morph with data-turbo-morph-style='innerHTML'", async () => {
+test("action=morph children-only", async () => {
   const templateElement = createTemplateElement(`<h1 id="hello-child-element">Hello Turbo Morphed</h1>`)
   const element = createStreamElement("morph", "hello", templateElement)
   const target = subject.find("div#hello")
   assert.equal(target?.textContent, "Hello Turbo")
-  target.setAttribute("data-turbo-morph-style", "innerHTML")
+  element.setAttribute("children-only", true)
 
   subject.append(element)
 
@@ -225,4 +225,3 @@ test("action=morph with data-turbo-morph-style='innerHTML'", async () => {
   assert.ok(subject.find("div#hello > h1#hello-child-element"))
   assert.equal(subject.find("div#hello > h1#hello-child-element").textContent, "Hello Turbo Morphed")
 })
-