WIP

src/core/drive/morph_renderer.js

@@ -1,93 +1,18 @@
-import Idiomorph from "idiomorph"
-import { dispatch, nextAnimationFrame } from "../../util"
 import { Renderer } from "../renderer"
+import { Morph } from "../morph"
 
 export class MorphRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
+    Morph.render(currentElement, newElement)
   }
 
   async render() {
-    if (this.willRender) await this.#morphBody()
+    if (this.willRender) {
+      this.renderElement(this.currentElement, this.newElement)
+    }
   }
 
   get renderMethod() {
     return "morph"
   }
-
-  // Private
-
-  async #morphBody() {
-    this.#morphElements(this.currentElement, this.newElement)
-    this.#reloadRemoteFrames()
-
-    dispatch("turbo:morph", {
-      detail: {
-        currentElement: this.currentElement,
-        newElement: this.newElement
-      }
-    })
-  }
-
-  #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
-    Idiomorph.morph(currentElement, newElement, {
-      morphStyle: morphStyle,
-      callbacks: {
-        beforeNodeMorphed: this.#shouldMorphElement,
-        beforeNodeRemoved: this.#shouldRemoveElement,
-        afterNodeMorphed: this.#reloadStimulusControllers
-      }
-    })
-  }
-
-  #reloadRemoteFrames() {
-    this.#remoteFrames().forEach((frame) => {
-      if (this.#isFrameReloadedWithMorph(frame)) {
-        this.#renderFrameWithMorph(frame)
-      }
-      frame.reload()
-    })
-  }
-
-  #renderFrameWithMorph(frame) {
-    frame.addEventListener("turbo:before-frame-render", (event) => {
-      event.detail.render = this.#morphFrameUpdate
-    }, { once: true })
-  }
-
-  #morphFrameUpdate = (currentElement, newElement) => {
-    dispatch("turbo:before-frame-morph", {
-      target: currentElement,
-      detail: { currentElement, newElement }
-    })
-    this.#morphElements(currentElement, newElement, "innerHTML")
-  }
-
-  #shouldRemoveElement = (node) => {
-    return this.#shouldMorphElement(node)
-  }
-
-  #shouldMorphElement = (node) => {
-    if (node instanceof HTMLElement) {
-      return !node.hasAttribute("data-turbo-permanent")
-    } else {
-      return true
-    }
-  }
-
-  #reloadStimulusControllers = async (node) => {
-    if (node instanceof HTMLElement && node.hasAttribute("data-controller")) {
-      const originalAttribute = node.getAttribute("data-controller")
-      node.removeAttribute("data-controller")
-      await nextAnimationFrame()
-      node.setAttribute("data-controller", originalAttribute)
-    }
-  }
-
-  #isFrameReloadedWithMorph(element) {
-    return element.src && element.refresh === "morph"
-  }
-
-  #remoteFrames() {
-    return document.querySelectorAll("turbo-frame[src]")
-  }
 }

src/core/frames/frame_renderer.js

@@ -1,17 +1,27 @@
-import { activateScriptElement, nextAnimationFrame } from "../../util"
+import { activateScriptElement, dispatch, nextAnimationFrame } from "../../util"
 import { Renderer } from "../renderer"
+import { Morph } from "../morph"
 
 export class FrameRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
-    const destinationRange = document.createRange()
-    destinationRange.selectNodeContents(currentElement)
-    destinationRange.deleteContents()
+    if (currentElement.src && currentElement.refresh === "morph") {
+      dispatch("turbo:before-frame-morph", {
+        target: currentElement,
+        detail: { currentElement, newElement }
+      })
 
-    const frameElement = newElement
-    const sourceRange = frameElement.ownerDocument?.createRange()
-    if (sourceRange) {
-      sourceRange.selectNodeContents(frameElement)
-      currentElement.appendChild(sourceRange.extractContents())
+      Morph.render(currentElement, newElement, "innerHTML")
+    } else {
+      const destinationRange = document.createRange()
+      destinationRange.selectNodeContents(currentElement)
+      destinationRange.deleteContents()
+
+      const frameElement = newElement
+      const sourceRange = frameElement.ownerDocument?.createRange()
+      if (sourceRange) {
+        sourceRange.selectNodeContents(frameElement)
+        currentElement.appendChild(sourceRange.extractContents())
+      }
     }
   }
 
@@ -24,6 +34,14 @@ export class FrameRenderer extends Renderer {
     return true
   }
 
+  get renderMethod() {
+    if (this.currentElement.refresh === "morph") {
+      return "morph"
+    } else {
+      return super.renderMethod
+    }
+  }
+
   async render() {
     await nextAnimationFrame()
     this.preservingPermanentElements(() => {

src/core/morph.js

@@ -0,0 +1,58 @@
+import Idiomorph from "idiomorph"
+import { nextAnimationFrame } from "../util"
+
+export class Morph {
+  static render(currentElement, newElement, morphStyle) {
+    const morph = new this(currentElement, newElement)
+
+    morph.render(morphStyle)
+  }
+
+  constructor(currentElement, newElement) {
+    this.currentElement = currentElement
+    this.newElement = newElement
+  }
+
+  render(morphStyle = "outerHTML") {
+    Idiomorph.morph(this.currentElement, this.newElement, {
+      morphStyle: morphStyle,
+      callbacks: {
+        beforeNodeMorphed: this.#shouldMorphElement,
+        beforeNodeRemoved: this.#shouldRemoveElement,
+        afterNodeMorphed: this.#reloadStimulusControllers
+      }
+    })
+    this.#reloadRemoteFrames()
+  }
+
+  #shouldRemoveElement = (node) => {
+    return this.#shouldMorphElement(node)
+  }
+
+  #shouldMorphElement = (node) => {
+    if (node instanceof HTMLElement) {
+      return !node.hasAttribute("data-turbo-permanent")
+    } else {
+      return true
+    }
+  }
+
+  #reloadStimulusControllers = async (node) => {
+    if (node instanceof HTMLElement && node.hasAttribute("data-controller")) {
+      const originalAttribute = node.getAttribute("data-controller")
+      node.removeAttribute("data-controller")
+      await nextAnimationFrame()
+      node.setAttribute("data-controller", originalAttribute)
+    }
+  }
+
+  #reloadRemoteFrames() {
+    this.#remoteFrames().forEach((frame) => {
+      frame.reload()
+    })
+  }
+
+  #remoteFrames() {
+    return this.currentElement.querySelectorAll("turbo-frame[src]")
+  }
+}

src/core/view.js

@@ -64,7 +64,11 @@ export class View {
         await this.prepareToRenderSnapshot(renderer)
 
         const renderInterception = new Promise((resolve) => (this.#resolveInterceptionPromise = resolve))
-        const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement }
+        const options = {
+          resume: this.#resolveInterceptionPromise,
+          render: this.renderer.renderElement,
+          renderMethod: this.renderer.renderMethod
+        }
         const immediateRender = this.delegate.allowsImmediateRender(snapshot, isPreview, options)
         if (!immediateRender) await renderInterception
 

src/tests/fixtures/test.js

@@ -83,7 +83,6 @@
   "turbo:frame-load",
   "turbo:frame-render",
   "turbo:frame-missing",
-  "turbo:before-frame-morph",
   "turbo:reload"
 ])
 

src/tests/functional/page_refresh_tests.js

@@ -4,8 +4,7 @@ import {
   nextBeat,
   nextEventNamed,
   nextEventOnTarget,
-  noNextEventNamed,
-  noNextEventOnTarget
+  noNextEventNamed
 } from "../helpers/page"
 
 test("renders a page refresh with morphing", async ({ page }) => {
@@ -38,9 +37,11 @@ test("uses morphing to update remote frames marked with refresh='morph'", async
   await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
   await nextBeat()
 
-  // Only the frame marked with refresh="morph" uses morphing
-  expect(await nextEventOnTarget(page, "refresh-morph", "turbo:before-frame-morph")).toBeTruthy()
-  expect(await noNextEventOnTarget(page, "refresh-reload", "turbo:before-frame-morph")).toBeTruthy()
+  const beforeRenderMorph = await nextEventOnTarget(page, "refresh-morph", "turbo:before-frame-render")
+  const beforeRenderReplace = await nextEventOnTarget(page, "refresh-reload", "turbo:before-frame-render")
+
+  expect(beforeRenderMorph.renderMethod).toEqual("morph", "Only the frame marked with refresh='morph' uses morphing")
+  expect(beforeRenderReplace.renderMethod).toEqual("replace", "Only the frame marked with refresh='morph' uses morphing")
 })
 
 test("it preserves the scroll position when the turbo-refresh-scroll meta tag is 'preserve'", async ({ page }) => {