@hotwired/turbo 7.0.0-rc.5 → 7.1.0-rc.2

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*
-Turbo 7.0.0-rc.5
+Turbo 7.1.0-rc.1
 Copyright © 2021 Basecamp, LLC
  */
 (function () {
@@ -20,6 +20,58 @@ Copyright © 2021 Basecamp, LLC
     Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
 })();
 
+/**
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2019 Javan Makhmali
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+(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;
@@ -33,12 +85,20 @@ function clickCaptured(event) {
     }
 }
 (function () {
-    if ("SubmitEvent" in window)
-        return;
     if ("submitter" in Event.prototype)
         return;
+    let 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(Event.prototype, "submitter", {
+    Object.defineProperty(prototype, "submitter", {
         get() {
             if (this.type == "submit" && this.target instanceof HTMLFormElement) {
                 return submittersByForm.get(this.target);
@@ -157,6 +217,10 @@ function getAnchor(url) {
         return anchorMatch[1];
     }
 }
+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] || "";
 }
@@ -167,6 +231,9 @@ function isPrefixedBy(baseURL, url) {
     const prefix = getPrefix(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
@@ -289,6 +356,29 @@ 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) {
@@ -518,6 +608,9 @@ class FormSubmission {
         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") || "";
@@ -551,8 +644,20 @@ class FormSubmission {
             return 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, 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();
@@ -576,7 +681,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: { formSubmission: this } });
         this.delegate.formSubmissionStarted(this);
     }
@@ -606,7 +713,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({ formSubmission: this }, this.result) });
         this.delegate.formSubmissionFinished(this);
     }
@@ -682,10 +791,11 @@ class Snapshot {
 class FormInterceptor {
     constructor(delegate, element) {
         this.submitBubbled = ((event) => {
-            if (event.target instanceof HTMLFormElement) {
-                const form = event.target;
+            const form = event.target;
+            if (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);
@@ -900,10 +1010,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, reject });
     }
     get shouldRender() {
@@ -1279,7 +1390,9 @@ var VisitState;
 })(VisitState || (VisitState = {}));
 const defaultOptions = {
     action: "advance",
-    historyChanged: false
+    historyChanged: false,
+    visitCachedSnapshot: () => { },
+    willRender: true,
 };
 var SystemStatusCode;
 (function (SystemStatusCode) {
@@ -1299,13 +1412,16 @@ class Visit {
         this.delegate = delegate;
         this.location = location;
         this.restorationIdentifier = restorationIdentifier || uuid();
-        const { action, historyChanged, referrer, snapshotHTML, response } = Object.assign(Object.assign({}, defaultOptions), options);
+        const { action, historyChanged, referrer, snapshotHTML, response, visitCachedSnapshot, 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;
@@ -1407,7 +1523,7 @@ class Visit {
                 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();
                 }
@@ -1447,7 +1563,7 @@ class Visit {
                 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();
@@ -1457,7 +1573,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
@@ -1480,25 +1597,27 @@ class Visit {
     }
     async requestSucceededWithResponse(request, response) {
         const responseHTML = await response.responseHTML;
+        const { redirected, statusCode } = response;
         if (responseHTML == undefined) {
-            this.recordResponse({ statusCode: SystemStatusCode.contentTypeMismatch });
+            this.recordResponse({ statusCode: SystemStatusCode.contentTypeMismatch, redirected });
         }
         else {
             this.redirectedToLocation = response.redirected ? response.location : undefined;
-            this.recordResponse({ statusCode: response.statusCode, responseHTML });
+            this.recordResponse({ statusCode: statusCode, responseHTML, redirected });
         }
     }
     async requestFailedWithResponse(request, response) {
         const responseHTML = await response.responseHTML;
+        const { redirected, statusCode } = response;
         if (responseHTML == undefined) {
-            this.recordResponse({ statusCode: SystemStatusCode.contentTypeMismatch });
+            this.recordResponse({ statusCode: SystemStatusCode.contentTypeMismatch, redirected });
         }
         else {
-            this.recordResponse({ statusCode: response.statusCode, responseHTML });
+            this.recordResponse({ statusCode: statusCode, responseHTML, redirected });
         }
     }
     requestErrored(request, error) {
-        this.recordResponse({ statusCode: SystemStatusCode.networkFailure });
+        this.recordResponse({ statusCode: SystemStatusCode.networkFailure, redirected: false });
     }
     requestFinished() {
         this.finishRequest();
@@ -1555,12 +1674,12 @@ class Visit {
             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;
         }
     }
@@ -1710,7 +1829,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);
@@ -1754,12 +1873,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);
@@ -1768,6 +1886,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;
@@ -1925,7 +2050,12 @@ 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 = {}) {
@@ -1936,12 +2066,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) {
@@ -1974,8 +2099,9 @@ class Navigator {
                 if (formSubmission.method != FetchMethod.get) {
                     this.view.clearSnapshotCache();
                 }
-                const { statusCode } = fetchResponse;
-                const visitOptions = { response: { statusCode, responseHTML } };
+                const { statusCode, redirected } = fetchResponse;
+                const action = this.getActionForFormSubmission(formSubmission);
+                const visitOptions = { action, response: { statusCode, responseHTML, redirected } };
                 this.proposeVisit(fetchResponse.location, visitOptions);
             }
         }
@@ -2027,7 +2153,7 @@ class Navigator {
     }
     getActionForFormSubmission(formSubmission) {
         const { formElement, 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";
     }
 }
@@ -2221,7 +2347,9 @@ class PageRenderer extends Renderer {
         this.mergeHead();
     }
     async render() {
-        this.replaceBody();
+        if (this.willRender) {
+            this.replaceBody();
+        }
     }
     finishRendering() {
         super.finishRendering();
@@ -2359,8 +2487,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) {
@@ -2375,7 +2503,9 @@ class PageView extends View {
             this.delegate.viewWillCacheSnapshot();
             const { 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) {
@@ -2477,7 +2607,7 @@ class Session {
     }
     willFollowLinkToLocation(link, location) {
         return this.elementDriveEnabled(link)
-            && this.locationIsVisitable(location)
+            && locationIsVisitable(location, this.snapshot.rootLocation)
             && this.applicationAllowsFollowingLinkToLocation(link, location);
     }
     followedLinkToLocation(link, location) {
@@ -2485,14 +2615,24 @@ class Session {
         this.convertLinkWithMethodClickToFormSubmission(link) || this.visit(location.href, { action });
     }
     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 });
         }
         else {
@@ -2522,7 +2662,10 @@ class Session {
         this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
     }
     willSubmitForm(form, submitter) {
-        return this.elementDriveEnabled(form) && 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);
@@ -2578,6 +2721,7 @@ class Session {
         return dispatch("turbo:before-visit", { detail: { url: location.href }, cancelable: true });
     }
     notifyApplicationAfterVisitingLocation(location, action) {
+        markAsBusy(document.documentElement);
         return dispatch("turbo:visit", { detail: { url: location.href, action } });
     }
     notifyApplicationBeforeCachingSnapshot() {
@@ -2590,6 +2734,7 @@ class Session {
         return dispatch("turbo:render");
     }
     notifyApplicationAfterPageLoad(timing = {}) {
+        clearBusyState(document.documentElement);
         return dispatch("turbo:load", { detail: { url: this.location.href, timing } });
     }
     notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
@@ -2624,8 +2769,17 @@ 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;
@@ -2643,7 +2797,7 @@ const deprecatedLocationPropertyDescriptors = {
 };
 
 const session = new Session;
-const { navigator } = session;
+const { navigator: navigator$1 } = session;
 function start() {
     session.start();
 }
@@ -2668,10 +2822,13 @@ function clearCache() {
 function setProgressBarDelay(delay) {
     session.setProgressBarDelay(delay);
 }
+function setConfirmMethod(confirmMethod) {
+    FormSubmission.confirmMethod = confirmMethod;
+}
 
 var Turbo = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    navigator: navigator,
+    navigator: navigator$1,
     session: session,
     PageRenderer: PageRenderer,
     PageSnapshot: PageSnapshot,
@@ -2682,11 +2839,14 @@ var Turbo = /*#__PURE__*/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;
@@ -2746,7 +2906,6 @@ class FrameController {
                     this.appearanceObserver.stop();
                     await this.element.loaded;
                     this.hasBeenLoaded = true;
-                    session.frameLoaded(this.element);
                 }
                 catch (error) {
                     this.currentURL = previousURL;
@@ -2756,7 +2915,7 @@ class FrameController {
         }
     }
     async loadResponse(fetchResponse) {
-        if (fetchResponse.redirected) {
+        if (fetchResponse.redirected || (fetchResponse.succeeded && fetchResponse.isHTML)) {
             this.sourceURL = fetchResponse.response.url;
         }
         try {
@@ -2764,17 +2923,22 @@ class FrameController {
             if (html) {
                 const { 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) {
         this.loadSourceURL();
@@ -2800,20 +2964,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 } = this.formSubmission;
-            this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
-            this.formSubmission.start();
-        }
+        const { 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();
@@ -2831,14 +2990,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 }) {
+        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) {
@@ -2847,9 +3006,8 @@ class FrameController {
     formSubmissionErrored(formSubmission, error) {
         console.error(error);
     }
-    formSubmissionFinished(formSubmission) {
-        const frame = this.findFrameElement(formSubmission.formElement);
-        frame.removeAttribute("busy");
+    formSubmissionFinished({ formElement }) {
+        clearBusyState(formElement, this.findFrameElement(formElement));
     }
     allowsImmediateRender(snapshot, resume) {
         return true;
@@ -2859,10 +3017,14 @@ class FrameController {
     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, expandURL(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();
@@ -2870,12 +3032,27 @@ 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 } = new SnapshotSubstitution(frame);
+            frame.delegate.fetchResponseLoaded = (fetchResponse) => {
+                if (frame.src) {
+                    const { statusCode, redirected } = fetchResponse;
+                    const responseHTML = frame.ownerDocument.documentElement.outerHTML;
+                    const response = { statusCode, redirected, responseHTML };
+                    session.visit(frame.src, { action, response, 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) {
@@ -2896,8 +3073,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;
         }
@@ -2954,6 +3138,23 @@ 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 }) => {
+            var _a;
+            const { id, 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) {
     if (id != null) {
@@ -2974,6 +3175,7 @@ function activateElement(element, currentURL) {
         }
         if (element instanceof FrameElement) {
             element.connectedCallback();
+            element.disconnectedCallback();
             return element;
         }
     }
@@ -3144,4 +3346,4 @@ customElements.define("turbo-stream", StreamElement);
 window.Turbo = Turbo;
 start();
 
-export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator, registerAdapter, renderStreamMessage, session, setProgressBarDelay, start, visit };
+export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setProgressBarDelay, start, visit };