@hotwired/turbo 7.1.0 → 7.2.0-rc.1

package/dist/turbo.es2017-esm.js

@@ -1,20 +1,20 @@
 /*
-Turbo 7.1.0
-Copyright © 2021 Basecamp, LLC
+Turbo 7.2.0-rc.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,13 +129,18 @@ class FrameElement extends HTMLElement {
     }
     reload() {
         const { src } = this;
+        this.removeAttribute("complete");
         this.src = null;
         this.src = src;
+        return this.loaded;
     }
     attributeChangedCallback(name) {
         if (name == "loading") {
             this.delegate.loadingStyleChanged();
         }
+        else if (name == "complete") {
+            this.delegate.completeChanged();
+        }
         else if (name == "src") {
             this.delegate.sourceURLChanged();
         }
@@ -200,8 +205,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 +220,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 +232,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 +243,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);
@@ -306,8 +311,42 @@ class FetchResponse {
     }
 }
 
+function isAction(action) {
+    return action == "advance" || action == "replace" || action == "restore";
+}
+
+function activateScriptElement(element) {
+    if (element.getAttribute("data-turbo-eval") == "false") {
+        return element;
+    }
+    else {
+        const createdScriptElement = document.createElement("script");
+        const cspNonce = getMetaContent("csp-nonce");
+        if (cspNonce) {
+            createdScriptElement.nonce = cspNonce;
+        }
+        createdScriptElement.textContent = element.textContent;
+        createdScriptElement.async = false;
+        copyElementAttributes(createdScriptElement, element);
+        return createdScriptElement;
+    }
+}
+function copyElementAttributes(destinationElement, sourceElement) {
+    for (const { name, value } of sourceElement.attributes) {
+        destinationElement.setAttribute(name, value);
+    }
+}
+function createDocumentFragment(html) {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    return template.content;
+}
 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 +356,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 +371,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 +380,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,15 +394,19 @@ 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;
     }
     return null;
 }
+function hasAttribute(attributeName, ...elements) {
+    return elements.some((element) => element && element.hasAttribute(attributeName));
+}
 function markAsBusy(...elements) {
     for (const element of elements) {
         if (element.localName == "turbo-frame") {
@@ -379,6 +423,51 @@ function clearBusyState(...elements) {
         element.removeAttribute("aria-busy");
     }
 }
+function waitForLoad(element, timeoutInMilliseconds = 2000) {
+    return new Promise((resolve) => {
+        const onComplete = () => {
+            element.removeEventListener("error", onComplete);
+            element.removeEventListener("load", onComplete);
+            resolve();
+        };
+        element.addEventListener("load", onComplete, { once: true });
+        element.addEventListener("error", onComplete, { once: true });
+        setTimeout(resolve, timeoutInMilliseconds);
+    });
+}
+function getHistoryMethodForAction(action) {
+    switch (action) {
+        case "replace":
+            return history.replaceState;
+        case "advance":
+        case "restore":
+            return history.pushState;
+    }
+}
+function getVisitAction(...elements) {
+    const action = getAttribute("data-turbo-action", ...elements);
+    return isAction(action) ? action : null;
+}
+function getBodyElementId() {
+    return getMetaContent("turbo-body");
+}
+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,17 +479,22 @@ 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;
@@ -431,7 +525,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;
             }
@@ -442,7 +536,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);
         }
@@ -463,12 +561,12 @@ class FetchRequest {
             redirect: "follow",
             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() {
@@ -477,16 +575,19 @@ class FetchRequest {
     get abortSignal() {
         return this.abortController.signal;
     }
+    acceptResponseType(mimeType) {
+        this.headers["Accept"] = [mimeType, this.headers["Accept"]].join(", ");
+    }
     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,
-                resume: this.resolveRequestPromise
+                resume: this.resolveRequestPromise,
             },
-            target: this.target
+            target: this.target,
         });
         if (event.defaultPrevented)
             await requestInterception;
@@ -496,7 +597,7 @@ class FetchRequest {
 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);
@@ -521,40 +622,29 @@ class AppearanceObserver {
 }
 
 class StreamMessage {
-    constructor(html) {
-        this.templateElement = document.createElement("template");
-        this.templateElement.innerHTML = html;
+    constructor(fragment) {
+        this.fragment = importStreamElements(fragment);
     }
     static wrap(message) {
         if (typeof message == "string") {
-            return new this(message);
+            return new this(createDocumentFragment(message));
         }
         else {
             return message;
         }
     }
-    get fragment() {
-        const fragment = document.createDocumentFragment();
-        for (const element of this.foreignElements) {
-            fragment.appendChild(document.importNode(element, true));
+}
+StreamMessage.contentType = "text/vnd.turbo-stream.html";
+function importStreamElements(fragment) {
+    for (const element of fragment.querySelectorAll("turbo-stream")) {
+        const streamElement = document.importNode(element, true);
+        for (const inertScriptElement of streamElement.templateElement.content.querySelectorAll("script")) {
+            inertScriptElement.replaceWith(activateScriptElement(inertScriptElement));
         }
-        return fragment;
-    }
-    get foreignElements() {
-        return this.templateChildren.reduce((streamElements, child) => {
-            if (child.tagName.toLowerCase() == "turbo-stream") {
-                return [...streamElements, child];
-            }
-            else {
-                return streamElements;
-            }
-        }, []);
-    }
-    get templateChildren() {
-        return Array.from(this.templateElement.content.children);
+        element.replaceWith(streamElement);
     }
+    return fragment;
 }
-StreamMessage.contentType = "text/vnd.turbo-stream.html";
 
 var FormSubmissionState;
 (function (FormSubmissionState) {
@@ -573,9 +663,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 {
@@ -592,8 +685,8 @@ class FormSubmission {
         this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
         this.mustRedirect = mustRedirect;
     }
-    static confirmMethod(message, element) {
-        return confirm(message);
+    static confirmMethod(message, _element, _submitter) {
+        return Promise.resolve(confirm(message));
     }
     get method() {
         var _a;
@@ -602,8 +695,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 || "";
+        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) {
@@ -625,16 +723,11 @@ class FormSubmission {
             return entries.concat(typeof value == "string" ? [[name, value]] : []);
         }, []);
     }
-    get confirmationMessage() {
-        return this.formElement.getAttribute("data-turbo-confirm");
-    }
-    get needsConfirmation() {
-        return this.confirmationMessage !== null;
-    }
     async start() {
         const { initialized, requesting } = FormSubmissionState;
-        if (this.needsConfirmation) {
-            const answer = FormSubmission.confirmMethod(this.confirmationMessage, this.formElement);
+        const confirmationMessage = getAttribute("data-turbo-confirm", this.submitter, this.formElement);
+        if (typeof confirmationMessage === "string") {
+            const answer = await FormSubmission.confirmMethod(confirmationMessage, this.formElement, this.submitter);
             if (!answer) {
                 return;
             }
@@ -658,14 +751,19 @@ class FormSubmission {
             if (token) {
                 headers["X-CSRF-Token"] = token;
             }
-            headers["Accept"] = [StreamMessage.contentType, headers["Accept"]].join(", ");
+        }
+        if (this.requestAcceptsTurboStreamResponse(request)) {
+            request.acceptResponseType(StreamMessage.contentType);
         }
     }
-    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) {
@@ -691,25 +789,35 @@ class FormSubmission {
     }
     requestErrored(request, error) {
         this.result = { success: false, error };
+        dispatch("turbo:fetch-request-error", {
+            target: this.formElement,
+            detail: { request, 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 || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+    }
 }
 function buildFormData(formElement, submitter) {
     const formData = new FormData(formElement);
     const name = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("name");
     const value = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("value");
-    if (name && value != null && formData.get(name) != value) {
-        formData.append(name, value);
+    if (name) {
+        formData.append(name, value || "");
     }
     return formData;
 }
@@ -723,15 +831,11 @@ 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;
+    const searchParams = new URLSearchParams();
     for (const [name, value] of entries) {
         if (value instanceof File)
             continue;
@@ -745,6 +849,9 @@ class Snapshot {
     constructor(element) {
         this.element = element;
     }
+    get activeElement() {
+        return this.element.ownerDocument.activeElement;
+    }
     get children() {
         return [...this.element.children];
     }
@@ -758,13 +865,20 @@ class Snapshot {
         return this.element.isConnected;
     }
     get firstAutofocusableElement() {
-        return this.element.querySelector("[autofocus]");
+        const inertDisabledOrHidden = "[inert], :disabled, [hidden], details:not([open]), dialog:not([open])";
+        for (const element of this.element.querySelectorAll("[autofocus]")) {
+            if (element.closest(inertDisabledOrHidden) == null)
+                return element;
+            else
+                continue;
+        }
+        return null;
     }
     get permanentElements() {
-        return [...this.element.querySelectorAll("[id][data-turbo-permanent]")];
+        return queryPermanentElementsAll(this.element);
     }
     getPermanentElementById(id) {
-        return this.element.querySelector(`#${id}[data-turbo-permanent]`);
+        return getPermanentElementById(this.element, id);
     }
     getPermanentElementMapForSnapshot(snapshot) {
         const permanentElementMap = {};
@@ -778,36 +892,66 @@ class Snapshot {
         return permanentElementMap;
     }
 }
+function getPermanentElementById(node, id) {
+    return node.querySelector(`#${id}[data-turbo-permanent]`);
+}
+function queryPermanentElementsAll(node) {
+    return node.querySelectorAll("[id][data-turbo-permanent]");
+}
 
-class FormInterceptor {
-    constructor(delegate, element) {
+class FormSubmitObserver {
+    constructor(delegate, eventTarget) {
+        this.started = false;
+        this.submitCaptured = () => {
+            this.eventTarget.removeEventListener("submit", this.submitBubbled, false);
+            this.eventTarget.addEventListener("submit", this.submitBubbled, false);
+        };
         this.submitBubbled = ((event) => {
-            const form = event.target;
-            if (!event.defaultPrevented && form instanceof HTMLFormElement && form.closest("turbo-frame, html") == this.element) {
+            if (!event.defaultPrevented) {
+                const form = event.target instanceof HTMLFormElement ? event.target : undefined;
                 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)) {
+                if (form &&
+                    submissionDoesNotDismissDialog(form, submitter) &&
+                    submissionDoesNotTargetIFrame(form, submitter) &&
+                    this.delegate.willSubmitForm(form, submitter)) {
                     event.preventDefault();
-                    event.stopImmediatePropagation();
-                    this.delegate.formSubmissionIntercepted(form, submitter);
+                    this.delegate.formSubmitted(form, submitter);
                 }
             }
         });
         this.delegate = delegate;
-        this.element = element;
+        this.eventTarget = eventTarget;
     }
     start() {
-        this.element.addEventListener("submit", this.submitBubbled);
+        if (!this.started) {
+            this.eventTarget.addEventListener("submit", this.submitCaptured, true);
+            this.started = true;
+        }
     }
     stop() {
-        this.element.removeEventListener("submit", this.submitBubbled);
+        if (this.started) {
+            this.eventTarget.removeEventListener("submit", this.submitCaptured, true);
+            this.started = false;
+        }
+    }
+}
+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 View {
     constructor(delegate, element) {
-        this.resolveRenderPromise = (value) => { };
-        this.resolveInterceptionPromise = (value) => { };
+        this.resolveRenderPromise = (_value) => { };
+        this.resolveInterceptionPromise = (_value) => { };
         this.delegate = delegate;
         this.element = element;
     }
@@ -852,15 +996,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);
+                await this.prepareToRenderSnapshot(renderer);
+                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 {
@@ -870,15 +1016,15 @@ class View {
             }
         }
         else {
-            this.invalidate();
+            this.invalidate(renderer.reloadReason);
         }
     }
-    invalidate() {
-        this.delegate.viewInvalidated();
+    invalidate(reason) {
+        this.delegate.viewInvalidated(reason);
     }
-    prepareToRenderSnapshot(renderer) {
+    async prepareToRenderSnapshot(renderer) {
         this.markAsPreview(renderer.isPreview);
-        renderer.prepareToRender();
+        await renderer.prepareToRender();
     }
     markAsPreview(isPreview) {
         if (isPreview) {
@@ -905,65 +1051,125 @@ class FrameView extends View {
     }
 }
 
-class LinkInterceptor {
-    constructor(delegate, element) {
-        this.clickBubbled = (event) => {
-            if (this.respondsToEventTarget(event.target)) {
-                this.clickEvent = event;
-            }
-            else {
-                delete this.clickEvent;
-            }
+class LinkClickObserver {
+    constructor(delegate, eventTarget) {
+        this.started = false;
+        this.clickCaptured = () => {
+            this.eventTarget.removeEventListener("click", this.clickBubbled, false);
+            this.eventTarget.addEventListener("click", this.clickBubbled, false);
         };
-        this.linkClicked = ((event) => {
-            if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
-                if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
-                    this.clickEvent.preventDefault();
-                    event.preventDefault();
-                    this.delegate.linkClickIntercepted(event.target, event.detail.url);
+        this.clickBubbled = (event) => {
+            if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
+                const target = (event.composedPath && event.composedPath()[0]) || event.target;
+                const link = this.findLinkFromClickTarget(target);
+                if (link && doesNotTargetIFrame(link)) {
+                    const location = this.getLocationForLink(link);
+                    if (this.delegate.willFollowLinkToLocation(link, location, event)) {
+                        event.preventDefault();
+                        this.delegate.followedLinkToLocation(link, location);
+                    }
                 }
             }
-            delete this.clickEvent;
-        });
-        this.willVisit = () => {
-            delete this.clickEvent;
         };
         this.delegate = delegate;
-        this.element = element;
+        this.eventTarget = eventTarget;
+    }
+    start() {
+        if (!this.started) {
+            this.eventTarget.addEventListener("click", this.clickCaptured, true);
+            this.started = true;
+        }
+    }
+    stop() {
+        if (this.started) {
+            this.eventTarget.removeEventListener("click", this.clickCaptured, true);
+            this.started = false;
+        }
+    }
+    clickEventIsSignificant(event) {
+        return !((event.target && event.target.isContentEditable) ||
+            event.defaultPrevented ||
+            event.which > 1 ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.shiftKey);
+    }
+    findLinkFromClickTarget(target) {
+        if (target instanceof Element) {
+            return target.closest("a[href]:not([target^=_]):not([download])");
+        }
+    }
+    getLocationForLink(link) {
+        return expandURL(link.getAttribute("href") || "");
+    }
+}
+function doesNotTargetIFrame(anchor) {
+    for (const element of document.getElementsByName(anchor.target)) {
+        if (element instanceof HTMLIFrameElement)
+            return false;
+    }
+    return true;
+}
+
+class FormLinkClickObserver {
+    constructor(delegate, element) {
+        this.delegate = delegate;
+        this.linkClickObserver = new LinkClickObserver(this, element);
     }
     start() {
-        this.element.addEventListener("click", this.clickBubbled);
-        document.addEventListener("turbo:click", this.linkClicked);
-        document.addEventListener("turbo:before-visit", this.willVisit);
+        this.linkClickObserver.start();
     }
     stop() {
-        this.element.removeEventListener("click", this.clickBubbled);
-        document.removeEventListener("turbo:click", this.linkClicked);
-        document.removeEventListener("turbo:before-visit", this.willVisit);
+        this.linkClickObserver.stop();
+    }
+    willFollowLinkToLocation(link, location, originalEvent) {
+        return (this.delegate.willSubmitFormLinkToLocation(link, location, originalEvent) &&
+            link.hasAttribute("data-turbo-method"));
     }
-    respondsToEventTarget(target) {
-        const element = target instanceof Element
-            ? target
-            : target instanceof Node
-                ? target.parentElement
-                : null;
-        return element && element.closest("turbo-frame, html") == this.element;
+    followedLinkToLocation(link, location) {
+        const action = location.href;
+        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 turboAction = link.getAttribute("data-turbo-action");
+        if (turboAction)
+            form.setAttribute("data-turbo-action", turboAction);
+        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.submittedFormLinkToLocation(link, location, form);
+        document.body.appendChild(form);
+        form.addEventListener("turbo:submit-end", () => form.remove(), { once: true });
+        requestAnimationFrame(() => form.requestSubmit());
     }
 }
 
 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);
         }
     }
@@ -972,6 +1178,7 @@ class Bardo {
             const [currentPermanentElement] = this.permanentElementMap[id];
             this.replaceCurrentPermanentElementWithClone(currentPermanentElement);
             this.replacePlaceholderWithPermanentElement(currentPermanentElement);
+            this.delegate.leavingBardo(currentPermanentElement);
         }
     }
     replaceNewPermanentElementWithPlaceholder(permanentElement) {
@@ -987,7 +1194,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]")];
@@ -1001,16 +1208,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;
     }
@@ -1020,23 +1232,8 @@ class Renderer {
             delete this.resolvingFunctions;
         }
     }
-    createScriptElement(element) {
-        if (element.getAttribute("data-turbo-eval") == "false") {
-            return element;
-        }
-        else {
-            const createdScriptElement = document.createElement("script");
-            if (this.cspNonce) {
-                createdScriptElement.nonce = this.cspNonce;
-            }
-            createdScriptElement.textContent = element.textContent;
-            createdScriptElement.async = false;
-            copyElementAttributes(createdScriptElement, element);
-            return createdScriptElement;
-        }
-    }
     preservingPermanentElements(callback) {
-        Bardo.preservingPermanentElements(this.permanentElementMap, callback);
+        Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
     }
     focusFirstAutofocusableElement() {
         const element = this.connectedSnapshot.firstAutofocusableElement;
@@ -1044,6 +1241,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;
     }
@@ -1056,21 +1266,28 @@ class Renderer {
     get permanentElementMap() {
         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");
-    }
-}
-function copyElementAttributes(destinationElement, sourceElement) {
-    for (const { name, value } of [...sourceElement.attributes]) {
-        destinationElement.setAttribute(name, value);
-    }
 }
 function elementIsFocusable(element) {
     return element && typeof element.focus == "function";
 }
 
 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;
     }
@@ -1086,23 +1303,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.willRenderFrame(this.currentElement, this.newElement);
+        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;
             }
         }
@@ -1110,7 +1320,7 @@ class FrameRenderer extends Renderer {
     }
     activateScriptElements() {
         for (const inertScriptElement of this.newScriptElements) {
-            const activatedScriptElement = this.createScriptElement(inertScriptElement);
+            const activatedScriptElement = activateScriptElement(inertScriptElement);
             inertScriptElement.replaceWith(activatedScriptElement);
         }
     }
@@ -1126,6 +1336,14 @@ function readScrollLogicalPosition(value, defaultValue) {
         return defaultValue;
     }
 }
+function readScrollBehavior(value, defaultValue) {
+    if (value == "auto" || value == "smooth") {
+        return value;
+    }
+    else {
+        return defaultValue;
+    }
+}
 
 class ProgressBar {
     constructor() {
@@ -1149,7 +1367,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;
@@ -1208,13 +1426,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() {
@@ -1222,6 +1443,9 @@ class ProgressBar {
         element.className = "turbo-progress-bar";
         return element;
     }
+    get cspNonce() {
+        return getMetaContent("csp-nonce");
+    }
 }
 ProgressBar.animationDuration = 300;
 
@@ -1238,14 +1462,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) {
@@ -1256,8 +1480,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);
     }
@@ -1277,13 +1501,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);
     }
@@ -1300,19 +1522,19 @@ function elementIsTracked(element) {
     return element.getAttribute("data-turbo-track") == "reload";
 }
 function elementIsScript(element) {
-    const tagName = element.tagName.toLowerCase();
+    const tagName = element.localName;
     return tagName == "script";
 }
 function elementIsNoscript(element) {
-    const tagName = element.tagName.toLowerCase();
+    const tagName = element.localName;
     return tagName == "noscript";
 }
 function elementIsStylesheet(element) {
-    const tagName = element.tagName.toLowerCase();
+    const tagName = element.localName;
     return tagName == "style" || (tagName == "link" && element.getAttribute("rel") == "stylesheet");
 }
 function elementIsMetaElementWithName(element, name) {
-    const tagName = element.tagName.toLowerCase();
+    const tagName = element.localName;
     return tagName == "meta" && element.getAttribute("name") == name;
 }
 function elementWithoutNonce(element) {
@@ -1337,7 +1559,20 @@ class PageSnapshot extends Snapshot {
         return new this(body, new HeadSnapshot(head));
     }
     clone() {
-        return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
+        const clonedElement = this.element.cloneNode(true);
+        const selectElements = this.element.querySelectorAll("select");
+        const clonedSelectElements = clonedElement.querySelectorAll("select");
+        for (const [index, source] of selectElements.entries()) {
+            const clone = clonedSelectElements[index];
+            for (const option of clone.selectedOptions)
+                option.selected = false;
+            for (const option of source.selectedOptions)
+                clone.options[option.index].selected = true;
+        }
+        for (const clonedPasswordInput of clonedElement.querySelectorAll('input[type="password"]')) {
+            clonedPasswordInput.value = "";
+        }
+        return new PageSnapshot(clonedElement, this.headSnapshot);
     }
     get headElement() {
         return this.headSnapshot.element;
@@ -1384,6 +1619,10 @@ const defaultOptions = {
     historyChanged: false,
     visitCachedSnapshot: () => { },
     willRender: true,
+    updateHistory: true,
+    shouldCacheSnapshot: true,
+    acceptsStreamResponse: false,
+    initiator: document.documentElement,
 };
 var SystemStatusCode;
 (function (SystemStatusCode) {
@@ -1393,17 +1632,19 @@ var SystemStatusCode;
 })(SystemStatusCode || (SystemStatusCode = {}));
 class Visit {
     constructor(delegate, location, restorationIdentifier, options = {}) {
-        this.identifier = uuid();
         this.timingMetrics = {};
         this.followedRedirect = false;
         this.historyChanged = false;
         this.scrolled = false;
+        this.shouldCacheSnapshot = true;
+        this.acceptsStreamResponse = false;
         this.snapshotCached = false;
         this.state = VisitState.initialized;
         this.delegate = delegate;
         this.location = location;
         this.restorationIdentifier = restorationIdentifier || uuid();
-        const { action, historyChanged, referrer, snapshotHTML, response, visitCachedSnapshot, willRender } = Object.assign(Object.assign({}, defaultOptions), options);
+        this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }));
+        const { action, historyChanged, referrer, snapshotHTML, response, visitCachedSnapshot, willRender, updateHistory, shouldCacheSnapshot, acceptsStreamResponse, initiator, } = Object.assign(Object.assign({}, defaultOptions), options);
         this.action = action;
         this.historyChanged = historyChanged;
         this.referrer = referrer;
@@ -1412,7 +1653,11 @@ class Visit {
         this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
         this.visitCachedSnapshot = visitCachedSnapshot;
         this.willRender = willRender;
+        this.updateHistory = updateHistory;
         this.scrolled = !willRender;
+        this.shouldCacheSnapshot = shouldCacheSnapshot;
+        this.acceptsStreamResponse = acceptsStreamResponse;
+        this.initiator = initiator;
     }
     get adapter() {
         return this.delegate.adapter;
@@ -1444,28 +1689,33 @@ class Visit {
             }
             this.cancelRender();
             this.state = VisitState.canceled;
+            this.resolvingFunctions.reject();
         }
     }
     complete() {
         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);
+            }
+            this.resolvingFunctions.resolve();
         }
     }
     fail() {
         if (this.state == VisitState.started) {
             this.state = VisitState.failed;
             this.adapter.visitFailed(this);
+            this.resolvingFunctions.reject();
         }
     }
     changeHistory() {
         var _a;
-        if (!this.historyChanged) {
+        if (!this.historyChanged && this.updateHistory) {
             const actionForHistory = this.location.href === ((_a = this.referrer) === null || _a === void 0 ? void 0 : _a.href) ? "replace" : this.action;
-            const method = this.getHistoryMethodForAction(actionForHistory);
+            const method = getHistoryMethodForAction(actionForHistory);
             this.history.update(method, this.location, this.restorationIdentifier);
             this.historyChanged = true;
         }
@@ -1475,7 +1725,7 @@ class Visit {
             this.simulateRequest();
         }
         else if (this.shouldIssueRequest() && !this.request) {
-            this.request = new FetchRequest(this, FetchMethod.get, this.location);
+            this.request = new FetchRequest(this, FetchMethod.get, this.location, undefined, this.initiator);
             this.request.perform();
         }
     }
@@ -1510,16 +1760,18 @@ class Visit {
         if (this.response) {
             const { statusCode, responseHTML } = this.response;
             this.render(async () => {
-                this.cacheSnapshot();
+                if (this.shouldCacheSnapshot)
+                    this.cacheSnapshot();
                 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.performScroll();
                     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();
                 }
@@ -1554,7 +1806,8 @@ 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.performScroll();
                     this.adapter.visitRendered(this);
                     if (!isPreview) {
                         this.complete();
@@ -1567,8 +1820,8 @@ 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",
+                response: this.response,
             });
             this.followedRedirect = true;
         }
@@ -1577,20 +1830,28 @@ class Visit {
         if (this.isSamePage) {
             this.render(async () => {
                 this.cacheSnapshot();
+                this.performScroll();
                 this.adapter.visitRendered(this);
             });
         }
     }
+    prepareHeadersForRequest(headers, request) {
+        if (this.acceptsStreamResponse) {
+            request.acceptResponseType(StreamMessage.contentType);
+        }
+    }
     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;
@@ -1601,20 +1862,26 @@ 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();
     }
     performScroll() {
-        if (!this.scrolled) {
+        if (!this.scrolled && !this.view.forceReloaded) {
             if (this.action == "restore") {
                 this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop();
             }
@@ -1649,9 +1916,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() {
@@ -1670,18 +1939,17 @@ 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();
     }
     cancelRender() {
         if (this.frame) {
@@ -1696,19 +1964,19 @@ function isSuccessful(statusCode) {
 
 class BrowserAdapter {
     constructor(session) {
-        this.progressBar = new ProgressBar;
+        this.progressBar = new ProgressBar();
         this.showProgressBar = () => {
             this.progressBar.show();
         };
         this.session = session;
     }
     visitProposedToLocation(location, options) {
-        this.navigator.startVisit(location, uuid(), options);
+        return this.navigator.startVisit(location, (options === null || options === void 0 ? void 0 : options.restorationIdentifier) || uuid(), options);
     }
     visitStarted(visit) {
+        this.location = visit.location;
         visit.loadCachedSnapshot();
         visit.issueRequest();
-        visit.changeHistory();
         visit.goToSamePageAnchor();
     }
     visitRequestStarted(visit) {
@@ -1728,29 +1996,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();
-    }
-    visitFailed(visit) {
+    visitCompleted(_visit) { }
+    pageInvalidated(reason) {
+        this.reload(reason);
     }
-    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();
     }
@@ -1776,8 +2046,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;
@@ -1787,94 +2060,60 @@ class BrowserAdapter {
 class CacheObserver {
     constructor() {
         this.started = false;
-    }
-    start() {
-        if (!this.started) {
-            this.started = true;
-            addEventListener("turbo:before-cache", this.removeStaleElements, false);
-        }
-    }
-    stop() {
-        if (this.started) {
-            this.started = false;
-            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 {
-    constructor(delegate) {
-        this.started = false;
-        this.submitCaptured = () => {
-            removeEventListener("submit", this.submitBubbled, false);
-            addEventListener("submit", this.submitBubbled, false);
-        };
-        this.submitBubbled = ((event) => {
-            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);
-                    }
-                }
+        this.removeStaleElements = ((_event) => {
+            const staleElements = [...document.querySelectorAll('[data-turbo-cache="false"]')];
+            for (const element of staleElements) {
+                element.remove();
             }
         });
-        this.delegate = delegate;
     }
     start() {
         if (!this.started) {
-            addEventListener("submit", this.submitCaptured, true);
             this.started = true;
+            addEventListener("turbo:before-cache", this.removeStaleElements, false);
         }
     }
     stop() {
         if (this.started) {
-            removeEventListener("submit", this.submitCaptured, true);
             this.started = false;
+            removeEventListener("turbo:before-cache", this.removeStaleElements, false);
         }
     }
 }
 
 class FrameRedirector {
-    constructor(element) {
+    constructor(session, element) {
+        this.session = session;
         this.element = element;
-        this.linkInterceptor = new LinkInterceptor(this, element);
-        this.formInterceptor = new FormInterceptor(this, element);
+        this.linkClickObserver = new LinkClickObserver(this, element);
+        this.formSubmitObserver = new FormSubmitObserver(this, element);
     }
     start() {
-        this.linkInterceptor.start();
-        this.formInterceptor.start();
+        this.linkClickObserver.start();
+        this.formSubmitObserver.start();
     }
     stop() {
-        this.linkInterceptor.stop();
-        this.formInterceptor.stop();
+        this.linkClickObserver.stop();
+        this.formSubmitObserver.stop();
     }
-    shouldInterceptLinkClick(element, url) {
+    willFollowLinkToLocation(element) {
         return this.shouldRedirect(element);
     }
-    linkClickIntercepted(element, url) {
+    followedLinkToLocation(element, url) {
         const frame = this.findFrameElement(element);
         if (frame) {
-            frame.delegate.linkClickIntercepted(element, url);
+            frame.delegate.followedLinkToLocation(element, url);
         }
     }
-    shouldInterceptFormSubmission(element, submitter) {
-        return this.shouldSubmit(element, submitter);
+    willSubmitForm(element, submitter) {
+        return (element.closest("turbo-frame") == null &&
+            this.shouldSubmit(element, submitter) &&
+            this.shouldRedirect(element, submitter));
     }
-    formSubmissionIntercepted(element, submitter) {
+    formSubmitted(element, submitter) {
         const frame = this.findFrameElement(element, submitter);
         if (frame) {
-            frame.removeAttribute("reloadable");
-            frame.delegate.formSubmissionIntercepted(element, submitter);
+            frame.delegate.formSubmitted(element, submitter);
         }
     }
     shouldSubmit(form, submitter) {
@@ -1885,8 +2124,16 @@ class FrameRedirector {
         return this.shouldRedirect(form, submitter) && locationIsVisitable(action, rootLocation);
     }
     shouldRedirect(element, submitter) {
-        const frame = this.findFrameElement(element, submitter);
-        return frame ? frame != element.closest("turbo-frame") : false;
+        const isNavigatable = element instanceof HTMLFormElement
+            ? this.session.submissionIsNavigatable(element, submitter)
+            : this.session.elementIsNavigatable(element);
+        if (isNavigatable) {
+            const frame = this.findFrameElement(element, submitter);
+            return frame ? frame != element.closest("turbo-frame") : false;
+        }
+        else {
+            return false;
+        }
     }
     findFrameElement(element, submitter) {
         const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame");
@@ -1916,7 +2163,7 @@ class History {
                 }
             }
         };
-        this.onPageLoad = async (event) => {
+        this.onPageLoad = async (_event) => {
             await nextMicrotask();
             this.pageLoaded = true;
         };
@@ -1978,81 +2225,30 @@ class History {
     }
 }
 
-class LinkClickObserver {
-    constructor(delegate) {
-        this.started = false;
-        this.clickCaptured = () => {
-            removeEventListener("click", this.clickBubbled, false);
-            addEventListener("click", this.clickBubbled, false);
-        };
-        this.clickBubbled = (event) => {
-            if (this.clickEventIsSignificant(event)) {
-                const target = (event.composedPath && event.composedPath()[0]) || event.target;
-                const link = this.findLinkFromClickTarget(target);
-                if (link) {
-                    const location = this.getLocationForLink(link);
-                    if (this.delegate.willFollowLinkToLocation(link, location)) {
-                        event.preventDefault();
-                        this.delegate.followedLinkToLocation(link, location);
-                    }
-                }
-            }
-        };
-        this.delegate = delegate;
-    }
-    start() {
-        if (!this.started) {
-            addEventListener("click", this.clickCaptured, true);
-            this.started = true;
-        }
-    }
-    stop() {
-        if (this.started) {
-            removeEventListener("click", this.clickCaptured, true);
-            this.started = false;
-        }
-    }
-    clickEventIsSignificant(event) {
-        return !((event.target && event.target.isContentEditable)
-            || event.defaultPrevented
-            || event.which > 1
-            || event.altKey
-            || event.ctrlKey
-            || event.metaKey
-            || event.shiftKey);
-    }
-    findLinkFromClickTarget(target) {
-        if (target instanceof Element) {
-            return target.closest("a[href]:not([target^=_]):not([download])");
-        }
-    }
-    getLocationForLink(link) {
-        return expandURL(link.getAttribute("href") || "");
-    }
-}
-
-function isAction(action) {
-    return action == "advance" || action == "replace" || action == "restore";
-}
-
-class Navigator {
+class Navigator {
     constructor(delegate) {
         this.delegate = delegate;
     }
     proposeVisit(location, options = {}) {
-        if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
+        if (this.delegate.allowsVisitingLocation(location, options)) {
             if (locationIsVisitable(location, this.view.snapshot.rootLocation)) {
-                this.delegate.visitProposedToLocation(location, options);
+                return this.delegate.visitProposedToLocation(location, options);
             }
             else {
                 window.location.href = location.toString();
+                return Promise.resolve();
             }
         }
+        else {
+            return Promise.reject();
+        }
     }
     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();
+        return this.currentVisit.promise;
     }
     submitForm(form, submitter) {
         this.stop();
@@ -2079,7 +2275,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);
         }
     }
@@ -2087,12 +2283,17 @@ class Navigator {
         if (formSubmission == this.formSubmission) {
             const responseHTML = await fetchResponse.responseHTML;
             if (responseHTML) {
-                if (formSubmission.method != FetchMethod.get) {
+                const shouldCacheSnapshot = formSubmission.method == FetchMethod.get;
+                if (!shouldCacheSnapshot) {
                     this.view.clearSnapshotCache();
                 }
                 const { statusCode, redirected } = fetchResponse;
                 const action = this.getActionForFormSubmission(formSubmission);
-                const visitOptions = { action, response: { statusCode, responseHTML, redirected } };
+                const visitOptions = {
+                    action,
+                    shouldCacheSnapshot,
+                    response: { statusCode, responseHTML, redirected },
+                };
                 this.proposeVisit(fetchResponse.location, visitOptions);
             }
         }
@@ -2102,10 +2303,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();
@@ -2115,7 +2316,7 @@ class Navigator {
         console.error(error);
     }
     formSubmissionFinished(formSubmission) {
-        if (typeof this.adapter.formSubmissionFinished === 'function') {
+        if (typeof this.adapter.formSubmissionFinished === "function") {
             this.adapter.formSubmissionFinished(formSubmission);
         }
     }
@@ -2126,12 +2327,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);
@@ -2235,9 +2438,33 @@ class ScrollObserver {
     }
 }
 
+class StreamMessageRenderer {
+    render({ fragment }) {
+        Bardo.preservingPermanentElements(this, getPermanentElementMapForFragment(fragment), () => document.documentElement.appendChild(fragment));
+    }
+    enteringBardo(currentPermanentElement, newPermanentElement) {
+        newPermanentElement.replaceWith(currentPermanentElement.cloneNode(true));
+    }
+    leavingBardo() { }
+}
+function getPermanentElementMapForFragment(fragment) {
+    const permanentElementsInDocument = queryPermanentElementsAll(document.documentElement);
+    const permanentElementMap = {};
+    for (const permanentElementInDocument of permanentElementsInDocument) {
+        const { id } = permanentElementInDocument;
+        for (const streamElement of fragment.querySelectorAll("turbo-stream")) {
+            const elementInStream = getPermanentElementById(streamElement.templateElement.content, id);
+            if (elementInStream) {
+                permanentElementMap[id] = [permanentElementInDocument, elementInStream];
+            }
+        }
+    }
+    return permanentElementMap;
+}
+
 class StreamObserver {
     constructor(delegate) {
-        this.sources = new Set;
+        this.sources = new Set();
         this.started = false;
         this.inspectFetchResponse = ((event) => {
             const response = fetchResponseFromEvent(event);
@@ -2287,7 +2514,7 @@ class StreamObserver {
         }
     }
     receiveMessageHTML(html) {
-        this.delegate.receivedMessageFromStream(new StreamMessage(html));
+        this.delegate.receivedMessageFromStream(StreamMessage.wrap(html));
     }
 }
 function fetchResponseFromEvent(event) {
@@ -2304,20 +2531,24 @@ 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) {
             const parentNode = replaceableElement.parentNode;
             if (parentNode) {
-                const element = this.createScriptElement(replaceableElement);
+                const element = activateScriptElement(replaceableElement);
                 parentNode.replaceChild(element, replaceableElement);
             }
         }
@@ -2326,16 +2557,44 @@ class ErrorRenderer extends Renderer {
         return this.newSnapshot.headSnapshot.element;
     }
     get scriptElements() {
-        return [...document.documentElement.querySelectorAll("script")];
+        return document.documentElement.querySelectorAll("script");
     }
 }
 
 class PageRenderer extends Renderer {
+    static async renderElement(currentElement, newElement) {
+        await nextEventLoopTick();
+        if (document.body && newElement instanceof HTMLBodyElement) {
+            const currentBody = PageRenderer.getBodyElement(currentElement);
+            const newBody = PageRenderer.getBodyElement(newElement);
+            currentBody.replaceWith(newBody);
+        }
+        else {
+            document.documentElement.appendChild(newElement);
+        }
+    }
     get shouldRender() {
-        return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
+        return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical && this.bodyElementMatches;
     }
-    prepareToRender() {
-        this.mergeHead();
+    get reloadReason() {
+        if (!this.newSnapshot.isVisitable) {
+            return {
+                reason: "turbo_visit_control_is_reload",
+            };
+        }
+        if (!this.trackedElementsAreIdentical) {
+            return {
+                reason: "tracked_element_mismatch",
+            };
+        }
+        if (!this.bodyElementMatches) {
+            return {
+                reason: "body_element_mismatch",
+            };
+        }
+    }
+    async prepareToRender() {
+        await this.mergeHead();
     }
     async render() {
         if (this.willRender) {
@@ -2357,11 +2616,12 @@ class PageRenderer extends Renderer {
     get newElement() {
         return this.newSnapshot.element;
     }
-    mergeHead() {
-        this.copyNewHeadStylesheetElements();
+    async mergeHead() {
+        const newStylesheetElements = this.copyNewHeadStylesheetElements();
         this.copyNewHeadScriptElements();
         this.removeCurrentHeadProvisionalElements();
         this.copyNewHeadProvisionalElements();
+        await newStylesheetElements;
     }
     replaceBody() {
         this.preservingPermanentElements(() => {
@@ -2372,14 +2632,27 @@ class PageRenderer extends Renderer {
     get trackedElementsAreIdentical() {
         return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
     }
-    copyNewHeadStylesheetElements() {
+    get bodyElementMatches() {
+        return PageRenderer.getBodyElement(this.newElement) !== null;
+    }
+    static get bodySelector() {
+        const bodyId = getBodyElementId();
+        return bodyId ? `#${bodyId}` : "body";
+    }
+    static getBodyElement(element) {
+        return element.querySelector(this.bodySelector) || element;
+    }
+    async copyNewHeadStylesheetElements() {
+        const loadingElements = [];
         for (const element of this.newHeadStylesheetElements) {
+            loadingElements.push(waitForLoad(element));
             document.head.appendChild(element);
         }
+        await Promise.all(loadingElements);
     }
     copyNewHeadScriptElements() {
         for (const element of this.newHeadScriptElements) {
-            document.head.appendChild(this.createScriptElement(element));
+            document.head.appendChild(activateScriptElement(element));
         }
     }
     removeCurrentHeadProvisionalElements() {
@@ -2398,17 +2671,12 @@ class PageRenderer extends Renderer {
     }
     activateNewBodyScriptElements() {
         for (const inertScriptElement of this.newBodyScriptElements) {
-            const activatedScriptElement = this.createScriptElement(inertScriptElement);
+            const activatedScriptElement = activateScriptElement(inertScriptElement);
             inertScriptElement.replaceWith(activatedScriptElement);
         }
     }
     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);
@@ -2477,13 +2745,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() {
@@ -2510,34 +2786,79 @@ 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);
         this.cacheObserver = new CacheObserver();
-        this.linkClickObserver = new LinkClickObserver(this);
-        this.formSubmitObserver = new FormSubmitObserver(this);
+        this.linkClickObserver = new LinkClickObserver(this, window);
+        this.formSubmitObserver = new FormSubmitObserver(this, document);
         this.scrollObserver = new ScrollObserver(this);
         this.streamObserver = new StreamObserver(this);
-        this.frameRedirector = new FrameRedirector(document.documentElement);
+        this.formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement);
+        this.frameRedirector = new FrameRedirector(this, document.documentElement);
+        this.streamMessageRenderer = new StreamMessageRenderer();
         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.formLinkClickObserver.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;
         }
@@ -2549,6 +2870,7 @@ class Session {
         if (this.started) {
             this.pageObserver.stop();
             this.cacheObserver.stop();
+            this.formLinkClickObserver.stop();
             this.linkClickObserver.stop();
             this.formSubmitObserver.stop();
             this.scrollObserver.stop();
@@ -2562,7 +2884,14 @@ class Session {
         this.adapter = adapter;
     }
     visit(location, options = {}) {
-        this.navigator.proposeVisit(expandURL(location), options);
+        const frameElement = options.frame ? document.getElementById(options.frame) : null;
+        if (frameElement instanceof FrameElement) {
+            frameElement.src = location.toString();
+            return frameElement.loaded;
+        }
+        else {
+            return this.navigator.proposeVisit(expandURL(location), options);
+        }
     }
     connectStreamSource(source) {
         this.streamObserver.connectStreamSource(source);
@@ -2571,7 +2900,7 @@ class Session {
         this.streamObserver.disconnectStreamSource(source);
     }
     renderStreamMessage(message) {
-        document.documentElement.appendChild(StreamMessage.wrap(message).fragment);
+        this.streamMessageRenderer.render(StreamMessage.wrap(message));
     }
     clearCache() {
         this.view.clearSnapshotCache();
@@ -2579,6 +2908,9 @@ class Session {
     setProgressBarDelay(delay) {
         this.progressBarDelay = delay;
     }
+    setFormMode(mode) {
+        this.formMode = mode;
+    }
     get location() {
         return this.history.location;
     }
@@ -2587,63 +2919,53 @@ 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);
+    willSubmitFormLinkToLocation(link, location) {
+        return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation);
+    }
+    submittedFormLinkToLocation() { }
+    willFollowLinkToLocation(link, location, event) {
+        return (this.elementIsNavigatable(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;
-        }
+        const acceptsStreamResponse = link.hasAttribute("data-turbo-stream");
+        this.visit(location.href, { action, acceptsStreamResponse, initiator: link });
     }
-    allowsVisitingLocationWithAction(location, action) {
-        return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location);
+    allowsVisitingLocation(location, options = {}) {
+        return (this.locationWithActionIsSamePage(location, options.action) ||
+            this.applicationAllowsVisitingLocation(location, options));
     }
     visitProposedToLocation(location, options) {
         extendURLWithDeprecatedProperties(location);
-        this.adapter.visitProposedToLocation(location, options);
+        return this.adapter.visitProposedToLocation(location, options);
     }
     visitStarted(visit) {
+        if (!visit.acceptsStreamResponse) {
+            markAsBusy(document.documentElement);
+        }
         extendURLWithDeprecatedProperties(visit.location);
         if (!visit.silent) {
-            this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
+            this.notifyApplicationAfterVisitingLocation(visit.location, visit.action, visit.initiator);
         }
     }
     visitCompleted(visit) {
+        clearBusyState(document.documentElement);
         this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
     }
     locationWithActionIsSamePage(location, action) {
@@ -2654,9 +2976,8 @@ 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.submissionIsNavigatable(form, submitter) &&
+            locationIsVisitable(expandURL(action), this.snapshot.rootLocation));
     }
     formSubmitted(form, submitter) {
         this.navigator.submitForm(form, submitter);
@@ -2680,16 +3001,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);
@@ -2697,49 +3025,85 @@ 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);
+    applicationAllowsVisitingLocation(location, options = {}) {
+        const event = this.notifyApplicationBeforeVisitingLocation(location, options.initiator);
         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 });
+    notifyApplicationBeforeVisitingLocation(location, element) {
+        return dispatch("turbo:before-visit", {
+            target: element,
+            detail: { url: location.href },
+            cancelable: true,
+        });
     }
-    notifyApplicationAfterVisitingLocation(location, action) {
-        markAsBusy(document.documentElement);
-        return dispatch("turbo:visit", { detail: { url: location.href, action } });
+    notifyApplicationAfterVisitingLocation(location, action, element) {
+        return dispatch("turbo:visit", {
+            target: element,
+            detail: { url: location.href, action },
+        });
     }
     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,
+        });
     }
-    elementDriveEnabled(element) {
-        const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
-        if (this.drive) {
+    submissionIsNavigatable(form, submitter) {
+        if (this.formMode == "off") {
+            return false;
+        }
+        else {
+            const submitterIsNavigatable = submitter ? this.elementIsNavigatable(submitter) : true;
+            if (this.formMode == "optin") {
+                return submitterIsNavigatable && form.closest('[data-turbo="true"]') != null;
+            }
+            else {
+                return submitterIsNavigatable && this.elementIsNavigatable(form);
+            }
+        }
+    }
+    elementIsNavigatable(element) {
+        const container = element.closest("[data-turbo]");
+        const withinFrame = element.closest("turbo-frame");
+        if (this.drive || withinFrame) {
             if (container) {
                 return container.getAttribute("data-turbo") != "false";
             }
@@ -2760,18 +3124,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;
     }
@@ -2783,11 +3135,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();
@@ -2796,7 +3196,7 @@ function registerAdapter(adapter) {
     session.registerAdapter(adapter);
 }
 function visit(location, options) {
-    session.visit(location, options);
+    return session.visit(location, options);
 }
 function connectStreamSource(source) {
     session.connectStreamSource(source);
@@ -2808,6 +3208,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) {
@@ -2816,13 +3217,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,
@@ -2831,41 +3237,56 @@ 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.action = null;
+        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.linkInterceptor = new LinkInterceptor(this, this.element);
-        this.formInterceptor = new FormInterceptor(this, this.element);
+        this.formLinkClickObserver = new FormLinkClickObserver(this, this.element);
+        this.linkClickObserver = new LinkClickObserver(this, this.element);
+        this.restorationIdentifier = uuid();
+        this.formSubmitObserver = new FormSubmitObserver(this, this.element);
     }
     connect() {
         if (!this.connected) {
             this.connected = true;
-            this.reloadable = false;
             if (this.loadingStyle == FrameLoadingStyle.lazy) {
                 this.appearanceObserver.start();
             }
-            this.linkInterceptor.start();
-            this.formInterceptor.start();
-            this.sourceURLChanged();
+            else {
+                this.loadSourceURL();
+            }
+            this.formLinkClickObserver.start();
+            this.linkClickObserver.start();
+            this.formSubmitObserver.start();
         }
     }
     disconnect() {
         if (this.connected) {
             this.connected = false;
             this.appearanceObserver.stop();
-            this.linkInterceptor.stop();
-            this.formInterceptor.stop();
+            this.formLinkClickObserver.stop();
+            this.linkClickObserver.stop();
+            this.formSubmitObserver.stop();
         }
     }
     disabledChanged() {
@@ -2874,10 +3295,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();
@@ -2888,21 +3319,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(expandURL(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) {
@@ -2913,14 +3334,23 @@ class FrameController {
             const html = await fetchResponse.responseHTML;
             if (html) {
                 const { body } = parseHTMLDocument(html);
-                const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
-                const renderer = new FrameRenderer(this.view.snapshot, snapshot, false, false);
-                if (this.view.renderPromise)
-                    await this.view.renderPromise;
-                await this.view.render(renderer);
-                session.frameRendered(fetchResponse, this.element);
-                session.frameLoaded(this.element);
-                this.fetchResponseLoaded(fetchResponse);
+                const newFrameElement = await this.extractForeignFrameElement(body);
+                if (newFrameElement) {
+                    const snapshot = new Snapshot(newFrameElement);
+                    const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
+                    if (this.view.renderPromise)
+                        await this.view.renderPromise;
+                    this.changeHistory();
+                    await this.view.render(renderer);
+                    this.complete = true;
+                    session.frameRendered(fetchResponse, this.element);
+                    session.frameLoaded(this.element);
+                    this.fetchResponseLoaded(fetchResponse);
+                }
+                else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
+                    console.warn(`A matching frame for #${this.element.id} was missing from the response, transforming into full-page Visit.`);
+                    this.visitResponse(fetchResponse.response);
+                }
             }
         }
         catch (error) {
@@ -2931,56 +3361,66 @@ 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);
-        }
+    willSubmitFormLinkToLocation(link) {
+        return link.closest("turbo-frame") == this.element && this.shouldInterceptNavigation(link);
+    }
+    submittedFormLinkToLocation(link, _location, form) {
+        const frame = this.findFrameElement(link);
+        if (frame)
+            form.setAttribute("data-turbo-frame", frame.id);
     }
-    linkClickIntercepted(element, url) {
-        this.reloadable = true;
-        this.navigateFrame(element, url);
+    willFollowLinkToLocation(element) {
+        return this.shouldInterceptNavigation(element);
     }
-    shouldInterceptFormSubmission(element, submitter) {
-        return this.shouldInterceptNavigation(element, submitter);
+    followedLinkToLocation(element, location) {
+        this.navigateFrame(element, location.href);
     }
-    formSubmissionIntercepted(element, submitter) {
+    willSubmitForm(element, submitter) {
+        return element.closest("turbo-frame") == this.element && this.shouldInterceptNavigation(element, submitter);
+    }
+    formSubmitted(element, submitter) {
         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) {
+        var _a;
         headers["Turbo-Frame"] = this.id;
+        if ((_a = this.currentNavigationElement) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-turbo-stream")) {
+            request.acceptResponseType(StreamMessage.contentType);
+        }
     }
-    requestStarted(request) {
+    requestStarted(_request) {
         markAsBusy(this.element);
     }
-    requestPreventedHandlingResponse(request, response) {
+    requestPreventedHandlingResponse(_request, _response) {
         this.resolveVisitPromise();
     }
     async requestSucceededWithResponse(request, response) {
         await this.loadResponse(response);
         this.resolveVisitPromise();
     }
-    requestFailedWithResponse(request, response) {
+    async requestFailedWithResponse(request, response) {
         console.error(response);
+        await this.loadResponse(response);
         this.resolveVisitPromise();
     }
     requestErrored(request, error) {
         console.error(error);
+        dispatch("turbo:fetch-request-error", {
+            target: this.element,
+            detail: { request, error },
+        });
         this.resolveVisitPromise();
     }
-    requestFinished(request) {
+    requestFinished(_request) {
         clearBusyState(this.element);
     }
     formSubmissionStarted({ formElement }) {
@@ -3000,19 +3440,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() { }
+    willRenderFrame(currentElement, _newElement) {
+        this.previousFrameElement = currentElement.cloneNode(true);
     }
     async visit(url) {
         var _a;
-        const request = new FetchRequest(this, FetchMethod.get, 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;
@@ -3024,23 +3477,64 @@ class FrameController {
     navigateFrame(element, url, submitter) {
         const frame = this.findFrameElement(element, submitter);
         this.proposeVisitIfNavigatedWithAction(frame, element, submitter);
-        frame.setAttribute("reloadable", "");
-        frame.src = url;
+        this.withCurrentNavigationElement(element, () => {
+            frame.src = url;
+        });
     }
     proposeVisitIfNavigatedWithAction(frame, element, submitter) {
-        const action = getAttribute("data-turbo-action", submitter, element, frame);
-        if (isAction(action)) {
-            const { visitCachedSnapshot } = new SnapshotSubstitution(frame);
+        this.action = getVisitAction(submitter, element, frame);
+        this.frame = frame;
+        if (isAction(this.action)) {
+            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 });
+                    const options = {
+                        response,
+                        visitCachedSnapshot,
+                        willRender: false,
+                        updateHistory: false,
+                        restorationIdentifier: this.restorationIdentifier,
+                    };
+                    if (this.action)
+                        options.action = this.action;
+                    session.visit(frame.src, options);
                 }
             };
         }
     }
+    changeHistory() {
+        if (this.action && this.frame) {
+            const method = getHistoryMethodForAction(this.action);
+            session.history.update(method, expandURL(this.frame.src || ""), this.restorationIdentifier);
+        }
+    }
+    willHandleFrameMissingFromResponse(fetchResponse) {
+        this.element.setAttribute("complete", "");
+        const response = fetchResponse.response;
+        const visit = async (url, options = {}) => {
+            if (url instanceof Response) {
+                this.visitResponse(url);
+            }
+            else {
+                session.visit(url, options);
+            }
+        };
+        const event = dispatch("turbo:frame-missing", {
+            target: this.element,
+            detail: { response, visit },
+            cancelable: true,
+        });
+        return !event.defaultPrevented;
+    }
+    async visitResponse(response) {
+        const wrapped = new FetchResponse(response);
+        const responseHTML = await wrapped.responseHTML;
+        const { location, redirected, statusCode } = wrapped;
+        return session.visit(location, { response: { redirected, statusCode, responseHTML } });
+    }
     findFrameElement(element, submitter) {
         var _a;
         const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
@@ -3050,19 +3544,21 @@ 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);
             }
-            console.error(`Response has no matching <turbo-frame id="${id}"> element`);
         }
         catch (error) {
             console.error(error);
+            return new FrameElement();
         }
-        return new FrameElement();
+        return null;
     }
     formActionIsVisitable(form, submitter) {
         const action = getAction(form, submitter);
@@ -3082,10 +3578,10 @@ class FrameController {
                 return !frameElement.disabled;
             }
         }
-        if (!session.elementDriveEnabled(element)) {
+        if (!session.elementIsNavigatable(element)) {
             return false;
         }
-        if (submitter && !session.elementDriveEnabled(submitter)) {
+        if (submitter && !session.elementIsNavigatable(submitter)) {
             return false;
         }
         return true;
@@ -3101,24 +3597,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;
@@ -3126,6 +3608,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;
     }
@@ -3135,16 +3630,18 @@ 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);
+    }
+    withCurrentNavigationElement(element, callback) {
+        this.currentNavigationElement = element;
+        callback();
+        delete this.currentNavigationElement;
     }
 }
 function getFrameElementById(id) {
@@ -3172,36 +3669,10 @@ 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 {
+    static async renderElement(newElement) {
+        await newElement.performAction();
+    }
     async connectedCallback() {
         try {
             await this.render();
@@ -3215,12 +3686,13 @@ class StreamElement extends HTMLElement {
     }
     async render() {
         var _a;
-        return (_a = this.renderPromise) !== null && _a !== void 0 ? _a : (this.renderPromise = (async () => {
-            if (this.dispatchEvent(this.beforeRenderEvent)) {
+        return ((_a = this.renderPromise) !== null && _a !== void 0 ? _a : (this.renderPromise = (async () => {
+            const event = this.beforeRenderEvent;
+            if (this.dispatchEvent(event)) {
                 await nextAnimationFrame();
-                this.performAction();
+                await event.detail.render(this);
             }
-        })());
+        })()));
     }
     disconnect() {
         try {
@@ -3229,13 +3701,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) {
@@ -3262,7 +3734,12 @@ class StreamElement extends HTMLElement {
         return this.templateElement.content.cloneNode(true);
     }
     get templateElement() {
-        if (this.firstElementChild instanceof HTMLTemplateElement) {
+        if (this.firstElementChild === null) {
+            const template = this.ownerDocument.createElement("template");
+            this.appendChild(template);
+            return template;
+        }
+        else if (this.firstElementChild instanceof HTMLTemplateElement) {
             return this.firstElementChild;
         }
         this.raise("first child element must be a <template> element");
@@ -3284,7 +3761,11 @@ 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,
+            detail: { newStream: this, render: StreamElement.renderElement },
+        });
     }
     get targetElementsById() {
         var _a;
@@ -3308,9 +3789,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;
@@ -3318,7 +3825,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!
@@ -3331,10 +3839,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 { FrameElement, FrameLoadingStyle, FrameRenderer, PageRenderer, PageSnapshot, StreamActions, StreamElement, StreamSourceElement, cache, clearCache, connectStreamSource, disconnectStreamSource, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setFormMode, setProgressBarDelay, start, visit };