Lift the frame morphing logic up to FrameController.reload

src/core/drive/morph_page_renderer.js

@@ -0,0 +1,45 @@
+import { dispatch } from "../../util"
+import { PageRenderer } from "./page_renderer"
+import { MorphElements } from "../morph_elements"
+
+export class MorphPageRenderer extends PageRenderer {
+  async render() {
+    if (this.willRender) await this.#morphBody()
+  }
+
+  get renderMethod() {
+    return "morph"
+  }
+
+  // Private
+
+  async #morphBody() {
+    MorphElements.morph(this.currentElement, this.newElement)
+    this.#reloadRemoteFrames()
+
+    dispatch("turbo:morph", {
+      detail: {
+        currentElement: this.currentElement,
+        newElement: this.newElement
+      }
+    })
+  }
+
+  #reloadRemoteFrames() {
+    this.#remoteFrames().forEach((frame) => {
+      if (this.#isFrameReloadedWithMorph(frame)) {
+        frame.reload()
+      }
+    })
+  }
+
+  #remoteFrames() {
+    return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
+      return !frame.closest('[data-turbo-permanent]')
+    })
+  }
+
+  #isFrameReloadedWithMorph(element) {
+    return element.src && element.refresh === "morph"
+  }
+}

src/core/drive/page_view.js

@@ -1,7 +1,7 @@
 import { nextEventLoopTick } from "../../util"
 import { View } from "../view"
 import { ErrorRenderer } from "./error_renderer"
-import { MorphRenderer } from "./morph_renderer"
+import { MorphPageRenderer } from "./morph_page_renderer"
 import { PageRenderer } from "./page_renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { SnapshotCache } from "./snapshot_cache"
@@ -17,7 +17,7 @@ export class PageView extends View {
 
   renderPage(snapshot, isPreview = false, willRender = true, visit) {
     const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage
-    const rendererClass = shouldMorphPage ? MorphRenderer : PageRenderer
+    const rendererClass = shouldMorphPage ? MorphPageRenderer : PageRenderer
 
     const renderer = new rendererClass(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender)
 

src/core/frames/frame_controller.js

@@ -20,6 +20,7 @@ import { FrameView } from "./frame_view"
 import { LinkInterceptor } from "./link_interceptor"
 import { FormLinkClickObserver } from "../../observers/form_link_click_observer"
 import { FrameRenderer } from "./frame_renderer"
+import { MorphFrameRenderer } from "./morph_frame_renderer"
 import { session } from "../index"
 import { StreamMessage } from "../streams/stream_message"
 import { PageSnapshot } from "../drive/page_snapshot"
@@ -264,6 +265,7 @@ export class FrameController {
       detail: { newFrame, ...options },
       cancelable: true
     })
+
     const {
       defaultPrevented,
       detail: { render }
@@ -307,7 +309,14 @@ export class FrameController {
 
     if (newFrameElement) {
       const snapshot = new Snapshot(newFrameElement)
-      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false)
+      let renderer
+
+      if (this.element.src && this.element.refresh === "morph") {
+        renderer = new MorphFrameRenderer(this, this.view.snapshot, snapshot, MorphFrameRenderer.renderElement, false, false)
+      } else {
+        renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false)
+      }
+
       if (this.view.renderPromise) await this.view.renderPromise
       this.changeHistory()
 

src/core/frames/morph_frame_renderer.js

@@ -0,0 +1,16 @@
+import { FrameRenderer } from "./frame_renderer"
+import { MorphElements } from "../morph_elements"
+import { dispatch } from "../../util"
+
+export class MorphFrameRenderer extends FrameRenderer {
+  static renderElement(currentElement, newParentElement) {
+    const newElement = newParentElement.children
+
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: { currentElement, newElement }
+    })
+
+    MorphElements.morph(currentElement, newElement, 'innerHTML')
+  }
+}

src/core/morph_elements.js

@@ -0,0 +1,66 @@
+import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"
+import { dispatch } from "../util"
+
+export class MorphElements {
+  static morph(currentElement, newElement, morphStyle = "outerHTML") {
+    this.isMorphingTurboFrame = this.isFrameReloadedWithMorph(currentElement)
+
+    Idiomorph.morph(currentElement, newElement, {
+      morphStyle: morphStyle,
+      callbacks: {
+        beforeNodeAdded: this.shouldAddElement,
+        beforeNodeMorphed: this.shouldMorphElement,
+        beforeAttributeUpdated: this.shouldUpdateAttribute,
+        beforeNodeRemoved: this.shouldRemoveElement,
+        afterNodeMorphed: this.didMorphElement
+      }
+    })
+  }
+
+  static isFrameReloadedWithMorph(element) {
+    return element.src && element.refresh === "morph"
+  }
+
+  static shouldAddElement = (node) => {
+    return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
+  }
+
+  static shouldMorphElement = (oldNode, newNode) => {
+    if (!(oldNode instanceof HTMLElement)) return
+
+    if (oldNode.hasAttribute("data-turbo-permanent")) return false
+
+    if (!this.isMorphingTurboFrame && this.isFrameReloadedWithMorph(oldNode)) return false
+
+    const event = dispatch("turbo:before-morph-element", {
+      cancelable: true,
+      target: oldNode,
+      detail: {
+        newElement: newNode
+      }
+    })
+
+    return !event.defaultPrevented
+  }
+
+  static shouldUpdateAttribute = (attributeName, target, mutationType) => {
+    const event = dispatch("turbo:before-morph-attribute", { cancelable: true, target, detail: { attributeName, mutationType } })
+
+    return !event.defaultPrevented
+  }
+
+  static shouldRemoveElement = (node) => {
+    return this.shouldMorphElement(node)
+  }
+
+  static didMorphElement = (oldNode, newNode) => {
+    if (newNode instanceof HTMLElement) {
+      dispatch("turbo:morph-element", {
+        target: oldNode,
+        detail: {
+          newElement: newNode
+        }
+      })
+    }
+  }
+}

src/tests/fixtures/frames.html

@@ -11,6 +11,12 @@
           target.closest("turbo-frame")?.setAttribute("data-turbo-action", "advance")
         } else if (target.id == "remove-target-from-hello") {
           document.getElementById("hello").removeAttribute("target")
+        } else if (target.id == "add-refresh-reload-to-frame") {
+          target.closest("turbo-frame")?.setAttribute("refresh", "reload")
+        } else if (target.id == "add-refresh-morph-to-frame") {
+          target.closest("turbo-frame")?.setAttribute("refresh", "morph")
+        } else if (target.id == "add-src-to-frame") {
+          target.closest("turbo-frame")?.setAttribute("src", "/__turbo/frames")
         }
       })
     </script>
@@ -23,11 +29,15 @@ <h1>Frames</h1>
 
     <turbo-frame id="frame" data-loaded-from="/src/tests/fixtures/frames.html">
       <h2>Frames: #frame</h2>
+      <h3>This text always changes ##randNum##</h3>
 
       <form action="/src/tests/fixtures/frames/frame.html">
         <button id="frame-form-get-no-redirect">Navigate #frame without a redirect</button>
       </form>
       <button id="add-turbo-action-to-frame" type="button">Add [data-turbo-action="advance"] to #frame</button>
+      <button id="add-refresh-reload-to-frame" type="button">Add [refresh="reload"] to #frame</button>
+      <button id="add-refresh-morph-to-frame" type="button">Add [refresh="morph"] to #frame</button>
+      <button id="add-src-to-frame" type="button">Add [src="/src/tests/fixtures/frames.html"] to #frame so it can be reloaded</button>
       <a id="link-frame" href="/src/tests/fixtures/frames/frame.html">Navigate #frame from within</a>
       <a id="link-frame-with-search-params" href="/src/tests/fixtures/frames/frame.html?key=value">Navigate #frame with ?key=value</a>
       <a id="link-nested-frame-action-advance" href="/src/tests/fixtures/frames/frame.html" data-turbo-action="advance">Navigate #frame from within with a[data-turbo-action="advance"]</a>
@@ -57,7 +67,7 @@ <h2>Frames: #frame</h2>
     <turbo-frame id="hello" target="frame">
       <h2>Frames: #hello</h2>
 
-      <a id="hello-link-frame" href="/src/tests/fixtures/frames/frame.html">Load #frame</a>
+      <a href="/src/tests/fixtures/frames/frame.html">Load #frame</a>
       <button type="button" id="remove-target-from-hello">Remove #hello[target]</button>
 
     </turbo-frame>