Merge pull request #1240 from seanpdoyle/rename-morph-stream-action

Re-structure `turbo-stream[action=morph]` support

Author: jorgemanrubia

src/core/streams/stream_actions.js

@@ -25,25 +25,31 @@ export const StreamActions = {
   },
 
   replace() {
-    this.targetElements.forEach((e) => e.replaceWith(this.templateContent))
+    const method = this.getAttribute("method")
+
+    this.targetElements.forEach((targetElement) => {
+      if (method === "morph") {
+        morphElements(targetElement, this.templateContent)
+      } else {
+        targetElement.replaceWith(this.templateContent)
+      }
+    })
   },
 
   update() {
+    const method = this.getAttribute("method")
+
     this.targetElements.forEach((targetElement) => {
-      targetElement.innerHTML = ""
-      targetElement.append(this.templateContent)
+      if (method === "morph") {
+        morphChildren(targetElement, this.templateContent)
+      } else {
+        targetElement.innerHTML = ""
+        targetElement.append(this.templateContent)
+      }
     })
   },
 
   refresh() {
     session.refresh(this.baseURI, this.requestId)
-  },
-
-  morph() {
-    const morph = this.hasAttribute("children-only") ?
-      morphChildren :
-      morphElements
-
-    this.targetElements.forEach((targetElement) => morph(targetElement, this.templateContent))
   }
 }

src/tests/fixtures/morph_stream_action.html

@@ -39,5 +39,9 @@
     <div id="container">
       <input id="container-element">
     </div>
+
+    <div id="message_1">
+      <div>Morph me</div>
+    </div>
   </body>
 </html>

src/tests/fixtures/stream.html

@@ -1,9 +1,11 @@
-import { test } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 import { assert } from "chai"
 import {
   hasSelector,
   nextBeat,
   nextEventNamed,
+  nextEventOnTarget,
+  noNextEventOnTarget,
   readEventLogs,
   waitUntilNoSelector,
   waitUntilText
@@ -182,6 +184,48 @@ test("receiving a remove stream message preserves focus blurs the activeElement"
   assert.notOk(await hasSelector(page, ":focus"))
 })
 
+test("dispatches a turbo:before-morph-element & turbo:morph-element for each morph stream action", async ({ page }) => {
+  await page.evaluate(() => {
+    window.Turbo.renderStreamMessage(`
+      <turbo-stream action="replace" method="morph" target="message_1">
+        <template>
+          <div id="message_1">
+            <h1>Morphed</h1>
+          </div>
+        </template>
+      </turbo-stream>
+    `)
+  })
+
+  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.evaluate(() => {
+    addEventListener("turbo:before-morph-element", (event) => {
+      event.preventDefault()
+    })
+  })
+
+  await page.evaluate(() => {
+    window.Turbo.renderStreamMessage(`
+      <turbo-stream action="replace" method="morph" target="message_1">
+        <template>
+          <div id="message_1">
+            <h1>Morphed</h1>
+          </div>
+        </template>
+      </turbo-stream>
+    `)
+  })
+
+  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")
+})
+
 async function getReadyState(page, id) {
   return page.evaluate((id) => {
     const element = document.getElementById(id)

src/tests/functional/morph_stream_action_tests.js

@@ -5,11 +5,12 @@ import { assert } from "@open-wc/testing"
 import { sleep } from "../helpers/page"
 import * as Turbo from "../../index"
 
-function createStreamElement(action, target, templateElement) {
+function createStreamElement(action, target, templateElement, attributes = {}) {
   const element = new StreamElement()
   if (action) element.setAttribute("action", action)
   if (target) element.setAttribute("target", target)
   if (templateElement) element.appendChild(templateElement)
+  Object.entries(attributes).forEach((attribute) => element.setAttribute(...attribute))
   return element
 }
 
@@ -197,9 +198,9 @@ test("test action=refresh discarded when matching request id", async () => {
   assert.ok(document.body.hasAttribute("data-modified"))
 })
 
-test("action=morph", async () => {
+test("action=replace method=morph", async () => {
   const templateElement = createTemplateElement(`<h1 id="hello">Hello Turbo Morphed</h1>`)
-  const element = createStreamElement("morph", "hello", templateElement)
+  const element = createStreamElement("replace", "hello", templateElement, { method: "morph" })
 
   assert.equal(subject.find("div#hello")?.textContent, "Hello Turbo")
 
@@ -210,9 +211,9 @@ test("action=morph", async () => {
   assert.equal(subject.find("h1#hello")?.textContent, "Hello Turbo Morphed")
 })
 
-test("action=morph with text content change", async () => {
+test("action=replace method=morph with text content change", async () => {
   const templateElement = createTemplateElement(`<div id="hello">Hello Turbo Morphed</div>`)
-  const element = createStreamElement("morph", "hello", templateElement)
+  const element = createStreamElement("replace", "hello", templateElement, { method: "morph" })
 
   assert.equal(subject.find("div#hello")?.textContent, "Hello Turbo")
 
@@ -223,9 +224,9 @@ test("action=morph with text content change", async () => {
   assert.equal(subject.find("div#hello")?.textContent, "Hello Turbo Morphed")
 })
 
-test("action=morph children-only", async () => {
+test("action=update method=morph", async () => {
   const templateElement = createTemplateElement(`<h1 id="hello-child-element">Hello Turbo Morphed</h1>`)
-  const element = createStreamElement("morph", "hello", templateElement)
+  const element = createStreamElement("update", "hello", templateElement, { method: "morph" })
   const target = subject.find("div#hello")
   assert.equal(target?.textContent, "Hello Turbo")
   element.setAttribute("children-only", true)