@hotwired/turbo 7.1.0-rc.2 → 7.2.0-beta.1

package/dist/turbo.es2017-esm.js

@@ -1,20 +1,20 @@
 /*
-Turbo 7.1.0-rc.1
-Copyright © 2021 Basecamp, LLC
+Turbo 7.2.0-beta.1
+Copyright © 2022 Basecamp, LLC
  */
 (function () {
-    if (window.Reflect === undefined || window.customElements === undefined ||
+    if (window.Reflect === undefined ||
+        window.customElements === undefined ||
         window.customElements.polyfillWrapFlushCallback) {
         return;
     }
     const BuiltInHTMLElement = HTMLElement;
     const wrapperForTheName = {
-        'HTMLElement': function HTMLElement() {
+        HTMLElement: function HTMLElement() {
             return Reflect.construct(BuiltInHTMLElement, [], this.constructor);
-        }
+        },
     };
-    window.HTMLElement =
-        wrapperForTheName['HTMLElement'];
+    window.HTMLElement = wrapperForTheName["HTMLElement"];
     HTMLElement.prototype = BuiltInHTMLElement.prototype;
     HTMLElement.prototype.constructor = HTMLElement;
     Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
@@ -72,7 +72,7 @@ Copyright © 2021 Basecamp, LLC
   }
 })(HTMLFormElement.prototype);
 
-const submittersByForm = new WeakMap;
+const submittersByForm = new WeakMap();
 function findSubmitterFromClickTarget(target) {
     const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
     const candidate = element ? element.closest("input, button") : null;
@@ -103,7 +103,7 @@ function clickCaptured(event) {
             if (this.type == "submit" && this.target instanceof HTMLFormElement) {
                 return submittersByForm.get(this.target);
             }
-        }
+        },
     });
 })();
 
@@ -119,7 +119,7 @@ class FrameElement extends HTMLElement {
         this.delegate = new FrameElement.delegateConstructor(this);
     }
     static get observedAttributes() {
-        return ["disabled", "loading", "src"];
+        return ["disabled", "complete", "loading", "src"];
     }
     connectedCallback() {
         this.delegate.connect();
@@ -129,6 +129,7 @@ class FrameElement extends HTMLElement {
     }
     reload() {
         const { src } = this;
+        this.removeAttribute("complete");
         this.src = null;
         this.src = src;
     }
@@ -136,6 +137,9 @@ class FrameElement extends HTMLElement {
         if (name == "loading") {
             this.delegate.loadingStyleChanged();
         }
+        else if (name == "complete") {
+            this.delegate.completeChanged();
+        }
         else if (name == "src") {
             this.delegate.sourceURLChanged();
         }
@@ -200,8 +204,10 @@ class FrameElement extends HTMLElement {
 }
 function frameLoadingStyleFromString(style) {
     switch (style.toLowerCase()) {
-        case "lazy": return FrameLoadingStyle.lazy;
-        default: return FrameLoadingStyle.eager;
+        case "lazy":
+            return FrameLoadingStyle.lazy;
+        default:
+            return FrameLoadingStyle.eager;
     }
 }
 
@@ -213,7 +219,7 @@ function getAnchor(url) {
     if (url.hash) {
         return url.hash.slice(1);
     }
-    else if (anchorMatch = url.href.match(/#(.*)$/)) {
+    else if ((anchorMatch = url.href.match(/#(.*)$/))) {
         return anchorMatch[1];
     }
 }
@@ -225,7 +231,7 @@ function getExtension(url) {
     return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
 }
 function isHTML(url) {
-    return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml))$/);
+    return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml|php))$/);
 }
 function isPrefixedBy(baseURL, url) {
     const prefix = getPrefix(url);
@@ -236,9 +242,7 @@ function locationIsVisitable(location, rootLocation) {
 }
 function getRequestURL(url) {
     const anchor = getAnchor(url);
-    return anchor != null
-        ? url.href.slice(0, -(anchor.length + 1))
-        : url.href;
+    return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
 }
 function toCacheKey(url) {
     return getRequestURL(url);
@@ -307,7 +311,11 @@ class FetchResponse {
 }
 
 function dispatch(eventName, { target, cancelable, detail } = {}) {
-    const event = new CustomEvent(eventName, { cancelable, bubbles: true, detail });
+    const event = new CustomEvent(eventName, {
+        cancelable,
+        bubbles: true,
+        detail,
+    });
     if (target && target.isConnected) {
         target.dispatchEvent(event);
     }
@@ -317,10 +325,10 @@ function dispatch(eventName, { target, cancelable, detail } = {}) {
     return event;
 }
 function nextAnimationFrame() {
-    return new Promise(resolve => requestAnimationFrame(() => resolve()));
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
 function nextEventLoopTick() {
-    return new Promise(resolve => setTimeout(() => resolve(), 0));
+    return new Promise((resolve) => setTimeout(() => resolve(), 0));
 }
 function nextMicrotask() {
     return Promise.resolve();
@@ -332,7 +340,7 @@ function unindent(strings, ...values) {
     const lines = interpolate(strings, values).replace(/^\n/, "").split("\n");
     const match = lines[0].match(/^\s+/);
     const indent = match ? match[0].length : 0;
-    return lines.map(line => line.slice(indent)).join("\n");
+    return lines.map((line) => line.slice(indent)).join("\n");
 }
 function interpolate(strings, values) {
     return strings.reduce((result, string, i) => {
@@ -341,7 +349,8 @@ function interpolate(strings, values) {
     }, "");
 }
 function uuid() {
-    return Array.apply(null, { length: 36 }).map((_, i) => {
+    return Array.from({ length: 36 })
+        .map((_, i) => {
         if (i == 8 || i == 13 || i == 18 || i == 23) {
             return "-";
         }
@@ -354,10 +363,11 @@ function uuid() {
         else {
             return Math.floor(Math.random() * 15).toString(16);
         }
-    }).join("");
+    })
+        .join("");
 }
 function getAttribute(attributeName, ...elements) {
-    for (const value of elements.map(element => element === null || element === void 0 ? void 0 : element.getAttribute(attributeName))) {
+    for (const value of elements.map((element) => element === null || element === void 0 ? void 0 : element.getAttribute(attributeName))) {
         if (typeof value == "string")
             return value;
     }
@@ -379,6 +389,23 @@ function clearBusyState(...elements) {
         element.removeAttribute("aria-busy");
     }
 }
+function getMetaElement(name) {
+    return document.querySelector(`meta[name="${name}"]`);
+}
+function getMetaContent(name) {
+    const element = getMetaElement(name);
+    return element && element.content;
+}
+function setMetaContent(name, content) {
+    let element = getMetaElement(name);
+    if (!element) {
+        element = document.createElement("meta");
+        element.setAttribute("name", name);
+        document.head.appendChild(element);
+    }
+    element.setAttribute("content", content);
+    return element;
+}
 
 var FetchMethod;
 (function (FetchMethod) {
@@ -390,27 +417,27 @@ var FetchMethod;
 })(FetchMethod || (FetchMethod = {}));
 function fetchMethodFromString(method) {
     switch (method.toLowerCase()) {
-        case "get": return FetchMethod.get;
-        case "post": return FetchMethod.post;
-        case "put": return FetchMethod.put;
-        case "patch": return FetchMethod.patch;
-        case "delete": return FetchMethod.delete;
+        case "get":
+            return FetchMethod.get;
+        case "post":
+            return FetchMethod.post;
+        case "put":
+            return FetchMethod.put;
+        case "patch":
+            return FetchMethod.patch;
+        case "delete":
+            return FetchMethod.delete;
     }
 }
 class FetchRequest {
-    constructor(delegate, method, location, body = new URLSearchParams, target = null) {
-        this.abortController = new AbortController;
-        this.resolveRequestPromise = (value) => { };
+    constructor(delegate, method, location, body = new URLSearchParams(), target = null) {
+        this.abortController = new AbortController();
+        this.resolveRequestPromise = (_value) => { };
         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() {
@@ -436,7 +463,7 @@ class FetchRequest {
             return await this.receive(response);
         }
         catch (error) {
-            if (error.name !== 'AbortError') {
+            if (error.name !== "AbortError") {
                 this.delegate.requestErrored(this, error);
                 throw error;
             }
@@ -447,7 +474,11 @@ class FetchRequest {
     }
     async receive(response) {
         const fetchResponse = new FetchResponse(response);
-        const event = dispatch("turbo:before-fetch-response", { cancelable: true, detail: { fetchResponse }, target: this.target });
+        const event = dispatch("turbo:before-fetch-response", {
+            cancelable: true,
+            detail: { fetchResponse },
+            target: this.target,
+        });
         if (event.defaultPrevented) {
             this.delegate.requestPreventedHandlingResponse(this, fetchResponse);
         }
@@ -466,14 +497,14 @@ 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
+            referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href,
         };
     }
     get defaultHeaders() {
         return {
-            "Accept": "text/html, application/xhtml+xml"
+            Accept: "text/html, application/xhtml+xml",
         };
     }
     get isIdempotent() {
@@ -483,40 +514,25 @@ class FetchRequest {
         return this.abortController.signal;
     }
     async allowRequestToBeIntercepted(fetchOptions) {
-        const requestInterception = new Promise(resolve => this.resolveRequestPromise = resolve);
+        const requestInterception = new Promise((resolve) => (this.resolveRequestPromise = resolve));
         const event = dispatch("turbo:before-fetch-request", {
             cancelable: true,
             detail: {
                 fetchOptions,
-                url: this.url.href,
-                resume: this.resolveRequestPromise
+                url: this.url,
+                resume: this.resolveRequestPromise,
             },
-            target: this.target
+            target: this.target,
         });
         if (event.defaultPrevented)
             await requestInterception;
     }
 }
-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;
-        this.intersect = entries => {
+        this.intersect = (entries) => {
             const lastEntry = entries.slice(-1)[0];
             if (lastEntry === null || lastEntry === void 0 ? void 0 : lastEntry.isIntersecting) {
                 this.delegate.elementAppearedInViewport(this.element);
@@ -593,9 +609,12 @@ var FormEnctype;
 })(FormEnctype || (FormEnctype = {}));
 function formEnctypeFromString(encoding) {
     switch (encoding.toLowerCase()) {
-        case FormEnctype.multipart: return FormEnctype.multipart;
-        case FormEnctype.plain: return FormEnctype.plain;
-        default: return FormEnctype.urlEncoded;
+        case FormEnctype.multipart:
+            return FormEnctype.multipart;
+        case FormEnctype.plain:
+            return FormEnctype.plain;
+        default:
+            return FormEnctype.urlEncoded;
     }
 }
 class FormSubmission {
@@ -605,11 +624,15 @@ 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);
+    static confirmMethod(message, _element) {
+        return Promise.resolve(confirm(message));
     }
     get method() {
         var _a;
@@ -618,11 +641,13 @@ class FormSubmission {
     }
     get action() {
         var _a;
-        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);
+        const formElementAction = typeof this.formElement.action === "string" ? this.formElement.action : null;
+        if ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.hasAttribute("formaction")) {
+            return this.submitter.getAttribute("formaction") || "";
+        }
+        else {
+            return this.formElement.getAttribute("action") || formElementAction || "";
+        }
     }
     get body() {
         if (this.enctype == FormEnctype.urlEncoded || this.method == FetchMethod.get) {
@@ -645,7 +670,8 @@ class FormSubmission {
         }, []);
     }
     get confirmationMessage() {
-        return this.formElement.getAttribute("data-turbo-confirm");
+        var _a;
+        return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("data-turbo-confirm")) || this.formElement.getAttribute("data-turbo-confirm");
     }
     get needsConfirmation() {
         return this.confirmationMessage !== null;
@@ -653,7 +679,7 @@ class FormSubmission {
     async start() {
         const { initialized, requesting } = FormSubmissionState;
         if (this.needsConfirmation) {
-            const answer = FormSubmission.confirmMethod(this.confirmationMessage, this.formElement);
+            const answer = await FormSubmission.confirmMethod(this.confirmationMessage, this.formElement);
             if (!answer) {
                 return;
             }
@@ -677,14 +703,19 @@ class FormSubmission {
             if (token) {
                 headers["X-CSRF-Token"] = token;
             }
+        }
+        if (this.requestAcceptsTurboStreamResponse(request)) {
             headers["Accept"] = [StreamMessage.contentType, headers["Accept"]].join(", ");
         }
     }
-    requestStarted(request) {
+    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 } });
+        dispatch("turbo:submit-start", {
+            target: this.formElement,
+            detail: { formSubmission: this },
+        });
         this.delegate.formSubmissionStarted(this);
     }
     requestPreventedHandlingResponse(request, response) {
@@ -712,16 +743,22 @@ class FormSubmission {
         this.result = { success: false, error };
         this.delegate.formSubmissionErrored(this, error);
     }
-    requestFinished(request) {
+    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) });
+        dispatch("turbo:submit-end", {
+            target: this.formElement,
+            detail: Object.assign({ formSubmission: this }, this.result),
+        });
         this.delegate.formSubmissionFinished(this);
     }
     requestMustRedirect(request) {
         return !request.isIdempotent && this.mustRedirect;
     }
+    requestAcceptsTurboStreamResponse(request) {
+        return !request.isIdempotent || this.formElement.hasAttribute("data-turbo-stream");
+    }
 }
 function buildFormData(formElement, submitter) {
     const formData = new FormData(formElement);
@@ -742,18 +779,27 @@ function getCookieValue(cookieName) {
         }
     }
 }
-function getMetaContent(name) {
-    const element = document.querySelector(`meta[name="${name}"]`);
-    return element && element.content;
-}
 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;
     }
+    get activeElement() {
+        return this.element.ownerDocument.activeElement;
+    }
     get children() {
         return [...this.element.children];
     }
@@ -792,7 +838,9 @@ 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;
                 const method = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formmethod")) || form.method;
                 if (method != "dialog" && this.delegate.shouldInterceptFormSubmission(form, submitter)) {
@@ -815,8 +863,8 @@ class FormInterceptor {
 
 class View {
     constructor(delegate, element) {
-        this.resolveRenderPromise = (value) => { };
-        this.resolveInterceptionPromise = (value) => { };
+        this.resolveRenderPromise = (_value) => { };
+        this.resolveInterceptionPromise = (_value) => { };
         this.delegate = delegate;
         this.element = element;
     }
@@ -861,15 +909,17 @@ class View {
         const { isPreview, shouldRender, newSnapshot: snapshot } = renderer;
         if (shouldRender) {
             try {
-                this.renderPromise = new Promise(resolve => this.resolveRenderPromise = resolve);
+                this.renderPromise = new Promise((resolve) => (this.resolveRenderPromise = resolve));
                 this.renderer = renderer;
                 this.prepareToRenderSnapshot(renderer);
-                const renderInterception = new Promise(resolve => this.resolveInterceptionPromise = resolve);
-                const immediateRender = this.delegate.allowsImmediateRender(snapshot, this.resolveInterceptionPromise);
+                const renderInterception = new Promise((resolve) => (this.resolveInterceptionPromise = resolve));
+                const options = { resume: this.resolveInterceptionPromise, render: this.renderer.renderElement };
+                const immediateRender = this.delegate.allowsImmediateRender(snapshot, options);
                 if (!immediateRender)
                     await renderInterception;
                 await this.renderSnapshot(renderer);
                 this.delegate.viewRenderedSnapshot(snapshot, isPreview);
+                this.delegate.preloadOnLoadLinksForView(this.element);
                 this.finishRenderingSnapshot(renderer);
             }
             finally {
@@ -879,11 +929,11 @@ class View {
             }
         }
         else {
-            this.invalidate();
+            this.invalidate(renderer.reloadReason);
         }
     }
-    invalidate() {
-        this.delegate.viewInvalidated();
+    invalidate(reason) {
+        this.delegate.viewInvalidated(reason);
     }
     prepareToRenderSnapshot(renderer) {
         this.markAsPreview(renderer.isPreview);
@@ -934,9 +984,9 @@ class LinkInterceptor {
             }
             delete this.clickEvent;
         });
-        this.willVisit = () => {
+        this.willVisit = ((_event) => {
             delete this.clickEvent;
-        };
+        });
         this.delegate = delegate;
         this.element = element;
     }
@@ -951,28 +1001,65 @@ class LinkInterceptor {
         document.removeEventListener("turbo:before-visit", this.willVisit);
     }
     respondsToEventTarget(target) {
-        const element = target instanceof Element
-            ? target
-            : target instanceof Node
-                ? target.parentElement
-                : null;
+        const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
         return element && element.closest("turbo-frame, html") == this.element;
     }
 }
 
+class FormLinkInterceptor {
+    constructor(delegate, element) {
+        this.delegate = delegate;
+        this.linkInterceptor = new LinkInterceptor(this, element);
+    }
+    start() {
+        this.linkInterceptor.start();
+    }
+    stop() {
+        this.linkInterceptor.stop();
+    }
+    shouldInterceptLinkClick(link) {
+        return (this.delegate.shouldInterceptFormLinkClick(link) &&
+            (link.hasAttribute("data-turbo-method") || link.hasAttribute("data-turbo-stream")));
+    }
+    linkClickIntercepted(link, action) {
+        const form = document.createElement("form");
+        form.setAttribute("data-turbo", "true");
+        form.setAttribute("action", action);
+        form.setAttribute("hidden", "");
+        const method = link.getAttribute("data-turbo-method");
+        if (method)
+            form.setAttribute("method", method);
+        const turboFrame = link.getAttribute("data-turbo-frame");
+        if (turboFrame)
+            form.setAttribute("data-turbo-frame", turboFrame);
+        const turboConfirm = link.getAttribute("data-turbo-confirm");
+        if (turboConfirm)
+            form.setAttribute("data-turbo-confirm", turboConfirm);
+        const turboStream = link.hasAttribute("data-turbo-stream");
+        if (turboStream)
+            form.setAttribute("data-turbo-stream", "");
+        this.delegate.formLinkClickIntercepted(link, form);
+        document.body.appendChild(form);
+        form.requestSubmit();
+        form.remove();
+    }
+}
+
 class Bardo {
-    constructor(permanentElementMap) {
+    constructor(delegate, permanentElementMap) {
+        this.delegate = delegate;
         this.permanentElementMap = permanentElementMap;
     }
-    static preservingPermanentElements(permanentElementMap, callback) {
-        const bardo = new this(permanentElementMap);
+    static preservingPermanentElements(delegate, permanentElementMap, callback) {
+        const bardo = new this(delegate, permanentElementMap);
         bardo.enter();
         callback();
         bardo.leave();
     }
     enter() {
         for (const id in this.permanentElementMap) {
-            const [, newPermanentElement] = this.permanentElementMap[id];
+            const [currentPermanentElement, newPermanentElement] = this.permanentElementMap[id];
+            this.delegate.enteringBardo(currentPermanentElement, newPermanentElement);
             this.replaceNewPermanentElementWithPlaceholder(newPermanentElement);
         }
     }
@@ -981,6 +1068,7 @@ class Bardo {
             const [currentPermanentElement] = this.permanentElementMap[id];
             this.replaceCurrentPermanentElementWithClone(currentPermanentElement);
             this.replacePlaceholderWithPermanentElement(currentPermanentElement);
+            this.delegate.leavingBardo(currentPermanentElement);
         }
     }
     replaceNewPermanentElementWithPlaceholder(permanentElement) {
@@ -996,7 +1084,7 @@ class Bardo {
         placeholder === null || placeholder === void 0 ? void 0 : placeholder.replaceWith(permanentElement);
     }
     getPlaceholderById(id) {
-        return this.placeholders.find(element => element.content == id);
+        return this.placeholders.find((element) => element.content == id);
     }
     get placeholders() {
         return [...document.querySelectorAll("meta[name=turbo-permanent-placeholder][content]")];
@@ -1010,16 +1098,21 @@ function createPlaceholderForPermanentElement(permanentElement) {
 }
 
 class Renderer {
-    constructor(currentSnapshot, newSnapshot, isPreview, willRender = true) {
+    constructor(currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+        this.activeElement = null;
         this.currentSnapshot = currentSnapshot;
         this.newSnapshot = newSnapshot;
         this.isPreview = isPreview;
         this.willRender = willRender;
-        this.promise = new Promise((resolve, reject) => this.resolvingFunctions = { resolve, reject });
+        this.renderElement = renderElement;
+        this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }));
     }
     get shouldRender() {
         return true;
     }
+    get reloadReason() {
+        return;
+    }
     prepareToRender() {
         return;
     }
@@ -1045,7 +1138,7 @@ class Renderer {
         }
     }
     preservingPermanentElements(callback) {
-        Bardo.preservingPermanentElements(this.permanentElementMap, callback);
+        Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
     }
     focusFirstAutofocusableElement() {
         const element = this.connectedSnapshot.firstAutofocusableElement;
@@ -1053,6 +1146,19 @@ class Renderer {
             element.focus();
         }
     }
+    enteringBardo(currentPermanentElement) {
+        if (this.activeElement)
+            return;
+        if (currentPermanentElement.contains(this.currentSnapshot.activeElement)) {
+            this.activeElement = this.currentSnapshot.activeElement;
+        }
+    }
+    leavingBardo(currentPermanentElement) {
+        if (currentPermanentElement.contains(this.activeElement) && this.activeElement instanceof HTMLElement) {
+            this.activeElement.focus();
+            this.activeElement = null;
+        }
+    }
     get connectedSnapshot() {
         return this.newSnapshot.isConnected ? this.newSnapshot : this.currentSnapshot;
     }
@@ -1066,8 +1172,7 @@ class Renderer {
         return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot);
     }
     get cspNonce() {
-        var _a;
-        return (_a = document.head.querySelector('meta[name="csp-nonce"]')) === null || _a === void 0 ? void 0 : _a.getAttribute("content");
+        return getMetaContent("csp-nonce");
     }
 }
 function copyElementAttributes(destinationElement, sourceElement) {
@@ -1080,6 +1185,22 @@ 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();
+        destinationRange.selectNodeContents(currentElement);
+        destinationRange.deleteContents();
+        const frameElement = newElement;
+        const sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
+        if (sourceRange) {
+            sourceRange.selectNodeContents(frameElement);
+            currentElement.appendChild(sourceRange.extractContents());
+        }
+    }
     get shouldRender() {
         return true;
     }
@@ -1095,23 +1216,16 @@ class FrameRenderer extends Renderer {
         this.activateScriptElements();
     }
     loadFrameElement() {
-        var _a;
-        const destinationRange = document.createRange();
-        destinationRange.selectNodeContents(this.currentElement);
-        destinationRange.deleteContents();
-        const frameElement = this.newElement;
-        const sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
-        if (sourceRange) {
-            sourceRange.selectNodeContents(frameElement);
-            this.currentElement.appendChild(sourceRange.extractContents());
-        }
+        this.delegate.frameExtracted(this.newElement.cloneNode(true));
+        this.renderElement(this.currentElement, this.newElement);
     }
     scrollFrameIntoView() {
         if (this.currentElement.autoscroll || this.newElement.autoscroll) {
             const element = this.currentElement.firstElementChild;
             const block = readScrollLogicalPosition(this.currentElement.getAttribute("data-autoscroll-block"), "end");
+            const behavior = readScrollBehavior(this.currentElement.getAttribute("data-autoscroll-behavior"), "auto");
             if (element) {
-                element.scrollIntoView({ block });
+                element.scrollIntoView({ block, behavior });
                 return true;
             }
         }
@@ -1135,6 +1249,14 @@ function readScrollLogicalPosition(value, defaultValue) {
         return defaultValue;
     }
 }
+function readScrollBehavior(value, defaultValue) {
+    if (value == "auto" || value == "smooth") {
+        return value;
+    }
+    else {
+        return defaultValue;
+    }
+}
 
 class ProgressBar {
     constructor() {
@@ -1158,7 +1280,7 @@ class ProgressBar {
         left: 0;
         height: 3px;
         background: #0076ff;
-        z-index: 9999;
+        z-index: 2147483647;
         transition:
           width ${ProgressBar.animationDuration}ms ease-out,
           opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;
@@ -1217,13 +1339,16 @@ class ProgressBar {
     }
     refresh() {
         requestAnimationFrame(() => {
-            this.progressElement.style.width = `${10 + (this.value * 90)}%`;
+            this.progressElement.style.width = `${10 + this.value * 90}%`;
         });
     }
     createStylesheetElement() {
         const element = document.createElement("style");
         element.type = "text/css";
         element.textContent = ProgressBar.defaultCSS;
+        if (this.cspNonce) {
+            element.nonce = this.cspNonce;
+        }
         return element;
     }
     createProgressElement() {
@@ -1231,6 +1356,9 @@ class ProgressBar {
         element.className = "turbo-progress-bar";
         return element;
     }
+    get cspNonce() {
+        return getMetaContent("csp-nonce");
+    }
 }
 ProgressBar.animationDuration = 300;
 
@@ -1247,14 +1375,14 @@ class HeadSnapshot extends Snapshot {
                 : {
                     type: elementType(element),
                     tracked: elementIsTracked(element),
-                    elements: []
+                    elements: [],
                 };
             return Object.assign(Object.assign({}, result), { [outerHTML]: Object.assign(Object.assign({}, details), { elements: [...details.elements, element] }) });
         }, {});
     }
     get trackedElementSignature() {
         return Object.keys(this.detailsByOuterHTML)
-            .filter(outerHTML => this.detailsByOuterHTML[outerHTML].tracked)
+            .filter((outerHTML) => this.detailsByOuterHTML[outerHTML].tracked)
             .join("");
     }
     getScriptElementsNotInSnapshot(snapshot) {
@@ -1265,8 +1393,8 @@ class HeadSnapshot extends Snapshot {
     }
     getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
         return Object.keys(this.detailsByOuterHTML)
-            .filter(outerHTML => !(outerHTML in snapshot.detailsByOuterHTML))
-            .map(outerHTML => this.detailsByOuterHTML[outerHTML])
+            .filter((outerHTML) => !(outerHTML in snapshot.detailsByOuterHTML))
+            .map((outerHTML) => this.detailsByOuterHTML[outerHTML])
             .filter(({ type }) => type == matchedType)
             .map(({ elements: [element] }) => element);
     }
@@ -1286,13 +1414,11 @@ class HeadSnapshot extends Snapshot {
     }
     getMetaValue(name) {
         const element = this.findMetaElementByName(name);
-        return element
-            ? element.getAttribute("content")
-            : null;
+        return element ? element.getAttribute("content") : null;
     }
     findMetaElementByName(name) {
         return Object.keys(this.detailsByOuterHTML).reduce((result, outerHTML) => {
-            const { elements: [element] } = this.detailsByOuterHTML[outerHTML];
+            const { elements: [element], } = this.detailsByOuterHTML[outerHTML];
             return elementIsMetaElementWithName(element, name) ? element : result;
         }, undefined);
     }
@@ -1459,9 +1585,11 @@ class Visit {
         if (this.state == VisitState.started) {
             this.recordTimingMetric(TimingMetric.visitEnd);
             this.state = VisitState.completed;
-            this.adapter.visitCompleted(this);
-            this.delegate.visitCompleted(this);
             this.followRedirect();
+            if (!this.followedRedirect) {
+                this.adapter.visitCompleted(this);
+                this.delegate.visitCompleted(this);
+            }
         }
     }
     fail() {
@@ -1523,12 +1651,12 @@ class Visit {
                 if (this.view.renderPromise)
                     await this.view.renderPromise;
                 if (isSuccessful(statusCode) && responseHTML != null) {
-                    await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML), false, this.willRender);
+                    await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML), false, this.willRender, this);
                     this.adapter.visitRendered(this);
                     this.complete();
                 }
                 else {
-                    await this.view.renderError(PageSnapshot.fromHTMLString(responseHTML));
+                    await this.view.renderError(PageSnapshot.fromHTMLString(responseHTML), this);
                     this.adapter.visitRendered(this);
                     this.fail();
                 }
@@ -1563,7 +1691,7 @@ class Visit {
                 else {
                     if (this.view.renderPromise)
                         await this.view.renderPromise;
-                    await this.view.renderPage(snapshot, isPreview, this.willRender);
+                    await this.view.renderPage(snapshot, isPreview, this.willRender, this);
                     this.adapter.visitRendered(this);
                     if (!isPreview) {
                         this.complete();
@@ -1576,8 +1704,9 @@ class Visit {
         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
+                action: "replace",
+                willRender: false,
+                response: this.response,
             });
             this.followedRedirect = true;
         }
@@ -1593,13 +1722,15 @@ class Visit {
     requestStarted() {
         this.startRequest();
     }
-    requestPreventedHandlingResponse(request, response) {
-    }
+    requestPreventedHandlingResponse(_request, _response) { }
     async requestSucceededWithResponse(request, response) {
         const responseHTML = await response.responseHTML;
         const { redirected, statusCode } = response;
         if (responseHTML == undefined) {
-            this.recordResponse({ statusCode: SystemStatusCode.contentTypeMismatch, redirected });
+            this.recordResponse({
+                statusCode: SystemStatusCode.contentTypeMismatch,
+                redirected,
+            });
         }
         else {
             this.redirectedToLocation = response.redirected ? response.location : undefined;
@@ -1610,14 +1741,20 @@ class Visit {
         const responseHTML = await response.responseHTML;
         const { redirected, statusCode } = response;
         if (responseHTML == undefined) {
-            this.recordResponse({ statusCode: SystemStatusCode.contentTypeMismatch, redirected });
+            this.recordResponse({
+                statusCode: SystemStatusCode.contentTypeMismatch,
+                redirected,
+            });
         }
         else {
             this.recordResponse({ statusCode: statusCode, responseHTML, redirected });
         }
     }
-    requestErrored(request, error) {
-        this.recordResponse({ statusCode: SystemStatusCode.networkFailure, redirected: false });
+    requestErrored(_request, _error) {
+        this.recordResponse({
+            statusCode: SystemStatusCode.networkFailure,
+            redirected: false,
+        });
     }
     requestFinished() {
         this.finishRequest();
@@ -1658,9 +1795,11 @@ class Visit {
     }
     getHistoryMethodForAction(action) {
         switch (action) {
-            case "replace": return history.replaceState;
+            case "replace":
+                return history.replaceState;
             case "advance":
-            case "restore": return history.pushState;
+            case "restore":
+                return history.pushState;
         }
     }
     hasPreloadedResponse() {
@@ -1679,18 +1818,20 @@ class Visit {
     }
     cacheSnapshot() {
         if (!this.snapshotCached) {
-            this.view.cacheSnapshot().then(snapshot => snapshot && this.visitCachedSnapshot(snapshot));
+            this.view.cacheSnapshot().then((snapshot) => snapshot && this.visitCachedSnapshot(snapshot));
             this.snapshotCached = true;
         }
     }
     async render(callback) {
         this.cancelRender();
-        await new Promise(resolve => {
+        await new Promise((resolve) => {
             this.frame = requestAnimationFrame(() => resolve());
         });
         await callback();
         delete this.frame;
-        this.performScroll();
+        if (!this.view.forceReloaded) {
+            this.performScroll();
+        }
     }
     cancelRender() {
         if (this.frame) {
@@ -1705,7 +1846,7 @@ function isSuccessful(statusCode) {
 
 class BrowserAdapter {
     constructor(session) {
-        this.progressBar = new ProgressBar;
+        this.progressBar = new ProgressBar();
         this.showProgressBar = () => {
             this.progressBar.show();
         };
@@ -1715,10 +1856,10 @@ class BrowserAdapter {
         this.navigator.startVisit(location, uuid(), options);
     }
     visitStarted(visit) {
+        this.location = visit.location;
+        visit.loadCachedSnapshot();
         visit.issueRequest();
-        visit.changeHistory();
         visit.goToSamePageAnchor();
-        visit.loadCachedSnapshot();
     }
     visitRequestStarted(visit) {
         this.progressBar.setValue(0);
@@ -1737,29 +1878,31 @@ class BrowserAdapter {
             case SystemStatusCode.networkFailure:
             case SystemStatusCode.timeoutFailure:
             case SystemStatusCode.contentTypeMismatch:
-                return this.reload();
+                return this.reload({
+                    reason: "request_failed",
+                    context: {
+                        statusCode,
+                    },
+                });
             default:
                 return visit.loadResponse();
         }
     }
-    visitRequestFinished(visit) {
+    visitRequestFinished(_visit) {
         this.progressBar.setValue(1);
         this.hideVisitProgressBar();
     }
-    visitCompleted(visit) {
-    }
-    pageInvalidated() {
-        this.reload();
+    visitCompleted(_visit) { }
+    pageInvalidated(reason) {
+        this.reload(reason);
     }
-    visitFailed(visit) {
-    }
-    visitRendered(visit) {
-    }
-    formSubmissionStarted(formSubmission) {
+    visitFailed(_visit) { }
+    visitRendered(_visit) { }
+    formSubmissionStarted(_formSubmission) {
         this.progressBar.setValue(0);
         this.showFormProgressBarAfterDelay();
     }
-    formSubmissionFinished(formSubmission) {
+    formSubmissionFinished(_formSubmission) {
         this.progressBar.setValue(1);
         this.hideFormProgressBar();
     }
@@ -1785,8 +1928,11 @@ class BrowserAdapter {
             delete this.formProgressBarTimeout;
         }
     }
-    reload() {
-        window.location.reload();
+    reload(reason) {
+        dispatch("turbo:reload", { detail: reason });
+        if (!this.location)
+            return;
+        window.location.href = this.location.toString();
     }
     get navigator() {
         return this.session.navigator;
@@ -1796,6 +1942,12 @@ class BrowserAdapter {
 class CacheObserver {
     constructor() {
         this.started = false;
+        this.removeStaleElements = ((_event) => {
+            const staleElements = [...document.querySelectorAll('[data-turbo-cache="false"]')];
+            for (const element of staleElements) {
+                element.remove();
+            }
+        });
     }
     start() {
         if (!this.started) {
@@ -1809,12 +1961,6 @@ class CacheObserver {
             removeEventListener("turbo:before-cache", this.removeStaleElements, false);
         }
     }
-    removeStaleElements() {
-        const staleElements = [...document.querySelectorAll('[data-turbo-cache="false"]')];
-        for (const element of staleElements) {
-            element.remove();
-        }
-    }
 }
 
 class FormSubmitObserver {
@@ -1828,12 +1974,12 @@ class FormSubmitObserver {
             if (!event.defaultPrevented) {
                 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.getAttribute("method");
-                    if (method != "dialog" && this.delegate.willSubmitForm(form, submitter)) {
-                        event.preventDefault();
-                        this.delegate.formSubmitted(form, submitter);
-                    }
+                if (form &&
+                    submissionDoesNotDismissDialog(form, submitter) &&
+                    submissionDoesNotTargetIFrame(form, submitter) &&
+                    this.delegate.willSubmitForm(form, submitter)) {
+                    event.preventDefault();
+                    this.delegate.formSubmitted(form, submitter);
                 }
             }
         });
@@ -1852,6 +1998,18 @@ class FormSubmitObserver {
         }
     }
 }
+function submissionDoesNotDismissDialog(form, submitter) {
+    const method = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formmethod")) || form.getAttribute("method");
+    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;
+    }
+    return true;
+}
 
 class FrameRedirector {
     constructor(element) {
@@ -1867,7 +2025,7 @@ class FrameRedirector {
         this.linkInterceptor.stop();
         this.formInterceptor.stop();
     }
-    shouldInterceptLinkClick(element, url) {
+    shouldInterceptLinkClick(element, _url) {
         return this.shouldRedirect(element);
     }
     linkClickIntercepted(element, url) {
@@ -1882,7 +2040,6 @@ class FrameRedirector {
     formSubmissionIntercepted(element, submitter) {
         const frame = this.findFrameElement(element, submitter);
         if (frame) {
-            frame.removeAttribute("reloadable");
             frame.delegate.formSubmissionIntercepted(element, submitter);
         }
     }
@@ -1925,7 +2082,7 @@ class History {
                 }
             }
         };
-        this.onPageLoad = async (event) => {
+        this.onPageLoad = async (_event) => {
             await nextMicrotask();
             this.pageLoaded = true;
         };
@@ -1998,9 +2155,9 @@ class LinkClickObserver {
             if (this.clickEventIsSignificant(event)) {
                 const target = (event.composedPath && event.composedPath()[0]) || event.target;
                 const link = this.findLinkFromClickTarget(target);
-                if (link) {
+                if (link && doesNotTargetIFrame(link)) {
                     const location = this.getLocationForLink(link);
-                    if (this.delegate.willFollowLinkToLocation(link, location)) {
+                    if (this.delegate.willFollowLinkToLocation(link, location, event)) {
                         event.preventDefault();
                         this.delegate.followedLinkToLocation(link, location);
                     }
@@ -2022,13 +2179,13 @@ class LinkClickObserver {
         }
     }
     clickEventIsSignificant(event) {
-        return !((event.target && event.target.isContentEditable)
-            || event.defaultPrevented
-            || event.which > 1
-            || event.altKey
-            || event.ctrlKey
-            || event.metaKey
-            || event.shiftKey);
+        return !((event.target && event.target.isContentEditable) ||
+            event.defaultPrevented ||
+            event.which > 1 ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.shiftKey);
     }
     findLinkFromClickTarget(target) {
         if (target instanceof Element) {
@@ -2039,6 +2196,13 @@ class LinkClickObserver {
         return expandURL(link.getAttribute("href") || "");
     }
 }
+function doesNotTargetIFrame(anchor) {
+    for (const element of document.getElementsByName(anchor.target)) {
+        if (element instanceof HTMLIFrameElement)
+            return false;
+    }
+    return true;
+}
 
 function isAction(action) {
     return action == "advance" || action == "replace" || action == "restore";
@@ -2059,6 +2223,7 @@ class Navigator {
         }
     }
     startVisit(locatable, restorationIdentifier, options = {}) {
+        this.lastVisit = this.currentVisit;
         this.stop();
         this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, Object.assign({ referrer: this.location }, options));
         this.currentVisit.start();
@@ -2088,7 +2253,7 @@ class Navigator {
         return this.delegate.history;
     }
     formSubmissionStarted(formSubmission) {
-        if (typeof this.adapter.formSubmissionStarted === 'function') {
+        if (typeof this.adapter.formSubmissionStarted === "function") {
             this.adapter.formSubmissionStarted(formSubmission);
         }
     }
@@ -2101,7 +2266,10 @@ class Navigator {
                 }
                 const { statusCode, redirected } = fetchResponse;
                 const action = this.getActionForFormSubmission(formSubmission);
-                const visitOptions = { action, response: { statusCode, responseHTML, redirected } };
+                const visitOptions = {
+                    action,
+                    response: { statusCode, responseHTML, redirected },
+                };
                 this.proposeVisit(fetchResponse.location, visitOptions);
             }
         }
@@ -2111,10 +2279,10 @@ class Navigator {
         if (responseHTML) {
             const snapshot = PageSnapshot.fromHTMLString(responseHTML);
             if (fetchResponse.serverError) {
-                await this.view.renderError(snapshot);
+                await this.view.renderError(snapshot, this.currentVisit);
             }
             else {
-                await this.view.renderPage(snapshot);
+                await this.view.renderPage(snapshot, false, true, this.currentVisit);
             }
             this.view.scrollToTop();
             this.view.clearSnapshotCache();
@@ -2124,7 +2292,7 @@ class Navigator {
         console.error(error);
     }
     formSubmissionFinished(formSubmission) {
-        if (typeof this.adapter.formSubmissionFinished === 'function') {
+        if (typeof this.adapter.formSubmissionFinished === "function") {
             this.adapter.formSubmissionFinished(formSubmission);
         }
     }
@@ -2135,12 +2303,14 @@ class Navigator {
         this.delegate.visitCompleted(visit);
     }
     locationWithActionIsSamePage(location, action) {
+        var _a;
         const anchor = getAnchor(location);
-        const currentAnchor = getAnchor(this.view.lastRenderedLocation);
-        const isRestorationToTop = action === 'restore' && typeof anchor === 'undefined';
-        return action !== "replace" &&
-            getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) &&
-            (isRestorationToTop || (anchor != null && anchor !== currentAnchor));
+        const lastLocation = ((_a = this.lastVisit) === null || _a === void 0 ? void 0 : _a.location) || this.view.lastRenderedLocation;
+        const currentAnchor = getAnchor(lastLocation);
+        const isRestorationToTop = action === "restore" && typeof anchor === "undefined";
+        return (action !== "replace" &&
+            getRequestURL(location) === getRequestURL(lastLocation) &&
+            (isRestorationToTop || (anchor != null && anchor !== currentAnchor)));
     }
     visitScrolledToSamePageLocation(oldURL, newURL) {
         this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
@@ -2246,7 +2416,7 @@ class ScrollObserver {
 
 class StreamObserver {
     constructor(delegate) {
-        this.sources = new Set;
+        this.sources = new Set();
         this.started = false;
         this.inspectFetchResponse = ((event) => {
             const response = fetchResponseFromEvent(event);
@@ -2313,14 +2483,18 @@ function fetchResponseIsStream(response) {
 }
 
 class ErrorRenderer extends Renderer {
+    static renderElement(currentElement, newElement) {
+        const { documentElement, body } = document;
+        documentElement.replaceChild(newElement, body);
+    }
     async render() {
         this.replaceHeadAndBody();
         this.activateScriptElements();
     }
     replaceHeadAndBody() {
-        const { documentElement, head, body } = document;
+        const { documentElement, head } = document;
         documentElement.replaceChild(this.newHead, head);
-        documentElement.replaceChild(this.newElement, body);
+        this.renderElement(this.currentElement, this.newElement);
     }
     activateScriptElements() {
         for (const replaceableElement of this.scriptElements) {
@@ -2340,9 +2514,29 @@ class ErrorRenderer extends Renderer {
 }
 
 class PageRenderer extends Renderer {
+    static renderElement(currentElement, newElement) {
+        if (document.body && newElement instanceof HTMLBodyElement) {
+            document.body.replaceWith(newElement);
+        }
+        else {
+            document.documentElement.appendChild(newElement);
+        }
+    }
     get shouldRender() {
         return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
     }
+    get reloadReason() {
+        if (!this.newSnapshot.isVisitable) {
+            return {
+                reason: "turbo_visit_control_is_reload",
+            };
+        }
+        if (!this.trackedElementsAreIdentical) {
+            return {
+                reason: "tracked_element_mismatch",
+            };
+        }
+    }
     prepareToRender() {
         this.mergeHead();
     }
@@ -2412,12 +2606,7 @@ class PageRenderer extends Renderer {
         }
     }
     assignNewBody() {
-        if (document.body && this.newElement instanceof HTMLBodyElement) {
-            document.body.replaceWith(this.newElement);
-        }
-        else {
-            document.documentElement.appendChild(this.newElement);
-        }
+        this.renderElement(this.currentElement, this.newElement);
     }
     get newHeadStylesheetElements() {
         return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
@@ -2486,13 +2675,21 @@ class PageView extends View {
         super(...arguments);
         this.snapshotCache = new SnapshotCache(10);
         this.lastRenderedLocation = new URL(location.href);
+        this.forceReloaded = false;
     }
-    renderPage(snapshot, isPreview = false, willRender = true) {
-        const renderer = new PageRenderer(this.snapshot, snapshot, isPreview, willRender);
+    renderPage(snapshot, isPreview = false, willRender = true, visit) {
+        const renderer = new PageRenderer(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender);
+        if (!renderer.shouldRender) {
+            this.forceReloaded = true;
+        }
+        else {
+            visit === null || visit === void 0 ? void 0 : visit.changeHistory();
+        }
         return this.render(renderer);
     }
-    renderError(snapshot) {
-        const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
+    renderError(snapshot, visit) {
+        visit === null || visit === void 0 ? void 0 : visit.changeHistory();
+        const renderer = new ErrorRenderer(this.snapshot, snapshot, ErrorRenderer.renderElement, false);
         return this.render(renderer);
     }
     clearSnapshotCache() {
@@ -2519,10 +2716,50 @@ class PageView extends View {
     }
 }
 
+class Preloader {
+    constructor(delegate) {
+        this.selector = "a[data-turbo-preload]";
+        this.delegate = delegate;
+    }
+    get snapshotCache() {
+        return this.delegate.navigator.view.snapshotCache;
+    }
+    start() {
+        if (document.readyState === "loading") {
+            return document.addEventListener("DOMContentLoaded", () => {
+                this.preloadOnLoadLinksForView(document.body);
+            });
+        }
+        else {
+            this.preloadOnLoadLinksForView(document.body);
+        }
+    }
+    preloadOnLoadLinksForView(element) {
+        for (const link of element.querySelectorAll(this.selector)) {
+            this.preloadURL(link);
+        }
+    }
+    async preloadURL(link) {
+        const location = new URL(link.href);
+        if (this.snapshotCache.has(location)) {
+            return;
+        }
+        try {
+            const response = await fetch(location.toString(), { headers: { "VND.PREFETCH": "true", Accept: "text/html" } });
+            const responseText = await response.text();
+            const snapshot = PageSnapshot.fromHTMLString(responseText);
+            this.snapshotCache.put(location, snapshot);
+        }
+        catch (_) {
+        }
+    }
+}
+
 class Session {
     constructor() {
         this.navigator = new Navigator(this);
         this.history = new History(this);
+        this.preloader = new Preloader(this);
         this.view = new PageView(this, document.documentElement);
         this.adapter = new BrowserAdapter(this);
         this.pageObserver = new PageObserver(this);
@@ -2531,22 +2768,26 @@ class Session {
         this.formSubmitObserver = new FormSubmitObserver(this);
         this.scrollObserver = new ScrollObserver(this);
         this.streamObserver = new StreamObserver(this);
+        this.formLinkInterceptor = new FormLinkInterceptor(this, document.documentElement);
         this.frameRedirector = new FrameRedirector(document.documentElement);
         this.drive = true;
         this.enabled = true;
         this.progressBarDelay = 500;
         this.started = false;
+        this.formMode = "on";
     }
     start() {
         if (!this.started) {
             this.pageObserver.start();
             this.cacheObserver.start();
+            this.formLinkInterceptor.start();
             this.linkClickObserver.start();
             this.formSubmitObserver.start();
             this.scrollObserver.start();
             this.streamObserver.start();
             this.frameRedirector.start();
             this.history.start();
+            this.preloader.start();
             this.started = true;
             this.enabled = true;
         }
@@ -2558,6 +2799,7 @@ class Session {
         if (this.started) {
             this.pageObserver.stop();
             this.cacheObserver.stop();
+            this.formLinkInterceptor.stop();
             this.linkClickObserver.stop();
             this.formSubmitObserver.stop();
             this.scrollObserver.stop();
@@ -2588,6 +2830,9 @@ class Session {
     setProgressBarDelay(delay) {
         this.progressBarDelay = delay;
     }
+    setFormMode(mode) {
+        this.formMode = mode;
+    }
     get location() {
         return this.history.location;
     }
@@ -2596,48 +2841,32 @@ class Session {
     }
     historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
         if (this.enabled) {
-            this.navigator.startVisit(location, restorationIdentifier, { action: "restore", historyChanged: true });
+            this.navigator.startVisit(location, restorationIdentifier, {
+                action: "restore",
+                historyChanged: true,
+            });
         }
         else {
-            this.adapter.pageInvalidated();
+            this.adapter.pageInvalidated({
+                reason: "turbo_disabled",
+            });
         }
     }
     scrollPositionChanged(position) {
         this.history.updateRestorationData({ scrollPosition: position });
     }
-    willFollowLinkToLocation(link, location) {
-        return this.elementDriveEnabled(link)
-            && locationIsVisitable(location, this.snapshot.rootLocation)
-            && this.applicationAllowsFollowingLinkToLocation(link, location);
+    shouldInterceptFormLinkClick(_link) {
+        return true;
+    }
+    formLinkClickIntercepted(_link, _form) { }
+    willFollowLinkToLocation(link, location, event) {
+        return (this.elementDriveEnabled(link) &&
+            locationIsVisitable(location, this.snapshot.rootLocation) &&
+            this.applicationAllowsFollowingLinkToLocation(link, location, event));
     }
     followedLinkToLocation(link, location) {
         const action = this.getActionForLink(link);
-        this.convertLinkWithMethodClickToFormSubmission(link) || this.visit(location.href, { action });
-    }
-    convertLinkWithMethodClickToFormSubmission(link) {
-        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;
-            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 {
-            return false;
-        }
+        this.visit(location.href, { action });
     }
     allowsVisitingLocationWithAction(location, action) {
         return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location);
@@ -2663,9 +2892,9 @@ class Session {
     }
     willSubmitForm(form, submitter) {
         const action = getAction(form, submitter);
-        return this.elementDriveEnabled(form)
-            && (!submitter || this.elementDriveEnabled(submitter))
-            && locationIsVisitable(expandURL(action), this.snapshot.rootLocation);
+        return (this.elementDriveEnabled(form) &&
+            (!submitter || this.formElementDriveEnabled(submitter)) &&
+            locationIsVisitable(expandURL(action), this.snapshot.rootLocation));
     }
     formSubmitted(form, submitter) {
         this.navigator.submitForm(form, submitter);
@@ -2689,16 +2918,23 @@ class Session {
             this.notifyApplicationBeforeCachingSnapshot();
         }
     }
-    allowsImmediateRender({ element }, resume) {
-        const event = this.notifyApplicationBeforeRender(element, resume);
-        return !event.defaultPrevented;
+    allowsImmediateRender({ element }, options) {
+        const event = this.notifyApplicationBeforeRender(element, options);
+        const { defaultPrevented, detail: { render }, } = event;
+        if (this.view.renderer && render) {
+            this.view.renderer.renderElement = render;
+        }
+        return !defaultPrevented;
     }
-    viewRenderedSnapshot(snapshot, isPreview) {
+    viewRenderedSnapshot(_snapshot, _isPreview) {
         this.view.lastRenderedLocation = this.history.location;
         this.notifyApplicationAfterRender();
     }
-    viewInvalidated() {
-        this.adapter.pageInvalidated();
+    preloadOnLoadLinksForView(element) {
+        this.preloader.preloadOnLoadLinksForView(element);
+    }
+    viewInvalidated(reason) {
+        this.adapter.pageInvalidated(reason);
     }
     frameLoaded(frame) {
         this.notifyApplicationAfterFrameLoad(frame);
@@ -2706,19 +2942,26 @@ class Session {
     frameRendered(fetchResponse, frame) {
         this.notifyApplicationAfterFrameRender(fetchResponse, frame);
     }
-    applicationAllowsFollowingLinkToLocation(link, location) {
-        const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
+    applicationAllowsFollowingLinkToLocation(link, location, ev) {
+        const event = this.notifyApplicationAfterClickingLinkToLocation(link, location, ev);
         return !event.defaultPrevented;
     }
     applicationAllowsVisitingLocation(location) {
         const event = this.notifyApplicationBeforeVisitingLocation(location);
         return !event.defaultPrevented;
     }
-    notifyApplicationAfterClickingLinkToLocation(link, location) {
-        return dispatch("turbo:click", { target: link, detail: { url: location.href }, cancelable: true });
+    notifyApplicationAfterClickingLinkToLocation(link, location, event) {
+        return dispatch("turbo:click", {
+            target: link,
+            detail: { url: location.href, originalEvent: event },
+            cancelable: true,
+        });
     }
     notifyApplicationBeforeVisitingLocation(location) {
-        return dispatch("turbo:before-visit", { detail: { url: location.href }, cancelable: true });
+        return dispatch("turbo:before-visit", {
+            detail: { url: location.href },
+            cancelable: true,
+        });
     }
     notifyApplicationAfterVisitingLocation(location, action) {
         markAsBusy(document.documentElement);
@@ -2727,24 +2970,46 @@ class Session {
     notifyApplicationBeforeCachingSnapshot() {
         return dispatch("turbo:before-cache");
     }
-    notifyApplicationBeforeRender(newBody, resume) {
-        return dispatch("turbo:before-render", { detail: { newBody, resume }, cancelable: true });
+    notifyApplicationBeforeRender(newBody, options) {
+        return dispatch("turbo:before-render", {
+            detail: Object.assign({ newBody }, options),
+            cancelable: true,
+        });
     }
     notifyApplicationAfterRender() {
         return dispatch("turbo:render");
     }
     notifyApplicationAfterPageLoad(timing = {}) {
         clearBusyState(document.documentElement);
-        return dispatch("turbo:load", { detail: { url: this.location.href, timing } });
+        return dispatch("turbo:load", {
+            detail: { url: this.location.href, timing },
+        });
     }
     notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
-        dispatchEvent(new HashChangeEvent("hashchange", { oldURL: oldURL.toString(), newURL: newURL.toString() }));
+        dispatchEvent(new HashChangeEvent("hashchange", {
+            oldURL: oldURL.toString(),
+            newURL: newURL.toString(),
+        }));
     }
     notifyApplicationAfterFrameLoad(frame) {
         return dispatch("turbo:frame-load", { target: frame });
     }
     notifyApplicationAfterFrameRender(fetchResponse, frame) {
-        return dispatch("turbo:frame-render", { detail: { fetchResponse }, target: frame, cancelable: true });
+        return dispatch("turbo:frame-render", {
+            detail: { fetchResponse },
+            target: frame,
+            cancelable: true,
+        });
+    }
+    formElementDriveEnabled(element) {
+        if (this.formMode == "off") {
+            return false;
+        }
+        if (this.formMode == "optin") {
+            const form = element === null || element === void 0 ? void 0 : element.closest("form[data-turbo]");
+            return (form === null || form === void 0 ? void 0 : form.getAttribute("data-turbo")) == "true";
+        }
+        return this.elementDriveEnabled(element);
     }
     elementDriveEnabled(element) {
         const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
@@ -2769,18 +3034,6 @@ class Session {
         const action = link.getAttribute("data-turbo-action");
         return isAction(action) ? action : "advance";
     }
-    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;
     }
@@ -2792,11 +3045,59 @@ const deprecatedLocationPropertyDescriptors = {
     absoluteURL: {
         get() {
             return this.toString();
-        }
+        },
+    },
+};
+
+class Cache {
+    constructor(session) {
+        this.session = session;
+    }
+    clear() {
+        this.session.clearCache();
+    }
+    resetCacheControl() {
+        this.setCacheControl("");
+    }
+    exemptPageFromCache() {
+        this.setCacheControl("no-cache");
+    }
+    exemptPageFromPreview() {
+        this.setCacheControl("no-preview");
+    }
+    setCacheControl(value) {
+        setMetaContent("turbo-cache-control", value);
     }
+}
+
+const StreamActions = {
+    after() {
+        this.targetElements.forEach((e) => { var _a; return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e.nextSibling); });
+    },
+    append() {
+        this.removeDuplicateTargetChildren();
+        this.targetElements.forEach((e) => e.append(this.templateContent));
+    },
+    before() {
+        this.targetElements.forEach((e) => { var _a; return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e); });
+    },
+    prepend() {
+        this.removeDuplicateTargetChildren();
+        this.targetElements.forEach((e) => e.prepend(this.templateContent));
+    },
+    remove() {
+        this.targetElements.forEach((e) => e.remove());
+    },
+    replace() {
+        this.targetElements.forEach((e) => e.replaceWith(this.templateContent));
+    },
+    update() {
+        this.targetElements.forEach((e) => e.replaceChildren(this.templateContent));
+    },
 };
 
-const session = new Session;
+const session = new Session();
+const cache = new Cache(session);
 const { navigator: navigator$1 } = session;
 function start() {
     session.start();
@@ -2817,6 +3118,7 @@ function renderStreamMessage(message) {
     session.renderStreamMessage(message);
 }
 function clearCache() {
+    console.warn("Please replace `Turbo.clearCache()` with `Turbo.cache.clear()`. The top-level function is deprecated and will be removed in a future version of Turbo.`");
     session.clearCache();
 }
 function setProgressBarDelay(delay) {
@@ -2825,13 +3127,18 @@ function setProgressBarDelay(delay) {
 function setConfirmMethod(confirmMethod) {
     FormSubmission.confirmMethod = confirmMethod;
 }
+function setFormMode(mode) {
+    session.setFormMode(mode);
+}
 
 var Turbo = /*#__PURE__*/Object.freeze({
     __proto__: null,
     navigator: navigator$1,
     session: session,
+    cache: cache,
     PageRenderer: PageRenderer,
     PageSnapshot: PageSnapshot,
+    FrameRenderer: FrameRenderer,
     start: start,
     registerAdapter: registerAdapter,
     visit: visit,
@@ -2840,39 +3147,52 @@ var Turbo = /*#__PURE__*/Object.freeze({
     renderStreamMessage: renderStreamMessage,
     clearCache: clearCache,
     setProgressBarDelay: setProgressBarDelay,
-    setConfirmMethod: setConfirmMethod
+    setConfirmMethod: setConfirmMethod,
+    setFormMode: setFormMode,
+    StreamActions: StreamActions
 });
 
 class FrameController {
     constructor(element) {
-        this.fetchResponseLoaded = (fetchResponse) => { };
+        this.fetchResponseLoaded = (_fetchResponse) => { };
         this.currentFetchRequest = null;
         this.resolveVisitPromise = () => { };
         this.connected = false;
         this.hasBeenLoaded = false;
-        this.settingSourceURL = false;
+        this.ignoredAttributes = new Set();
+        this.visitCachedSnapshot = ({ element }) => {
+            const frame = element.querySelector("#" + this.element.id);
+            if (frame && this.previousFrameElement) {
+                frame.replaceChildren(...this.previousFrameElement.children);
+            }
+            delete this.previousFrameElement;
+        };
         this.element = element;
         this.view = new FrameView(this, this.element);
         this.appearanceObserver = new AppearanceObserver(this, this.element);
+        this.formLinkInterceptor = new FormLinkInterceptor(this, this.element);
         this.linkInterceptor = new LinkInterceptor(this, this.element);
         this.formInterceptor = new FormInterceptor(this, this.element);
     }
     connect() {
         if (!this.connected) {
             this.connected = true;
-            this.reloadable = false;
             if (this.loadingStyle == FrameLoadingStyle.lazy) {
                 this.appearanceObserver.start();
             }
+            else {
+                this.loadSourceURL();
+            }
+            this.formLinkInterceptor.start();
             this.linkInterceptor.start();
             this.formInterceptor.start();
-            this.sourceURLChanged();
         }
     }
     disconnect() {
         if (this.connected) {
             this.connected = false;
             this.appearanceObserver.stop();
+            this.formLinkInterceptor.stop();
             this.linkInterceptor.stop();
             this.formInterceptor.stop();
         }
@@ -2883,10 +3203,20 @@ class FrameController {
         }
     }
     sourceURLChanged() {
+        if (this.isIgnoringChangesTo("src"))
+            return;
+        if (this.element.isConnected) {
+            this.complete = false;
+        }
         if (this.loadingStyle == FrameLoadingStyle.eager || this.hasBeenLoaded) {
             this.loadSourceURL();
         }
     }
+    completeChanged() {
+        if (this.isIgnoringChangesTo("complete"))
+            return;
+        this.loadSourceURL();
+    }
     loadingStyleChanged() {
         if (this.loadingStyle == FrameLoadingStyle.lazy) {
             this.appearanceObserver.start();
@@ -2897,21 +3227,11 @@ class FrameController {
         }
     }
     async loadSourceURL() {
-        if (!this.settingSourceURL && this.enabled && this.isActive && (this.reloadable || this.sourceURL != this.currentURL)) {
-            const previousURL = this.currentURL;
-            this.currentURL = this.sourceURL;
-            if (this.sourceURL) {
-                try {
-                    this.element.loaded = this.visit(this.sourceURL);
-                    this.appearanceObserver.stop();
-                    await this.element.loaded;
-                    this.hasBeenLoaded = true;
-                }
-                catch (error) {
-                    this.currentURL = previousURL;
-                    throw error;
-                }
-            }
+        if (this.enabled && this.isActive && !this.complete && this.sourceURL) {
+            this.element.loaded = this.visit(expandURL(this.sourceURL));
+            this.appearanceObserver.stop();
+            await this.element.loaded;
+            this.hasBeenLoaded = true;
         }
     }
     async loadResponse(fetchResponse) {
@@ -2923,10 +3243,11 @@ 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, false);
+                const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
                 if (this.view.renderPromise)
                     await this.view.renderPromise;
                 await this.view.render(renderer);
+                this.complete = true;
                 session.frameRendered(fetchResponse, this.element);
                 session.frameLoaded(this.element);
                 this.fetchResponseLoaded(fetchResponse);
@@ -2940,19 +3261,21 @@ class FrameController {
             this.fetchResponseLoaded = () => { };
         }
     }
-    elementAppearedInViewport(element) {
+    elementAppearedInViewport(_element) {
         this.loadSourceURL();
     }
-    shouldInterceptLinkClick(element, url) {
-        if (element.hasAttribute("data-turbo-method")) {
-            return false;
-        }
-        else {
-            return this.shouldInterceptNavigation(element);
-        }
+    shouldInterceptFormLinkClick(link) {
+        return this.shouldInterceptNavigation(link);
+    }
+    formLinkClickIntercepted(link, form) {
+        const frame = this.findFrameElement(link);
+        if (frame)
+            form.setAttribute("data-turbo-frame", frame.id);
+    }
+    shouldInterceptLinkClick(element, _url) {
+        return this.shouldInterceptNavigation(element);
     }
     linkClickIntercepted(element, url) {
-        this.reloadable = true;
         this.navigateFrame(element, url);
     }
     shouldInterceptFormSubmission(element, submitter) {
@@ -2962,19 +3285,18 @@ class FrameController {
         if (this.formSubmission) {
             this.formSubmission.stop();
         }
-        this.reloadable = false;
         this.formSubmission = new FormSubmission(this, element, submitter);
         const { fetchRequest } = this.formSubmission;
         this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
         this.formSubmission.start();
     }
-    prepareHeadersForRequest(headers, request) {
+    prepareHeadersForRequest(headers, _request) {
         headers["Turbo-Frame"] = this.id;
     }
-    requestStarted(request) {
+    requestStarted(_request) {
         markAsBusy(this.element);
     }
-    requestPreventedHandlingResponse(request, response) {
+    requestPreventedHandlingResponse(_request, _response) {
         this.resolveVisitPromise();
     }
     async requestSucceededWithResponse(request, response) {
@@ -2989,7 +3311,7 @@ class FrameController {
         console.error(error);
         this.resolveVisitPromise();
     }
-    requestFinished(request) {
+    requestFinished(_request) {
         clearBusyState(this.element);
     }
     formSubmissionStarted({ formElement }) {
@@ -3009,19 +3331,32 @@ class FrameController {
     formSubmissionFinished({ formElement }) {
         clearBusyState(formElement, this.findFrameElement(formElement));
     }
-    allowsImmediateRender(snapshot, resume) {
-        return true;
+    allowsImmediateRender({ element: newFrame }, options) {
+        const event = dispatch("turbo:before-frame-render", {
+            target: this.element,
+            detail: Object.assign({ newFrame }, options),
+            cancelable: true,
+        });
+        const { defaultPrevented, detail: { render }, } = event;
+        if (this.view.renderer && render) {
+            this.view.renderer.renderElement = render;
+        }
+        return !defaultPrevented;
     }
-    viewRenderedSnapshot(snapshot, isPreview) {
+    viewRenderedSnapshot(_snapshot, _isPreview) { }
+    preloadOnLoadLinksForView(element) {
+        session.preloadOnLoadLinksForView(element);
     }
-    viewInvalidated() {
+    viewInvalidated() { }
+    frameExtracted(element) {
+        this.previousFrameElement = element;
     }
     async visit(url) {
         var _a;
-        const request = new FetchRequest(this, FetchMethod.get, expandURL(url), new URLSearchParams, this.element);
+        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 => {
+        return new Promise((resolve) => {
             this.resolveVisitPromise = () => {
                 this.resolveVisitPromise = () => { };
                 this.currentFetchRequest = null;
@@ -3033,19 +3368,23 @@ 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);
+            const { visitCachedSnapshot } = frame.delegate;
             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 });
+                    session.visit(frame.src, {
+                        action,
+                        response,
+                        visitCachedSnapshot,
+                        willRender: false,
+                    });
                 }
             };
         }
@@ -3059,10 +3398,12 @@ class FrameController {
         let element;
         const id = CSS.escape(this.id);
         try {
-            if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
+            element = activateElement(container.querySelector(`turbo-frame#${id}`), this.sourceURL);
+            if (element) {
                 return element;
             }
-            if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
+            element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.sourceURL);
+            if (element) {
                 await element.loaded;
                 return await this.extractForeignFrameElement(element);
             }
@@ -3110,24 +3451,10 @@ class FrameController {
             return this.element.src;
         }
     }
-    get reloadable() {
-        const frame = this.findFrameElement(this.element);
-        return frame.hasAttribute("reloadable");
-    }
-    set reloadable(value) {
-        const frame = this.findFrameElement(this.element);
-        if (value) {
-            frame.setAttribute("reloadable", "");
-        }
-        else {
-            frame.removeAttribute("reloadable");
-        }
-    }
     set sourceURL(sourceURL) {
-        this.settingSourceURL = true;
-        this.element.src = sourceURL !== null && sourceURL !== void 0 ? sourceURL : null;
-        this.currentURL = this.element.src;
-        this.settingSourceURL = false;
+        this.ignoringChangesToAttribute("src", () => {
+            this.element.src = sourceURL !== null && sourceURL !== void 0 ? sourceURL : null;
+        });
     }
     get loadingStyle() {
         return this.element.loading;
@@ -3135,6 +3462,19 @@ class FrameController {
     get isLoading() {
         return this.formSubmission !== undefined || this.resolveVisitPromise() !== undefined;
     }
+    get complete() {
+        return this.element.hasAttribute("complete");
+    }
+    set complete(value) {
+        this.ignoringChangesToAttribute("complete", () => {
+            if (value) {
+                this.element.setAttribute("complete", "");
+            }
+            else {
+                this.element.removeAttribute("complete");
+            }
+        });
+    }
     get isActive() {
         return this.element.isActive && this.connected;
     }
@@ -3144,16 +3484,13 @@ class FrameController {
         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;
+    isIgnoringChangesTo(attributeName) {
+        return this.ignoredAttributes.has(attributeName);
+    }
+    ignoringChangesToAttribute(attributeName, callback) {
+        this.ignoredAttributes.add(attributeName);
+        callback();
+        this.ignoredAttributes.delete(attributeName);
     }
 }
 function getFrameElementById(id) {
@@ -3181,35 +3518,6 @@ function activateElement(element, currentURL) {
     }
 }
 
-const StreamActions = {
-    after() {
-        this.targetElements.forEach(e => { var _a; return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e.nextSibling); });
-    },
-    append() {
-        this.removeDuplicateTargetChildren();
-        this.targetElements.forEach(e => e.append(this.templateContent));
-    },
-    before() {
-        this.targetElements.forEach(e => { var _a; return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e); });
-    },
-    prepend() {
-        this.removeDuplicateTargetChildren();
-        this.targetElements.forEach(e => e.prepend(this.templateContent));
-    },
-    remove() {
-        this.targetElements.forEach(e => e.remove());
-    },
-    replace() {
-        this.targetElements.forEach(e => e.replaceWith(this.templateContent));
-    },
-    update() {
-        this.targetElements.forEach(e => {
-            e.innerHTML = "";
-            e.append(this.templateContent);
-        });
-    }
-};
-
 class StreamElement extends HTMLElement {
     async connectedCallback() {
         try {
@@ -3224,12 +3532,12 @@ class StreamElement extends HTMLElement {
     }
     async render() {
         var _a;
-        return (_a = this.renderPromise) !== null && _a !== void 0 ? _a : (this.renderPromise = (async () => {
+        return ((_a = this.renderPromise) !== null && _a !== void 0 ? _a : (this.renderPromise = (async () => {
             if (this.dispatchEvent(this.beforeRenderEvent)) {
                 await nextAnimationFrame();
                 this.performAction();
             }
-        })());
+        })()));
     }
     disconnect() {
         try {
@@ -3238,13 +3546,13 @@ class StreamElement extends HTMLElement {
         catch (_a) { }
     }
     removeDuplicateTargetChildren() {
-        this.duplicateChildren.forEach(c => c.remove());
+        this.duplicateChildren.forEach((c) => c.remove());
     }
     get duplicateChildren() {
         var _a;
-        const existingChildren = this.targetElements.flatMap(e => [...e.children]).filter(c => !!c.id);
-        const newChildrenIds = [...(_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children].filter(c => !!c.id).map(c => c.id);
-        return existingChildren.filter(c => newChildrenIds.includes(c.id));
+        const existingChildren = this.targetElements.flatMap((e) => [...e.children]).filter((c) => !!c.id);
+        const newChildrenIds = [...(((_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children) || [])].filter((c) => !!c.id).map((c) => c.id);
+        return existingChildren.filter((c) => newChildrenIds.includes(c.id));
     }
     get performAction() {
         if (this.action) {
@@ -3293,7 +3601,10 @@ class StreamElement extends HTMLElement {
         return (_b = ((_a = this.outerHTML.match(/<[^>]+>/)) !== null && _a !== void 0 ? _a : [])[0]) !== null && _b !== void 0 ? _b : "<turbo-stream>";
     }
     get beforeRenderEvent() {
-        return new CustomEvent("turbo:before-stream-render", { bubbles: true, cancelable: true });
+        return new CustomEvent("turbo:before-stream-render", {
+            bubbles: true,
+            cancelable: true,
+        });
     }
     get targetElementsById() {
         var _a;
@@ -3317,9 +3628,35 @@ class StreamElement extends HTMLElement {
     }
 }
 
+class StreamSourceElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.streamSource = null;
+    }
+    connectedCallback() {
+        this.streamSource = this.src.match(/^ws{1,2}:/) ? new WebSocket(this.src) : new EventSource(this.src);
+        connectStreamSource(this.streamSource);
+    }
+    disconnectedCallback() {
+        if (this.streamSource) {
+            disconnectStreamSource(this.streamSource);
+        }
+    }
+    get src() {
+        return this.getAttribute("src") || "";
+    }
+}
+
 FrameElement.delegateConstructor = FrameController;
-customElements.define("turbo-frame", FrameElement);
-customElements.define("turbo-stream", StreamElement);
+if (customElements.get("turbo-frame") === undefined) {
+    customElements.define("turbo-frame", FrameElement);
+}
+if (customElements.get("turbo-stream") === undefined) {
+    customElements.define("turbo-stream", StreamElement);
+}
+if (customElements.get("turbo-stream-source") === undefined) {
+    customElements.define("turbo-stream-source", StreamSourceElement);
+}
 
 (() => {
     let element = document.currentScript;
@@ -3327,7 +3664,8 @@ customElements.define("turbo-stream", StreamElement);
         return;
     if (element.hasAttribute("data-turbo-suppress-warning"))
         return;
-    while (element = element.parentElement) {
+    element = element.parentElement;
+    while (element) {
         if (element == document.body) {
             return console.warn(unindent `
         You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!
@@ -3340,10 +3678,11 @@ customElements.define("turbo-stream", StreamElement);
         Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
       `, element.outerHTML);
         }
+        element = element.parentElement;
     }
 })();
 
 window.Turbo = Turbo;
 start();
 
-export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setProgressBarDelay, start, visit };
+export { FrameRenderer, PageRenderer, PageSnapshot, StreamActions, cache, clearCache, connectStreamSource, disconnectStreamSource, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setFormMode, setProgressBarDelay, start, visit };