@hotwired/turbo 7.0.0-rc.3 → 7.0.1

package/README.md

@@ -11,6 +11,4 @@ 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).
 
-_Note: Turbo is currently in beta. We're using it in production with [HEY](https://hey.com), but expect that significant changes might be made in response to early feedback ✌️❤️_
-
 © 2021 Basecamp, LLC.

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*
-Turbo 7.0.0-rc.2
+Turbo 7.0.0
 Copyright © 2021 Basecamp, LLC
  */
 (function () {
@@ -33,10 +33,20 @@ function clickCaptured(event) {
     }
 }
 (function () {
-    if ("SubmitEvent" in window)
+    if ("submitter" in Event.prototype)
         return;
+    let prototype;
+    if ("SubmitEvent" in window && /Apple Computer/.test(navigator.vendor)) {
+        prototype = window.SubmitEvent.prototype;
+    }
+    else if ("SubmitEvent" in window) {
+        return;
+    }
+    else {
+        prototype = window.Event.prototype;
+    }
     addEventListener("click", clickCaptured, true);
-    Object.defineProperty(Event.prototype, "submitter", {
+    Object.defineProperty(prototype, "submitter", {
         get() {
             if (this.type == "submit" && this.target instanceof HTMLFormElement) {
                 return submittersByForm.get(this.target);
@@ -222,11 +232,11 @@ class FetchResponse {
         return this.header("Content-Type");
     }
     get responseText() {
-        return this.response.text();
+        return this.response.clone().text();
     }
     get responseHTML() {
         if (this.isHTML) {
-            return this.response.text();
+            return this.response.clone().text();
         }
         else {
             return Promise.resolve(undefined);
@@ -239,7 +249,12 @@ class FetchResponse {
 
 function dispatch(eventName, { target, cancelable, detail } = {}) {
     const event = new CustomEvent(eventName, { cancelable, bubbles: true, detail });
-    void (target || document.documentElement).dispatchEvent(event);
+    if (target && target.isConnected) {
+        target.dispatchEvent(event);
+    }
+    else {
+        document.documentElement.dispatchEvent(event);
+    }
     return event;
 }
 function nextAnimationFrame() {
@@ -301,7 +316,7 @@ function fetchMethodFromString(method) {
     }
 }
 class FetchRequest {
-    constructor(delegate, method, location, body = new URLSearchParams) {
+    constructor(delegate, method, location, body = new URLSearchParams, target = null) {
         this.abortController = new AbortController;
         this.resolveRequestPromise = (value) => { };
         this.delegate = delegate;
@@ -314,6 +329,7 @@ class FetchRequest {
             this.body = body;
             this.url = location;
         }
+        this.target = target;
     }
     get location() {
         return this.url;
@@ -349,7 +365,7 @@ class FetchRequest {
     }
     async receive(response) {
         const fetchResponse = new FetchResponse(response);
-        const event = dispatch("turbo:before-fetch-response", { cancelable: true, detail: { fetchResponse } });
+        const event = dispatch("turbo:before-fetch-response", { cancelable: true, detail: { fetchResponse }, target: this.target });
         if (event.defaultPrevented) {
             this.delegate.requestPreventedHandlingResponse(this, fetchResponse);
         }
@@ -386,7 +402,15 @@ class FetchRequest {
     }
     async allowRequestToBeIntercepted(fetchOptions) {
         const requestInterception = new Promise(resolve => this.resolveRequestPromise = resolve);
-        const event = dispatch("turbo:before-fetch-request", { cancelable: true, detail: { fetchOptions, url: this.url.href, resume: this.resolveRequestPromise } });
+        const event = dispatch("turbo:before-fetch-request", {
+            cancelable: true,
+            detail: {
+                fetchOptions,
+                url: this.url.href,
+                resume: this.resolveRequestPromise
+            },
+            target: this.target
+        });
         if (event.defaultPrevented)
             await requestInterception;
     }
@@ -499,7 +523,7 @@ class FormSubmission {
         this.formElement = formElement;
         this.submitter = submitter;
         this.formData = buildFormData(formElement, submitter);
-        this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body);
+        this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
         this.mustRedirect = mustRedirect;
     }
     get method() {
@@ -666,8 +690,8 @@ class Snapshot {
 class FormInterceptor {
     constructor(delegate, element) {
         this.submitBubbled = ((event) => {
-            if (event.target instanceof HTMLFormElement) {
-                const form = event.target;
+            const form = event.target;
+            if (form instanceof HTMLFormElement && form.closest("turbo-frame, html") == this.element) {
                 const submitter = event.submitter || undefined;
                 if (this.delegate.shouldInterceptFormSubmission(form, submitter)) {
                     event.preventDefault();
@@ -1112,6 +1136,7 @@ class HeadSnapshot extends Snapshot {
         super(...arguments);
         this.detailsByOuterHTML = this.children
             .filter((element) => !elementIsNoscript(element))
+            .map((element) => elementWithoutNonce(element))
             .reduce((result, element) => {
             const { outerHTML } = element;
             const details = outerHTML in result
@@ -1196,6 +1221,12 @@ function elementIsMetaElementWithName(element, name) {
     const tagName = element.tagName.toLowerCase();
     return tagName == "meta" && element.getAttribute("name") == name;
 }
+function elementWithoutNonce(element) {
+    if (element.hasAttribute("nonce")) {
+        element.setAttribute("nonce", "");
+    }
+    return element;
+}
 
 class PageSnapshot extends Snapshot {
     constructor(element, headSnapshot) {
@@ -1739,18 +1770,18 @@ class FrameRedirector {
         return this.shouldRedirect(element, submitter);
     }
     formSubmissionIntercepted(element, submitter) {
-        const frame = this.findFrameElement(element);
+        const frame = this.findFrameElement(element, submitter);
         if (frame) {
             frame.removeAttribute("reloadable");
             frame.delegate.formSubmissionIntercepted(element, submitter);
         }
     }
     shouldRedirect(element, submitter) {
-        const frame = this.findFrameElement(element);
+        const frame = this.findFrameElement(element, submitter);
         return frame ? frame != element.closest("turbo-frame") : false;
     }
-    findFrameElement(element) {
-        const id = element.getAttribute("data-turbo-frame");
+    findFrameElement(element, submitter) {
+        const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame");
         if (id && id != "_top") {
             const frame = this.element.querySelector(`#${id}:not([disabled])`);
             if (frame instanceof FrameElement) {
@@ -2462,12 +2493,14 @@ class Session {
         this.convertLinkWithMethodClickToFormSubmission(link) || this.visit(location.href, { action });
     }
     convertLinkWithMethodClickToFormSubmission(link) {
+        var _a;
         const linkMethod = link.getAttribute("data-turbo-method");
         if (linkMethod) {
             const form = document.createElement("form");
             form.method = linkMethod;
             form.action = link.getAttribute("href") || "undefined";
-            document.body.appendChild(form);
+            form.hidden = true;
+            (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
             return dispatch("submit", { cancelable: true, target: form });
         }
         else {
@@ -2497,7 +2530,7 @@ class Session {
         this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
     }
     willSubmitForm(form, submitter) {
-        return this.elementDriveEnabled(form) && this.elementDriveEnabled(submitter);
+        return this.elementDriveEnabled(form) && (!submitter || this.elementDriveEnabled(submitter));
     }
     formSubmitted(form, submitter) {
         this.navigator.submitForm(form, submitter);
@@ -2618,7 +2651,7 @@ const deprecatedLocationPropertyDescriptors = {
 };
 
 const session = new Session;
-const { navigator } = session;
+const { navigator: navigator$1 } = session;
 function start() {
     session.start();
 }
@@ -2646,7 +2679,7 @@ function setProgressBarDelay(delay) {
 
 var Turbo = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    navigator: navigator,
+    navigator: navigator$1,
     session: session,
     PageRenderer: PageRenderer,
     PageSnapshot: PageSnapshot,
@@ -2776,7 +2809,7 @@ class FrameController {
         this.reloadable = false;
         this.formSubmission = new FormSubmission(this, element, submitter);
         if (this.formSubmission.fetchRequest.isIdempotent) {
-            this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
+            this.navigateFrame(element, this.formSubmission.fetchRequest.url.href, submitter);
         }
         else {
             const { fetchRequest } = this.formSubmission;
@@ -2813,7 +2846,7 @@ class FrameController {
         frame.setAttribute("busy", "");
     }
     formSubmissionSucceededWithResponse(formSubmission, response) {
-        const frame = this.findFrameElement(formSubmission.formElement);
+        const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter);
         frame.delegate.loadResponse(response);
     }
     formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
@@ -2834,7 +2867,7 @@ class FrameController {
     viewInvalidated() {
     }
     async visit(url) {
-        const request = new FetchRequest(this, FetchMethod.get, expandURL(url));
+        const request = new FetchRequest(this, FetchMethod.get, expandURL(url), undefined, this.element);
         return new Promise(resolve => {
             this.resolveVisitPromise = () => {
                 this.resolveVisitPromise = () => { };
@@ -2843,13 +2876,14 @@ class FrameController {
             request.perform();
         });
     }
-    navigateFrame(element, url) {
-        const frame = this.findFrameElement(element);
+    navigateFrame(element, url, submitter) {
+        const frame = this.findFrameElement(element, submitter);
+        frame.setAttribute("reloadable", "");
         frame.src = url;
     }
-    findFrameElement(element) {
+    findFrameElement(element, submitter) {
         var _a;
-        const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+        const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
         return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
     }
     async extractForeignFrameElement(container) {
@@ -2871,7 +2905,7 @@ class FrameController {
         return new FrameElement();
     }
     shouldInterceptNavigation(element, submitter) {
-        const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+        const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
         if (!this.enabled || id == "_top") {
             return false;
         }
@@ -3118,4 +3152,4 @@ customElements.define("turbo-stream", StreamElement);
 window.Turbo = Turbo;
 start();
 
-export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator, registerAdapter, renderStreamMessage, session, setProgressBarDelay, start, visit };
+export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setProgressBarDelay, start, visit };