From ddeaf3e4a89bd008fc8eab2148f3a4273aa55560 Mon Sep 17 00:00:00 2001
From: Piotr Chmolowski <piotr@chmolowski.pl>
Date: Thu, 8 Feb 2024 20:38:48 +0100
Subject: [PATCH] Allow morphing between different URLs

Allows morphing between similar types of pages that have different URLs.

A proof of concept fix for the problem descrubed here: #1177

For example, if you set this meta tag:

<meta name="turbo-morph-url-prefix" content="/images/">

Then morphing will be triggered for:

- `/images/1`
- `/images/12`
- `/images/123`

This solution has some downsides (e.g, won't work with nested
resources). A regex-based alternative could address that.

Please let me know if you'd be willing to consider this change and I'll
go ahead and add tests.
---
 src/core/drive/page_snapshot.js |  4 ++++
 src/core/drive/page_view.js     | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/core/drive/page_snapshot.js b/src/core/drive/page_snapshot.js
index 58a5a75a9..620aacf86 100644
--- a/src/core/drive/page_snapshot.js
+++ b/src/core/drive/page_snapshot.js
@@ -82,6 +82,10 @@ export class PageSnapshot extends Snapshot {
     return this.getSetting("refresh-scroll") === "preserve"
   }
 
+  get morphURLPrefix() {
+    return this.getSetting("morph-url-prefix") ?? ""
+  }
+
   // Private
 
   getSetting(name) {
diff --git a/src/core/drive/page_view.js b/src/core/drive/page_view.js
index 1583f25a0..5d80cce0f 100644
--- a/src/core/drive/page_view.js
+++ b/src/core/drive/page_view.js
@@ -16,8 +16,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 = this.shouldMorphPage(visit) ? MorphRenderer : PageRenderer
 
     const renderer = new rendererClass(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender)
 
@@ -63,6 +62,18 @@ export class PageView extends View {
     return this.isPageRefresh(visit) && this.snapshot.shouldPreserveScrollPosition
   }
 
+  shouldMorphPage(visit) {
+    return (this.isPageRefresh(visit) || this.isMorphableURL(visit)) && this.snapshot.shouldMorphPage
+  }
+
+  isMorphableURL(visit) {
+    return (
+      this.snapshot.morphURLPrefix != "" &&
+      this.lastRenderedLocation.pathname.startsWith(this.snapshot.morphURLPrefix) &&
+      visit.action === "advance"
+    )
+  }
+
   get snapshot() {
     return PageSnapshot.fromElement(this.element)
   }