Infer renderElement during Renderer construction

Follow-up to [#1192][]
Closes [#1303][]

Remove the argument from all `Renderer` subclass constructor call sites.
In its place, define the default value for the `Renderer.renderElement`
property based on the `static renderElement(currentElement, newElement)`
defined by the inheriting class.

By automatically determining which `renderElement` implementation based
on class, this commit enables a simpler Frame morphing strategy. Instead
of attaching one-time event listeners, this commit maintains a private
`#shouldMorphFrame` property that is set, then un-set during the
rendering lifecycle of a frame.

Similarly, this commit implements the
`MorphingFrameRenderer.preservingPermanentElements` method in the same
style as the `MorphingPageRenderer.preservingPermanentElements`. Since
_instances_ of `MorphingFrameRenderer` are now being used instead of the
static `MorphingFrameRenderer.renderElement`, we're able to utilize an
instance method instead of passing around an additional anonymous
function (which is the implementation that [#1303][] proposed).

[#1192]: #1192
[#1303]: #1303

Co-authored-by: Micah Geisel <[email protected]>

src/core/drive/page_view.js

@@ -19,7 +19,7 @@ export class PageView extends View {
     const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage
     const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer
 
-    const renderer = new rendererClass(this.snapshot, snapshot, rendererClass.renderElement, isPreview, willRender)
+    const renderer = new rendererClass(this.snapshot, snapshot, isPreview, willRender)
 
     if (!renderer.shouldRender) {
       this.forceReloaded = true
@@ -32,7 +32,7 @@ export class PageView extends View {
 
   renderError(snapshot, visit) {
     visit?.changeHistory()
-    const renderer = new ErrorRenderer(this.snapshot, snapshot, ErrorRenderer.renderElement, false)
+    const renderer = new ErrorRenderer(this.snapshot, snapshot, false)
     return this.render(renderer)
   }
 

src/core/frames/frame_controller.js

@@ -33,6 +33,7 @@ export class FrameController {
   #connected = false
   #hasBeenLoaded = false
   #ignoredAttributes = new Set()
+  #shouldMorphFrame = false
   action = null
 
   constructor(element) {
@@ -90,13 +91,10 @@ export class FrameController {
   }
 
   sourceURLReloaded() {
-    if (this.element.shouldReloadWithMorph) {
-      this.element.addEventListener("turbo:before-frame-render", ({ detail }) => {
-        detail.render = MorphingFrameRenderer.renderElement
-      }, { once: true })
-    }
+    const { refresh, src } = this.element
+
+    this.#shouldMorphFrame = src && refresh === "morph"
 
-    const { src } = this.element
     this.element.removeAttribute("complete")
     this.element.src = null
     this.element.src = src
@@ -139,6 +137,7 @@ export class FrameController {
         }
       }
     } finally {
+      this.#shouldMorphFrame = false
       this.fetchResponseLoaded = () => Promise.resolve()
     }
   }
@@ -304,11 +303,11 @@ export class FrameController {
 
   async #loadFrameResponse(fetchResponse, document) {
     const newFrameElement = await this.extractForeignFrameElement(document.body)
+    const rendererClass = this.#shouldMorphFrame ? MorphingFrameRenderer : FrameRenderer
 
     if (newFrameElement) {
       const snapshot = new Snapshot(newFrameElement)
-      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false)
-
+      const renderer = new rendererClass(this, this.view.snapshot, snapshot, false, false)
       if (this.view.renderPromise) await this.view.renderPromise
       this.changeHistory()
 

src/core/frames/morphing_frame_renderer.js

@@ -11,4 +11,8 @@ export class MorphingFrameRenderer extends FrameRenderer {
 
     morphChildren(currentElement, newElement)
   }
+
+  async preservingPermanentElements(callback) {
+    return await callback()
+  }
 }

src/core/renderer.js

@@ -3,12 +3,16 @@ import { Bardo } from "./bardo"
 export class Renderer {
   #activeElement = null
 
-  constructor(currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+  static renderElement(currentElement, newElement) {
+    // Abstract method
+  }
+
+  constructor(currentSnapshot, newSnapshot, isPreview, willRender = true) {
     this.currentSnapshot = currentSnapshot
     this.newSnapshot = newSnapshot
     this.isPreview = isPreview
     this.willRender = willRender
-    this.renderElement = renderElement
+    this.renderElement = this.constructor.renderElement
     this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }))
   }
 

src/tests/fixtures/frames.html

@@ -41,6 +41,7 @@ <h2>Frames: #frame</h2>
       <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>
       <a id="link-top" href="/src/tests/fixtures/one.html" data-turbo-frame="_top">Visit one.html</a>
+      <input id="permanent-input" data-turbo-permanent>
       <form action="/src/tests/fixtures/one.html" data-turbo-frame="_top">
         <button id="form-submit-top">Visit one.html</button>
       </form>

src/tests/functional/frame_tests.js

@@ -306,6 +306,18 @@ test("calling reload on a frame[refresh=morph] morphs the contents", async ({ pa
   expect(await nextEventOnTarget(page, "frame", "turbo:before-frame-morph")).toBeTruthy()
 })
 
+test("calling reload on a frame[refresh=morph] preserves [data-turbo-permanent] elements", async ({ page }) => {
+  await page.click("#add-src-to-frame")
+  await page.click("#add-refresh-morph-to-frame")
+  const input = await page.locator("#permanent-input")
+
+  await input.fill("Preserve me")
+  await page.evaluate(() => document.getElementById("frame").reload())
+
+  await expect(input).toBeFocused()
+  await expect(input).toHaveValue("Preserve me")
+})
+
 test("following a link in rapid succession cancels the previous request", async ({ page }) => {
   await page.click("#outside-frame-form")
   await page.click("#outer-frame-link")