turbo-rails 1.3.0 → 1.5.0

data/app/assets/javascripts/turbo.js

@@ -56,13 +56,11 @@ function clickCaptured(event) {
 
 (function() {
   if ("submitter" in Event.prototype) return;
-  let prototype;
+  let prototype = window.Event.prototype;
   if ("SubmitEvent" in window && /Apple Computer/.test(navigator.vendor)) {
     prototype = window.SubmitEvent.prototype;
   } else if ("SubmitEvent" in window) {
     return;
-  } else {
-    prototype = window.Event.prototype;
   }
   addEventListener("click", clickCaptured, true);
   Object.defineProperty(prototype, "submitter", {
@@ -82,14 +80,14 @@ var FrameLoadingStyle;
 })(FrameLoadingStyle || (FrameLoadingStyle = {}));
 
 class FrameElement extends HTMLElement {
+  static get observedAttributes() {
+    return [ "disabled", "complete", "loading", "src" ];
+  }
   constructor() {
     super();
     this.loaded = Promise.resolve();
     this.delegate = new FrameElement.delegateConstructor(this);
   }
-  static get observedAttributes() {
-    return [ "disabled", "complete", "loading", "src" ];
-  }
   connectedCallback() {
     this.delegate.connect();
   }
@@ -97,11 +95,7 @@ class FrameElement extends HTMLElement {
     this.delegate.disconnect();
   }
   reload() {
-    const {src: src} = this;
-    this.removeAttribute("complete");
-    this.src = null;
-    this.src = src;
-    return this.loaded;
+    return this.delegate.sourceURLReloaded();
   }
   attributeChangedCallback(name) {
     if (name == "loading") {
@@ -286,10 +280,6 @@ class FetchResponse {
   }
 }
 
-function isAction(action) {
-  return action == "advance" || action == "replace" || action == "restore";
-}
-
 function activateScriptElement(element) {
   if (element.getAttribute("data-turbo-eval") == "false") {
     return element;
@@ -322,6 +312,7 @@ function dispatch(eventName, {target: target, cancelable: cancelable, detail: de
   const event = new CustomEvent(eventName, {
     cancelable: cancelable,
     bubbles: true,
+    composed: true,
     detail: detail
   });
   if (target && target.isConnected) {
@@ -435,6 +426,10 @@ function getHistoryMethodForAction(action) {
   }
 }
 
+function isAction(action) {
+  return action == "advance" || action == "replace" || action == "restore";
+}
+
 function getVisitAction(...elements) {
   const action = getAttribute("data-turbo-action", ...elements);
   return isAction(action) ? action : null;
@@ -460,6 +455,13 @@ function setMetaContent(name, content) {
   return element;
 }
 
+function findClosestRecursively(element, selector) {
+  var _a;
+  if (element instanceof Element) {
+    return element.closest(selector) || findClosestRecursively(element.assignedSlot || ((_a = element.getRootNode()) === null || _a === void 0 ? void 0 : _a.host), selector);
+  }
+}
+
 var FetchMethod;
 
 (function(FetchMethod) {
@@ -513,9 +515,8 @@ class FetchRequest {
     this.abortController.abort();
   }
   async perform() {
-    var _a, _b;
     const {fetchOptions: fetchOptions} = this;
-    (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
+    this.delegate.prepareRequest(this);
     await this.allowRequestToBeIntercepted(fetchOptions);
     try {
       this.delegate.requestStarted(this);
@@ -557,7 +558,7 @@ class FetchRequest {
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
-      body: this.isIdempotent ? null : this.body,
+      body: this.isSafe ? null : this.body,
       signal: this.abortSignal,
       referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href
     };
@@ -567,8 +568,8 @@ class FetchRequest {
       Accept: "text/html, application/xhtml+xml"
     };
   }
-  get isIdempotent() {
-    return this.method == FetchMethod.get;
+  get isSafe() {
+    return this.method === FetchMethod.get;
   }
   get abortSignal() {
     return this.abortController.signal;
@@ -630,9 +631,6 @@ class AppearanceObserver {
 }
 
 class StreamMessage {
-  constructor(fragment) {
-    this.fragment = importStreamElements(fragment);
-  }
   static wrap(message) {
     if (typeof message == "string") {
       return new this(createDocumentFragment(message));
@@ -640,6 +638,9 @@ class StreamMessage {
       return message;
     }
   }
+  constructor(fragment) {
+    this.fragment = importStreamElements(fragment);
+  }
 }
 
 StreamMessage.contentType = "text/vnd.turbo-stream.html";
@@ -688,6 +689,9 @@ function formEnctypeFromString(encoding) {
 }
 
 class FormSubmission {
+  static confirmMethod(message, _element, _submitter) {
+    return Promise.resolve(confirm(message));
+  }
   constructor(delegate, formElement, submitter, mustRedirect = false) {
     this.state = FormSubmissionState.initialized;
     this.delegate = delegate;
@@ -701,9 +705,6 @@ class FormSubmission {
     this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
     this.mustRedirect = mustRedirect;
   }
-  static confirmMethod(message, _element, _submitter) {
-    return Promise.resolve(confirm(message));
-  }
   get method() {
     var _a;
     const method = ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formmethod")) || this.formElement.getAttribute("method") || "";
@@ -729,8 +730,8 @@ class FormSubmission {
     var _a;
     return formEnctypeFromString(((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formenctype")) || this.formElement.enctype);
   }
-  get isIdempotent() {
-    return this.fetchRequest.isIdempotent;
+  get isSafe() {
+    return this.fetchRequest.isSafe;
   }
   get stringFormData() {
     return [ ...this.formData ].reduce(((entries, [name, value]) => entries.concat(typeof value == "string" ? [ [ name, value ] ] : [])), []);
@@ -757,11 +758,11 @@ class FormSubmission {
       return true;
     }
   }
-  prepareHeadersForRequest(headers, request) {
-    if (!request.isIdempotent) {
+  prepareRequest(request) {
+    if (!request.isSafe) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
       if (token) {
-        headers["X-CSRF-Token"] = token;
+        request.headers["X-CSRF-Token"] = token;
       }
     }
     if (this.requestAcceptsTurboStreamResponse(request)) {
@@ -772,6 +773,7 @@ class FormSubmission {
     var _a;
     this.state = FormSubmissionState.waiting;
     (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.setAttribute("disabled", "");
+    this.setSubmitsWith();
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: {
@@ -819,6 +821,7 @@ class FormSubmission {
     var _a;
     this.state = FormSubmissionState.stopped;
     (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.removeAttribute("disabled");
+    this.resetSubmitterText();
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: Object.assign({
@@ -827,11 +830,35 @@ class FormSubmission {
     });
     this.delegate.formSubmissionFinished(this);
   }
+  setSubmitsWith() {
+    if (!this.submitter || !this.submitsWith) return;
+    if (this.submitter.matches("button")) {
+      this.originalSubmitText = this.submitter.innerHTML;
+      this.submitter.innerHTML = this.submitsWith;
+    } else if (this.submitter.matches("input")) {
+      const input = this.submitter;
+      this.originalSubmitText = input.value;
+      input.value = this.submitsWith;
+    }
+  }
+  resetSubmitterText() {
+    if (!this.submitter || !this.originalSubmitText) return;
+    if (this.submitter.matches("button")) {
+      this.submitter.innerHTML = this.originalSubmitText;
+    } else if (this.submitter.matches("input")) {
+      const input = this.submitter;
+      input.value = this.originalSubmitText;
+    }
+  }
   requestMustRedirect(request) {
-    return !request.isIdempotent && this.mustRedirect;
+    return !request.isSafe && this.mustRedirect;
   }
   requestAcceptsTurboStreamResponse(request) {
-    return !request.isIdempotent || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+    return !request.isSafe || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+  }
+  get submitsWith() {
+    var _a;
+    return (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("data-turbo-submits-with");
   }
 }
 
@@ -936,6 +963,7 @@ class FormSubmitObserver {
         const submitter = event.submitter || undefined;
         if (form && submissionDoesNotDismissDialog(form, submitter) && submissionDoesNotTargetIFrame(form, submitter) && this.delegate.willSubmitForm(form, submitter)) {
           event.preventDefault();
+          event.stopImmediatePropagation();
           this.delegate.formSubmitted(form, submitter);
         }
       }
@@ -963,11 +991,15 @@ function submissionDoesNotDismissDialog(form, submitter) {
 }
 
 function submissionDoesNotTargetIFrame(form, submitter) {
-  const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
-  for (const element of document.getElementsByName(target)) {
-    if (element instanceof HTMLIFrameElement) return false;
+  if ((submitter === null || submitter === void 0 ? void 0 : submitter.hasAttribute("formtarget")) || form.hasAttribute("target")) {
+    const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
+    for (const element of document.getElementsByName(target)) {
+      if (element instanceof HTMLIFrameElement) return false;
+    }
+    return true;
+  } else {
+    return true;
   }
-  return true;
 }
 
 class View {
@@ -1068,14 +1100,55 @@ class View {
 }
 
 class FrameView extends View {
-  invalidate() {
-    this.element.innerHTML = "";
+  missing() {
+    this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`;
   }
   get snapshot() {
     return new Snapshot(this.element);
   }
 }
 
+class LinkInterceptor {
+  constructor(delegate, element) {
+    this.clickBubbled = event => {
+      if (this.respondsToEventTarget(event.target)) {
+        this.clickEvent = event;
+      } else {
+        delete this.clickEvent;
+      }
+    };
+    this.linkClicked = event => {
+      if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+        if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
+          this.clickEvent.preventDefault();
+          event.preventDefault();
+          this.delegate.linkClickIntercepted(event.target, event.detail.url, event.detail.originalEvent);
+        }
+      }
+      delete this.clickEvent;
+    };
+    this.willVisit = _event => {
+      delete this.clickEvent;
+    };
+    this.delegate = delegate;
+    this.element = element;
+  }
+  start() {
+    this.element.addEventListener("click", this.clickBubbled);
+    document.addEventListener("turbo:click", this.linkClicked);
+    document.addEventListener("turbo:before-visit", this.willVisit);
+  }
+  stop() {
+    this.element.removeEventListener("click", this.clickBubbled);
+    document.removeEventListener("turbo:click", this.linkClicked);
+    document.removeEventListener("turbo:before-visit", this.willVisit);
+  }
+  respondsToEventTarget(target) {
+    const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+    return element && element.closest("turbo-frame, html") == this.element;
+  }
+}
+
 class LinkClickObserver {
   constructor(delegate, eventTarget) {
     this.started = false;
@@ -1115,9 +1188,7 @@ class LinkClickObserver {
     return !(event.target && event.target.isContentEditable || event.defaultPrevented || event.which > 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
   }
   findLinkFromClickTarget(target) {
-    if (target instanceof Element) {
-      return target.closest("a[href]:not([target^=_]):not([download])");
-    }
+    return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])");
   }
   getLocationForLink(link) {
     return expandURL(link.getAttribute("href") || "");
@@ -1125,37 +1196,51 @@ class LinkClickObserver {
 }
 
 function doesNotTargetIFrame(anchor) {
-  for (const element of document.getElementsByName(anchor.target)) {
-    if (element instanceof HTMLIFrameElement) return false;
+  if (anchor.hasAttribute("target")) {
+    for (const element of document.getElementsByName(anchor.target)) {
+      if (element instanceof HTMLIFrameElement) return false;
+    }
+    return true;
+  } else {
+    return true;
   }
-  return true;
 }
 
 class FormLinkClickObserver {
   constructor(delegate, element) {
     this.delegate = delegate;
-    this.linkClickObserver = new LinkClickObserver(this, element);
+    this.linkInterceptor = new LinkClickObserver(this, element);
   }
   start() {
-    this.linkClickObserver.start();
+    this.linkInterceptor.start();
   }
   stop() {
-    this.linkClickObserver.stop();
+    this.linkInterceptor.stop();
   }
   willFollowLinkToLocation(link, location, originalEvent) {
     return this.delegate.willSubmitFormLinkToLocation(link, location, originalEvent) && link.hasAttribute("data-turbo-method");
   }
   followedLinkToLocation(link, location) {
-    const action = location.href;
     const form = document.createElement("form");
+    const type = "hidden";
+    for (const [name, value] of location.searchParams) {
+      form.append(Object.assign(document.createElement("input"), {
+        type: type,
+        name: name,
+        value: value
+      }));
+    }
+    const action = Object.assign(location, {
+      search: ""
+    });
     form.setAttribute("data-turbo", "true");
-    form.setAttribute("action", action);
+    form.setAttribute("action", action.href);
     form.setAttribute("hidden", "");
     const method = link.getAttribute("data-turbo-method");
     if (method) form.setAttribute("method", method);
     const turboFrame = link.getAttribute("data-turbo-frame");
     if (turboFrame) form.setAttribute("data-turbo-frame", turboFrame);
-    const turboAction = link.getAttribute("data-turbo-action");
+    const turboAction = getVisitAction(link);
     if (turboAction) form.setAttribute("data-turbo-action", turboAction);
     const turboConfirm = link.getAttribute("data-turbo-confirm");
     if (turboConfirm) form.setAttribute("data-turbo-confirm", turboConfirm);
@@ -1171,16 +1256,16 @@ class FormLinkClickObserver {
 }
 
 class Bardo {
-  constructor(delegate, permanentElementMap) {
-    this.delegate = delegate;
-    this.permanentElementMap = permanentElementMap;
-  }
-  static preservingPermanentElements(delegate, permanentElementMap, callback) {
+  static async preservingPermanentElements(delegate, permanentElementMap, callback) {
     const bardo = new this(delegate, permanentElementMap);
     bardo.enter();
-    callback();
+    await callback();
     bardo.leave();
   }
+  constructor(delegate, permanentElementMap) {
+    this.delegate = delegate;
+    this.permanentElementMap = permanentElementMap;
+  }
   enter() {
     for (const id in this.permanentElementMap) {
       const [currentPermanentElement, newPermanentElement] = this.permanentElementMap[id];
@@ -1251,8 +1336,8 @@ class Renderer {
       delete this.resolvingFunctions;
     }
   }
-  preservingPermanentElements(callback) {
-    Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
+  async preservingPermanentElements(callback) {
+    await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
   }
   focusFirstAutofocusableElement() {
     const element = this.connectedSnapshot.firstAutofocusableElement;
@@ -1291,10 +1376,6 @@ function elementIsFocusable(element) {
 }
 
 class FrameRenderer extends Renderer {
-  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
-    super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender);
-    this.delegate = delegate;
-  }
   static renderElement(currentElement, newElement) {
     var _a;
     const destinationRange = document.createRange();
@@ -1307,6 +1388,10 @@ class FrameRenderer extends Renderer {
       currentElement.appendChild(sourceRange.extractContents());
     }
   }
+  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+    super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender);
+    this.delegate = delegate;
+  }
   get shouldRender() {
     return true;
   }
@@ -1368,18 +1453,6 @@ function readScrollBehavior(value, defaultValue) {
 }
 
 class ProgressBar {
-  constructor() {
-    this.hiding = false;
-    this.value = 0;
-    this.visible = false;
-    this.trickle = () => {
-      this.setValue(this.value + Math.random() / 100);
-    };
-    this.stylesheetElement = this.createStylesheetElement();
-    this.progressElement = this.createProgressElement();
-    this.installStylesheetElement();
-    this.setValue(0);
-  }
   static get defaultCSS() {
     return unindent`
       .turbo-progress-bar {
@@ -1397,6 +1470,18 @@ class ProgressBar {
       }
     `;
   }
+  constructor() {
+    this.hiding = false;
+    this.value = 0;
+    this.visible = false;
+    this.trickle = () => {
+      this.setValue(this.value + Math.random() / 100);
+    };
+    this.stylesheetElement = this.createStylesheetElement();
+    this.progressElement = this.createProgressElement();
+    this.installStylesheetElement();
+    this.setValue(0);
+  }
   show() {
     if (!this.visible) {
       this.visible = true;
@@ -1565,10 +1650,6 @@ function elementWithoutNonce(element) {
 }
 
 class PageSnapshot extends Snapshot {
-  constructor(element, headSnapshot) {
-    super(element);
-    this.headSnapshot = headSnapshot;
-  }
   static fromHTMLString(html = "") {
     return this.fromDocument(parseHTMLDocument(html));
   }
@@ -1578,6 +1659,10 @@ class PageSnapshot extends Snapshot {
   static fromDocument({head: head, body: body}) {
     return new this(body, new HeadSnapshot(head));
   }
+  constructor(element, headSnapshot) {
+    super(element);
+    this.headSnapshot = headSnapshot;
+  }
   clone() {
     const clonedElement = this.element.cloneNode(true);
     const selectElements = this.element.querySelectorAll("select");
@@ -1668,10 +1753,11 @@ class Visit {
     this.delegate = delegate;
     this.location = location;
     this.restorationIdentifier = restorationIdentifier || uuid();
-    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse} = Object.assign(Object.assign({}, defaultOptions), options);
+    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse} = Object.assign(Object.assign({}, defaultOptions), options);
     this.action = action;
     this.historyChanged = historyChanged;
     this.referrer = referrer;
+    this.snapshot = snapshot;
     this.snapshotHTML = snapshotHTML;
     this.response = response;
     this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
@@ -1834,7 +1920,9 @@ class Visit {
     if (this.redirectedToLocation && !this.followedRedirect && ((_a = this.response) === null || _a === void 0 ? void 0 : _a.redirected)) {
       this.adapter.visitProposedToLocation(this.redirectedToLocation, {
         action: "replace",
-        response: this.response
+        response: this.response,
+        shouldCacheSnapshot: false,
+        willRender: false
       });
       this.followedRedirect = true;
     }
@@ -1844,11 +1932,12 @@ class Visit {
       this.render((async () => {
         this.cacheSnapshot();
         this.performScroll();
+        this.changeHistory();
         this.adapter.visitRendered(this);
       }));
     }
   }
-  prepareHeadersForRequest(headers, request) {
+  prepareRequest(request) {
     if (this.acceptsStreamResponse) {
       request.acceptResponseType(StreamMessage.contentType);
     }
@@ -1956,7 +2045,7 @@ class Visit {
   }
   cacheSnapshot() {
     if (!this.snapshotCached) {
-      this.view.cacheSnapshot().then((snapshot => snapshot && this.visitCachedSnapshot(snapshot)));
+      this.view.cacheSnapshot(this.snapshot).then((snapshot => snapshot && this.visitCachedSnapshot(snapshot)));
       this.snapshotCached = true;
     }
   }
@@ -2065,11 +2154,11 @@ class BrowserAdapter {
     }
   }
   reload(reason) {
+    var _a;
     dispatch("turbo:reload", {
       detail: reason
     });
-    if (!this.location) return;
-    window.location.href = this.location.toString();
+    window.location.href = ((_a = this.location) === null || _a === void 0 ? void 0 : _a.toString()) || window.location.href;
   }
   get navigator() {
     return this.session.navigator;
@@ -2078,10 +2167,11 @@ class BrowserAdapter {
 
 class CacheObserver {
   constructor() {
+    this.selector = "[data-turbo-temporary]";
+    this.deprecatedSelector = "[data-turbo-cache=false]";
     this.started = false;
-    this.removeStaleElements = _event => {
-      const staleElements = [ ...document.querySelectorAll('[data-turbo-cache="false"]') ];
-      for (const element of staleElements) {
+    this.removeTemporaryElements = _event => {
+      for (const element of this.temporaryElements) {
         element.remove();
       }
     };
@@ -2089,14 +2179,24 @@ class CacheObserver {
   start() {
     if (!this.started) {
       this.started = true;
-      addEventListener("turbo:before-cache", this.removeStaleElements, false);
+      addEventListener("turbo:before-cache", this.removeTemporaryElements, false);
     }
   }
   stop() {
     if (this.started) {
       this.started = false;
-      removeEventListener("turbo:before-cache", this.removeStaleElements, false);
+      removeEventListener("turbo:before-cache", this.removeTemporaryElements, false);
+    }
+  }
+  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 ];
   }
 }
 
@@ -2104,24 +2204,24 @@ class FrameRedirector {
   constructor(session, element) {
     this.session = session;
     this.element = element;
-    this.linkClickObserver = new LinkClickObserver(this, element);
+    this.linkInterceptor = new LinkInterceptor(this, element);
     this.formSubmitObserver = new FormSubmitObserver(this, element);
   }
   start() {
-    this.linkClickObserver.start();
+    this.linkInterceptor.start();
     this.formSubmitObserver.start();
   }
   stop() {
-    this.linkClickObserver.stop();
+    this.linkInterceptor.stop();
     this.formSubmitObserver.stop();
   }
-  willFollowLinkToLocation(element, location, event) {
-    return this.shouldRedirect(element) && this.frameAllowsVisitingLocation(element, location, event);
+  shouldInterceptLinkClick(element, _location, _event) {
+    return this.shouldRedirect(element);
   }
-  followedLinkToLocation(element, url) {
+  linkClickIntercepted(element, url, event) {
     const frame = this.findFrameElement(element);
     if (frame) {
-      frame.delegate.followedLinkToLocation(element, url);
+      frame.delegate.linkClickIntercepted(element, url, event);
     }
   }
   willSubmitForm(element, submitter) {
@@ -2133,17 +2233,6 @@ class FrameRedirector {
       frame.delegate.formSubmitted(element, submitter);
     }
   }
-  frameAllowsVisitingLocation(target, {href: url}, originalEvent) {
-    const event = dispatch("turbo:click", {
-      target: target,
-      detail: {
-        url: url,
-        originalEvent: originalEvent
-      },
-      cancelable: true
-    });
-    return !event.defaultPrevented;
-  }
   shouldSubmit(form, submitter) {
     var _a;
     const action = getAction(form, submitter);
@@ -2268,7 +2357,6 @@ class Navigator {
     }
   }
   startVisit(locatable, restorationIdentifier, options = {}) {
-    this.lastVisit = this.currentVisit;
     this.stop();
     this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, Object.assign({
       referrer: this.location
@@ -2308,7 +2396,7 @@ class Navigator {
     if (formSubmission == this.formSubmission) {
       const responseHTML = await fetchResponse.responseHTML;
       if (responseHTML) {
-        const shouldCacheSnapshot = formSubmission.method == FetchMethod.get;
+        const shouldCacheSnapshot = formSubmission.isSafe;
         if (!shouldCacheSnapshot) {
           this.view.clearSnapshotCache();
         }
@@ -2355,12 +2443,10 @@ class Navigator {
     this.delegate.visitCompleted(visit);
   }
   locationWithActionIsSamePage(location, action) {
-    var _a;
     const anchor = getAnchor(location);
-    const lastLocation = ((_a = this.lastVisit) === null || _a === void 0 ? void 0 : _a.location) || this.view.lastRenderedLocation;
-    const currentAnchor = getAnchor(lastLocation);
+    const currentAnchor = getAnchor(this.view.lastRenderedLocation);
     const isRestorationToTop = action === "restore" && typeof anchor === "undefined";
-    return action !== "replace" && getRequestURL(location) === getRequestURL(lastLocation) && (isRestorationToTop || anchor != null && anchor !== currentAnchor);
+    return action !== "replace" && getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) && (isRestorationToTop || anchor != null && anchor !== currentAnchor);
   }
   visitScrolledToSamePageLocation(oldURL, newURL) {
     this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
@@ -2371,10 +2457,8 @@ class Navigator {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  getActionForFormSubmission(formSubmission) {
-    const {formElement: formElement, submitter: submitter} = formSubmission;
-    const action = getAttribute("data-turbo-action", submitter, formElement);
-    return isAction(action) ? action : "advance";
+  getActionForFormSubmission({submitter: submitter, formElement: formElement}) {
+    return getVisitAction(submitter, formElement) || "advance";
   }
 }
 
@@ -2622,7 +2706,7 @@ class PageRenderer extends Renderer {
   }
   async render() {
     if (this.willRender) {
-      this.replaceBody();
+      await this.replaceBody();
     }
   }
   finishRendering() {
@@ -2641,16 +2725,16 @@ class PageRenderer extends Renderer {
     return this.newSnapshot.element;
   }
   async mergeHead() {
+    const mergedHeadElements = this.mergeProvisionalElements();
     const newStylesheetElements = this.copyNewHeadStylesheetElements();
     this.copyNewHeadScriptElements();
-    this.removeCurrentHeadProvisionalElements();
-    this.copyNewHeadProvisionalElements();
+    await mergedHeadElements;
     await newStylesheetElements;
   }
-  replaceBody() {
-    this.preservingPermanentElements((() => {
+  async replaceBody() {
+    await this.preservingPermanentElements((async () => {
       this.activateNewBody();
-      this.assignNewBody();
+      await this.assignNewBody();
     }));
   }
   get trackedElementsAreIdentical() {
@@ -2669,6 +2753,35 @@ class PageRenderer extends Renderer {
       document.head.appendChild(activateScriptElement(element));
     }
   }
+  async mergeProvisionalElements() {
+    const newHeadElements = [ ...this.newHeadProvisionalElements ];
+    for (const element of this.currentHeadProvisionalElements) {
+      if (!this.isCurrentElementInElementList(element, newHeadElements)) {
+        document.head.removeChild(element);
+      }
+    }
+    for (const element of newHeadElements) {
+      document.head.appendChild(element);
+    }
+  }
+  isCurrentElementInElementList(element, elementList) {
+    for (const [index, newElement] of elementList.entries()) {
+      if (element.tagName == "TITLE") {
+        if (newElement.tagName != "TITLE") {
+          continue;
+        }
+        if (element.innerHTML == newElement.innerHTML) {
+          elementList.splice(index, 1);
+          return true;
+        }
+      }
+      if (newElement.isEqualNode(element)) {
+        elementList.splice(index, 1);
+        return true;
+      }
+    }
+    return false;
+  }
   removeCurrentHeadProvisionalElements() {
     for (const element of this.currentHeadProvisionalElements) {
       document.head.removeChild(element);
@@ -2689,8 +2802,8 @@ class PageRenderer extends Renderer {
       inertScriptElement.replaceWith(activatedScriptElement);
     }
   }
-  assignNewBody() {
-    this.renderElement(this.currentElement, this.newElement);
+  async assignNewBody() {
+    await this.renderElement(this.currentElement, this.newElement);
   }
   get newHeadStylesheetElements() {
     return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
@@ -2777,10 +2890,10 @@ class PageView extends View {
   clearSnapshotCache() {
     this.snapshotCache.clear();
   }
-  async cacheSnapshot() {
-    if (this.shouldCacheSnapshot) {
+  async cacheSnapshot(snapshot = this.snapshot) {
+    if (snapshot.isCacheable) {
       this.delegate.viewWillCacheSnapshot();
-      const {snapshot: snapshot, lastRenderedLocation: location} = this;
+      const {lastRenderedLocation: location} = this;
       await nextEventLoopTick();
       const cachedSnapshot = snapshot.clone();
       this.snapshotCache.put(location, cachedSnapshot);
@@ -2793,9 +2906,6 @@ class PageView extends View {
   get snapshot() {
     return PageSnapshot.fromElement(this.element);
   }
-  get shouldCacheSnapshot() {
-    return this.snapshot.isCacheable;
-  }
 }
 
 class Preloader {
@@ -3127,8 +3237,8 @@ class Session {
     }
   }
   elementIsNavigatable(element) {
-    const container = element.closest("[data-turbo]");
-    const withinFrame = element.closest("turbo-frame");
+    const container = findClosestRecursively(element, "[data-turbo]");
+    const withinFrame = findClosestRecursively(element, "turbo-frame");
     if (this.drive || withinFrame) {
       if (container) {
         return container.getAttribute("data-turbo") != "false";
@@ -3144,8 +3254,7 @@ class Session {
     }
   }
   getActionForLink(link) {
-    const action = link.getAttribute("data-turbo-action");
-    return isAction(action) ? action : "advance";
+    return getVisitAction(link) || "advance";
   }
   get snapshot() {
     return this.view.snapshot;
@@ -3213,7 +3322,10 @@ const StreamActions = {
     this.targetElements.forEach((e => e.replaceWith(this.templateContent)));
   },
   update() {
-    this.targetElements.forEach((e => e.replaceChildren(this.templateContent)));
+    this.targetElements.forEach((targetElement => {
+      targetElement.innerHTML = "";
+      targetElement.append(this.templateContent);
+    }));
   }
 };
 
@@ -3285,6 +3397,8 @@ var Turbo = Object.freeze({
   StreamActions: StreamActions
 });
 
+class TurboFrameMissingError extends Error {}
+
 class FrameController {
   constructor(element) {
     this.fetchResponseLoaded = _fetchResponse => {};
@@ -3305,7 +3419,7 @@ class FrameController {
     this.view = new FrameView(this, this.element);
     this.appearanceObserver = new AppearanceObserver(this, this.element);
     this.formLinkClickObserver = new FormLinkClickObserver(this, this.element);
-    this.linkClickObserver = new LinkClickObserver(this, this.element);
+    this.linkInterceptor = new LinkInterceptor(this, this.element);
     this.restorationIdentifier = uuid();
     this.formSubmitObserver = new FormSubmitObserver(this, this.element);
   }
@@ -3318,7 +3432,7 @@ class FrameController {
         this.loadSourceURL();
       }
       this.formLinkClickObserver.start();
-      this.linkClickObserver.start();
+      this.linkInterceptor.start();
       this.formSubmitObserver.start();
     }
   }
@@ -3327,7 +3441,7 @@ class FrameController {
       this.connected = false;
       this.appearanceObserver.stop();
       this.formLinkClickObserver.stop();
-      this.linkClickObserver.stop();
+      this.linkInterceptor.stop();
       this.formSubmitObserver.stop();
     }
   }
@@ -3345,6 +3459,15 @@ class FrameController {
       this.loadSourceURL();
     }
   }
+  sourceURLReloaded() {
+    const {src: src} = this.element;
+    this.ignoringChangesToAttribute("complete", (() => {
+      this.element.removeAttribute("complete");
+    }));
+    this.element.src = null;
+    this.element.src = src;
+    return this.element.loaded;
+  }
   completeChanged() {
     if (this.isIgnoringChangesTo("complete")) return;
     this.loadSourceURL();
@@ -3372,45 +3495,34 @@ class FrameController {
     try {
       const html = await fetchResponse.responseHTML;
       if (html) {
-        const {body: body} = parseHTMLDocument(html);
-        const newFrameElement = await this.extractForeignFrameElement(body);
-        if (newFrameElement) {
-          const snapshot = new Snapshot(newFrameElement);
-          const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
-          if (this.view.renderPromise) await this.view.renderPromise;
-          this.changeHistory();
-          await this.view.render(renderer);
-          this.complete = true;
-          session.frameRendered(fetchResponse, this.element);
-          session.frameLoaded(this.element);
-          this.fetchResponseLoaded(fetchResponse);
-        } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
-          console.warn(`A matching frame for #${this.element.id} was missing from the response, transforming into full-page Visit.`);
-          this.visitResponse(fetchResponse.response);
+        const document = parseHTMLDocument(html);
+        const pageSnapshot = PageSnapshot.fromDocument(document);
+        if (pageSnapshot.isVisitable) {
+          await this.loadFrameResponse(fetchResponse, document);
+        } else {
+          await this.handleUnvisitableFrameResponse(fetchResponse);
         }
       }
-    } catch (error) {
-      console.error(error);
-      this.view.invalidate();
     } finally {
       this.fetchResponseLoaded = () => {};
     }
   }
-  elementAppearedInViewport(_element) {
+  elementAppearedInViewport(element) {
+    this.proposeVisitIfNavigatedWithAction(element, element);
     this.loadSourceURL();
   }
   willSubmitFormLinkToLocation(link) {
-    return link.closest("turbo-frame") == this.element && this.shouldInterceptNavigation(link);
+    return this.shouldInterceptNavigation(link);
   }
   submittedFormLinkToLocation(link, _location, form) {
     const frame = this.findFrameElement(link);
     if (frame) form.setAttribute("data-turbo-frame", frame.id);
   }
-  willFollowLinkToLocation(element, location, event) {
-    return this.shouldInterceptNavigation(element) && this.frameAllowsVisitingLocation(element, location, event);
+  shouldInterceptLinkClick(element, _location, _event) {
+    return this.shouldInterceptNavigation(element);
   }
-  followedLinkToLocation(element, location) {
-    this.navigateFrame(element, location.href);
+  linkClickIntercepted(element, location) {
+    this.navigateFrame(element, location);
   }
   willSubmitForm(element, submitter) {
     return element.closest("turbo-frame") == this.element && this.shouldInterceptNavigation(element, submitter);
@@ -3421,12 +3533,12 @@ class FrameController {
     }
     this.formSubmission = new FormSubmission(this, element, submitter);
     const {fetchRequest: fetchRequest} = this.formSubmission;
-    this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+    this.prepareRequest(fetchRequest);
     this.formSubmission.start();
   }
-  prepareHeadersForRequest(headers, request) {
+  prepareRequest(request) {
     var _a;
-    headers["Turbo-Frame"] = this.id;
+    request.headers["Turbo-Frame"] = this.id;
     if ((_a = this.currentNavigationElement) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-turbo-stream")) {
       request.acceptResponseType(StreamMessage.contentType);
     }
@@ -3442,7 +3554,6 @@ class FrameController {
     this.resolveVisitPromise();
   }
   async requestFailedWithResponse(request, response) {
-    console.error(response);
     await this.loadResponse(response);
     this.resolveVisitPromise();
   }
@@ -3458,11 +3569,15 @@ class FrameController {
   }
   formSubmissionSucceededWithResponse(formSubmission, response) {
     const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter);
-    this.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
+    frame.delegate.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
     frame.delegate.loadResponse(response);
+    if (!formSubmission.isSafe) {
+      session.clearCache();
+    }
   }
   formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
     this.element.delegate.loadResponse(fetchResponse);
+    session.clearCache();
   }
   formSubmissionErrored(formSubmission, error) {
     console.error(error);
@@ -3492,6 +3607,22 @@ class FrameController {
   willRenderFrame(currentElement, _newElement) {
     this.previousFrameElement = currentElement.cloneNode(true);
   }
+  async loadFrameResponse(fetchResponse, document) {
+    const newFrameElement = await this.extractForeignFrameElement(document.body);
+    if (newFrameElement) {
+      const snapshot = new Snapshot(newFrameElement);
+      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
+      if (this.view.renderPromise) await this.view.renderPromise;
+      this.changeHistory();
+      await this.view.render(renderer);
+      this.complete = true;
+      session.frameRendered(fetchResponse, this.element);
+      session.frameLoaded(this.element);
+      this.fetchResponseLoaded(fetchResponse);
+    } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
+      this.handleFrameMissingFromResponse(fetchResponse);
+    }
+  }
   async visit(url) {
     var _a;
     const request = new FetchRequest(this, FetchMethod.get, url, new URLSearchParams, this.element);
@@ -3508,15 +3639,15 @@ class FrameController {
   }
   navigateFrame(element, url, submitter) {
     const frame = this.findFrameElement(element, submitter);
-    this.proposeVisitIfNavigatedWithAction(frame, element, submitter);
+    frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
     this.withCurrentNavigationElement(element, (() => {
       frame.src = url;
     }));
   }
   proposeVisitIfNavigatedWithAction(frame, element, submitter) {
     this.action = getVisitAction(submitter, element, frame);
-    this.frame = frame;
-    if (isAction(this.action)) {
+    if (this.action) {
+      const pageSnapshot = PageSnapshot.fromElement(frame).clone();
       const {visitCachedSnapshot: visitCachedSnapshot} = frame.delegate;
       frame.delegate.fetchResponseLoaded = fetchResponse => {
         if (frame.src) {
@@ -3532,7 +3663,8 @@ class FrameController {
             visitCachedSnapshot: visitCachedSnapshot,
             willRender: false,
             updateHistory: false,
-            restorationIdentifier: this.restorationIdentifier
+            restorationIdentifier: this.restorationIdentifier,
+            snapshot: pageSnapshot
           };
           if (this.action) options.action = this.action;
           session.visit(frame.src, options);
@@ -3541,11 +3673,15 @@ class FrameController {
     }
   }
   changeHistory() {
-    if (this.action && this.frame) {
+    if (this.action) {
       const method = getHistoryMethodForAction(this.action);
-      session.history.update(method, expandURL(this.frame.src || ""), this.restorationIdentifier);
+      session.history.update(method, expandURL(this.element.src || ""), this.restorationIdentifier);
     }
   }
+  async handleUnvisitableFrameResponse(fetchResponse) {
+    console.warn(`The response (${fetchResponse.statusCode}) from <turbo-frame id="${this.element.id}"> is performing a full page visit due to turbo-visit-control.`);
+    await this.visitResponse(fetchResponse.response);
+  }
   willHandleFrameMissingFromResponse(fetchResponse) {
     this.element.setAttribute("complete", "");
     const response = fetchResponse.response;
@@ -3566,6 +3702,14 @@ class FrameController {
     });
     return !event.defaultPrevented;
   }
+  handleFrameMissingFromResponse(fetchResponse) {
+    this.view.missing();
+    this.throwFrameMissingError(fetchResponse);
+  }
+  throwFrameMissingError(fetchResponse) {
+    const message = `The response (${fetchResponse.statusCode}) did not contain the expected <turbo-frame id="${this.element.id}"> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.`;
+    throw new TurboFrameMissingError(message);
+  }
   async visitResponse(response) {
     const wrapped = new FetchResponse(response);
     const responseHTML = await wrapped.responseHTML;
@@ -3671,17 +3815,6 @@ class FrameController {
     const root = (_a = meta === null || meta === void 0 ? void 0 : meta.content) !== null && _a !== void 0 ? _a : "/";
     return expandURL(root);
   }
-  frameAllowsVisitingLocation(target, {href: url}, originalEvent) {
-    const event = dispatch("turbo:click", {
-      target: target,
-      detail: {
-        url: url,
-        originalEvent: originalEvent
-      },
-      cancelable: true
-    });
-    return !event.defaultPrevented;
-  }
   isIgnoringChangesTo(attributeName) {
     return this.ignoredAttributes.has(attributeName);
   }
@@ -3971,7 +4104,9 @@ class TurboCableStreamSourceElement extends HTMLElement {
   async connectedCallback() {
     connectStreamSource(this);
     this.subscription = await subscribeTo(this.channel, {
-      received: this.dispatchMessageEvent.bind(this)
+      received: this.dispatchMessageEvent.bind(this),
+      connected: this.subscriptionConnected.bind(this),
+      disconnected: this.subscriptionDisconnected.bind(this)
     });
   }
   disconnectedCallback() {
@@ -3984,6 +4119,12 @@ class TurboCableStreamSourceElement extends HTMLElement {
     });
     return this.dispatchEvent(event);
   }
+  subscriptionConnected() {
+    this.setAttribute("connected", "");
+  }
+  subscriptionDisconnected() {
+    this.removeAttribute("connected");
+  }
   get channel() {
     const channel = this.getAttribute("channel");
     const signed_stream_name = this.getAttribute("signed-stream-name");
@@ -3997,18 +4138,21 @@ class TurboCableStreamSourceElement extends HTMLElement {
   }
 }
 
-customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement);
+if (customElements.get("turbo-cable-stream-source") === undefined) {
+  customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement);
+}
 
 function encodeMethodIntoRequestBody(event) {
   if (event.target instanceof HTMLFormElement) {
     const {target: form, detail: {fetchOptions: fetchOptions}} = event;
     form.addEventListener("turbo:submit-start", (({detail: {formSubmission: {submitter: submitter}}}) => {
-      const method = submitter && submitter.formMethod || fetchOptions.body && fetchOptions.body.get("_method") || form.getAttribute("method");
+      const body = isBodyInit(fetchOptions.body) ? fetchOptions.body : new URLSearchParams;
+      const method = determineFetchMethod(submitter, body, form);
       if (!/get/i.test(method)) {
         if (/post/i.test(method)) {
-          fetchOptions.body.delete("_method");
+          body.delete("_method");
         } else {
-          fetchOptions.body.set("_method", method);
+          body.set("_method", method);
         }
         fetchOptions.method = "post";
       }
@@ -4018,6 +4162,37 @@ function encodeMethodIntoRequestBody(event) {
   }
 }
 
+function determineFetchMethod(submitter, body, form) {
+  const formMethod = determineFormMethod(submitter);
+  const overrideMethod = body.get("_method");
+  const method = form.getAttribute("method") || "get";
+  if (typeof formMethod == "string") {
+    return formMethod;
+  } else if (typeof overrideMethod == "string") {
+    return overrideMethod;
+  } else {
+    return method;
+  }
+}
+
+function determineFormMethod(submitter) {
+  if (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) {
+    if (submitter.name === "_method") {
+      return submitter.value;
+    } else if (submitter.hasAttribute("formmethod")) {
+      return submitter.formMethod;
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+}
+
+function isBodyInit(body) {
+  return body instanceof FormData || body instanceof URLSearchParams;
+}
+
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
 var adapters = {