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

package/dist/turbo.es5-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) {
@@ -294,85 +294,53 @@ Copyright © 2021 Basecamp, LLC
         }
     }
 
-    var Location = (function () {
-        function Location(url) {
-            var linkWithAnchor = document.createElement("a");
-            linkWithAnchor.href = url;
-            this.absoluteURL = linkWithAnchor.href;
-            var 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);
-            }
+    function expandURL(locatable) {
+        var anchor = document.createElement("a");
+        anchor.href = locatable.toString();
+        return new URL(anchor.href);
+    }
+    function getAnchor(url) {
+        var anchorMatch;
+        if (url.hash) {
+            return url.hash.slice(1);
         }
-        Object.defineProperty(Location, "currentLocation", {
-            get: function () {
-                return this.wrap(window.location.toString());
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Location.wrap = function (locatable) {
-            if (typeof locatable == "string") {
-                return new this(locatable);
-            }
-            else if (locatable != null) {
-                return locatable;
-            }
-        };
-        Location.prototype.getOrigin = function () {
-            return this.absoluteURL.split("/", 3).join("/");
-        };
-        Location.prototype.getPath = function () {
-            return (this.requestURL.match(/\/\/[^/]*(\/[^?;]*)/) || [])[1] || "/";
-        };
-        Location.prototype.getPathComponents = function () {
-            return this.getPath().split("/").slice(1);
-        };
-        Location.prototype.getLastPathComponent = function () {
-            return this.getPathComponents().slice(-1)[0];
-        };
-        Location.prototype.getExtension = function () {
-            return (this.getLastPathComponent().match(/\.[^.]*$/) || [])[0] || "";
-        };
-        Location.prototype.isHTML = function () {
-            return !!this.getExtension().match(/^(?:|\.(?:htm|html|xhtml))$/);
-        };
-        Location.prototype.isPrefixedBy = function (location) {
-            var prefixURL = getPrefixURL(location);
-            return this.isEqualTo(location) || stringStartsWith(this.absoluteURL, prefixURL);
-        };
-        Location.prototype.isEqualTo = function (location) {
-            return location && this.absoluteURL === location.absoluteURL;
-        };
-        Location.prototype.toCacheKey = function () {
-            return this.requestURL;
-        };
-        Location.prototype.toJSON = function () {
-            return this.absoluteURL;
-        };
-        Location.prototype.toString = function () {
-            return this.absoluteURL;
-        };
-        Location.prototype.valueOf = function () {
-            return this.absoluteURL;
-        };
-        return Location;
-    }());
-    function getPrefixURL(location) {
-        return addTrailingSlash(location.getOrigin() + location.getPath());
+        else if (anchorMatch = url.href.match(/#(.*)$/)) {
+            return anchorMatch[1];
+        }
+        else {
+            return "";
+        }
+    }
+    function getExtension(url) {
+        return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
+    }
+    function isHTML(url) {
+        return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml))$/);
+    }
+    function isPrefixedBy(baseURL, url) {
+        var prefix = getPrefix(url);
+        return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
+    }
+    function toCacheKey(url) {
+        var anchorLength = url.hash.length;
+        if (anchorLength < 2) {
+            return url.href;
+        }
+        else {
+            return url.href.slice(0, -anchorLength);
+        }
+    }
+    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 + "/";
     }
 
     var FetchResponse = (function () {
@@ -416,7 +384,7 @@ Copyright © 2021 Basecamp, LLC
         });
         Object.defineProperty(FetchResponse.prototype, "location", {
             get: function () {
-                return Location.wrap(this.response.url);
+                return expandURL(this.response.url);
             },
             enumerable: false,
             configurable: true
@@ -476,9 +444,16 @@ Copyright © 2021 Basecamp, LLC
     function nextAnimationFrame() {
         return new Promise(function (resolve) { return requestAnimationFrame(function () { return resolve(); }); });
     }
+    function nextEventLoopTick() {
+        return new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 0); });
+    }
     function nextMicrotask() {
         return Promise.resolve();
     }
+    function parseHTMLDocument(html) {
+        if (html === void 0) { html = ""; }
+        return new DOMParser().parseFromString(html, "text/html");
+    }
     function unindent(strings) {
         var values = [];
         for (var _i = 1; _i < arguments.length; _i++) {
@@ -531,33 +506,28 @@ Copyright © 2021 Basecamp, LLC
     }
     var FetchRequest = (function () {
         function FetchRequest(delegate, method, location, body) {
+            if (body === void 0) { body = new URLSearchParams; }
             this.abortController = new AbortController;
             this.delegate = delegate;
             this.method = method;
-            this.location = location;
-            this.body = body;
+            if (this.isIdempotent) {
+                this.url = mergeFormDataEntries(location, __spread(body.entries()));
+            }
+            else {
+                this.body = body;
+                this.url = location;
+            }
         }
-        Object.defineProperty(FetchRequest.prototype, "url", {
+        Object.defineProperty(FetchRequest.prototype, "location", {
             get: function () {
-                var url = this.location.absoluteURL;
-                var query = this.params.toString();
-                if (this.isIdempotent && query.length) {
-                    return [url, query].join(url.includes("?") ? "&" : "?");
-                }
-                else {
-                    return url;
-                }
+                return this.url;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(FetchRequest.prototype, "params", {
             get: function () {
-                return this.entries.reduce(function (params, _a) {
-                    var _b = __read(_a, 2), name = _b[0], value = _b[1];
-                    params.append(name, value.toString());
-                    return params;
-                }, new URLSearchParams);
+                return this.url.searchParams;
             },
             enumerable: false,
             configurable: true
@@ -584,7 +554,7 @@ Copyright © 2021 Basecamp, LLC
                         case 1:
                             _a.trys.push([1, 4, 5, 6]);
                             this.delegate.requestStarted(this);
-                            return [4, fetch(this.url, fetchOptions)];
+                            return [4, fetch(this.url.href, fetchOptions)];
                         case 2:
                             response = _a.sent();
                             return [4, this.receive(response)];
@@ -627,7 +597,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
                 };
             },
@@ -643,32 +613,59 @@ Copyright © 2021 Basecamp, LLC
         });
         Object.defineProperty(FetchRequest.prototype, "headers", {
             get: function () {
-                return __assign({ "Accept": "text/html, application/xhtml+xml" }, this.additionalHeaders);
+                var headers = __assign({}, this.defaultHeaders);
+                if (typeof this.delegate.prepareHeadersForRequest == "function") {
+                    this.delegate.prepareHeadersForRequest(headers, this);
+                }
+                return headers;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(FetchRequest.prototype, "additionalHeaders", {
+        Object.defineProperty(FetchRequest.prototype, "abortSignal", {
             get: function () {
-                if (typeof this.delegate.additionalHeadersForRequest == "function") {
-                    return this.delegate.additionalHeadersForRequest(this);
-                }
-                else {
-                    return {};
-                }
+                return this.abortController.signal;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(FetchRequest.prototype, "abortSignal", {
+        Object.defineProperty(FetchRequest.prototype, "defaultHeaders", {
             get: function () {
-                return this.abortController.signal;
+                return {
+                    "Accept": "text/html, application/xhtml+xml"
+                };
             },
             enumerable: false,
             configurable: true
         });
         return FetchRequest;
     }());
+    function mergeFormDataEntries(url, entries) {
+        var e_1, _a;
+        var currentSearchParams = new URLSearchParams(url.search);
+        try {
+            for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
+                var _b = __read(entries_1_1.value, 2), name_1 = _b[0], value = _b[1];
+                if (value instanceof File)
+                    continue;
+                if (currentSearchParams.has(name_1)) {
+                    currentSearchParams.delete(name_1);
+                    url.searchParams.set(name_1, value);
+                }
+                else {
+                    url.searchParams.append(name_1, value);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return url;
+    }
 
     var AppearanceObserver = (function () {
         function AppearanceObserver(delegate, element) {
@@ -699,6 +696,66 @@ Copyright © 2021 Basecamp, LLC
         return AppearanceObserver;
     }());
 
+    var StreamMessage = (function () {
+        function StreamMessage(html) {
+            this.templateElement = document.createElement("template");
+            this.templateElement.innerHTML = html;
+        }
+        StreamMessage.wrap = function (message) {
+            if (typeof message == "string") {
+                return new this(message);
+            }
+            else {
+                return message;
+            }
+        };
+        Object.defineProperty(StreamMessage.prototype, "fragment", {
+            get: function () {
+                var e_1, _a;
+                var fragment = document.createDocumentFragment();
+                try {
+                    for (var _b = __values(this.foreignElements), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var element = _c.value;
+                        fragment.appendChild(document.importNode(element, true));
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return fragment;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StreamMessage.prototype, "foreignElements", {
+            get: function () {
+                return this.templateChildren.reduce(function (streamElements, child) {
+                    if (child.tagName.toLowerCase() == "turbo-stream") {
+                        return __spread(streamElements, [child]);
+                    }
+                    else {
+                        return streamElements;
+                    }
+                }, []);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StreamMessage.prototype, "templateChildren", {
+            get: function () {
+                return Array.from(this.templateElement.content.children);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StreamMessage.contentType = "text/vnd.turbo-stream.html";
+        return StreamMessage;
+    }());
+
     var FormSubmissionState;
     (function (FormSubmissionState) {
         FormSubmissionState[FormSubmissionState["initialized"] = 0] = "initialized";
@@ -708,15 +765,28 @@ 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;
+        }
+    }
     var FormSubmission = (function () {
         function FormSubmission(delegate, formElement, submitter, mustRedirect) {
             if (mustRedirect === void 0) { 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;
         }
         Object.defineProperty(FormSubmission.prototype, "method", {
@@ -738,7 +808,37 @@ Copyright © 2021 Basecamp, LLC
         });
         Object.defineProperty(FormSubmission.prototype, "location", {
             get: function () {
-                return Location.wrap(this.action);
+                return expandURL(this.action);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FormSubmission.prototype, "body", {
+            get: function () {
+                if (this.enctype == FormEnctype.urlEncoded || this.method == FetchMethod.get) {
+                    return new URLSearchParams(this.stringFormData);
+                }
+                else {
+                    return this.formData;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FormSubmission.prototype, "enctype", {
+            get: function () {
+                var _a;
+                return formEnctypeFromString(((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formenctype")) || this.formElement.enctype);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FormSubmission.prototype, "stringFormData", {
+            get: function () {
+                return __spread(this.formData).reduce(function (entries, _a) {
+                    var _b = __read(_a, 2), name = _b[0], value = _b[1];
+                    return entries.concat(typeof value == "string" ? [[name, value]] : []);
+                }, []);
             },
             enumerable: false,
             configurable: true
@@ -764,15 +864,14 @@ Copyright © 2021 Basecamp, LLC
                 return true;
             }
         };
-        FormSubmission.prototype.additionalHeadersForRequest = function (request) {
-            var headers = {};
-            if (this.method != FetchMethod.get) {
+        FormSubmission.prototype.prepareHeadersForRequest = function (headers, request) {
+            if (!request.isIdempotent) {
                 var token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
                 if (token) {
                     headers["X-CSRF-Token"] = token;
                 }
+                headers["Accept"] = [StreamMessage.contentType, headers["Accept"]].join(", ");
             }
-            return headers;
         };
         FormSubmission.prototype.requestStarted = function (request) {
             this.state = FormSubmissionState.waiting;
@@ -841,6 +940,54 @@ Copyright © 2021 Basecamp, LLC
         return response.statusCode == 200 && !response.redirected;
     }
 
+    var Snapshot = (function () {
+        function Snapshot(element) {
+            this.element = element;
+        }
+        Object.defineProperty(Snapshot.prototype, "children", {
+            get: function () {
+                return __spread(this.element.children);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Snapshot.prototype.hasAnchor = function (anchor) {
+            return this.getElementForAnchor(anchor) != null;
+        };
+        Snapshot.prototype.getElementForAnchor = function (anchor) {
+            try {
+                return this.element.querySelector("[id='" + anchor + "'], a[name='" + anchor + "']");
+            }
+            catch (_a) {
+                return null;
+            }
+        };
+        Object.defineProperty(Snapshot.prototype, "firstAutofocusableElement", {
+            get: function () {
+                return this.element.querySelector("[autofocus]");
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Snapshot.prototype, "permanentElements", {
+            get: function () {
+                return __spread(this.element.querySelectorAll("[id][data-turbo-permanent]"));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Snapshot.prototype.getPermanentElementById = function (id) {
+            return this.element.querySelector("#" + id + "[data-turbo-permanent]");
+        };
+        Snapshot.prototype.getPermanentElementsPresentInSnapshot = function (snapshot) {
+            return this.permanentElements.filter(function (_a) {
+                var id = _a.id;
+                return snapshot.getPermanentElementById(id);
+            });
+        };
+        return Snapshot;
+    }());
+
     var FormInterceptor = (function () {
         function FormInterceptor(delegate, element) {
             var _this = this;
@@ -867,64 +1014,372 @@ Copyright © 2021 Basecamp, LLC
         return FormInterceptor;
     }());
 
-    var LinkInterceptor = (function () {
-        function LinkInterceptor(delegate, element) {
-            var _this = this;
-            this.clickBubbled = function (event) {
-                if (_this.respondsToEventTarget(event.target)) {
-                    _this.clickEvent = event;
-                }
-                else {
-                    delete _this.clickEvent;
-                }
-            };
-            this.linkClicked = (function (event) {
-                if (_this.clickEvent && _this.respondsToEventTarget(event.target) && event.target instanceof Element) {
-                    if (_this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
-                        _this.clickEvent.preventDefault();
-                        event.preventDefault();
-                        _this.delegate.linkClickIntercepted(event.target, event.detail.url);
-                    }
-                }
-                delete _this.clickEvent;
-            });
-            this.willVisit = function () {
-                delete _this.clickEvent;
-            };
+    var View = (function () {
+        function View(delegate, element) {
             this.delegate = delegate;
             this.element = element;
         }
-        LinkInterceptor.prototype.start = function () {
-            this.element.addEventListener("click", this.clickBubbled);
-            document.addEventListener("turbo:click", this.linkClicked);
-            document.addEventListener("turbo:before-visit", this.willVisit);
+        View.prototype.scrollToAnchor = function (anchor) {
+            var element = this.snapshot.getElementForAnchor(anchor);
+            if (element) {
+                this.scrollToElement(element);
+            }
+            else {
+                this.scrollToPosition({ x: 0, y: 0 });
+            }
         };
-        LinkInterceptor.prototype.stop = function () {
-            this.element.removeEventListener("click", this.clickBubbled);
-            document.removeEventListener("turbo:click", this.linkClicked);
-            document.removeEventListener("turbo:before-visit", this.willVisit);
+        View.prototype.scrollToElement = function (element) {
+            element.scrollIntoView();
         };
-        LinkInterceptor.prototype.respondsToEventTarget = function (target) {
-            var element = target instanceof Element
-                ? target
-                : target instanceof Node
-                    ? target.parentElement
-                    : null;
-            return element && element.closest("turbo-frame, html") == this.element;
+        View.prototype.scrollToPosition = function (_a) {
+            var x = _a.x, y = _a.y;
+            this.scrollRoot.scrollTo(x, y);
         };
-        return LinkInterceptor;
-    }());
-
-    var FrameController = (function () {
-        function FrameController(element) {
-            this.resolveVisitPromise = function () { };
-            this.element = element;
-            this.appearanceObserver = new AppearanceObserver(this, this.element);
-            this.linkInterceptor = new LinkInterceptor(this, this.element);
-            this.formInterceptor = new FormInterceptor(this, this.element);
-        }
-        FrameController.prototype.connect = function () {
-            if (this.loadingStyle == FrameLoadingStyle.lazy) {
+        Object.defineProperty(View.prototype, "scrollRoot", {
+            get: function () {
+                return window;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        View.prototype.render = function (renderer) {
+            return __awaiter(this, void 0, void 0, function () {
+                var isPreview, shouldRender, snapshot;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this.renderer) {
+                                throw new Error("rendering is already in progress");
+                            }
+                            isPreview = renderer.isPreview, shouldRender = renderer.shouldRender, snapshot = renderer.newSnapshot;
+                            if (!shouldRender) return [3, 5];
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, , 3, 4]);
+                            this.renderer = renderer;
+                            this.prepareToRenderSnapshot(renderer);
+                            this.delegate.viewWillRenderSnapshot(snapshot, isPreview);
+                            return [4, this.renderSnapshot(renderer)];
+                        case 2:
+                            _a.sent();
+                            this.delegate.viewRenderedSnapshot(snapshot, isPreview);
+                            this.finishRenderingSnapshot(renderer);
+                            return [3, 4];
+                        case 3:
+                            delete this.renderer;
+                            return [7];
+                        case 4: return [3, 6];
+                        case 5:
+                            this.invalidate();
+                            _a.label = 6;
+                        case 6: return [2];
+                    }
+                });
+            });
+        };
+        View.prototype.invalidate = function () {
+            this.delegate.viewInvalidated();
+        };
+        View.prototype.prepareToRenderSnapshot = function (renderer) {
+            this.markAsPreview(renderer.isPreview);
+            renderer.prepareToRender();
+        };
+        View.prototype.markAsPreview = function (isPreview) {
+            if (isPreview) {
+                this.element.setAttribute("data-turbo-preview", "");
+            }
+            else {
+                this.element.removeAttribute("data-turbo-preview");
+            }
+        };
+        View.prototype.renderSnapshot = function (renderer) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4, renderer.render()];
+                        case 1:
+                            _a.sent();
+                            return [2];
+                    }
+                });
+            });
+        };
+        View.prototype.finishRenderingSnapshot = function (renderer) {
+            renderer.finishRendering();
+        };
+        return View;
+    }());
+
+    var FrameView = (function (_super) {
+        __extends(FrameView, _super);
+        function FrameView() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        FrameView.prototype.invalidate = function () {
+            this.element.innerHTML = "";
+        };
+        Object.defineProperty(FrameView.prototype, "snapshot", {
+            get: function () {
+                return new Snapshot(this.element);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return FrameView;
+    }(View));
+
+    var LinkInterceptor = (function () {
+        function LinkInterceptor(delegate, element) {
+            var _this = this;
+            this.clickBubbled = function (event) {
+                if (_this.respondsToEventTarget(event.target)) {
+                    _this.clickEvent = event;
+                }
+                else {
+                    delete _this.clickEvent;
+                }
+            };
+            this.linkClicked = (function (event) {
+                if (_this.clickEvent && _this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+                    if (_this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
+                        _this.clickEvent.preventDefault();
+                        event.preventDefault();
+                        _this.delegate.linkClickIntercepted(event.target, event.detail.url);
+                    }
+                }
+                delete _this.clickEvent;
+            });
+            this.willVisit = function () {
+                delete _this.clickEvent;
+            };
+            this.delegate = delegate;
+            this.element = element;
+        }
+        LinkInterceptor.prototype.start = function () {
+            this.element.addEventListener("click", this.clickBubbled);
+            document.addEventListener("turbo:click", this.linkClicked);
+            document.addEventListener("turbo:before-visit", this.willVisit);
+        };
+        LinkInterceptor.prototype.stop = function () {
+            this.element.removeEventListener("click", this.clickBubbled);
+            document.removeEventListener("turbo:click", this.linkClicked);
+            document.removeEventListener("turbo:before-visit", this.willVisit);
+        };
+        LinkInterceptor.prototype.respondsToEventTarget = function (target) {
+            var element = target instanceof Element
+                ? target
+                : target instanceof Node
+                    ? target.parentElement
+                    : null;
+            return element && element.closest("turbo-frame, html") == this.element;
+        };
+        return LinkInterceptor;
+    }());
+
+    var Renderer = (function () {
+        function Renderer(currentSnapshot, newSnapshot, isPreview) {
+            var _this = this;
+            this.currentSnapshot = currentSnapshot;
+            this.newSnapshot = newSnapshot;
+            this.isPreview = isPreview;
+            this.promise = new Promise(function (resolve, reject) { return _this.resolvingFunctions = { resolve: resolve, reject: reject }; });
+        }
+        Object.defineProperty(Renderer.prototype, "shouldRender", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Renderer.prototype.prepareToRender = function () {
+            return;
+        };
+        Renderer.prototype.finishRendering = function () {
+            if (this.resolvingFunctions) {
+                this.resolvingFunctions.resolve();
+                delete this.resolvingFunctions;
+            }
+        };
+        Renderer.prototype.createScriptElement = function (element) {
+            if (element.getAttribute("data-turbo-eval") == "false") {
+                return element;
+            }
+            else {
+                var createdScriptElement = document.createElement("script");
+                createdScriptElement.textContent = element.textContent;
+                createdScriptElement.async = false;
+                copyElementAttributes(createdScriptElement, element);
+                return createdScriptElement;
+            }
+        };
+        Renderer.prototype.preservingPermanentElements = function (callback) {
+            var placeholders = relocatePermanentElements(this.currentSnapshot, this.newSnapshot);
+            callback();
+            replacePlaceholderElementsWithClonedPermanentElements(placeholders);
+        };
+        Renderer.prototype.focusFirstAutofocusableElement = function () {
+            var element = this.newSnapshot.firstAutofocusableElement;
+            if (elementIsFocusable(element)) {
+                element.focus();
+            }
+        };
+        Object.defineProperty(Renderer.prototype, "currentElement", {
+            get: function () {
+                return this.currentSnapshot.element;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Renderer.prototype, "newElement", {
+            get: function () {
+                return this.newSnapshot.element;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return Renderer;
+    }());
+    function replaceElementWithElement(fromElement, toElement) {
+        var parentElement = fromElement.parentElement;
+        if (parentElement) {
+            return parentElement.replaceChild(toElement, fromElement);
+        }
+    }
+    function copyElementAttributes(destinationElement, sourceElement) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(__spread(sourceElement.attributes)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = _c.value, name_1 = _d.name, value = _d.value;
+                destinationElement.setAttribute(name_1, value);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+    function createPlaceholderForPermanentElement(permanentElement) {
+        var element = document.createElement("meta");
+        element.setAttribute("name", "turbo-permanent-placeholder");
+        element.setAttribute("content", permanentElement.id);
+        return { element: element, permanentElement: permanentElement };
+    }
+    function replacePlaceholderElementsWithClonedPermanentElements(placeholders) {
+        var e_2, _a;
+        try {
+            for (var placeholders_1 = __values(placeholders), placeholders_1_1 = placeholders_1.next(); !placeholders_1_1.done; placeholders_1_1 = placeholders_1.next()) {
+                var _b = placeholders_1_1.value, element = _b.element, permanentElement = _b.permanentElement;
+                var clonedElement = permanentElement.cloneNode(true);
+                replaceElementWithElement(element, clonedElement);
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (placeholders_1_1 && !placeholders_1_1.done && (_a = placeholders_1.return)) _a.call(placeholders_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    }
+    function relocatePermanentElements(currentSnapshot, newSnapshot) {
+        return currentSnapshot.getPermanentElementsPresentInSnapshot(newSnapshot).reduce(function (placeholders, permanentElement) {
+            var newElement = newSnapshot.getPermanentElementById(permanentElement.id);
+            if (newElement) {
+                var placeholder = createPlaceholderForPermanentElement(permanentElement);
+                replaceElementWithElement(permanentElement, placeholder.element);
+                replaceElementWithElement(newElement, permanentElement);
+                return __spread(placeholders, [placeholder]);
+            }
+            else {
+                return placeholders;
+            }
+        }, []);
+    }
+    function elementIsFocusable(element) {
+        return element && typeof element.focus == "function";
+    }
+
+    var FrameRenderer = (function (_super) {
+        __extends(FrameRenderer, _super);
+        function FrameRenderer() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(FrameRenderer.prototype, "shouldRender", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FrameRenderer.prototype.render = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4, nextAnimationFrame()];
+                        case 1:
+                            _a.sent();
+                            this.preservingPermanentElements(function () {
+                                _this.loadFrameElement();
+                            });
+                            this.scrollFrameIntoView();
+                            return [4, nextAnimationFrame()];
+                        case 2:
+                            _a.sent();
+                            this.focusFirstAutofocusableElement();
+                            return [2];
+                    }
+                });
+            });
+        };
+        FrameRenderer.prototype.loadFrameElement = function () {
+            var _a;
+            var destinationRange = document.createRange();
+            destinationRange.selectNodeContents(this.currentElement);
+            destinationRange.deleteContents();
+            var frameElement = this.newElement;
+            var sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
+            if (sourceRange) {
+                sourceRange.selectNodeContents(frameElement);
+                this.currentElement.appendChild(sourceRange.extractContents());
+            }
+        };
+        FrameRenderer.prototype.scrollFrameIntoView = function () {
+            if (this.currentElement.autoscroll || this.newElement.autoscroll) {
+                var element = this.currentElement.firstElementChild;
+                var block = readScrollLogicalPosition(this.currentElement.getAttribute("data-autoscroll-block"), "end");
+                if (element) {
+                    element.scrollIntoView({ block: block });
+                    return true;
+                }
+            }
+            return false;
+        };
+        return FrameRenderer;
+    }(Renderer));
+    function readScrollLogicalPosition(value, defaultValue) {
+        if (value == "end" || value == "start" || value == "center" || value == "nearest") {
+            return value;
+        }
+        else {
+            return defaultValue;
+        }
+    }
+
+    var FrameController = (function () {
+        function FrameController(element) {
+            this.resolveVisitPromise = function () { };
+            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);
+        }
+        FrameController.prototype.connect = function () {
+            if (this.loadingStyle == FrameLoadingStyle.lazy) {
                 this.appearanceObserver.start();
             }
             this.linkInterceptor.start();
@@ -975,29 +1430,32 @@ Copyright © 2021 Basecamp, LLC
         };
         FrameController.prototype.loadResponse = function (response) {
             return __awaiter(this, void 0, void 0, function () {
-                var fragment, _a, element;
+                var html, body, snapshot, _a, renderer, error_1;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            _a = fragmentFromHTML;
+                            _b.trys.push([0, 5, , 6]);
                             return [4, response.responseHTML];
                         case 1:
-                            fragment = _a.apply(void 0, [_b.sent()]);
-                            if (!fragment) return [3, 5];
-                            return [4, this.extractForeignFrameElement(fragment)];
+                            html = _b.sent();
+                            if (!html) return [3, 4];
+                            body = parseHTMLDocument(html).body;
+                            _a = Snapshot.bind;
+                            return [4, this.extractForeignFrameElement(body)];
                         case 2:
-                            element = _b.sent();
-                            return [4, nextAnimationFrame()];
+                            snapshot = new (_a.apply(Snapshot, [void 0, _b.sent()]))();
+                            renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+                            return [4, this.view.render(renderer)];
                         case 3:
                             _b.sent();
-                            this.loadFrameElement(element);
-                            this.scrollFrameIntoView(element);
-                            return [4, nextAnimationFrame()];
-                        case 4:
-                            _b.sent();
-                            this.focusFirstAutofocusableElement();
-                            _b.label = 5;
-                        case 5: return [2];
+                            _b.label = 4;
+                        case 4: return [3, 6];
+                        case 5:
+                            error_1 = _b.sent();
+                            console.error(error_1);
+                            this.view.invalidate();
+                            return [3, 6];
+                        case 6: return [2];
                     }
                 });
             });
@@ -1020,14 +1478,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();
             }
         };
-        FrameController.prototype.additionalHeadersForRequest = function (request) {
-            return { "Turbo-Frame": this.id };
+        FrameController.prototype.prepareHeadersForRequest = function (headers, request) {
+            headers["Turbo-Frame"] = this.id;
         };
         FrameController.prototype.requestStarted = function (request) {
             this.element.setAttribute("busy", "");
@@ -1072,13 +1530,18 @@ Copyright © 2021 Basecamp, LLC
         };
         FrameController.prototype.formSubmissionFinished = function (formSubmission) {
         };
+        FrameController.prototype.viewWillRenderSnapshot = function (snapshot, isPreview) {
+        };
+        FrameController.prototype.viewRenderedSnapshot = function (snapshot, isPreview) {
+        };
+        FrameController.prototype.viewInvalidated = function () {
+        };
         FrameController.prototype.visit = function (url) {
             return __awaiter(this, void 0, void 0, function () {
-                var location, request;
+                var request;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    location = Location.wrap(url);
-                    request = new FetchRequest(this, FetchMethod.get, location);
+                    request = new FetchRequest(this, FetchMethod.get, expandURL(url));
                     return [2, new Promise(function (resolve) {
                             _this.resolveVisitPromise = function () {
                                 _this.resolveVisitPromise = function () { };
@@ -1095,7 +1558,7 @@ Copyright © 2021 Basecamp, LLC
         };
         FrameController.prototype.findFrameElement = function (element) {
             var _a;
-            var id = element.getAttribute("data-turbo-frame");
+            var id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
             return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
         };
         FrameController.prototype.extractForeignFrameElement = function (container) {
@@ -1121,36 +1584,6 @@ Copyright © 2021 Basecamp, LLC
                 });
             });
         };
-        FrameController.prototype.loadFrameElement = function (frameElement) {
-            var _a;
-            var destinationRange = document.createRange();
-            destinationRange.selectNodeContents(this.element);
-            destinationRange.deleteContents();
-            var sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
-            if (sourceRange) {
-                sourceRange.selectNodeContents(frameElement);
-                this.element.appendChild(sourceRange.extractContents());
-            }
-        };
-        FrameController.prototype.focusFirstAutofocusableElement = function () {
-            var element = this.firstAutofocusableElement;
-            if (element) {
-                element.focus();
-                return true;
-            }
-            return false;
-        };
-        FrameController.prototype.scrollFrameIntoView = function (frame) {
-            if (this.element.autoscroll || frame.autoscroll) {
-                var element = this.element.firstElementChild;
-                var block = readScrollLogicalPosition(this.element.getAttribute("data-autoscroll-block"), "end");
-                if (element) {
-                    element.scrollIntoView({ block: block });
-                    return true;
-                }
-            }
-            return false;
-        };
         FrameController.prototype.shouldInterceptNavigation = function (element) {
             var id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
             if (!this.enabled || id == "_top") {
@@ -1164,14 +1597,6 @@ Copyright © 2021 Basecamp, LLC
             }
             return true;
         };
-        Object.defineProperty(FrameController.prototype, "firstAutofocusableElement", {
-            get: function () {
-                var element = this.element.querySelector("[autofocus]");
-                return element instanceof HTMLElement ? element : null;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(FrameController.prototype, "id", {
             get: function () {
                 return this.element.id;
@@ -1224,20 +1649,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) {
-            var foreignDocument = document.implementation.createHTMLDocument();
-            return foreignDocument.createRange().createContextualFragment(html);
-        }
-    }
     function activateElement(element) {
         if (element && element.ownerDocument !== document) {
             element = document.importNode(element, true);
@@ -1516,9 +1927,11 @@ Copyright © 2021 Basecamp, LLC
     }());
     var templateObject_1$1;
 
-    var HeadDetails = (function () {
-        function HeadDetails(children) {
-            this.detailsByOuterHTML = children.reduce(function (result, element) {
+    var HeadSnapshot = (function (_super) {
+        __extends(HeadSnapshot, _super);
+        function HeadSnapshot() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.detailsByOuterHTML = _this.children.reduce(function (result, element) {
                 var _a;
                 var outerHTML = element.outerHTML;
                 var details = outerHTML in result
@@ -1530,27 +1943,28 @@ Copyright © 2021 Basecamp, LLC
                     };
                 return __assign(__assign({}, result), (_a = {}, _a[outerHTML] = __assign(__assign({}, details), { elements: __spread(details.elements, [element]) }), _a));
             }, {});
+            return _this;
         }
-        HeadDetails.fromHeadElement = function (headElement) {
-            var children = headElement ? __spread(headElement.children) : [];
-            return new this(children);
-        };
-        HeadDetails.prototype.getTrackedElementSignature = function () {
-            var _this = this;
-            return Object.keys(this.detailsByOuterHTML)
-                .filter(function (outerHTML) { return _this.detailsByOuterHTML[outerHTML].tracked; })
-                .join("");
-        };
-        HeadDetails.prototype.getScriptElementsNotInDetails = function (headDetails) {
-            return this.getElementsMatchingTypeNotInDetails("script", headDetails);
+        Object.defineProperty(HeadSnapshot.prototype, "trackedElementSignature", {
+            get: function () {
+                var _this = this;
+                return Object.keys(this.detailsByOuterHTML)
+                    .filter(function (outerHTML) { return _this.detailsByOuterHTML[outerHTML].tracked; })
+                    .join("");
+            },
+            enumerable: false,
+            configurable: true
+        });
+        HeadSnapshot.prototype.getScriptElementsNotInSnapshot = function (snapshot) {
+            return this.getElementsMatchingTypeNotInSnapshot("script", snapshot);
         };
-        HeadDetails.prototype.getStylesheetElementsNotInDetails = function (headDetails) {
-            return this.getElementsMatchingTypeNotInDetails("stylesheet", headDetails);
+        HeadSnapshot.prototype.getStylesheetElementsNotInSnapshot = function (snapshot) {
+            return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot);
         };
-        HeadDetails.prototype.getElementsMatchingTypeNotInDetails = function (matchedType, headDetails) {
+        HeadSnapshot.prototype.getElementsMatchingTypeNotInSnapshot = function (matchedType, snapshot) {
             var _this = this;
             return Object.keys(this.detailsByOuterHTML)
-                .filter(function (outerHTML) { return !(outerHTML in headDetails.detailsByOuterHTML); })
+                .filter(function (outerHTML) { return !(outerHTML in snapshot.detailsByOuterHTML); })
                 .map(function (outerHTML) { return _this.detailsByOuterHTML[outerHTML]; })
                 .filter(function (_a) {
                 var type = _a.type;
@@ -1561,138 +1975,134 @@ Copyright © 2021 Basecamp, LLC
                 return element;
             });
         };
-        HeadDetails.prototype.getProvisionalElements = function () {
-            var _this = this;
-            return Object.keys(this.detailsByOuterHTML).reduce(function (result, outerHTML) {
-                var _a = _this.detailsByOuterHTML[outerHTML], type = _a.type, tracked = _a.tracked, elements = _a.elements;
-                if (type == null && !tracked) {
-                    return __spread(result, elements);
-                }
-                else if (elements.length > 1) {
-                    return __spread(result, elements.slice(1));
-                }
-                else {
-                    return result;
-                }
-            }, []);
-        };
-        HeadDetails.prototype.getMetaValue = function (name) {
+        Object.defineProperty(HeadSnapshot.prototype, "provisionalElements", {
+            get: function () {
+                var _this = this;
+                return Object.keys(this.detailsByOuterHTML).reduce(function (result, outerHTML) {
+                    var _a = _this.detailsByOuterHTML[outerHTML], type = _a.type, tracked = _a.tracked, elements = _a.elements;
+                    if (type == null && !tracked) {
+                        return __spread(result, elements);
+                    }
+                    else if (elements.length > 1) {
+                        return __spread(result, elements.slice(1));
+                    }
+                    else {
+                        return result;
+                    }
+                }, []);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        HeadSnapshot.prototype.getMetaValue = function (name) {
             var element = this.findMetaElementByName(name);
             return element
                 ? element.getAttribute("content")
                 : null;
         };
-        HeadDetails.prototype.findMetaElementByName = function (name) {
+        HeadSnapshot.prototype.findMetaElementByName = function (name) {
             var _this = this;
             return Object.keys(this.detailsByOuterHTML).reduce(function (result, outerHTML) {
                 var _a = __read(_this.detailsByOuterHTML[outerHTML].elements, 1), element = _a[0];
                 return elementIsMetaElementWithName(element, name) ? element : result;
             }, undefined);
         };
-        return HeadDetails;
-    }());
+        return HeadSnapshot;
+    }(Snapshot));
     function elementType(element) {
         if (elementIsScript(element)) {
             return "script";
-        }
-        else if (elementIsStylesheet(element)) {
-            return "stylesheet";
-        }
-    }
-    function elementIsTracked(element) {
-        return element.getAttribute("data-turbo-track") == "reload";
-    }
-    function elementIsScript(element) {
-        var tagName = element.tagName.toLowerCase();
-        return tagName == "script";
-    }
-    function elementIsStylesheet(element) {
-        var tagName = element.tagName.toLowerCase();
-        return tagName == "style" || (tagName == "link" && element.getAttribute("rel") == "stylesheet");
-    }
-    function elementIsMetaElementWithName(element, name) {
-        var tagName = element.tagName.toLowerCase();
-        return tagName == "meta" && element.getAttribute("name") == name;
-    }
-
-    var Snapshot = (function () {
-        function Snapshot(headDetails, bodyElement) {
-            this.headDetails = headDetails;
-            this.bodyElement = bodyElement;
-        }
-        Snapshot.wrap = function (value) {
-            if (value instanceof this) {
-                return value;
-            }
-            else if (typeof value == "string") {
-                return this.fromHTMLString(value);
-            }
-            else {
-                return this.fromHTMLElement(value);
-            }
-        };
-        Snapshot.fromHTMLString = function (html) {
-            var documentElement = new DOMParser().parseFromString(html, "text/html").documentElement;
-            return this.fromHTMLElement(documentElement);
-        };
-        Snapshot.fromHTMLElement = function (htmlElement) {
-            var headElement = htmlElement.querySelector("head");
-            var bodyElement = htmlElement.querySelector("body") || document.createElement("body");
-            var headDetails = HeadDetails.fromHeadElement(headElement);
-            return new this(headDetails, bodyElement);
-        };
-        Snapshot.prototype.clone = function () {
-            var bodyElement = Snapshot.fromHTMLString(this.bodyElement.outerHTML).bodyElement;
-            return new Snapshot(this.headDetails, bodyElement);
-        };
-        Snapshot.prototype.getRootLocation = function () {
-            var root = this.getSetting("root", "/");
-            return new Location(root);
-        };
-        Snapshot.prototype.getCacheControlValue = function () {
-            return this.getSetting("cache-control");
-        };
-        Snapshot.prototype.getElementForAnchor = function (anchor) {
-            try {
-                return this.bodyElement.querySelector("[id='" + anchor + "'], a[name='" + anchor + "']");
-            }
-            catch (_a) {
-                return null;
-            }
-        };
-        Snapshot.prototype.getPermanentElements = function () {
-            return __spread(this.bodyElement.querySelectorAll("[id][data-turbo-permanent]"));
-        };
-        Snapshot.prototype.getPermanentElementById = function (id) {
-            return this.bodyElement.querySelector("#" + id + "[data-turbo-permanent]");
-        };
-        Snapshot.prototype.getPermanentElementsPresentInSnapshot = function (snapshot) {
-            return this.getPermanentElements().filter(function (_a) {
-                var id = _a.id;
-                return snapshot.getPermanentElementById(id);
-            });
-        };
-        Snapshot.prototype.findFirstAutofocusableElement = function () {
-            return this.bodyElement.querySelector("[autofocus]");
-        };
-        Snapshot.prototype.hasAnchor = function (anchor) {
-            return this.getElementForAnchor(anchor) != null;
+        }
+        else if (elementIsStylesheet(element)) {
+            return "stylesheet";
+        }
+    }
+    function elementIsTracked(element) {
+        return element.getAttribute("data-turbo-track") == "reload";
+    }
+    function elementIsScript(element) {
+        var tagName = element.tagName.toLowerCase();
+        return tagName == "script";
+    }
+    function elementIsStylesheet(element) {
+        var tagName = element.tagName.toLowerCase();
+        return tagName == "style" || (tagName == "link" && element.getAttribute("rel") == "stylesheet");
+    }
+    function elementIsMetaElementWithName(element, name) {
+        var tagName = element.tagName.toLowerCase();
+        return tagName == "meta" && element.getAttribute("name") == name;
+    }
+
+    var PageSnapshot = (function (_super) {
+        __extends(PageSnapshot, _super);
+        function PageSnapshot(element, headSnapshot) {
+            var _this = _super.call(this, element) || this;
+            _this.headSnapshot = headSnapshot;
+            return _this;
+        }
+        PageSnapshot.fromHTMLString = function (html) {
+            if (html === void 0) { html = ""; }
+            return this.fromDocument(parseHTMLDocument(html));
         };
-        Snapshot.prototype.isPreviewable = function () {
-            return this.getCacheControlValue() != "no-preview";
+        PageSnapshot.fromElement = function (element) {
+            return this.fromDocument(element.ownerDocument);
         };
-        Snapshot.prototype.isCacheable = function () {
-            return this.getCacheControlValue() != "no-cache";
+        PageSnapshot.fromDocument = function (_a) {
+            var head = _a.head, body = _a.body;
+            return new this(body, new HeadSnapshot(head));
         };
-        Snapshot.prototype.isVisitable = function () {
-            return this.getSetting("visit-control") != "reload";
+        PageSnapshot.prototype.clone = function () {
+            return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
         };
-        Snapshot.prototype.getSetting = function (name, defaultValue) {
-            var value = this.headDetails.getMetaValue("turbo-" + name);
-            return value == null ? defaultValue : value;
+        Object.defineProperty(PageSnapshot.prototype, "headElement", {
+            get: function () {
+                return this.headSnapshot.element;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageSnapshot.prototype, "rootLocation", {
+            get: function () {
+                var _a;
+                var root = (_a = this.getSetting("root")) !== null && _a !== void 0 ? _a : "/";
+                return expandURL(root);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageSnapshot.prototype, "cacheControlValue", {
+            get: function () {
+                return this.getSetting("cache-control");
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageSnapshot.prototype, "isPreviewable", {
+            get: function () {
+                return this.cacheControlValue != "no-preview";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageSnapshot.prototype, "isCacheable", {
+            get: function () {
+                return this.cacheControlValue != "no-cache";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageSnapshot.prototype, "isVisitable", {
+            get: function () {
+                return this.getSetting("visit-control") != "reload";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PageSnapshot.prototype.getSetting = function (name) {
+            return this.headSnapshot.getMetaValue("turbo-" + name);
         };
-        return Snapshot;
-    }());
+        return PageSnapshot;
+    }(Snapshot));
 
     var TimingMetric;
     (function (TimingMetric) {
@@ -1721,7 +2131,6 @@ Copyright © 2021 Basecamp, LLC
     })(SystemStatusCode || (SystemStatusCode = {}));
     var Visit = (function () {
         function Visit(delegate, location, restorationIdentifier, options) {
-            var _this = this;
             if (options === void 0) { options = {}; }
             this.identifier = uuid();
             this.timingMetrics = {};
@@ -1730,17 +2139,6 @@ Copyright © 2021 Basecamp, LLC
             this.scrolled = false;
             this.snapshotCached = false;
             this.state = VisitState.initialized;
-            this.performScroll = function () {
-                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();
@@ -1811,8 +2209,9 @@ Copyright © 2021 Basecamp, LLC
             }
         };
         Visit.prototype.changeHistory = function () {
+            var _a;
             if (!this.historyChanged) {
-                var actionForHistory = this.location.isEqualTo(this.referrer) ? "replace" : this.action;
+                var actionForHistory = this.location.href === ((_a = this.referrer) === null || _a === void 0 ? void 0 : _a.href) ? "replace" : this.action;
                 var method = this.getHistoryMethodForAction(actionForHistory);
                 this.history.update(method, this.location, this.restorationIdentifier);
                 this.historyChanged = true;
@@ -1859,32 +2258,41 @@ Copyright © 2021 Basecamp, LLC
             var _this = this;
             if (this.response) {
                 var _a = this.response, statusCode_1 = _a.statusCode, responseHTML_1 = _a.responseHTML;
-                this.render(function () {
-                    _this.cacheSnapshot();
-                    if (isSuccessful(statusCode_1) && responseHTML_1 != null) {
-                        _this.view.render({ snapshot: Snapshot.fromHTMLString(responseHTML_1) }, _this.performScroll);
-                        _this.adapter.visitRendered(_this);
-                        _this.complete();
-                    }
-                    else {
-                        _this.view.render({ error: responseHTML_1 }, _this.performScroll);
-                        _this.adapter.visitRendered(_this);
-                        _this.fail();
-                    }
-                });
+                this.render(function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                this.cacheSnapshot();
+                                if (!(isSuccessful(statusCode_1) && responseHTML_1 != null)) return [3, 2];
+                                return [4, this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML_1))];
+                            case 1:
+                                _a.sent();
+                                this.adapter.visitRendered(this);
+                                this.complete();
+                                return [3, 4];
+                            case 2: return [4, this.view.renderError(PageSnapshot.fromHTMLString(responseHTML_1))];
+                            case 3:
+                                _a.sent();
+                                this.adapter.visitRendered(this);
+                                this.fail();
+                                _a.label = 4;
+                            case 4: return [2];
+                        }
+                    });
+                }); });
             }
         };
         Visit.prototype.getCachedSnapshot = function () {
             var 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;
                 }
             }
         };
         Visit.prototype.getPreloadedSnapshot = function () {
             if (this.snapshotHTML) {
-                return Snapshot.wrap(this.snapshotHTML);
+                return PageSnapshot.fromHTMLString(this.snapshotHTML);
             }
         };
         Visit.prototype.hasCachedSnapshot = function () {
@@ -1895,14 +2303,22 @@ Copyright © 2021 Basecamp, LLC
             var snapshot = this.getCachedSnapshot();
             if (snapshot) {
                 var isPreview_1 = this.shouldIssueRequest();
-                this.render(function () {
-                    _this.cacheSnapshot();
-                    _this.view.render({ snapshot: snapshot, isPreview: isPreview_1 }, _this.performScroll);
-                    _this.adapter.visitRendered(_this);
-                    if (!isPreview_1) {
-                        _this.complete();
-                    }
-                });
+                this.render(function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                this.cacheSnapshot();
+                                return [4, this.view.renderPage(snapshot)];
+                            case 1:
+                                _a.sent();
+                                this.adapter.visitRendered(this);
+                                if (!isPreview_1) {
+                                    this.complete();
+                                }
+                                return [2];
+                        }
+                    });
+                }); });
             }
         };
         Visit.prototype.followRedirect = function () {
@@ -1962,6 +2378,17 @@ Copyright © 2021 Basecamp, LLC
         Visit.prototype.requestFinished = function () {
             this.finishRequest();
         };
+        Visit.prototype.performScroll = function () {
+            if (!this.scrolled) {
+                if (this.action == "restore") {
+                    this.scrollToRestoredPosition() || this.scrollToTop();
+                }
+                else {
+                    this.scrollToAnchor() || this.scrollToTop();
+                }
+                this.scrolled = true;
+            }
+        };
         Visit.prototype.scrollToRestoredPosition = function () {
             var scrollPosition = this.restorationData.scrollPosition;
             if (scrollPosition) {
@@ -1970,8 +2397,8 @@ Copyright © 2021 Basecamp, LLC
             }
         };
         Visit.prototype.scrollToAnchor = function () {
-            if (this.location.anchor != null) {
-                this.view.scrollToAnchor(this.location.anchor);
+            if (getAnchor(this.location) != null) {
+                this.view.scrollToAnchor(getAnchor(this.location));
                 return true;
             }
         };
@@ -2006,11 +2433,23 @@ Copyright © 2021 Basecamp, LLC
             }
         };
         Visit.prototype.render = function (callback) {
-            var _this = this;
-            this.cancelRender();
-            this.frame = requestAnimationFrame(function () {
-                delete _this.frame;
-                callback.call(_this);
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.cancelRender();
+                            return [4, new Promise(function (resolve) {
+                                    _this.frame = requestAnimationFrame(function () { return resolve(); });
+                                })];
+                        case 1:
+                            _a.sent();
+                            callback();
+                            delete this.frame;
+                            this.performScroll();
+                            return [2];
+                    }
+                });
             });
         };
         Visit.prototype.cancelRender = function () {
@@ -2198,11 +2637,10 @@ Copyright © 2021 Basecamp, LLC
                 if (_this.shouldHandlePopState()) {
                     var turbo = (event.state || {}).turbo;
                     if (turbo) {
-                        var location_1 = Location.currentLocation;
-                        _this.location = location_1;
+                        _this.location = new URL(window.location.href);
                         var restorationIdentifier = turbo.restorationIdentifier;
                         _this.restorationIdentifier = restorationIdentifier;
-                        _this.delegate.historyPoppedToLocationWithRestorationIdentifier(location_1, restorationIdentifier);
+                        _this.delegate.historyPoppedToLocationWithRestorationIdentifier(_this.location, restorationIdentifier);
                     }
                 }
             };
@@ -2224,7 +2662,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));
             }
         };
         History.prototype.stop = function () {
@@ -2243,7 +2681,7 @@ Copyright © 2021 Basecamp, LLC
         History.prototype.update = function (method, location, restorationIdentifier) {
             if (restorationIdentifier === void 0) { restorationIdentifier = uuid(); }
             var state = { turbo: { restorationIdentifier: restorationIdentifier } };
-            method.call(history, state, "", location.absoluteURL);
+            method.call(history, state, "", location.href);
             this.location = location;
             this.restorationIdentifier = restorationIdentifier;
         };
@@ -2326,7 +2764,7 @@ Copyright © 2021 Basecamp, LLC
             }
         };
         LinkClickObserver.prototype.getLocationForLink = function (link) {
-            return new Location(link.getAttribute("href") || "");
+            return expandURL(link.getAttribute("href") || "");
         };
         return LinkClickObserver;
     }());
@@ -2341,16 +2779,21 @@ Copyright © 2021 Basecamp, LLC
                 this.delegate.visitProposedToLocation(location, options);
             }
         };
-        Navigator.prototype.startVisit = function (location, restorationIdentifier, options) {
+        Navigator.prototype.startVisit = function (locatable, restorationIdentifier, options) {
             if (options === void 0) { options = {}; }
             this.stop();
-            this.currentVisit = new Visit(this, Location.wrap(location), restorationIdentifier, __assign({ referrer: this.location }, options));
+            this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, __assign({ referrer: this.location }, options));
             this.currentVisit.start();
         };
         Navigator.prototype.submitForm = function (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();
+            }
         };
         Navigator.prototype.stop = function () {
             if (this.formSubmission) {
@@ -2417,12 +2860,14 @@ Copyright © 2021 Basecamp, LLC
                         case 0: return [4, fetchResponse.responseHTML];
                         case 1:
                             responseHTML = _a.sent();
-                            if (responseHTML) {
-                                snapshot = Snapshot.fromHTMLString(responseHTML);
-                                this.view.render({ snapshot: snapshot }, function () { });
-                                this.view.clearSnapshotCache();
-                            }
-                            return [2];
+                            if (!responseHTML) return [3, 3];
+                            snapshot = PageSnapshot.fromHTMLString(responseHTML);
+                            return [4, this.view.renderPage(snapshot)];
+                        case 2:
+                            _a.sent();
+                            this.view.clearSnapshotCache();
+                            _a.label = 3;
+                        case 3: return [2];
                     }
                 });
             });
@@ -2548,78 +2993,11 @@ Copyright © 2021 Basecamp, LLC
         return ScrollObserver;
     }());
 
-    var StreamMessage = (function () {
-        function StreamMessage(html) {
-            this.templateElement = document.createElement("template");
-            this.templateElement.innerHTML = html;
-        }
-        StreamMessage.wrap = function (message) {
-            if (typeof message == "string") {
-                return new this(message);
-            }
-            else {
-                return message;
-            }
-        };
-        Object.defineProperty(StreamMessage.prototype, "fragment", {
-            get: function () {
-                var e_1, _a;
-                var fragment = document.createDocumentFragment();
-                try {
-                    for (var _b = __values(this.foreignElements), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var element = _c.value;
-                        fragment.appendChild(document.importNode(element, true));
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                return fragment;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(StreamMessage.prototype, "foreignElements", {
-            get: function () {
-                return this.templateChildren.reduce(function (streamElements, child) {
-                    if (child.tagName.toLowerCase() == "turbo-stream") {
-                        return __spread(streamElements, [child]);
-                    }
-                    else {
-                        return streamElements;
-                    }
-                }, []);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(StreamMessage.prototype, "templateChildren", {
-            get: function () {
-                return Array.from(this.templateElement.content.children);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return StreamMessage;
-    }());
-
     var StreamObserver = (function () {
         function StreamObserver(delegate) {
             var _this = this;
             this.sources = new Set;
             this.started = false;
-            this.prepareFetchRequest = (function (event) {
-                var _a;
-                var fetchOptions = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.fetchOptions;
-                if (fetchOptions) {
-                    var headers = fetchOptions.headers;
-                    headers.Accept = ["text/vnd.turbo-stream.html", headers.Accept].join(", ");
-                }
-            });
             this.inspectFetchResponse = (function (event) {
                 var response = fetchResponseFromEvent(event);
                 if (response && fetchResponseIsStream(response)) {
@@ -2637,14 +3015,12 @@ Copyright © 2021 Basecamp, LLC
         StreamObserver.prototype.start = function () {
             if (!this.started) {
                 this.started = true;
-                addEventListener("turbo:before-fetch-request", this.prepareFetchRequest, true);
                 addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
             }
         };
         StreamObserver.prototype.stop = function () {
             if (this.started) {
                 this.started = false;
-                removeEventListener("turbo:before-fetch-request", this.prepareFetchRequest, true);
                 removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
             }
         };
@@ -2694,155 +3070,42 @@ Copyright © 2021 Basecamp, LLC
     function fetchResponseIsStream(response) {
         var _a;
         var 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";
     }
 
-    var Renderer = (function () {
-        function Renderer() {
-        }
-        Renderer.prototype.renderView = function (callback) {
-            this.delegate.viewWillRender(this.newBody);
-            callback();
-            this.delegate.viewRendered(this.newBody);
-        };
-        Renderer.prototype.invalidateView = function () {
-            this.delegate.viewInvalidated();
-        };
-        Renderer.prototype.createScriptElement = function (element) {
-            if (element.getAttribute("data-turbo-eval") == "false") {
-                return element;
-            }
-            else {
-                var createdScriptElement = document.createElement("script");
-                createdScriptElement.textContent = element.textContent;
-                createdScriptElement.async = false;
-                copyElementAttributes(createdScriptElement, element);
-                return createdScriptElement;
-            }
-        };
-        return Renderer;
-    }());
-    function copyElementAttributes(destinationElement, sourceElement) {
-        var e_1, _a;
-        try {
-            for (var _b = __values(__spread(sourceElement.attributes)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = _c.value, name_1 = _d.name, value = _d.value;
-                destinationElement.setAttribute(name_1, value);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    }
-
     var ErrorRenderer = (function (_super) {
         __extends(ErrorRenderer, _super);
-        function ErrorRenderer(delegate, html) {
-            var _this = _super.call(this) || this;
-            _this.delegate = delegate;
-            _this.htmlElement = (function () {
-                var 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");
-            return _this;
-        }
-        ErrorRenderer.render = function (delegate, callback, html) {
-            return new this(delegate, html).render(callback);
-        };
-        ErrorRenderer.prototype.render = function (callback) {
-            var _this = this;
-            this.renderView(function () {
-                _this.replaceHeadAndBody();
-                _this.activateBodyScriptElements();
-                callback();
-            });
-        };
-        ErrorRenderer.prototype.replaceHeadAndBody = function () {
-            var documentElement = document.documentElement, head = document.head, body = document.body;
-            documentElement.replaceChild(this.newHead, head);
-            documentElement.replaceChild(this.newBody, body);
-        };
-        ErrorRenderer.prototype.activateBodyScriptElements = function () {
-            var e_1, _a;
-            try {
-                for (var _b = __values(this.getScriptElements()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var replaceableElement = _c.value;
-                    var parentNode = replaceableElement.parentNode;
-                    if (parentNode) {
-                        var element = this.createScriptElement(replaceableElement);
-                        parentNode.replaceChild(element, replaceableElement);
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        };
-        ErrorRenderer.prototype.getScriptElements = function () {
-            return __spread(document.documentElement.querySelectorAll("script"));
-        };
-        return ErrorRenderer;
-    }(Renderer));
-
-    var SnapshotCache = (function () {
-        function SnapshotCache(size) {
-            this.keys = [];
-            this.snapshots = {};
-            this.size = size;
-        }
-        SnapshotCache.prototype.has = function (location) {
-            return location.toCacheKey() in this.snapshots;
-        };
-        SnapshotCache.prototype.get = function (location) {
-            if (this.has(location)) {
-                var snapshot = this.read(location);
-                this.touch(location);
-                return snapshot;
-            }
-        };
-        SnapshotCache.prototype.put = function (location, snapshot) {
-            this.write(location, snapshot);
-            this.touch(location);
-            return snapshot;
-        };
-        SnapshotCache.prototype.clear = function () {
-            this.snapshots = {};
-        };
-        SnapshotCache.prototype.read = function (location) {
-            return this.snapshots[location.toCacheKey()];
-        };
-        SnapshotCache.prototype.write = function (location, snapshot) {
-            this.snapshots[location.toCacheKey()] = snapshot;
+        function ErrorRenderer() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ErrorRenderer.prototype.render = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.replaceHeadAndBody();
+                    this.activateScriptElements();
+                    return [2];
+                });
+            });
         };
-        SnapshotCache.prototype.touch = function (location) {
-            var key = location.toCacheKey();
-            var index = this.keys.indexOf(key);
-            if (index > -1)
-                this.keys.splice(index, 1);
-            this.keys.unshift(key);
-            this.trim();
+        ErrorRenderer.prototype.replaceHeadAndBody = function () {
+            var documentElement = document.documentElement, head = document.head, body = document.body;
+            documentElement.replaceChild(this.newHead, head);
+            documentElement.replaceChild(this.newElement, body);
         };
-        SnapshotCache.prototype.trim = function () {
+        ErrorRenderer.prototype.activateScriptElements = function () {
             var e_1, _a;
             try {
-                for (var _b = __values(this.keys.splice(this.size)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var key = _c.value;
-                    delete this.snapshots[key];
+                for (var _b = __values(this.scriptElements), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var replaceableElement = _c.value;
+                    var parentNode = replaceableElement.parentNode;
+                    if (parentNode) {
+                        var element = this.createScriptElement(replaceableElement);
+                        parentNode.replaceChild(element, replaceableElement);
+                    }
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -2853,63 +3116,97 @@ Copyright © 2021 Basecamp, LLC
                 finally { if (e_1) throw e_1.error; }
             }
         };
-        return SnapshotCache;
-    }());
+        Object.defineProperty(ErrorRenderer.prototype, "newHead", {
+            get: function () {
+                return this.newSnapshot.headSnapshot.element;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ErrorRenderer.prototype, "scriptElements", {
+            get: function () {
+                return __spread(document.documentElement.querySelectorAll("script"));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ErrorRenderer;
+    }(Renderer));
 
-    var SnapshotRenderer = (function (_super) {
-        __extends(SnapshotRenderer, _super);
-        function SnapshotRenderer(delegate, currentSnapshot, newSnapshot, isPreview) {
-            var _this = _super.call(this) || this;
-            _this.delegate = delegate;
-            _this.currentSnapshot = currentSnapshot;
-            _this.currentHeadDetails = currentSnapshot.headDetails;
-            _this.newSnapshot = newSnapshot;
-            _this.newHeadDetails = newSnapshot.headDetails;
-            _this.newBody = newSnapshot.bodyElement;
-            _this.isPreview = isPreview;
-            return _this;
+    var PageRenderer = (function (_super) {
+        __extends(PageRenderer, _super);
+        function PageRenderer() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        SnapshotRenderer.render = function (delegate, callback, currentSnapshot, newSnapshot, isPreview) {
-            return new this(delegate, currentSnapshot, newSnapshot, isPreview).render(callback);
+        Object.defineProperty(PageRenderer.prototype, "shouldRender", {
+            get: function () {
+                return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PageRenderer.prototype.prepareToRender = function () {
+            this.mergeHead();
         };
-        SnapshotRenderer.prototype.render = function (callback) {
-            var _this = this;
-            if (this.shouldRender()) {
-                this.mergeHead();
-                this.renderView(function () {
-                    _this.replaceBody();
-                    if (!_this.isPreview) {
-                        _this.focusFirstAutofocusableElement();
-                    }
-                    callback();
+        PageRenderer.prototype.render = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.replaceBody();
+                    return [2];
                 });
-            }
-            else {
-                this.invalidateView();
+            });
+        };
+        PageRenderer.prototype.finishRendering = function () {
+            _super.prototype.finishRendering.call(this);
+            if (this.isPreview) {
+                this.focusFirstAutofocusableElement();
             }
         };
-        SnapshotRenderer.prototype.mergeHead = function () {
+        Object.defineProperty(PageRenderer.prototype, "currentHeadSnapshot", {
+            get: function () {
+                return this.currentSnapshot.headSnapshot;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageRenderer.prototype, "newHeadSnapshot", {
+            get: function () {
+                return this.newSnapshot.headSnapshot;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageRenderer.prototype, "newElement", {
+            get: function () {
+                return this.newSnapshot.element;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PageRenderer.prototype.mergeHead = function () {
             this.copyNewHeadStylesheetElements();
             this.copyNewHeadScriptElements();
             this.removeCurrentHeadProvisionalElements();
             this.copyNewHeadProvisionalElements();
         };
-        SnapshotRenderer.prototype.replaceBody = function () {
-            var placeholders = this.relocateCurrentBodyPermanentElements();
-            this.activateNewBody();
-            this.assignNewBody();
-            this.replacePlaceholderElementsWithClonedPermanentElements(placeholders);
-        };
-        SnapshotRenderer.prototype.shouldRender = function () {
-            return this.newSnapshot.isVisitable() && this.trackedElementsAreIdentical();
-        };
-        SnapshotRenderer.prototype.trackedElementsAreIdentical = function () {
-            return this.currentHeadDetails.getTrackedElementSignature() == this.newHeadDetails.getTrackedElementSignature();
+        PageRenderer.prototype.replaceBody = function () {
+            var _this = this;
+            this.preservingPermanentElements(function () {
+                _this.activateNewBody();
+                _this.assignNewBody();
+            });
         };
-        SnapshotRenderer.prototype.copyNewHeadStylesheetElements = function () {
+        Object.defineProperty(PageRenderer.prototype, "trackedElementsAreIdentical", {
+            get: function () {
+                return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PageRenderer.prototype.copyNewHeadStylesheetElements = function () {
             var e_1, _a;
             try {
-                for (var _b = __values(this.getNewHeadStylesheetElements()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this.newHeadStylesheetElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var element = _c.value;
                     document.head.appendChild(element);
                 }
@@ -2922,10 +3219,10 @@ Copyright © 2021 Basecamp, LLC
                 finally { if (e_1) throw e_1.error; }
             }
         };
-        SnapshotRenderer.prototype.copyNewHeadScriptElements = function () {
+        PageRenderer.prototype.copyNewHeadScriptElements = function () {
             var e_2, _a;
             try {
-                for (var _b = __values(this.getNewHeadScriptElements()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this.newHeadScriptElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var element = _c.value;
                     document.head.appendChild(this.createScriptElement(element));
                 }
@@ -2938,10 +3235,10 @@ Copyright © 2021 Basecamp, LLC
                 finally { if (e_2) throw e_2.error; }
             }
         };
-        SnapshotRenderer.prototype.removeCurrentHeadProvisionalElements = function () {
+        PageRenderer.prototype.removeCurrentHeadProvisionalElements = function () {
             var e_3, _a;
             try {
-                for (var _b = __values(this.getCurrentHeadProvisionalElements()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this.currentHeadProvisionalElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var element = _c.value;
                     document.head.removeChild(element);
                 }
@@ -2954,10 +3251,10 @@ Copyright © 2021 Basecamp, LLC
                 finally { if (e_3) throw e_3.error; }
             }
         };
-        SnapshotRenderer.prototype.copyNewHeadProvisionalElements = function () {
+        PageRenderer.prototype.copyNewHeadProvisionalElements = function () {
             var e_4, _a;
             try {
-                for (var _b = __values(this.getNewHeadProvisionalElements()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this.newHeadProvisionalElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var element = _c.value;
                     document.head.appendChild(element);
                 }
@@ -2970,201 +3267,194 @@ Copyright © 2021 Basecamp, LLC
                 finally { if (e_4) throw e_4.error; }
             }
         };
-        SnapshotRenderer.prototype.relocateCurrentBodyPermanentElements = function () {
-            var _this = this;
-            return this.getCurrentBodyPermanentElements().reduce(function (placeholders, permanentElement) {
-                var newElement = _this.newSnapshot.getPermanentElementById(permanentElement.id);
-                if (newElement) {
-                    var placeholder = createPlaceholderForPermanentElement(permanentElement);
-                    replaceElementWithElement(permanentElement, placeholder.element);
-                    replaceElementWithElement(newElement, permanentElement);
-                    return __spread(placeholders, [placeholder]);
-                }
-                else {
-                    return placeholders;
-                }
-            }, []);
-        };
-        SnapshotRenderer.prototype.replacePlaceholderElementsWithClonedPermanentElements = function (placeholders) {
-            var e_5, _a;
-            try {
-                for (var placeholders_1 = __values(placeholders), placeholders_1_1 = placeholders_1.next(); !placeholders_1_1.done; placeholders_1_1 = placeholders_1.next()) {
-                    var _b = placeholders_1_1.value, element = _b.element, permanentElement = _b.permanentElement;
-                    var clonedElement = permanentElement.cloneNode(true);
-                    replaceElementWithElement(element, clonedElement);
-                }
-            }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
-            finally {
-                try {
-                    if (placeholders_1_1 && !placeholders_1_1.done && (_a = placeholders_1.return)) _a.call(placeholders_1);
-                }
-                finally { if (e_5) throw e_5.error; }
-            }
-        };
-        SnapshotRenderer.prototype.activateNewBody = function () {
-            document.adoptNode(this.newBody);
+        PageRenderer.prototype.activateNewBody = function () {
+            document.adoptNode(this.newElement);
             this.activateNewBodyScriptElements();
         };
-        SnapshotRenderer.prototype.activateNewBodyScriptElements = function () {
-            var e_6, _a;
+        PageRenderer.prototype.activateNewBodyScriptElements = function () {
+            var e_5, _a;
             try {
-                for (var _b = __values(this.getNewBodyScriptElements()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this.newBodyScriptElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var inertScriptElement = _c.value;
                     var activatedScriptElement = this.createScriptElement(inertScriptElement);
                     replaceElementWithElement(inertScriptElement, activatedScriptElement);
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_5) throw e_5.error; }
             }
         };
-        SnapshotRenderer.prototype.assignNewBody = function () {
-            if (document.body) {
-                replaceElementWithElement(document.body, this.newBody);
+        PageRenderer.prototype.assignNewBody = function () {
+            if (document.body && this.newElement instanceof HTMLBodyElement) {
+                replaceElementWithElement(document.body, this.newElement);
             }
             else {
-                document.documentElement.appendChild(this.newBody);
+                document.documentElement.appendChild(this.newElement);
             }
         };
-        SnapshotRenderer.prototype.focusFirstAutofocusableElement = function () {
-            var element = this.newSnapshot.findFirstAutofocusableElement();
-            if (elementIsFocusable(element)) {
-                element.focus();
+        Object.defineProperty(PageRenderer.prototype, "newHeadStylesheetElements", {
+            get: function () {
+                return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageRenderer.prototype, "newHeadScriptElements", {
+            get: function () {
+                return this.newHeadSnapshot.getScriptElementsNotInSnapshot(this.currentHeadSnapshot);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageRenderer.prototype, "currentHeadProvisionalElements", {
+            get: function () {
+                return this.currentHeadSnapshot.provisionalElements;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageRenderer.prototype, "newHeadProvisionalElements", {
+            get: function () {
+                return this.newHeadSnapshot.provisionalElements;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageRenderer.prototype, "newBodyScriptElements", {
+            get: function () {
+                return __spread(this.newElement.querySelectorAll("script"));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PageRenderer;
+    }(Renderer));
+
+    var SnapshotCache = (function () {
+        function SnapshotCache(size) {
+            this.keys = [];
+            this.snapshots = {};
+            this.size = size;
+        }
+        SnapshotCache.prototype.has = function (location) {
+            return toCacheKey(location) in this.snapshots;
+        };
+        SnapshotCache.prototype.get = function (location) {
+            if (this.has(location)) {
+                var snapshot = this.read(location);
+                this.touch(location);
+                return snapshot;
             }
         };
-        SnapshotRenderer.prototype.getNewHeadStylesheetElements = function () {
-            return this.newHeadDetails.getStylesheetElementsNotInDetails(this.currentHeadDetails);
+        SnapshotCache.prototype.put = function (location, snapshot) {
+            this.write(location, snapshot);
+            this.touch(location);
+            return snapshot;
         };
-        SnapshotRenderer.prototype.getNewHeadScriptElements = function () {
-            return this.newHeadDetails.getScriptElementsNotInDetails(this.currentHeadDetails);
+        SnapshotCache.prototype.clear = function () {
+            this.snapshots = {};
         };
-        SnapshotRenderer.prototype.getCurrentHeadProvisionalElements = function () {
-            return this.currentHeadDetails.getProvisionalElements();
+        SnapshotCache.prototype.read = function (location) {
+            return this.snapshots[toCacheKey(location)];
         };
-        SnapshotRenderer.prototype.getNewHeadProvisionalElements = function () {
-            return this.newHeadDetails.getProvisionalElements();
+        SnapshotCache.prototype.write = function (location, snapshot) {
+            this.snapshots[toCacheKey(location)] = snapshot;
         };
-        SnapshotRenderer.prototype.getCurrentBodyPermanentElements = function () {
-            return this.currentSnapshot.getPermanentElementsPresentInSnapshot(this.newSnapshot);
+        SnapshotCache.prototype.touch = function (location) {
+            var key = toCacheKey(location);
+            var index = this.keys.indexOf(key);
+            if (index > -1)
+                this.keys.splice(index, 1);
+            this.keys.unshift(key);
+            this.trim();
         };
-        SnapshotRenderer.prototype.getNewBodyScriptElements = function () {
-            return __spread(this.newBody.querySelectorAll("script"));
+        SnapshotCache.prototype.trim = function () {
+            var e_1, _a;
+            try {
+                for (var _b = __values(this.keys.splice(this.size)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var key = _c.value;
+                    delete this.snapshots[key];
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
         };
-        return SnapshotRenderer;
-    }(Renderer));
-    function createPlaceholderForPermanentElement(permanentElement) {
-        var element = document.createElement("meta");
-        element.setAttribute("name", "turbo-permanent-placeholder");
-        element.setAttribute("content", permanentElement.id);
-        return { element: element, permanentElement: permanentElement };
-    }
-    function replaceElementWithElement(fromElement, toElement) {
-        var parentElement = fromElement.parentElement;
-        if (parentElement) {
-            return parentElement.replaceChild(toElement, fromElement);
-        }
-    }
-    function elementIsFocusable(element) {
-        return element && typeof element.focus == "function";
-    }
+        return SnapshotCache;
+    }());
 
-    var View = (function () {
-        function View(delegate) {
-            this.htmlElement = document.documentElement;
-            this.snapshotCache = new SnapshotCache(10);
-            this.delegate = delegate;
+    var PageView = (function (_super) {
+        __extends(PageView, _super);
+        function PageView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.snapshotCache = new SnapshotCache(10);
+            _this.lastRenderedLocation = new URL(location.href);
+            return _this;
         }
-        View.prototype.getRootLocation = function () {
-            return this.getSnapshot().getRootLocation();
+        PageView.prototype.renderPage = function (snapshot, isPreview) {
+            if (isPreview === void 0) { isPreview = false; }
+            var renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
+            return this.render(renderer);
         };
-        View.prototype.getElementForAnchor = function (anchor) {
-            return this.getSnapshot().getElementForAnchor(anchor);
+        PageView.prototype.renderError = function (snapshot) {
+            var renderer = new ErrorRenderer(this.snapshot, snapshot, false);
+            this.render(renderer);
         };
-        View.prototype.getSnapshot = function () {
-            return Snapshot.fromHTMLElement(this.htmlElement);
-        };
-        View.prototype.clearSnapshotCache = function () {
+        PageView.prototype.clearSnapshotCache = function () {
             this.snapshotCache.clear();
         };
-        View.prototype.shouldCacheSnapshot = function () {
-            return this.getSnapshot().isCacheable();
-        };
-        View.prototype.cacheSnapshot = function () {
+        PageView.prototype.cacheSnapshot = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var snapshot, location_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _a, snapshot, location_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            if (!this.shouldCacheSnapshot()) return [3, 2];
+                            if (!this.shouldCacheSnapshot) return [3, 2];
                             this.delegate.viewWillCacheSnapshot();
-                            snapshot = this.getSnapshot();
-                            location_1 = this.lastRenderedLocation || Location.currentLocation;
-                            return [4, nextMicrotask()];
+                            _a = this, snapshot = _a.snapshot, location_1 = _a.lastRenderedLocation;
+                            return [4, nextEventLoopTick()];
                         case 1:
-                            _a.sent();
+                            _b.sent();
                             this.snapshotCache.put(location_1, snapshot.clone());
-                            _a.label = 2;
+                            _b.label = 2;
                         case 2: return [2];
                     }
                 });
             });
         };
-        View.prototype.getCachedSnapshotForLocation = function (location) {
+        PageView.prototype.getCachedSnapshotForLocation = function (location) {
             return this.snapshotCache.get(location);
         };
-        View.prototype.render = function (_a, callback) {
-            var snapshot = _a.snapshot, error = _a.error, isPreview = _a.isPreview;
-            this.markAsPreview(isPreview);
-            if (snapshot) {
-                this.renderSnapshot(snapshot, isPreview, callback);
-            }
-            else {
-                this.renderError(error, callback);
-            }
-        };
-        View.prototype.scrollToAnchor = function (anchor) {
-            var element = this.getElementForAnchor(anchor);
-            if (element) {
-                this.scrollToElement(element);
-            }
-            else {
-                this.scrollToPosition({ x: 0, y: 0 });
-            }
-        };
-        View.prototype.scrollToElement = function (element) {
-            element.scrollIntoView();
-        };
-        View.prototype.scrollToPosition = function (_a) {
-            var x = _a.x, y = _a.y;
-            window.scrollTo(x, y);
-        };
-        View.prototype.markAsPreview = function (isPreview) {
-            if (isPreview) {
-                this.htmlElement.setAttribute("data-turbo-preview", "");
-            }
-            else {
-                this.htmlElement.removeAttribute("data-turbo-preview");
-            }
-        };
-        View.prototype.renderSnapshot = function (snapshot, isPreview, callback) {
-            SnapshotRenderer.render(this.delegate, callback, this.getSnapshot(), snapshot, isPreview || false);
-        };
-        View.prototype.renderError = function (error, callback) {
-            ErrorRenderer.render(this.delegate, callback, error || "");
-        };
-        return View;
-    }());
+        Object.defineProperty(PageView.prototype, "snapshot", {
+            get: function () {
+                return PageSnapshot.fromElement(this.element);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PageView.prototype, "shouldCacheSnapshot", {
+            get: function () {
+                return this.snapshot.isCacheable;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PageView;
+    }(View));
 
     var Session = (function () {
         function Session() {
             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);
@@ -3209,7 +3499,7 @@ Copyright © 2021 Basecamp, LLC
         };
         Session.prototype.visit = function (location, options) {
             if (options === void 0) { options = {}; }
-            this.navigator.proposeVisit(Location.wrap(location), options);
+            this.navigator.proposeVisit(expandURL(location), options);
         };
         Session.prototype.connectStreamSource = function (source) {
             this.streamObserver.connectStreamSource(source);
@@ -3258,15 +3548,17 @@ Copyright © 2021 Basecamp, LLC
         };
         Session.prototype.followedLinkToLocation = function (link, location) {
             var action = this.getActionForLink(link);
-            this.visit(location, { action: action });
+            this.visit(location.href, { action: action });
         };
         Session.prototype.allowsVisitingLocation = function (location) {
             return this.applicationAllowsVisitingLocation(location);
         };
         Session.prototype.visitProposedToLocation = function (location, options) {
+            extendURLWithDeprecatedProperties(location);
             this.adapter.visitProposedToLocation(location, options);
         };
         Session.prototype.visitStarted = function (visit) {
+            extendURLWithDeprecatedProperties(visit.location);
             this.notifyApplicationAfterVisitingLocation(visit.location);
         };
         Session.prototype.visitCompleted = function (visit) {
@@ -3291,19 +3583,20 @@ Copyright © 2021 Basecamp, LLC
         Session.prototype.receivedMessageFromStream = function (message) {
             this.renderStreamMessage(message);
         };
-        Session.prototype.viewWillRender = function (newBody) {
-            this.notifyApplicationBeforeRender(newBody);
+        Session.prototype.viewWillCacheSnapshot = function () {
+            this.notifyApplicationBeforeCachingSnapshot();
         };
-        Session.prototype.viewRendered = function () {
+        Session.prototype.viewWillRenderSnapshot = function (_a, isPreview) {
+            var element = _a.element;
+            this.notifyApplicationBeforeRender(element);
+        };
+        Session.prototype.viewRenderedSnapshot = function (snapshot, isPreview) {
             this.view.lastRenderedLocation = this.history.location;
             this.notifyApplicationAfterRender();
         };
         Session.prototype.viewInvalidated = function () {
             this.adapter.pageInvalidated();
         };
-        Session.prototype.viewWillCacheSnapshot = function () {
-            this.notifyApplicationBeforeCachingSnapshot();
-        };
         Session.prototype.applicationAllowsFollowingLinkToLocation = function (link, location) {
             var event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
             return !event.defaultPrevented;
@@ -3313,13 +3606,13 @@ Copyright © 2021 Basecamp, LLC
             return !event.defaultPrevented;
         };
         Session.prototype.notifyApplicationAfterClickingLinkToLocation = function (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 });
         };
         Session.prototype.notifyApplicationBeforeVisitingLocation = function (location) {
-            return dispatch("turbo:before-visit", { detail: { url: location.absoluteURL }, cancelable: true });
+            return dispatch("turbo:before-visit", { detail: { url: location.href }, cancelable: true });
         };
         Session.prototype.notifyApplicationAfterVisitingLocation = function (location) {
-            return dispatch("turbo:visit", { detail: { url: location.absoluteURL } });
+            return dispatch("turbo:visit", { detail: { url: location.href } });
         };
         Session.prototype.notifyApplicationBeforeCachingSnapshot = function () {
             return dispatch("turbo:before-cache");
@@ -3332,7 +3625,7 @@ Copyright © 2021 Basecamp, LLC
         };
         Session.prototype.notifyApplicationAfterPageLoad = function (timing) {
             if (timing === void 0) { timing = {}; }
-            return dispatch("turbo:load", { detail: { url: this.location.absoluteURL, timing: timing } });
+            return dispatch("turbo:load", { detail: { url: this.location.href, timing: timing } });
         };
         Session.prototype.getActionForLink = function (link) {
             var action = link.getAttribute("data-turbo-action");
@@ -3348,10 +3641,27 @@ Copyright © 2021 Basecamp, LLC
             }
         };
         Session.prototype.locationIsVisitable = function (location) {
-            return location.isPrefixedBy(this.view.getRootLocation()) && location.isHTML();
+            return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
         };
+        Object.defineProperty(Session.prototype, "snapshot", {
+            get: function () {
+                return this.view.snapshot;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return Session;
     }());
+    function extendURLWithDeprecatedProperties(url) {
+        Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
+    }
+    var deprecatedLocationPropertyDescriptors = {
+        absoluteURL: {
+            get: function () {
+                return this.toString();
+            }
+        }
+    };
 
     var session = new Session;
     var navigator = session.navigator;