Extract Morph class, then use it in FrameRenderer

package.json

@@ -32,6 +32,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "idiomorph": "^0.0.9"
+  },
   "devDependencies": {
     "@open-wc/testing": "^3.1.7",
     "@playwright/test": "^1.28.0",

src/core/drive/error_renderer.js

@@ -3,6 +3,10 @@ import { Renderer } from "../renderer"
 
 export class ErrorRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
+    ErrorRenderer.replace(currentElement, newElement)
+  }
+
+  static replace(currentElement, newElement) {
     const { documentElement, body } = document
 
     documentElement.replaceChild(newElement, body)

src/core/drive/limited_set.js

@@ -0,0 +1,15 @@
+export class LimitedSet extends Set {
+  constructor(maxSize) {
+    super()
+    this.maxSize = maxSize
+  }
+
+  add(value) {
+    if (this.size >= this.maxSize) {
+      const iterator = this.values()
+      const oldestValue = iterator.next().value
+      this.delete(oldestValue)
+    }
+    super.add(value)
+  }
+}

src/core/drive/morph_renderer.js

@@ -0,0 +1,20 @@
+import { Renderer } from "../renderer"
+import { Morph } from "../morph"
+
+export class MorphRenderer extends Renderer {
+  static renderElement(currentElement, newElement) {
+    MorphRenderer.morph(currentElement, newElement)
+  }
+
+  static morph(currentElement, newElement) {
+    Morph.render(currentElement, newElement)
+  }
+
+  async render() {
+    if (this.willRender) this.renderElement(this.currentElement, this.newElement)
+  }
+
+  get renderMethod() {
+    return "morph"
+  }
+}

src/core/drive/page_renderer.js

@@ -3,6 +3,10 @@ import { activateScriptElement, waitForLoad } from "../../util"
 
 export class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
+    PageRenderer.replace(currentElement, newElement)
+  }
+
+  static replace(currentElement, newElement) {
     if (document.body && newElement instanceof HTMLBodyElement) {
       document.body.replaceWith(newElement)
     } else {

src/core/drive/page_snapshot.js

@@ -73,6 +73,14 @@ export class PageSnapshot extends Snapshot {
     return this.headSnapshot.getMetaValue("view-transition") === "same-origin"
   }
 
+  get shouldMorphPage() {
+    return this.getSetting("refresh-method") === "morph"
+  }
+
+  get shouldPreserveScrollPosition() {
+    return this.getSetting("refresh-scroll") === "preserve"
+  }
+
   // Private
 
   getSetting(name) {

src/core/drive/page_view.js

@@ -1,6 +1,7 @@
 import { nextEventLoopTick } from "../../util"
 import { View } from "../view"
 import { ErrorRenderer } from "./error_renderer"
+import { MorphRenderer } from "./morph_renderer"
 import { PageRenderer } from "./page_renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { SnapshotCache } from "./snapshot_cache"
@@ -15,7 +16,10 @@ export class PageView extends View {
   }
 
   renderPage(snapshot, isPreview = false, willRender = true, visit) {
-    const renderer = new PageRenderer(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender)
+    const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage
+    const rendererClass = shouldMorphPage ? MorphRenderer : PageRenderer
+
+    const renderer = new rendererClass(this.snapshot, snapshot, isPreview, willRender)
 
     if (!renderer.shouldRender) {
       this.forceReloaded = true
@@ -28,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)
   }
 
@@ -55,6 +59,10 @@ export class PageView extends View {
     return this.snapshotCache.get(location)
   }
 
+  isPageRefresh(visit) {
+    return visit && this.lastRenderedLocation.href === visit.location.href
+  }
+
   get snapshot() {
     return PageSnapshot.fromElement(this.element)
   }

src/core/drive/visit.js

@@ -154,10 +154,10 @@ export class Visit {
     }
   }
 
-  issueRequest() {
+  async issueRequest() {
     if (this.hasPreloadedResponse()) {
       this.simulateRequest()
-    } else if (this.shouldIssueRequest() && !this.request) {
+    } else if (!this.request && await this.shouldIssueRequest()) {
       this.request = new FetchRequest(this, FetchMethod.get, this.location)
       this.request.perform()
     }
@@ -231,14 +231,14 @@ export class Visit {
     }
   }
 
-  hasCachedSnapshot() {
-    return this.getCachedSnapshot() != null
+  async hasCachedSnapshot() {
+    return (await this.getCachedSnapshot()) != null
   }
 
   async loadCachedSnapshot() {
     const snapshot = await this.getCachedSnapshot()
     if (snapshot) {
-      const isPreview = this.shouldIssueRequest()
+      const isPreview = await this.shouldIssueRequest()
       this.render(async () => {
         this.cacheSnapshot()
         if (this.isSamePage) {
@@ -335,7 +335,7 @@ export class Visit {
   // Scrolling
 
   performScroll() {
-    if (!this.scrolled && !this.view.forceReloaded) {
+    if (!this.scrolled && !this.view.forceReloaded && !this.view.snapshot.shouldPreserveScrollPosition) {
       if (this.action == "restore") {
         this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop()
       } else {
@@ -391,11 +391,11 @@ export class Visit {
     return typeof this.response == "object"
   }
 
-  shouldIssueRequest() {
+  async shouldIssueRequest() {
     if (this.isSamePage) {
       return false
-    } else if (this.action == "restore") {
-      return !this.hasCachedSnapshot()
+    } else if (this.action === "restore") {
+      return !(await this.hasCachedSnapshot())
     } else {
       return this.willRender
     }

src/core/frames/frame_controller.js

@@ -276,7 +276,7 @@ export class FrameController {
     return !defaultPrevented
   }
 
-  viewRenderedSnapshot(_snapshot, _isPreview) {}
+  viewRenderedSnapshot(_snapshot, _isPreview, _renderMethod) {}
 
   preloadOnLoadLinksForView(element) {
     session.preloadOnLoadLinksForView(element)
@@ -307,7 +307,7 @@ export class FrameController {
 
     if (newFrameElement) {
       const snapshot = new Snapshot(newFrameElement)
-      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false)
+      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, false, false)
       if (this.view.renderPromise) await this.view.renderPromise
       this.changeHistory()
 

src/core/frames/frame_renderer.js

@@ -1,8 +1,17 @@
-import { activateScriptElement, nextAnimationFrame } from "../../util"
+import { activateScriptElement, nextAnimationFrame, dispatch } from "../../util"
 import { Renderer } from "../renderer"
+import { Morph } from "../morph"
 
 export class FrameRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
+    if (currentElement.src && currentElement.refresh === "morph") {
+      FrameRenderer.morph(currentElement, newElement)
+    } else {
+      FrameRenderer.replace(currentElement, newElement)
+    }
+  }
+
+  static replace(currentElement, newElement) {
     const destinationRange = document.createRange()
     destinationRange.selectNodeContents(currentElement)
     destinationRange.deleteContents()
@@ -15,6 +24,15 @@ export class FrameRenderer extends Renderer {
     }
   }
 
+  static morph(currentElement, newElement) {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: { currentElement, newElement }
+    })
+
+    Morph.render(currentElement, newElement.children, "innerHTML")
+  }
+
   constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
     super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender)
     this.delegate = delegate
@@ -24,6 +42,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/index.js

@@ -4,11 +4,13 @@ import { PageRenderer } from "./drive/page_renderer"
 import { PageSnapshot } from "./drive/page_snapshot"
 import { FrameRenderer } from "./frames/frame_renderer"
 import { FormSubmission } from "./drive/form_submission"
+import { LimitedSet } from "./drive/limited_set"
 
 const session = new Session()
 const cache = new Cache(session)
+const recentRequests = new LimitedSet(20)
 const { navigator } = session
-export { navigator, session, cache, PageRenderer, PageSnapshot, FrameRenderer }
+export { navigator, session, cache, recentRequests, PageRenderer, PageSnapshot, FrameRenderer }
 
 export { StreamActions } from "./streams/stream_actions"
 

src/core/morph.js

@@ -0,0 +1,54 @@
+import "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") {
+    window.Idiomorph.morph(this.currentElement, this.newElement, {
+      ignoreActiveValue: true,
+      morphStyle: morphStyle,
+      callbacks: {
+        beforeNodeMorphed: shouldMorphElement,
+        beforeNodeRemoved: shouldRemoveElement,
+        afterNodeMorphed: reloadStimulusControllers
+      }
+    })
+
+    this.#remoteFrames.forEach((frame) => frame.reload())
+  }
+
+  get #remoteFrames() {
+    return this.currentElement.querySelectorAll("turbo-frame[src]")
+  }
+}
+
+function shouldRemoveElement(node) {
+  return shouldMorphElement(node)
+}
+
+function shouldMorphElement(node) {
+  if (node instanceof HTMLElement) {
+    return !node.hasAttribute("data-turbo-permanent")
+  } else {
+    return true
+  }
+}
+
+async function reloadStimulusControllers(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)
+  }
+}

src/core/native/browser_adapter.js

@@ -22,11 +22,7 @@ export class BrowserAdapter {
 
   visitRequestStarted(visit) {
     this.progressBar.setValue(0)
-    if (visit.hasCachedSnapshot() || visit.action != "restore") {
-      this.showVisitProgressBarAfterDelay()
-    } else {
-      this.showProgressBar()
-    }
+    this.showVisitProgressBarAfterDelay()
   }
 
   visitRequestCompleted(visit) {

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 }))
   }
 
@@ -79,4 +83,8 @@ export class Renderer {
   get permanentElementMap() {
     return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot)
   }
+
+  get renderMethod() {
+    return "replace"
+  }
 }

src/core/session.js

@@ -263,9 +263,9 @@ export class Session {
     return !defaultPrevented
   }
 
-  viewRenderedSnapshot(_snapshot, isPreview) {
+  viewRenderedSnapshot(_snapshot, isPreview, renderMethod) {
     this.view.lastRenderedLocation = this.history.location
-    this.notifyApplicationAfterRender(isPreview)
+    this.notifyApplicationAfterRender(isPreview, renderMethod)
   }
 
   preloadOnLoadLinksForView(element) {
@@ -328,8 +328,8 @@ export class Session {
     })
   }
 
-  notifyApplicationAfterRender(isPreview) {
-    return dispatch("turbo:render", { detail: { isPreview } })
+  notifyApplicationAfterRender(isPreview, renderMethod) {
+    return dispatch("turbo:render", { detail: { isPreview, renderMethod } })
   }
 
   notifyApplicationAfterPageLoad(timing = {}) {

src/core/streams/stream_actions.js

@@ -30,5 +30,14 @@ export const StreamActions = {
       targetElement.innerHTML = ""
       targetElement.append(this.templateContent)
     })
+  },
+
+  refresh() {
+    const requestId = this.getAttribute("request-id")
+    const isRecentRequest = requestId && window.Turbo.recentRequests.has(requestId)
+    if (!isRecentRequest) {
+      window.Turbo.cache.exemptPageFromPreview()
+      window.Turbo.visit(window.location.href, { action: "replace" })
+    }
   }
 }