Replace global fetch patch with Turbo-specific behavior

package.json

@@ -32,6 +32,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "idiomorph": "https://github.com/basecamp/idiomorph#rollout-build"
+  },
   "devDependencies": {
     "@open-wc/testing": "^3.1.7",
     "@playwright/test": "^1.28.0",

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,90 @@
+import Idiomorph from "idiomorph"
+import { dispatch, nextAnimationFrame } from "../../util"
+import { Renderer } from "../renderer"
+
+export class MorphRenderer extends Renderer {
+  async render() {
+    if (this.willRender) await this.#morphBody()
+  }
+
+  get renderMethod() {
+    return "morph"
+  }
+
+  // Private
+
+  async #morphBody() {
+    this.#morphElements(this.currentElement, this.newElement)
+    this.#reloadRemoteFrames()
+
+    dispatch("turbo:morph", {
+      detail: {
+        currentElement: this.currentElement,
+        newElement: this.newElement
+      }
+    })
+  }
+
+  #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
+    Idiomorph.morph(currentElement, newElement, {
+      morphStyle: morphStyle,
+      callbacks: {
+        beforeNodeMorphed: this.#shouldMorphElement,
+        beforeNodeRemoved: this.#shouldRemoveElement,
+        afterNodeMorphed: this.#reloadStimulusControllers
+      }
+    })
+  }
+
+  #reloadRemoteFrames() {
+    this.#remoteFrames().forEach((frame) => {
+      if (this.#isFrameReloadedWithMorph(frame)) {
+        this.#renderFrameWithMorph(frame)
+      }
+      frame.reload()
+    })
+  }
+
+  #renderFrameWithMorph(frame) {
+    frame.addEventListener("turbo:before-frame-render", (event) => {
+      event.detail.render = this.#morphFrameUpdate
+    }, { once: true })
+  }
+
+  #morphFrameUpdate = (currentElement, newElement) => {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: { currentElement, newElement }
+    })
+    this.#morphElements(currentElement, newElement, "innerHTML")
+  }
+
+  #shouldRemoveElement = (node) => {
+    return this.#shouldMorphElement(node)
+  }
+
+  #shouldMorphElement = (node) => {
+    if (node instanceof HTMLElement) {
+      return !node.hasAttribute("data-turbo-permanent")
+    } else {
+      return true
+    }
+  }
+
+  #reloadStimulusControllers = async (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)
+    }
+  }
+
+  #isFrameReloadedWithMorph(element) {
+    return element.src && element.refresh === "morph"
+  }
+
+  #remoteFrames() {
+    return document.querySelectorAll("turbo-frame[src]")
+  }
+}

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, PageRenderer.renderElement, isPreview, willRender)
 
     if (!renderer.shouldRender) {
       this.forceReloaded = true
@@ -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)

src/core/index.js

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

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

@@ -79,4 +79,8 @@ export class Renderer {
   get permanentElementMap() {
     return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot)
   }
+
+  get renderMethod() {
+    return "replace"
+  }
 }

src/core/session.js

@@ -1,5 +1,6 @@
 import { BrowserAdapter } from "./native/browser_adapter"
 import { CacheObserver } from "../observers/cache_observer"
+import { FetchRequestObserver } from "../observers/fetch_request_observer"
 import { FormSubmitObserver } from "../observers/form_submit_observer"
 import { FrameRedirector } from "./frames/frame_redirector"
 import { History } from "./drive/history"
@@ -16,6 +17,8 @@ import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markA
 import { PageView } from "./drive/page_view"
 import { FrameElement } from "../elements/frame_element"
 import { Preloader } from "./drive/preloader"
+import { LimitedSet } from "./drive/limited_set"
+import { Cache } from "./cache"
 
 export class Session {
   navigator = new Navigator(this)
@@ -26,13 +29,16 @@ export class Session {
 
   pageObserver = new PageObserver(this)
   cacheObserver = new CacheObserver()
+  fetchRequestObserver = new FetchRequestObserver(this, document.documentElement)
   linkClickObserver = new LinkClickObserver(this, window)
   formSubmitObserver = new FormSubmitObserver(this, document)
   scrollObserver = new ScrollObserver(this)
   streamObserver = new StreamObserver(this)
   formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement)
   frameRedirector = new FrameRedirector(this, document.documentElement)
   streamMessageRenderer = new StreamMessageRenderer()
+  cache = new Cache(this)
+  recentRequests = new LimitedSet(20)
 
   drive = true
   enabled = true
@@ -44,6 +50,7 @@ export class Session {
     if (!this.started) {
       this.pageObserver.start()
       this.cacheObserver.start()
+      this.fetchRequestObserver.start()
       this.formLinkClickObserver.start()
       this.linkClickObserver.start()
       this.formSubmitObserver.start()
@@ -65,6 +72,7 @@ export class Session {
     if (this.started) {
       this.pageObserver.stop()
       this.cacheObserver.stop()
+      this.fetchRequestObserver.stop()
       this.formLinkClickObserver.stop()
       this.linkClickObserver.stop()
       this.formSubmitObserver.stop()
@@ -144,6 +152,16 @@ export class Session {
     this.history.updateRestorationData({ scrollPosition: position })
   }
 
+  // Fetch request observer delegate
+
+  willFetch(_url, fetchOptions) {
+    const requestId = fetchOptions.headers["X-Turbo-Request-Id"]
+
+    if (requestId) {
+      this.recentRequests.add(requestId)
+    }
+  }
+
   // Form click observer delegate
 
   willSubmitFormLinkToLocation(link, location) {
@@ -263,9 +281,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 +346,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.session.recentRequests.has(requestId)
+    if (!isRecentRequest) {
+      window.Turbo.cache.exemptPageFromPreview()
+      window.Turbo.visit(window.location.href, { action: "replace" })
+    }
   }
 }

src/core/view.js

@@ -69,7 +69,7 @@ export class View {
         if (!immediateRender) await renderInterception
 
         await this.renderSnapshot(renderer)
-        this.delegate.viewRenderedSnapshot(snapshot, isPreview)
+        this.delegate.viewRenderedSnapshot(snapshot, isPreview, this.renderer.renderMethod)
         this.delegate.preloadOnLoadLinksForView(this.element)
         this.finishRenderingSnapshot(renderer)
       } finally {