turbo-rails 0.8.3 → 1.0.1

data/app/assets/javascripts/turbo.js

@@ -14,6 +14,31 @@
   Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
 })();
 
+(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) {
@@ -160,6 +185,11 @@ function getAnchor(url) {
   }
 }
 
+function getAction(form, submitter) {
+  const action = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formaction")) || form.getAttribute("action") || form.action;
+  return expandURL(action);
+}
+
 function getExtension(url) {
   return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
 }
@@ -173,6 +203,10 @@ function isPrefixedBy(baseURL, url) {
   return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
 }
 
+function locationIsVisitable(location, rootLocation) {
+  return isPrefixedBy(location, rootLocation) && isHTML(location);
+}
+
 function getRequestURL(url) {
   const anchor = getAnchor(url);
   return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
@@ -308,6 +342,31 @@ function uuid() {
   })).join("");
 }
 
+function getAttribute(attributeName, ...elements) {
+  for (const value of elements.map((element => element === null || element === void 0 ? void 0 : element.getAttribute(attributeName)))) {
+    if (typeof value == "string") return value;
+  }
+  return null;
+}
+
+function markAsBusy(...elements) {
+  for (const element of elements) {
+    if (element.localName == "turbo-frame") {
+      element.setAttribute("busy", "");
+    }
+    element.setAttribute("aria-busy", "true");
+  }
+}
+
+function clearBusyState(...elements) {
+  for (const element of elements) {
+    if (element.localName == "turbo-frame") {
+      element.removeAttribute("busy");
+    }
+    element.removeAttribute("aria-busy");
+  }
+}
+
 var FetchMethod;
 
 (function(FetchMethod) {
@@ -344,12 +403,8 @@ class FetchRequest {
     this.delegate = delegate;
     this.method = method;
     this.headers = this.defaultHeaders;
-    if (this.isIdempotent) {
-      this.url = mergeFormDataEntries(location, [ ...body.entries() ]);
-    } else {
-      this.body = body;
-      this.url = location;
-    }
+    this.body = body;
+    this.url = location;
     this.target = target;
   }
   get location() {
@@ -407,7 +462,7 @@ class FetchRequest {
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
-      body: this.body,
+      body: this.isIdempotent ? null : this.body,
       signal: this.abortSignal,
       referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href
     };
@@ -429,7 +484,7 @@ class FetchRequest {
       cancelable: true,
       detail: {
         fetchOptions: fetchOptions,
-        url: this.url.href,
+        url: this.url,
         resume: this.resolveRequestPromise
       },
       target: this.target
@@ -438,20 +493,6 @@ class FetchRequest {
   }
 }
 
-function mergeFormDataEntries(url, entries) {
-  const currentSearchParams = new URLSearchParams(url.search);
-  for (const [name, value] of entries) {
-    if (value instanceof File) continue;
-    if (currentSearchParams.has(name)) {
-      currentSearchParams.delete(name);
-      url.searchParams.set(name, value);
-    } else {
-      url.searchParams.append(name, value);
-    }
-  }
-  return url;
-}
-
 class AppearanceObserver {
   constructor(delegate, element) {
     this.started = false;
@@ -553,9 +594,16 @@ class FormSubmission {
     this.formElement = formElement;
     this.submitter = submitter;
     this.formData = buildFormData(formElement, submitter);
+    this.location = expandURL(this.action);
+    if (this.method == FetchMethod.get) {
+      mergeFormDataEntries(this.location, [ ...this.body.entries() ]);
+    }
     this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
     this.mustRedirect = mustRedirect;
   }
+  static confirmMethod(message, element) {
+    return confirm(message);
+  }
   get method() {
     var _a;
     const method = ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formmethod")) || this.formElement.getAttribute("method") || "";
@@ -566,9 +614,6 @@ class FormSubmission {
     const formElementAction = typeof this.formElement.action === "string" ? this.formElement.action : null;
     return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.getAttribute("action") || formElementAction || "";
   }
-  get location() {
-    return expandURL(this.action);
-  }
   get body() {
     if (this.enctype == FormEnctype.urlEncoded || this.method == FetchMethod.get) {
       return new URLSearchParams(this.stringFormData);
@@ -586,8 +631,20 @@ class FormSubmission {
   get stringFormData() {
     return [ ...this.formData ].reduce(((entries, [name, value]) => entries.concat(typeof value == "string" ? [ [ name, value ] ] : [])), []);
   }
+  get confirmationMessage() {
+    return this.formElement.getAttribute("data-turbo-confirm");
+  }
+  get needsConfirmation() {
+    return this.confirmationMessage !== null;
+  }
   async start() {
     const {initialized: initialized, requesting: requesting} = FormSubmissionState;
+    if (this.needsConfirmation) {
+      const answer = FormSubmission.confirmMethod(this.confirmationMessage, this.formElement);
+      if (!answer) {
+        return;
+      }
+    }
     if (this.state == initialized) {
       this.state = requesting;
       return this.fetchRequest.perform();
@@ -611,7 +668,9 @@ class FormSubmission {
     }
   }
   requestStarted(request) {
+    var _a;
     this.state = FormSubmissionState.waiting;
+    (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.setAttribute("disabled", "");
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: {
@@ -656,7 +715,9 @@ class FormSubmission {
     this.delegate.formSubmissionErrored(this, error);
   }
   requestFinished(request) {
+    var _a;
     this.state = FormSubmissionState.stopped;
+    (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.removeAttribute("disabled");
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: Object.assign({
@@ -700,6 +761,16 @@ function responseSucceededWithoutRedirect(response) {
   return response.statusCode == 200 && !response.redirected;
 }
 
+function mergeFormDataEntries(url, entries) {
+  const searchParams = new URLSearchParams;
+  for (const [name, value] of entries) {
+    if (value instanceof File) continue;
+    searchParams.append(name, value);
+  }
+  url.search = searchParams.toString();
+  return url;
+}
+
 class Snapshot {
   constructor(element) {
     this.element = element;
@@ -742,9 +813,10 @@ class FormInterceptor {
   constructor(delegate, element) {
     this.submitBubbled = event => {
       const form = event.target;
-      if (form instanceof HTMLFormElement && form.closest("turbo-frame, html") == this.element) {
+      if (!event.defaultPrevented && form instanceof HTMLFormElement && form.closest("turbo-frame, html") == this.element) {
         const submitter = event.submitter || undefined;
-        if (this.delegate.shouldInterceptFormSubmission(form, submitter)) {
+        const method = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formmethod")) || form.method;
+        if (method != "dialog" && this.delegate.shouldInterceptFormSubmission(form, submitter)) {
           event.preventDefault();
           event.stopImmediatePropagation();
           this.delegate.formSubmissionIntercepted(form, submitter);
@@ -955,10 +1027,11 @@ function createPlaceholderForPermanentElement(permanentElement) {
 }
 
 class Renderer {
-  constructor(currentSnapshot, newSnapshot, isPreview) {
+  constructor(currentSnapshot, newSnapshot, isPreview, willRender = true) {
     this.currentSnapshot = currentSnapshot;
     this.newSnapshot = newSnapshot;
     this.isPreview = isPreview;
+    this.willRender = willRender;
     this.promise = new Promise(((resolve, reject) => this.resolvingFunctions = {
       resolve: resolve,
       reject: reject
@@ -1340,7 +1413,9 @@ var VisitState;
 
 const defaultOptions = {
   action: "advance",
-  historyChanged: false
+  historyChanged: false,
+  visitCachedSnapshot: () => {},
+  willRender: true
 };
 
 var SystemStatusCode;
@@ -1363,13 +1438,16 @@ class Visit {
     this.delegate = delegate;
     this.location = location;
     this.restorationIdentifier = restorationIdentifier || uuid();
-    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshotHTML: snapshotHTML, response: response} = Object.assign(Object.assign({}, defaultOptions), options);
+    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender} = Object.assign(Object.assign({}, defaultOptions), options);
     this.action = action;
     this.historyChanged = historyChanged;
     this.referrer = referrer;
     this.snapshotHTML = snapshotHTML;
     this.response = response;
     this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
+    this.visitCachedSnapshot = visitCachedSnapshot;
+    this.willRender = willRender;
+    this.scrolled = !willRender;
   }
   get adapter() {
     return this.delegate.adapter;
@@ -1468,7 +1546,7 @@ class Visit {
         this.cacheSnapshot();
         if (this.view.renderPromise) await this.view.renderPromise;
         if (isSuccessful(statusCode) && responseHTML != null) {
-          await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML));
+          await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML), false, this.willRender);
           this.adapter.visitRendered(this);
           this.complete();
         } else {
@@ -1505,7 +1583,7 @@ class Visit {
           this.adapter.visitRendered(this);
         } else {
           if (this.view.renderPromise) await this.view.renderPromise;
-          await this.view.renderPage(snapshot, isPreview);
+          await this.view.renderPage(snapshot, isPreview, this.willRender);
           this.adapter.visitRendered(this);
           if (!isPreview) {
             this.complete();
@@ -1515,7 +1593,8 @@ class Visit {
     }
   }
   followRedirect() {
-    if (this.redirectedToLocation && !this.followedRedirect) {
+    var _a;
+    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
@@ -1537,34 +1616,41 @@ class Visit {
   requestPreventedHandlingResponse(request, response) {}
   async requestSucceededWithResponse(request, response) {
     const responseHTML = await response.responseHTML;
+    const {redirected: redirected, statusCode: statusCode} = response;
     if (responseHTML == undefined) {
       this.recordResponse({
-        statusCode: SystemStatusCode.contentTypeMismatch
+        statusCode: SystemStatusCode.contentTypeMismatch,
+        redirected: redirected
       });
     } else {
       this.redirectedToLocation = response.redirected ? response.location : undefined;
       this.recordResponse({
-        statusCode: response.statusCode,
-        responseHTML: responseHTML
+        statusCode: statusCode,
+        responseHTML: responseHTML,
+        redirected: redirected
       });
     }
   }
   async requestFailedWithResponse(request, response) {
     const responseHTML = await response.responseHTML;
+    const {redirected: redirected, statusCode: statusCode} = response;
     if (responseHTML == undefined) {
       this.recordResponse({
-        statusCode: SystemStatusCode.contentTypeMismatch
+        statusCode: SystemStatusCode.contentTypeMismatch,
+        redirected: redirected
       });
     } else {
       this.recordResponse({
-        statusCode: response.statusCode,
-        responseHTML: responseHTML
+        statusCode: statusCode,
+        responseHTML: responseHTML,
+        redirected: redirected
       });
     }
   }
   requestErrored(request, error) {
     this.recordResponse({
-      statusCode: SystemStatusCode.networkFailure
+      statusCode: SystemStatusCode.networkFailure,
+      redirected: false
     });
   }
   requestFinished() {
@@ -1622,12 +1708,12 @@ class Visit {
     } else if (this.action == "restore") {
       return !this.hasCachedSnapshot();
     } else {
-      return true;
+      return this.willRender;
     }
   }
   cacheSnapshot() {
     if (!this.snapshotCached) {
-      this.view.cacheSnapshot();
+      this.view.cacheSnapshot().then((snapshot => snapshot && this.visitCachedSnapshot(snapshot)));
       this.snapshotCached = true;
     }
   }
@@ -1664,10 +1750,10 @@ class BrowserAdapter {
     this.navigator.startVisit(location, uuid(), options);
   }
   visitStarted(visit) {
+    visit.loadCachedSnapshot();
     visit.issueRequest();
     visit.changeHistory();
     visit.goToSamePageAnchor();
-    visit.loadCachedSnapshot();
   }
   visitRequestStarted(visit) {
     this.progressBar.setValue(0);
@@ -1775,7 +1861,7 @@ class FormSubmitObserver {
         const form = event.target instanceof HTMLFormElement ? event.target : undefined;
         const submitter = event.submitter || undefined;
         if (form) {
-          const method = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formmethod")) || form.method;
+          const method = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formmethod")) || form.getAttribute("method");
           if (method != "dialog" && this.delegate.willSubmitForm(form, submitter)) {
             event.preventDefault();
             this.delegate.formSubmitted(form, submitter);
@@ -1819,12 +1905,11 @@ class FrameRedirector {
   linkClickIntercepted(element, url) {
     const frame = this.findFrameElement(element);
     if (frame) {
-      frame.setAttribute("reloadable", "");
-      frame.src = url;
+      frame.delegate.linkClickIntercepted(element, url);
     }
   }
   shouldInterceptFormSubmission(element, submitter) {
-    return this.shouldRedirect(element, submitter);
+    return this.shouldSubmit(element, submitter);
   }
   formSubmissionIntercepted(element, submitter) {
     const frame = this.findFrameElement(element, submitter);
@@ -1833,6 +1918,13 @@ class FrameRedirector {
       frame.delegate.formSubmissionIntercepted(element, submitter);
     }
   }
+  shouldSubmit(form, submitter) {
+    var _a;
+    const action = getAction(form, submitter);
+    const meta = this.element.ownerDocument.querySelector(`meta[name="turbo-root"]`);
+    const rootLocation = expandURL((_a = meta === null || meta === void 0 ? void 0 : meta.content) !== null && _a !== void 0 ? _a : "/");
+    return this.shouldRedirect(form, submitter) && locationIsVisitable(action, rootLocation);
+  }
   shouldRedirect(element, submitter) {
     const frame = this.findFrameElement(element, submitter);
     return frame ? frame != element.closest("turbo-frame") : false;
@@ -1988,7 +2080,11 @@ class Navigator {
   }
   proposeVisit(location, options = {}) {
     if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
-      this.delegate.visitProposedToLocation(location, options);
+      if (locationIsVisitable(location, this.view.snapshot.rootLocation)) {
+        this.delegate.visitProposedToLocation(location, options);
+      } else {
+        window.location.href = location.toString();
+      }
     }
   }
   startVisit(locatable, restorationIdentifier, options = {}) {
@@ -2001,13 +2097,7 @@ class Navigator {
   submitForm(form, submitter) {
     this.stop();
     this.formSubmission = new FormSubmission(this, form, submitter, true);
-    if (this.formSubmission.isIdempotent) {
-      this.proposeVisit(this.formSubmission.fetchRequest.url, {
-        action: this.getActionForFormSubmission(this.formSubmission)
-      });
-    } else {
-      this.formSubmission.start();
-    }
+    this.formSubmission.start();
   }
   stop() {
     if (this.formSubmission) {
@@ -2040,11 +2130,14 @@ class Navigator {
         if (formSubmission.method != FetchMethod.get) {
           this.view.clearSnapshotCache();
         }
-        const {statusCode: statusCode} = fetchResponse;
+        const {statusCode: statusCode, redirected: redirected} = fetchResponse;
+        const action = this.getActionForFormSubmission(formSubmission);
         const visitOptions = {
+          action: action,
           response: {
             statusCode: statusCode,
-            responseHTML: responseHTML
+            responseHTML: responseHTML,
+            redirected: redirected
           }
         };
         this.proposeVisit(fetchResponse.location, visitOptions);
@@ -2095,7 +2188,7 @@ class Navigator {
   }
   getActionForFormSubmission(formSubmission) {
     const {formElement: formElement, submitter: submitter} = formSubmission;
-    const action = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-action")) || formElement.getAttribute("data-turbo-action");
+    const action = getAttribute("data-turbo-action", submitter, formElement);
     return isAction(action) ? action : "advance";
   }
 }
@@ -2295,7 +2388,9 @@ class PageRenderer extends Renderer {
     this.mergeHead();
   }
   async render() {
-    this.replaceBody();
+    if (this.willRender) {
+      this.replaceBody();
+    }
   }
   finishRendering() {
     super.finishRendering();
@@ -2431,8 +2526,8 @@ class PageView extends View {
     this.snapshotCache = new SnapshotCache(10);
     this.lastRenderedLocation = new URL(location.href);
   }
-  renderPage(snapshot, isPreview = false) {
-    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
+  renderPage(snapshot, isPreview = false, willRender = true) {
+    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview, willRender);
     return this.render(renderer);
   }
   renderError(snapshot) {
@@ -2447,7 +2542,9 @@ class PageView extends View {
       this.delegate.viewWillCacheSnapshot();
       const {snapshot: snapshot, lastRenderedLocation: location} = this;
       await nextEventLoopTick();
-      this.snapshotCache.put(location, snapshot.clone());
+      const cachedSnapshot = snapshot.clone();
+      this.snapshotCache.put(location, cachedSnapshot);
+      return cachedSnapshot;
     }
   }
   getCachedSnapshotForLocation(location) {
@@ -2552,7 +2649,7 @@ class Session {
     });
   }
   willFollowLinkToLocation(link, location) {
-    return this.elementDriveEnabled(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+    return this.elementDriveEnabled(link) && locationIsVisitable(location, this.snapshot.rootLocation) && this.applicationAllowsFollowingLinkToLocation(link, location);
   }
   followedLinkToLocation(link, location) {
     const action = this.getActionForLink(link);
@@ -2561,14 +2658,23 @@ class Session {
     });
   }
   convertLinkWithMethodClickToFormSubmission(link) {
-    var _a;
     const linkMethod = link.getAttribute("data-turbo-method");
     if (linkMethod) {
       const form = document.createElement("form");
       form.method = linkMethod;
       form.action = link.getAttribute("href") || "undefined";
       form.hidden = true;
-      (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
+      if (link.hasAttribute("data-turbo-confirm")) {
+        form.setAttribute("data-turbo-confirm", link.getAttribute("data-turbo-confirm"));
+      }
+      const frame = this.getTargetFrameForLink(link);
+      if (frame) {
+        form.setAttribute("data-turbo-frame", frame);
+        form.addEventListener("turbo:submit-start", (() => form.remove()));
+      } else {
+        form.addEventListener("submit", (() => form.remove()));
+      }
+      document.body.appendChild(form);
       return dispatch("submit", {
         cancelable: true,
         target: form
@@ -2600,7 +2706,8 @@ class Session {
     this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
   }
   willSubmitForm(form, submitter) {
-    return this.elementDriveEnabled(form) && (!submitter || this.elementDriveEnabled(submitter));
+    const action = getAction(form, submitter);
+    return this.elementDriveEnabled(form) && (!submitter || this.elementDriveEnabled(submitter)) && locationIsVisitable(expandURL(action), this.snapshot.rootLocation);
   }
   formSubmitted(form, submitter) {
     this.navigator.submitForm(form, submitter);
@@ -2667,6 +2774,7 @@ class Session {
     });
   }
   notifyApplicationAfterVisitingLocation(location, action) {
+    markAsBusy(document.documentElement);
     return dispatch("turbo:visit", {
       detail: {
         url: location.href,
@@ -2690,6 +2798,7 @@ class Session {
     return dispatch("turbo:render");
   }
   notifyApplicationAfterPageLoad(timing = {}) {
+    clearBusyState(document.documentElement);
     return dispatch("turbo:load", {
       detail: {
         url: this.location.href,
@@ -2737,8 +2846,16 @@ class Session {
     const action = link.getAttribute("data-turbo-action");
     return isAction(action) ? action : "advance";
   }
-  locationIsVisitable(location) {
-    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
+  getTargetFrameForLink(link) {
+    const frame = link.getAttribute("data-turbo-frame");
+    if (frame) {
+      return frame;
+    } else {
+      const container = link.closest("turbo-frame");
+      if (container) {
+        return container.id;
+      }
+    }
   }
   get snapshot() {
     return this.view.snapshot;
@@ -2793,6 +2910,10 @@ function setProgressBarDelay(delay) {
   session.setProgressBarDelay(delay);
 }
 
+function setConfirmMethod(confirmMethod) {
+  FormSubmission.confirmMethod = confirmMethod;
+}
+
 var Turbo = Object.freeze({
   __proto__: null,
   navigator: navigator$1,
@@ -2806,11 +2927,14 @@ var Turbo = Object.freeze({
   disconnectStreamSource: disconnectStreamSource,
   renderStreamMessage: renderStreamMessage,
   clearCache: clearCache,
-  setProgressBarDelay: setProgressBarDelay
+  setProgressBarDelay: setProgressBarDelay,
+  setConfirmMethod: setConfirmMethod
 });
 
 class FrameController {
   constructor(element) {
+    this.fetchResponseLoaded = fetchResponse => {};
+    this.currentFetchRequest = null;
     this.resolveVisitPromise = () => {};
     this.connected = false;
     this.hasBeenLoaded = false;
@@ -2865,11 +2989,10 @@ class FrameController {
       this.currentURL = this.sourceURL;
       if (this.sourceURL) {
         try {
-          this.element.loaded = this.visit(this.sourceURL);
+          this.element.loaded = this.visit(expandURL(this.sourceURL));
           this.appearanceObserver.stop();
           await this.element.loaded;
           this.hasBeenLoaded = true;
-          session.frameLoaded(this.element);
         } catch (error) {
           this.currentURL = previousURL;
           throw error;
@@ -2878,7 +3001,7 @@ class FrameController {
     }
   }
   async loadResponse(fetchResponse) {
-    if (fetchResponse.redirected) {
+    if (fetchResponse.redirected || fetchResponse.succeeded && fetchResponse.isHTML) {
       this.sourceURL = fetchResponse.response.url;
     }
     try {
@@ -2886,14 +3009,18 @@ class FrameController {
       if (html) {
         const {body: body} = parseHTMLDocument(html);
         const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
-        const renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+        const renderer = new FrameRenderer(this.view.snapshot, snapshot, false, false);
         if (this.view.renderPromise) await this.view.renderPromise;
         await this.view.render(renderer);
         session.frameRendered(fetchResponse, this.element);
+        session.frameLoaded(this.element);
+        this.fetchResponseLoaded(fetchResponse);
       }
     } catch (error) {
       console.error(error);
       this.view.invalidate();
+    } finally {
+      this.fetchResponseLoaded = () => {};
     }
   }
   elementAppearedInViewport(element) {
@@ -2919,19 +3046,15 @@ class FrameController {
     }
     this.reloadable = false;
     this.formSubmission = new FormSubmission(this, element, submitter);
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href, submitter);
-    } else {
-      const {fetchRequest: fetchRequest} = this.formSubmission;
-      this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
-      this.formSubmission.start();
-    }
+    const {fetchRequest: fetchRequest} = this.formSubmission;
+    this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+    this.formSubmission.start();
   }
   prepareHeadersForRequest(headers, request) {
     headers["Turbo-Frame"] = this.id;
   }
   requestStarted(request) {
-    this.element.setAttribute("busy", "");
+    markAsBusy(this.element);
   }
   requestPreventedHandlingResponse(request, response) {
     this.resolveVisitPromise();
@@ -2949,14 +3072,14 @@ class FrameController {
     this.resolveVisitPromise();
   }
   requestFinished(request) {
-    this.element.removeAttribute("busy");
+    clearBusyState(this.element);
   }
-  formSubmissionStarted(formSubmission) {
-    const frame = this.findFrameElement(formSubmission.formElement);
-    frame.setAttribute("busy", "");
+  formSubmissionStarted({formElement: formElement}) {
+    markAsBusy(formElement, this.findFrameElement(formElement));
   }
   formSubmissionSucceededWithResponse(formSubmission, response) {
     const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter);
+    this.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
     frame.delegate.loadResponse(response);
   }
   formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
@@ -2965,9 +3088,8 @@ class FrameController {
   formSubmissionErrored(formSubmission, error) {
     console.error(error);
   }
-  formSubmissionFinished(formSubmission) {
-    const frame = this.findFrameElement(formSubmission.formElement);
-    frame.removeAttribute("busy");
+  formSubmissionFinished({formElement: formElement}) {
+    clearBusyState(formElement, this.findFrameElement(formElement));
   }
   allowsImmediateRender(snapshot, resume) {
     return true;
@@ -2975,10 +3097,14 @@ class FrameController {
   viewRenderedSnapshot(snapshot, isPreview) {}
   viewInvalidated() {}
   async visit(url) {
-    const request = new FetchRequest(this, FetchMethod.get, expandURL(url), undefined, this.element);
+    var _a;
+    const request = new FetchRequest(this, FetchMethod.get, url, new URLSearchParams, this.element);
+    (_a = this.currentFetchRequest) === null || _a === void 0 ? void 0 : _a.cancel();
+    this.currentFetchRequest = request;
     return new Promise((resolve => {
       this.resolveVisitPromise = () => {
         this.resolveVisitPromise = () => {};
+        this.currentFetchRequest = null;
         resolve();
       };
       request.perform();
@@ -2986,12 +3112,36 @@ class FrameController {
   }
   navigateFrame(element, url, submitter) {
     const frame = this.findFrameElement(element, submitter);
+    this.proposeVisitIfNavigatedWithAction(frame, element, submitter);
     frame.setAttribute("reloadable", "");
     frame.src = url;
   }
+  proposeVisitIfNavigatedWithAction(frame, element, submitter) {
+    const action = getAttribute("data-turbo-action", submitter, element, frame);
+    if (isAction(action)) {
+      const {visitCachedSnapshot: visitCachedSnapshot} = new SnapshotSubstitution(frame);
+      frame.delegate.fetchResponseLoaded = fetchResponse => {
+        if (frame.src) {
+          const {statusCode: statusCode, redirected: redirected} = fetchResponse;
+          const responseHTML = frame.ownerDocument.documentElement.outerHTML;
+          const response = {
+            statusCode: statusCode,
+            redirected: redirected,
+            responseHTML: responseHTML
+          };
+          session.visit(frame.src, {
+            action: action,
+            response: response,
+            visitCachedSnapshot: visitCachedSnapshot,
+            willRender: false
+          });
+        }
+      };
+    }
+  }
   findFrameElement(element, submitter) {
     var _a;
-    const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+    const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
     return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
   }
   async extractForeignFrameElement(container) {
@@ -3011,8 +3161,15 @@ class FrameController {
     }
     return new FrameElement;
   }
+  formActionIsVisitable(form, submitter) {
+    const action = getAction(form, submitter);
+    return locationIsVisitable(expandURL(action), this.rootLocation);
+  }
   shouldInterceptNavigation(element, submitter) {
-    const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+    const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
+    if (element instanceof HTMLFormElement && !this.formActionIsVisitable(element, submitter)) {
+      return false;
+    }
     if (!this.enabled || id == "_top") {
       return false;
     }
@@ -3068,6 +3225,24 @@ class FrameController {
   get isActive() {
     return this.element.isActive && this.connected;
   }
+  get rootLocation() {
+    var _a;
+    const meta = this.element.ownerDocument.querySelector(`meta[name="turbo-root"]`);
+    const root = (_a = meta === null || meta === void 0 ? void 0 : meta.content) !== null && _a !== void 0 ? _a : "/";
+    return expandURL(root);
+  }
+}
+
+class SnapshotSubstitution {
+  constructor(element) {
+    this.visitCachedSnapshot = ({element: element}) => {
+      var _a;
+      const {id: id, clone: clone} = this;
+      (_a = element.querySelector("#" + id)) === null || _a === void 0 ? void 0 : _a.replaceWith(clone);
+    };
+    this.clone = element.cloneNode(true);
+    this.id = element.id;
+  }
 }
 
 function getFrameElementById(id) {
@@ -3090,6 +3265,7 @@ function activateElement(element, currentURL) {
     }
     if (element instanceof FrameElement) {
       element.connectedCallback();
+      element.disconnectedCallback();
       return element;
     }
   }
@@ -3274,6 +3450,7 @@ var turbo_es2017Esm = Object.freeze({
   registerAdapter: registerAdapter,
   renderStreamMessage: renderStreamMessage,
   session: session,
+  setConfirmMethod: setConfirmMethod,
   setProgressBarDelay: setProgressBarDelay,
   start: start,
   visit: visit
@@ -3356,8 +3533,6 @@ const now = () => (new Date).getTime();
 
 const secondsSince = time => (now() - time) / 1e3;
 
-const clamp = (number, min, max) => Math.max(min, Math.min(max, number));
-
 class ConnectionMonitor {
   constructor(connection) {
     this.visibilityDidChange = this.visibilityDidChange.bind(this);
@@ -3370,7 +3545,7 @@ class ConnectionMonitor {
       delete this.stoppedAt;
       this.startPolling();
       addEventListener("visibilitychange", this.visibilityDidChange);
-      logger.log(`ConnectionMonitor started. pollInterval = ${this.getPollInterval()} ms`);
+      logger.log(`ConnectionMonitor started. stale threshold = ${this.constructor.staleThreshold} s`);
     }
   }
   stop() {
@@ -3411,24 +3586,29 @@ class ConnectionMonitor {
     }), this.getPollInterval());
   }
   getPollInterval() {
-    const {min: min, max: max, multiplier: multiplier} = this.constructor.pollInterval;
-    const interval = multiplier * Math.log(this.reconnectAttempts + 1);
-    return Math.round(clamp(interval, min, max) * 1e3);
+    const {staleThreshold: staleThreshold, reconnectionBackoffRate: reconnectionBackoffRate} = this.constructor;
+    const backoff = Math.pow(1 + reconnectionBackoffRate, Math.min(this.reconnectAttempts, 10));
+    const jitterMax = this.reconnectAttempts === 0 ? 1 : reconnectionBackoffRate;
+    const jitter = jitterMax * Math.random();
+    return staleThreshold * 1e3 * backoff * (1 + jitter);
   }
   reconnectIfStale() {
     if (this.connectionIsStale()) {
-      logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, pollInterval = ${this.getPollInterval()} ms, time disconnected = ${secondsSince(this.disconnectedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`);
+      logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, time stale = ${secondsSince(this.refreshedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`);
       this.reconnectAttempts++;
       if (this.disconnectedRecently()) {
-        logger.log("ConnectionMonitor skipping reopening recent disconnect");
+        logger.log(`ConnectionMonitor skipping reopening recent disconnect. time disconnected = ${secondsSince(this.disconnectedAt)} s`);
       } else {
         logger.log("ConnectionMonitor reopening");
         this.connection.reopen();
       }
     }
   }
+  get refreshedAt() {
+    return this.pingedAt ? this.pingedAt : this.startedAt;
+  }
   connectionIsStale() {
-    return secondsSince(this.pingedAt ? this.pingedAt : this.startedAt) > this.constructor.staleThreshold;
+    return secondsSince(this.refreshedAt) > this.constructor.staleThreshold;
   }
   disconnectedRecently() {
     return this.disconnectedAt && secondsSince(this.disconnectedAt) < this.constructor.staleThreshold;
@@ -3445,14 +3625,10 @@ class ConnectionMonitor {
   }
 }
 
-ConnectionMonitor.pollInterval = {
-  min: 3,
-  max: 30,
-  multiplier: 5
-};
-
 ConnectionMonitor.staleThreshold = 6;
 
+ConnectionMonitor.reconnectionBackoffRate = .15;
+
 var INTERNAL = {
   message_types: {
     welcome: "welcome",
@@ -3595,6 +3771,7 @@ Connection.prototype.events = {
       return this.monitor.recordPing();
 
      case message_types.confirmation:
+      this.subscriptions.confirmSubscription(identifier);
       return this.subscriptions.notify(identifier, "connected");
 
      case message_types.rejection:
@@ -3662,9 +3839,47 @@ class Subscription {
   }
 }
 
+class SubscriptionGuarantor {
+  constructor(subscriptions) {
+    this.subscriptions = subscriptions;
+    this.pendingSubscriptions = [];
+  }
+  guarantee(subscription) {
+    if (this.pendingSubscriptions.indexOf(subscription) == -1) {
+      logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`);
+      this.pendingSubscriptions.push(subscription);
+    } else {
+      logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`);
+    }
+    this.startGuaranteeing();
+  }
+  forget(subscription) {
+    logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`);
+    this.pendingSubscriptions = this.pendingSubscriptions.filter((s => s !== subscription));
+  }
+  startGuaranteeing() {
+    this.stopGuaranteeing();
+    this.retrySubscribing();
+  }
+  stopGuaranteeing() {
+    clearTimeout(this.retryTimeout);
+  }
+  retrySubscribing() {
+    this.retryTimeout = setTimeout((() => {
+      if (this.subscriptions && typeof this.subscriptions.subscribe === "function") {
+        this.pendingSubscriptions.map((subscription => {
+          logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`);
+          this.subscriptions.subscribe(subscription);
+        }));
+      }
+    }), 500);
+  }
+}
+
 class Subscriptions {
   constructor(consumer) {
     this.consumer = consumer;
+    this.guarantor = new SubscriptionGuarantor(this);
     this.subscriptions = [];
   }
   create(channelName, mixin) {
@@ -3679,7 +3894,7 @@ class Subscriptions {
     this.subscriptions.push(subscription);
     this.consumer.ensureActiveConnection();
     this.notify(subscription, "initialized");
-    this.sendCommand(subscription, "subscribe");
+    this.subscribe(subscription);
     return subscription;
   }
   remove(subscription) {
@@ -3697,6 +3912,7 @@ class Subscriptions {
     }));
   }
   forget(subscription) {
+    this.guarantor.forget(subscription);
     this.subscriptions = this.subscriptions.filter((s => s !== subscription));
     return subscription;
   }
@@ -3704,7 +3920,7 @@ class Subscriptions {
     return this.subscriptions.filter((s => s.identifier === identifier));
   }
   reload() {
-    return this.subscriptions.map((subscription => this.sendCommand(subscription, "subscribe")));
+    return this.subscriptions.map((subscription => this.subscribe(subscription)));
   }
   notifyAll(callbackName, ...args) {
     return this.subscriptions.map((subscription => this.notify(subscription, callbackName, ...args)));
@@ -3718,6 +3934,15 @@ class Subscriptions {
     }
     return subscriptions.map((subscription => typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined));
   }
+  subscribe(subscription) {
+    if (this.sendCommand(subscription, "subscribe")) {
+      this.guarantor.guarantee(subscription);
+    }
+  }
+  confirmSubscription(identifier) {
+    logger.log(`Subscription confirmed ${identifier}`);
+    this.findAll(identifier).map((subscription => this.guarantor.forget(subscription)));
+  }
   sendCommand(subscription, command) {
     const {identifier: identifier} = subscription;
     return this.consumer.send({
@@ -3788,6 +4013,7 @@ var index = Object.freeze({
   INTERNAL: INTERNAL,
   Subscription: Subscription,
   Subscriptions: Subscriptions,
+  SubscriptionGuarantor: SubscriptionGuarantor,
   adapters: adapters,
   createWebSocketURL: createWebSocketURL,
   logger: logger,