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

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

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/stream.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/functional/stream_tests.js

@@ -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/unit/stream_element_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)