@hotwired/turbo 7.2.4 → 7.3.0

package/dist/turbo.es2017-esm.js

@@ -1,6 +1,6 @@
 /*
-Turbo 7.2.4
-Copyright © 2022 37signals LLC
+Turbo 7.3.0
+Copyright © 2023 37signals LLC
  */
 (function () {
     if (window.Reflect === undefined ||
@@ -87,16 +87,13 @@ 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", {
         get() {
@@ -113,14 +110,14 @@ var FrameLoadingStyle;
     FrameLoadingStyle["lazy"] = "lazy";
 })(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();
     }
@@ -307,10 +304,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;
@@ -341,6 +334,7 @@ function dispatch(eventName, { target, cancelable, detail } = {}) {
     const event = new CustomEvent(eventName, {
         cancelable,
         bubbles: true,
+        composed: true,
         detail,
     });
     if (target && target.isConnected) {
@@ -440,6 +434,9 @@ function getHistoryMethodForAction(action) {
             return history.pushState;
     }
 }
+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;
@@ -461,6 +458,13 @@ function setMetaContent(name, content) {
     element.setAttribute("content", 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) {
@@ -508,9 +512,8 @@ class FetchRequest {
         this.abortController.abort();
     }
     async perform() {
-        var _a, _b;
         const { 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);
@@ -554,7 +557,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,
         };
@@ -564,8 +567,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;
@@ -625,9 +628,6 @@ class AppearanceObserver {
 }
 
 class StreamMessage {
-    constructor(fragment) {
-        this.fragment = importStreamElements(fragment);
-    }
     static wrap(message) {
         if (typeof message == "string") {
             return new this(createDocumentFragment(message));
@@ -636,6 +636,9 @@ class StreamMessage {
             return message;
         }
     }
+    constructor(fragment) {
+        this.fragment = importStreamElements(fragment);
+    }
 }
 StreamMessage.contentType = "text/vnd.turbo-stream.html";
 function importStreamElements(fragment) {
@@ -675,6 +678,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;
@@ -688,9 +694,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") || "";
@@ -718,8 +721,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]) => {
@@ -748,11 +751,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)) {
@@ -763,6 +766,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: { formSubmission: this },
@@ -798,17 +802,46 @@ 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({ formSubmission: this }, this.result),
         });
         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");
     }
 }
 function buildFormData(formElement, submitter) {
@@ -940,12 +973,17 @@ function submissionDoesNotDismissDialog(form, submitter) {
     return method != "dialog";
 }
 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 {
@@ -1043,8 +1081,8 @@ 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);
@@ -1138,20 +1176,23 @@ class LinkClickObserver {
             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") || "");
     }
 }
 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 {
@@ -1170,10 +1211,14 @@ class FormLinkClickObserver {
             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, name, 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)
@@ -1181,7 +1226,7 @@ class FormLinkClickObserver {
         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");
@@ -1198,16 +1243,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];
@@ -1274,8 +1319,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;
@@ -1314,10 +1359,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();
@@ -1330,6 +1371,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;
     }
@@ -1388,18 +1433,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 {
@@ -1417,6 +1450,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;
@@ -1587,10 +1632,6 @@ function elementWithoutNonce(element) {
 }
 
 class PageSnapshot extends Snapshot {
-    constructor(element, headSnapshot) {
-        super(element);
-        this.headSnapshot = headSnapshot;
-    }
     static fromHTMLString(html = "") {
         return this.fromDocument(parseHTMLDocument(html));
     }
@@ -1600,6 +1641,10 @@ class PageSnapshot extends Snapshot {
     static fromDocument({ head, 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");
@@ -1860,6 +1905,8 @@ class Visit {
             this.adapter.visitProposedToLocation(this.redirectedToLocation, {
                 action: "replace",
                 response: this.response,
+                shouldCacheSnapshot: false,
+                willRender: false,
             });
             this.followedRedirect = true;
         }
@@ -1874,7 +1921,7 @@ class Visit {
             });
         }
     }
-    prepareHeadersForRequest(headers, request) {
+    prepareRequest(request) {
         if (this.acceptsStreamResponse) {
             request.acceptResponseType(StreamMessage.contentType);
         }
@@ -2097,10 +2144,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();
             }
         });
@@ -2108,15 +2156,25 @@ 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];
+    }
 }
 
 class FrameRedirector {
@@ -2315,7 +2373,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();
                 }
@@ -2375,10 +2433,8 @@ class Navigator {
     get restorationIdentifier() {
         return this.history.restorationIdentifier;
     }
-    getActionForFormSubmission(formSubmission) {
-        const { formElement, submitter } = formSubmission;
-        const action = getAttribute("data-turbo-action", submitter, formElement);
-        return isAction(action) ? action : "advance";
+    getActionForFormSubmission({ submitter, formElement }) {
+        return getVisitAction(submitter, formElement) || "advance";
     }
 }
 
@@ -2620,7 +2676,7 @@ class PageRenderer extends Renderer {
     }
     async render() {
         if (this.willRender) {
-            this.replaceBody();
+            await this.replaceBody();
         }
     }
     finishRendering() {
@@ -2639,16 +2695,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() {
@@ -2667,6 +2723,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);
@@ -2687,8 +2772,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);
@@ -3105,8 +3190,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";
@@ -3125,8 +3210,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;
@@ -3186,7 +3270,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);
+        });
     },
 };
 
@@ -3246,6 +3333,9 @@ var Turbo = /*#__PURE__*/Object.freeze({
     StreamActions: StreamActions
 });
 
+class TurboFrameMissingError extends Error {
+}
+
 class FrameController {
     constructor(element) {
         this.fetchResponseLoaded = (_fetchResponse) => { };
@@ -3346,35 +3436,22 @@ class FrameController {
         try {
             const html = await fetchResponse.responseHTML;
             if (html) {
-                const { 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);
+                const document = parseHTMLDocument(html);
+                const pageSnapshot = PageSnapshot.fromDocument(document);
+                if (pageSnapshot.isVisitable) {
+                    await this.loadFrameResponse(fetchResponse, document);
                 }
-                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);
+                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) {
@@ -3400,12 +3477,12 @@ class FrameController {
         }
         this.formSubmission = new FormSubmission(this, element, submitter);
         const { 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);
         }
@@ -3421,7 +3498,6 @@ class FrameController {
         this.resolveVisitPromise();
     }
     async requestFailedWithResponse(request, response) {
-        console.error(response);
         await this.loadResponse(response);
         this.resolveVisitPromise();
     }
@@ -3439,9 +3515,13 @@ class FrameController {
         const frame = this.findFrameElement(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);
@@ -3469,6 +3549,24 @@ 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);
@@ -3485,7 +3583,6 @@ class FrameController {
     }
     navigateFrame(element, url, submitter) {
         const frame = this.findFrameElement(element, submitter);
-        this.pageSnapshot = PageSnapshot.fromElement(frame).clone();
         frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
         this.withCurrentNavigationElement(element, () => {
             frame.src = url;
@@ -3493,7 +3590,8 @@ class FrameController {
     }
     proposeVisitIfNavigatedWithAction(frame, element, submitter) {
         this.action = getVisitAction(submitter, element, frame);
-        if (isAction(this.action)) {
+        if (this.action) {
+            const pageSnapshot = PageSnapshot.fromElement(frame).clone();
             const { visitCachedSnapshot } = frame.delegate;
             frame.delegate.fetchResponseLoaded = (fetchResponse) => {
                 if (frame.src) {
@@ -3506,7 +3604,7 @@ class FrameController {
                         willRender: false,
                         updateHistory: false,
                         restorationIdentifier: this.restorationIdentifier,
-                        snapshot: this.pageSnapshot,
+                        snapshot: pageSnapshot,
                     };
                     if (this.action)
                         options.action = this.action;
@@ -3521,6 +3619,10 @@ class FrameController {
             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;
@@ -3539,6 +3641,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;