turbo-rails 0.5.5 → 0.5.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 94c9c9d12f7b7318bb4e2eede2cb11e8c7f8ca2eb623d21d7c71c27005422f7a
-  data.tar.gz: e2df4c5dc7d36d4c960dfeff36318e1ed36f0b94e386ce151bda33ecf8826131
+  metadata.gz: 1abdc38a6d5a735bf6bbd2ff6fb8db49ea74d14e3452afa5c2bda93b23ffb073
+  data.tar.gz: 0bf468488fd8232fec62b975fb9f0ef5449325cf57b932858e03af876d0548e6
 SHA512:
-  metadata.gz: 40dac08e7447ab44a6d6924d60e8bc8c6d5fff7f88bc8f7ba00c54f957b9559e0d0202cb5ece9165fa571c81b9edd49cd83afc0d75f274c16fb44b193ade9578
-  data.tar.gz: bf61cb90835e8aee3aca8c13728a91b488dae4cb903f3bede52f5991279c3587f9c3dd1eee8b04b450721d65f37d9687e69ad07a690a28d0e5d412932095ccbd
+  metadata.gz: 79272181e9d15ab14434ba684ac33a2fa186df4fa15462d2ad96a77caaeb8caaf111beebd9bf70f67b7fee3eae0e35c5af5f6e86a4e2c970f07c7b1c58e983bf
+  data.tar.gz: ed1f850a041f5d66ae7bafa8264ac3ee5679db81eb5f91869e4e8624ef0cfadb92f345e9f1de192ee917a568deb866e1231db248820ecdb0afcafc96f8296dc4

data/Rakefile

@@ -2,6 +2,10 @@ require "bundler/setup"
 require "bundler/gem_tasks"
 require "rake/testtask"
 
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+load "rails/tasks/statistics.rake"
+
 Rake::TestTask.new do |test|
   test.libs << "test"
   test.test_files = FileList["test/**/*_test.rb"]

data/app/assets/javascripts/turbo.js

@@ -55,7 +55,7 @@ class FrameElement extends HTMLElement {
     this.delegate = new FrameElement.delegateConstructor(this);
   }
   static get observedAttributes() {
-    return [ "loading", "src" ];
+    return [ "disabled", "loading", "src" ];
   }
   connectedCallback() {
     this.delegate.connect();
@@ -68,6 +68,8 @@ class FrameElement extends HTMLElement {
       this.delegate.loadingStyleChanged();
     } else if (name == "src") {
       this.delegate.sourceURLChanged();
+    } else {
+      this.delegate.disabledChanged();
     }
   }
   get src() {
@@ -132,82 +134,61 @@ 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) {
+  return new URL(locatable.toString(), document.baseURI);
+}
+
+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 urlsAreEqual(left, right) {
+  return expandURL(left).href == expandURL(right).href;
+}
+
+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 +211,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 +251,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 +323,23 @@ function fetchMethodFromString(method) {
 }
 
 class FetchRequest {
-  constructor(delegate, method, location, body) {
+  constructor(delegate, method, location, body = new URLSearchParams) {
     this.abortController = new AbortController;
     this.delegate = delegate;
     this.method = method;
-    this.location = location;
-    this.body = body;
-  }
-  get url() {
-    const url = this.location.absoluteURL;
-    const query = this.params.toString();
-    if (this.isIdempotent && query.length) {
-      return [ url, query ].join(url.includes("?") ? "&" : "?");
+    this.headers = this.defaultHeaders;
+    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()) : [];
@@ -363,7 +348,9 @@ class FetchRequest {
     this.abortController.abort();
   }
   async perform() {
+    var _a, _b;
     const {fetchOptions: fetchOptions} = this;
+    (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
     dispatch("turbo:before-fetch-request", {
       detail: {
         fetchOptions: fetchOptions
@@ -371,7 +358,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,28 +390,35 @@ class FetchRequest {
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
-      body: this.isIdempotent ? undefined : this.body,
+      body: this.body,
       signal: this.abortSignal
     };
   }
+  get defaultHeaders() {
+    return {
+      Accept: "text/html, application/xhtml+xml"
+    };
+  }
   get isIdempotent() {
     return this.method == FetchMethod.get;
   }
-  get headers() {
-    return Object.assign({
-      Accept: "text/html, application/xhtml+xml"
-    }, this.additionalHeaders);
+  get abortSignal() {
+    return this.abortController.signal;
   }
-  get additionalHeaders() {
-    if (typeof this.delegate.additionalHeadersForRequest == "function") {
-      return this.delegate.additionalHeadersForRequest(this);
+}
+
+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 {
-      return {};
+      url.searchParams.append(name, value);
     }
   }
-  get abortSignal() {
-    return this.abortController.signal;
-  }
+  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,24 @@ class FormSubmission {
     return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.action;
   }
   get location() {
-    return Location.wrap(this.action);
+    return expandURL(this.action);
+  }
+  get body() {
+    if (this.enctype == FormEnctype.urlEncoded || this.method == FetchMethod.get) {
+      return new URLSearchParams(this.stringFormData);
+    } else {
+      return this.formData;
+    }
+  }
+  get enctype() {
+    var _a;
+    return formEnctypeFromString(((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formenctype")) || this.formElement.enctype);
+  }
+  get isIdempotent() {
+    return this.fetchRequest.isIdempotent;
+  }
+  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 +569,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;
@@ -576,8 +642,8 @@ function buildFormData(formElement, submitter) {
   const formData = new FormData(formElement);
   const name = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("name");
   const value = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("value");
-  if (name && formData.get(name) != value) {
-    formData.append(name, value || "");
+  if (name && value != null && formData.get(name) != value) {
+    formData.append(name, value);
   }
   return formData;
 }
@@ -602,6 +668,48 @@ 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 isConnected() {
+    return this.element.isConnected;
+  }
+  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]`);
+  }
+  getPermanentElementMapForSnapshot(snapshot) {
+    const permanentElementMap = {};
+    for (const currentPermanentElement of this.permanentElements) {
+      const {id: id} = currentPermanentElement;
+      const newPermanentElement = snapshot.getPermanentElementById(id);
+      if (newPermanentElement) {
+        permanentElementMap[id] = [ currentPermanentElement, newPermanentElement ];
+      }
+    }
+    return permanentElementMap;
+  }
+}
+
 class FormInterceptor {
   constructor(delegate, element) {
     this.submitBubbled = event => {
@@ -626,6 +734,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 => {
@@ -640,7 +824,7 @@ class LinkInterceptor {
         if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
           this.clickEvent.preventDefault();
           event.preventDefault();
-          this.delegate.linkClickIntercepted(event.target, event.detail.url);
+          this.convertLinkWithMethodClickToFormSubmission(event.target) || this.delegate.linkClickIntercepted(event.target, event.detail.url);
         }
       }
       delete this.clickEvent;
@@ -661,183 +845,172 @@ class LinkInterceptor {
     document.removeEventListener("turbo:click", this.linkClicked);
     document.removeEventListener("turbo:before-visit", this.willVisit);
   }
+  convertLinkWithMethodClickToFormSubmission(link) {
+    var _a;
+    const linkMethod = link.getAttribute("data-turbo-method") || link.getAttribute("data-method");
+    if (linkMethod) {
+      const form = document.createElement("form");
+      form.method = linkMethod;
+      form.action = link.getAttribute("href") || "undefined";
+      (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
+      return dispatch("submit", {
+        target: form
+      });
+    } else {
+      return false;
+    }
+  }
   respondsToEventTarget(target) {
     const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
     return element && element.closest("turbo-frame, html") == this.element;
   }
 }
 
-class FrameController {
-  constructor(element) {
-    this.resolveVisitPromise = () => {};
-    this.element = element;
-    this.appearanceObserver = new AppearanceObserver(this, this.element);
-    this.linkInterceptor = new LinkInterceptor(this, this.element);
-    this.formInterceptor = new FormInterceptor(this, this.element);
-  }
-  connect() {
-    if (this.loadingStyle == FrameLoadingStyle.lazy) {
-      this.appearanceObserver.start();
-    }
-    this.linkInterceptor.start();
-    this.formInterceptor.start();
+class Bardo {
+  constructor(permanentElementMap) {
+    this.permanentElementMap = permanentElementMap;
   }
-  disconnect() {
-    this.appearanceObserver.stop();
-    this.linkInterceptor.stop();
-    this.formInterceptor.stop();
+  static preservingPermanentElements(permanentElementMap, callback) {
+    const bardo = new this(permanentElementMap);
+    bardo.enter();
+    callback();
+    bardo.leave();
   }
-  sourceURLChanged() {
-    if (this.loadingStyle == FrameLoadingStyle.eager) {
-      this.loadSourceURL();
+  enter() {
+    for (const id in this.permanentElementMap) {
+      const [, newPermanentElement] = this.permanentElementMap[id];
+      this.replaceNewPermanentElementWithPlaceholder(newPermanentElement);
     }
   }
-  loadingStyleChanged() {
-    if (this.loadingStyle == FrameLoadingStyle.lazy) {
-      this.appearanceObserver.start();
-    } else {
-      this.appearanceObserver.stop();
-      this.loadSourceURL();
+  leave() {
+    for (const id in this.permanentElementMap) {
+      const [currentPermanentElement] = this.permanentElementMap[id];
+      this.replaceCurrentPermanentElementWithClone(currentPermanentElement);
+      this.replacePlaceholderWithPermanentElement(currentPermanentElement);
     }
   }
-  async loadSourceURL() {
-    if (this.isActive && this.sourceURL && this.sourceURL != this.loadingURL) {
-      try {
-        this.loadingURL = this.sourceURL;
-        this.element.loaded = this.visit(this.sourceURL);
-        this.appearanceObserver.stop();
-        await this.element.loaded;
-      } finally {
-        delete this.loadingURL;
-      }
-    }
+  replaceNewPermanentElementWithPlaceholder(permanentElement) {
+    const placeholder = createPlaceholderForPermanentElement(permanentElement);
+    permanentElement.replaceWith(placeholder);
   }
-  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();
-    }
+  replaceCurrentPermanentElementWithClone(permanentElement) {
+    const clone = permanentElement.cloneNode(true);
+    permanentElement.replaceWith(clone);
   }
-  elementAppearedInViewport(element) {
-    this.loadSourceURL();
+  replacePlaceholderWithPermanentElement(permanentElement) {
+    const placeholder = this.getPlaceholderById(permanentElement.id);
+    placeholder === null || placeholder === void 0 ? void 0 : placeholder.replaceWith(permanentElement);
   }
-  shouldInterceptLinkClick(element, url) {
-    return this.shouldInterceptNavigation(element);
+  getPlaceholderById(id) {
+    return this.placeholders.find((element => element.content == id));
   }
-  linkClickIntercepted(element, url) {
-    this.navigateFrame(element, url);
+  get placeholders() {
+    return [ ...document.querySelectorAll("meta[name=turbo-permanent-placeholder][content]") ];
   }
-  shouldInterceptFormSubmission(element) {
-    return this.shouldInterceptNavigation(element);
+}
+
+function createPlaceholderForPermanentElement(permanentElement) {
+  const element = document.createElement("meta");
+  element.setAttribute("name", "turbo-permanent-placeholder");
+  element.setAttribute("content", permanentElement.id);
+  return element;
+}
+
+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
+    }));
   }
-  formSubmissionIntercepted(element, submitter) {
-    if (this.formSubmission) {
-      this.formSubmission.stop();
+  get shouldRender() {
+    return true;
+  }
+  prepareToRender() {
+    return;
+  }
+  finishRendering() {
+    if (this.resolvingFunctions) {
+      this.resolvingFunctions.resolve();
+      delete this.resolvingFunctions;
     }
-    this.formSubmission = new FormSubmission(this, element, submitter);
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.navigateFrame(element, this.formSubmission.fetchRequest.url);
+  }
+  createScriptElement(element) {
+    if (element.getAttribute("data-turbo-eval") == "false") {
+      return element;
     } else {
-      this.formSubmission.start();
+      const createdScriptElement = document.createElement("script");
+      createdScriptElement.textContent = element.textContent;
+      createdScriptElement.async = false;
+      copyElementAttributes(createdScriptElement, element);
+      return createdScriptElement;
     }
   }
-  additionalHeadersForRequest(request) {
-    return {
-      "Turbo-Frame": this.id
-    };
+  preservingPermanentElements(callback) {
+    Bardo.preservingPermanentElements(this.permanentElementMap, callback);
   }
-  requestStarted(request) {
-    this.element.setAttribute("busy", "");
-  }
-  requestPreventedHandlingResponse(request, response) {
-    this.resolveVisitPromise();
+  focusFirstAutofocusableElement() {
+    const element = this.connectedSnapshot.firstAutofocusableElement;
+    if (elementIsFocusable(element)) {
+      element.focus();
+    }
   }
-  async requestSucceededWithResponse(request, response) {
-    await this.loadResponse(response);
-    this.resolveVisitPromise();
+  get connectedSnapshot() {
+    return this.newSnapshot.isConnected ? this.newSnapshot : this.currentSnapshot;
   }
-  requestFailedWithResponse(request, response) {
-    console.error(response);
-    this.resolveVisitPromise();
+  get currentElement() {
+    return this.currentSnapshot.element;
   }
-  requestErrored(request, error) {
-    console.error(error);
-    this.resolveVisitPromise();
+  get newElement() {
+    return this.newSnapshot.element;
   }
-  requestFinished(request) {
-    this.element.removeAttribute("busy");
+  get permanentElementMap() {
+    return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot);
   }
-  formSubmissionStarted(formSubmission) {}
-  formSubmissionSucceededWithResponse(formSubmission, response) {
-    const frame = this.findFrameElement(formSubmission.formElement);
-    frame.delegate.loadResponse(response);
+}
+
+function copyElementAttributes(destinationElement, sourceElement) {
+  for (const {name: name, value: value} of [ ...sourceElement.attributes ]) {
+    destinationElement.setAttribute(name, value);
   }
-  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
-    this.element.delegate.loadResponse(fetchResponse);
+}
+
+function elementIsFocusable(element) {
+  return element && typeof element.focus == "function";
+}
+
+class FrameRenderer extends Renderer {
+  get shouldRender() {
+    return true;
   }
-  formSubmissionErrored(formSubmission, error) {}
-  formSubmissionFinished(formSubmission) {}
-  async visit(url) {
-    const location = Location.wrap(url);
-    const request = new FetchRequest(this, FetchMethod.get, location);
-    return new Promise((resolve => {
-      this.resolveVisitPromise = () => {
-        this.resolveVisitPromise = () => {};
-        resolve();
-      };
-      request.perform();
+  async render() {
+    await nextAnimationFrame();
+    this.preservingPermanentElements((() => {
+      this.loadFrameElement();
     }));
+    this.scrollFrameIntoView();
+    await nextAnimationFrame();
+    this.focusFirstAutofocusableElement();
   }
-  navigateFrame(element, url) {
-    const frame = this.findFrameElement(element);
-    frame.src = url;
-  }
-  findFrameElement(element) {
-    var _a;
-    const id = element.getAttribute("data-turbo-frame");
-    return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
-  }
-  async extractForeignFrameElement(container) {
-    let element;
-    const id = CSS.escape(this.id);
-    if (element = activateElement(container.querySelector(`turbo-frame#${id}`))) {
-      return element;
-    }
-    if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`))) {
-      await element.loaded;
-      return await this.extractForeignFrameElement(element);
-    }
-    console.error(`Response has no matching <turbo-frame id="${id}"> element`);
-    return new FrameElement;
-  }
-  loadFrameElement(frameElement) {
+  loadFrameElement() {
     var _a;
     const destinationRange = document.createRange();
-    destinationRange.selectNodeContents(this.element);
+    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.element.appendChild(sourceRange.extractContents());
-    }
-  }
-  focusFirstAutofocusableElement() {
-    const element = this.firstAutofocusableElement;
-    if (element) {
-      element.focus();
-      return true;
+      this.currentElement.appendChild(sourceRange.extractContents());
     }
-    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");
+  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
@@ -847,50 +1020,6 @@ class FrameController {
     }
     return false;
   }
-  shouldInterceptNavigation(element) {
-    const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
-    if (!this.enabled || id == "_top") {
-      return false;
-    }
-    if (id) {
-      const frameElement = getFrameElementById(id);
-      if (frameElement) {
-        return !frameElement.disabled;
-      }
-    }
-    return true;
-  }
-  get firstAutofocusableElement() {
-    const element = this.element.querySelector("[autofocus]");
-    return element instanceof HTMLElement ? element : null;
-  }
-  get id() {
-    return this.element.id;
-  }
-  get enabled() {
-    return !this.element.disabled;
-  }
-  get sourceURL() {
-    return this.element.src;
-  }
-  get loadingStyle() {
-    return this.element.loading;
-  }
-  get isLoading() {
-    return this.formSubmission !== undefined || this.loadingURL !== undefined;
-  }
-  get isActive() {
-    return this.element.isActive;
-  }
-}
-
-function getFrameElementById(id) {
-  if (id != null) {
-    const element = document.getElementById(id);
-    if (element instanceof FrameElement) {
-      return element;
-    }
-  }
 }
 
 function readScrollLogicalPosition(value, defaultValue) {
@@ -901,144 +1030,6 @@ function readScrollLogicalPosition(value, 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);
-  }
-  if (element instanceof FrameElement) {
-    return element;
-  }
-}
-
-const StreamActions = {
-  append() {
-    var _a;
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.append(this.templateContent);
-  },
-  prepend() {
-    var _a;
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.prepend(this.templateContent);
-  },
-  remove() {
-    var _a;
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.remove();
-  },
-  replace() {
-    var _a;
-    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.replaceWith(this.templateContent);
-  },
-  update() {
-    if (this.targetElement) {
-      this.targetElement.innerHTML = "";
-      this.targetElement.append(this.templateContent);
-    }
-  }
-};
-
-class StreamElement extends HTMLElement {
-  async connectedCallback() {
-    try {
-      await this.render();
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.disconnect();
-    }
-  }
-  async render() {
-    var _a;
-    return (_a = this.renderPromise) !== null && _a !== void 0 ? _a : this.renderPromise = (async () => {
-      if (this.dispatchEvent(this.beforeRenderEvent)) {
-        await nextAnimationFrame();
-        this.performAction();
-      }
-    })();
-  }
-  disconnect() {
-    try {
-      this.remove();
-    } catch (_a) {}
-  }
-  get performAction() {
-    if (this.action) {
-      const actionFunction = StreamActions[this.action];
-      if (actionFunction) {
-        return actionFunction;
-      }
-      this.raise("unknown action");
-    }
-    this.raise("action attribute is missing");
-  }
-  get targetElement() {
-    var _a;
-    if (this.target) {
-      return (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.getElementById(this.target);
-    }
-    this.raise("target attribute is missing");
-  }
-  get templateContent() {
-    return this.templateElement.content;
-  }
-  get templateElement() {
-    if (this.firstElementChild instanceof HTMLTemplateElement) {
-      return this.firstElementChild;
-    }
-    this.raise("first child element must be a <template> element");
-  }
-  get action() {
-    return this.getAttribute("action");
-  }
-  get target() {
-    return this.getAttribute("target");
-  }
-  raise(message) {
-    throw new Error(`${this.description}: ${message}`);
-  }
-  get description() {
-    var _a, _b;
-    return (_b = ((_a = this.outerHTML.match(/<[^>]+>/)) !== null && _a !== void 0 ? _a : [])[0]) !== null && _b !== void 0 ? _b : "<turbo-stream>";
-  }
-  get beforeRenderEvent() {
-    return new CustomEvent("turbo:before-stream-render", {
-      bubbles: true,
-      cancelable: true
-    });
-  }
-}
-
-FrameElement.delegateConstructor = FrameController;
-
-customElements.define("turbo-frame", FrameElement);
-
-customElements.define("turbo-stream", StreamElement);
-
-(() => {
-  let element = document.currentScript;
-  if (!element) return;
-  if (element.hasAttribute("data-turbo-suppress-warning")) return;
-  while (element = element.parentElement) {
-    if (element == document.body) {
-      return console.warn(unindent`
-        You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!
-
-        Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
-
-        For more information, see: https://turbo.hotwire.dev/handbook/building#working-with-script-elements
-
-        ——
-        Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
-      `, element.outerHTML);
-    }
-  }
-})();
-
 class ProgressBar {
   constructor() {
     this.hiding = false;
@@ -1138,9 +1129,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 +1146,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 +1209,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);
-    }
+class PageSnapshot extends Snapshot {
+  constructor(element, headSnapshot) {
+    super(element);
+    this.headSnapshot = headSnapshot;
+  }
+  static fromHTMLString(html = "") {
+    return this.fromDocument(parseHTMLDocument(html));
   }
-  static fromHTMLString(html) {
-    const {documentElement: documentElement} = (new DOMParser).parseFromString(html, "text/html");
-    return this.fromHTMLElement(documentElement);
+  static fromElement(element) {
+    return this.fromDocument(element.ownerDocument);
   }
-  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);
+  static fromDocument({head: head, body: body}) {
+    return new this(body, new HeadSnapshot(head));
   }
   clone() {
-    const {bodyElement: bodyElement} = Snapshot.fromHTMLString(this.bodyElement.outerHTML);
-    return new Snapshot(this.headDetails, bodyElement);
+    return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
   }
-  getRootLocation() {
-    const root = this.getSetting("root", "/");
-    return new Location(root);
+  get headElement() {
+    return this.headSnapshot.element;
   }
-  getCacheControlValue() {
-    return this.getSetting("cache-control");
+  get rootLocation() {
+    var _a;
+    const root = (_a = this.getSetting("root")) !== null && _a !== void 0 ? _a : "/";
+    return expandURL(root);
   }
-  getElementForAnchor(anchor) {
-    try {
-      return this.bodyElement.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
-    } catch (_a) {
-      return null;
-    }
+  get cacheControlValue() {
+    return this.getSetting("cache-control");
   }
-  getPermanentElements() {
-    return [ ...this.bodyElement.querySelectorAll("[id][data-turbo-permanent]") ];
+  get isPreviewable() {
+    return this.cacheControlValue != "no-preview";
   }
-  getPermanentElementById(id) {
-    return this.bodyElement.querySelector(`#${id}[data-turbo-permanent]`);
+  get isCacheable() {
+    return this.cacheControlValue != "no-cache";
   }
-  getPermanentElementsPresentInSnapshot(snapshot) {
-    return this.getPermanentElements().filter((({id: id}) => snapshot.getPermanentElementById(id)));
+  get isVisitable() {
+    return this.getSetting("visit-control") != "reload";
   }
-  findFirstAutofocusableElement() {
-    return this.bodyElement.querySelector("[autofocus]");
-  }
-  hasAnchor(anchor) {
-    return this.getElementForAnchor(anchor) != null;
-  }
-  isPreviewable() {
-    return this.getCacheControlValue() != "no-preview";
-  }
-  isCacheable() {
-    return this.getCacheControlValue() != "no-cache";
-  }
-  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 +1292,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 +1346,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 +1391,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 +1407,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 +1425,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, isPreview);
         this.adapter.visitRendered(this);
         if (!isPreview) {
           this.complete();
@@ -1539,6 +1481,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 +1499,8 @@ class Visit {
     }
   }
   scrollToAnchor() {
-    if (this.location.anchor != null) {
-      this.view.scrollToAnchor(this.location.anchor);
+    if (getAnchor(this.location)) {
+      this.view.scrollToAnchor(getAnchor(this.location));
       return true;
     }
   }
@@ -1586,12 +1538,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 +1720,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 +1738,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 +1760,7 @@ class History {
         restorationIdentifier: restorationIdentifier
       }
     };
-    method.call(history, state, "", location.absoluteURL);
+    method.call(history, state, "", location.href);
     this.location = location;
     this.restorationIdentifier = restorationIdentifier;
   }
@@ -1882,10 +1835,14 @@ class LinkClickObserver {
     }
   }
   getLocationForLink(link) {
-    return new Location(link.getAttribute("href") || "");
+    return expandURL(link.getAttribute("href") || "");
   }
 }
 
+function isAction(action) {
+  return action == "advance" || action == "replace" || action == "restore";
+}
+
 class Navigator {
   constructor(delegate) {
     this.delegate = delegate;
@@ -1895,9 +1852,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 +1862,13 @@ class Navigator {
   submitForm(form, submitter) {
     this.stop();
     this.formSubmission = new FormSubmission(this, form, submitter, true);
-    this.formSubmission.start();
+    if (this.formSubmission.isIdempotent) {
+      this.proposeVisit(this.formSubmission.fetchRequest.url, {
+        action: this.getActionForFormSubmission(this.formSubmission)
+      });
+    } else {
+      this.formSubmission.start();
+    }
   }
   stop() {
     if (this.formSubmission) {
@@ -1948,14 +1911,14 @@ 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();
     }
   }
-  formSubmissionErrored(formSubmission, error) {}
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
+  }
   formSubmissionFinished(formSubmission) {}
   visitStarted(visit) {
     this.delegate.visitStarted(visit);
@@ -1969,6 +1932,11 @@ class Navigator {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
+  getActionForFormSubmission(formSubmission) {
+    const {formElement: formElement, submitter: submitter} = formSubmission;
+    const action = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-action")) || formElement.getAttribute("data-turbo-action");
+    return isAction(action) ? action : "advance";
+  }
 }
 
 var PageStage;
@@ -2061,51 +2029,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 +2050,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 +2096,21 @@ 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);
-}
-
-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);
-  }
+  return contentType.startsWith(StreamMessage.contentType);
 }
 
 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 +2118,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;
+class PageRenderer extends Renderer {
+  get shouldRender() {
+    return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
   }
-  get(location) {
-    if (this.has(location)) {
-      const snapshot = this.read(location);
-      this.touch(location);
-      return snapshot;
-    }
+  prepareToRender() {
+    this.mergeHead();
   }
-  put(location, snapshot) {
-    this.write(location, snapshot);
-    this.touch(location);
-    return snapshot;
-  }
-  clear() {
-    this.snapshots = {};
-  }
-  read(location) {
-    return this.snapshots[location.toCacheKey()];
-  }
-  write(location, snapshot) {
-    this.snapshots[location.toCacheKey()] = snapshot;
-  }
-  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 +2158,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);
+      inertScriptElement.replaceWith(activatedScriptElement);
     }
   }
   assignNewBody() {
-    if (document.body) {
-      replaceElementWithElement(document.body, this.newBody);
+    if (document.body && this.newElement instanceof HTMLBodyElement) {
+      document.body.replaceWith(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);
-  }
-  getNewBodyScriptElements() {
-    return [ ...this.newBody.querySelectorAll("script") ];
+  get newBodyScriptElements() {
+    return [ ...this.newElement.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;
-  }
-  getRootLocation() {
-    return this.getSnapshot().getRootLocation();
+    this.lastRenderedLocation = new URL(location.href);
   }
-  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();
+  get snapshot() {
+    return PageSnapshot.fromElement(this.element);
   }
-  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);
-  }
-  renderError(error, callback) {
-    ErrorRenderer.render(this.delegate, callback, error || "");
+  get shouldCacheSnapshot() {
+    return this.snapshot.isCacheable;
   }
 }
 
@@ -2517,7 +2304,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 +2348,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);
@@ -2599,128 +2386,553 @@ class Session {
       scrollPosition: position
     });
   }
-  willFollowLinkToLocation(link, location) {
-    return this.elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  willFollowLinkToLocation(link, location) {
+    return elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  }
+  followedLinkToLocation(link, location) {
+    const action = this.getActionForLink(link);
+    this.visit(location.href, {
+      action: action
+    });
+  }
+  allowsVisitingLocation(location) {
+    return this.applicationAllowsVisitingLocation(location);
+  }
+  visitProposedToLocation(location, options) {
+    extendURLWithDeprecatedProperties(location);
+    this.adapter.visitProposedToLocation(location, options);
+  }
+  visitStarted(visit) {
+    extendURLWithDeprecatedProperties(visit.location);
+    this.notifyApplicationAfterVisitingLocation(visit.location);
+  }
+  visitCompleted(visit) {
+    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
+  }
+  willSubmitForm(form, submitter) {
+    return elementIsNavigable(form) && elementIsNavigable(submitter);
+  }
+  formSubmitted(form, submitter) {
+    this.navigator.submitForm(form, submitter);
+  }
+  pageBecameInteractive() {
+    this.view.lastRenderedLocation = this.location;
+    this.notifyApplicationAfterPageLoad();
+  }
+  pageLoaded() {
+    this.history.assumeControlOfScrollRestoration();
+  }
+  pageWillUnload() {
+    this.history.relinquishControlOfScrollRestoration();
+  }
+  receivedMessageFromStream(message) {
+    this.renderStreamMessage(message);
+  }
+  viewWillCacheSnapshot() {
+    this.notifyApplicationBeforeCachingSnapshot();
+  }
+  viewWillRenderSnapshot({element: element}, isPreview) {
+    this.notifyApplicationBeforeRender(element);
+  }
+  viewRenderedSnapshot(snapshot, isPreview) {
+    this.view.lastRenderedLocation = this.history.location;
+    this.notifyApplicationAfterRender();
+  }
+  viewInvalidated() {
+    this.adapter.pageInvalidated();
+  }
+  applicationAllowsFollowingLinkToLocation(link, location) {
+    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
+    return !event.defaultPrevented;
+  }
+  applicationAllowsVisitingLocation(location) {
+    const event = this.notifyApplicationBeforeVisitingLocation(location);
+    return !event.defaultPrevented;
+  }
+  notifyApplicationAfterClickingLinkToLocation(link, location) {
+    return dispatch("turbo:click", {
+      target: link,
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationBeforeVisitingLocation(location) {
+    return dispatch("turbo:before-visit", {
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationAfterVisitingLocation(location) {
+    return dispatch("turbo:visit", {
+      detail: {
+        url: location.href
+      }
+    });
+  }
+  notifyApplicationBeforeCachingSnapshot() {
+    return dispatch("turbo:before-cache");
+  }
+  notifyApplicationBeforeRender(newBody) {
+    return dispatch("turbo:before-render", {
+      detail: {
+        newBody: newBody
+      }
+    });
+  }
+  notifyApplicationAfterRender() {
+    return dispatch("turbo:render");
+  }
+  notifyApplicationAfterPageLoad(timing = {}) {
+    return dispatch("turbo:load", {
+      detail: {
+        url: this.location.href,
+        timing: timing
+      }
+    });
+  }
+  getActionForLink(link) {
+    const action = link.getAttribute("data-turbo-action");
+    return isAction(action) ? action : "advance";
+  }
+  locationIsVisitable(location) {
+    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
+  }
+  get snapshot() {
+    return this.view.snapshot;
+  }
+}
+
+function elementIsNavigable(element) {
+  const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
+  if (container) {
+    return container.getAttribute("data-turbo") != "false";
+  } else {
+    return true;
+  }
+}
+
+function extendURLWithDeprecatedProperties(url) {
+  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
+}
+
+const deprecatedLocationPropertyDescriptors = {
+  absoluteURL: {
+    get() {
+      return this.toString();
+    }
+  }
+};
+
+class FrameController {
+  constructor(element) {
+    this.resolveVisitPromise = () => {};
+    this.connected = false;
+    this.hasBeenLoaded = false;
+    this.settingSourceURL = false;
+    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);
+  }
+  connect() {
+    if (!this.connected) {
+      this.connected = true;
+      if (this.loadingStyle == FrameLoadingStyle.lazy) {
+        this.appearanceObserver.start();
+      }
+      this.linkInterceptor.start();
+      this.formInterceptor.start();
+      this.sourceURLChanged();
+    }
+  }
+  disconnect() {
+    if (this.connected) {
+      this.connected = false;
+      this.appearanceObserver.stop();
+      this.linkInterceptor.stop();
+      this.formInterceptor.stop();
+    }
+  }
+  disabledChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager) {
+      this.loadSourceURL();
+    }
+  }
+  sourceURLChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager || this.hasBeenLoaded) {
+      this.loadSourceURL();
+    }
+  }
+  loadingStyleChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.lazy) {
+      this.appearanceObserver.start();
+    } else {
+      this.appearanceObserver.stop();
+      this.loadSourceURL();
+    }
+  }
+  async loadSourceURL() {
+    if (!this.settingSourceURL && this.enabled && this.isActive && this.sourceURL != this.currentURL) {
+      const previousURL = this.currentURL;
+      this.currentURL = this.sourceURL;
+      if (this.sourceURL) {
+        try {
+          this.element.loaded = this.visit(this.sourceURL);
+          this.appearanceObserver.stop();
+          await this.element.loaded;
+          this.hasBeenLoaded = true;
+        } catch (error) {
+          this.currentURL = previousURL;
+          throw error;
+        }
+      }
+    }
+  }
+  async loadResponse(fetchResponse) {
+    if (fetchResponse.redirected) {
+      this.sourceURL = fetchResponse.response.url;
+    }
+    try {
+      const html = await fetchResponse.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) {
+    this.loadSourceURL();
+  }
+  shouldInterceptLinkClick(element, url) {
+    return this.shouldInterceptNavigation(element);
+  }
+  linkClickIntercepted(element, url) {
+    this.navigateFrame(element, url);
+  }
+  shouldInterceptFormSubmission(element, submitter) {
+    return this.shouldInterceptNavigation(element, submitter);
+  }
+  formSubmissionIntercepted(element, submitter) {
+    if (this.formSubmission) {
+      this.formSubmission.stop();
+    }
+    this.formSubmission = new FormSubmission(this, element, submitter);
+    if (this.formSubmission.fetchRequest.isIdempotent) {
+      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
+    } else {
+      const {fetchRequest: fetchRequest} = this.formSubmission;
+      this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+      this.formSubmission.start();
+    }
+  }
+  prepareHeadersForRequest(headers, request) {
+    headers["Turbo-Frame"] = this.id;
+  }
+  requestStarted(request) {
+    this.element.setAttribute("busy", "");
+  }
+  requestPreventedHandlingResponse(request, response) {
+    this.resolveVisitPromise();
+  }
+  async requestSucceededWithResponse(request, response) {
+    await this.loadResponse(response);
+    this.resolveVisitPromise();
+  }
+  requestFailedWithResponse(request, response) {
+    console.error(response);
+    this.resolveVisitPromise();
+  }
+  requestErrored(request, error) {
+    console.error(error);
+    this.resolveVisitPromise();
+  }
+  requestFinished(request) {
+    this.element.removeAttribute("busy");
+  }
+  formSubmissionStarted(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.setAttribute("busy", "");
+  }
+  formSubmissionSucceededWithResponse(formSubmission, response) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.delegate.loadResponse(response);
+  }
+  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    this.element.delegate.loadResponse(fetchResponse);
+  }
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
+  }
+  formSubmissionFinished(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.removeAttribute("busy");
+  }
+  viewWillRenderSnapshot(snapshot, isPreview) {}
+  viewRenderedSnapshot(snapshot, isPreview) {}
+  viewInvalidated() {}
+  async visit(url) {
+    const request = new FetchRequest(this, FetchMethod.get, expandURL(url));
+    return new Promise((resolve => {
+      this.resolveVisitPromise = () => {
+        this.resolveVisitPromise = () => {};
+        resolve();
+      };
+      request.perform();
+    }));
+  }
+  navigateFrame(element, url) {
+    const frame = this.findFrameElement(element);
+    frame.src = url;
+  }
+  findFrameElement(element) {
+    var _a;
+    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) {
+    let element;
+    const id = CSS.escape(this.id);
+    try {
+      if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
+        return element;
+      }
+      if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
+        await element.loaded;
+        return await this.extractForeignFrameElement(element);
+      }
+      console.error(`Response has no matching <turbo-frame id="${id}"> element`);
+    } catch (error) {
+      console.error(error);
+    }
+    return new FrameElement;
+  }
+  shouldInterceptNavigation(element, submitter) {
+    const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+    if (!this.enabled || id == "_top") {
+      return false;
+    }
+    if (id) {
+      const frameElement = getFrameElementById(id);
+      if (frameElement) {
+        return !frameElement.disabled;
+      }
+    }
+    if (!elementIsNavigable(element)) {
+      return false;
+    }
+    if (submitter && !elementIsNavigable(submitter)) {
+      return false;
+    }
+    return true;
   }
-  followedLinkToLocation(link, location) {
-    const action = this.getActionForLink(link);
-    this.visit(location, {
-      action: action
-    });
+  get id() {
+    return this.element.id;
   }
-  allowsVisitingLocation(location) {
-    return this.applicationAllowsVisitingLocation(location);
+  get enabled() {
+    return !this.element.disabled;
   }
-  visitProposedToLocation(location, options) {
-    this.adapter.visitProposedToLocation(location, options);
+  get sourceURL() {
+    if (this.element.src) {
+      return this.element.src;
+    }
   }
-  visitStarted(visit) {
-    this.notifyApplicationAfterVisitingLocation(visit.location);
+  set sourceURL(sourceURL) {
+    this.settingSourceURL = true;
+    this.element.src = sourceURL !== null && sourceURL !== void 0 ? sourceURL : null;
+    this.settingSourceURL = false;
   }
-  visitCompleted(visit) {
-    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
+  get loadingStyle() {
+    return this.element.loading;
   }
-  willSubmitForm(form, submitter) {
-    return this.elementIsNavigable(form) && this.elementIsNavigable(submitter);
+  get isLoading() {
+    return this.formSubmission !== undefined || this.resolveVisitPromise !== undefined;
   }
-  formSubmitted(form, submitter) {
-    this.navigator.submitForm(form, submitter);
+  get isActive() {
+    return this.element.isActive && this.connected;
   }
-  pageBecameInteractive() {
-    this.view.lastRenderedLocation = this.location;
-    this.notifyApplicationAfterPageLoad();
+}
+
+function getFrameElementById(id) {
+  if (id != null) {
+    const element = document.getElementById(id);
+    if (element instanceof FrameElement) {
+      return element;
+    }
   }
-  pageLoaded() {
-    this.history.assumeControlOfScrollRestoration();
+}
+
+function activateElement(element, currentURL) {
+  if (element) {
+    const src = element.getAttribute("src");
+    if (src != null && currentURL != null && urlsAreEqual(src, currentURL)) {
+      throw new Error(`Matching <turbo-frame id="${element.id}"> element has a source URL which references itself`);
+    }
+    if (element.ownerDocument !== document) {
+      element = document.importNode(element, true);
+    }
+    if (element instanceof FrameElement) {
+      element.connectedCallback();
+      return element;
+    }
   }
-  pageWillUnload() {
-    this.history.relinquishControlOfScrollRestoration();
+}
+
+const StreamActions = {
+  after() {
+    var _a, _b;
+    (_b = (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.templateContent, this.targetElement.nextSibling);
+  },
+  append() {
+    var _a;
+    this.removeDuplicateTargetChildren();
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.append(this.templateContent);
+  },
+  before() {
+    var _a, _b;
+    (_b = (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.templateContent, this.targetElement);
+  },
+  prepend() {
+    var _a;
+    this.removeDuplicateTargetChildren();
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.prepend(this.templateContent);
+  },
+  remove() {
+    var _a;
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.remove();
+  },
+  replace() {
+    var _a;
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.replaceWith(this.templateContent);
+  },
+  update() {
+    if (this.targetElement) {
+      this.targetElement.innerHTML = "";
+      this.targetElement.append(this.templateContent);
+    }
   }
-  receivedMessageFromStream(message) {
-    this.renderStreamMessage(message);
+};
+
+class StreamElement extends HTMLElement {
+  async connectedCallback() {
+    try {
+      await this.render();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.disconnect();
+    }
   }
-  viewWillRender(newBody) {
-    this.notifyApplicationBeforeRender(newBody);
+  async render() {
+    var _a;
+    return (_a = this.renderPromise) !== null && _a !== void 0 ? _a : this.renderPromise = (async () => {
+      if (this.dispatchEvent(this.beforeRenderEvent)) {
+        await nextAnimationFrame();
+        this.performAction();
+      }
+    })();
   }
-  viewRendered() {
-    this.view.lastRenderedLocation = this.history.location;
-    this.notifyApplicationAfterRender();
+  disconnect() {
+    try {
+      this.remove();
+    } catch (_a) {}
   }
-  viewInvalidated() {
-    this.adapter.pageInvalidated();
+  removeDuplicateTargetChildren() {
+    this.duplicateChildren.forEach((({targetChild: targetChild}) => {
+      targetChild.remove();
+    }));
   }
-  viewWillCacheSnapshot() {
-    this.notifyApplicationBeforeCachingSnapshot();
+  get duplicateChildren() {
+    var _a;
+    return [ ...(_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children ].map((templateChild => {
+      let targetChild = [ ...this.targetElement.children ].filter((c => c.id === templateChild.id))[0];
+      return {
+        targetChild: targetChild,
+        templateChild: templateChild
+      };
+    })).filter((({targetChild: targetChild}) => targetChild));
   }
-  applicationAllowsFollowingLinkToLocation(link, location) {
-    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
-    return !event.defaultPrevented;
+  get performAction() {
+    if (this.action) {
+      const actionFunction = StreamActions[this.action];
+      if (actionFunction) {
+        return actionFunction;
+      }
+      this.raise("unknown action");
+    }
+    this.raise("action attribute is missing");
   }
-  applicationAllowsVisitingLocation(location) {
-    const event = this.notifyApplicationBeforeVisitingLocation(location);
-    return !event.defaultPrevented;
+  get targetElement() {
+    var _a;
+    if (this.target) {
+      return (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.getElementById(this.target);
+    }
+    this.raise("target attribute is missing");
   }
-  notifyApplicationAfterClickingLinkToLocation(link, location) {
-    return dispatch("turbo:click", {
-      target: link,
-      detail: {
-        url: location.absoluteURL
-      },
-      cancelable: true
-    });
+  get templateContent() {
+    return this.templateElement.content;
   }
-  notifyApplicationBeforeVisitingLocation(location) {
-    return dispatch("turbo:before-visit", {
-      detail: {
-        url: location.absoluteURL
-      },
-      cancelable: true
-    });
+  get templateElement() {
+    if (this.firstElementChild instanceof HTMLTemplateElement) {
+      return this.firstElementChild;
+    }
+    this.raise("first child element must be a <template> element");
   }
-  notifyApplicationAfterVisitingLocation(location) {
-    return dispatch("turbo:visit", {
-      detail: {
-        url: location.absoluteURL
-      }
-    });
+  get action() {
+    return this.getAttribute("action");
   }
-  notifyApplicationBeforeCachingSnapshot() {
-    return dispatch("turbo:before-cache");
+  get target() {
+    return this.getAttribute("target");
   }
-  notifyApplicationBeforeRender(newBody) {
-    return dispatch("turbo:before-render", {
-      detail: {
-        newBody: newBody
-      }
-    });
+  raise(message) {
+    throw new Error(`${this.description}: ${message}`);
   }
-  notifyApplicationAfterRender() {
-    return dispatch("turbo:render");
+  get description() {
+    var _a, _b;
+    return (_b = ((_a = this.outerHTML.match(/<[^>]+>/)) !== null && _a !== void 0 ? _a : [])[0]) !== null && _b !== void 0 ? _b : "<turbo-stream>";
   }
-  notifyApplicationAfterPageLoad(timing = {}) {
-    return dispatch("turbo:load", {
-      detail: {
-        url: this.location.absoluteURL,
-        timing: timing
-      }
+  get beforeRenderEvent() {
+    return new CustomEvent("turbo:before-stream-render", {
+      bubbles: true,
+      cancelable: true
     });
   }
-  getActionForLink(link) {
-    const action = link.getAttribute("data-turbo-action");
-    return isAction(action) ? action : "advance";
-  }
-  elementIsNavigable(element) {
-    const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
-    if (container) {
-      return container.getAttribute("data-turbo") != "false";
-    } else {
-      return true;
+}
+
+FrameElement.delegateConstructor = FrameController;
+
+customElements.define("turbo-frame", FrameElement);
+
+customElements.define("turbo-stream", StreamElement);
+
+(() => {
+  let element = document.currentScript;
+  if (!element) return;
+  if (element.hasAttribute("data-turbo-suppress-warning")) return;
+  while (element = element.parentElement) {
+    if (element == document.body) {
+      return console.warn(unindent`
+        You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!
+
+        Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
+
+        For more information, see: https://turbo.hotwire.dev/handbook/building#working-with-script-elements
+
+        ——
+        Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
+      `, element.outerHTML);
     }
   }
-  locationIsVisitable(location) {
-    return location.isPrefixedBy(this.view.getRootLocation()) && location.isHTML();
-  }
-}
+})();
 
 const session = new Session;
 
@@ -2758,6 +2970,21 @@ function setProgressBarDelay(delay) {
   session.setProgressBarDelay(delay);
 }
 
+var Turbo = Object.freeze({
+  __proto__: null,
+  navigator: navigator,
+  start: start,
+  registerAdapter: registerAdapter,
+  visit: visit,
+  connectStreamSource: connectStreamSource,
+  disconnectStreamSource: disconnectStreamSource,
+  renderStreamMessage: renderStreamMessage,
+  clearCache: clearCache,
+  setProgressBarDelay: setProgressBarDelay
+});
+
+window.Turbo = Turbo;
+
 start();
 
 var turbo_es2017Esm = Object.freeze({
@@ -2776,17 +3003,20 @@ var turbo_es2017Esm = Object.freeze({
 let consumer;
 
 async function getConsumer() {
-  if (consumer) return consumer;
-  const {createConsumer: createConsumer} = await Promise.resolve().then((function() {
-    return index;
-  }));
-  return setConsumer(createConsumer());
+  return consumer || setConsumer(createConsumer().then(setConsumer));
 }
 
 function setConsumer(newConsumer) {
   return consumer = newConsumer;
 }
 
+async function createConsumer() {
+  const {createConsumer: createConsumer} = await Promise.resolve().then((function() {
+    return index;
+  }));
+  return createConsumer();
+}
+
 async function subscribeTo(channel, mixin) {
   const {subscriptions: subscriptions} = await getConsumer();
   return subscriptions.create(channel, mixin);
@@ -2796,6 +3026,7 @@ var cable = Object.freeze({
   __proto__: null,
   getConsumer: getConsumer,
   setConsumer: setConsumer,
+  createConsumer: createConsumer,
   subscribeTo: subscribeTo
 });
 
@@ -3259,7 +3490,7 @@ function createWebSocketURL(url) {
   }
 }
 
-function createConsumer(url = getConfig("url") || INTERNAL.default_mount_path) {
+function createConsumer$1(url = getConfig("url") || INTERNAL.default_mount_path) {
   return new Consumer(url);
 }
 
@@ -3281,7 +3512,7 @@ var index = Object.freeze({
   adapters: adapters,
   createWebSocketURL: createWebSocketURL,
   logger: logger,
-  createConsumer: createConsumer,
+  createConsumer: createConsumer$1,
   getConfig: getConfig
 });