diff --git a/src/core/streams/actions/morph.js b/src/core/streams/actions/morph.js
index ed92291e7..d177bfd01 100644
--- a/src/core/streams/actions/morph.js
+++ b/src/core/streams/actions/morph.js
@@ -4,21 +4,16 @@ 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)
- }
+ Idiomorph.morph(element, streamElement.templateContent, {
+ morphStyle: morphStyle,
+ callbacks: {
+ beforeNodeAdded,
+ beforeNodeMorphed,
+ beforeAttributeUpdated,
+ beforeNodeRemoved,
+ afterNodeMorphed
+ }
+ })
})
}
@@ -34,10 +29,10 @@ function beforeNodeMorphed(target, newElement) {
if (target instanceof HTMLElement && !target.hasAttribute("data-turbo-permanent")) {
const event = dispatch("turbo:before-morph-element", {
cancelable: true,
+ target,
detail: {
- target,
- newElement,
- },
+ newElement
+ }
})
return !event.defaultPrevented
}
@@ -50,8 +45,8 @@ function beforeAttributeUpdated(attributeName, target, mutationType) {
target,
detail: {
attributeName,
- mutationType,
- },
+ mutationType
+ }
})
return !event.defaultPrevented
}
@@ -61,8 +56,8 @@ function afterNodeMorphed(target, newElement) {
dispatch("turbo:morph-element", {
target,
detail: {
- newElement,
- },
+ newElement
+ }
})
}
}
diff --git a/src/core/streams/stream_actions.js b/src/core/streams/stream_actions.js
index e7fc68836..486dc8566 100644
--- a/src/core/streams/stream_actions.js
+++ b/src/core/streams/stream_actions.js
@@ -41,5 +41,5 @@ export const StreamActions = {
morph() {
morph(this)
- },
+ }
}
diff --git a/src/tests/fixtures/morph_stream_action.html b/src/tests/fixtures/morph_stream_action.html
new file mode 100644
index 000000000..df91274f5
--- /dev/null
+++ b/src/tests/fixtures/morph_stream_action.html
@@ -0,0 +1,16 @@
+
+
+
+
+ Morph Stream Action
+
+
+
+
+
+
+
+
+
diff --git a/src/tests/functional/morph_stream_action_tests.js b/src/tests/functional/morph_stream_action_tests.js
new file mode 100644
index 000000000..0da86bc29
--- /dev/null
+++ b/src/tests/functional/morph_stream_action_tests.js
@@ -0,0 +1,49 @@
+import { test, expect } from "@playwright/test"
+import { nextEventOnTarget, noNextEventOnTarget } from "../helpers/page"
+
+test("dispatches a turbo:before-morph-element & turbo:morph-element for each morph stream action", async ({ page }) => {
+ await page.goto("/src/tests/fixtures/morph_stream_action.html")
+
+ await page.evaluate(() => {
+ window.Turbo.renderStreamMessage(`
+
+
+
+
Morphed
+
+
+
+ `)
+ })
+
+ await nextEventOnTarget(page, "message_1", "turbo:before-morph-element")
+ await nextEventOnTarget(page, "message_1", "turbo:morph-element")
+ await expect(page.locator("#message_1")).toHaveText("Morphed")
+})
+
+test("preventing a turbo:before-morph-element prevents the morph", async ({ page }) => {
+ await page.goto("/src/tests/fixtures/morph_stream_action.html")
+
+
+ await page.evaluate(() => {
+ addEventListener("turbo:before-morph-element", (event) => {
+ event.preventDefault()
+ })
+ })
+
+ await page.evaluate(() => {
+ window.Turbo.renderStreamMessage(`
+
+
+
+
Morphed
+
+
+
+ `)
+ })
+
+ await nextEventOnTarget(page, "message_1", "turbo:before-morph-element")
+ await noNextEventOnTarget(page, "message_1", "turbo:morph-element")
+ await expect(page.locator("#message_1")).toHaveText("Morph me")
+})