@hotwired/turbo 7.0.0-beta.3 → 7.0.0-beta.4

package/dist/turbo.es2017-umd.js

@@ -1,5 +1,5 @@
 /*
-Turbo 7.0.0-beta.3
+Turbo 7.0.0-beta.4
 Copyright © 2021 Basecamp, LLC
  */
 (function (global, factory) {
@@ -141,80 +141,53 @@ Copyright © 2021 Basecamp, LLC
         }
     }
 
-    class Location {
-        constructor(url) {
-            const linkWithAnchor = document.createElement("a");
-            linkWithAnchor.href = url;
-            this.absoluteURL = linkWithAnchor.href;
-            const anchorLength = linkWithAnchor.hash.length;
-            if (anchorLength < 2) {
-                this.requestURL = this.absoluteURL;
-            }
-            else {
-                this.requestURL = this.absoluteURL.slice(0, -anchorLength);
-                this.anchor = linkWithAnchor.hash.slice(1);
-            }
-        }
-        static get currentLocation() {
-            return this.wrap(window.location.toString());
-        }
-        static wrap(locatable) {
-            if (typeof locatable == "string") {
-                return new this(locatable);
-            }
-            else if (locatable != null) {
-                return locatable;
-            }
-        }
-        getOrigin() {
-            return this.absoluteURL.split("/", 3).join("/");
-        }
-        getPath() {
-            return (this.requestURL.match(/\/\/[^/]*(\/[^?;]*)/) || [])[1] || "/";
-        }
-        getPathComponents() {
-            return this.getPath().split("/").slice(1);
-        }
-        getLastPathComponent() {
-            return this.getPathComponents().slice(-1)[0];
-        }
-        getExtension() {
-            return (this.getLastPathComponent().match(/\.[^.]*$/) || [])[0] || "";
-        }
-        isHTML() {
-            return !!this.getExtension().match(/^(?:|\.(?:htm|html|xhtml))$/);
-        }
-        isPrefixedBy(location) {
-            const prefixURL = getPrefixURL(location);
-            return this.isEqualTo(location) || stringStartsWith(this.absoluteURL, prefixURL);
-        }
-        isEqualTo(location) {
-            return location && this.absoluteURL === location.absoluteURL;
+    function expandURL(locatable) {
+        const anchor = document.createElement("a");
+        anchor.href = locatable.toString();
+        return new URL(anchor.href);
+    }
+    function getAnchor(url) {
+        let anchorMatch;
+        if (url.hash) {
+            return url.hash.slice(1);
         }
-        toCacheKey() {
-            return this.requestURL;
+        else if (anchorMatch = url.href.match(/#(.*)$/)) {
+            return anchorMatch[1];
         }
-        toJSON() {
-            return this.absoluteURL;
+        else {
+            return "";
         }
-        toString() {
-            return this.absoluteURL;
+    }
+    function getExtension(url) {
+        return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
+    }
+    function isHTML(url) {
+        return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml))$/);
+    }
+    function isPrefixedBy(baseURL, url) {
+        const prefix = getPrefix(url);
+        return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
+    }
+    function toCacheKey(url) {
+        const anchorLength = url.hash.length;
+        if (anchorLength < 2) {
+            return url.href;
         }
-        valueOf() {
-            return this.absoluteURL;
+        else {
+            return url.href.slice(0, -anchorLength);
         }
     }
-    function getPrefixURL(location) {
-        return addTrailingSlash(location.getOrigin() + location.getPath());
+    function getPathComponents(url) {
+        return url.pathname.split("/").slice(1);
     }
-    function addTrailingSlash(url) {
-        return stringEndsWith(url, "/") ? url : url + "/";
+    function getLastPathComponent(url) {
+        return getPathComponents(url).slice(-1)[0];
     }
-    function stringStartsWith(string, prefix) {
-        return string.slice(0, prefix.length) === prefix;
+    function getPrefix(url) {
+        return addTrailingSlash(url.origin + url.pathname);
     }
-    function stringEndsWith(string, suffix) {
-        return string.slice(-suffix.length) === suffix;
+    function addTrailingSlash(value) {
+        return value.endsWith("/") ? value : value + "/";
     }
 
     class FetchResponse {
@@ -237,7 +210,7 @@ Copyright © 2021 Basecamp, LLC
             return this.response.redirected;
         }
         get location() {
-            return Location.wrap(this.response.url);
+            return expandURL(this.response.url);
         }
         get isHTML() {
             return this.contentType && this.contentType.match(/^(?:text\/([^\s;,]+\b)?html|application\/xhtml\+xml)\b/);
@@ -272,9 +245,15 @@ Copyright © 2021 Basecamp, LLC
     function nextAnimationFrame() {
         return new Promise(resolve => requestAnimationFrame(() => resolve()));
     }
+    function nextEventLoopTick() {
+        return new Promise(resolve => setTimeout(() => resolve(), 0));
+    }
     function nextMicrotask() {
         return Promise.resolve();
     }
+    function parseHTMLDocument(html = "") {
+        return new DOMParser().parseFromString(html, "text/html");
+    }
     function unindent(strings, ...values) {
         const lines = interpolate(strings, values).replace(/^\n/, "").split("\n");
         const match = lines[0].match(/^\s+/);
@@ -322,28 +301,23 @@ Copyright © 2021 Basecamp, LLC
         }
     }
     class FetchRequest {
-        constructor(delegate, method, location, body) {
+        constructor(delegate, method, location, body = new URLSearchParams) {
             this.abortController = new AbortController;
             this.delegate = delegate;
             this.method = method;
-            this.location = location;
-            this.body = body;
-        }
-        get url() {
-            const url = this.location.absoluteURL;
-            const query = this.params.toString();
-            if (this.isIdempotent && query.length) {
-                return [url, query].join(url.includes("?") ? "&" : "?");
+            if (this.isIdempotent) {
+                this.url = mergeFormDataEntries(location, [...body.entries()]);
             }
             else {
-                return url;
+                this.body = body;
+                this.url = location;
             }
         }
+        get location() {
+            return this.url;
+        }
         get params() {
-            return this.entries.reduce((params, [name, value]) => {
-                params.append(name, value.toString());
-                return params;
-            }, new URLSearchParams);
+            return this.url.searchParams;
         }
         get entries() {
             return this.body ? Array.from(this.body.entries()) : [];
@@ -356,7 +330,7 @@ Copyright © 2021 Basecamp, LLC
             dispatch("turbo:before-fetch-request", { detail: { fetchOptions } });
             try {
                 this.delegate.requestStarted(this);
-                const response = await fetch(this.url, fetchOptions);
+                const response = await fetch(this.url.href, fetchOptions);
                 return await this.receive(response);
             }
             catch (error) {
@@ -387,7 +361,7 @@ Copyright © 2021 Basecamp, LLC
                 credentials: "same-origin",
                 headers: this.headers,
                 redirect: "follow",
-                body: this.isIdempotent ? undefined : this.body,
+                body: this.body,
                 signal: this.abortSignal
             };
         }
@@ -395,19 +369,35 @@ Copyright © 2021 Basecamp, LLC
             return this.method == FetchMethod.get;
         }
         get headers() {
-            return Object.assign({ "Accept": "text/html, application/xhtml+xml" }, this.additionalHeaders);
-        }
-        get additionalHeaders() {
-            if (typeof this.delegate.additionalHeadersForRequest == "function") {
-                return this.delegate.additionalHeadersForRequest(this);
-            }
-            else {
-                return {};
+            const headers = Object.assign({}, this.defaultHeaders);
+            if (typeof this.delegate.prepareHeadersForRequest == "function") {
+                this.delegate.prepareHeadersForRequest(headers, this);
             }
+            return headers;
         }
         get abortSignal() {
             return this.abortController.signal;
         }
+        get defaultHeaders() {
+            return {
+                "Accept": "text/html, application/xhtml+xml"
+            };
+        }
+    }
+    function mergeFormDataEntries(url, entries) {
+        const currentSearchParams = new URLSearchParams(url.search);
+        for (const [name, value] of entries) {
+            if (value instanceof File)
+                continue;
+            if (currentSearchParams.has(name)) {
+                currentSearchParams.delete(name);
+                url.searchParams.set(name, value);
+            }
+            else {
+                url.searchParams.append(name, value);
+            }
+        }
+        return url;
     }
 
     class AppearanceObserver {
@@ -437,6 +427,42 @@ Copyright © 2021 Basecamp, LLC
         }
     }
 
+    class StreamMessage {
+        constructor(html) {
+            this.templateElement = document.createElement("template");
+            this.templateElement.innerHTML = html;
+        }
+        static wrap(message) {
+            if (typeof message == "string") {
+                return new this(message);
+            }
+            else {
+                return message;
+            }
+        }
+        get fragment() {
+            const fragment = document.createDocumentFragment();
+            for (const element of this.foreignElements) {
+                fragment.appendChild(document.importNode(element, true));
+            }
+            return fragment;
+        }
+        get foreignElements() {
+            return this.templateChildren.reduce((streamElements, child) => {
+                if (child.tagName.toLowerCase() == "turbo-stream") {
+                    return [...streamElements, child];
+                }
+                else {
+                    return streamElements;
+                }
+            }, []);
+        }
+        get templateChildren() {
+            return Array.from(this.templateElement.content.children);
+        }
+    }
+    StreamMessage.contentType = "text/vnd.turbo-stream.html";
+
     var FormSubmissionState;
     (function (FormSubmissionState) {
         FormSubmissionState[FormSubmissionState["initialized"] = 0] = "initialized";
@@ -446,14 +472,27 @@ Copyright © 2021 Basecamp, LLC
         FormSubmissionState[FormSubmissionState["stopping"] = 4] = "stopping";
         FormSubmissionState[FormSubmissionState["stopped"] = 5] = "stopped";
     })(FormSubmissionState || (FormSubmissionState = {}));
+    var FormEnctype;
+    (function (FormEnctype) {
+        FormEnctype["urlEncoded"] = "application/x-www-form-urlencoded";
+        FormEnctype["multipart"] = "multipart/form-data";
+        FormEnctype["plain"] = "text/plain";
+    })(FormEnctype || (FormEnctype = {}));
+    function formEnctypeFromString(encoding) {
+        switch (encoding.toLowerCase()) {
+            case FormEnctype.multipart: return FormEnctype.multipart;
+            case FormEnctype.plain: return FormEnctype.plain;
+            default: return FormEnctype.urlEncoded;
+        }
+    }
     class FormSubmission {
         constructor(delegate, formElement, submitter, mustRedirect = false) {
             this.state = FormSubmissionState.initialized;
             this.delegate = delegate;
             this.formElement = formElement;
-            this.formData = buildFormData(formElement, submitter);
             this.submitter = submitter;
-            this.fetchRequest = new FetchRequest(this, this.method, this.location, this.formData);
+            this.formData = buildFormData(formElement, submitter);
+            this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body);
             this.mustRedirect = mustRedirect;
         }
         get method() {
@@ -466,7 +505,24 @@ Copyright © 2021 Basecamp, LLC
             return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.action;
         }
         get location() {
-            return Location.wrap(this.action);
+            return expandURL(this.action);
+        }
+        get body() {
+            if (this.enctype == FormEnctype.urlEncoded || this.method == FetchMethod.get) {
+                return new URLSearchParams(this.stringFormData);
+            }
+            else {
+                return this.formData;
+            }
+        }
+        get enctype() {
+            var _a;
+            return formEnctypeFromString(((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formenctype")) || this.formElement.enctype);
+        }
+        get stringFormData() {
+            return [...this.formData].reduce((entries, [name, value]) => {
+                return entries.concat(typeof value == "string" ? [[name, value]] : []);
+            }, []);
         }
         async start() {
             const { initialized, requesting } = FormSubmissionState;
@@ -483,15 +539,14 @@ Copyright © 2021 Basecamp, LLC
                 return true;
             }
         }
-        additionalHeadersForRequest(request) {
-            const headers = {};
-            if (this.method != FetchMethod.get) {
+        prepareHeadersForRequest(headers, request) {
+            if (!request.isIdempotent) {
                 const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
                 if (token) {
                     headers["X-CSRF-Token"] = token;
                 }
+                headers["Accept"] = [StreamMessage.contentType, headers["Accept"]].join(", ");
             }
-            return headers;
         }
         requestStarted(request) {
             this.state = FormSubmissionState.waiting;
@@ -559,6 +614,38 @@ Copyright © 2021 Basecamp, LLC
         return response.statusCode == 200 && !response.redirected;
     }
 
+    class Snapshot {
+        constructor(element) {
+            this.element = element;
+        }
+        get children() {
+            return [...this.element.children];
+        }
+        hasAnchor(anchor) {
+            return this.getElementForAnchor(anchor) != null;
+        }
+        getElementForAnchor(anchor) {
+            try {
+                return this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
+            }
+            catch (_a) {
+                return null;
+            }
+        }
+        get firstAutofocusableElement() {
+            return this.element.querySelector("[autofocus]");
+        }
+        get permanentElements() {
+            return [...this.element.querySelectorAll("[id][data-turbo-permanent]")];
+        }
+        getPermanentElementById(id) {
+            return this.element.querySelector(`#${id}[data-turbo-permanent]`);
+        }
+        getPermanentElementsPresentInSnapshot(snapshot) {
+            return this.permanentElements.filter(({ id }) => snapshot.getPermanentElementById(id));
+        }
+    }
+
     class FormInterceptor {
         constructor(delegate, element) {
             this.submitBubbled = ((event) => {
@@ -583,6 +670,83 @@ Copyright © 2021 Basecamp, LLC
         }
     }
 
+    class View {
+        constructor(delegate, element) {
+            this.delegate = delegate;
+            this.element = element;
+        }
+        scrollToAnchor(anchor) {
+            const element = this.snapshot.getElementForAnchor(anchor);
+            if (element) {
+                this.scrollToElement(element);
+            }
+            else {
+                this.scrollToPosition({ x: 0, y: 0 });
+            }
+        }
+        scrollToElement(element) {
+            element.scrollIntoView();
+        }
+        scrollToPosition({ x, y }) {
+            this.scrollRoot.scrollTo(x, y);
+        }
+        get scrollRoot() {
+            return window;
+        }
+        async render(renderer) {
+            if (this.renderer) {
+                throw new Error("rendering is already in progress");
+            }
+            const { isPreview, shouldRender, newSnapshot: snapshot } = renderer;
+            if (shouldRender) {
+                try {
+                    this.renderer = renderer;
+                    this.prepareToRenderSnapshot(renderer);
+                    this.delegate.viewWillRenderSnapshot(snapshot, isPreview);
+                    await this.renderSnapshot(renderer);
+                    this.delegate.viewRenderedSnapshot(snapshot, isPreview);
+                    this.finishRenderingSnapshot(renderer);
+                }
+                finally {
+                    delete this.renderer;
+                }
+            }
+            else {
+                this.invalidate();
+            }
+        }
+        invalidate() {
+            this.delegate.viewInvalidated();
+        }
+        prepareToRenderSnapshot(renderer) {
+            this.markAsPreview(renderer.isPreview);
+            renderer.prepareToRender();
+        }
+        markAsPreview(isPreview) {
+            if (isPreview) {
+                this.element.setAttribute("data-turbo-preview", "");
+            }
+            else {
+                this.element.removeAttribute("data-turbo-preview");
+            }
+        }
+        async renderSnapshot(renderer) {
+            await renderer.render();
+        }
+        finishRenderingSnapshot(renderer) {
+            renderer.finishRendering();
+        }
+    }
+
+    class FrameView extends View {
+        invalidate() {
+            this.element.innerHTML = "";
+        }
+        get snapshot() {
+            return new Snapshot(this.element);
+        }
+    }
+
     class LinkInterceptor {
         constructor(delegate, element) {
             this.clickBubbled = (event) => {
@@ -629,10 +793,147 @@ Copyright © 2021 Basecamp, LLC
         }
     }
 
+    class Renderer {
+        constructor(currentSnapshot, newSnapshot, isPreview) {
+            this.currentSnapshot = currentSnapshot;
+            this.newSnapshot = newSnapshot;
+            this.isPreview = isPreview;
+            this.promise = new Promise((resolve, reject) => this.resolvingFunctions = { resolve, reject });
+        }
+        get shouldRender() {
+            return true;
+        }
+        prepareToRender() {
+            return;
+        }
+        finishRendering() {
+            if (this.resolvingFunctions) {
+                this.resolvingFunctions.resolve();
+                delete this.resolvingFunctions;
+            }
+        }
+        createScriptElement(element) {
+            if (element.getAttribute("data-turbo-eval") == "false") {
+                return element;
+            }
+            else {
+                const createdScriptElement = document.createElement("script");
+                createdScriptElement.textContent = element.textContent;
+                createdScriptElement.async = false;
+                copyElementAttributes(createdScriptElement, element);
+                return createdScriptElement;
+            }
+        }
+        preservingPermanentElements(callback) {
+            const placeholders = relocatePermanentElements(this.currentSnapshot, this.newSnapshot);
+            callback();
+            replacePlaceholderElementsWithClonedPermanentElements(placeholders);
+        }
+        focusFirstAutofocusableElement() {
+            const element = this.newSnapshot.firstAutofocusableElement;
+            if (elementIsFocusable(element)) {
+                element.focus();
+            }
+        }
+        get currentElement() {
+            return this.currentSnapshot.element;
+        }
+        get newElement() {
+            return this.newSnapshot.element;
+        }
+    }
+    function replaceElementWithElement(fromElement, toElement) {
+        const parentElement = fromElement.parentElement;
+        if (parentElement) {
+            return parentElement.replaceChild(toElement, fromElement);
+        }
+    }
+    function copyElementAttributes(destinationElement, sourceElement) {
+        for (const { name, value } of [...sourceElement.attributes]) {
+            destinationElement.setAttribute(name, value);
+        }
+    }
+    function createPlaceholderForPermanentElement(permanentElement) {
+        const element = document.createElement("meta");
+        element.setAttribute("name", "turbo-permanent-placeholder");
+        element.setAttribute("content", permanentElement.id);
+        return { element, permanentElement };
+    }
+    function replacePlaceholderElementsWithClonedPermanentElements(placeholders) {
+        for (const { element, permanentElement } of placeholders) {
+            const clonedElement = permanentElement.cloneNode(true);
+            replaceElementWithElement(element, clonedElement);
+        }
+    }
+    function relocatePermanentElements(currentSnapshot, newSnapshot) {
+        return currentSnapshot.getPermanentElementsPresentInSnapshot(newSnapshot).reduce((placeholders, permanentElement) => {
+            const newElement = newSnapshot.getPermanentElementById(permanentElement.id);
+            if (newElement) {
+                const placeholder = createPlaceholderForPermanentElement(permanentElement);
+                replaceElementWithElement(permanentElement, placeholder.element);
+                replaceElementWithElement(newElement, permanentElement);
+                return [...placeholders, placeholder];
+            }
+            else {
+                return placeholders;
+            }
+        }, []);
+    }
+    function elementIsFocusable(element) {
+        return element && typeof element.focus == "function";
+    }
+
+    class FrameRenderer extends Renderer {
+        get shouldRender() {
+            return true;
+        }
+        async render() {
+            await nextAnimationFrame();
+            this.preservingPermanentElements(() => {
+                this.loadFrameElement();
+            });
+            this.scrollFrameIntoView();
+            await nextAnimationFrame();
+            this.focusFirstAutofocusableElement();
+        }
+        loadFrameElement() {
+            var _a;
+            const destinationRange = document.createRange();
+            destinationRange.selectNodeContents(this.currentElement);
+            destinationRange.deleteContents();
+            const frameElement = this.newElement;
+            const sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
+            if (sourceRange) {
+                sourceRange.selectNodeContents(frameElement);
+                this.currentElement.appendChild(sourceRange.extractContents());
+            }
+        }
+        scrollFrameIntoView() {
+            if (this.currentElement.autoscroll || this.newElement.autoscroll) {
+                const element = this.currentElement.firstElementChild;
+                const block = readScrollLogicalPosition(this.currentElement.getAttribute("data-autoscroll-block"), "end");
+                if (element) {
+                    element.scrollIntoView({ block });
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+    function readScrollLogicalPosition(value, defaultValue) {
+        if (value == "end" || value == "start" || value == "center" || value == "nearest") {
+            return value;
+        }
+        else {
+            return defaultValue;
+        }
+    }
+
     class FrameController {
         constructor(element) {
             this.resolveVisitPromise = () => { };
             this.element = element;
+            this.view = new FrameView(this, this.element);
             this.appearanceObserver = new AppearanceObserver(this, this.element);
             this.linkInterceptor = new LinkInterceptor(this, this.element);
             this.formInterceptor = new FormInterceptor(this, this.element);
@@ -677,14 +978,18 @@ Copyright © 2021 Basecamp, LLC
             }
         }
         async loadResponse(response) {
-            const fragment = fragmentFromHTML(await response.responseHTML);
-            if (fragment) {
-                const element = await this.extractForeignFrameElement(fragment);
-                await nextAnimationFrame();
-                this.loadFrameElement(element);
-                this.scrollFrameIntoView(element);
-                await nextAnimationFrame();
-                this.focusFirstAutofocusableElement();
+            try {
+                const html = await response.responseHTML;
+                if (html) {
+                    const { body } = parseHTMLDocument(html);
+                    const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
+                    const renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+                    await this.view.render(renderer);
+                }
+            }
+            catch (error) {
+                console.error(error);
+                this.view.invalidate();
             }
         }
         elementAppearedInViewport(element) {
@@ -705,14 +1010,14 @@ Copyright © 2021 Basecamp, LLC
             }
             this.formSubmission = new FormSubmission(this, element, submitter);
             if (this.formSubmission.fetchRequest.isIdempotent) {
-                this.navigateFrame(element, this.formSubmission.fetchRequest.url);
+                this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
             }
             else {
                 this.formSubmission.start();
             }
         }
-        additionalHeadersForRequest(request) {
-            return { "Turbo-Frame": this.id };
+        prepareHeadersForRequest(headers, request) {
+            headers["Turbo-Frame"] = this.id;
         }
         requestStarted(request) {
             this.element.setAttribute("busy", "");
@@ -748,9 +1053,14 @@ Copyright © 2021 Basecamp, LLC
         }
         formSubmissionFinished(formSubmission) {
         }
+        viewWillRenderSnapshot(snapshot, isPreview) {
+        }
+        viewRenderedSnapshot(snapshot, isPreview) {
+        }
+        viewInvalidated() {
+        }
         async visit(url) {
-            const location = Location.wrap(url);
-            const request = new FetchRequest(this, FetchMethod.get, location);
+            const request = new FetchRequest(this, FetchMethod.get, expandURL(url));
             return new Promise(resolve => {
                 this.resolveVisitPromise = () => {
                     this.resolveVisitPromise = () => { };
@@ -765,7 +1075,7 @@ Copyright © 2021 Basecamp, LLC
         }
         findFrameElement(element) {
             var _a;
-            const id = element.getAttribute("data-turbo-frame");
+            const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
             return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
         }
         async extractForeignFrameElement(container) {
@@ -781,36 +1091,6 @@ Copyright © 2021 Basecamp, LLC
             console.error(`Response has no matching <turbo-frame id="${id}"> element`);
             return new FrameElement();
         }
-        loadFrameElement(frameElement) {
-            var _a;
-            const destinationRange = document.createRange();
-            destinationRange.selectNodeContents(this.element);
-            destinationRange.deleteContents();
-            const sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
-            if (sourceRange) {
-                sourceRange.selectNodeContents(frameElement);
-                this.element.appendChild(sourceRange.extractContents());
-            }
-        }
-        focusFirstAutofocusableElement() {
-            const element = this.firstAutofocusableElement;
-            if (element) {
-                element.focus();
-                return true;
-            }
-            return false;
-        }
-        scrollFrameIntoView(frame) {
-            if (this.element.autoscroll || frame.autoscroll) {
-                const element = this.element.firstElementChild;
-                const block = readScrollLogicalPosition(this.element.getAttribute("data-autoscroll-block"), "end");
-                if (element) {
-                    element.scrollIntoView({ block });
-                    return true;
-                }
-            }
-            return false;
-        }
         shouldInterceptNavigation(element) {
             const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
             if (!this.enabled || id == "_top") {
@@ -824,10 +1104,6 @@ Copyright © 2021 Basecamp, LLC
             }
             return true;
         }
-        get firstAutofocusableElement() {
-            const element = this.element.querySelector("[autofocus]");
-            return element instanceof HTMLElement ? element : null;
-        }
         get id() {
             return this.element.id;
         }
@@ -855,20 +1131,6 @@ Copyright © 2021 Basecamp, LLC
             }
         }
     }
-    function readScrollLogicalPosition(value, defaultValue) {
-        if (value == "end" || value == "start" || value == "center" || value == "nearest") {
-            return value;
-        }
-        else {
-            return defaultValue;
-        }
-    }
-    function fragmentFromHTML(html) {
-        if (html) {
-            const foreignDocument = document.implementation.createHTMLDocument();
-            return foreignDocument.createRange().createContextualFragment(html);
-        }
-    }
     function activateElement(element) {
         if (element && element.ownerDocument !== document) {
             element = document.importNode(element, true);
@@ -1098,9 +1360,10 @@ Copyright © 2021 Basecamp, LLC
     }
     ProgressBar.animationDuration = 300;
 
-    class HeadDetails {
-        constructor(children) {
-            this.detailsByOuterHTML = children.reduce((result, element) => {
+    class HeadSnapshot extends Snapshot {
+        constructor() {
+            super(...arguments);
+            this.detailsByOuterHTML = this.children.reduce((result, element) => {
                 const { outerHTML } = element;
                 const details = outerHTML in result
                     ? result[outerHTML]
@@ -1112,29 +1375,25 @@ Copyright © 2021 Basecamp, LLC
                 return Object.assign(Object.assign({}, result), { [outerHTML]: Object.assign(Object.assign({}, details), { elements: [...details.elements, element] }) });
             }, {});
         }
-        static fromHeadElement(headElement) {
-            const children = headElement ? [...headElement.children] : [];
-            return new this(children);
-        }
-        getTrackedElementSignature() {
+        get trackedElementSignature() {
             return Object.keys(this.detailsByOuterHTML)
                 .filter(outerHTML => this.detailsByOuterHTML[outerHTML].tracked)
                 .join("");
         }
-        getScriptElementsNotInDetails(headDetails) {
-            return this.getElementsMatchingTypeNotInDetails("script", headDetails);
+        getScriptElementsNotInSnapshot(snapshot) {
+            return this.getElementsMatchingTypeNotInSnapshot("script", snapshot);
         }
-        getStylesheetElementsNotInDetails(headDetails) {
-            return this.getElementsMatchingTypeNotInDetails("stylesheet", headDetails);
+        getStylesheetElementsNotInSnapshot(snapshot) {
+            return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot);
         }
-        getElementsMatchingTypeNotInDetails(matchedType, headDetails) {
+        getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
             return Object.keys(this.detailsByOuterHTML)
-                .filter(outerHTML => !(outerHTML in headDetails.detailsByOuterHTML))
+                .filter(outerHTML => !(outerHTML in snapshot.detailsByOuterHTML))
                 .map(outerHTML => this.detailsByOuterHTML[outerHTML])
                 .filter(({ type }) => type == matchedType)
                 .map(({ elements: [element] }) => element);
         }
-        getProvisionalElements() {
+        get provisionalElements() {
             return Object.keys(this.detailsByOuterHTML).reduce((result, outerHTML) => {
                 const { type, tracked, elements } = this.detailsByOuterHTML[outerHTML];
                 if (type == null && !tracked) {
@@ -1184,79 +1443,46 @@ Copyright © 2021 Basecamp, LLC
         const tagName = element.tagName.toLowerCase();
         return tagName == "meta" && element.getAttribute("name") == name;
     }
-
-    class Snapshot {
-        constructor(headDetails, bodyElement) {
-            this.headDetails = headDetails;
-            this.bodyElement = bodyElement;
-        }
-        static wrap(value) {
-            if (value instanceof this) {
-                return value;
-            }
-            else if (typeof value == "string") {
-                return this.fromHTMLString(value);
-            }
-            else {
-                return this.fromHTMLElement(value);
-            }
-        }
-        static fromHTMLString(html) {
-            const { documentElement } = new DOMParser().parseFromString(html, "text/html");
-            return this.fromHTMLElement(documentElement);
-        }
-        static fromHTMLElement(htmlElement) {
-            const headElement = htmlElement.querySelector("head");
-            const bodyElement = htmlElement.querySelector("body") || document.createElement("body");
-            const headDetails = HeadDetails.fromHeadElement(headElement);
-            return new this(headDetails, bodyElement);
-        }
-        clone() {
-            const { bodyElement } = Snapshot.fromHTMLString(this.bodyElement.outerHTML);
-            return new Snapshot(this.headDetails, bodyElement);
-        }
-        getRootLocation() {
-            const root = this.getSetting("root", "/");
-            return new Location(root);
+
+    class PageSnapshot extends Snapshot {
+        constructor(element, headSnapshot) {
+            super(element);
+            this.headSnapshot = headSnapshot;
         }
-        getCacheControlValue() {
-            return this.getSetting("cache-control");
+        static fromHTMLString(html = "") {
+            return this.fromDocument(parseHTMLDocument(html));
         }
-        getElementForAnchor(anchor) {
-            try {
-                return this.bodyElement.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
-            }
-            catch (_a) {
-                return null;
-            }
+        static fromElement(element) {
+            return this.fromDocument(element.ownerDocument);
         }
-        getPermanentElements() {
-            return [...this.bodyElement.querySelectorAll("[id][data-turbo-permanent]")];
+        static fromDocument({ head, body }) {
+            return new this(body, new HeadSnapshot(head));
         }
-        getPermanentElementById(id) {
-            return this.bodyElement.querySelector(`#${id}[data-turbo-permanent]`);
+        clone() {
+            return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
         }
-        getPermanentElementsPresentInSnapshot(snapshot) {
-            return this.getPermanentElements().filter(({ id }) => snapshot.getPermanentElementById(id));
+        get headElement() {
+            return this.headSnapshot.element;
         }
-        findFirstAutofocusableElement() {
-            return this.bodyElement.querySelector("[autofocus]");
+        get rootLocation() {
+            var _a;
+            const root = (_a = this.getSetting("root")) !== null && _a !== void 0 ? _a : "/";
+            return expandURL(root);
         }
-        hasAnchor(anchor) {
-            return this.getElementForAnchor(anchor) != null;
+        get cacheControlValue() {
+            return this.getSetting("cache-control");
         }
-        isPreviewable() {
-            return this.getCacheControlValue() != "no-preview";
+        get isPreviewable() {
+            return this.cacheControlValue != "no-preview";
         }
-        isCacheable() {
-            return this.getCacheControlValue() != "no-cache";
+        get isCacheable() {
+            return this.cacheControlValue != "no-cache";
         }
-        isVisitable() {
+        get isVisitable() {
             return this.getSetting("visit-control") != "reload";
         }
-        getSetting(name, defaultValue) {
-            const value = this.headDetails.getMetaValue(`turbo-${name}`);
-            return value == null ? defaultValue : value;
+        getSetting(name) {
+            return this.headSnapshot.getMetaValue(`turbo-${name}`);
         }
     }
 
@@ -1294,17 +1520,6 @@ Copyright © 2021 Basecamp, LLC
             this.scrolled = false;
             this.snapshotCached = false;
             this.state = VisitState.initialized;
-            this.performScroll = () => {
-                if (!this.scrolled) {
-                    if (this.action == "restore") {
-                        this.scrollToRestoredPosition() || this.scrollToTop();
-                    }
-                    else {
-                        this.scrollToAnchor() || this.scrollToTop();
-                    }
-                    this.scrolled = true;
-                }
-            };
             this.delegate = delegate;
             this.location = location;
             this.restorationIdentifier = restorationIdentifier || uuid();
@@ -1359,8 +1574,9 @@ Copyright © 2021 Basecamp, LLC
             }
         }
         changeHistory() {
+            var _a;
             if (!this.historyChanged) {
-                const actionForHistory = this.location.isEqualTo(this.referrer) ? "replace" : this.action;
+                const actionForHistory = this.location.href === ((_a = this.referrer) === null || _a === void 0 ? void 0 : _a.href) ? "replace" : this.action;
                 const method = this.getHistoryMethodForAction(actionForHistory);
                 this.history.update(method, this.location, this.restorationIdentifier);
                 this.historyChanged = true;
@@ -1405,15 +1621,15 @@ Copyright © 2021 Basecamp, LLC
         loadResponse() {
             if (this.response) {
                 const { statusCode, responseHTML } = this.response;
-                this.render(() => {
+                this.render(async () => {
                     this.cacheSnapshot();
                     if (isSuccessful(statusCode) && responseHTML != null) {
-                        this.view.render({ snapshot: Snapshot.fromHTMLString(responseHTML) }, this.performScroll);
+                        await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML));
                         this.adapter.visitRendered(this);
                         this.complete();
                     }
                     else {
-                        this.view.render({ error: responseHTML }, this.performScroll);
+                        await this.view.renderError(PageSnapshot.fromHTMLString(responseHTML));
                         this.adapter.visitRendered(this);
                         this.fail();
                     }
@@ -1422,15 +1638,15 @@ Copyright © 2021 Basecamp, LLC
         }
         getCachedSnapshot() {
             const snapshot = this.view.getCachedSnapshotForLocation(this.location) || this.getPreloadedSnapshot();
-            if (snapshot && (!this.location.anchor || snapshot.hasAnchor(this.location.anchor))) {
-                if (this.action == "restore" || snapshot.isPreviewable()) {
+            if (snapshot && (!getAnchor(this.location) || snapshot.hasAnchor(getAnchor(this.location)))) {
+                if (this.action == "restore" || snapshot.isPreviewable) {
                     return snapshot;
                 }
             }
         }
         getPreloadedSnapshot() {
             if (this.snapshotHTML) {
-                return Snapshot.wrap(this.snapshotHTML);
+                return PageSnapshot.fromHTMLString(this.snapshotHTML);
             }
         }
         hasCachedSnapshot() {
@@ -1440,9 +1656,9 @@ Copyright © 2021 Basecamp, LLC
             const snapshot = this.getCachedSnapshot();
             if (snapshot) {
                 const isPreview = this.shouldIssueRequest();
-                this.render(() => {
+                this.render(async () => {
                     this.cacheSnapshot();
-                    this.view.render({ snapshot, isPreview }, this.performScroll);
+                    await this.view.renderPage(snapshot);
                     this.adapter.visitRendered(this);
                     if (!isPreview) {
                         this.complete();
@@ -1487,6 +1703,17 @@ Copyright © 2021 Basecamp, LLC
         requestFinished() {
             this.finishRequest();
         }
+        performScroll() {
+            if (!this.scrolled) {
+                if (this.action == "restore") {
+                    this.scrollToRestoredPosition() || this.scrollToTop();
+                }
+                else {
+                    this.scrollToAnchor() || this.scrollToTop();
+                }
+                this.scrolled = true;
+            }
+        }
         scrollToRestoredPosition() {
             const { scrollPosition } = this.restorationData;
             if (scrollPosition) {
@@ -1495,8 +1722,8 @@ Copyright © 2021 Basecamp, LLC
             }
         }
         scrollToAnchor() {
-            if (this.location.anchor != null) {
-                this.view.scrollToAnchor(this.location.anchor);
+            if (getAnchor(this.location) != null) {
+                this.view.scrollToAnchor(getAnchor(this.location));
                 return true;
             }
         }
@@ -1530,12 +1757,14 @@ Copyright © 2021 Basecamp, LLC
                 this.snapshotCached = true;
             }
         }
-        render(callback) {
+        async render(callback) {
             this.cancelRender();
-            this.frame = requestAnimationFrame(() => {
-                delete this.frame;
-                callback.call(this);
+            await new Promise(resolve => {
+                this.frame = requestAnimationFrame(() => resolve());
             });
+            callback();
+            delete this.frame;
+            this.performScroll();
         }
         cancelRender() {
             if (this.frame) {
@@ -1711,11 +1940,10 @@ Copyright © 2021 Basecamp, LLC
                 if (this.shouldHandlePopState()) {
                     const { turbo } = event.state || {};
                     if (turbo) {
-                        const location = Location.currentLocation;
-                        this.location = location;
+                        this.location = new URL(window.location.href);
                         const { restorationIdentifier } = turbo;
                         this.restorationIdentifier = restorationIdentifier;
-                        this.delegate.historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier);
+                        this.delegate.historyPoppedToLocationWithRestorationIdentifier(this.location, restorationIdentifier);
                     }
                 }
             };
@@ -1730,7 +1958,7 @@ Copyright © 2021 Basecamp, LLC
                 addEventListener("popstate", this.onPopState, false);
                 addEventListener("load", this.onPageLoad, false);
                 this.started = true;
-                this.replace(Location.currentLocation);
+                this.replace(new URL(window.location.href));
             }
         }
         stop() {
@@ -1748,7 +1976,7 @@ Copyright © 2021 Basecamp, LLC
         }
         update(method, location, restorationIdentifier = uuid()) {
             const state = { turbo: { restorationIdentifier } };
-            method.call(history, state, "", location.absoluteURL);
+            method.call(history, state, "", location.href);
             this.location = location;
             this.restorationIdentifier = restorationIdentifier;
         }
@@ -1829,7 +2057,7 @@ Copyright © 2021 Basecamp, LLC
             }
         }
         getLocationForLink(link) {
-            return new Location(link.getAttribute("href") || "");
+            return expandURL(link.getAttribute("href") || "");
         }
     }
 
@@ -1842,15 +2070,20 @@ Copyright © 2021 Basecamp, LLC
                 this.delegate.visitProposedToLocation(location, options);
             }
         }
-        startVisit(location, restorationIdentifier, options = {}) {
+        startVisit(locatable, restorationIdentifier, options = {}) {
             this.stop();
-            this.currentVisit = new Visit(this, Location.wrap(location), restorationIdentifier, Object.assign({ referrer: this.location }, options));
+            this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, Object.assign({ referrer: this.location }, options));
             this.currentVisit.start();
         }
         submitForm(form, submitter) {
             this.stop();
             this.formSubmission = new FormSubmission(this, form, submitter, true);
-            this.formSubmission.start();
+            if (this.formSubmission.fetchRequest.isIdempotent) {
+                this.proposeVisit(this.formSubmission.fetchRequest.url);
+            }
+            else {
+                this.formSubmission.start();
+            }
         }
         stop() {
             if (this.formSubmission) {
@@ -1889,8 +2122,8 @@ Copyright © 2021 Basecamp, LLC
         async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
             const responseHTML = await fetchResponse.responseHTML;
             if (responseHTML) {
-                const snapshot = Snapshot.fromHTMLString(responseHTML);
-                this.view.render({ snapshot }, () => { });
+                const snapshot = PageSnapshot.fromHTMLString(responseHTML);
+                await this.view.renderPage(snapshot);
                 this.view.clearSnapshotCache();
             }
         }
@@ -1998,53 +2231,10 @@ Copyright © 2021 Basecamp, LLC
         }
     }
 
-    class StreamMessage {
-        constructor(html) {
-            this.templateElement = document.createElement("template");
-            this.templateElement.innerHTML = html;
-        }
-        static wrap(message) {
-            if (typeof message == "string") {
-                return new this(message);
-            }
-            else {
-                return message;
-            }
-        }
-        get fragment() {
-            const fragment = document.createDocumentFragment();
-            for (const element of this.foreignElements) {
-                fragment.appendChild(document.importNode(element, true));
-            }
-            return fragment;
-        }
-        get foreignElements() {
-            return this.templateChildren.reduce((streamElements, child) => {
-                if (child.tagName.toLowerCase() == "turbo-stream") {
-                    return [...streamElements, child];
-                }
-                else {
-                    return streamElements;
-                }
-            }, []);
-        }
-        get templateChildren() {
-            return Array.from(this.templateElement.content.children);
-        }
-    }
-
     class StreamObserver {
         constructor(delegate) {
             this.sources = new Set;
             this.started = false;
-            this.prepareFetchRequest = ((event) => {
-                var _a;
-                const fetchOptions = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.fetchOptions;
-                if (fetchOptions) {
-                    const { headers } = fetchOptions;
-                    headers.Accept = ["text/vnd.turbo-stream.html", headers.Accept].join(", ");
-                }
-            });
             this.inspectFetchResponse = ((event) => {
                 const response = fetchResponseFromEvent(event);
                 if (response && fetchResponseIsStream(response)) {
@@ -2062,14 +2252,12 @@ Copyright © 2021 Basecamp, LLC
         start() {
             if (!this.started) {
                 this.started = true;
-                addEventListener("turbo:before-fetch-request", this.prepareFetchRequest, true);
                 addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
             }
         }
         stop() {
             if (this.started) {
                 this.started = false;
-                removeEventListener("turbo:before-fetch-request", this.prepareFetchRequest, true);
                 removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
             }
         }
@@ -2108,70 +2296,25 @@ Copyright © 2021 Basecamp, LLC
     function fetchResponseIsStream(response) {
         var _a;
         const contentType = (_a = response.contentType) !== null && _a !== void 0 ? _a : "";
-        return /^text\/vnd\.turbo-stream\.html\b/.test(contentType);
+        return contentType.startsWith(StreamMessage.contentType);
     }
 
     function isAction(action) {
         return action == "advance" || action == "replace" || action == "restore";
     }
 
-    class Renderer {
-        renderView(callback) {
-            this.delegate.viewWillRender(this.newBody);
-            callback();
-            this.delegate.viewRendered(this.newBody);
-        }
-        invalidateView() {
-            this.delegate.viewInvalidated();
-        }
-        createScriptElement(element) {
-            if (element.getAttribute("data-turbo-eval") == "false") {
-                return element;
-            }
-            else {
-                const createdScriptElement = document.createElement("script");
-                createdScriptElement.textContent = element.textContent;
-                createdScriptElement.async = false;
-                copyElementAttributes(createdScriptElement, element);
-                return createdScriptElement;
-            }
-        }
-    }
-    function copyElementAttributes(destinationElement, sourceElement) {
-        for (const { name, value } of [...sourceElement.attributes]) {
-            destinationElement.setAttribute(name, value);
-        }
-    }
-
     class ErrorRenderer extends Renderer {
-        constructor(delegate, html) {
-            super();
-            this.delegate = delegate;
-            this.htmlElement = (() => {
-                const htmlElement = document.createElement("html");
-                htmlElement.innerHTML = html;
-                return htmlElement;
-            })();
-            this.newHead = this.htmlElement.querySelector("head") || document.createElement("head");
-            this.newBody = this.htmlElement.querySelector("body") || document.createElement("body");
-        }
-        static render(delegate, callback, html) {
-            return new this(delegate, html).render(callback);
-        }
-        render(callback) {
-            this.renderView(() => {
-                this.replaceHeadAndBody();
-                this.activateBodyScriptElements();
-                callback();
-            });
+        async render() {
+            this.replaceHeadAndBody();
+            this.activateScriptElements();
         }
         replaceHeadAndBody() {
             const { documentElement, head, body } = document;
             documentElement.replaceChild(this.newHead, head);
-            documentElement.replaceChild(this.newBody, body);
+            documentElement.replaceChild(this.newElement, body);
         }
-        activateBodyScriptElements() {
-            for (const replaceableElement of this.getScriptElements()) {
+        activateScriptElements() {
+            for (const replaceableElement of this.scriptElements) {
                 const parentNode = replaceableElement.parentNode;
                 if (parentNode) {
                     const element = this.createScriptElement(replaceableElement);
@@ -2179,84 +2322,38 @@ Copyright © 2021 Basecamp, LLC
                 }
             }
         }
-        getScriptElements() {
+        get newHead() {
+            return this.newSnapshot.headSnapshot.element;
+        }
+        get scriptElements() {
             return [...document.documentElement.querySelectorAll("script")];
         }
     }
 
-    class SnapshotCache {
-        constructor(size) {
-            this.keys = [];
-            this.snapshots = {};
-            this.size = size;
-        }
-        has(location) {
-            return location.toCacheKey() in this.snapshots;
-        }
-        get(location) {
-            if (this.has(location)) {
-                const snapshot = this.read(location);
-                this.touch(location);
-                return snapshot;
-            }
-        }
-        put(location, snapshot) {
-            this.write(location, snapshot);
-            this.touch(location);
-            return snapshot;
-        }
-        clear() {
-            this.snapshots = {};
-        }
-        read(location) {
-            return this.snapshots[location.toCacheKey()];
+    class PageRenderer extends Renderer {
+        get shouldRender() {
+            return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
         }
-        write(location, snapshot) {
-            this.snapshots[location.toCacheKey()] = snapshot;
+        prepareToRender() {
+            this.mergeHead();
         }
-        touch(location) {
-            const key = location.toCacheKey();
-            const index = this.keys.indexOf(key);
-            if (index > -1)
-                this.keys.splice(index, 1);
-            this.keys.unshift(key);
-            this.trim();
+        async render() {
+            this.replaceBody();
         }
-        trim() {
-            for (const key of this.keys.splice(this.size)) {
-                delete this.snapshots[key];
+        finishRendering() {
+            super.finishRendering();
+            if (this.isPreview) {
+                this.focusFirstAutofocusableElement();
             }
         }
-    }
-
-    class SnapshotRenderer extends Renderer {
-        constructor(delegate, currentSnapshot, newSnapshot, isPreview) {
-            super();
-            this.delegate = delegate;
-            this.currentSnapshot = currentSnapshot;
-            this.currentHeadDetails = currentSnapshot.headDetails;
-            this.newSnapshot = newSnapshot;
-            this.newHeadDetails = newSnapshot.headDetails;
-            this.newBody = newSnapshot.bodyElement;
-            this.isPreview = isPreview;
+        get currentHeadSnapshot() {
+            return this.currentSnapshot.headSnapshot;
         }
-        static render(delegate, callback, currentSnapshot, newSnapshot, isPreview) {
-            return new this(delegate, currentSnapshot, newSnapshot, isPreview).render(callback);
+        get newHeadSnapshot() {
+            return this.newSnapshot.headSnapshot;
         }
-        render(callback) {
-            if (this.shouldRender()) {
-                this.mergeHead();
-                this.renderView(() => {
-                    this.replaceBody();
-                    if (!this.isPreview) {
-                        this.focusFirstAutofocusableElement();
-                    }
-                    callback();
-                });
-            }
-            else {
-                this.invalidateView();
-            }
+        get newElement() {
+            return this.newSnapshot.element;
         }
         mergeHead() {
             this.copyNewHeadStylesheetElements();
@@ -2265,186 +2362,147 @@ Copyright © 2021 Basecamp, LLC
             this.copyNewHeadProvisionalElements();
         }
         replaceBody() {
-            const placeholders = this.relocateCurrentBodyPermanentElements();
-            this.activateNewBody();
-            this.assignNewBody();
-            this.replacePlaceholderElementsWithClonedPermanentElements(placeholders);
-        }
-        shouldRender() {
-            return this.newSnapshot.isVisitable() && this.trackedElementsAreIdentical();
+            this.preservingPermanentElements(() => {
+                this.activateNewBody();
+                this.assignNewBody();
+            });
         }
-        trackedElementsAreIdentical() {
-            return this.currentHeadDetails.getTrackedElementSignature() == this.newHeadDetails.getTrackedElementSignature();
+        get trackedElementsAreIdentical() {
+            return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
         }
         copyNewHeadStylesheetElements() {
-            for (const element of this.getNewHeadStylesheetElements()) {
+            for (const element of this.newHeadStylesheetElements) {
                 document.head.appendChild(element);
             }
         }
         copyNewHeadScriptElements() {
-            for (const element of this.getNewHeadScriptElements()) {
+            for (const element of this.newHeadScriptElements) {
                 document.head.appendChild(this.createScriptElement(element));
             }
         }
         removeCurrentHeadProvisionalElements() {
-            for (const element of this.getCurrentHeadProvisionalElements()) {
+            for (const element of this.currentHeadProvisionalElements) {
                 document.head.removeChild(element);
             }
         }
         copyNewHeadProvisionalElements() {
-            for (const element of this.getNewHeadProvisionalElements()) {
+            for (const element of this.newHeadProvisionalElements) {
                 document.head.appendChild(element);
             }
         }
-        relocateCurrentBodyPermanentElements() {
-            return this.getCurrentBodyPermanentElements().reduce((placeholders, permanentElement) => {
-                const newElement = this.newSnapshot.getPermanentElementById(permanentElement.id);
-                if (newElement) {
-                    const placeholder = createPlaceholderForPermanentElement(permanentElement);
-                    replaceElementWithElement(permanentElement, placeholder.element);
-                    replaceElementWithElement(newElement, permanentElement);
-                    return [...placeholders, placeholder];
-                }
-                else {
-                    return placeholders;
-                }
-            }, []);
-        }
-        replacePlaceholderElementsWithClonedPermanentElements(placeholders) {
-            for (const { element, permanentElement } of placeholders) {
-                const clonedElement = permanentElement.cloneNode(true);
-                replaceElementWithElement(element, clonedElement);
-            }
-        }
         activateNewBody() {
-            document.adoptNode(this.newBody);
+            document.adoptNode(this.newElement);
             this.activateNewBodyScriptElements();
         }
         activateNewBodyScriptElements() {
-            for (const inertScriptElement of this.getNewBodyScriptElements()) {
+            for (const inertScriptElement of this.newBodyScriptElements) {
                 const activatedScriptElement = this.createScriptElement(inertScriptElement);
                 replaceElementWithElement(inertScriptElement, activatedScriptElement);
             }
         }
         assignNewBody() {
-            if (document.body) {
-                replaceElementWithElement(document.body, this.newBody);
+            if (document.body && this.newElement instanceof HTMLBodyElement) {
+                replaceElementWithElement(document.body, this.newElement);
             }
             else {
-                document.documentElement.appendChild(this.newBody);
+                document.documentElement.appendChild(this.newElement);
             }
         }
-        focusFirstAutofocusableElement() {
-            const element = this.newSnapshot.findFirstAutofocusableElement();
-            if (elementIsFocusable(element)) {
-                element.focus();
-            }
+        get newHeadStylesheetElements() {
+            return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
         }
-        getNewHeadStylesheetElements() {
-            return this.newHeadDetails.getStylesheetElementsNotInDetails(this.currentHeadDetails);
+        get newHeadScriptElements() {
+            return this.newHeadSnapshot.getScriptElementsNotInSnapshot(this.currentHeadSnapshot);
         }
-        getNewHeadScriptElements() {
-            return this.newHeadDetails.getScriptElementsNotInDetails(this.currentHeadDetails);
+        get currentHeadProvisionalElements() {
+            return this.currentHeadSnapshot.provisionalElements;
         }
-        getCurrentHeadProvisionalElements() {
-            return this.currentHeadDetails.getProvisionalElements();
+        get newHeadProvisionalElements() {
+            return this.newHeadSnapshot.provisionalElements;
         }
-        getNewHeadProvisionalElements() {
-            return this.newHeadDetails.getProvisionalElements();
+        get newBodyScriptElements() {
+            return [...this.newElement.querySelectorAll("script")];
         }
-        getCurrentBodyPermanentElements() {
-            return this.currentSnapshot.getPermanentElementsPresentInSnapshot(this.newSnapshot);
+    }
+
+    class SnapshotCache {
+        constructor(size) {
+            this.keys = [];
+            this.snapshots = {};
+            this.size = size;
         }
-        getNewBodyScriptElements() {
-            return [...this.newBody.querySelectorAll("script")];
+        has(location) {
+            return toCacheKey(location) in this.snapshots;
         }
-    }
-    function createPlaceholderForPermanentElement(permanentElement) {
-        const element = document.createElement("meta");
-        element.setAttribute("name", "turbo-permanent-placeholder");
-        element.setAttribute("content", permanentElement.id);
-        return { element, permanentElement };
-    }
-    function replaceElementWithElement(fromElement, toElement) {
-        const parentElement = fromElement.parentElement;
-        if (parentElement) {
-            return parentElement.replaceChild(toElement, fromElement);
+        get(location) {
+            if (this.has(location)) {
+                const snapshot = this.read(location);
+                this.touch(location);
+                return snapshot;
+            }
+        }
+        put(location, snapshot) {
+            this.write(location, snapshot);
+            this.touch(location);
+            return snapshot;
+        }
+        clear() {
+            this.snapshots = {};
+        }
+        read(location) {
+            return this.snapshots[toCacheKey(location)];
+        }
+        write(location, snapshot) {
+            this.snapshots[toCacheKey(location)] = snapshot;
+        }
+        touch(location) {
+            const key = toCacheKey(location);
+            const index = this.keys.indexOf(key);
+            if (index > -1)
+                this.keys.splice(index, 1);
+            this.keys.unshift(key);
+            this.trim();
+        }
+        trim() {
+            for (const key of this.keys.splice(this.size)) {
+                delete this.snapshots[key];
+            }
         }
-    }
-    function elementIsFocusable(element) {
-        return element && typeof element.focus == "function";
     }
 
-    class View {
-        constructor(delegate) {
-            this.htmlElement = document.documentElement;
+    class PageView extends View {
+        constructor() {
+            super(...arguments);
             this.snapshotCache = new SnapshotCache(10);
-            this.delegate = delegate;
+            this.lastRenderedLocation = new URL(location.href);
         }
-        getRootLocation() {
-            return this.getSnapshot().getRootLocation();
+        renderPage(snapshot, isPreview = false) {
+            const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
+            return this.render(renderer);
         }
-        getElementForAnchor(anchor) {
-            return this.getSnapshot().getElementForAnchor(anchor);
-        }
-        getSnapshot() {
-            return Snapshot.fromHTMLElement(this.htmlElement);
+        renderError(snapshot) {
+            const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
+            this.render(renderer);
         }
         clearSnapshotCache() {
             this.snapshotCache.clear();
         }
-        shouldCacheSnapshot() {
-            return this.getSnapshot().isCacheable();
-        }
         async cacheSnapshot() {
-            if (this.shouldCacheSnapshot()) {
+            if (this.shouldCacheSnapshot) {
                 this.delegate.viewWillCacheSnapshot();
-                const snapshot = this.getSnapshot();
-                const location = this.lastRenderedLocation || Location.currentLocation;
-                await nextMicrotask();
+                const { snapshot, lastRenderedLocation: location } = this;
+                await nextEventLoopTick();
                 this.snapshotCache.put(location, snapshot.clone());
             }
         }
         getCachedSnapshotForLocation(location) {
             return this.snapshotCache.get(location);
         }
-        render({ snapshot, error, isPreview }, callback) {
-            this.markAsPreview(isPreview);
-            if (snapshot) {
-                this.renderSnapshot(snapshot, isPreview, callback);
-            }
-            else {
-                this.renderError(error, callback);
-            }
-        }
-        scrollToAnchor(anchor) {
-            const element = this.getElementForAnchor(anchor);
-            if (element) {
-                this.scrollToElement(element);
-            }
-            else {
-                this.scrollToPosition({ x: 0, y: 0 });
-            }
-        }
-        scrollToElement(element) {
-            element.scrollIntoView();
-        }
-        scrollToPosition({ x, y }) {
-            window.scrollTo(x, y);
-        }
-        markAsPreview(isPreview) {
-            if (isPreview) {
-                this.htmlElement.setAttribute("data-turbo-preview", "");
-            }
-            else {
-                this.htmlElement.removeAttribute("data-turbo-preview");
-            }
-        }
-        renderSnapshot(snapshot, isPreview, callback) {
-            SnapshotRenderer.render(this.delegate, callback, this.getSnapshot(), snapshot, isPreview || false);
+        get snapshot() {
+            return PageSnapshot.fromElement(this.element);
         }
-        renderError(error, callback) {
-            ErrorRenderer.render(this.delegate, callback, error || "");
+        get shouldCacheSnapshot() {
+            return this.snapshot.isCacheable;
         }
     }
 
@@ -2452,7 +2510,7 @@ Copyright © 2021 Basecamp, LLC
         constructor() {
             this.navigator = new Navigator(this);
             this.history = new History(this);
-            this.view = new View(this);
+            this.view = new PageView(this, document.documentElement);
             this.adapter = new BrowserAdapter(this);
             this.pageObserver = new PageObserver(this);
             this.linkClickObserver = new LinkClickObserver(this);
@@ -2496,7 +2554,7 @@ Copyright © 2021 Basecamp, LLC
             this.adapter = adapter;
         }
         visit(location, options = {}) {
-            this.navigator.proposeVisit(Location.wrap(location), options);
+            this.navigator.proposeVisit(expandURL(location), options);
         }
         connectStreamSource(source) {
             this.streamObserver.connectStreamSource(source);
@@ -2537,15 +2595,17 @@ Copyright © 2021 Basecamp, LLC
         }
         followedLinkToLocation(link, location) {
             const action = this.getActionForLink(link);
-            this.visit(location, { action });
+            this.visit(location.href, { action });
         }
         allowsVisitingLocation(location) {
             return this.applicationAllowsVisitingLocation(location);
         }
         visitProposedToLocation(location, options) {
+            extendURLWithDeprecatedProperties(location);
             this.adapter.visitProposedToLocation(location, options);
         }
         visitStarted(visit) {
+            extendURLWithDeprecatedProperties(visit.location);
             this.notifyApplicationAfterVisitingLocation(visit.location);
         }
         visitCompleted(visit) {
@@ -2570,19 +2630,19 @@ Copyright © 2021 Basecamp, LLC
         receivedMessageFromStream(message) {
             this.renderStreamMessage(message);
         }
-        viewWillRender(newBody) {
-            this.notifyApplicationBeforeRender(newBody);
+        viewWillCacheSnapshot() {
+            this.notifyApplicationBeforeCachingSnapshot();
         }
-        viewRendered() {
+        viewWillRenderSnapshot({ element }, isPreview) {
+            this.notifyApplicationBeforeRender(element);
+        }
+        viewRenderedSnapshot(snapshot, isPreview) {
             this.view.lastRenderedLocation = this.history.location;
             this.notifyApplicationAfterRender();
         }
         viewInvalidated() {
             this.adapter.pageInvalidated();
         }
-        viewWillCacheSnapshot() {
-            this.notifyApplicationBeforeCachingSnapshot();
-        }
         applicationAllowsFollowingLinkToLocation(link, location) {
             const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
             return !event.defaultPrevented;
@@ -2592,13 +2652,13 @@ Copyright © 2021 Basecamp, LLC
             return !event.defaultPrevented;
         }
         notifyApplicationAfterClickingLinkToLocation(link, location) {
-            return dispatch("turbo:click", { target: link, detail: { url: location.absoluteURL }, cancelable: true });
+            return dispatch("turbo:click", { target: link, detail: { url: location.href }, cancelable: true });
         }
         notifyApplicationBeforeVisitingLocation(location) {
-            return dispatch("turbo:before-visit", { detail: { url: location.absoluteURL }, cancelable: true });
+            return dispatch("turbo:before-visit", { detail: { url: location.href }, cancelable: true });
         }
         notifyApplicationAfterVisitingLocation(location) {
-            return dispatch("turbo:visit", { detail: { url: location.absoluteURL } });
+            return dispatch("turbo:visit", { detail: { url: location.href } });
         }
         notifyApplicationBeforeCachingSnapshot() {
             return dispatch("turbo:before-cache");
@@ -2610,7 +2670,7 @@ Copyright © 2021 Basecamp, LLC
             return dispatch("turbo:render");
         }
         notifyApplicationAfterPageLoad(timing = {}) {
-            return dispatch("turbo:load", { detail: { url: this.location.absoluteURL, timing } });
+            return dispatch("turbo:load", { detail: { url: this.location.href, timing } });
         }
         getActionForLink(link) {
             const action = link.getAttribute("data-turbo-action");
@@ -2626,9 +2686,22 @@ Copyright © 2021 Basecamp, LLC
             }
         }
         locationIsVisitable(location) {
-            return location.isPrefixedBy(this.view.getRootLocation()) && location.isHTML();
+            return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
         }
+        get snapshot() {
+            return this.view.snapshot;
+        }
+    }
+    function extendURLWithDeprecatedProperties(url) {
+        Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
     }
+    const deprecatedLocationPropertyDescriptors = {
+        absoluteURL: {
+            get() {
+                return this.toString();
+            }
+        }
+    };
 
     const session = new Session;
     const { navigator } = session;