@hotwired/turbo 7.0.0-rc.1 → 7.0.0-rc.3

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*
-Turbo 7.0.0-rc.1
+Turbo 7.0.0-rc.2
 Copyright © 2021 Basecamp, LLC
  */
 (function () {
@@ -338,8 +338,10 @@ class FetchRequest {
             return await this.receive(response);
         }
         catch (error) {
-            this.delegate.requestErrored(this, error);
-            throw error;
+            if (error.name !== 'AbortError') {
+                this.delegate.requestErrored(this, error);
+                throw error;
+            }
         }
         finally {
             this.delegate.requestFinished(this);
@@ -360,13 +362,15 @@ class FetchRequest {
         return fetchResponse;
     }
     get fetchOptions() {
+        var _a;
         return {
             method: FetchMethod[this.method].toUpperCase(),
             credentials: "same-origin",
             headers: this.headers,
             redirect: "follow",
             body: this.body,
-            signal: this.abortSignal
+            signal: this.abortSignal,
+            referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href
         };
     }
     get defaultHeaders() {
@@ -505,7 +509,8 @@ class FormSubmission {
     }
     get action() {
         var _a;
-        return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.action;
+        const formElementAction = typeof this.formElement.action === 'string' ? this.formElement.action : null;
+        return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.getAttribute("action") || formElementAction || "";
     }
     get location() {
         return expandURL(this.action);
@@ -631,12 +636,7 @@ class Snapshot {
         return this.getElementForAnchor(anchor) != null;
     }
     getElementForAnchor(anchor) {
-        try {
-            return this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
-        }
-        catch (_a) {
-            return null;
-        }
+        return anchor ? this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`) : null;
     }
     get isConnected() {
         return this.element.isConnected;
@@ -725,6 +725,9 @@ class View {
     scrollToPosition({ x, y }) {
         this.scrollRoot.scrollTo(x, y);
     }
+    scrollToTop() {
+        this.scrollToPosition({ x: 0, y: 0 });
+    }
     get scrollRoot() {
         return window;
     }
@@ -1293,6 +1296,9 @@ class Visit {
     get restorationData() {
         return this.history.getRestorationDataForIdentifier(this.restorationIdentifier);
     }
+    get silent() {
+        return this.isSamePage;
+    }
     start() {
         if (this.state == VisitState.initialized) {
             this.recordTimingMetric(TimingMetric.visitStart);
@@ -1316,6 +1322,7 @@ class Visit {
             this.state = VisitState.completed;
             this.adapter.visitCompleted(this);
             this.delegate.visitCompleted(this);
+            this.followRedirect();
         }
     }
     fail() {
@@ -1428,8 +1435,10 @@ class Visit {
     }
     followRedirect() {
         if (this.redirectedToLocation && !this.followedRedirect) {
-            this.location = this.redirectedToLocation;
-            this.history.replace(this.redirectedToLocation, this.restorationIdentifier);
+            this.adapter.visitProposedToLocation(this.redirectedToLocation, {
+                action: 'replace',
+                response: this.response
+            });
             this.followedRedirect = true;
         }
     }
@@ -1474,10 +1483,10 @@ class Visit {
     performScroll() {
         if (!this.scrolled) {
             if (this.action == "restore") {
-                this.scrollToRestoredPosition() || this.scrollToAnchor() || this.scrollToTop();
+                this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop();
             }
             else {
-                this.scrollToAnchor() || this.scrollToTop();
+                this.scrollToAnchor() || this.view.scrollToTop();
             }
             if (this.isSamePage) {
                 this.delegate.visitScrolledToSamePageLocation(this.view.lastRenderedLocation, this.location);
@@ -1499,9 +1508,6 @@ class Visit {
             return true;
         }
     }
-    scrollToTop() {
-        this.view.scrollToPosition({ x: 0, y: 0 });
-    }
     recordTimingMetric(metric) {
         this.timingMetrics[metric] = new Date().getTime();
     }
@@ -1575,7 +1581,7 @@ class BrowserAdapter {
     visitRequestStarted(visit) {
         this.progressBar.setValue(0);
         if (visit.hasCachedSnapshot() || visit.action != "restore") {
-            this.showProgressBarAfterDelay();
+            this.showVisitProgressBarAfterDelay();
         }
         else {
             this.showProgressBar();
@@ -1596,10 +1602,9 @@ class BrowserAdapter {
     }
     visitRequestFinished(visit) {
         this.progressBar.setValue(1);
-        this.hideProgressBar();
+        this.hideVisitProgressBar();
     }
     visitCompleted(visit) {
-        visit.followRedirect();
     }
     pageInvalidated() {
         this.reload();
@@ -1608,14 +1613,34 @@ class BrowserAdapter {
     }
     visitRendered(visit) {
     }
-    showProgressBarAfterDelay() {
-        this.progressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
+    formSubmissionStarted(formSubmission) {
+        this.progressBar.setValue(0);
+        this.showFormProgressBarAfterDelay();
+    }
+    formSubmissionFinished(formSubmission) {
+        this.progressBar.setValue(1);
+        this.hideFormProgressBar();
+    }
+    showVisitProgressBarAfterDelay() {
+        this.visitProgressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
+    }
+    hideVisitProgressBar() {
+        this.progressBar.hide();
+        if (this.visitProgressBarTimeout != null) {
+            window.clearTimeout(this.visitProgressBarTimeout);
+            delete this.visitProgressBarTimeout;
+        }
     }
-    hideProgressBar() {
+    showFormProgressBarAfterDelay() {
+        if (this.formProgressBarTimeout == null) {
+            this.formProgressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
+        }
+    }
+    hideFormProgressBar() {
         this.progressBar.hide();
-        if (this.progressBarTimeout != null) {
-            window.clearTimeout(this.progressBarTimeout);
-            delete this.progressBarTimeout;
+        if (this.formProgressBarTimeout != null) {
+            window.clearTimeout(this.formProgressBarTimeout);
+            delete this.formProgressBarTimeout;
         }
     }
     reload() {
@@ -1706,6 +1731,7 @@ class FrameRedirector {
     linkClickIntercepted(element, url) {
         const frame = this.findFrameElement(element);
         if (frame) {
+            frame.setAttribute("reloadable", "");
             frame.src = url;
         }
     }
@@ -1715,6 +1741,7 @@ class FrameRedirector {
     formSubmissionIntercepted(element, submitter) {
         const frame = this.findFrameElement(element);
         if (frame) {
+            frame.removeAttribute("reloadable");
             frame.delegate.formSubmissionIntercepted(element, submitter);
         }
     }
@@ -1821,7 +1848,8 @@ class LinkClickObserver {
         };
         this.clickBubbled = (event) => {
             if (this.clickEventIsSignificant(event)) {
-                const link = this.findLinkFromClickTarget(event.target);
+                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)) {
@@ -1873,7 +1901,7 @@ class Navigator {
         this.delegate = delegate;
     }
     proposeVisit(location, options = {}) {
-        if (this.delegate.allowsVisitingLocation(location)) {
+        if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
             this.delegate.visitProposedToLocation(location, options);
         }
     }
@@ -1912,6 +1940,9 @@ class Navigator {
         return this.delegate.history;
     }
     formSubmissionStarted(formSubmission) {
+        if (typeof this.adapter.formSubmissionStarted === 'function') {
+            this.adapter.formSubmissionStarted(formSubmission);
+        }
     }
     async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
         if (formSubmission == this.formSubmission) {
@@ -1930,7 +1961,13 @@ class Navigator {
         const responseHTML = await fetchResponse.responseHTML;
         if (responseHTML) {
             const snapshot = PageSnapshot.fromHTMLString(responseHTML);
-            await this.view.renderPage(snapshot);
+            if (fetchResponse.serverError) {
+                await this.view.renderError(snapshot);
+            }
+            else {
+                await this.view.renderPage(snapshot);
+            }
+            this.view.scrollToTop();
             this.view.clearSnapshotCache();
         }
     }
@@ -1938,6 +1975,9 @@ class Navigator {
         console.error(error);
     }
     formSubmissionFinished(formSubmission) {
+        if (typeof this.adapter.formSubmissionFinished === 'function') {
+            this.adapter.formSubmissionFinished(formSubmission);
+        }
     }
     visitStarted(visit) {
         this.delegate.visitStarted(visit);
@@ -1946,8 +1986,12 @@ class Navigator {
         this.delegate.visitCompleted(visit);
     }
     locationWithActionIsSamePage(location, action) {
-        return getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) &&
-            (getAnchor(location) != null || action == "restore");
+        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));
     }
     visitScrolledToSamePageLocation(oldURL, newURL) {
         this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
@@ -2335,6 +2379,7 @@ class Session {
         this.scrollObserver = new ScrollObserver(this);
         this.streamObserver = new StreamObserver(this);
         this.frameRedirector = new FrameRedirector(document.documentElement);
+        this.drive = true;
         this.enabled = true;
         this.progressBarDelay = 500;
         this.started = false;
@@ -2408,7 +2453,7 @@ class Session {
         this.history.updateRestorationData({ scrollPosition: position });
     }
     willFollowLinkToLocation(link, location) {
-        return elementIsNavigable(link)
+        return this.elementDriveEnabled(link)
             && this.locationIsVisitable(location)
             && this.applicationAllowsFollowingLinkToLocation(link, location);
     }
@@ -2417,21 +2462,20 @@ 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";
-            (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
+            document.body.appendChild(form);
             return dispatch("submit", { cancelable: true, target: form });
         }
         else {
             return false;
         }
     }
-    allowsVisitingLocation(location) {
-        return this.applicationAllowsVisitingLocation(location);
+    allowsVisitingLocationWithAction(location, action) {
+        return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location);
     }
     visitProposedToLocation(location, options) {
         extendURLWithDeprecatedProperties(location);
@@ -2439,7 +2483,9 @@ class Session {
     }
     visitStarted(visit) {
         extendURLWithDeprecatedProperties(visit.location);
-        this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
+        if (!visit.silent) {
+            this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
+        }
     }
     visitCompleted(visit) {
         this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
@@ -2451,7 +2497,7 @@ class Session {
         this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
     }
     willSubmitForm(form, submitter) {
-        return elementIsNavigable(form) && elementIsNavigable(submitter);
+        return this.elementDriveEnabled(form) && this.elementDriveEnabled(submitter);
     }
     formSubmitted(form, submitter) {
         this.navigator.submitForm(form, submitter);
@@ -2470,7 +2516,10 @@ class Session {
         this.renderStreamMessage(message);
     }
     viewWillCacheSnapshot() {
-        this.notifyApplicationBeforeCachingSnapshot();
+        var _a;
+        if (!((_a = this.navigator.currentVisit) === null || _a === void 0 ? void 0 : _a.silent)) {
+            this.notifyApplicationBeforeCachingSnapshot();
+        }
     }
     allowsImmediateRender({ element }, resume) {
         const event = this.notifyApplicationBeforeRender(element, resume);
@@ -2483,6 +2532,12 @@ class Session {
     viewInvalidated() {
         this.adapter.pageInvalidated();
     }
+    frameLoaded(frame) {
+        this.notifyApplicationAfterFrameLoad(frame);
+    }
+    frameRendered(fetchResponse, frame) {
+        this.notifyApplicationAfterFrameRender(fetchResponse, frame);
+    }
     applicationAllowsFollowingLinkToLocation(link, location) {
         const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
         return !event.defaultPrevented;
@@ -2515,6 +2570,31 @@ class Session {
     notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
         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 });
+    }
+    elementDriveEnabled(element) {
+        const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
+        if (this.drive) {
+            if (container) {
+                return container.getAttribute("data-turbo") != "false";
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            if (container) {
+                return container.getAttribute("data-turbo") == "true";
+            }
+            else {
+                return false;
+            }
+        }
+    }
     getActionForLink(link) {
         const action = link.getAttribute("data-turbo-action");
         return isAction(action) ? action : "advance";
@@ -2526,15 +2606,6 @@ class Session {
         return this.view.snapshot;
     }
 }
-function elementIsNavigable(element) {
-    const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
-    if (container) {
-        return container.getAttribute("data-turbo") != "false";
-    }
-    else {
-        return true;
-    }
-}
 function extendURLWithDeprecatedProperties(url) {
     Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
 }
@@ -2546,6 +2617,49 @@ const deprecatedLocationPropertyDescriptors = {
     }
 };
 
+const session = new Session;
+const { navigator } = session;
+function start() {
+    session.start();
+}
+function registerAdapter(adapter) {
+    session.registerAdapter(adapter);
+}
+function visit(location, options) {
+    session.visit(location, options);
+}
+function connectStreamSource(source) {
+    session.connectStreamSource(source);
+}
+function disconnectStreamSource(source) {
+    session.disconnectStreamSource(source);
+}
+function renderStreamMessage(message) {
+    session.renderStreamMessage(message);
+}
+function clearCache() {
+    session.clearCache();
+}
+function setProgressBarDelay(delay) {
+    session.setProgressBarDelay(delay);
+}
+
+var Turbo = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    navigator: navigator,
+    session: session,
+    PageRenderer: PageRenderer,
+    PageSnapshot: PageSnapshot,
+    start: start,
+    registerAdapter: registerAdapter,
+    visit: visit,
+    connectStreamSource: connectStreamSource,
+    disconnectStreamSource: disconnectStreamSource,
+    renderStreamMessage: renderStreamMessage,
+    clearCache: clearCache,
+    setProgressBarDelay: setProgressBarDelay
+});
+
 class FrameController {
     constructor(element) {
         this.resolveVisitPromise = () => { };
@@ -2561,6 +2675,7 @@ class FrameController {
     connect() {
         if (!this.connected) {
             this.connected = true;
+            this.reloadable = false;
             if (this.loadingStyle == FrameLoadingStyle.lazy) {
                 this.appearanceObserver.start();
             }
@@ -2597,7 +2712,7 @@ class FrameController {
         }
     }
     async loadSourceURL() {
-        if (!this.settingSourceURL && this.enabled && this.isActive && this.sourceURL != this.currentURL) {
+        if (!this.settingSourceURL && this.enabled && this.isActive && (this.reloadable || this.sourceURL != this.currentURL)) {
             const previousURL = this.currentURL;
             this.currentURL = this.sourceURL;
             if (this.sourceURL) {
@@ -2606,6 +2721,7 @@ class FrameController {
                     this.appearanceObserver.stop();
                     await this.element.loaded;
                     this.hasBeenLoaded = true;
+                    session.frameLoaded(this.element);
                 }
                 catch (error) {
                     this.currentURL = previousURL;
@@ -2627,6 +2743,7 @@ class FrameController {
                 if (this.view.renderPromise)
                     await this.view.renderPromise;
                 await this.view.render(renderer);
+                session.frameRendered(fetchResponse, this.element);
             }
         }
         catch (error) {
@@ -2646,6 +2763,7 @@ class FrameController {
         }
     }
     linkClickIntercepted(element, url) {
+        this.reloadable = true;
         this.navigateFrame(element, url);
     }
     shouldInterceptFormSubmission(element, submitter) {
@@ -2655,6 +2773,7 @@ class FrameController {
         if (this.formSubmission) {
             this.formSubmission.stop();
         }
+        this.reloadable = false;
         this.formSubmission = new FormSubmission(this, element, submitter);
         if (this.formSubmission.fetchRequest.isIdempotent) {
             this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
@@ -2762,10 +2881,10 @@ class FrameController {
                 return !frameElement.disabled;
             }
         }
-        if (!elementIsNavigable(element)) {
+        if (!session.elementDriveEnabled(element)) {
             return false;
         }
-        if (submitter && !elementIsNavigable(submitter)) {
+        if (submitter && !session.elementDriveEnabled(submitter)) {
             return false;
         }
         return true;
@@ -2781,6 +2900,19 @@ 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;
@@ -2983,50 +3115,7 @@ customElements.define("turbo-stream", StreamElement);
     }
 })();
 
-const session = new Session;
-const { navigator } = session;
-function start() {
-    session.start();
-}
-function registerAdapter(adapter) {
-    session.registerAdapter(adapter);
-}
-function visit(location, options) {
-    session.visit(location, options);
-}
-function connectStreamSource(source) {
-    session.connectStreamSource(source);
-}
-function disconnectStreamSource(source) {
-    session.disconnectStreamSource(source);
-}
-function renderStreamMessage(message) {
-    session.renderStreamMessage(message);
-}
-function clearCache() {
-    session.clearCache();
-}
-function setProgressBarDelay(delay) {
-    session.setProgressBarDelay(delay);
-}
-
-var Turbo = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    navigator: navigator,
-    PageRenderer: PageRenderer,
-    PageSnapshot: PageSnapshot,
-    start: start,
-    registerAdapter: registerAdapter,
-    visit: visit,
-    connectStreamSource: connectStreamSource,
-    disconnectStreamSource: disconnectStreamSource,
-    renderStreamMessage: renderStreamMessage,
-    clearCache: clearCache,
-    setProgressBarDelay: setProgressBarDelay
-});
-
 window.Turbo = Turbo;
 start();
 
-export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator, registerAdapter, renderStreamMessage, setProgressBarDelay, start, visit };
-//# sourceMappingURL=turbo.es2017-esm.js.map
+export { PageRenderer, PageSnapshot, clearCache, connectStreamSource, disconnectStreamSource, navigator, registerAdapter, renderStreamMessage, session, setProgressBarDelay, start, visit };