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

package/README.md

@@ -11,4 +11,8 @@ It's all done by sending HTML over the wire. And for those instances when that's
 
 Read more on [turbo.hotwired.dev](https://turbo.hotwired.dev).
 
+## Contributing
+
+Please read [CONTRIBUTING.md](./CONTRIBUTING.md).
+
 © 2021 Basecamp, LLC.

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*
-Turbo 7.2.0-beta.2
+Turbo 7.2.0-rc.1
 Copyright © 2022 Basecamp, LLC
  */
 (function () {
@@ -404,6 +404,9 @@ function getAttribute(attributeName, ...elements) {
     }
     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") {
@@ -445,6 +448,9 @@ 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}"]`);
 }
@@ -679,7 +685,7 @@ class FormSubmission {
         this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
         this.mustRedirect = mustRedirect;
     }
-    static confirmMethod(message, _element) {
+    static confirmMethod(message, _element, _submitter) {
         return Promise.resolve(confirm(message));
     }
     get method() {
@@ -717,17 +723,11 @@ class FormSubmission {
             return entries.concat(typeof value == "string" ? [[name, value]] : []);
         }, []);
     }
-    get confirmationMessage() {
-        var _a;
-        return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("data-turbo-confirm")) || this.formElement.getAttribute("data-turbo-confirm");
-    }
-    get needsConfirmation() {
-        return this.confirmationMessage !== null;
-    }
     async start() {
         const { initialized, requesting } = FormSubmissionState;
-        if (this.needsConfirmation) {
-            const answer = await 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;
             }
@@ -809,7 +809,7 @@ class FormSubmission {
         return !request.isIdempotent && this.mustRedirect;
     }
     requestAcceptsTurboStreamResponse(request) {
-        return !request.isIdempotent || this.formElement.hasAttribute("data-turbo-stream");
+        return !request.isIdempotent || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
     }
 }
 function buildFormData(formElement, submitter) {
@@ -875,10 +875,10 @@ class Snapshot {
         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 = {};
@@ -892,6 +892,12 @@ 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 FormSubmitObserver {
     constructor(delegate, eventTarget) {
@@ -1133,6 +1139,9 @@ class FormLinkClickObserver {
         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);
@@ -1141,8 +1150,8 @@ class FormLinkClickObserver {
             form.setAttribute("data-turbo-stream", "");
         this.delegate.submittedFormLinkToLocation(link, location, form);
         document.body.appendChild(form);
-        form.requestSubmit();
-        form.remove();
+        form.addEventListener("turbo:submit-end", () => form.remove(), { once: true });
+        requestAnimationFrame(() => form.requestSubmit());
     }
 }
 
@@ -1513,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) {
@@ -1550,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;
@@ -1600,6 +1622,7 @@ const defaultOptions = {
     updateHistory: true,
     shouldCacheSnapshot: true,
     acceptsStreamResponse: false,
+    initiator: document.documentElement,
 };
 var SystemStatusCode;
 (function (SystemStatusCode) {
@@ -1609,7 +1632,6 @@ var SystemStatusCode;
 })(SystemStatusCode || (SystemStatusCode = {}));
 class Visit {
     constructor(delegate, location, restorationIdentifier, options = {}) {
-        this.identifier = uuid();
         this.timingMetrics = {};
         this.followedRedirect = false;
         this.historyChanged = false;
@@ -1622,7 +1644,7 @@ class Visit {
         this.location = location;
         this.restorationIdentifier = restorationIdentifier || uuid();
         this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }));
-        const { action, historyChanged, referrer, snapshotHTML, response, visitCachedSnapshot, willRender, updateHistory, shouldCacheSnapshot, acceptsStreamResponse, } = Object.assign(Object.assign({}, defaultOptions), options);
+        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;
@@ -1635,6 +1657,7 @@ class Visit {
         this.scrolled = !willRender;
         this.shouldCacheSnapshot = shouldCacheSnapshot;
         this.acceptsStreamResponse = acceptsStreamResponse;
+        this.initiator = initiator;
     }
     get adapter() {
         return this.delegate.adapter;
@@ -1702,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();
         }
     }
@@ -1798,7 +1821,6 @@ class Visit {
         if (this.redirectedToLocation && !this.followedRedirect && ((_a = this.response) === null || _a === void 0 ? void 0 : _a.redirected)) {
             this.adapter.visitProposedToLocation(this.redirectedToLocation, {
                 action: "replace",
-                willRender: false,
                 response: this.response,
             });
             this.followedRedirect = true;
@@ -2208,7 +2230,7 @@ class Navigator {
         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)) {
                 return this.delegate.visitProposedToLocation(location, options);
             }
@@ -2416,6 +2438,30 @@ 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();
@@ -2516,16 +2562,19 @@ class ErrorRenderer extends Renderer {
 }
 
 class PageRenderer extends Renderer {
-    static renderElement(currentElement, newElement) {
+    static async renderElement(currentElement, newElement) {
+        await nextEventLoopTick();
         if (document.body && newElement instanceof HTMLBodyElement) {
-            document.body.replaceWith(newElement);
+            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;
     }
     get reloadReason() {
         if (!this.newSnapshot.isVisitable) {
@@ -2538,6 +2587,11 @@ class PageRenderer extends Renderer {
                 reason: "tracked_element_mismatch",
             };
         }
+        if (!this.bodyElementMatches) {
+            return {
+                reason: "body_element_mismatch",
+            };
+        }
     }
     async prepareToRender() {
         await this.mergeHead();
@@ -2578,6 +2632,16 @@ class PageRenderer extends Renderer {
     get trackedElementsAreIdentical() {
         return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
     }
+    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) {
@@ -2776,6 +2840,7 @@ class Session {
         this.streamObserver = new StreamObserver(this);
         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;
@@ -2819,7 +2884,7 @@ class Session {
         this.adapter = adapter;
     }
     visit(location, options = {}) {
-        const frameElement = document.getElementById(options.frame || "");
+        const frameElement = options.frame ? document.getElementById(options.frame) : null;
         if (frameElement instanceof FrameElement) {
             frameElement.src = location.toString();
             return frameElement.loaded;
@@ -2835,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();
@@ -2880,22 +2945,27 @@ class Session {
     followedLinkToLocation(link, location) {
         const action = this.getActionForLink(link);
         const acceptsStreamResponse = link.hasAttribute("data-turbo-stream");
-        this.visit(location.href, { action, acceptsStreamResponse });
+        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);
         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) {
@@ -2955,16 +3025,12 @@ class Session {
     frameRendered(fetchResponse, frame) {
         this.notifyApplicationAfterFrameRender(fetchResponse, frame);
     }
-    frameMissing(frame, fetchResponse) {
-        console.warn(`Completing full-page visit as matching frame for #${frame.id} was missing from the response`);
-        return this.visit(fetchResponse.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, event) {
@@ -2974,15 +3040,18 @@ class Session {
             cancelable: true,
         });
     }
-    notifyApplicationBeforeVisitingLocation(location) {
+    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");
@@ -2997,7 +3066,6 @@ class Session {
         return dispatch("turbo:render");
     }
     notifyApplicationAfterPageLoad(timing = {}) {
-        clearBusyState(document.documentElement);
         return dispatch("turbo:load", {
             detail: { url: this.location.href, timing },
         });
@@ -3279,8 +3347,9 @@ class FrameController {
                     session.frameLoaded(this.element);
                     this.fetchResponseLoaded(fetchResponse);
                 }
-                else if (this.sessionWillHandleMissingFrame(fetchResponse)) {
-                    await session.frameMissing(this.element, 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);
                 }
             }
         }
@@ -3338,8 +3407,9 @@ class FrameController {
         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) {
@@ -3441,15 +3511,30 @@ class FrameController {
             session.history.update(method, expandURL(this.frame.src || ""), this.restorationIdentifier);
         }
     }
-    sessionWillHandleMissingFrame(fetchResponse) {
+    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: { fetchResponse },
+            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");
@@ -3585,6 +3670,9 @@ function activateElement(element, currentURL) {
 }
 
 class StreamElement extends HTMLElement {
+    static async renderElement(newElement) {
+        await newElement.performAction();
+    }
     async connectedCallback() {
         try {
             await this.render();
@@ -3599,9 +3687,10 @@ 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)) {
+            const event = this.beforeRenderEvent;
+            if (this.dispatchEvent(event)) {
                 await nextAnimationFrame();
-                this.performAction();
+                await event.detail.render(this);
             }
         })()));
     }
@@ -3645,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");
@@ -3670,7 +3764,7 @@ class StreamElement extends HTMLElement {
         return new CustomEvent("turbo:before-stream-render", {
             bubbles: true,
             cancelable: true,
-            detail: { newStream: this },
+            detail: { newStream: this, render: StreamElement.renderElement },
         });
     }
     get targetElementsById() {
@@ -3752,4 +3846,4 @@ if (customElements.get("turbo-stream-source") === undefined) {
 window.Turbo = Turbo;
 start();
 
-export { FrameRenderer, PageRenderer, PageSnapshot, StreamActions, cache, clearCache, connectStreamSource, disconnectStreamSource, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setFormMode, 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 };