@hotwired/turbo-rails 8.0.19 → 8.0.21

package/app/assets/javascripts/turbo.js

@@ -1,68 +1,7 @@
 /*!
-Turbo 8.0.18
-Copyright © 2025 37signals LLC
+Turbo 8.0.21
+Copyright © 2026 37signals LLC
  */
-(function(prototype) {
-  if (typeof prototype.requestSubmit == "function") return;
-  prototype.requestSubmit = function(submitter) {
-    if (submitter) {
-      validateSubmitter(submitter, this);
-      submitter.click();
-    } else {
-      submitter = document.createElement("input");
-      submitter.type = "submit";
-      submitter.hidden = true;
-      this.appendChild(submitter);
-      submitter.click();
-      this.removeChild(submitter);
-    }
-  };
-  function validateSubmitter(submitter, form) {
-    submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
-    submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button");
-    submitter.form == form || raise(DOMException, "The specified element is not owned by this form element", "NotFoundError");
-  }
-  function raise(errorConstructor, message, name) {
-    throw new errorConstructor("Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".", name);
-  }
-})(HTMLFormElement.prototype);
-
-const submittersByForm = new WeakMap;
-
-function findSubmitterFromClickTarget(target) {
-  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
-  const candidate = element ? element.closest("input, button") : null;
-  return candidate?.type == "submit" ? candidate : null;
-}
-
-function clickCaptured(event) {
-  const submitter = findSubmitterFromClickTarget(event.target);
-  if (submitter && submitter.form) {
-    submittersByForm.set(submitter.form, submitter);
-  }
-}
-
-(function() {
-  if ("submitter" in Event.prototype) return;
-  let prototype = window.Event.prototype;
-  if ("SubmitEvent" in window) {
-    const prototypeOfSubmitEvent = window.SubmitEvent.prototype;
-    if (/Apple Computer/.test(navigator.vendor) && !("submitter" in prototypeOfSubmitEvent)) {
-      prototype = prototypeOfSubmitEvent;
-    } else {
-      return;
-    }
-  }
-  addEventListener("click", clickCaptured, true);
-  Object.defineProperty(prototype, "submitter", {
-    get() {
-      if (this.type == "submit" && this.target instanceof HTMLFormElement) {
-        return submittersByForm.get(this.target);
-      }
-    }
-  });
-})();
-
 const FrameLoadingStyle = {
   eager: "eager",
   lazy: "lazy"
@@ -240,10 +179,6 @@ function nextEventLoopTick() {
   return new Promise((resolve => setTimeout((() => resolve()), 0)));
 }
 
-function nextMicrotask() {
-  return Promise.resolve();
-}
-
 function parseHTMLDocument(html = "") {
   return (new DOMParser).parseFromString(html, "text/html");
 }
@@ -273,7 +208,7 @@ function uuid() {
     } else if (i == 19) {
       return (Math.floor(Math.random() * 4) + 8).toString(16);
     } else {
-      return Math.floor(Math.random() * 15).toString(16);
+      return Math.floor(Math.random() * 16).toString(16);
     }
   })).join("");
 }
@@ -411,15 +346,13 @@ function doesNotTargetIFrame(name) {
 function findLinkFromClickTarget(target) {
   const link = findClosestRecursively(target, "a[href], a[xlink\\:href]");
   if (!link) return null;
+  if (link.href.startsWith("#")) return null;
   if (link.hasAttribute("download")) return null;
-  if (link.hasAttribute("target") && link.target !== "_self") return null;
+  const linkTarget = link.getAttribute("target");
+  if (linkTarget && linkTarget !== "_self") return null;
   return link;
 }
 
-function getLocationForLink(link) {
-  return expandURL(link.getAttribute("href") || "");
-}
-
 function debounce(fn, delay) {
   let timeoutId = null;
   return (...args) => {
@@ -500,6 +433,10 @@ function locationIsVisitable(location, rootLocation) {
   return isPrefixedBy(location, rootLocation) && !config.drive.unvisitableExtensions.has(getExtension(location));
 }
 
+function getLocationForLink(link) {
+  return expandURL(link.getAttribute("href") || "");
+}
+
 function getRequestURL(url) {
   const anchor = getAnchor(url);
   return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
@@ -871,34 +808,94 @@ function importStreamElements(fragment) {
   return fragment;
 }
 
+const identity = key => key;
+
+class LRUCache {
+  keys=[];
+  entries={};
+  #toCacheKey;
+  constructor(size, toCacheKey = identity) {
+    this.size = size;
+    this.#toCacheKey = toCacheKey;
+  }
+  has(key) {
+    return this.#toCacheKey(key) in this.entries;
+  }
+  get(key) {
+    if (this.has(key)) {
+      const entry = this.read(key);
+      this.touch(key);
+      return entry;
+    }
+  }
+  put(key, entry) {
+    this.write(key, entry);
+    this.touch(key);
+    return entry;
+  }
+  clear() {
+    for (const key of Object.keys(this.entries)) {
+      this.evict(key);
+    }
+  }
+  read(key) {
+    return this.entries[this.#toCacheKey(key)];
+  }
+  write(key, entry) {
+    this.entries[this.#toCacheKey(key)] = entry;
+  }
+  touch(key) {
+    key = this.#toCacheKey(key);
+    const index = this.keys.indexOf(key);
+    if (index > -1) this.keys.splice(index, 1);
+    this.keys.unshift(key);
+    this.trim();
+  }
+  trim() {
+    for (const key of this.keys.splice(this.size)) {
+      this.evict(key);
+    }
+  }
+  evict(key) {
+    delete this.entries[key];
+  }
+}
+
 const PREFETCH_DELAY = 100;
 
-class PrefetchCache {
+class PrefetchCache extends LRUCache {
   #prefetchTimeout=null;
-  #prefetched=null;
-  get(url) {
-    if (this.#prefetched && this.#prefetched.url === url && this.#prefetched.expire > Date.now()) {
-      return this.#prefetched.request;
-    }
+  #maxAges={};
+  constructor(size = 1, prefetchDelay = PREFETCH_DELAY) {
+    super(size, toCacheKey);
+    this.prefetchDelay = prefetchDelay;
   }
-  setLater(url, request, ttl) {
-    this.clear();
+  putLater(url, request, ttl) {
     this.#prefetchTimeout = setTimeout((() => {
       request.perform();
-      this.set(url, request, ttl);
+      this.put(url, request, ttl);
       this.#prefetchTimeout = null;
-    }), PREFETCH_DELAY);
+    }), this.prefetchDelay);
   }
-  set(url, request, ttl) {
-    this.#prefetched = {
-      url: url,
-      request: request,
-      expire: new Date((new Date).getTime() + ttl)
-    };
+  put(url, request, ttl = cacheTtl) {
+    super.put(url, request);
+    this.#maxAges[toCacheKey(url)] = new Date((new Date).getTime() + ttl);
   }
   clear() {
+    super.clear();
     if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout);
-    this.#prefetched = null;
+  }
+  evict(key) {
+    super.evict(key);
+    delete this.#maxAges[key];
+  }
+  has(key) {
+    if (super.has(key)) {
+      const maxAge = this.#maxAges[toCacheKey(key)];
+      return maxAge && maxAge > Date.now();
+    } else {
+      return false;
+    }
   }
 }
 
@@ -1723,12 +1720,8 @@ var Idiomorph = function() {
   }
   function morphOuterHTML(ctx, oldNode, newNode) {
     const oldParent = normalizeParent(oldNode);
-    let childNodes = Array.from(oldParent.childNodes);
-    const index = childNodes.indexOf(oldNode);
-    const rightMargin = childNodes.length - (index + 1);
     morphChildren(ctx, oldParent, newNode, oldNode, oldNode.nextSibling);
-    childNodes = Array.from(oldParent.childNodes);
-    return childNodes.slice(index, childNodes.length - rightMargin);
+    return Array.from(oldParent.childNodes);
   }
   function saveAndRestoreFocus(ctx, fn) {
     if (!ctx.config.restoreFocus) return fn();
@@ -1738,8 +1731,8 @@ var Idiomorph = function() {
     }
     const {id: activeElementId, selectionStart: selectionStart, selectionEnd: selectionEnd} = activeElement;
     const results = fn();
-    if (activeElementId && activeElementId !== document.activeElement?.id) {
-      activeElement = ctx.target.querySelector(`#${activeElementId}`);
+    if (activeElementId && activeElementId !== document.activeElement?.getAttribute("id")) {
+      activeElement = ctx.target.querySelector(`[id="${activeElementId}"]`);
       activeElement?.focus();
     }
     if (activeElement && !activeElement.selectionEnd && selectionEnd) {
@@ -1766,11 +1759,14 @@ var Idiomorph = function() {
             continue;
           }
         }
-        if (newChild instanceof Element && ctx.persistentIds.has(newChild.id)) {
-          const movedChild = moveBeforeById(oldParent, newChild.id, insertionPoint, ctx);
-          morphNode(movedChild, newChild, ctx);
-          insertionPoint = movedChild.nextSibling;
-          continue;
+        if (newChild instanceof Element) {
+          const newChildId = newChild.getAttribute("id");
+          if (ctx.persistentIds.has(newChildId)) {
+            const movedChild = moveBeforeById(oldParent, newChildId, insertionPoint, ctx);
+            morphNode(movedChild, newChild, ctx);
+            insertionPoint = movedChild.nextSibling;
+            continue;
+          }
         }
         const insertedNode = createNode(oldParent, newChild, insertionPoint, ctx);
         if (insertedNode) {
@@ -1822,7 +1818,7 @@ var Idiomorph = function() {
               softMatch = undefined;
             }
           }
-          if (cursor.contains(document.activeElement)) break;
+          if (ctx.activeElementAndParents.includes(cursor)) break;
           cursor = cursor.nextSibling;
         }
         return softMatch || null;
@@ -1841,7 +1837,7 @@ var Idiomorph = function() {
       function isSoftMatch(oldNode, newNode) {
         const oldElt = oldNode;
         const newElt = newNode;
-        return oldElt.nodeType === newElt.nodeType && oldElt.tagName === newElt.tagName && (!oldElt.id || oldElt.id === newElt.id);
+        return oldElt.nodeType === newElt.nodeType && oldElt.tagName === newElt.tagName && (!oldElt.getAttribute?.("id") || oldElt.getAttribute?.("id") === newElt.getAttribute?.("id"));
       }
       return findBestMatch;
     }();
@@ -1864,13 +1860,13 @@ var Idiomorph = function() {
       return cursor;
     }
     function moveBeforeById(parentNode, id, after, ctx) {
-      const target = ctx.target.querySelector(`#${id}`) || ctx.pantry.querySelector(`#${id}`);
+      const target = ctx.target.getAttribute?.("id") === id && ctx.target || ctx.target.querySelector(`[id="${id}"]`) || ctx.pantry.querySelector(`[id="${id}"]`);
       removeElementFromAncestorsIdMaps(target, ctx);
       moveBefore(parentNode, target, after);
       return target;
     }
     function removeElementFromAncestorsIdMaps(element, ctx) {
-      const id = element.id;
+      const id = element.getAttribute("id");
       while (element = element.parentNode) {
         let idSet = ctx.idMap.get(element);
         if (idSet) {
@@ -2114,6 +2110,7 @@ var Idiomorph = function() {
         idMap: idMap,
         persistentIds: persistentIds,
         pantry: createPantry(),
+        activeElementAndParents: createActiveElementAndParents(oldNode),
         callbacks: mergedConfig.callbacks,
         head: mergedConfig.head
       };
@@ -2131,16 +2128,29 @@ var Idiomorph = function() {
       document.body.insertAdjacentElement("afterend", pantry);
       return pantry;
     }
+    function createActiveElementAndParents(oldNode) {
+      let activeElementAndParents = [];
+      let elt = document.activeElement;
+      if (elt?.tagName !== "BODY" && oldNode.contains(elt)) {
+        while (elt) {
+          activeElementAndParents.push(elt);
+          if (elt === oldNode) break;
+          elt = elt.parentElement;
+        }
+      }
+      return activeElementAndParents;
+    }
     function findIdElements(root) {
       let elements = Array.from(root.querySelectorAll("[id]"));
-      if (root.id) {
+      if (root.getAttribute?.("id")) {
         elements.push(root);
       }
       return elements;
     }
     function populateIdMapWithTree(idMap, persistentIds, root, elements) {
       for (const elt of elements) {
-        if (persistentIds.has(elt.id)) {
+        const id = elt.getAttribute("id");
+        if (persistentIds.has(id)) {
           let current = elt;
           while (current) {
             let idSet = idMap.get(current);
@@ -2148,7 +2158,7 @@ var Idiomorph = function() {
               idSet = new Set;
               idMap.set(current, idSet);
             }
-            idSet.add(elt.id);
+            idSet.add(id);
             if (current === root) break;
             current = current.parentElement;
           }
@@ -2211,7 +2221,7 @@ var Idiomorph = function() {
         return newContent;
       } else if (newContent instanceof Node) {
         if (newContent.parentNode) {
-          return createDuckTypedParent(newContent);
+          return new SlicedParentNode(newContent);
         } else {
           const dummyParent = document.createElement("div");
           dummyParent.append(newContent);
@@ -2225,19 +2235,43 @@ var Idiomorph = function() {
         return dummyParent;
       }
     }
-    function createDuckTypedParent(newContent) {
-      return {
-        childNodes: [ newContent ],
-        querySelectorAll: s => {
-          const elements = newContent.querySelectorAll(s);
-          return newContent.matches(s) ? [ newContent, ...elements ] : elements;
-        },
-        insertBefore: (n, r) => newContent.parentNode.insertBefore(n, r),
-        moveBefore: (n, r) => newContent.parentNode.moveBefore(n, r),
-        get __idiomorphRoot() {
-          return newContent;
+    class SlicedParentNode {
+      constructor(node) {
+        this.originalNode = node;
+        this.realParentNode = node.parentNode;
+        this.previousSibling = node.previousSibling;
+        this.nextSibling = node.nextSibling;
+      }
+      get childNodes() {
+        const nodes = [];
+        let cursor = this.previousSibling ? this.previousSibling.nextSibling : this.realParentNode.firstChild;
+        while (cursor && cursor != this.nextSibling) {
+          nodes.push(cursor);
+          cursor = cursor.nextSibling;
         }
-      };
+        return nodes;
+      }
+      querySelectorAll(selector) {
+        return this.childNodes.reduce(((results, node) => {
+          if (node instanceof Element) {
+            if (node.matches(selector)) results.push(node);
+            const nodeList = node.querySelectorAll(selector);
+            for (let i = 0; i < nodeList.length; i++) {
+              results.push(nodeList[i]);
+            }
+          }
+          return results;
+        }), []);
+      }
+      insertBefore(node, referenceNode) {
+        return this.realParentNode.insertBefore(node, referenceNode);
+      }
+      moveBefore(node, referenceNode) {
+        return this.realParentNode.moveBefore(node, referenceNode);
+      }
+      get __idiomorphRoot() {
+        return this.originalNode;
+      }
     }
     function parseContent(newContent) {
       let parser = new DOMParser;
@@ -2287,7 +2321,11 @@ function morphChildren(currentElement, newElement, options = {}) {
 }
 
 function shouldRefreshFrameWithMorphing(currentFrame, newFrame) {
-  return currentFrame instanceof FrameElement && newFrame instanceof Element && newFrame.nodeName === "TURBO-FRAME" && currentFrame.shouldReloadWithMorph && currentFrame.id === newFrame.id && (!newFrame.getAttribute("src") || urlsAreEqual(currentFrame.src, newFrame.getAttribute("src"))) && !currentFrame.closest("[data-turbo-permanent]");
+  return currentFrame instanceof FrameElement && currentFrame.shouldReloadWithMorph && (!newFrame || areFramesCompatibleForRefreshing(currentFrame, newFrame)) && !currentFrame.closest("[data-turbo-permanent]");
+}
+
+function areFramesCompatibleForRefreshing(currentFrame, newFrame) {
+  return newFrame instanceof Element && newFrame.nodeName === "TURBO-FRAME" && currentFrame.id === newFrame.id && (!newFrame.getAttribute("src") || urlsAreEqual(currentFrame.src, newFrame.getAttribute("src")));
 }
 
 function closestFrameReloadableWithMorphing(node) {
@@ -2588,11 +2626,17 @@ class PageSnapshot extends Snapshot {
     for (const clonedPasswordInput of clonedElement.querySelectorAll('input[type="password"]')) {
       clonedPasswordInput.value = "";
     }
+    for (const clonedNoscriptElement of clonedElement.querySelectorAll("noscript")) {
+      clonedNoscriptElement.remove();
+    }
     return new PageSnapshot(this.documentElement, clonedElement, this.headSnapshot);
   }
   get lang() {
     return this.documentElement.getAttribute("lang");
   }
+  get dir() {
+    return this.documentElement.getAttribute("dir");
+  }
   get headElement() {
     return this.headSnapshot.element;
   }
@@ -2616,11 +2660,11 @@ class PageSnapshot extends Snapshot {
     const viewTransitionEnabled = this.getSetting("view-transition") === "true" || this.headSnapshot.getMetaValue("view-transition") === "same-origin";
     return viewTransitionEnabled && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   }
-  get shouldMorphPage() {
-    return this.getSetting("refresh-method") === "morph";
+  get refreshMethod() {
+    return this.getSetting("refresh-method");
   }
-  get shouldPreserveScrollPosition() {
-    return this.getSetting("refresh-scroll") === "preserve";
+  get refreshScroll() {
+    return this.getSetting("refresh-scroll");
   }
   getSetting(name) {
     return this.headSnapshot.getMetaValue(`turbo-${name}`);
@@ -2653,7 +2697,8 @@ const defaultOptions = {
   willRender: true,
   updateHistory: true,
   shouldCacheSnapshot: true,
-  acceptsStreamResponse: false
+  acceptsStreamResponse: false,
+  refresh: {}
 };
 
 const TimingMetric = {
@@ -2698,7 +2743,7 @@ class Visit {
     this.delegate = delegate;
     this.location = location;
     this.restorationIdentifier = restorationIdentifier || uuid();
-    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse, direction: direction} = {
+    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse, direction: direction, refresh: refresh} = {
       ...defaultOptions,
       ...options
     };
@@ -2708,7 +2753,6 @@ class Visit {
     this.snapshot = snapshot;
     this.snapshotHTML = snapshotHTML;
     this.response = response;
-    this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
     this.isPageRefresh = this.view.isPageRefresh(this);
     this.visitCachedSnapshot = visitCachedSnapshot;
     this.willRender = willRender;
@@ -2717,6 +2761,7 @@ class Visit {
     this.shouldCacheSnapshot = shouldCacheSnapshot;
     this.acceptsStreamResponse = acceptsStreamResponse;
     this.direction = direction || Direction[action];
+    this.refresh = refresh;
   }
   get adapter() {
     return this.delegate.adapter;
@@ -2730,9 +2775,6 @@ class Visit {
   get restorationData() {
     return this.history.getRestorationDataForIdentifier(this.restorationIdentifier);
   }
-  get silent() {
-    return this.isSamePage;
-  }
   start() {
     if (this.state == VisitState.initialized) {
       this.recordTimingMetric(TimingMetric.visitStart);
@@ -2851,7 +2893,7 @@ class Visit {
       const isPreview = this.shouldIssueRequest();
       this.render((async () => {
         this.cacheSnapshot();
-        if (this.isSamePage || this.isPageRefresh) {
+        if (this.isPageRefresh) {
           this.adapter.visitRendered(this);
         } else {
           if (this.view.renderPromise) await this.view.renderPromise;
@@ -2875,16 +2917,6 @@ class Visit {
       this.followedRedirect = true;
     }
   }
-  goToSamePageAnchor() {
-    if (this.isSamePage) {
-      this.render((async () => {
-        this.cacheSnapshot();
-        this.performScroll();
-        this.changeHistory();
-        this.adapter.visitRendered(this);
-      }));
-    }
-  }
   prepareRequest(request) {
     if (this.acceptsStreamResponse) {
       request.acceptResponseType(StreamMessage.contentType);
@@ -2943,9 +2975,6 @@ class Visit {
       } else {
         this.scrollToAnchor() || this.view.scrollToTop();
       }
-      if (this.isSamePage) {
-        this.delegate.visitScrolledToSamePageLocation(this.view.lastRenderedLocation, this.location);
-      }
       this.scrolled = true;
     }
   }
@@ -2975,9 +3004,7 @@ class Visit {
     return typeof this.response == "object";
   }
   shouldIssueRequest() {
-    if (this.isSamePage) {
-      return false;
-    } else if (this.action == "restore") {
+    if (this.action == "restore") {
       return !this.hasCachedSnapshot();
     } else {
       return this.willRender;
@@ -3032,7 +3059,6 @@ class BrowserAdapter {
     this.redirectedToLocation = null;
     visit.loadCachedSnapshot();
     visit.issueRequest();
-    visit.goToSamePageAnchor();
   }
   visitRequestStarted(visit) {
     this.progressBar.setValue(0);
@@ -3126,7 +3152,6 @@ class BrowserAdapter {
 
 class CacheObserver {
   selector="[data-turbo-temporary]";
-  deprecatedSelector="[data-turbo-cache=false]";
   started=false;
   start() {
     if (!this.started) {
@@ -3146,14 +3171,7 @@ class CacheObserver {
     }
   };
   get temporaryElements() {
-    return [ ...document.querySelectorAll(this.selector), ...this.temporaryElementsWithDeprecation ];
-  }
-  get temporaryElementsWithDeprecation() {
-    const elements = document.querySelectorAll(this.deprecatedSelector);
-    if (elements.length) {
-      console.warn(`The ${this.deprecatedSelector} selector is deprecated and will be removed in a future version. Use ${this.selector} instead.`);
-    }
-    return [ ...elements ];
+    return [ ...document.querySelectorAll(this.selector) ];
   }
 }
 
@@ -3221,7 +3239,6 @@ class History {
   restorationIdentifier=uuid();
   restorationData={};
   started=false;
-  pageLoaded=false;
   currentIndex=0;
   constructor(delegate) {
     this.delegate = delegate;
@@ -3229,7 +3246,6 @@ class History {
   start() {
     if (!this.started) {
       addEventListener("popstate", this.onPopState, false);
-      addEventListener("load", this.onPageLoad, false);
       this.currentIndex = history.state?.turbo?.restorationIndex || 0;
       this.started = true;
       this.replace(new URL(window.location.href));
@@ -3238,7 +3254,6 @@ class History {
   stop() {
     if (this.started) {
       removeEventListener("popstate", this.onPopState, false);
-      removeEventListener("load", this.onPageLoad, false);
       this.started = false;
     }
   }
@@ -3284,28 +3299,19 @@ class History {
     }
   }
   onPopState=event => {
-    if (this.shouldHandlePopState()) {
-      const {turbo: turbo} = event.state || {};
-      if (turbo) {
-        this.location = new URL(window.location.href);
-        const {restorationIdentifier: restorationIdentifier, restorationIndex: restorationIndex} = turbo;
-        this.restorationIdentifier = restorationIdentifier;
-        const direction = restorationIndex > this.currentIndex ? "forward" : "back";
-        this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(this.location, restorationIdentifier, direction);
-        this.currentIndex = restorationIndex;
-      }
+    const {turbo: turbo} = event.state || {};
+    this.location = new URL(window.location.href);
+    if (turbo) {
+      const {restorationIdentifier: restorationIdentifier, restorationIndex: restorationIndex} = turbo;
+      this.restorationIdentifier = restorationIdentifier;
+      const direction = restorationIndex > this.currentIndex ? "forward" : "back";
+      this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(this.location, restorationIdentifier, direction);
+      this.currentIndex = restorationIndex;
+    } else {
+      this.currentIndex++;
+      this.delegate.historyPoppedWithEmptyState(this.location);
     }
   };
-  onPageLoad=async _event => {
-    await nextMicrotask();
-    this.pageLoaded = true;
-  };
-  shouldHandlePopState() {
-    return this.pageIsLoaded();
-  }
-  pageIsLoaded() {
-    return this.pageLoaded || document.readyState == "complete";
-  }
 }
 
 class LinkPrefetchObserver {
@@ -3361,7 +3367,7 @@ class LinkPrefetchObserver {
         this.#prefetchedLink = link;
         const fetchRequest = new FetchRequest(this, FetchMethod.get, location, new URLSearchParams, target);
         fetchRequest.fetchOptions.priority = "low";
-        prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl);
+        prefetchCache.putLater(location, fetchRequest, this.#cacheTtl);
       }
     }
   };
@@ -3374,7 +3380,7 @@ class LinkPrefetchObserver {
   };
   #tryToUsePrefetchedRequest=event => {
     if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
-      const cached = prefetchCache.get(event.detail.url.toString());
+      const cached = prefetchCache.get(event.detail.url);
       if (cached) {
         event.detail.fetchRequest = cached;
       }
@@ -3523,7 +3529,7 @@ class Navigator {
       } else {
         await this.view.renderPage(snapshot, false, true, this.currentVisit);
       }
-      if (!snapshot.shouldPreserveScrollPosition) {
+      if (snapshot.refreshScroll !== "preserve") {
         this.view.scrollToTop();
       }
       this.view.clearSnapshotCache();
@@ -3551,13 +3557,7 @@ class Navigator {
     delete this.currentVisit;
   }
   locationWithActionIsSamePage(location, action) {
-    const anchor = getAnchor(location);
-    const currentAnchor = getAnchor(this.view.lastRenderedLocation);
-    const isRestorationToTop = action === "restore" && typeof anchor === "undefined";
-    return action !== "replace" && getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) && (isRestorationToTop || anchor != null && anchor !== currentAnchor);
-  }
-  visitScrolledToSamePageLocation(oldURL, newURL) {
-    this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
+    return false;
   }
   get location() {
     return this.history.location;
@@ -3888,12 +3888,17 @@ class PageRenderer extends Renderer {
   }
   #setLanguage() {
     const {documentElement: documentElement} = this.currentSnapshot;
-    const {lang: lang} = this.newSnapshot;
+    const {dir: dir, lang: lang} = this.newSnapshot;
     if (lang) {
       documentElement.setAttribute("lang", lang);
     } else {
       documentElement.removeAttribute("lang");
     }
+    if (dir) {
+      documentElement.setAttribute("dir", dir);
+    } else {
+      documentElement.removeAttribute("dir");
+    }
   }
   async mergeHead() {
     const mergedHeadElements = this.mergeProvisionalElements();
@@ -3973,8 +3978,14 @@ class PageRenderer extends Renderer {
   }
   activateNewBody() {
     document.adoptNode(this.newElement);
+    this.removeNoscriptElements();
     this.activateNewBodyScriptElements();
   }
+  removeNoscriptElements() {
+    for (const noscriptElement of this.newElement.querySelectorAll("noscript")) {
+      noscriptElement.remove();
+    }
+  }
   activateNewBodyScriptElements() {
     for (const inertScriptElement of this.newBodyScriptElements) {
       const activatedScriptElement = activateScriptElement(inertScriptElement);
@@ -4038,47 +4049,12 @@ class MorphingPageRenderer extends PageRenderer {
   }
 }
 
-class SnapshotCache {
-  keys=[];
-  snapshots={};
+class SnapshotCache extends LRUCache {
   constructor(size) {
-    this.size = size;
-  }
-  has(location) {
-    return toCacheKey(location) in this.snapshots;
-  }
-  get(location) {
-    if (this.has(location)) {
-      const snapshot = this.read(location);
-      this.touch(location);
-      return snapshot;
-    }
-  }
-  put(location, snapshot) {
-    this.write(location, snapshot);
-    this.touch(location);
-    return snapshot;
-  }
-  clear() {
-    this.snapshots = {};
-  }
-  read(location) {
-    return this.snapshots[toCacheKey(location)];
+    super(size, toCacheKey);
   }
-  write(location, snapshot) {
-    this.snapshots[toCacheKey(location)] = snapshot;
-  }
-  touch(location) {
-    const key = toCacheKey(location);
-    const index = this.keys.indexOf(key);
-    if (index > -1) this.keys.splice(index, 1);
-    this.keys.unshift(key);
-    this.trim();
-  }
-  trim() {
-    for (const key of this.keys.splice(this.size)) {
-      delete this.snapshots[key];
-    }
+  get snapshots() {
+    return this.entries;
   }
 }
 
@@ -4090,7 +4066,7 @@ class PageView extends View {
     return this.snapshot.prefersViewTransitions && newSnapshot.prefersViewTransitions;
   }
   renderPage(snapshot, isPreview = false, willRender = true, visit) {
-    const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage;
+    const shouldMorphPage = this.isPageRefresh(visit) && (visit?.refresh?.method || this.snapshot.refreshMethod) === "morph";
     const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer;
     const renderer = new rendererClass(this.snapshot, snapshot, isPreview, willRender);
     if (!renderer.shouldRender) {
@@ -4125,7 +4101,7 @@ class PageView extends View {
     return !visit || this.lastRenderedLocation.pathname === visit.location.pathname && visit.action === "replace";
   }
   shouldPreserveScrollPosition(visit) {
-    return this.isPageRefresh(visit) && this.snapshot.shouldPreserveScrollPosition;
+    return this.isPageRefresh(visit) && (visit?.refresh?.scroll || this.snapshot.refreshScroll) === "preserve";
   }
   get snapshot() {
     return PageSnapshot.fromElement(this.element);
@@ -4278,13 +4254,21 @@ class Session {
       this.navigator.proposeVisit(expandURL(location), options);
     }
   }
-  refresh(url, requestId) {
+  refresh(url, options = {}) {
+    options = typeof options === "string" ? {
+      requestId: options
+    } : options;
+    const {method: method, requestId: requestId, scroll: scroll} = options;
     const isRecentRequest = requestId && this.recentRequests.has(requestId);
     const isCurrentUrl = url === document.baseURI;
     if (!isRecentRequest && !this.navigator.currentVisit && isCurrentUrl) {
       this.visit(url, {
         action: "replace",
-        shouldCacheSnapshot: false
+        shouldCacheSnapshot: false,
+        refresh: {
+          method: method,
+          scroll: scroll
+        }
       });
     }
   }
@@ -4360,6 +4344,11 @@ class Session {
       });
     }
   }
+  historyPoppedWithEmptyState(location) {
+    this.history.replace(location);
+    this.view.lastRenderedLocation = location;
+    this.view.cacheSnapshot();
+  }
   scrollPositionChanged(position) {
     this.history.updateRestorationData({
       scrollPosition: position
@@ -4384,7 +4373,7 @@ class Session {
     });
   }
   allowsVisitingLocationWithAction(location, action) {
-    return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location);
+    return this.applicationAllowsVisitingLocation(location);
   }
   visitProposedToLocation(location, options) {
     extendURLWithDeprecatedProperties(location);
@@ -4396,21 +4385,13 @@ class Session {
       this.view.markVisitDirection(visit.direction);
     }
     extendURLWithDeprecatedProperties(visit.location);
-    if (!visit.silent) {
-      this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
-    }
+    this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
   }
   visitCompleted(visit) {
     this.view.unmarkVisitDirection();
     clearBusyState(document.documentElement);
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
-  locationWithActionIsSamePage(location, action) {
-    return this.navigator.locationWithActionIsSamePage(location, action);
-  }
-  visitScrolledToSamePageLocation(oldURL, newURL) {
-    this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
-  }
   willSubmitForm(form, submitter) {
     const action = getAction$1(form, submitter);
     return this.submissionIsNavigatable(form, submitter) && locationIsVisitable(expandURL(action), this.snapshot.rootLocation);
@@ -4432,9 +4413,7 @@ class Session {
     this.renderStreamMessage(message);
   }
   viewWillCacheSnapshot() {
-    if (!this.navigator.currentVisit?.silent) {
-      this.notifyApplicationBeforeCachingSnapshot();
-    }
+    this.notifyApplicationBeforeCachingSnapshot();
   }
   allowsImmediateRender({element: element}, options) {
     const event = this.notifyApplicationBeforeRender(element, options);
@@ -4521,12 +4500,6 @@ class Session {
       }
     });
   }
-  notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
-    dispatchEvent(new HashChangeEvent("hashchange", {
-      oldURL: oldURL.toString(),
-      newURL: newURL.toString()
-    }));
-  }
   notifyApplicationAfterFrameLoad(frame) {
     return dispatch("turbo:frame-load", {
       target: frame
@@ -4592,7 +4565,7 @@ const deprecatedLocationPropertyDescriptors = {
 
 const session = new Session(recentRequests);
 
-const {cache: cache, navigator: navigator$1} = session;
+const {cache: cache, navigator: navigator} = session;
 
 function start() {
   session.start();
@@ -4618,11 +4591,6 @@ function renderStreamMessage(message) {
   session.renderStreamMessage(message);
 }
 
-function clearCache() {
-  console.warn("Please replace `Turbo.clearCache()` with `Turbo.cache.clear()`. The top-level function is deprecated and will be removed in a future version of Turbo.`");
-  session.clearCache();
-}
-
 function setProgressBarDelay(delay) {
   console.warn("Please replace `Turbo.setProgressBarDelay(delay)` with `Turbo.config.drive.progressBarDelay = delay`. The top-level function is deprecated and will be removed in a future version of Turbo.`");
   config.drive.progressBarDelay = delay;
@@ -4648,7 +4616,7 @@ function morphTurboFrameElements(currentFrame, newFrame) {
 
 var Turbo = Object.freeze({
   __proto__: null,
-  navigator: navigator$1,
+  navigator: navigator,
   session: session,
   cache: cache,
   PageRenderer: PageRenderer,
@@ -4662,7 +4630,6 @@ var Turbo = Object.freeze({
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
   renderStreamMessage: renderStreamMessage,
-  clearCache: clearCache,
   setProgressBarDelay: setProgressBarDelay,
   setConfirmMethod: setConfirmMethod,
   setFormMode: setFormMode,
@@ -4712,15 +4679,23 @@ class FrameController {
       this.formLinkClickObserver.stop();
       this.linkInterceptor.stop();
       this.formSubmitObserver.stop();
+      if (!this.element.hasAttribute("recurse")) {
+        this.#currentFetchRequest?.cancel();
+      }
     }
   }
   disabledChanged() {
-    if (this.loadingStyle == FrameLoadingStyle.eager) {
+    if (this.disabled) {
+      this.#currentFetchRequest?.cancel();
+    } else if (this.loadingStyle == FrameLoadingStyle.eager) {
       this.#loadSourceURL();
     }
   }
   sourceURLChanged() {
     if (this.#isIgnoringChangesTo("src")) return;
+    if (!this.sourceURL) {
+      this.#currentFetchRequest?.cancel();
+    }
     if (this.element.isConnected) {
       this.complete = false;
     }
@@ -4798,11 +4773,12 @@ class FrameController {
     }
     this.formSubmission = new FormSubmission(this, element, submitter);
     const {fetchRequest: fetchRequest} = this.formSubmission;
-    this.prepareRequest(fetchRequest);
+    const frame = this.#findFrameElement(element, submitter);
+    this.prepareRequest(fetchRequest, frame);
     this.formSubmission.start();
   }
-  prepareRequest(request) {
-    request.headers["Turbo-Frame"] = this.id;
+  prepareRequest(request, frame = this) {
+    request.headers["Turbo-Frame"] = frame.id;
     if (this.currentNavigationElement?.hasAttribute("data-turbo-stream")) {
       request.acceptResponseType(StreamMessage.contentType);
     }
@@ -4996,7 +4972,8 @@ class FrameController {
   }
   #findFrameElement(element, submitter) {
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
-    return getFrameElementById(id) ?? this.element;
+    const target = this.#getFrameElementById(id);
+    return target instanceof FrameElement ? target : this.element;
   }
   async extractForeignFrameElement(container) {
     let element;
@@ -5030,9 +5007,11 @@ class FrameController {
       return false;
     }
     if (id) {
-      const frameElement = getFrameElementById(id);
+      const frameElement = this.#getFrameElementById(id);
       if (frameElement) {
         return !frameElement.disabled;
+      } else if (id == "_parent") {
+        return false;
       }
     }
     if (!session.elementIsNavigatable(element)) {
@@ -5046,8 +5025,11 @@ class FrameController {
   get id() {
     return this.element.id;
   }
+  get disabled() {
+    return this.element.disabled;
+  }
   get enabled() {
-    return !this.element.disabled;
+    return !this.disabled;
   }
   get sourceURL() {
     if (this.element.src) {
@@ -5096,13 +5078,12 @@ class FrameController {
     callback();
     delete this.currentNavigationElement;
   }
-}
-
-function getFrameElementById(id) {
-  if (id != null) {
-    const element = document.getElementById(id);
-    if (element instanceof FrameElement) {
-      return element;
+  #getFrameElementById(id) {
+    if (id != null) {
+      const element = id === "_parent" ? this.element.parentElement.closest("turbo-frame") : document.getElementById(id);
+      if (element instanceof FrameElement) {
+        return element;
+      }
     }
   }
 }
@@ -5126,6 +5107,7 @@ function activateElement(element, currentURL) {
 
 const StreamActions = {
   after() {
+    this.removeDuplicateTargetSiblings();
     this.targetElements.forEach((e => e.parentElement?.insertBefore(this.templateContent, e.nextSibling)));
   },
   append() {
@@ -5133,6 +5115,7 @@ const StreamActions = {
     this.targetElements.forEach((e => e.append(this.templateContent)));
   },
   before() {
+    this.removeDuplicateTargetSiblings();
     this.targetElements.forEach((e => e.parentElement?.insertBefore(this.templateContent, e)));
   },
   prepend() {
@@ -5164,7 +5147,14 @@ const StreamActions = {
     }));
   },
   refresh() {
-    session.refresh(this.baseURI, this.requestId);
+    const method = this.getAttribute("method");
+    const requestId = this.requestId;
+    const scroll = this.getAttribute("scroll");
+    session.refresh(this.baseURI, {
+      method: method,
+      requestId: requestId,
+      scroll: scroll
+    });
   }
 };
 
@@ -5203,6 +5193,14 @@ class StreamElement extends HTMLElement {
     const newChildrenIds = [ ...this.templateContent?.children || [] ].filter((c => !!c.getAttribute("id"))).map((c => c.getAttribute("id")));
     return existingChildren.filter((c => newChildrenIds.includes(c.getAttribute("id"))));
   }
+  removeDuplicateTargetSiblings() {
+    this.duplicateSiblings.forEach((c => c.remove()));
+  }
+  get duplicateSiblings() {
+    const existingChildren = this.targetElements.flatMap((e => [ ...e.parentElement.children ])).filter((c => !!c.id));
+    const newChildrenIds = [ ...this.templateContent?.children || [] ].filter((c => !!c.id)).map((c => c.id));
+    return existingChildren.filter((c => newChildrenIds.includes(c.id)));
+  }
   get performAction() {
     if (this.action) {
       const actionFunction = StreamActions[this.action];
@@ -5313,10 +5311,10 @@ if (customElements.get("turbo-stream-source") === undefined) {
 }
 
 (() => {
-  let element = document.currentScript;
-  if (!element) return;
-  if (element.hasAttribute("data-turbo-suppress-warning")) return;
-  element = element.parentElement;
+  const scriptElement = document.currentScript;
+  if (!scriptElement) return;
+  if (scriptElement.hasAttribute("data-turbo-suppress-warning")) return;
+  let element = scriptElement.parentElement;
   while (element) {
     if (element == document.body) {
       return console.warn(unindent`
@@ -5328,7 +5326,7 @@ if (customElements.get("turbo-stream-source") === undefined) {
 
         ——
         Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
-      `, element.outerHTML);
+      `, scriptElement.outerHTML);
     }
     element = element.parentElement;
   }
@@ -5356,7 +5354,6 @@ var Turbo$1 = Object.freeze({
   StreamElement: StreamElement,
   StreamSourceElement: StreamSourceElement,
   cache: cache,
-  clearCache: clearCache,
   config: config,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
@@ -5368,7 +5365,7 @@ var Turbo$1 = Object.freeze({
   morphChildren: morphChildren,
   morphElements: morphElements,
   morphTurboFrameElements: morphTurboFrameElements,
-  navigator: navigator$1,
+  navigator: navigator,
   registerAdapter: registerAdapter,
   renderStreamMessage: renderStreamMessage,
   session: session,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo-rails",
-  "version": "8.0.19",
+  "version": "8.0.21",
   "description": "The speed of a single-page web application without having to write any JavaScript",
   "module": "app/javascript/turbo/index.js",
   "main": "app/assets/javascripts/turbo.js",
@@ -19,7 +19,7 @@
     "release": "yarn publish && git commit -am \"$npm_package_name v$npm_package_version\" && git push"
   },
   "dependencies": {
-    "@hotwired/turbo": "^8.0.19",
+    "@hotwired/turbo": "^8.0.21",
     "@rails/actioncable": ">=7.0"
   },
   "devDependencies": {