Enable frame morphing for data-turbo-frame links and forms if the URL doesn't change

src/core/frames/frame_controller.js

@@ -14,7 +14,7 @@ import {
 } from "../../util"
 import { FormSubmission } from "../drive/form_submission"
 import { Snapshot } from "../snapshot"
-import { getAction, expandURL, urlsAreEqual, locationIsVisitable } from "../url"
+import { getAction, expandURL, urlsAreEqual, pathnamesAreEqual, locationIsVisitable } from "../url"
 import { FormSubmitObserver } from "../../observers/form_submit_observer"
 import { FrameView } from "./frame_view"
 import { LinkInterceptor } from "./link_interceptor"
@@ -91,10 +91,9 @@ export class FrameController {
   }
 
   sourceURLReloaded() {
-    const { refresh, src } = this.element
-
-    this.#shouldMorphFrame = src && refresh === "morph"
+    const { src } = this.element
 
+    this.#shouldMorphFrame = this.element.shouldReloadWithMorph
     this.element.removeAttribute("complete")
     this.element.src = null
     this.element.src = src
@@ -234,6 +233,7 @@ export class FrameController {
     const frame = this.#findFrameElement(formSubmission.formElement, formSubmission.submitter)
 
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(formSubmission.submitter, formSubmission.formElement, frame))
+    frame.delegate.decideOnMorphingTo(response.response.url)
     frame.delegate.loadResponse(response)
 
     if (!formSubmission.isSafe) {
@@ -343,10 +343,17 @@ export class FrameController {
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(submitter, element, frame))
 
     this.#withCurrentNavigationElement(element, () => {
+      frame.delegate.decideOnMorphingTo(url)
       frame.src = url
     })
   }
 
+  decideOnMorphingTo(url) {
+    if (this.element.src && pathnamesAreEqual(this.element.src, url) && this.element.shouldReloadWithMorph) {
+      this.#shouldMorphFrame = true
+    }
+  }
+
   proposeVisitIfNavigatedWithAction(frame, action = null) {
     this.action = action
 

src/core/url.js

@@ -46,6 +46,10 @@ export function urlsAreEqual(left, right) {
   return expandURL(left).href == expandURL(right).href
 }
 
+export function pathnamesAreEqual(left, right) {
+  return expandURL(left).pathname == expandURL(right).pathname
+}
+
 function getPathComponents(url) {
   return url.pathname.split("/").slice(1)
 }

src/tests/functional/frame_tests.js

@@ -267,7 +267,7 @@ test("following a link to a page with a matching frame does not dispatch a turbo
   )
 })
 
-test("following a link within a frame which has a target set navigates the target frame without morphing even when frame[refresh=morph]", async ({ page }) => {
+test("following a link within a frame which has a target set navigates the target frame without morphing even when frame[refresh=morph] if the url changes", async ({ page }) => {
   await page.click("#add-refresh-morph-to-frame")
   await page.click("#hello a")
   await nextBeat()
@@ -277,7 +277,7 @@ test("following a link within a frame which has a target set navigates the targe
   await expect(page.locator("#frame h2")).toHaveText("Frame: Loaded")
 })
 
-test("navigating from within replaces the contents even with turbo-frame[refresh=morph]", async ({ page }) => {
+test("navigating from within replaces the contents even with turbo-frame[refresh=morph] if the url changes", async ({ page }) => {
   await page.click("#add-refresh-morph-to-frame")
   await page.click("#link-frame")
   await nextBeat()
@@ -287,6 +287,38 @@ test("navigating from within replaces the contents even with turbo-frame[refresh
   await expect(page.locator("#frame h2")).toHaveText("Frame: Loaded")
 })
 
+test("following a link that targets a frame with refresh morph morphs the page if the url doesn't change", async ({ page }) => {
+  await page.click("#add-refresh-morph-to-frame")
+  await page.click("#outside-frame-form")
+  await nextBeat()
+
+  expect(await nextEventOnTarget(page, "frame", "turbo:before-frame-render")).toBeTruthy()
+  expect(await noNextEventOnTarget(page, "frame", "turbo:before-frame-morph")).toBeTruthy()
+
+  await page.click("#outside-frame-form")
+  await nextBeat()
+
+  expect(await nextEventOnTarget(page, "frame", "turbo:before-frame-morph")).toBeTruthy()
+  expect(await noNextEventOnTarget(page, "frame", "turbo:before-frame-render")).toBeTruthy()
+})
+
+test("submitting a form that targets a frame with refresh morph morphs the page if the url doesn't change", async ({ page }) => {
+  test.setTimeout(3000)
+  expect(await noNextEventOnTarget(page, "frame", "turbo:before-frame-render")).toBeTruthy()
+  await page.click("#add-refresh-morph-to-frame")
+  await page.click("#button-frame-action-advance")
+  await nextBeat()
+
+  expect(await nextEventOnTarget(page, "frame", "turbo:before-frame-render")).toBeTruthy()
+  expect(await noNextEventOnTarget(page, "frame", "turbo:before-frame-morph")).toBeTruthy()
+
+  await page.click("#button-frame-action-advance")
+  await nextBeat()
+
+  expect(await nextEventOnTarget(page, "frame", "turbo:before-frame-morph")).toBeTruthy()
+  expect(await noNextEventOnTarget(page, "frame", "turbo:before-frame-render")).toBeTruthy()
+})
+
 test("calling reload on a frame replaces the contents", async ({ page }) => {
   await page.click("#add-src-to-frame")