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

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*
-Turbo 7.0.0-beta.3
+Turbo 7.0.0-beta.4
 Copyright © 2021 Basecamp, LLC
  */
 (function () {
@@ -135,80 +135,53 @@ function frameLoadingStyleFromString(style) {
     }
 }
 
-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 {
@@ -231,7 +204,7 @@ class FetchResponse {
         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/);
@@ -266,9 +239,15 @@ function dispatch(eventName, { target, cancelable, detail } = {}) {
 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+/);
@@ -316,28 +295,23 @@ function fetchMethodFromString(method) {
     }
 }
 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()) : [];
@@ -350,7 +324,7 @@ class FetchRequest {
         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) {
@@ -381,7 +355,7 @@ class FetchRequest {
             credentials: "same-origin",
             headers: this.headers,
             redirect: "follow",
-            body: this.isIdempotent ? undefined : this.body,
+            body: this.body,
             signal: this.abortSignal
         };
     }
@@ -389,19 +363,35 @@ class FetchRequest {
         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 {
@@ -431,6 +421,42 @@ class AppearanceObserver {
     }
 }
 
+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";
@@ -440,14 +466,27 @@ var FormSubmissionState;
     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() {
@@ -460,7 +499,24 @@ class FormSubmission {
         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;
@@ -477,15 +533,14 @@ class FormSubmission {
             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;
@@ -553,6 +608,38 @@ function responseSucceededWithoutRedirect(response) {
     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) => {
@@ -577,6 +664,83 @@ class FormInterceptor {
     }
 }
 
+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) => {
@@ -623,10 +787,147 @@ class LinkInterceptor {
     }
 }
 
+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);
@@ -671,14 +972,18 @@ class FrameController {
         }
     }
     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) {
@@ -699,14 +1004,14 @@ class FrameController {
         }
         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", "");
@@ -742,9 +1047,14 @@ class FrameController {
     }
     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 = () => { };
@@ -759,7 +1069,7 @@ class FrameController {
     }
     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) {
@@ -775,36 +1085,6 @@ class FrameController {
         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") {
@@ -818,10 +1098,6 @@ class FrameController {
         }
         return true;
     }
-    get firstAutofocusableElement() {
-        const element = this.element.querySelector("[autofocus]");
-        return element instanceof HTMLElement ? element : null;
-    }
     get id() {
         return this.element.id;
     }
@@ -849,20 +1125,6 @@ function getFrameElementById(id) {
         }
     }
 }
-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);
@@ -1092,9 +1354,10 @@ class ProgressBar {
 }
 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]
@@ -1106,29 +1369,25 @@ class HeadDetails {
             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) {
@@ -1178,79 +1437,46 @@ function elementIsMetaElementWithName(element, name) {
     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}`);
     }
 }
 
@@ -1288,17 +1514,6 @@ class Visit {
         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();
@@ -1353,8 +1568,9 @@ class Visit {
         }
     }
     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;
@@ -1399,15 +1615,15 @@ class Visit {
     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();
                 }
@@ -1416,15 +1632,15 @@ class Visit {
     }
     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() {
@@ -1434,9 +1650,9 @@ class Visit {
         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();
@@ -1481,6 +1697,17 @@ class Visit {
     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) {
@@ -1489,8 +1716,8 @@ class Visit {
         }
     }
     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;
         }
     }
@@ -1524,12 +1751,14 @@ class Visit {
             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) {
@@ -1705,11 +1934,10 @@ class History {
             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);
                 }
             }
         };
@@ -1724,7 +1952,7 @@ class History {
             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() {
@@ -1742,7 +1970,7 @@ class History {
     }
     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;
     }
@@ -1823,7 +2051,7 @@ class LinkClickObserver {
         }
     }
     getLocationForLink(link) {
-        return new Location(link.getAttribute("href") || "");
+        return expandURL(link.getAttribute("href") || "");
     }
 }
 
@@ -1836,15 +2064,20 @@ class Navigator {
             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) {
@@ -1883,8 +2116,8 @@ class Navigator {
     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();
         }
     }
@@ -1992,53 +2225,10 @@ class ScrollObserver {
     }
 }
 
-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)) {
@@ -2056,14 +2246,12 @@ class StreamObserver {
     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);
         }
     }
@@ -2102,70 +2290,25 @@ function fetchResponseFromEvent(event) {
 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);
@@ -2173,84 +2316,38 @@ class ErrorRenderer extends Renderer {
             }
         }
     }
-    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();
@@ -2259,186 +2356,147 @@ class SnapshotRenderer extends Renderer {
         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;
     }
 }
 
@@ -2446,7 +2504,7 @@ class Session {
     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);
@@ -2490,7 +2548,7 @@ class Session {
         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);
@@ -2531,15 +2589,17 @@ class Session {
     }
     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) {
@@ -2564,19 +2624,19 @@ class Session {
     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;
@@ -2586,13 +2646,13 @@ class Session {
         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");
@@ -2604,7 +2664,7 @@ class Session {
         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");
@@ -2620,9 +2680,22 @@ class Session {
         }
     }
     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;