@hotwired/turbo 7.2.4 → 7.2.5

package/dist/turbo.es2017-esm.js

@@ -1,6 +1,6 @@
 /*
-Turbo 7.2.4
-Copyright © 2022 37signals LLC
+Turbo 7.2.5
+Copyright © 2023 37signals LLC
  */
 (function () {
     if (window.Reflect === undefined ||
@@ -307,10 +307,6 @@ class FetchResponse {
     }
 }
 
-function isAction(action) {
-    return action == "advance" || action == "replace" || action == "restore";
-}
-
 function activateScriptElement(element) {
     if (element.getAttribute("data-turbo-eval") == "false") {
         return element;
@@ -341,6 +337,7 @@ function dispatch(eventName, { target, cancelable, detail } = {}) {
     const event = new CustomEvent(eventName, {
         cancelable,
         bubbles: true,
+        composed: true,
         detail,
     });
     if (target && target.isConnected) {
@@ -440,6 +437,9 @@ function getHistoryMethodForAction(action) {
             return history.pushState;
     }
 }
+function isAction(action) {
+    return action == "advance" || action == "replace" || action == "restore";
+}
 function getVisitAction(...elements) {
     const action = getAttribute("data-turbo-action", ...elements);
     return isAction(action) ? action : null;
@@ -461,6 +461,13 @@ function setMetaContent(name, content) {
     element.setAttribute("content", content);
     return element;
 }
+function findClosestRecursively(element, selector) {
+    var _a;
+    if (element instanceof Element) {
+        return (element.closest(selector) ||
+            findClosestRecursively(element.assignedSlot || ((_a = element.getRootNode()) === null || _a === void 0 ? void 0 : _a.host), selector));
+    }
+}
 
 var FetchMethod;
 (function (FetchMethod) {
@@ -508,9 +515,8 @@ class FetchRequest {
         this.abortController.abort();
     }
     async perform() {
-        var _a, _b;
         const { fetchOptions } = this;
-        (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
+        this.delegate.prepareRequest(this);
         await this.allowRequestToBeIntercepted(fetchOptions);
         try {
             this.delegate.requestStarted(this);
@@ -748,11 +754,11 @@ class FormSubmission {
             return true;
         }
     }
-    prepareHeadersForRequest(headers, request) {
+    prepareRequest(request) {
         if (!request.isIdempotent) {
             const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
             if (token) {
-                headers["X-CSRF-Token"] = token;
+                request.headers["X-CSRF-Token"] = token;
             }
         }
         if (this.requestAcceptsTurboStreamResponse(request)) {
@@ -940,12 +946,17 @@ function submissionDoesNotDismissDialog(form, submitter) {
     return method != "dialog";
 }
 function submissionDoesNotTargetIFrame(form, submitter) {
-    const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
-    for (const element of document.getElementsByName(target)) {
-        if (element instanceof HTMLIFrameElement)
-            return false;
+    if ((submitter === null || submitter === void 0 ? void 0 : submitter.hasAttribute("formtarget")) || form.hasAttribute("target")) {
+        const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
+        for (const element of document.getElementsByName(target)) {
+            if (element instanceof HTMLIFrameElement)
+                return false;
+        }
+        return true;
+    }
+    else {
+        return true;
     }
-    return true;
 }
 
 class View {
@@ -1138,20 +1149,23 @@ class LinkClickObserver {
             event.shiftKey);
     }
     findLinkFromClickTarget(target) {
-        if (target instanceof Element) {
-            return target.closest("a[href]:not([target^=_]):not([download])");
-        }
+        return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])");
     }
     getLocationForLink(link) {
         return expandURL(link.getAttribute("href") || "");
     }
 }
 function doesNotTargetIFrame(anchor) {
-    for (const element of document.getElementsByName(anchor.target)) {
-        if (element instanceof HTMLIFrameElement)
-            return false;
+    if (anchor.hasAttribute("target")) {
+        for (const element of document.getElementsByName(anchor.target)) {
+            if (element instanceof HTMLIFrameElement)
+                return false;
+        }
+        return true;
+    }
+    else {
+        return true;
     }
-    return true;
 }
 
 class FormLinkClickObserver {
@@ -1170,10 +1184,14 @@ class FormLinkClickObserver {
             link.hasAttribute("data-turbo-method"));
     }
     followedLinkToLocation(link, location) {
-        const action = location.href;
         const form = document.createElement("form");
+        const type = "hidden";
+        for (const [name, value] of location.searchParams) {
+            form.append(Object.assign(document.createElement("input"), { type, name, value }));
+        }
+        const action = Object.assign(location, { search: "" });
         form.setAttribute("data-turbo", "true");
-        form.setAttribute("action", action);
+        form.setAttribute("action", action.href);
         form.setAttribute("hidden", "");
         const method = link.getAttribute("data-turbo-method");
         if (method)
@@ -1181,7 +1199,7 @@ class FormLinkClickObserver {
         const turboFrame = link.getAttribute("data-turbo-frame");
         if (turboFrame)
             form.setAttribute("data-turbo-frame", turboFrame);
-        const turboAction = link.getAttribute("data-turbo-action");
+        const turboAction = getVisitAction(link);
         if (turboAction)
             form.setAttribute("data-turbo-action", turboAction);
         const turboConfirm = link.getAttribute("data-turbo-confirm");
@@ -1202,10 +1220,10 @@ class Bardo {
         this.delegate = delegate;
         this.permanentElementMap = permanentElementMap;
     }
-    static preservingPermanentElements(delegate, permanentElementMap, callback) {
+    static async preservingPermanentElements(delegate, permanentElementMap, callback) {
         const bardo = new this(delegate, permanentElementMap);
         bardo.enter();
-        callback();
+        await callback();
         bardo.leave();
     }
     enter() {
@@ -1274,8 +1292,8 @@ class Renderer {
             delete this.resolvingFunctions;
         }
     }
-    preservingPermanentElements(callback) {
-        Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
+    async preservingPermanentElements(callback) {
+        await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
     }
     focusFirstAutofocusableElement() {
         const element = this.connectedSnapshot.firstAutofocusableElement;
@@ -1860,6 +1878,8 @@ class Visit {
             this.adapter.visitProposedToLocation(this.redirectedToLocation, {
                 action: "replace",
                 response: this.response,
+                shouldCacheSnapshot: false,
+                willRender: false,
             });
             this.followedRedirect = true;
         }
@@ -1874,7 +1894,7 @@ class Visit {
             });
         }
     }
-    prepareHeadersForRequest(headers, request) {
+    prepareRequest(request) {
         if (this.acceptsStreamResponse) {
             request.acceptResponseType(StreamMessage.contentType);
         }
@@ -2375,10 +2395,8 @@ class Navigator {
     get restorationIdentifier() {
         return this.history.restorationIdentifier;
     }
-    getActionForFormSubmission(formSubmission) {
-        const { formElement, submitter } = formSubmission;
-        const action = getAttribute("data-turbo-action", submitter, formElement);
-        return isAction(action) ? action : "advance";
+    getActionForFormSubmission({ submitter, formElement }) {
+        return getVisitAction(submitter, formElement) || "advance";
     }
 }
 
@@ -2620,7 +2638,7 @@ class PageRenderer extends Renderer {
     }
     async render() {
         if (this.willRender) {
-            this.replaceBody();
+            await this.replaceBody();
         }
     }
     finishRendering() {
@@ -2639,16 +2657,16 @@ class PageRenderer extends Renderer {
         return this.newSnapshot.element;
     }
     async mergeHead() {
+        const mergedHeadElements = this.mergeProvisionalElements();
         const newStylesheetElements = this.copyNewHeadStylesheetElements();
         this.copyNewHeadScriptElements();
-        this.removeCurrentHeadProvisionalElements();
-        this.copyNewHeadProvisionalElements();
+        await mergedHeadElements;
         await newStylesheetElements;
     }
-    replaceBody() {
-        this.preservingPermanentElements(() => {
+    async replaceBody() {
+        await this.preservingPermanentElements(async () => {
             this.activateNewBody();
-            this.assignNewBody();
+            await this.assignNewBody();
         });
     }
     get trackedElementsAreIdentical() {
@@ -2667,6 +2685,35 @@ class PageRenderer extends Renderer {
             document.head.appendChild(activateScriptElement(element));
         }
     }
+    async mergeProvisionalElements() {
+        const newHeadElements = [...this.newHeadProvisionalElements];
+        for (const element of this.currentHeadProvisionalElements) {
+            if (!this.isCurrentElementInElementList(element, newHeadElements)) {
+                document.head.removeChild(element);
+            }
+        }
+        for (const element of newHeadElements) {
+            document.head.appendChild(element);
+        }
+    }
+    isCurrentElementInElementList(element, elementList) {
+        for (const [index, newElement] of elementList.entries()) {
+            if (element.tagName == "TITLE") {
+                if (newElement.tagName != "TITLE") {
+                    continue;
+                }
+                if (element.innerHTML == newElement.innerHTML) {
+                    elementList.splice(index, 1);
+                    return true;
+                }
+            }
+            if (newElement.isEqualNode(element)) {
+                elementList.splice(index, 1);
+                return true;
+            }
+        }
+        return false;
+    }
     removeCurrentHeadProvisionalElements() {
         for (const element of this.currentHeadProvisionalElements) {
             document.head.removeChild(element);
@@ -2687,8 +2734,8 @@ class PageRenderer extends Renderer {
             inertScriptElement.replaceWith(activatedScriptElement);
         }
     }
-    assignNewBody() {
-        this.renderElement(this.currentElement, this.newElement);
+    async assignNewBody() {
+        await this.renderElement(this.currentElement, this.newElement);
     }
     get newHeadStylesheetElements() {
         return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
@@ -3105,8 +3152,8 @@ class Session {
         }
     }
     elementIsNavigatable(element) {
-        const container = element.closest("[data-turbo]");
-        const withinFrame = element.closest("turbo-frame");
+        const container = findClosestRecursively(element, "[data-turbo]");
+        const withinFrame = findClosestRecursively(element, "turbo-frame");
         if (this.drive || withinFrame) {
             if (container) {
                 return container.getAttribute("data-turbo") != "false";
@@ -3125,8 +3172,7 @@ class Session {
         }
     }
     getActionForLink(link) {
-        const action = link.getAttribute("data-turbo-action");
-        return isAction(action) ? action : "advance";
+        return getVisitAction(link) || "advance";
     }
     get snapshot() {
         return this.view.snapshot;
@@ -3186,7 +3232,10 @@ const StreamActions = {
         this.targetElements.forEach((e) => e.replaceWith(this.templateContent));
     },
     update() {
-        this.targetElements.forEach((e) => e.replaceChildren(this.templateContent));
+        this.targetElements.forEach((targetElement) => {
+            targetElement.innerHTML = "";
+            targetElement.append(this.templateContent);
+        });
     },
 };
 
@@ -3374,7 +3423,8 @@ class FrameController {
             this.fetchResponseLoaded = () => { };
         }
     }
-    elementAppearedInViewport(_element) {
+    elementAppearedInViewport(element) {
+        this.proposeVisitIfNavigatedWithAction(element, element);
         this.loadSourceURL();
     }
     willSubmitFormLinkToLocation(link) {
@@ -3400,12 +3450,12 @@ class FrameController {
         }
         this.formSubmission = new FormSubmission(this, element, submitter);
         const { fetchRequest } = this.formSubmission;
-        this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+        this.prepareRequest(fetchRequest);
         this.formSubmission.start();
     }
-    prepareHeadersForRequest(headers, request) {
+    prepareRequest(request) {
         var _a;
-        headers["Turbo-Frame"] = this.id;
+        request.headers["Turbo-Frame"] = this.id;
         if ((_a = this.currentNavigationElement) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-turbo-stream")) {
             request.acceptResponseType(StreamMessage.contentType);
         }
@@ -3485,7 +3535,6 @@ class FrameController {
     }
     navigateFrame(element, url, submitter) {
         const frame = this.findFrameElement(element, submitter);
-        this.pageSnapshot = PageSnapshot.fromElement(frame).clone();
         frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
         this.withCurrentNavigationElement(element, () => {
             frame.src = url;
@@ -3493,7 +3542,8 @@ class FrameController {
     }
     proposeVisitIfNavigatedWithAction(frame, element, submitter) {
         this.action = getVisitAction(submitter, element, frame);
-        if (isAction(this.action)) {
+        if (this.action) {
+            const pageSnapshot = PageSnapshot.fromElement(frame).clone();
             const { visitCachedSnapshot } = frame.delegate;
             frame.delegate.fetchResponseLoaded = (fetchResponse) => {
                 if (frame.src) {
@@ -3506,7 +3556,7 @@ class FrameController {
                         willRender: false,
                         updateHistory: false,
                         restorationIdentifier: this.restorationIdentifier,
-                        snapshot: this.pageSnapshot,
+                        snapshot: pageSnapshot,
                     };
                     if (this.action)
                         options.action = this.action;

package/dist/turbo.es2017-umd.js

@@ -1,6 +1,6 @@
 /*
-Turbo 7.2.4
-Copyright © 2022 37signals LLC
+Turbo 7.2.5
+Copyright © 2023 37signals LLC
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -313,10 +313,6 @@ Copyright © 2022 37signals LLC
         }
     }
 
-    function isAction(action) {
-        return action == "advance" || action == "replace" || action == "restore";
-    }
-
     function activateScriptElement(element) {
         if (element.getAttribute("data-turbo-eval") == "false") {
             return element;
@@ -347,6 +343,7 @@ Copyright © 2022 37signals LLC
         const event = new CustomEvent(eventName, {
             cancelable,
             bubbles: true,
+            composed: true,
             detail,
         });
         if (target && target.isConnected) {
@@ -446,6 +443,9 @@ Copyright © 2022 37signals LLC
                 return history.pushState;
         }
     }
+    function isAction(action) {
+        return action == "advance" || action == "replace" || action == "restore";
+    }
     function getVisitAction(...elements) {
         const action = getAttribute("data-turbo-action", ...elements);
         return isAction(action) ? action : null;
@@ -467,6 +467,13 @@ Copyright © 2022 37signals LLC
         element.setAttribute("content", content);
         return element;
     }
+    function findClosestRecursively(element, selector) {
+        var _a;
+        if (element instanceof Element) {
+            return (element.closest(selector) ||
+                findClosestRecursively(element.assignedSlot || ((_a = element.getRootNode()) === null || _a === void 0 ? void 0 : _a.host), selector));
+        }
+    }
 
     var FetchMethod;
     (function (FetchMethod) {
@@ -514,9 +521,8 @@ Copyright © 2022 37signals LLC
             this.abortController.abort();
         }
         async perform() {
-            var _a, _b;
             const { fetchOptions } = this;
-            (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
+            this.delegate.prepareRequest(this);
             await this.allowRequestToBeIntercepted(fetchOptions);
             try {
                 this.delegate.requestStarted(this);
@@ -754,11 +760,11 @@ Copyright © 2022 37signals LLC
                 return true;
             }
         }
-        prepareHeadersForRequest(headers, request) {
+        prepareRequest(request) {
             if (!request.isIdempotent) {
                 const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
                 if (token) {
-                    headers["X-CSRF-Token"] = token;
+                    request.headers["X-CSRF-Token"] = token;
                 }
             }
             if (this.requestAcceptsTurboStreamResponse(request)) {
@@ -946,12 +952,17 @@ Copyright © 2022 37signals LLC
         return method != "dialog";
     }
     function submissionDoesNotTargetIFrame(form, submitter) {
-        const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
-        for (const element of document.getElementsByName(target)) {
-            if (element instanceof HTMLIFrameElement)
-                return false;
+        if ((submitter === null || submitter === void 0 ? void 0 : submitter.hasAttribute("formtarget")) || form.hasAttribute("target")) {
+            const target = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formtarget")) || form.target;
+            for (const element of document.getElementsByName(target)) {
+                if (element instanceof HTMLIFrameElement)
+                    return false;
+            }
+            return true;
+        }
+        else {
+            return true;
         }
-        return true;
     }
 
     class View {
@@ -1144,20 +1155,23 @@ Copyright © 2022 37signals LLC
                 event.shiftKey);
         }
         findLinkFromClickTarget(target) {
-            if (target instanceof Element) {
-                return target.closest("a[href]:not([target^=_]):not([download])");
-            }
+            return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])");
         }
         getLocationForLink(link) {
             return expandURL(link.getAttribute("href") || "");
         }
     }
     function doesNotTargetIFrame(anchor) {
-        for (const element of document.getElementsByName(anchor.target)) {
-            if (element instanceof HTMLIFrameElement)
-                return false;
+        if (anchor.hasAttribute("target")) {
+            for (const element of document.getElementsByName(anchor.target)) {
+                if (element instanceof HTMLIFrameElement)
+                    return false;
+            }
+            return true;
+        }
+        else {
+            return true;
         }
-        return true;
     }
 
     class FormLinkClickObserver {
@@ -1176,10 +1190,14 @@ Copyright © 2022 37signals LLC
                 link.hasAttribute("data-turbo-method"));
         }
         followedLinkToLocation(link, location) {
-            const action = location.href;
             const form = document.createElement("form");
+            const type = "hidden";
+            for (const [name, value] of location.searchParams) {
+                form.append(Object.assign(document.createElement("input"), { type, name, value }));
+            }
+            const action = Object.assign(location, { search: "" });
             form.setAttribute("data-turbo", "true");
-            form.setAttribute("action", action);
+            form.setAttribute("action", action.href);
             form.setAttribute("hidden", "");
             const method = link.getAttribute("data-turbo-method");
             if (method)
@@ -1187,7 +1205,7 @@ Copyright © 2022 37signals LLC
             const turboFrame = link.getAttribute("data-turbo-frame");
             if (turboFrame)
                 form.setAttribute("data-turbo-frame", turboFrame);
-            const turboAction = link.getAttribute("data-turbo-action");
+            const turboAction = getVisitAction(link);
             if (turboAction)
                 form.setAttribute("data-turbo-action", turboAction);
             const turboConfirm = link.getAttribute("data-turbo-confirm");
@@ -1208,10 +1226,10 @@ Copyright © 2022 37signals LLC
             this.delegate = delegate;
             this.permanentElementMap = permanentElementMap;
         }
-        static preservingPermanentElements(delegate, permanentElementMap, callback) {
+        static async preservingPermanentElements(delegate, permanentElementMap, callback) {
             const bardo = new this(delegate, permanentElementMap);
             bardo.enter();
-            callback();
+            await callback();
             bardo.leave();
         }
         enter() {
@@ -1280,8 +1298,8 @@ Copyright © 2022 37signals LLC
                 delete this.resolvingFunctions;
             }
         }
-        preservingPermanentElements(callback) {
-            Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
+        async preservingPermanentElements(callback) {
+            await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
         }
         focusFirstAutofocusableElement() {
             const element = this.connectedSnapshot.firstAutofocusableElement;
@@ -1866,6 +1884,8 @@ Copyright © 2022 37signals LLC
                 this.adapter.visitProposedToLocation(this.redirectedToLocation, {
                     action: "replace",
                     response: this.response,
+                    shouldCacheSnapshot: false,
+                    willRender: false,
                 });
                 this.followedRedirect = true;
             }
@@ -1880,7 +1900,7 @@ Copyright © 2022 37signals LLC
                 });
             }
         }
-        prepareHeadersForRequest(headers, request) {
+        prepareRequest(request) {
             if (this.acceptsStreamResponse) {
                 request.acceptResponseType(StreamMessage.contentType);
             }
@@ -2381,10 +2401,8 @@ Copyright © 2022 37signals LLC
         get restorationIdentifier() {
             return this.history.restorationIdentifier;
         }
-        getActionForFormSubmission(formSubmission) {
-            const { formElement, submitter } = formSubmission;
-            const action = getAttribute("data-turbo-action", submitter, formElement);
-            return isAction(action) ? action : "advance";
+        getActionForFormSubmission({ submitter, formElement }) {
+            return getVisitAction(submitter, formElement) || "advance";
         }
     }
 
@@ -2626,7 +2644,7 @@ Copyright © 2022 37signals LLC
         }
         async render() {
             if (this.willRender) {
-                this.replaceBody();
+                await this.replaceBody();
             }
         }
         finishRendering() {
@@ -2645,16 +2663,16 @@ Copyright © 2022 37signals LLC
             return this.newSnapshot.element;
         }
         async mergeHead() {
+            const mergedHeadElements = this.mergeProvisionalElements();
             const newStylesheetElements = this.copyNewHeadStylesheetElements();
             this.copyNewHeadScriptElements();
-            this.removeCurrentHeadProvisionalElements();
-            this.copyNewHeadProvisionalElements();
+            await mergedHeadElements;
             await newStylesheetElements;
         }
-        replaceBody() {
-            this.preservingPermanentElements(() => {
+        async replaceBody() {
+            await this.preservingPermanentElements(async () => {
                 this.activateNewBody();
-                this.assignNewBody();
+                await this.assignNewBody();
             });
         }
         get trackedElementsAreIdentical() {
@@ -2673,6 +2691,35 @@ Copyright © 2022 37signals LLC
                 document.head.appendChild(activateScriptElement(element));
             }
         }
+        async mergeProvisionalElements() {
+            const newHeadElements = [...this.newHeadProvisionalElements];
+            for (const element of this.currentHeadProvisionalElements) {
+                if (!this.isCurrentElementInElementList(element, newHeadElements)) {
+                    document.head.removeChild(element);
+                }
+            }
+            for (const element of newHeadElements) {
+                document.head.appendChild(element);
+            }
+        }
+        isCurrentElementInElementList(element, elementList) {
+            for (const [index, newElement] of elementList.entries()) {
+                if (element.tagName == "TITLE") {
+                    if (newElement.tagName != "TITLE") {
+                        continue;
+                    }
+                    if (element.innerHTML == newElement.innerHTML) {
+                        elementList.splice(index, 1);
+                        return true;
+                    }
+                }
+                if (newElement.isEqualNode(element)) {
+                    elementList.splice(index, 1);
+                    return true;
+                }
+            }
+            return false;
+        }
         removeCurrentHeadProvisionalElements() {
             for (const element of this.currentHeadProvisionalElements) {
                 document.head.removeChild(element);
@@ -2693,8 +2740,8 @@ Copyright © 2022 37signals LLC
                 inertScriptElement.replaceWith(activatedScriptElement);
             }
         }
-        assignNewBody() {
-            this.renderElement(this.currentElement, this.newElement);
+        async assignNewBody() {
+            await this.renderElement(this.currentElement, this.newElement);
         }
         get newHeadStylesheetElements() {
             return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
@@ -3111,8 +3158,8 @@ Copyright © 2022 37signals LLC
             }
         }
         elementIsNavigatable(element) {
-            const container = element.closest("[data-turbo]");
-            const withinFrame = element.closest("turbo-frame");
+            const container = findClosestRecursively(element, "[data-turbo]");
+            const withinFrame = findClosestRecursively(element, "turbo-frame");
             if (this.drive || withinFrame) {
                 if (container) {
                     return container.getAttribute("data-turbo") != "false";
@@ -3131,8 +3178,7 @@ Copyright © 2022 37signals LLC
             }
         }
         getActionForLink(link) {
-            const action = link.getAttribute("data-turbo-action");
-            return isAction(action) ? action : "advance";
+            return getVisitAction(link) || "advance";
         }
         get snapshot() {
             return this.view.snapshot;
@@ -3192,7 +3238,10 @@ Copyright © 2022 37signals LLC
             this.targetElements.forEach((e) => e.replaceWith(this.templateContent));
         },
         update() {
-            this.targetElements.forEach((e) => e.replaceChildren(this.templateContent));
+            this.targetElements.forEach((targetElement) => {
+                targetElement.innerHTML = "";
+                targetElement.append(this.templateContent);
+            });
         },
     };
 
@@ -3380,7 +3429,8 @@ Copyright © 2022 37signals LLC
                 this.fetchResponseLoaded = () => { };
             }
         }
-        elementAppearedInViewport(_element) {
+        elementAppearedInViewport(element) {
+            this.proposeVisitIfNavigatedWithAction(element, element);
             this.loadSourceURL();
         }
         willSubmitFormLinkToLocation(link) {
@@ -3406,12 +3456,12 @@ Copyright © 2022 37signals LLC
             }
             this.formSubmission = new FormSubmission(this, element, submitter);
             const { fetchRequest } = this.formSubmission;
-            this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+            this.prepareRequest(fetchRequest);
             this.formSubmission.start();
         }
-        prepareHeadersForRequest(headers, request) {
+        prepareRequest(request) {
             var _a;
-            headers["Turbo-Frame"] = this.id;
+            request.headers["Turbo-Frame"] = this.id;
             if ((_a = this.currentNavigationElement) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-turbo-stream")) {
                 request.acceptResponseType(StreamMessage.contentType);
             }
@@ -3491,7 +3541,6 @@ Copyright © 2022 37signals LLC
         }
         navigateFrame(element, url, submitter) {
             const frame = this.findFrameElement(element, submitter);
-            this.pageSnapshot = PageSnapshot.fromElement(frame).clone();
             frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
             this.withCurrentNavigationElement(element, () => {
                 frame.src = url;
@@ -3499,7 +3548,8 @@ Copyright © 2022 37signals LLC
         }
         proposeVisitIfNavigatedWithAction(frame, element, submitter) {
             this.action = getVisitAction(submitter, element, frame);
-            if (isAction(this.action)) {
+            if (this.action) {
+                const pageSnapshot = PageSnapshot.fromElement(frame).clone();
                 const { visitCachedSnapshot } = frame.delegate;
                 frame.delegate.fetchResponseLoaded = (fetchResponse) => {
                     if (frame.src) {
@@ -3512,7 +3562,7 @@ Copyright © 2022 37signals LLC
                             willRender: false,
                             updateHistory: false,
                             restorationIdentifier: this.restorationIdentifier,
-                            snapshot: this.pageSnapshot,
+                            snapshot: pageSnapshot,
                         };
                         if (this.action)
                             options.action = this.action;

package/dist/types/core/bardo.d.ts

@@ -6,7 +6,7 @@ export interface BardoDelegate {
 export declare class Bardo {
     readonly permanentElementMap: PermanentElementMap;
     readonly delegate: BardoDelegate;
-    static preservingPermanentElements(delegate: BardoDelegate, permanentElementMap: PermanentElementMap, callback: () => void): void;
+    static preservingPermanentElements(delegate: BardoDelegate, permanentElementMap: PermanentElementMap, callback: () => void): Promise<void>;
     constructor(delegate: BardoDelegate, permanentElementMap: PermanentElementMap);
     enter(): void;
     leave(): void;

package/dist/types/core/drive/form_submission.d.ts

@@ -1,4 +1,4 @@
-import { FetchRequest, FetchMethod, FetchRequestHeaders } from "../../http/fetch_request";
+import { FetchRequest, FetchMethod } from "../../http/fetch_request";
 import { FetchResponse } from "../../http/fetch_response";
 export interface FormSubmissionDelegate {
     formSubmissionStarted(formSubmission: FormSubmission): void;
@@ -55,7 +55,7 @@ export declare class FormSubmission {
     get stringFormData(): [string, string][];
     start(): Promise<void | FetchResponse>;
     stop(): true | undefined;
-    prepareHeadersForRequest(headers: FetchRequestHeaders, request: FetchRequest): void;
+    prepareRequest(request: FetchRequest): void;
     requestStarted(_request: FetchRequest): void;
     requestPreventedHandlingResponse(request: FetchRequest, response: FetchResponse): void;
     requestSucceededWithResponse(request: FetchRequest, response: FetchResponse): void;

package/dist/types/core/drive/navigator.d.ts

@@ -31,5 +31,5 @@ export declare class Navigator {
     visitScrolledToSamePageLocation(oldURL: URL, newURL: URL): void;
     get location(): URL;
     get restorationIdentifier(): string;
-    getActionForFormSubmission(formSubmission: FormSubmission): Action;
+    getActionForFormSubmission({ submitter, formElement }: FormSubmission): Action;
 }

package/dist/types/core/drive/page_renderer.d.ts

@@ -12,15 +12,17 @@ export declare class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot
     get newHeadSnapshot(): import("./head_snapshot").HeadSnapshot;
     get newElement(): HTMLBodyElement;
     mergeHead(): Promise<void>;
-    replaceBody(): void;
+    replaceBody(): Promise<void>;
     get trackedElementsAreIdentical(): boolean;
     copyNewHeadStylesheetElements(): Promise<void>;
     copyNewHeadScriptElements(): void;
+    mergeProvisionalElements(): Promise<void>;
+    isCurrentElementInElementList(element: Element, elementList: Element[]): boolean;
     removeCurrentHeadProvisionalElements(): void;
     copyNewHeadProvisionalElements(): void;
     activateNewBody(): void;
     activateNewBodyScriptElements(): void;
-    assignNewBody(): void;
+    assignNewBody(): Promise<void>;
     get newHeadStylesheetElements(): HTMLLinkElement[];
     get newHeadScriptElements(): HTMLScriptElement[];
     get currentHeadProvisionalElements(): Element[];

package/dist/types/core/drive/visit.d.ts

@@ -1,5 +1,5 @@
 import { Adapter } from "../native/adapter";
-import { FetchRequest, FetchRequestDelegate, FetchRequestHeaders } from "../../http/fetch_request";
+import { FetchRequest, FetchRequestDelegate } from "../../http/fetch_request";
 import { FetchResponse } from "../../http/fetch_response";
 import { History } from "./history";
 import { Snapshot } from "../snapshot";
@@ -104,7 +104,7 @@ export declare class Visit implements FetchRequestDelegate {
     loadCachedSnapshot(): void;
     followRedirect(): void;
     goToSamePageAnchor(): void;
-    prepareHeadersForRequest(headers: FetchRequestHeaders, request: FetchRequest): void;
+    prepareRequest(request: FetchRequest): void;
     requestStarted(): void;
     requestPreventedHandlingResponse(_request: FetchRequest, _response: FetchResponse): void;
     requestSucceededWithResponse(request: FetchRequest, response: FetchResponse): Promise<void>;

package/dist/types/core/frames/frame_controller.d.ts

@@ -1,5 +1,5 @@
 import { FrameElement, FrameElementDelegate, FrameLoadingStyle } from "../../elements/frame_element";
-import { FetchRequest, FetchRequestDelegate, FetchRequestHeaders } from "../../http/fetch_request";
+import { FetchRequest, FetchRequestDelegate } from "../../http/fetch_request";
 import { FetchResponse } from "../../http/fetch_response";
 import { AppearanceObserver, AppearanceObserverDelegate } from "../../observers/appearance_observer";
 import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission";
@@ -11,16 +11,15 @@ import { FrameView } from "./frame_view";
 import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor";
 import { FormLinkClickObserver, FormLinkClickObserverDelegate } from "../../observers/form_link_click_observer";
 import { VisitOptions } from "../drive/visit";
-import { PageSnapshot } from "../drive/page_snapshot";
 declare type VisitFallback = (location: Response | Locatable, options: Partial<VisitOptions>) => Promise<void>;
 export declare type TurboFrameMissingEvent = CustomEvent<{
     response: Response;
     visit: VisitFallback;
 }>;
-export declare class FrameController implements AppearanceObserverDelegate, FetchRequestDelegate, FormSubmitObserverDelegate, FormSubmissionDelegate, FrameElementDelegate, FormLinkClickObserverDelegate, LinkInterceptorDelegate, ViewDelegate<FrameElement, Snapshot<FrameElement>> {
+export declare class FrameController implements AppearanceObserverDelegate<FrameElement>, FetchRequestDelegate, FormSubmitObserverDelegate, FormSubmissionDelegate, FrameElementDelegate, FormLinkClickObserverDelegate, LinkInterceptorDelegate, ViewDelegate<FrameElement, Snapshot<FrameElement>> {
     readonly element: FrameElement;
     readonly view: FrameView;
-    readonly appearanceObserver: AppearanceObserver;
+    readonly appearanceObserver: AppearanceObserver<FrameElement>;
     readonly formLinkClickObserver: FormLinkClickObserver;
     readonly linkInterceptor: LinkInterceptor;
     readonly formSubmitObserver: FormSubmitObserver;
@@ -35,7 +34,6 @@ export declare class FrameController implements AppearanceObserverDelegate, Fetc
     readonly restorationIdentifier: string;
     private previousFrameElement?;
     private currentNavigationElement?;
-    pageSnapshot?: PageSnapshot;
     constructor(element: FrameElement);
     connect(): void;
     disconnect(): void;
@@ -46,14 +44,14 @@ export declare class FrameController implements AppearanceObserverDelegate, Fetc
     loadingStyleChanged(): void;
     private loadSourceURL;
     loadResponse(fetchResponse: FetchResponse): Promise<void>;
-    elementAppearedInViewport(_element: Element): void;
+    elementAppearedInViewport(element: FrameElement): void;
     willSubmitFormLinkToLocation(link: Element): boolean;
     submittedFormLinkToLocation(link: Element, _location: URL, form: HTMLFormElement): void;
     shouldInterceptLinkClick(element: Element, _location: string, _event: MouseEvent): boolean;
     linkClickIntercepted(element: Element, location: string): void;
     willSubmitForm(element: HTMLFormElement, submitter?: HTMLElement): boolean;
     formSubmitted(element: HTMLFormElement, submitter?: HTMLElement): void;
-    prepareHeadersForRequest(headers: FetchRequestHeaders, request: FetchRequest): void;
+    prepareRequest(request: FetchRequest): void;
     requestStarted(_request: FetchRequest): void;
     requestPreventedHandlingResponse(_request: FetchRequest, _response: FetchResponse): void;
     requestSucceededWithResponse(request: FetchRequest, response: FetchResponse): Promise<void>;

package/dist/types/core/renderer.d.ts

@@ -1,7 +1,7 @@
 import { BardoDelegate } from "./bardo";
 import { Snapshot } from "./snapshot";
 import { ReloadReason } from "./native/browser_adapter";
-export declare type Render<E> = (newElement: E, currentElement: E) => void;
+export declare type Render<E> = (currentElement: E, newElement: E) => void;
 export declare abstract class Renderer<E extends Element, S extends Snapshot<E> = Snapshot<E>> implements BardoDelegate {
     readonly currentSnapshot: S;
     readonly newSnapshot: S;
@@ -17,7 +17,7 @@ export declare abstract class Renderer<E extends Element, S extends Snapshot<E>
     prepareToRender(): void;
     abstract render(): Promise<void>;
     finishRendering(): void;
-    preservingPermanentElements(callback: () => void): void;
+    preservingPermanentElements(callback: () => void): Promise<void>;
     focusFirstAutofocusableElement(): void;
     enteringBardo(currentPermanentElement: Element): void;
     leavingBardo(currentPermanentElement: Element): void;

package/dist/types/core/types.d.ts

@@ -1,5 +1,4 @@
 export declare type Action = "advance" | "replace" | "restore";
-export declare function isAction(action: any): action is Action;
 export declare type Position = {
     x: number;
     y: number;

package/dist/types/http/fetch_request.d.ts

@@ -14,7 +14,7 @@ export declare type TurboFetchRequestErrorEvent = CustomEvent<{
 }>;
 export interface FetchRequestDelegate {
     referrer?: URL;
-    prepareHeadersForRequest?(headers: FetchRequestHeaders, request: FetchRequest): void;
+    prepareRequest(request: FetchRequest): void;
     requestStarted(request: FetchRequest): void;
     requestPreventedHandlingResponse(request: FetchRequest, response: FetchResponse): void;
     requestSucceededWithResponse(request: FetchRequest, response: FetchResponse): void;

package/dist/types/observers/appearance_observer.d.ts

@@ -1,12 +1,12 @@
-export interface AppearanceObserverDelegate {
-    elementAppearedInViewport(element: Element): void;
+export interface AppearanceObserverDelegate<T extends Element> {
+    elementAppearedInViewport(element: T): void;
 }
-export declare class AppearanceObserver {
-    readonly delegate: AppearanceObserverDelegate;
-    readonly element: Element;
+export declare class AppearanceObserver<T extends Element> {
+    readonly delegate: AppearanceObserverDelegate<T>;
+    readonly element: T;
     readonly intersectionObserver: IntersectionObserver;
     started: boolean;
-    constructor(delegate: AppearanceObserverDelegate, element: Element);
+    constructor(delegate: AppearanceObserverDelegate<T>, element: T);
     start(): void;
     stop(): void;
     intersect: IntersectionObserverCallback;

package/dist/types/observers/link_click_observer.d.ts

@@ -12,6 +12,6 @@ export declare class LinkClickObserver {
     clickCaptured: () => void;
     clickBubbled: (event: Event) => void;
     clickEventIsSignificant(event: MouseEvent): boolean;
-    findLinkFromClickTarget(target: EventTarget | null): HTMLAnchorElement | null | undefined;
+    findLinkFromClickTarget(target: EventTarget | null): HTMLAnchorElement | undefined;
     getLocationForLink(link: Element): URL;
 }

package/dist/types/tests/functional/frame_tests.d.ts

@@ -1,3 +1,10 @@
+declare global {
+    namespace Chai {
+        interface AssertStatic {
+            equalIgnoringWhitespace(actual: string | null | undefined, expected: string, message?: string): void;
+        }
+    }
+}
 declare global {
     interface Window {
         frameScriptEvaluationCount?: number;

package/dist/types/tests/helpers/intern_test_case.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="chai" />
 import Test from "intern/lib/Test";
 import { Tests } from "intern/lib/interfaces/object";
 export declare class InternTestCase {

package/dist/types/tests/helpers/page.d.ts

@@ -6,6 +6,8 @@ declare type EventLog = [EventType, EventDetail, Target];
 declare type MutationAttributeName = string;
 declare type MutationAttributeValue = string | null;
 declare type MutationLog = [MutationAttributeName, Target, MutationAttributeValue];
+declare type BodyHTML = string;
+declare type BodyMutationLog = [BodyHTML];
 export declare function attributeForSelector(page: Page, selector: string, attributeName: string): Promise<string | null>;
 declare type CancellableEvent = "turbo:click" | "turbo:before-visit";
 export declare function cancelNextEvent(page: Page, eventName: CancellableEvent): Promise<void>;
@@ -23,13 +25,17 @@ export declare function nextBody(_page: Page, timeout?: number): Promise<void>;
 export declare function nextEventNamed(page: Page, eventName: string): Promise<any>;
 export declare function nextEventOnTarget(page: Page, elementId: string, eventName: string): Promise<any>;
 export declare function listenForEventOnTarget(page: Page, elementId: string, eventName: string): Promise<void>;
+export declare function nextBodyMutation(page: Page): Promise<string | null>;
+export declare function noNextBodyMutation(page: Page): Promise<boolean>;
 export declare function nextAttributeMutationNamed(page: Page, elementId: string, attributeName: string): Promise<string | null>;
 export declare function noNextAttributeMutationNamed(page: Page, elementId: string, attributeName: string): Promise<boolean>;
 export declare function noNextEventNamed(page: Page, eventName: string): Promise<boolean>;
 export declare function noNextEventOnTarget(page: Page, elementId: string, eventName: string): Promise<boolean>;
 export declare function outerHTMLForSelector(page: Page, selector: string): Promise<string>;
 export declare function pathname(url: string): string;
+export declare function pathnameForIFrame(page: Page, name: string): Promise<string>;
 export declare function propertyForSelector(page: Page, selector: string, propertyName: string): Promise<any>;
+export declare function readBodyMutationLogs(page: Page, length?: number): Promise<BodyMutationLog[]>;
 export declare function readEventLogs(page: Page, length?: number): Promise<EventLog[]>;
 export declare function readMutationLogs(page: Page, length?: number): Promise<MutationLog[]>;
 export declare function search(url: string): string;
@@ -47,6 +53,7 @@ export declare function strictElementEquals(left: Locator, right: Locator): Prom
 export declare function textContent(page: Page, html: string): Promise<string | null>;
 export declare function visitAction(page: Page): Promise<string>;
 export declare function waitForPathname(page: Page, pathname: string): Promise<void>;
+export declare function waitUntilText(page: Page, text: string, state?: "visible" | "attached"): Promise<import("playwright-core").ElementHandle<HTMLElement | SVGElement>>;
 export declare function waitUntilSelector(page: Page, selector: string, state?: "visible" | "attached"): Promise<import("playwright-core").ElementHandle<HTMLElement | SVGElement>>;
 export declare function waitUntilNoSelector(page: Page, selector: string, state?: "hidden" | "detached"): Promise<import("playwright-core").ElementHandle<HTMLElement | SVGElement> | null>;
 export declare function willChangeBody(page: Page, callback: () => Promise<void>): Promise<boolean>;

package/dist/types/util.d.ts

@@ -19,7 +19,9 @@ export declare function markAsBusy(...elements: Element[]): void;
 export declare function clearBusyState(...elements: Element[]): void;
 export declare function waitForLoad(element: HTMLLinkElement, timeoutInMilliseconds?: number): Promise<void>;
 export declare function getHistoryMethodForAction(action: Action): (data: any, unused: string, url?: string | URL | null | undefined) => void;
+export declare function isAction(action: any): action is Action;
 export declare function getVisitAction(...elements: (Element | undefined)[]): Action | null;
 export declare function getMetaElement(name: string): HTMLMetaElement | null;
 export declare function getMetaContent(name: string): string | null;
 export declare function setMetaContent(name: string, content: string): HTMLMetaElement;
+export declare function findClosestRecursively<E extends Element>(element: Element | null, selector: string): E | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo",
-  "version": "7.2.4",
+  "version": "7.2.5",
   "description": "The speed of a single-page web application without having to write any JavaScript",
   "module": "dist/turbo.es2017-esm.js",
   "main": "dist/turbo.es2017-umd.js",
@@ -35,7 +35,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@playwright/test": "^1.22.2",
+    "@playwright/test": "^1.28.0",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@rollup/plugin-typescript": "^8.5.0",
     "@types/multer": "^1.4.5",