turbo-rails 0.5.8 → 0.5.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4482a7f7bf938ab7f2a3d7d9e387d632a64dca82605b8bf20cd8e2dce654488
-  data.tar.gz: 95b3c7e4b3d4d55205fee6c8b8f6bcba6acae2c13e9fa06dd90e5fb018854dde
+  metadata.gz: 025ba92afa27783a938ec698ff465685559d71698ab3023b091a54d14f0d6dd1
+  data.tar.gz: ae377ccfdb57c9f9f2f862dc81e5863a5bc614002bbdfe39547cb1ede2aa797a
 SHA512:
-  metadata.gz: bd2ea89d24c93904c1f8c701d0db808b85b9003c48b1596d57caed21512c87544565741709ed7532ab60a70cf7aa389f61c1e3420e36b9e7539126d786981528
-  data.tar.gz: b1d74905d811d787da2ee3afee23eb7ac8723f7bb93b09857b8e0deeb047407c3b4ce5ce8737ec2895e0bcb352480095b06a0b0c0b9f2e99aae748106291fd70
+  metadata.gz: a7f03c2b76b07d65f64b3170b9f9ed6c1a9c4429c9f7eee3abf8bffbdbed8a320806f239df725c5aad37c826d2171ec2abc0c7787d42f929e2741584fc4d84e3
+  data.tar.gz: b2566bd6203b982d5b3cad1c852517a41b3a11ca8c8f097cac3cf7ff45f8d83db3eab3337807a80299cf61fc21f58990275f2e5dc92af75b03b167bf04f05ecc

data/app/assets/javascripts/turbo.js

@@ -132,82 +132,59 @@ function frameLoadingStyleFromString(style) {
   }
 }
 
-class Location {
-  constructor(url) {
-    const linkWithAnchor = document.createElement("a");
-    linkWithAnchor.href = url;
-    this.absoluteURL = linkWithAnchor.href;
-    const anchorLength = linkWithAnchor.hash.length;
-    if (anchorLength < 2) {
-      this.requestURL = this.absoluteURL;
-    } else {
-      this.requestURL = this.absoluteURL.slice(0, -anchorLength);
-      this.anchor = linkWithAnchor.hash.slice(1);
-    }
-  }
-  static get currentLocation() {
-    return this.wrap(window.location.toString());
-  }
-  static wrap(locatable) {
-    if (typeof locatable == "string") {
-      return new this(locatable);
-    } else if (locatable != null) {
-      return locatable;
-    }
-  }
-  getOrigin() {
-    return this.absoluteURL.split("/", 3).join("/");
-  }
-  getPath() {
-    return (this.requestURL.match(/\/\/[^/]*(\/[^?;]*)/) || [])[1] || "/";
-  }
-  getPathComponents() {
-    return this.getPath().split("/").slice(1);
-  }
-  getLastPathComponent() {
-    return this.getPathComponents().slice(-1)[0];
-  }
-  getExtension() {
-    return (this.getLastPathComponent().match(/\.[^.]*$/) || [])[0] || "";
-  }
-  isHTML() {
-    return !!this.getExtension().match(/^(?:|\.(?:htm|html|xhtml))$/);
-  }
-  isPrefixedBy(location) {
-    const prefixURL = getPrefixURL(location);
-    return this.isEqualTo(location) || stringStartsWith(this.absoluteURL, prefixURL);
-  }
-  isEqualTo(location) {
-    return location && this.absoluteURL === location.absoluteURL;
-  }
-  toCacheKey() {
-    return this.requestURL;
-  }
-  toJSON() {
-    return this.absoluteURL;
-  }
-  toString() {
-    return this.absoluteURL;
+function expandURL(locatable) {
+  const anchor = document.createElement("a");
+  anchor.href = locatable.toString();
+  return new URL(anchor.href);
+}
+
+function getAnchor(url) {
+  let anchorMatch;
+  if (url.hash) {
+    return url.hash.slice(1);
+  } else if (anchorMatch = url.href.match(/#(.*)$/)) {
+    return anchorMatch[1];
+  } else {
+    return "";
   }
-  valueOf() {
-    return this.absoluteURL;
+}
+
+function getExtension(url) {
+  return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
+}
+
+function isHTML(url) {
+  return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml))$/);
+}
+
+function isPrefixedBy(baseURL, url) {
+  const prefix = getPrefix(url);
+  return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
+}
+
+function toCacheKey(url) {
+  const anchorLength = url.hash.length;
+  if (anchorLength < 2) {
+    return url.href;
+  } else {
+    return url.href.slice(0, -anchorLength);
   }
 }
 
-function getPrefixURL(location) {
-  return addTrailingSlash(location.getOrigin() + location.getPath());
+function getPathComponents(url) {
+  return url.pathname.split("/").slice(1);
 }
 
-function addTrailingSlash(url) {
-  return stringEndsWith(url, "/") ? url : url + "/";
+function getLastPathComponent(url) {
+  return getPathComponents(url).slice(-1)[0];
 }
 
-function stringStartsWith(string, prefix) {
-  return string.slice(0, prefix.length) === prefix;
+function getPrefix(url) {
+  return addTrailingSlash(url.origin + url.pathname);
 }
 
-function stringEndsWith(string, suffix) {
-  return string.slice(-suffix.length) === suffix;
+function addTrailingSlash(value) {
+  return value.endsWith("/") ? value : value + "/";
 }
 
 class FetchResponse {
@@ -230,7 +207,7 @@ class FetchResponse {
     return this.response.redirected;
   }
   get location() {
-    return Location.wrap(this.response.url);
+    return expandURL(this.response.url);
   }
   get isHTML() {
     return this.contentType && this.contentType.match(/^(?:text\/([^\s;,]+\b)?html|application\/xhtml\+xml)\b/);
@@ -270,10 +247,18 @@ function nextAnimationFrame() {
   return new Promise((resolve => requestAnimationFrame((() => resolve()))));
 }
 
+function nextEventLoopTick() {
+  return new Promise((resolve => setTimeout((() => resolve()), 0)));
+}
+
 function nextMicrotask() {
   return Promise.resolve();
 }
 
+function parseHTMLDocument(html = "") {
+  return (new DOMParser).parseFromString(html, "text/html");
+}
+
 function unindent(strings, ...values) {
   const lines = interpolate(strings, values).replace(/^\n/, "").split("\n");
   const match = lines[0].match(/^\s+/);
@@ -334,27 +319,22 @@ function fetchMethodFromString(method) {
 }
 
 class FetchRequest {
-  constructor(delegate, method, location, body) {
+  constructor(delegate, method, location, body = new URLSearchParams) {
     this.abortController = new AbortController;
     this.delegate = delegate;
     this.method = method;
-    this.location = location;
-    this.body = body;
-  }
-  get url() {
-    const url = this.location.absoluteURL;
-    const query = this.params.toString();
-    if (this.isIdempotent && query.length) {
-      return [ url, query ].join(url.includes("?") ? "&" : "?");
+    if (this.isIdempotent) {
+      this.url = mergeFormDataEntries(location, [ ...body.entries() ]);
     } else {
-      return url;
+      this.body = body;
+      this.url = location;
     }
   }
+  get location() {
+    return this.url;
+  }
   get params() {
-    return this.entries.reduce(((params, [name, value]) => {
-      params.append(name, value.toString());
-      return params;
-    }), new URLSearchParams);
+    return this.url.searchParams;
   }
   get entries() {
     return this.body ? Array.from(this.body.entries()) : [];
@@ -371,7 +351,7 @@ class FetchRequest {
     });
     try {
       this.delegate.requestStarted(this);
-      const response = await fetch(this.url, fetchOptions);
+      const response = await fetch(this.url.href, fetchOptions);
       return await this.receive(response);
     } catch (error) {
       this.delegate.requestErrored(this, error);
@@ -403,7 +383,7 @@ class FetchRequest {
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
-      body: this.isIdempotent ? undefined : this.body,
+      body: this.body,
       signal: this.abortSignal
     };
   }
@@ -411,20 +391,34 @@ class FetchRequest {
     return this.method == FetchMethod.get;
   }
   get headers() {
-    return Object.assign({
-      Accept: "text/html, application/xhtml+xml"
-    }, this.additionalHeaders);
-  }
-  get additionalHeaders() {
-    if (typeof this.delegate.additionalHeadersForRequest == "function") {
-      return this.delegate.additionalHeadersForRequest(this);
-    } else {
-      return {};
+    const headers = Object.assign({}, this.defaultHeaders);
+    if (typeof this.delegate.prepareHeadersForRequest == "function") {
+      this.delegate.prepareHeadersForRequest(headers, this);
     }
+    return headers;
   }
   get abortSignal() {
     return this.abortController.signal;
   }
+  get defaultHeaders() {
+    return {
+      Accept: "text/html, application/xhtml+xml"
+    };
+  }
+}
+
+function mergeFormDataEntries(url, entries) {
+  const currentSearchParams = new URLSearchParams(url.search);
+  for (const [name, value] of entries) {
+    if (value instanceof File) continue;
+    if (currentSearchParams.has(name)) {
+      currentSearchParams.delete(name);
+      url.searchParams.set(name, value);
+    } else {
+      url.searchParams.append(name, value);
+    }
+  }
+  return url;
 }
 
 class AppearanceObserver {
@@ -454,6 +448,41 @@ class AppearanceObserver {
   }
 }
 
+class StreamMessage {
+  constructor(html) {
+    this.templateElement = document.createElement("template");
+    this.templateElement.innerHTML = html;
+  }
+  static wrap(message) {
+    if (typeof message == "string") {
+      return new this(message);
+    } else {
+      return message;
+    }
+  }
+  get fragment() {
+    const fragment = document.createDocumentFragment();
+    for (const element of this.foreignElements) {
+      fragment.appendChild(document.importNode(element, true));
+    }
+    return fragment;
+  }
+  get foreignElements() {
+    return this.templateChildren.reduce(((streamElements, child) => {
+      if (child.tagName.toLowerCase() == "turbo-stream") {
+        return [ ...streamElements, child ];
+      } else {
+        return streamElements;
+      }
+    }), []);
+  }
+  get templateChildren() {
+    return Array.from(this.templateElement.content.children);
+  }
+}
+
+StreamMessage.contentType = "text/vnd.turbo-stream.html";
+
 var FormSubmissionState;
 
 (function(FormSubmissionState) {
@@ -465,14 +494,35 @@ var FormSubmissionState;
   FormSubmissionState[FormSubmissionState["stopped"] = 5] = "stopped";
 })(FormSubmissionState || (FormSubmissionState = {}));
 
+var FormEnctype;
+
+(function(FormEnctype) {
+  FormEnctype["urlEncoded"] = "application/x-www-form-urlencoded";
+  FormEnctype["multipart"] = "multipart/form-data";
+  FormEnctype["plain"] = "text/plain";
+})(FormEnctype || (FormEnctype = {}));
+
+function formEnctypeFromString(encoding) {
+  switch (encoding.toLowerCase()) {
+   case FormEnctype.multipart:
+    return FormEnctype.multipart;
+
+   case FormEnctype.plain:
+    return FormEnctype.plain;
+
+   default:
+    return FormEnctype.urlEncoded;
+  }
+}
+
 class FormSubmission {
   constructor(delegate, formElement, submitter, mustRedirect = false) {
     this.state = FormSubmissionState.initialized;
     this.delegate = delegate;
     this.formElement = formElement;
-    this.formData = buildFormData(formElement, submitter);
     this.submitter = submitter;
-    this.fetchRequest = new FetchRequest(this, this.method, this.location, this.formData);
+    this.formData = buildFormData(formElement, submitter);
+    this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body);
     this.mustRedirect = mustRedirect;
   }
   get method() {
@@ -485,7 +535,21 @@ class FormSubmission {
     return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.action;
   }
   get location() {
-    return Location.wrap(this.action);
+    return expandURL(this.action);
+  }
+  get body() {
+    if (this.enctype == FormEnctype.urlEncoded || this.method == FetchMethod.get) {
+      return new URLSearchParams(this.stringFormData);
+    } else {
+      return this.formData;
+    }
+  }
+  get enctype() {
+    var _a;
+    return formEnctypeFromString(((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formenctype")) || this.formElement.enctype);
+  }
+  get stringFormData() {
+    return [ ...this.formData ].reduce(((entries, [name, value]) => entries.concat(typeof value == "string" ? [ [ name, value ] ] : [])), []);
   }
   async start() {
     const {initialized: initialized, requesting: requesting} = FormSubmissionState;
@@ -502,15 +566,14 @@ class FormSubmission {
       return true;
     }
   }
-  additionalHeadersForRequest(request) {
-    const headers = {};
-    if (this.method != FetchMethod.get) {
+  prepareHeadersForRequest(headers, request) {
+    if (!request.isIdempotent) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
       if (token) {
         headers["X-CSRF-Token"] = token;
       }
+      headers["Accept"] = [ StreamMessage.contentType, headers["Accept"] ].join(", ");
     }
-    return headers;
   }
   requestStarted(request) {
     this.state = FormSubmissionState.waiting;
@@ -602,6 +665,37 @@ function responseSucceededWithoutRedirect(response) {
   return response.statusCode == 200 && !response.redirected;
 }
 
+class Snapshot {
+  constructor(element) {
+    this.element = element;
+  }
+  get children() {
+    return [ ...this.element.children ];
+  }
+  hasAnchor(anchor) {
+    return this.getElementForAnchor(anchor) != null;
+  }
+  getElementForAnchor(anchor) {
+    try {
+      return this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
+    } catch (_a) {
+      return null;
+    }
+  }
+  get firstAutofocusableElement() {
+    return this.element.querySelector("[autofocus]");
+  }
+  get permanentElements() {
+    return [ ...this.element.querySelectorAll("[id][data-turbo-permanent]") ];
+  }
+  getPermanentElementById(id) {
+    return this.element.querySelector(`#${id}[data-turbo-permanent]`);
+  }
+  getPermanentElementsPresentInSnapshot(snapshot) {
+    return this.permanentElements.filter((({id: id}) => snapshot.getPermanentElementById(id)));
+  }
+}
+
 class FormInterceptor {
   constructor(delegate, element) {
     this.submitBubbled = event => {
@@ -626,6 +720,82 @@ class FormInterceptor {
   }
 }
 
+class View {
+  constructor(delegate, element) {
+    this.delegate = delegate;
+    this.element = element;
+  }
+  scrollToAnchor(anchor) {
+    const element = this.snapshot.getElementForAnchor(anchor);
+    if (element) {
+      this.scrollToElement(element);
+    } else {
+      this.scrollToPosition({
+        x: 0,
+        y: 0
+      });
+    }
+  }
+  scrollToElement(element) {
+    element.scrollIntoView();
+  }
+  scrollToPosition({x: x, y: y}) {
+    this.scrollRoot.scrollTo(x, y);
+  }
+  get scrollRoot() {
+    return window;
+  }
+  async render(renderer) {
+    if (this.renderer) {
+      throw new Error("rendering is already in progress");
+    }
+    const {isPreview: isPreview, shouldRender: shouldRender, newSnapshot: snapshot} = renderer;
+    if (shouldRender) {
+      try {
+        this.renderer = renderer;
+        this.prepareToRenderSnapshot(renderer);
+        this.delegate.viewWillRenderSnapshot(snapshot, isPreview);
+        await this.renderSnapshot(renderer);
+        this.delegate.viewRenderedSnapshot(snapshot, isPreview);
+        this.finishRenderingSnapshot(renderer);
+      } finally {
+        delete this.renderer;
+      }
+    } else {
+      this.invalidate();
+    }
+  }
+  invalidate() {
+    this.delegate.viewInvalidated();
+  }
+  prepareToRenderSnapshot(renderer) {
+    this.markAsPreview(renderer.isPreview);
+    renderer.prepareToRender();
+  }
+  markAsPreview(isPreview) {
+    if (isPreview) {
+      this.element.setAttribute("data-turbo-preview", "");
+    } else {
+      this.element.removeAttribute("data-turbo-preview");
+    }
+  }
+  async renderSnapshot(renderer) {
+    await renderer.render();
+  }
+  finishRenderingSnapshot(renderer) {
+    renderer.finishRendering();
+  }
+}
+
+class FrameView extends View {
+  invalidate() {
+    this.element.innerHTML = "";
+  }
+  get snapshot() {
+    return new Snapshot(this.element);
+  }
+}
+
 class LinkInterceptor {
   constructor(delegate, element) {
     this.clickBubbled = event => {
@@ -667,10 +837,159 @@ class LinkInterceptor {
   }
 }
 
+class Renderer {
+  constructor(currentSnapshot, newSnapshot, isPreview) {
+    this.currentSnapshot = currentSnapshot;
+    this.newSnapshot = newSnapshot;
+    this.isPreview = isPreview;
+    this.promise = new Promise(((resolve, reject) => this.resolvingFunctions = {
+      resolve: resolve,
+      reject: reject
+    }));
+  }
+  get shouldRender() {
+    return true;
+  }
+  prepareToRender() {
+    return;
+  }
+  finishRendering() {
+    if (this.resolvingFunctions) {
+      this.resolvingFunctions.resolve();
+      delete this.resolvingFunctions;
+    }
+  }
+  createScriptElement(element) {
+    if (element.getAttribute("data-turbo-eval") == "false") {
+      return element;
+    } else {
+      const createdScriptElement = document.createElement("script");
+      createdScriptElement.textContent = element.textContent;
+      createdScriptElement.async = false;
+      copyElementAttributes(createdScriptElement, element);
+      return createdScriptElement;
+    }
+  }
+  preservingPermanentElements(callback) {
+    const placeholders = relocatePermanentElements(this.currentSnapshot, this.newSnapshot);
+    callback();
+    replacePlaceholderElementsWithClonedPermanentElements(placeholders);
+  }
+  focusFirstAutofocusableElement() {
+    const element = this.newSnapshot.firstAutofocusableElement;
+    if (elementIsFocusable(element)) {
+      element.focus();
+    }
+  }
+  get currentElement() {
+    return this.currentSnapshot.element;
+  }
+  get newElement() {
+    return this.newSnapshot.element;
+  }
+}
+
+function replaceElementWithElement(fromElement, toElement) {
+  const parentElement = fromElement.parentElement;
+  if (parentElement) {
+    return parentElement.replaceChild(toElement, fromElement);
+  }
+}
+
+function copyElementAttributes(destinationElement, sourceElement) {
+  for (const {name: name, value: value} of [ ...sourceElement.attributes ]) {
+    destinationElement.setAttribute(name, value);
+  }
+}
+
+function createPlaceholderForPermanentElement(permanentElement) {
+  const element = document.createElement("meta");
+  element.setAttribute("name", "turbo-permanent-placeholder");
+  element.setAttribute("content", permanentElement.id);
+  return {
+    element: element,
+    permanentElement: permanentElement
+  };
+}
+
+function replacePlaceholderElementsWithClonedPermanentElements(placeholders) {
+  for (const {element: element, permanentElement: permanentElement} of placeholders) {
+    const clonedElement = permanentElement.cloneNode(true);
+    replaceElementWithElement(element, clonedElement);
+  }
+}
+
+function relocatePermanentElements(currentSnapshot, newSnapshot) {
+  return currentSnapshot.getPermanentElementsPresentInSnapshot(newSnapshot).reduce(((placeholders, permanentElement) => {
+    const newElement = newSnapshot.getPermanentElementById(permanentElement.id);
+    if (newElement) {
+      const placeholder = createPlaceholderForPermanentElement(permanentElement);
+      replaceElementWithElement(permanentElement, placeholder.element);
+      replaceElementWithElement(newElement, permanentElement);
+      return [ ...placeholders, placeholder ];
+    } else {
+      return placeholders;
+    }
+  }), []);
+}
+
+function elementIsFocusable(element) {
+  return element && typeof element.focus == "function";
+}
+
+class FrameRenderer extends Renderer {
+  get shouldRender() {
+    return true;
+  }
+  async render() {
+    await nextAnimationFrame();
+    this.preservingPermanentElements((() => {
+      this.loadFrameElement();
+    }));
+    this.scrollFrameIntoView();
+    await nextAnimationFrame();
+    this.focusFirstAutofocusableElement();
+  }
+  loadFrameElement() {
+    var _a;
+    const destinationRange = document.createRange();
+    destinationRange.selectNodeContents(this.currentElement);
+    destinationRange.deleteContents();
+    const frameElement = this.newElement;
+    const sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
+    if (sourceRange) {
+      sourceRange.selectNodeContents(frameElement);
+      this.currentElement.appendChild(sourceRange.extractContents());
+    }
+  }
+  scrollFrameIntoView() {
+    if (this.currentElement.autoscroll || this.newElement.autoscroll) {
+      const element = this.currentElement.firstElementChild;
+      const block = readScrollLogicalPosition(this.currentElement.getAttribute("data-autoscroll-block"), "end");
+      if (element) {
+        element.scrollIntoView({
+          block: block
+        });
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+function readScrollLogicalPosition(value, defaultValue) {
+  if (value == "end" || value == "start" || value == "center" || value == "nearest") {
+    return value;
+  } else {
+    return defaultValue;
+  }
+}
+
 class FrameController {
   constructor(element) {
     this.resolveVisitPromise = () => {};
     this.element = element;
+    this.view = new FrameView(this, this.element);
     this.appearanceObserver = new AppearanceObserver(this, this.element);
     this.linkInterceptor = new LinkInterceptor(this, this.element);
     this.formInterceptor = new FormInterceptor(this, this.element);
@@ -713,14 +1032,17 @@ class FrameController {
     }
   }
   async loadResponse(response) {
-    const fragment = fragmentFromHTML(await response.responseHTML);
-    if (fragment) {
-      const element = await this.extractForeignFrameElement(fragment);
-      await nextAnimationFrame();
-      this.loadFrameElement(element);
-      this.scrollFrameIntoView(element);
-      await nextAnimationFrame();
-      this.focusFirstAutofocusableElement();
+    try {
+      const html = await response.responseHTML;
+      if (html) {
+        const {body: body} = parseHTMLDocument(html);
+        const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
+        const renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+        await this.view.render(renderer);
+      }
+    } catch (error) {
+      console.error(error);
+      this.view.invalidate();
     }
   }
   elementAppearedInViewport(element) {
@@ -741,15 +1063,13 @@ class FrameController {
     }
     this.formSubmission = new FormSubmission(this, element, submitter);
     if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.navigateFrame(element, this.formSubmission.fetchRequest.url);
+      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
     } else {
       this.formSubmission.start();
     }
   }
-  additionalHeadersForRequest(request) {
-    return {
-      "Turbo-Frame": this.id
-    };
+  prepareHeadersForRequest(headers, request) {
+    headers["Turbo-Frame"] = this.id;
   }
   requestStarted(request) {
     this.element.setAttribute("busy", "");
@@ -782,9 +1102,11 @@ class FrameController {
   }
   formSubmissionErrored(formSubmission, error) {}
   formSubmissionFinished(formSubmission) {}
+  viewWillRenderSnapshot(snapshot, isPreview) {}
+  viewRenderedSnapshot(snapshot, isPreview) {}
+  viewInvalidated() {}
   async visit(url) {
-    const location = Location.wrap(url);
-    const request = new FetchRequest(this, FetchMethod.get, location);
+    const request = new FetchRequest(this, FetchMethod.get, expandURL(url));
     return new Promise((resolve => {
       this.resolveVisitPromise = () => {
         this.resolveVisitPromise = () => {};
@@ -799,7 +1121,7 @@ class FrameController {
   }
   findFrameElement(element) {
     var _a;
-    const id = element.getAttribute("data-turbo-frame");
+    const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
     return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
   }
   async extractForeignFrameElement(container) {
@@ -815,38 +1137,6 @@ class FrameController {
     console.error(`Response has no matching <turbo-frame id="${id}"> element`);
     return new FrameElement;
   }
-  loadFrameElement(frameElement) {
-    var _a;
-    const destinationRange = document.createRange();
-    destinationRange.selectNodeContents(this.element);
-    destinationRange.deleteContents();
-    const sourceRange = (_a = frameElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.createRange();
-    if (sourceRange) {
-      sourceRange.selectNodeContents(frameElement);
-      this.element.appendChild(sourceRange.extractContents());
-    }
-  }
-  focusFirstAutofocusableElement() {
-    const element = this.firstAutofocusableElement;
-    if (element) {
-      element.focus();
-      return true;
-    }
-    return false;
-  }
-  scrollFrameIntoView(frame) {
-    if (this.element.autoscroll || frame.autoscroll) {
-      const element = this.element.firstElementChild;
-      const block = readScrollLogicalPosition(this.element.getAttribute("data-autoscroll-block"), "end");
-      if (element) {
-        element.scrollIntoView({
-          block: block
-        });
-        return true;
-      }
-    }
-    return false;
-  }
   shouldInterceptNavigation(element) {
     const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
     if (!this.enabled || id == "_top") {
@@ -860,10 +1150,6 @@ class FrameController {
     }
     return true;
   }
-  get firstAutofocusableElement() {
-    const element = this.element.querySelector("[autofocus]");
-    return element instanceof HTMLElement ? element : null;
-  }
   get id() {
     return this.element.id;
   }
@@ -893,21 +1179,6 @@ function getFrameElementById(id) {
   }
 }
 
-function readScrollLogicalPosition(value, defaultValue) {
-  if (value == "end" || value == "start" || value == "center" || value == "nearest") {
-    return value;
-  } else {
-    return defaultValue;
-  }
-}
-
-function fragmentFromHTML(html) {
-  if (html) {
-    const foreignDocument = document.implementation.createHTMLDocument();
-    return foreignDocument.createRange().createContextualFragment(html);
-  }
-}
-
 function activateElement(element) {
   if (element && element.ownerDocument !== document) {
     element = document.importNode(element, true);
@@ -1138,9 +1409,10 @@ class ProgressBar {
 
 ProgressBar.animationDuration = 300;
 
-class HeadDetails {
-  constructor(children) {
-    this.detailsByOuterHTML = children.reduce(((result, element) => {
+class HeadSnapshot extends Snapshot {
+  constructor() {
+    super(...arguments);
+    this.detailsByOuterHTML = this.children.reduce(((result, element) => {
       const {outerHTML: outerHTML} = element;
       const details = outerHTML in result ? result[outerHTML] : {
         type: elementType(element),
@@ -1154,23 +1426,19 @@ class HeadDetails {
       });
     }), {});
   }
-  static fromHeadElement(headElement) {
-    const children = headElement ? [ ...headElement.children ] : [];
-    return new this(children);
-  }
-  getTrackedElementSignature() {
+  get trackedElementSignature() {
     return Object.keys(this.detailsByOuterHTML).filter((outerHTML => this.detailsByOuterHTML[outerHTML].tracked)).join("");
   }
-  getScriptElementsNotInDetails(headDetails) {
-    return this.getElementsMatchingTypeNotInDetails("script", headDetails);
+  getScriptElementsNotInSnapshot(snapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot("script", snapshot);
   }
-  getStylesheetElementsNotInDetails(headDetails) {
-    return this.getElementsMatchingTypeNotInDetails("stylesheet", headDetails);
+  getStylesheetElementsNotInSnapshot(snapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot);
   }
-  getElementsMatchingTypeNotInDetails(matchedType, headDetails) {
-    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => !(outerHTML in headDetails.detailsByOuterHTML))).map((outerHTML => this.detailsByOuterHTML[outerHTML])).filter((({type: type}) => type == matchedType)).map((({elements: [element]}) => element));
+  getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
+    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => !(outerHTML in snapshot.detailsByOuterHTML))).map((outerHTML => this.detailsByOuterHTML[outerHTML])).filter((({type: type}) => type == matchedType)).map((({elements: [element]}) => element));
   }
-  getProvisionalElements() {
+  get provisionalElements() {
     return Object.keys(this.detailsByOuterHTML).reduce(((result, outerHTML) => {
       const {type: type, tracked: tracked, elements: elements} = this.detailsByOuterHTML[outerHTML];
       if (type == null && !tracked) {
@@ -1221,75 +1489,45 @@ function elementIsMetaElementWithName(element, name) {
   return tagName == "meta" && element.getAttribute("name") == name;
 }
 
-class Snapshot {
-  constructor(headDetails, bodyElement) {
-    this.headDetails = headDetails;
-    this.bodyElement = bodyElement;
-  }
-  static wrap(value) {
-    if (value instanceof this) {
-      return value;
-    } else if (typeof value == "string") {
-      return this.fromHTMLString(value);
-    } else {
-      return this.fromHTMLElement(value);
-    }
-  }
-  static fromHTMLString(html) {
-    const {documentElement: documentElement} = (new DOMParser).parseFromString(html, "text/html");
-    return this.fromHTMLElement(documentElement);
-  }
-  static fromHTMLElement(htmlElement) {
-    const headElement = htmlElement.querySelector("head");
-    const bodyElement = htmlElement.querySelector("body") || document.createElement("body");
-    const headDetails = HeadDetails.fromHeadElement(headElement);
-    return new this(headDetails, bodyElement);
-  }
-  clone() {
-    const {bodyElement: bodyElement} = Snapshot.fromHTMLString(this.bodyElement.outerHTML);
-    return new Snapshot(this.headDetails, bodyElement);
-  }
-  getRootLocation() {
-    const root = this.getSetting("root", "/");
-    return new Location(root);
+class PageSnapshot extends Snapshot {
+  constructor(element, headSnapshot) {
+    super(element);
+    this.headSnapshot = headSnapshot;
   }
-  getCacheControlValue() {
-    return this.getSetting("cache-control");
+  static fromHTMLString(html = "") {
+    return this.fromDocument(parseHTMLDocument(html));
   }
-  getElementForAnchor(anchor) {
-    try {
-      return this.bodyElement.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
-    } catch (_a) {
-      return null;
-    }
+  static fromElement(element) {
+    return this.fromDocument(element.ownerDocument);
   }
-  getPermanentElements() {
-    return [ ...this.bodyElement.querySelectorAll("[id][data-turbo-permanent]") ];
+  static fromDocument({head: head, body: body}) {
+    return new this(body, new HeadSnapshot(head));
   }
-  getPermanentElementById(id) {
-    return this.bodyElement.querySelector(`#${id}[data-turbo-permanent]`);
+  clone() {
+    return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
   }
-  getPermanentElementsPresentInSnapshot(snapshot) {
-    return this.getPermanentElements().filter((({id: id}) => snapshot.getPermanentElementById(id)));
+  get headElement() {
+    return this.headSnapshot.element;
   }
-  findFirstAutofocusableElement() {
-    return this.bodyElement.querySelector("[autofocus]");
+  get rootLocation() {
+    var _a;
+    const root = (_a = this.getSetting("root")) !== null && _a !== void 0 ? _a : "/";
+    return expandURL(root);
   }
-  hasAnchor(anchor) {
-    return this.getElementForAnchor(anchor) != null;
+  get cacheControlValue() {
+    return this.getSetting("cache-control");
   }
-  isPreviewable() {
-    return this.getCacheControlValue() != "no-preview";
+  get isPreviewable() {
+    return this.cacheControlValue != "no-preview";
   }
-  isCacheable() {
-    return this.getCacheControlValue() != "no-cache";
+  get isCacheable() {
+    return this.cacheControlValue != "no-cache";
   }
-  isVisitable() {
+  get isVisitable() {
     return this.getSetting("visit-control") != "reload";
   }
-  getSetting(name, defaultValue) {
-    const value = this.headDetails.getMetaValue(`turbo-${name}`);
-    return value == null ? defaultValue : value;
+  getSetting(name) {
+    return this.headSnapshot.getMetaValue(`turbo-${name}`);
   }
 }
 
@@ -1334,16 +1572,6 @@ class Visit {
     this.scrolled = false;
     this.snapshotCached = false;
     this.state = VisitState.initialized;
-    this.performScroll = () => {
-      if (!this.scrolled) {
-        if (this.action == "restore") {
-          this.scrollToRestoredPosition() || this.scrollToTop();
-        } else {
-          this.scrollToAnchor() || this.scrollToTop();
-        }
-        this.scrolled = true;
-      }
-    };
     this.delegate = delegate;
     this.location = location;
     this.restorationIdentifier = restorationIdentifier || uuid();
@@ -1398,8 +1626,9 @@ class Visit {
     }
   }
   changeHistory() {
+    var _a;
     if (!this.historyChanged) {
-      const actionForHistory = this.location.isEqualTo(this.referrer) ? "replace" : this.action;
+      const actionForHistory = this.location.href === ((_a = this.referrer) === null || _a === void 0 ? void 0 : _a.href) ? "replace" : this.action;
       const method = this.getHistoryMethodForAction(actionForHistory);
       this.history.update(method, this.location, this.restorationIdentifier);
       this.historyChanged = true;
@@ -1442,18 +1671,14 @@ class Visit {
   loadResponse() {
     if (this.response) {
       const {statusCode: statusCode, responseHTML: responseHTML} = this.response;
-      this.render((() => {
+      this.render((async () => {
         this.cacheSnapshot();
         if (isSuccessful(statusCode) && responseHTML != null) {
-          this.view.render({
-            snapshot: Snapshot.fromHTMLString(responseHTML)
-          }, this.performScroll);
+          await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML));
           this.adapter.visitRendered(this);
           this.complete();
         } else {
-          this.view.render({
-            error: responseHTML
-          }, this.performScroll);
+          await this.view.renderError(PageSnapshot.fromHTMLString(responseHTML));
           this.adapter.visitRendered(this);
           this.fail();
         }
@@ -1462,15 +1687,15 @@ class Visit {
   }
   getCachedSnapshot() {
     const snapshot = this.view.getCachedSnapshotForLocation(this.location) || this.getPreloadedSnapshot();
-    if (snapshot && (!this.location.anchor || snapshot.hasAnchor(this.location.anchor))) {
-      if (this.action == "restore" || snapshot.isPreviewable()) {
+    if (snapshot && (!getAnchor(this.location) || snapshot.hasAnchor(getAnchor(this.location)))) {
+      if (this.action == "restore" || snapshot.isPreviewable) {
         return snapshot;
       }
     }
   }
   getPreloadedSnapshot() {
     if (this.snapshotHTML) {
-      return Snapshot.wrap(this.snapshotHTML);
+      return PageSnapshot.fromHTMLString(this.snapshotHTML);
     }
   }
   hasCachedSnapshot() {
@@ -1480,12 +1705,9 @@ class Visit {
     const snapshot = this.getCachedSnapshot();
     if (snapshot) {
       const isPreview = this.shouldIssueRequest();
-      this.render((() => {
+      this.render((async () => {
         this.cacheSnapshot();
-        this.view.render({
-          snapshot: snapshot,
-          isPreview: isPreview
-        }, this.performScroll);
+        await this.view.renderPage(snapshot);
         this.adapter.visitRendered(this);
         if (!isPreview) {
           this.complete();
@@ -1539,6 +1761,16 @@ class Visit {
   requestFinished() {
     this.finishRequest();
   }
+  performScroll() {
+    if (!this.scrolled) {
+      if (this.action == "restore") {
+        this.scrollToRestoredPosition() || this.scrollToTop();
+      } else {
+        this.scrollToAnchor() || this.scrollToTop();
+      }
+      this.scrolled = true;
+    }
+  }
   scrollToRestoredPosition() {
     const {scrollPosition: scrollPosition} = this.restorationData;
     if (scrollPosition) {
@@ -1547,8 +1779,8 @@ class Visit {
     }
   }
   scrollToAnchor() {
-    if (this.location.anchor != null) {
-      this.view.scrollToAnchor(this.location.anchor);
+    if (getAnchor(this.location) != null) {
+      this.view.scrollToAnchor(getAnchor(this.location));
       return true;
     }
   }
@@ -1586,12 +1818,14 @@ class Visit {
       this.snapshotCached = true;
     }
   }
-  render(callback) {
+  async render(callback) {
     this.cancelRender();
-    this.frame = requestAnimationFrame((() => {
-      delete this.frame;
-      callback.call(this);
+    await new Promise((resolve => {
+      this.frame = requestAnimationFrame((() => resolve()));
     }));
+    callback();
+    delete this.frame;
+    this.performScroll();
   }
   cancelRender() {
     if (this.frame) {
@@ -1766,11 +2000,10 @@ class History {
       if (this.shouldHandlePopState()) {
         const {turbo: turbo} = event.state || {};
         if (turbo) {
-          const location = Location.currentLocation;
-          this.location = location;
+          this.location = new URL(window.location.href);
           const {restorationIdentifier: restorationIdentifier} = turbo;
           this.restorationIdentifier = restorationIdentifier;
-          this.delegate.historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier);
+          this.delegate.historyPoppedToLocationWithRestorationIdentifier(this.location, restorationIdentifier);
         }
       }
     };
@@ -1785,7 +2018,7 @@ class History {
       addEventListener("popstate", this.onPopState, false);
       addEventListener("load", this.onPageLoad, false);
       this.started = true;
-      this.replace(Location.currentLocation);
+      this.replace(new URL(window.location.href));
     }
   }
   stop() {
@@ -1807,7 +2040,7 @@ class History {
         restorationIdentifier: restorationIdentifier
       }
     };
-    method.call(history, state, "", location.absoluteURL);
+    method.call(history, state, "", location.href);
     this.location = location;
     this.restorationIdentifier = restorationIdentifier;
   }
@@ -1882,7 +2115,7 @@ class LinkClickObserver {
     }
   }
   getLocationForLink(link) {
-    return new Location(link.getAttribute("href") || "");
+    return expandURL(link.getAttribute("href") || "");
   }
 }
 
@@ -1895,9 +2128,9 @@ class Navigator {
       this.delegate.visitProposedToLocation(location, options);
     }
   }
-  startVisit(location, restorationIdentifier, options = {}) {
+  startVisit(locatable, restorationIdentifier, options = {}) {
     this.stop();
-    this.currentVisit = new Visit(this, Location.wrap(location), restorationIdentifier, Object.assign({
+    this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, Object.assign({
       referrer: this.location
     }, options));
     this.currentVisit.start();
@@ -1905,7 +2138,11 @@ class Navigator {
   submitForm(form, submitter) {
     this.stop();
     this.formSubmission = new FormSubmission(this, form, submitter, true);
-    this.formSubmission.start();
+    if (this.formSubmission.fetchRequest.isIdempotent) {
+      this.proposeVisit(this.formSubmission.fetchRequest.url);
+    } else {
+      this.formSubmission.start();
+    }
   }
   stop() {
     if (this.formSubmission) {
@@ -1948,10 +2185,8 @@ class Navigator {
   async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
     const responseHTML = await fetchResponse.responseHTML;
     if (responseHTML) {
-      const snapshot = Snapshot.fromHTMLString(responseHTML);
-      this.view.render({
-        snapshot: snapshot
-      }, (() => {}));
+      const snapshot = PageSnapshot.fromHTMLString(responseHTML);
+      await this.view.renderPage(snapshot);
       this.view.clearSnapshotCache();
     }
   }
@@ -2061,51 +2296,10 @@ class ScrollObserver {
   }
 }
 
-class StreamMessage {
-  constructor(html) {
-    this.templateElement = document.createElement("template");
-    this.templateElement.innerHTML = html;
-  }
-  static wrap(message) {
-    if (typeof message == "string") {
-      return new this(message);
-    } else {
-      return message;
-    }
-  }
-  get fragment() {
-    const fragment = document.createDocumentFragment();
-    for (const element of this.foreignElements) {
-      fragment.appendChild(document.importNode(element, true));
-    }
-    return fragment;
-  }
-  get foreignElements() {
-    return this.templateChildren.reduce(((streamElements, child) => {
-      if (child.tagName.toLowerCase() == "turbo-stream") {
-        return [ ...streamElements, child ];
-      } else {
-        return streamElements;
-      }
-    }), []);
-  }
-  get templateChildren() {
-    return Array.from(this.templateElement.content.children);
-  }
-}
-
 class StreamObserver {
   constructor(delegate) {
     this.sources = new Set;
     this.started = false;
-    this.prepareFetchRequest = event => {
-      var _a;
-      const fetchOptions = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.fetchOptions;
-      if (fetchOptions) {
-        const {headers: headers} = fetchOptions;
-        headers.Accept = [ "text/vnd.turbo-stream.html", headers.Accept ].join(", ");
-      }
-    };
     this.inspectFetchResponse = event => {
       const response = fetchResponseFromEvent(event);
       if (response && fetchResponseIsStream(response)) {
@@ -2123,14 +2317,12 @@ class StreamObserver {
   start() {
     if (!this.started) {
       this.started = true;
-      addEventListener("turbo:before-fetch-request", this.prepareFetchRequest, true);
       addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
   }
   stop() {
     if (this.started) {
       this.started = false;
-      removeEventListener("turbo:before-fetch-request", this.prepareFetchRequest, true);
       removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
   }
@@ -2171,70 +2363,25 @@ function fetchResponseFromEvent(event) {
 function fetchResponseIsStream(response) {
   var _a;
   const contentType = (_a = response.contentType) !== null && _a !== void 0 ? _a : "";
-  return /^text\/vnd\.turbo-stream\.html\b/.test(contentType);
+  return contentType.startsWith(StreamMessage.contentType);
 }
 
 function isAction(action) {
   return action == "advance" || action == "replace" || action == "restore";
 }
 
-class Renderer {
-  renderView(callback) {
-    this.delegate.viewWillRender(this.newBody);
-    callback();
-    this.delegate.viewRendered(this.newBody);
-  }
-  invalidateView() {
-    this.delegate.viewInvalidated();
-  }
-  createScriptElement(element) {
-    if (element.getAttribute("data-turbo-eval") == "false") {
-      return element;
-    } else {
-      const createdScriptElement = document.createElement("script");
-      createdScriptElement.textContent = element.textContent;
-      createdScriptElement.async = false;
-      copyElementAttributes(createdScriptElement, element);
-      return createdScriptElement;
-    }
-  }
-}
-
-function copyElementAttributes(destinationElement, sourceElement) {
-  for (const {name: name, value: value} of [ ...sourceElement.attributes ]) {
-    destinationElement.setAttribute(name, value);
-  }
-}
-
 class ErrorRenderer extends Renderer {
-  constructor(delegate, html) {
-    super();
-    this.delegate = delegate;
-    this.htmlElement = (() => {
-      const htmlElement = document.createElement("html");
-      htmlElement.innerHTML = html;
-      return htmlElement;
-    })();
-    this.newHead = this.htmlElement.querySelector("head") || document.createElement("head");
-    this.newBody = this.htmlElement.querySelector("body") || document.createElement("body");
-  }
-  static render(delegate, callback, html) {
-    return new this(delegate, html).render(callback);
-  }
-  render(callback) {
-    this.renderView((() => {
-      this.replaceHeadAndBody();
-      this.activateBodyScriptElements();
-      callback();
-    }));
+  async render() {
+    this.replaceHeadAndBody();
+    this.activateScriptElements();
   }
   replaceHeadAndBody() {
     const {documentElement: documentElement, head: head, body: body} = document;
     documentElement.replaceChild(this.newHead, head);
-    documentElement.replaceChild(this.newBody, body);
+    documentElement.replaceChild(this.newElement, body);
   }
-  activateBodyScriptElements() {
-    for (const replaceableElement of this.getScriptElements()) {
+  activateScriptElements() {
+    for (const replaceableElement of this.scriptElements) {
       const parentNode = replaceableElement.parentNode;
       if (parentNode) {
         const element = this.createScriptElement(replaceableElement);
@@ -2242,82 +2389,38 @@ class ErrorRenderer extends Renderer {
       }
     }
   }
-  getScriptElements() {
+  get newHead() {
+    return this.newSnapshot.headSnapshot.element;
+  }
+  get scriptElements() {
     return [ ...document.documentElement.querySelectorAll("script") ];
   }
 }
 
-class SnapshotCache {
-  constructor(size) {
-    this.keys = [];
-    this.snapshots = {};
-    this.size = size;
-  }
-  has(location) {
-    return location.toCacheKey() in this.snapshots;
-  }
-  get(location) {
-    if (this.has(location)) {
-      const snapshot = this.read(location);
-      this.touch(location);
-      return snapshot;
-    }
-  }
-  put(location, snapshot) {
-    this.write(location, snapshot);
-    this.touch(location);
-    return snapshot;
-  }
-  clear() {
-    this.snapshots = {};
-  }
-  read(location) {
-    return this.snapshots[location.toCacheKey()];
+class PageRenderer extends Renderer {
+  get shouldRender() {
+    return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
   }
-  write(location, snapshot) {
-    this.snapshots[location.toCacheKey()] = snapshot;
+  prepareToRender() {
+    this.mergeHead();
   }
-  touch(location) {
-    const key = location.toCacheKey();
-    const index = this.keys.indexOf(key);
-    if (index > -1) this.keys.splice(index, 1);
-    this.keys.unshift(key);
-    this.trim();
+  async render() {
+    this.replaceBody();
   }
-  trim() {
-    for (const key of this.keys.splice(this.size)) {
-      delete this.snapshots[key];
+  finishRendering() {
+    super.finishRendering();
+    if (this.isPreview) {
+      this.focusFirstAutofocusableElement();
     }
   }
-}
-
-class SnapshotRenderer extends Renderer {
-  constructor(delegate, currentSnapshot, newSnapshot, isPreview) {
-    super();
-    this.delegate = delegate;
-    this.currentSnapshot = currentSnapshot;
-    this.currentHeadDetails = currentSnapshot.headDetails;
-    this.newSnapshot = newSnapshot;
-    this.newHeadDetails = newSnapshot.headDetails;
-    this.newBody = newSnapshot.bodyElement;
-    this.isPreview = isPreview;
+  get currentHeadSnapshot() {
+    return this.currentSnapshot.headSnapshot;
   }
-  static render(delegate, callback, currentSnapshot, newSnapshot, isPreview) {
-    return new this(delegate, currentSnapshot, newSnapshot, isPreview).render(callback);
+  get newHeadSnapshot() {
+    return this.newSnapshot.headSnapshot;
   }
-  render(callback) {
-    if (this.shouldRender()) {
-      this.mergeHead();
-      this.renderView((() => {
-        this.replaceBody();
-        if (!this.isPreview) {
-          this.focusFirstAutofocusableElement();
-        }
-        callback();
-      }));
-    } else {
-      this.invalidateView();
-    }
+  get newElement() {
+    return this.newSnapshot.element;
   }
   mergeHead() {
     this.copyNewHeadStylesheetElements();
@@ -2326,190 +2429,145 @@ class SnapshotRenderer extends Renderer {
     this.copyNewHeadProvisionalElements();
   }
   replaceBody() {
-    const placeholders = this.relocateCurrentBodyPermanentElements();
-    this.activateNewBody();
-    this.assignNewBody();
-    this.replacePlaceholderElementsWithClonedPermanentElements(placeholders);
-  }
-  shouldRender() {
-    return this.newSnapshot.isVisitable() && this.trackedElementsAreIdentical();
+    this.preservingPermanentElements((() => {
+      this.activateNewBody();
+      this.assignNewBody();
+    }));
   }
-  trackedElementsAreIdentical() {
-    return this.currentHeadDetails.getTrackedElementSignature() == this.newHeadDetails.getTrackedElementSignature();
+  get trackedElementsAreIdentical() {
+    return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
   }
   copyNewHeadStylesheetElements() {
-    for (const element of this.getNewHeadStylesheetElements()) {
+    for (const element of this.newHeadStylesheetElements) {
       document.head.appendChild(element);
     }
   }
   copyNewHeadScriptElements() {
-    for (const element of this.getNewHeadScriptElements()) {
+    for (const element of this.newHeadScriptElements) {
       document.head.appendChild(this.createScriptElement(element));
     }
   }
   removeCurrentHeadProvisionalElements() {
-    for (const element of this.getCurrentHeadProvisionalElements()) {
+    for (const element of this.currentHeadProvisionalElements) {
       document.head.removeChild(element);
     }
   }
   copyNewHeadProvisionalElements() {
-    for (const element of this.getNewHeadProvisionalElements()) {
+    for (const element of this.newHeadProvisionalElements) {
       document.head.appendChild(element);
     }
   }
-  relocateCurrentBodyPermanentElements() {
-    return this.getCurrentBodyPermanentElements().reduce(((placeholders, permanentElement) => {
-      const newElement = this.newSnapshot.getPermanentElementById(permanentElement.id);
-      if (newElement) {
-        const placeholder = createPlaceholderForPermanentElement(permanentElement);
-        replaceElementWithElement(permanentElement, placeholder.element);
-        replaceElementWithElement(newElement, permanentElement);
-        return [ ...placeholders, placeholder ];
-      } else {
-        return placeholders;
-      }
-    }), []);
-  }
-  replacePlaceholderElementsWithClonedPermanentElements(placeholders) {
-    for (const {element: element, permanentElement: permanentElement} of placeholders) {
-      const clonedElement = permanentElement.cloneNode(true);
-      replaceElementWithElement(element, clonedElement);
-    }
-  }
   activateNewBody() {
-    document.adoptNode(this.newBody);
+    document.adoptNode(this.newElement);
     this.activateNewBodyScriptElements();
   }
   activateNewBodyScriptElements() {
-    for (const inertScriptElement of this.getNewBodyScriptElements()) {
+    for (const inertScriptElement of this.newBodyScriptElements) {
       const activatedScriptElement = this.createScriptElement(inertScriptElement);
       replaceElementWithElement(inertScriptElement, activatedScriptElement);
     }
   }
   assignNewBody() {
-    if (document.body) {
-      replaceElementWithElement(document.body, this.newBody);
+    if (document.body && this.newElement instanceof HTMLBodyElement) {
+      replaceElementWithElement(document.body, this.newElement);
     } else {
-      document.documentElement.appendChild(this.newBody);
-    }
-  }
-  focusFirstAutofocusableElement() {
-    const element = this.newSnapshot.findFirstAutofocusableElement();
-    if (elementIsFocusable(element)) {
-      element.focus();
+      document.documentElement.appendChild(this.newElement);
     }
   }
-  getNewHeadStylesheetElements() {
-    return this.newHeadDetails.getStylesheetElementsNotInDetails(this.currentHeadDetails);
+  get newHeadStylesheetElements() {
+    return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
   }
-  getNewHeadScriptElements() {
-    return this.newHeadDetails.getScriptElementsNotInDetails(this.currentHeadDetails);
+  get newHeadScriptElements() {
+    return this.newHeadSnapshot.getScriptElementsNotInSnapshot(this.currentHeadSnapshot);
   }
-  getCurrentHeadProvisionalElements() {
-    return this.currentHeadDetails.getProvisionalElements();
+  get currentHeadProvisionalElements() {
+    return this.currentHeadSnapshot.provisionalElements;
   }
-  getNewHeadProvisionalElements() {
-    return this.newHeadDetails.getProvisionalElements();
+  get newHeadProvisionalElements() {
+    return this.newHeadSnapshot.provisionalElements;
   }
-  getCurrentBodyPermanentElements() {
-    return this.currentSnapshot.getPermanentElementsPresentInSnapshot(this.newSnapshot);
+  get newBodyScriptElements() {
+    return [ ...this.newElement.querySelectorAll("script") ];
   }
-  getNewBodyScriptElements() {
-    return [ ...this.newBody.querySelectorAll("script") ];
-  }
-}
-
-function createPlaceholderForPermanentElement(permanentElement) {
-  const element = document.createElement("meta");
-  element.setAttribute("name", "turbo-permanent-placeholder");
-  element.setAttribute("content", permanentElement.id);
-  return {
-    element: element,
-    permanentElement: permanentElement
-  };
 }
 
-function replaceElementWithElement(fromElement, toElement) {
-  const parentElement = fromElement.parentElement;
-  if (parentElement) {
-    return parentElement.replaceChild(toElement, fromElement);
+class SnapshotCache {
+  constructor(size) {
+    this.keys = [];
+    this.snapshots = {};
+    this.size = size;
+  }
+  has(location) {
+    return toCacheKey(location) in this.snapshots;
+  }
+  get(location) {
+    if (this.has(location)) {
+      const snapshot = this.read(location);
+      this.touch(location);
+      return snapshot;
+    }
+  }
+  put(location, snapshot) {
+    this.write(location, snapshot);
+    this.touch(location);
+    return snapshot;
+  }
+  clear() {
+    this.snapshots = {};
+  }
+  read(location) {
+    return this.snapshots[toCacheKey(location)];
+  }
+  write(location, snapshot) {
+    this.snapshots[toCacheKey(location)] = snapshot;
+  }
+  touch(location) {
+    const key = toCacheKey(location);
+    const index = this.keys.indexOf(key);
+    if (index > -1) this.keys.splice(index, 1);
+    this.keys.unshift(key);
+    this.trim();
+  }
+  trim() {
+    for (const key of this.keys.splice(this.size)) {
+      delete this.snapshots[key];
+    }
   }
 }
 
-function elementIsFocusable(element) {
-  return element && typeof element.focus == "function";
-}
-
-class View {
-  constructor(delegate) {
-    this.htmlElement = document.documentElement;
+class PageView extends View {
+  constructor() {
+    super(...arguments);
     this.snapshotCache = new SnapshotCache(10);
-    this.delegate = delegate;
+    this.lastRenderedLocation = new URL(location.href);
   }
-  getRootLocation() {
-    return this.getSnapshot().getRootLocation();
-  }
-  getElementForAnchor(anchor) {
-    return this.getSnapshot().getElementForAnchor(anchor);
+  renderPage(snapshot, isPreview = false) {
+    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
+    return this.render(renderer);
   }
-  getSnapshot() {
-    return Snapshot.fromHTMLElement(this.htmlElement);
+  renderError(snapshot) {
+    const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
+    this.render(renderer);
   }
   clearSnapshotCache() {
     this.snapshotCache.clear();
   }
-  shouldCacheSnapshot() {
-    return this.getSnapshot().isCacheable();
-  }
   async cacheSnapshot() {
-    if (this.shouldCacheSnapshot()) {
+    if (this.shouldCacheSnapshot) {
       this.delegate.viewWillCacheSnapshot();
-      const snapshot = this.getSnapshot();
-      const location = this.lastRenderedLocation || Location.currentLocation;
-      await nextMicrotask();
+      const {snapshot: snapshot, lastRenderedLocation: location} = this;
+      await nextEventLoopTick();
       this.snapshotCache.put(location, snapshot.clone());
     }
   }
   getCachedSnapshotForLocation(location) {
     return this.snapshotCache.get(location);
   }
-  render({snapshot: snapshot, error: error, isPreview: isPreview}, callback) {
-    this.markAsPreview(isPreview);
-    if (snapshot) {
-      this.renderSnapshot(snapshot, isPreview, callback);
-    } else {
-      this.renderError(error, callback);
-    }
-  }
-  scrollToAnchor(anchor) {
-    const element = this.getElementForAnchor(anchor);
-    if (element) {
-      this.scrollToElement(element);
-    } else {
-      this.scrollToPosition({
-        x: 0,
-        y: 0
-      });
-    }
-  }
-  scrollToElement(element) {
-    element.scrollIntoView();
-  }
-  scrollToPosition({x: x, y: y}) {
-    window.scrollTo(x, y);
-  }
-  markAsPreview(isPreview) {
-    if (isPreview) {
-      this.htmlElement.setAttribute("data-turbo-preview", "");
-    } else {
-      this.htmlElement.removeAttribute("data-turbo-preview");
-    }
-  }
-  renderSnapshot(snapshot, isPreview, callback) {
-    SnapshotRenderer.render(this.delegate, callback, this.getSnapshot(), snapshot, isPreview || false);
+  get snapshot() {
+    return PageSnapshot.fromElement(this.element);
   }
-  renderError(error, callback) {
-    ErrorRenderer.render(this.delegate, callback, error || "");
+  get shouldCacheSnapshot() {
+    return this.snapshot.isCacheable;
   }
 }
 
@@ -2517,7 +2575,7 @@ class Session {
   constructor() {
     this.navigator = new Navigator(this);
     this.history = new History(this);
-    this.view = new View(this);
+    this.view = new PageView(this, document.documentElement);
     this.adapter = new BrowserAdapter(this);
     this.pageObserver = new PageObserver(this);
     this.linkClickObserver = new LinkClickObserver(this);
@@ -2561,7 +2619,7 @@ class Session {
     this.adapter = adapter;
   }
   visit(location, options = {}) {
-    this.navigator.proposeVisit(Location.wrap(location), options);
+    this.navigator.proposeVisit(expandURL(location), options);
   }
   connectStreamSource(source) {
     this.streamObserver.connectStreamSource(source);
@@ -2604,7 +2662,7 @@ class Session {
   }
   followedLinkToLocation(link, location) {
     const action = this.getActionForLink(link);
-    this.visit(location, {
+    this.visit(location.href, {
       action: action
     });
   }
@@ -2612,9 +2670,11 @@ class Session {
     return this.applicationAllowsVisitingLocation(location);
   }
   visitProposedToLocation(location, options) {
+    extendURLWithDeprecatedProperties(location);
     this.adapter.visitProposedToLocation(location, options);
   }
   visitStarted(visit) {
+    extendURLWithDeprecatedProperties(visit.location);
     this.notifyApplicationAfterVisitingLocation(visit.location);
   }
   visitCompleted(visit) {
@@ -2639,19 +2699,19 @@ class Session {
   receivedMessageFromStream(message) {
     this.renderStreamMessage(message);
   }
-  viewWillRender(newBody) {
-    this.notifyApplicationBeforeRender(newBody);
+  viewWillCacheSnapshot() {
+    this.notifyApplicationBeforeCachingSnapshot();
+  }
+  viewWillRenderSnapshot({element: element}, isPreview) {
+    this.notifyApplicationBeforeRender(element);
   }
-  viewRendered() {
+  viewRenderedSnapshot(snapshot, isPreview) {
     this.view.lastRenderedLocation = this.history.location;
     this.notifyApplicationAfterRender();
   }
   viewInvalidated() {
     this.adapter.pageInvalidated();
   }
-  viewWillCacheSnapshot() {
-    this.notifyApplicationBeforeCachingSnapshot();
-  }
   applicationAllowsFollowingLinkToLocation(link, location) {
     const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
     return !event.defaultPrevented;
@@ -2664,7 +2724,7 @@ class Session {
     return dispatch("turbo:click", {
       target: link,
       detail: {
-        url: location.absoluteURL
+        url: location.href
       },
       cancelable: true
     });
@@ -2672,7 +2732,7 @@ class Session {
   notifyApplicationBeforeVisitingLocation(location) {
     return dispatch("turbo:before-visit", {
       detail: {
-        url: location.absoluteURL
+        url: location.href
       },
       cancelable: true
     });
@@ -2680,7 +2740,7 @@ class Session {
   notifyApplicationAfterVisitingLocation(location) {
     return dispatch("turbo:visit", {
       detail: {
-        url: location.absoluteURL
+        url: location.href
       }
     });
   }
@@ -2700,7 +2760,7 @@ class Session {
   notifyApplicationAfterPageLoad(timing = {}) {
     return dispatch("turbo:load", {
       detail: {
-        url: this.location.absoluteURL,
+        url: this.location.href,
         timing: timing
       }
     });
@@ -2718,10 +2778,25 @@ class Session {
     }
   }
   locationIsVisitable(location) {
-    return location.isPrefixedBy(this.view.getRootLocation()) && location.isHTML();
+    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
   }
+  get snapshot() {
+    return this.view.snapshot;
+  }
+}
+
+function extendURLWithDeprecatedProperties(url) {
+  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
 }
 
+const deprecatedLocationPropertyDescriptors = {
+  absoluteURL: {
+    get() {
+      return this.toString();
+    }
+  }
+};
+
 const session = new Session;
 
 const {navigator: navigator} = session;