turbo-rails 0.5.9 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 025ba92afa27783a938ec698ff465685559d71698ab3023b091a54d14f0d6dd1
-  data.tar.gz: ae377ccfdb57c9f9f2f862dc81e5863a5bc614002bbdfe39547cb1ede2aa797a
+  metadata.gz: 42d7a658511c698c83b4e41853f96f5b2534a9ee81b89500044a22d6695a5150
+  data.tar.gz: 46e9abb9a01e4c9b50d2c2b704ff0e522a7231496b58d7acbc78303cdef67486
 SHA512:
-  metadata.gz: a7f03c2b76b07d65f64b3170b9f9ed6c1a9c4429c9f7eee3abf8bffbdbed8a320806f239df725c5aad37c826d2171ec2abc0c7787d42f929e2741584fc4d84e3
-  data.tar.gz: b2566bd6203b982d5b3cad1c852517a41b3a11ca8c8f097cac3cf7ff45f8d83db3eab3337807a80299cf61fc21f58990275f2e5dc92af75b03b167bf04f05ecc
+  metadata.gz: be906021b12ba905c7ce316900cb28db1ec22cbec561c2e009758a58cb059c82984862bae1f045c2f60b1db9fd396ebb2c88ba07c08a2871d1f39556f67cd2b1
+  data.tar.gz: de3c17c9f07971421add4c6038f385b609d465eb939f1860900c635b35b72b65ebbbea030a2d45722bb6bda86b2b38e5d794c005e063698c3ec63478fd3dd083

data/README.md

@@ -1,6 +1,6 @@
 # Turbo
 
-[Turbo](https://turbo.hotwire.dev) gives you the speed of a single-page web application without having to write any JavaScript. Turbo accelerates links and form submissions without requiring you to change your server-side generated HTML. It lets you carve up a page into independent frames, which can be lazy-loaded and operate as independent components. And finally, helps you make partial page updates using just HTML and a set of CRUD-like container tags. These three techniques reduce the amount of custom JavaScript that many web applications need to write by an order of magnitude. And for the few dynamic bits that are left, you're invited to finish the job with [Stimulus](https://github.com/hotwired/stimulus).
+[Turbo](https://turbo.hotwired.dev) gives you the speed of a single-page web application without having to write any JavaScript. Turbo accelerates links and form submissions without requiring you to change your server-side generated HTML. It lets you carve up a page into independent frames, which can be lazy-loaded and operate as independent components. And finally, helps you make partial page updates using just HTML and a set of CRUD-like container tags. These three techniques reduce the amount of custom JavaScript that many web applications need to write by an order of magnitude. And for the few dynamic bits that are left, you're invited to finish the job with [Stimulus](https://github.com/hotwired/stimulus).
 
 On top of accelerating web applications, Turbo was built from the ground-up to form the foundation of hybrid native applications. Write the navigational shell of your Android or iOS app using the standard platform tooling, then seamlessly fill in features from the web, following native navigation patterns. Not every mobile screen needs to be written in Swift or Kotlin to feel native. With Turbo, you spend less time wrangling JSON, waiting on app stores to approve updates, or reimplementing features you've already created in HTML.
 
@@ -40,32 +40,29 @@ The JavaScript for Turbo can either be run through the asset pipeline, which is
 
 Running `turbo:install` will install through NPM if Webpacker is installed in the application. Otherwise the asset pipeline version is used.
 
-If you're using Webpack and need to use either the cable consumer or the Turbo instance, you can import [`Turbo`](https://turbo.hotwire.dev/reference/drive) and/or [`cable`](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable.js) (`import { Turbo, cable } from "@hotwired/turbo-rails"`), but ensure that your application actually *uses* the members it `import`s when using this style (see [turbo-rails#48](https://github.com/hotwired/turbo-rails/issues/48)).
+If you're using Webpack and need to use the cable consumer, you can import [`cable`](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable.js) (`import { cable } from "@hotwired/turbo-rails"`), but ensure that your application actually *uses* the members it `import`s when using this style (see [turbo-rails#48](https://github.com/hotwired/turbo-rails/issues/48)).
 
-If you're using a [native adapter](https://turbo.hotwire.dev/handbook/native), you'll need to assign `window.Turbo`, even if it's not used for anything else:
+The `Turbo` instance is automatically assigned to `window.Turbo` upon import:
 
 ```js
-import { Turbo } from "@hotwired/turbo-rails"
-window.Turbo = Turbo
+import "@hotwired/turbo-rails"
 ```
 
 ## Usage
 
-You can watch [the video introduction to Hotwire](https://hotwire.dev/#screencast), which focuses extensively on demonstration Turbo in a Rails demo. Then you should familiarize yourself with [Turbo handbook](https://turbo.hotwire.dev/handbook/introduction) to understand Drive, Frames, and Streams in-depth. Finally, dive into the code documentation by starting with [`Turbo::FramesHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/frames_helper.rb), [`Turbo::StreamsHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/streams_helper.rb), [`Turbo::Streams::TagBuilder`](https://github.com/hotwired/turbo-rails/blob/main/app/models/turbo/streams/tag_builder.rb), and [`Turbo::Broadcastable`](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb).
+You can watch [the video introduction to Hotwire](https://hotwired.dev/#screencast), which focuses extensively on demonstration Turbo in a Rails demo. Then you should familiarize yourself with [Turbo handbook](https://turbo.hotwired.dev/handbook/introduction) to understand Drive, Frames, and Streams in-depth. Finally, dive into the code documentation by starting with [`Turbo::FramesHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/frames_helper.rb), [`Turbo::StreamsHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/streams_helper.rb), [`Turbo::Streams::TagBuilder`](https://github.com/hotwired/turbo-rails/blob/main/app/models/turbo/streams/tag_builder.rb), and [`Turbo::Broadcastable`](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb).
 
 
 ## Compatibility with Rails UJS
 
-Rails UJS includes helpers for sending links and forms over XMLHttpRequest, so you can respond with Ajax. Turbo supersedes this functionality, so you should ensure that you're either running Rails 6.1 with the defaults that turn this off for forms, or that you add `config.action_view.form_with_generates_remote_forms = false` to your `config/application.rb`.
-
-Note that the helpers that turn `link_to` into remote invocations will _not_ currently work with Turbo. Links that have been made remote will not stick within frames nor will they allow you to respond with turbo stream actions. The recommendation is to replace these links with styled `button_to`, so you'll flow through a regular form, and you'll be better off with a11y compliance.
-
-You can still use the `data-confirm` and `data-disable-with`.
+Turbo can coexist with Rails UJS, but you need to take a series of upgrade steps to make it happen. See [the upgrading guide](https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md).
 
 
 ## Development
 
 * To run the Rails tests: `bundle exec rake`.
+  * To install dependencies: `bundle install`
+  * To prepare the test database: `cd tests/dummy; RAILS_ENV=test ./bin/rails db:migrate`
 * To compile the JavaScript for the asset pipeline: `yarn build`
 
 

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();
@@ -63,11 +63,18 @@ class FrameElement extends HTMLElement {
   disconnectedCallback() {
     this.delegate.disconnect();
   }
+  reload() {
+    const {src: src} = this;
+    this.src = null;
+    this.src = src;
+  }
   attributeChangedCallback(name) {
     if (name == "loading") {
       this.delegate.loadingStyleChanged();
     } else if (name == "src") {
       this.delegate.sourceURLChanged();
+    } else {
+      this.delegate.disabledChanged();
     }
   }
   get src() {
@@ -133,9 +140,7 @@ function frameLoadingStyleFromString(style) {
 }
 
 function expandURL(locatable) {
-  const anchor = document.createElement("a");
-  anchor.href = locatable.toString();
-  return new URL(anchor.href);
+  return new URL(locatable.toString(), document.baseURI);
 }
 
 function getAnchor(url) {
@@ -144,8 +149,6 @@ function getAnchor(url) {
     return url.hash.slice(1);
   } else if (anchorMatch = url.href.match(/#(.*)$/)) {
     return anchorMatch[1];
-  } else {
-    return "";
   }
 }
 
@@ -162,13 +165,17 @@ function isPrefixedBy(baseURL, url) {
   return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
 }
 
+function getRequestURL(url) {
+  const anchor = getAnchor(url);
+  return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
+}
+
 function toCacheKey(url) {
-  const anchorLength = url.hash.length;
-  if (anchorLength < 2) {
-    return url.href;
-  } else {
-    return url.href.slice(0, -anchorLength);
-  }
+  return getRequestURL(url);
+}
+
+function urlsAreEqual(left, right) {
+  return expandURL(left).href == expandURL(right).href;
 }
 
 function getPathComponents(url) {
@@ -321,8 +328,10 @@ function fetchMethodFromString(method) {
 class FetchRequest {
   constructor(delegate, method, location, body = new URLSearchParams) {
     this.abortController = new AbortController;
+    this.resolveRequestPromise = value => {};
     this.delegate = delegate;
     this.method = method;
+    this.headers = this.defaultHeaders;
     if (this.isIdempotent) {
       this.url = mergeFormDataEntries(location, [ ...body.entries() ]);
     } else {
@@ -343,12 +352,10 @@ class FetchRequest {
     this.abortController.abort();
   }
   async perform() {
+    var _a, _b;
     const {fetchOptions: fetchOptions} = this;
-    dispatch("turbo:before-fetch-request", {
-      detail: {
-        fetchOptions: fetchOptions
-      }
-    });
+    (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
+    await this.allowRequestToBeIntercepted(fetchOptions);
     try {
       this.delegate.requestStarted(this);
       const response = await fetch(this.url.href, fetchOptions);
@@ -387,23 +394,28 @@ class FetchRequest {
       signal: this.abortSignal
     };
   }
+  get defaultHeaders() {
+    return {
+      Accept: "text/html, application/xhtml+xml"
+    };
+  }
   get isIdempotent() {
     return this.method == FetchMethod.get;
   }
-  get headers() {
-    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"
-    };
+  async allowRequestToBeIntercepted(fetchOptions) {
+    const requestInterception = new Promise((resolve => this.resolveRequestPromise = resolve));
+    const event = dispatch("turbo:before-fetch-request", {
+      cancelable: true,
+      detail: {
+        fetchOptions: fetchOptions,
+        url: this.url.href,
+        resume: this.resolveRequestPromise
+      }
+    });
+    if (event.defaultPrevented) await requestInterception;
   }
 }
 
@@ -548,6 +560,9 @@ class FormSubmission {
     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 ] ] : [])), []);
   }
@@ -639,8 +654,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;
 }
@@ -682,6 +697,9 @@ class Snapshot {
       return null;
     }
   }
+  get isConnected() {
+    return this.element.isConnected;
+  }
   get firstAutofocusableElement() {
     return this.element.querySelector("[autofocus]");
   }
@@ -691,8 +709,16 @@ class Snapshot {
   getPermanentElementById(id) {
     return this.element.querySelector(`#${id}[data-turbo-permanent]`);
   }
-  getPermanentElementsPresentInSnapshot(snapshot) {
-    return this.permanentElements.filter((({id: id}) => snapshot.getPermanentElementById(id)));
+  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;
   }
 }
 
@@ -722,6 +748,8 @@ class FormInterceptor {
 
 class View {
   constructor(delegate, element) {
+    this.resolveRenderPromise = value => {};
+    this.resolveInterceptionPromise = value => {};
     this.delegate = delegate;
     this.element = element;
   }
@@ -729,6 +757,7 @@ class View {
     const element = this.snapshot.getElementForAnchor(anchor);
     if (element) {
       this.scrollToElement(element);
+      this.focusElement(element);
     } else {
       this.scrollToPosition({
         x: 0,
@@ -736,9 +765,23 @@ class View {
       });
     }
   }
+  scrollToAnchorFromLocation(location) {
+    this.scrollToAnchor(getAnchor(location));
+  }
   scrollToElement(element) {
     element.scrollIntoView();
   }
+  focusElement(element) {
+    if (element instanceof HTMLElement) {
+      if (element.hasAttribute("tabindex")) {
+        element.focus();
+      } else {
+        element.setAttribute("tabindex", "-1");
+        element.focus();
+        element.removeAttribute("tabindex");
+      }
+    }
+  }
   scrollToPosition({x: x, y: y}) {
     this.scrollRoot.scrollTo(x, y);
   }
@@ -746,20 +789,22 @@ class View {
     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.renderPromise = new Promise((resolve => this.resolveRenderPromise = resolve));
         this.renderer = renderer;
         this.prepareToRenderSnapshot(renderer);
-        this.delegate.viewWillRenderSnapshot(snapshot, isPreview);
+        const renderInterception = new Promise((resolve => this.resolveInterceptionPromise = resolve));
+        const immediateRender = this.delegate.allowsImmediateRender(snapshot, this.resolveInterceptionPromise);
+        if (!immediateRender) await renderInterception;
         await this.renderSnapshot(renderer);
         this.delegate.viewRenderedSnapshot(snapshot, isPreview);
         this.finishRenderingSnapshot(renderer);
       } finally {
         delete this.renderer;
+        this.resolveRenderPromise(undefined);
+        delete this.renderPromise;
       }
     } else {
       this.invalidate();
@@ -837,6 +882,56 @@ class LinkInterceptor {
   }
 }
 
+class Bardo {
+  constructor(permanentElementMap) {
+    this.permanentElementMap = permanentElementMap;
+  }
+  static preservingPermanentElements(permanentElementMap, callback) {
+    const bardo = new this(permanentElementMap);
+    bardo.enter();
+    callback();
+    bardo.leave();
+  }
+  enter() {
+    for (const id in this.permanentElementMap) {
+      const [, newPermanentElement] = this.permanentElementMap[id];
+      this.replaceNewPermanentElementWithPlaceholder(newPermanentElement);
+    }
+  }
+  leave() {
+    for (const id in this.permanentElementMap) {
+      const [currentPermanentElement] = this.permanentElementMap[id];
+      this.replaceCurrentPermanentElementWithClone(currentPermanentElement);
+      this.replacePlaceholderWithPermanentElement(currentPermanentElement);
+    }
+  }
+  replaceNewPermanentElementWithPlaceholder(permanentElement) {
+    const placeholder = createPlaceholderForPermanentElement(permanentElement);
+    permanentElement.replaceWith(placeholder);
+  }
+  replaceCurrentPermanentElementWithClone(permanentElement) {
+    const clone = permanentElement.cloneNode(true);
+    permanentElement.replaceWith(clone);
+  }
+  replacePlaceholderWithPermanentElement(permanentElement) {
+    const placeholder = this.getPlaceholderById(permanentElement.id);
+    placeholder === null || placeholder === void 0 ? void 0 : placeholder.replaceWith(permanentElement);
+  }
+  getPlaceholderById(id) {
+    return this.placeholders.find((element => element.content == id));
+  }
+  get placeholders() {
+    return [ ...document.querySelectorAll("meta[name=turbo-permanent-placeholder][content]") ];
+  }
+}
+
+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;
@@ -864,6 +959,9 @@ class Renderer {
       return element;
     } else {
       const createdScriptElement = document.createElement("script");
+      if (this.cspNonce) {
+        createdScriptElement.nonce = this.cspNonce;
+      }
       createdScriptElement.textContent = element.textContent;
       createdScriptElement.async = false;
       copyElementAttributes(createdScriptElement, element);
@@ -871,28 +969,29 @@ class Renderer {
     }
   }
   preservingPermanentElements(callback) {
-    const placeholders = relocatePermanentElements(this.currentSnapshot, this.newSnapshot);
-    callback();
-    replacePlaceholderElementsWithClonedPermanentElements(placeholders);
+    Bardo.preservingPermanentElements(this.permanentElementMap, callback);
   }
   focusFirstAutofocusableElement() {
-    const element = this.newSnapshot.firstAutofocusableElement;
+    const element = this.connectedSnapshot.firstAutofocusableElement;
     if (elementIsFocusable(element)) {
       element.focus();
     }
   }
+  get connectedSnapshot() {
+    return this.newSnapshot.isConnected ? this.newSnapshot : this.currentSnapshot;
+  }
   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);
+  get permanentElementMap() {
+    return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot);
+  }
+  get cspNonce() {
+    var _a;
+    return (_a = document.head.querySelector('meta[name="csp-nonce"]')) === null || _a === void 0 ? void 0 : _a.getAttribute("content");
   }
 }
 
@@ -902,37 +1001,6 @@ function copyElementAttributes(destinationElement, sourceElement) {
   }
 }
 
-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";
 }
@@ -949,6 +1017,8 @@ class FrameRenderer extends Renderer {
     this.scrollFrameIntoView();
     await nextAnimationFrame();
     this.focusFirstAutofocusableElement();
+    await nextAnimationFrame();
+    this.activateScriptElements();
   }
   loadFrameElement() {
     var _a;
@@ -975,6 +1045,15 @@ class FrameRenderer extends Renderer {
     }
     return false;
   }
+  activateScriptElements() {
+    for (const inertScriptElement of this.newScriptElements) {
+      const activatedScriptElement = this.createScriptElement(inertScriptElement);
+      inertScriptElement.replaceWith(activatedScriptElement);
+    }
+  }
+  get newScriptElements() {
+    return this.currentElement.querySelectorAll("script");
+  }
 }
 
 function readScrollLogicalPosition(value, defaultValue) {
@@ -985,446 +1064,121 @@ function readScrollLogicalPosition(value, 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);
-  }
-  connect() {
-    if (this.loadingStyle == FrameLoadingStyle.lazy) {
-      this.appearanceObserver.start();
-    }
-    this.linkInterceptor.start();
-    this.formInterceptor.start();
-  }
-  disconnect() {
-    this.appearanceObserver.stop();
-    this.linkInterceptor.stop();
-    this.formInterceptor.stop();
-  }
-  sourceURLChanged() {
-    if (this.loadingStyle == FrameLoadingStyle.eager) {
-      this.loadSourceURL();
-    }
-  }
-  loadingStyleChanged() {
-    if (this.loadingStyle == FrameLoadingStyle.lazy) {
-      this.appearanceObserver.start();
-    } else {
-      this.appearanceObserver.stop();
-      this.loadSourceURL();
-    }
+class ProgressBar {
+  constructor() {
+    this.hiding = false;
+    this.value = 0;
+    this.visible = false;
+    this.trickle = () => {
+      this.setValue(this.value + Math.random() / 100);
+    };
+    this.stylesheetElement = this.createStylesheetElement();
+    this.progressElement = this.createProgressElement();
+    this.installStylesheetElement();
+    this.setValue(0);
   }
-  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;
+  static get defaultCSS() {
+    return unindent`
+      .turbo-progress-bar {
+        position: fixed;
+        display: block;
+        top: 0;
+        left: 0;
+        height: 3px;
+        background: #0076ff;
+        z-index: 9999;
+        transition:
+          width ${ProgressBar.animationDuration}ms ease-out,
+          opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;
+        transform: translate3d(0, 0, 0);
       }
+    `;
+  }
+  show() {
+    if (!this.visible) {
+      this.visible = true;
+      this.installProgressElement();
+      this.startTrickling();
     }
   }
-  async loadResponse(response) {
-    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();
+  hide() {
+    if (this.visible && !this.hiding) {
+      this.hiding = true;
+      this.fadeProgressElement((() => {
+        this.uninstallProgressElement();
+        this.stopTrickling();
+        this.visible = false;
+        this.hiding = false;
+      }));
     }
   }
-  elementAppearedInViewport(element) {
-    this.loadSourceURL();
+  setValue(value) {
+    this.value = value;
+    this.refresh();
   }
-  shouldInterceptLinkClick(element, url) {
-    return this.shouldInterceptNavigation(element);
+  installStylesheetElement() {
+    document.head.insertBefore(this.stylesheetElement, document.head.firstChild);
   }
-  linkClickIntercepted(element, url) {
-    this.navigateFrame(element, url);
+  installProgressElement() {
+    this.progressElement.style.width = "0";
+    this.progressElement.style.opacity = "1";
+    document.documentElement.insertBefore(this.progressElement, document.body);
+    this.refresh();
   }
-  shouldInterceptFormSubmission(element) {
-    return this.shouldInterceptNavigation(element);
+  fadeProgressElement(callback) {
+    this.progressElement.style.opacity = "0";
+    setTimeout(callback, ProgressBar.animationDuration * 1.5);
   }
-  formSubmissionIntercepted(element, submitter) {
-    if (this.formSubmission) {
-      this.formSubmission.stop();
+  uninstallProgressElement() {
+    if (this.progressElement.parentNode) {
+      document.documentElement.removeChild(this.progressElement);
     }
-    this.formSubmission = new FormSubmission(this, element, submitter);
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
-    } else {
-      this.formSubmission.start();
+  }
+  startTrickling() {
+    if (!this.trickleInterval) {
+      this.trickleInterval = window.setInterval(this.trickle, ProgressBar.animationDuration);
     }
   }
-  prepareHeadersForRequest(headers, request) {
-    headers["Turbo-Frame"] = this.id;
+  stopTrickling() {
+    window.clearInterval(this.trickleInterval);
+    delete this.trickleInterval;
   }
-  requestStarted(request) {
-    this.element.setAttribute("busy", "");
+  refresh() {
+    requestAnimationFrame((() => {
+      this.progressElement.style.width = `${10 + this.value * 90}%`;
+    }));
   }
-  requestPreventedHandlingResponse(request, response) {
-    this.resolveVisitPromise();
+  createStylesheetElement() {
+    const element = document.createElement("style");
+    element.type = "text/css";
+    element.textContent = ProgressBar.defaultCSS;
+    return element;
   }
-  async requestSucceededWithResponse(request, response) {
-    await this.loadResponse(response);
-    this.resolveVisitPromise();
+  createProgressElement() {
+    const element = document.createElement("div");
+    element.className = "turbo-progress-bar";
+    return element;
   }
-  requestFailedWithResponse(request, response) {
-    console.error(response);
-    this.resolveVisitPromise();
-  }
-  requestErrored(request, error) {
-    console.error(error);
-    this.resolveVisitPromise();
-  }
-  requestFinished(request) {
-    this.element.removeAttribute("busy");
-  }
-  formSubmissionStarted(formSubmission) {}
-  formSubmissionSucceededWithResponse(formSubmission, response) {
-    const frame = this.findFrameElement(formSubmission.formElement);
-    frame.delegate.loadResponse(response);
-  }
-  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
-    this.element.delegate.loadResponse(fetchResponse);
-  }
-  formSubmissionErrored(formSubmission, error) {}
-  formSubmissionFinished(formSubmission) {}
-  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);
-    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;
-  }
-  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 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 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;
-    this.value = 0;
-    this.visible = false;
-    this.trickle = () => {
-      this.setValue(this.value + Math.random() / 100);
-    };
-    this.stylesheetElement = this.createStylesheetElement();
-    this.progressElement = this.createProgressElement();
-    this.installStylesheetElement();
-    this.setValue(0);
-  }
-  static get defaultCSS() {
-    return unindent`
-      .turbo-progress-bar {
-        position: fixed;
-        display: block;
-        top: 0;
-        left: 0;
-        height: 3px;
-        background: #0076ff;
-        z-index: 9999;
-        transition:
-          width ${ProgressBar.animationDuration}ms ease-out,
-          opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;
-        transform: translate3d(0, 0, 0);
-      }
-    `;
-  }
-  show() {
-    if (!this.visible) {
-      this.visible = true;
-      this.installProgressElement();
-      this.startTrickling();
-    }
-  }
-  hide() {
-    if (this.visible && !this.hiding) {
-      this.hiding = true;
-      this.fadeProgressElement((() => {
-        this.uninstallProgressElement();
-        this.stopTrickling();
-        this.visible = false;
-        this.hiding = false;
-      }));
-    }
-  }
-  setValue(value) {
-    this.value = value;
-    this.refresh();
-  }
-  installStylesheetElement() {
-    document.head.insertBefore(this.stylesheetElement, document.head.firstChild);
-  }
-  installProgressElement() {
-    this.progressElement.style.width = "0";
-    this.progressElement.style.opacity = "1";
-    document.documentElement.insertBefore(this.progressElement, document.body);
-    this.refresh();
-  }
-  fadeProgressElement(callback) {
-    this.progressElement.style.opacity = "0";
-    setTimeout(callback, ProgressBar.animationDuration * 1.5);
-  }
-  uninstallProgressElement() {
-    if (this.progressElement.parentNode) {
-      document.documentElement.removeChild(this.progressElement);
-    }
-  }
-  startTrickling() {
-    if (!this.trickleInterval) {
-      this.trickleInterval = window.setInterval(this.trickle, ProgressBar.animationDuration);
-    }
-  }
-  stopTrickling() {
-    window.clearInterval(this.trickleInterval);
-    delete this.trickleInterval;
-  }
-  refresh() {
-    requestAnimationFrame((() => {
-      this.progressElement.style.width = `${10 + this.value * 90}%`;
-    }));
-  }
-  createStylesheetElement() {
-    const element = document.createElement("style");
-    element.type = "text/css";
-    element.textContent = ProgressBar.defaultCSS;
-    return element;
-  }
-  createProgressElement() {
-    const element = document.createElement("div");
-    element.className = "turbo-progress-bar";
-    return element;
-  }
-}
-
-ProgressBar.animationDuration = 300;
-
-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),
-        tracked: elementIsTracked(element),
-        elements: []
-      };
-      return Object.assign(Object.assign({}, result), {
-        [outerHTML]: Object.assign(Object.assign({}, details), {
-          elements: [ ...details.elements, element ]
-        })
-      });
-    }), {});
+}
+
+ProgressBar.animationDuration = 300;
+
+class HeadSnapshot extends Snapshot {
+  constructor() {
+    super(...arguments);
+    this.detailsByOuterHTML = this.children.filter((element => !elementIsNoscript(element))).reduce(((result, element) => {
+      const {outerHTML: outerHTML} = element;
+      const details = outerHTML in result ? result[outerHTML] : {
+        type: elementType(element),
+        tracked: elementIsTracked(element),
+        elements: []
+      };
+      return Object.assign(Object.assign({}, result), {
+        [outerHTML]: Object.assign(Object.assign({}, details), {
+          elements: [ ...details.elements, element ]
+        })
+      });
+    }), {});
   }
   get trackedElementSignature() {
     return Object.keys(this.detailsByOuterHTML).filter((outerHTML => this.detailsByOuterHTML[outerHTML].tracked)).join("");
@@ -1479,6 +1233,11 @@ function elementIsScript(element) {
   return tagName == "script";
 }
 
+function elementIsNoscript(element) {
+  const tagName = element.tagName.toLowerCase();
+  return tagName == "noscript";
+}
+
 function elementIsStylesheet(element) {
   const tagName = element.tagName.toLowerCase();
   return tagName == "style" || tagName == "link" && element.getAttribute("rel") == "stylesheet";
@@ -1581,6 +1340,7 @@ class Visit {
     this.referrer = referrer;
     this.snapshotHTML = snapshotHTML;
     this.response = response;
+    this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
   }
   get adapter() {
     return this.delegate.adapter;
@@ -1673,6 +1433,7 @@ class Visit {
       const {statusCode: statusCode, responseHTML: responseHTML} = this.response;
       this.render((async () => {
         this.cacheSnapshot();
+        if (this.view.renderPromise) await this.view.renderPromise;
         if (isSuccessful(statusCode) && responseHTML != null) {
           await this.view.renderPage(PageSnapshot.fromHTMLString(responseHTML));
           this.adapter.visitRendered(this);
@@ -1707,10 +1468,15 @@ class Visit {
       const isPreview = this.shouldIssueRequest();
       this.render((async () => {
         this.cacheSnapshot();
-        await this.view.renderPage(snapshot);
-        this.adapter.visitRendered(this);
-        if (!isPreview) {
-          this.complete();
+        if (this.isSamePage) {
+          this.adapter.visitRendered(this);
+        } else {
+          if (this.view.renderPromise) await this.view.renderPromise;
+          await this.view.renderPage(snapshot, isPreview);
+          this.adapter.visitRendered(this);
+          if (!isPreview) {
+            this.complete();
+          }
         }
       }));
     }
@@ -1722,6 +1488,14 @@ class Visit {
       this.followedRedirect = true;
     }
   }
+  goToSamePageAnchor() {
+    if (this.isSamePage) {
+      this.render((async () => {
+        this.cacheSnapshot();
+        this.adapter.visitRendered(this);
+      }));
+    }
+  }
   requestStarted() {
     this.startRequest();
   }
@@ -1764,10 +1538,13 @@ class Visit {
   performScroll() {
     if (!this.scrolled) {
       if (this.action == "restore") {
-        this.scrollToRestoredPosition() || this.scrollToTop();
+        this.scrollToRestoredPosition() || this.scrollToAnchor() || this.scrollToTop();
       } else {
         this.scrollToAnchor() || this.scrollToTop();
       }
+      if (this.isSamePage) {
+        this.delegate.visitScrolledToSamePageLocation(this.view.lastRenderedLocation, this.location);
+      }
       this.scrolled = true;
     }
   }
@@ -1779,8 +1556,9 @@ class Visit {
     }
   }
   scrollToAnchor() {
-    if (getAnchor(this.location) != null) {
-      this.view.scrollToAnchor(getAnchor(this.location));
+    const anchor = getAnchor(this.location);
+    if (anchor != null) {
+      this.view.scrollToAnchor(anchor);
       return true;
     }
   }
@@ -1810,7 +1588,13 @@ class Visit {
     return typeof this.response == "object";
   }
   shouldIssueRequest() {
-    return this.action == "restore" ? !this.hasCachedSnapshot() : true;
+    if (this.isSamePage) {
+      return false;
+    } else if (this.action == "restore") {
+      return !this.hasCachedSnapshot();
+    } else {
+      return true;
+    }
   }
   cacheSnapshot() {
     if (!this.snapshotCached) {
@@ -1823,7 +1607,7 @@ class Visit {
     await new Promise((resolve => {
       this.frame = requestAnimationFrame((() => resolve()));
     }));
-    callback();
+    await callback();
     delete this.frame;
     this.performScroll();
   }
@@ -1853,6 +1637,7 @@ class BrowserAdapter {
   visitStarted(visit) {
     visit.issueRequest();
     visit.changeHistory();
+    visit.goToSamePageAnchor();
     visit.loadCachedSnapshot();
   }
   visitRequestStarted(visit) {
@@ -1907,6 +1692,30 @@ class BrowserAdapter {
   }
 }
 
+class CacheObserver {
+  constructor() {
+    this.started = false;
+  }
+  start() {
+    if (!this.started) {
+      this.started = true;
+      addEventListener("turbo:before-cache", this.removeStaleElements, false);
+    }
+  }
+  stop() {
+    if (this.started) {
+      this.started = false;
+      removeEventListener("turbo:before-cache", this.removeStaleElements, false);
+    }
+  }
+  removeStaleElements() {
+    const staleElements = [ ...document.querySelectorAll('[data-turbo-cache="false"]') ];
+    for (const element of staleElements) {
+      element.remove();
+    }
+  }
+}
+
 class FormSubmitObserver {
   constructor(delegate) {
     this.started = false;
@@ -1990,812 +1799,1295 @@ class FrameRedirector {
   }
 }
 
-class History {
+class History {
+  constructor(delegate) {
+    this.restorationIdentifier = uuid();
+    this.restorationData = {};
+    this.started = false;
+    this.pageLoaded = false;
+    this.onPopState = event => {
+      if (this.shouldHandlePopState()) {
+        const {turbo: turbo} = event.state || {};
+        if (turbo) {
+          this.location = new URL(window.location.href);
+          const {restorationIdentifier: restorationIdentifier} = turbo;
+          this.restorationIdentifier = restorationIdentifier;
+          this.delegate.historyPoppedToLocationWithRestorationIdentifier(this.location, restorationIdentifier);
+        }
+      }
+    };
+    this.onPageLoad = async event => {
+      await nextMicrotask();
+      this.pageLoaded = true;
+    };
+    this.delegate = delegate;
+  }
+  start() {
+    if (!this.started) {
+      addEventListener("popstate", this.onPopState, false);
+      addEventListener("load", this.onPageLoad, false);
+      this.started = true;
+      this.replace(new URL(window.location.href));
+    }
+  }
+  stop() {
+    if (this.started) {
+      removeEventListener("popstate", this.onPopState, false);
+      removeEventListener("load", this.onPageLoad, false);
+      this.started = false;
+    }
+  }
+  push(location, restorationIdentifier) {
+    this.update(history.pushState, location, restorationIdentifier);
+  }
+  replace(location, restorationIdentifier) {
+    this.update(history.replaceState, location, restorationIdentifier);
+  }
+  update(method, location, restorationIdentifier = uuid()) {
+    const state = {
+      turbo: {
+        restorationIdentifier: restorationIdentifier
+      }
+    };
+    method.call(history, state, "", location.href);
+    this.location = location;
+    this.restorationIdentifier = restorationIdentifier;
+  }
+  getRestorationDataForIdentifier(restorationIdentifier) {
+    return this.restorationData[restorationIdentifier] || {};
+  }
+  updateRestorationData(additionalData) {
+    const {restorationIdentifier: restorationIdentifier} = this;
+    const restorationData = this.restorationData[restorationIdentifier];
+    this.restorationData[restorationIdentifier] = Object.assign(Object.assign({}, restorationData), additionalData);
+  }
+  assumeControlOfScrollRestoration() {
+    var _a;
+    if (!this.previousScrollRestoration) {
+      this.previousScrollRestoration = (_a = history.scrollRestoration) !== null && _a !== void 0 ? _a : "auto";
+      history.scrollRestoration = "manual";
+    }
+  }
+  relinquishControlOfScrollRestoration() {
+    if (this.previousScrollRestoration) {
+      history.scrollRestoration = this.previousScrollRestoration;
+      delete this.previousScrollRestoration;
+    }
+  }
+  shouldHandlePopState() {
+    return this.pageIsLoaded();
+  }
+  pageIsLoaded() {
+    return this.pageLoaded || document.readyState == "complete";
+  }
+}
+
+class LinkClickObserver {
+  constructor(delegate) {
+    this.started = false;
+    this.clickCaptured = () => {
+      removeEventListener("click", this.clickBubbled, false);
+      addEventListener("click", this.clickBubbled, false);
+    };
+    this.clickBubbled = event => {
+      if (this.clickEventIsSignificant(event)) {
+        const link = this.findLinkFromClickTarget(event.target);
+        if (link) {
+          const location = this.getLocationForLink(link);
+          if (this.delegate.willFollowLinkToLocation(link, location)) {
+            event.preventDefault();
+            this.delegate.followedLinkToLocation(link, location);
+          }
+        }
+      }
+    };
+    this.delegate = delegate;
+  }
+  start() {
+    if (!this.started) {
+      addEventListener("click", this.clickCaptured, true);
+      this.started = true;
+    }
+  }
+  stop() {
+    if (this.started) {
+      removeEventListener("click", this.clickCaptured, true);
+      this.started = false;
+    }
+  }
+  clickEventIsSignificant(event) {
+    return !(event.target && event.target.isContentEditable || event.defaultPrevented || event.which > 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
+  }
+  findLinkFromClickTarget(target) {
+    if (target instanceof Element) {
+      return target.closest("a[href]:not([target^=_]):not([download])");
+    }
+  }
+  getLocationForLink(link) {
+    return expandURL(link.getAttribute("href") || "");
+  }
+}
+
+function isAction(action) {
+  return action == "advance" || action == "replace" || action == "restore";
+}
+
+class Navigator {
+  constructor(delegate) {
+    this.delegate = delegate;
+  }
+  proposeVisit(location, options = {}) {
+    if (this.delegate.allowsVisitingLocation(location)) {
+      this.delegate.visitProposedToLocation(location, options);
+    }
+  }
+  startVisit(locatable, restorationIdentifier, options = {}) {
+    this.stop();
+    this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, Object.assign({
+      referrer: this.location
+    }, options));
+    this.currentVisit.start();
+  }
+  submitForm(form, submitter) {
+    this.stop();
+    this.formSubmission = new FormSubmission(this, form, submitter, true);
+    if (this.formSubmission.isIdempotent) {
+      this.proposeVisit(this.formSubmission.fetchRequest.url, {
+        action: this.getActionForFormSubmission(this.formSubmission)
+      });
+    } else {
+      this.formSubmission.start();
+    }
+  }
+  stop() {
+    if (this.formSubmission) {
+      this.formSubmission.stop();
+      delete this.formSubmission;
+    }
+    if (this.currentVisit) {
+      this.currentVisit.cancel();
+      delete this.currentVisit;
+    }
+  }
+  get adapter() {
+    return this.delegate.adapter;
+  }
+  get view() {
+    return this.delegate.view;
+  }
+  get history() {
+    return this.delegate.history;
+  }
+  formSubmissionStarted(formSubmission) {}
+  async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
+    if (formSubmission == this.formSubmission) {
+      const responseHTML = await fetchResponse.responseHTML;
+      if (responseHTML) {
+        if (formSubmission.method != FetchMethod.get) {
+          this.view.clearSnapshotCache();
+        }
+        const {statusCode: statusCode} = fetchResponse;
+        const visitOptions = {
+          response: {
+            statusCode: statusCode,
+            responseHTML: responseHTML
+          }
+        };
+        this.proposeVisit(fetchResponse.location, visitOptions);
+      }
+    }
+  }
+  async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    const responseHTML = await fetchResponse.responseHTML;
+    if (responseHTML) {
+      const snapshot = PageSnapshot.fromHTMLString(responseHTML);
+      await this.view.renderPage(snapshot);
+      this.view.clearSnapshotCache();
+    }
+  }
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
+  }
+  formSubmissionFinished(formSubmission) {}
+  visitStarted(visit) {
+    this.delegate.visitStarted(visit);
+  }
+  visitCompleted(visit) {
+    this.delegate.visitCompleted(visit);
+  }
+  locationWithActionIsSamePage(location, action) {
+    return getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) && (getAnchor(location) != null || action == "restore");
+  }
+  visitScrolledToSamePageLocation(oldURL, newURL) {
+    this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
+  }
+  get location() {
+    return this.history.location;
+  }
+  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;
+
+(function(PageStage) {
+  PageStage[PageStage["initial"] = 0] = "initial";
+  PageStage[PageStage["loading"] = 1] = "loading";
+  PageStage[PageStage["interactive"] = 2] = "interactive";
+  PageStage[PageStage["complete"] = 3] = "complete";
+})(PageStage || (PageStage = {}));
+
+class PageObserver {
   constructor(delegate) {
-    this.restorationIdentifier = uuid();
-    this.restorationData = {};
+    this.stage = PageStage.initial;
     this.started = false;
-    this.pageLoaded = false;
-    this.onPopState = event => {
-      if (this.shouldHandlePopState()) {
-        const {turbo: turbo} = event.state || {};
-        if (turbo) {
-          this.location = new URL(window.location.href);
-          const {restorationIdentifier: restorationIdentifier} = turbo;
-          this.restorationIdentifier = restorationIdentifier;
-          this.delegate.historyPoppedToLocationWithRestorationIdentifier(this.location, restorationIdentifier);
-        }
+    this.interpretReadyState = () => {
+      const {readyState: readyState} = this;
+      if (readyState == "interactive") {
+        this.pageIsInteractive();
+      } else if (readyState == "complete") {
+        this.pageIsComplete();
       }
     };
-    this.onPageLoad = async event => {
-      await nextMicrotask();
-      this.pageLoaded = true;
+    this.pageWillUnload = () => {
+      this.delegate.pageWillUnload();
     };
     this.delegate = delegate;
   }
   start() {
     if (!this.started) {
-      addEventListener("popstate", this.onPopState, false);
-      addEventListener("load", this.onPageLoad, false);
+      if (this.stage == PageStage.initial) {
+        this.stage = PageStage.loading;
+      }
+      document.addEventListener("readystatechange", this.interpretReadyState, false);
+      addEventListener("pagehide", this.pageWillUnload, false);
       this.started = true;
-      this.replace(new URL(window.location.href));
     }
   }
   stop() {
     if (this.started) {
-      removeEventListener("popstate", this.onPopState, false);
-      removeEventListener("load", this.onPageLoad, false);
+      document.removeEventListener("readystatechange", this.interpretReadyState, false);
+      removeEventListener("pagehide", this.pageWillUnload, false);
       this.started = false;
     }
   }
-  push(location, restorationIdentifier) {
-    this.update(history.pushState, location, restorationIdentifier);
-  }
-  replace(location, restorationIdentifier) {
-    this.update(history.replaceState, location, restorationIdentifier);
+  pageIsInteractive() {
+    if (this.stage == PageStage.loading) {
+      this.stage = PageStage.interactive;
+      this.delegate.pageBecameInteractive();
+    }
   }
-  update(method, location, restorationIdentifier = uuid()) {
-    const state = {
-      turbo: {
-        restorationIdentifier: restorationIdentifier
-      }
-    };
-    method.call(history, state, "", location.href);
-    this.location = location;
-    this.restorationIdentifier = restorationIdentifier;
+  pageIsComplete() {
+    this.pageIsInteractive();
+    if (this.stage == PageStage.interactive) {
+      this.stage = PageStage.complete;
+      this.delegate.pageLoaded();
+    }
   }
-  getRestorationDataForIdentifier(restorationIdentifier) {
-    return this.restorationData[restorationIdentifier] || {};
+  get readyState() {
+    return document.readyState;
   }
-  updateRestorationData(additionalData) {
-    const {restorationIdentifier: restorationIdentifier} = this;
-    const restorationData = this.restorationData[restorationIdentifier];
-    this.restorationData[restorationIdentifier] = Object.assign(Object.assign({}, restorationData), additionalData);
+}
+
+class ScrollObserver {
+  constructor(delegate) {
+    this.started = false;
+    this.onScroll = () => {
+      this.updatePosition({
+        x: window.pageXOffset,
+        y: window.pageYOffset
+      });
+    };
+    this.delegate = delegate;
   }
-  assumeControlOfScrollRestoration() {
-    var _a;
-    if (!this.previousScrollRestoration) {
-      this.previousScrollRestoration = (_a = history.scrollRestoration) !== null && _a !== void 0 ? _a : "auto";
-      history.scrollRestoration = "manual";
+  start() {
+    if (!this.started) {
+      addEventListener("scroll", this.onScroll, false);
+      this.onScroll();
+      this.started = true;
     }
   }
-  relinquishControlOfScrollRestoration() {
-    if (this.previousScrollRestoration) {
-      history.scrollRestoration = this.previousScrollRestoration;
-      delete this.previousScrollRestoration;
+  stop() {
+    if (this.started) {
+      removeEventListener("scroll", this.onScroll, false);
+      this.started = false;
     }
   }
-  shouldHandlePopState() {
-    return this.pageIsLoaded();
-  }
-  pageIsLoaded() {
-    return this.pageLoaded || document.readyState == "complete";
+  updatePosition(position) {
+    this.delegate.scrollPositionChanged(position);
   }
 }
 
-class LinkClickObserver {
+class StreamObserver {
   constructor(delegate) {
+    this.sources = new Set;
     this.started = false;
-    this.clickCaptured = () => {
-      removeEventListener("click", this.clickBubbled, false);
-      addEventListener("click", this.clickBubbled, false);
+    this.inspectFetchResponse = event => {
+      const response = fetchResponseFromEvent(event);
+      if (response && fetchResponseIsStream(response)) {
+        event.preventDefault();
+        this.receiveMessageResponse(response);
+      }
     };
-    this.clickBubbled = event => {
-      if (this.clickEventIsSignificant(event)) {
-        const link = this.findLinkFromClickTarget(event.target);
-        if (link) {
-          const location = this.getLocationForLink(link);
-          if (this.delegate.willFollowLinkToLocation(link, location)) {
-            event.preventDefault();
-            this.delegate.followedLinkToLocation(link, location);
-          }
-        }
+    this.receiveMessageEvent = event => {
+      if (this.started && typeof event.data == "string") {
+        this.receiveMessageHTML(event.data);
       }
     };
     this.delegate = delegate;
   }
   start() {
     if (!this.started) {
-      addEventListener("click", this.clickCaptured, true);
       this.started = true;
+      addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
   }
   stop() {
     if (this.started) {
-      removeEventListener("click", this.clickCaptured, true);
       this.started = false;
+      removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
   }
-  clickEventIsSignificant(event) {
-    return !(event.target && event.target.isContentEditable || event.defaultPrevented || event.which > 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
+  connectStreamSource(source) {
+    if (!this.streamSourceIsConnected(source)) {
+      this.sources.add(source);
+      source.addEventListener("message", this.receiveMessageEvent, false);
+    }
   }
-  findLinkFromClickTarget(target) {
-    if (target instanceof Element) {
-      return target.closest("a[href]:not([target^=_]):not([download])");
+  disconnectStreamSource(source) {
+    if (this.streamSourceIsConnected(source)) {
+      this.sources.delete(source);
+      source.removeEventListener("message", this.receiveMessageEvent, false);
     }
   }
-  getLocationForLink(link) {
-    return expandURL(link.getAttribute("href") || "");
+  streamSourceIsConnected(source) {
+    return this.sources.has(source);
+  }
+  async receiveMessageResponse(response) {
+    const html = await response.responseHTML;
+    if (html) {
+      this.receiveMessageHTML(html);
+    }
+  }
+  receiveMessageHTML(html) {
+    this.delegate.receivedMessageFromStream(new StreamMessage(html));
   }
 }
 
-class Navigator {
-  constructor(delegate) {
-    this.delegate = delegate;
+function fetchResponseFromEvent(event) {
+  var _a;
+  const fetchResponse = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.fetchResponse;
+  if (fetchResponse instanceof FetchResponse) {
+    return fetchResponse;
   }
-  proposeVisit(location, options = {}) {
-    if (this.delegate.allowsVisitingLocation(location)) {
-      this.delegate.visitProposedToLocation(location, options);
+}
+
+function fetchResponseIsStream(response) {
+  var _a;
+  const contentType = (_a = response.contentType) !== null && _a !== void 0 ? _a : "";
+  return contentType.startsWith(StreamMessage.contentType);
+}
+
+class ErrorRenderer extends Renderer {
+  async render() {
+    this.replaceHeadAndBody();
+    this.activateScriptElements();
+  }
+  replaceHeadAndBody() {
+    const {documentElement: documentElement, head: head, body: body} = document;
+    documentElement.replaceChild(this.newHead, head);
+    documentElement.replaceChild(this.newElement, body);
+  }
+  activateScriptElements() {
+    for (const replaceableElement of this.scriptElements) {
+      const parentNode = replaceableElement.parentNode;
+      if (parentNode) {
+        const element = this.createScriptElement(replaceableElement);
+        parentNode.replaceChild(element, replaceableElement);
+      }
     }
   }
-  startVisit(locatable, restorationIdentifier, options = {}) {
-    this.stop();
-    this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, Object.assign({
-      referrer: this.location
-    }, options));
-    this.currentVisit.start();
+  get newHead() {
+    return this.newSnapshot.headSnapshot.element;
+  }
+  get scriptElements() {
+    return [ ...document.documentElement.querySelectorAll("script") ];
+  }
+}
+
+class PageRenderer extends Renderer {
+  get shouldRender() {
+    return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
+  }
+  prepareToRender() {
+    this.mergeHead();
+  }
+  async render() {
+    this.replaceBody();
+  }
+  finishRendering() {
+    super.finishRendering();
+    if (!this.isPreview) {
+      this.focusFirstAutofocusableElement();
+    }
+  }
+  get currentHeadSnapshot() {
+    return this.currentSnapshot.headSnapshot;
+  }
+  get newHeadSnapshot() {
+    return this.newSnapshot.headSnapshot;
+  }
+  get newElement() {
+    return this.newSnapshot.element;
+  }
+  mergeHead() {
+    this.copyNewHeadStylesheetElements();
+    this.copyNewHeadScriptElements();
+    this.removeCurrentHeadProvisionalElements();
+    this.copyNewHeadProvisionalElements();
+  }
+  replaceBody() {
+    this.preservingPermanentElements((() => {
+      this.activateNewBody();
+      this.assignNewBody();
+    }));
+  }
+  get trackedElementsAreIdentical() {
+    return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
   }
-  submitForm(form, submitter) {
-    this.stop();
-    this.formSubmission = new FormSubmission(this, form, submitter, true);
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.proposeVisit(this.formSubmission.fetchRequest.url);
-    } else {
-      this.formSubmission.start();
+  copyNewHeadStylesheetElements() {
+    for (const element of this.newHeadStylesheetElements) {
+      document.head.appendChild(element);
     }
   }
-  stop() {
-    if (this.formSubmission) {
-      this.formSubmission.stop();
-      delete this.formSubmission;
-    }
-    if (this.currentVisit) {
-      this.currentVisit.cancel();
-      delete this.currentVisit;
+  copyNewHeadScriptElements() {
+    for (const element of this.newHeadScriptElements) {
+      document.head.appendChild(this.createScriptElement(element));
     }
   }
-  get adapter() {
-    return this.delegate.adapter;
+  removeCurrentHeadProvisionalElements() {
+    for (const element of this.currentHeadProvisionalElements) {
+      document.head.removeChild(element);
+    }
   }
-  get view() {
-    return this.delegate.view;
+  copyNewHeadProvisionalElements() {
+    for (const element of this.newHeadProvisionalElements) {
+      document.head.appendChild(element);
+    }
   }
-  get history() {
-    return this.delegate.history;
+  activateNewBody() {
+    document.adoptNode(this.newElement);
+    this.activateNewBodyScriptElements();
   }
-  formSubmissionStarted(formSubmission) {}
-  async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
-    if (formSubmission == this.formSubmission) {
-      const responseHTML = await fetchResponse.responseHTML;
-      if (responseHTML) {
-        if (formSubmission.method != FetchMethod.get) {
-          this.view.clearSnapshotCache();
-        }
-        const {statusCode: statusCode} = fetchResponse;
-        const visitOptions = {
-          response: {
-            statusCode: statusCode,
-            responseHTML: responseHTML
-          }
-        };
-        this.proposeVisit(fetchResponse.location, visitOptions);
-      }
+  activateNewBodyScriptElements() {
+    for (const inertScriptElement of this.newBodyScriptElements) {
+      const activatedScriptElement = this.createScriptElement(inertScriptElement);
+      inertScriptElement.replaceWith(activatedScriptElement);
     }
   }
-  async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
-    const responseHTML = await fetchResponse.responseHTML;
-    if (responseHTML) {
-      const snapshot = PageSnapshot.fromHTMLString(responseHTML);
-      await this.view.renderPage(snapshot);
-      this.view.clearSnapshotCache();
+  assignNewBody() {
+    if (document.body && this.newElement instanceof HTMLBodyElement) {
+      document.body.replaceWith(this.newElement);
+    } else {
+      document.documentElement.appendChild(this.newElement);
     }
   }
-  formSubmissionErrored(formSubmission, error) {}
-  formSubmissionFinished(formSubmission) {}
-  visitStarted(visit) {
-    this.delegate.visitStarted(visit);
+  get newHeadStylesheetElements() {
+    return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
   }
-  visitCompleted(visit) {
-    this.delegate.visitCompleted(visit);
+  get newHeadScriptElements() {
+    return this.newHeadSnapshot.getScriptElementsNotInSnapshot(this.currentHeadSnapshot);
   }
-  get location() {
-    return this.history.location;
+  get currentHeadProvisionalElements() {
+    return this.currentHeadSnapshot.provisionalElements;
   }
-  get restorationIdentifier() {
-    return this.history.restorationIdentifier;
+  get newHeadProvisionalElements() {
+    return this.newHeadSnapshot.provisionalElements;
+  }
+  get newBodyScriptElements() {
+    return this.newElement.querySelectorAll("script");
   }
 }
 
-var PageStage;
-
-(function(PageStage) {
-  PageStage[PageStage["initial"] = 0] = "initial";
-  PageStage[PageStage["loading"] = 1] = "loading";
-  PageStage[PageStage["interactive"] = 2] = "interactive";
-  PageStage[PageStage["complete"] = 3] = "complete";
-})(PageStage || (PageStage = {}));
-
-class PageObserver {
-  constructor(delegate) {
-    this.stage = PageStage.initial;
-    this.started = false;
-    this.interpretReadyState = () => {
-      const {readyState: readyState} = this;
-      if (readyState == "interactive") {
-        this.pageIsInteractive();
-      } else if (readyState == "complete") {
-        this.pageIsComplete();
-      }
-    };
-    this.pageWillUnload = () => {
-      this.delegate.pageWillUnload();
-    };
-    this.delegate = delegate;
+class SnapshotCache {
+  constructor(size) {
+    this.keys = [];
+    this.snapshots = {};
+    this.size = size;
   }
-  start() {
-    if (!this.started) {
-      if (this.stage == PageStage.initial) {
-        this.stage = PageStage.loading;
-      }
-      document.addEventListener("readystatechange", this.interpretReadyState, false);
-      addEventListener("pagehide", this.pageWillUnload, false);
-      this.started = true;
-    }
+  has(location) {
+    return toCacheKey(location) in this.snapshots;
   }
-  stop() {
-    if (this.started) {
-      document.removeEventListener("readystatechange", this.interpretReadyState, false);
-      removeEventListener("pagehide", this.pageWillUnload, false);
-      this.started = false;
+  get(location) {
+    if (this.has(location)) {
+      const snapshot = this.read(location);
+      this.touch(location);
+      return snapshot;
     }
   }
-  pageIsInteractive() {
-    if (this.stage == PageStage.loading) {
-      this.stage = PageStage.interactive;
-      this.delegate.pageBecameInteractive();
-    }
+  put(location, snapshot) {
+    this.write(location, snapshot);
+    this.touch(location);
+    return snapshot;
   }
-  pageIsComplete() {
-    this.pageIsInteractive();
-    if (this.stage == PageStage.interactive) {
-      this.stage = PageStage.complete;
-      this.delegate.pageLoaded();
-    }
+  clear() {
+    this.snapshots = {};
   }
-  get readyState() {
-    return document.readyState;
+  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];
+    }
   }
 }
 
-class ScrollObserver {
-  constructor(delegate) {
-    this.started = false;
-    this.onScroll = () => {
-      this.updatePosition({
-        x: window.pageXOffset,
-        y: window.pageYOffset
-      });
-    };
-    this.delegate = delegate;
+class PageView extends View {
+  constructor() {
+    super(...arguments);
+    this.snapshotCache = new SnapshotCache(10);
+    this.lastRenderedLocation = new URL(location.href);
   }
-  start() {
-    if (!this.started) {
-      addEventListener("scroll", this.onScroll, false);
-      this.onScroll();
-      this.started = true;
-    }
+  renderPage(snapshot, isPreview = false) {
+    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
+    return this.render(renderer);
   }
-  stop() {
-    if (this.started) {
-      removeEventListener("scroll", this.onScroll, false);
-      this.started = false;
+  renderError(snapshot) {
+    const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
+    return this.render(renderer);
+  }
+  clearSnapshotCache() {
+    this.snapshotCache.clear();
+  }
+  async cacheSnapshot() {
+    if (this.shouldCacheSnapshot) {
+      this.delegate.viewWillCacheSnapshot();
+      const {snapshot: snapshot, lastRenderedLocation: location} = this;
+      await nextEventLoopTick();
+      this.snapshotCache.put(location, snapshot.clone());
     }
   }
-  updatePosition(position) {
-    this.delegate.scrollPositionChanged(position);
+  getCachedSnapshotForLocation(location) {
+    return this.snapshotCache.get(location);
+  }
+  get snapshot() {
+    return PageSnapshot.fromElement(this.element);
+  }
+  get shouldCacheSnapshot() {
+    return this.snapshot.isCacheable;
   }
 }
 
-class StreamObserver {
-  constructor(delegate) {
-    this.sources = new Set;
+class Session {
+  constructor() {
+    this.navigator = new Navigator(this);
+    this.history = new History(this);
+    this.view = new PageView(this, document.documentElement);
+    this.adapter = new BrowserAdapter(this);
+    this.pageObserver = new PageObserver(this);
+    this.cacheObserver = new CacheObserver;
+    this.linkClickObserver = new LinkClickObserver(this);
+    this.formSubmitObserver = new FormSubmitObserver(this);
+    this.scrollObserver = new ScrollObserver(this);
+    this.streamObserver = new StreamObserver(this);
+    this.frameRedirector = new FrameRedirector(document.documentElement);
+    this.enabled = true;
+    this.progressBarDelay = 500;
     this.started = false;
-    this.inspectFetchResponse = event => {
-      const response = fetchResponseFromEvent(event);
-      if (response && fetchResponseIsStream(response)) {
-        event.preventDefault();
-        this.receiveMessageResponse(response);
-      }
-    };
-    this.receiveMessageEvent = event => {
-      if (this.started && typeof event.data == "string") {
-        this.receiveMessageHTML(event.data);
-      }
-    };
-    this.delegate = delegate;
   }
   start() {
     if (!this.started) {
+      this.pageObserver.start();
+      this.cacheObserver.start();
+      this.linkClickObserver.start();
+      this.formSubmitObserver.start();
+      this.scrollObserver.start();
+      this.streamObserver.start();
+      this.frameRedirector.start();
+      this.history.start();
       this.started = true;
-      addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
+      this.enabled = true;
     }
   }
+  disable() {
+    this.enabled = false;
+  }
   stop() {
     if (this.started) {
+      this.pageObserver.stop();
+      this.cacheObserver.stop();
+      this.linkClickObserver.stop();
+      this.formSubmitObserver.stop();
+      this.scrollObserver.stop();
+      this.streamObserver.stop();
+      this.frameRedirector.stop();
+      this.history.stop();
       this.started = false;
-      removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
   }
+  registerAdapter(adapter) {
+    this.adapter = adapter;
+  }
+  visit(location, options = {}) {
+    this.navigator.proposeVisit(expandURL(location), options);
+  }
   connectStreamSource(source) {
-    if (!this.streamSourceIsConnected(source)) {
-      this.sources.add(source);
-      source.addEventListener("message", this.receiveMessageEvent, false);
-    }
+    this.streamObserver.connectStreamSource(source);
   }
   disconnectStreamSource(source) {
-    if (this.streamSourceIsConnected(source)) {
-      this.sources.delete(source);
-      source.removeEventListener("message", this.receiveMessageEvent, false);
+    this.streamObserver.disconnectStreamSource(source);
+  }
+  renderStreamMessage(message) {
+    document.documentElement.appendChild(StreamMessage.wrap(message).fragment);
+  }
+  clearCache() {
+    this.view.clearSnapshotCache();
+  }
+  setProgressBarDelay(delay) {
+    this.progressBarDelay = delay;
+  }
+  get location() {
+    return this.history.location;
+  }
+  get restorationIdentifier() {
+    return this.history.restorationIdentifier;
+  }
+  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
+    if (this.enabled) {
+      this.navigator.startVisit(location, restorationIdentifier, {
+        action: "restore",
+        historyChanged: true
+      });
+    } else {
+      this.adapter.pageInvalidated();
     }
   }
-  streamSourceIsConnected(source) {
-    return this.sources.has(source);
+  scrollPositionChanged(position) {
+    this.history.updateRestorationData({
+      scrollPosition: position
+    });
   }
-  async receiveMessageResponse(response) {
-    const html = await response.responseHTML;
-    if (html) {
-      this.receiveMessageHTML(html);
+  willFollowLinkToLocation(link, location) {
+    return elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  }
+  followedLinkToLocation(link, location) {
+    const action = this.getActionForLink(link);
+    this.convertLinkWithMethodClickToFormSubmission(link) || this.visit(location.href, {
+      action: action
+    });
+  }
+  convertLinkWithMethodClickToFormSubmission(link) {
+    var _a;
+    const linkMethod = link.getAttribute("data-turbo-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", {
+        cancelable: true,
+        target: form
+      });
+    } else {
+      return false;
     }
   }
-  receiveMessageHTML(html) {
-    this.delegate.receivedMessageFromStream(new StreamMessage(html));
+  allowsVisitingLocation(location) {
+    return this.applicationAllowsVisitingLocation(location);
   }
-}
-
-function fetchResponseFromEvent(event) {
-  var _a;
-  const fetchResponse = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.fetchResponse;
-  if (fetchResponse instanceof FetchResponse) {
-    return fetchResponse;
+  visitProposedToLocation(location, options) {
+    extendURLWithDeprecatedProperties(location);
+    this.adapter.visitProposedToLocation(location, options);
   }
-}
-
-function fetchResponseIsStream(response) {
-  var _a;
-  const contentType = (_a = response.contentType) !== null && _a !== void 0 ? _a : "";
-  return contentType.startsWith(StreamMessage.contentType);
-}
-
-function isAction(action) {
-  return action == "advance" || action == "replace" || action == "restore";
-}
-
-class ErrorRenderer extends Renderer {
-  async render() {
-    this.replaceHeadAndBody();
-    this.activateScriptElements();
+  visitStarted(visit) {
+    extendURLWithDeprecatedProperties(visit.location);
+    this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
   }
-  replaceHeadAndBody() {
-    const {documentElement: documentElement, head: head, body: body} = document;
-    documentElement.replaceChild(this.newHead, head);
-    documentElement.replaceChild(this.newElement, body);
+  visitCompleted(visit) {
+    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
-  activateScriptElements() {
-    for (const replaceableElement of this.scriptElements) {
-      const parentNode = replaceableElement.parentNode;
-      if (parentNode) {
-        const element = this.createScriptElement(replaceableElement);
-        parentNode.replaceChild(element, replaceableElement);
-      }
-    }
+  locationWithActionIsSamePage(location, action) {
+    return this.navigator.locationWithActionIsSamePage(location, action);
   }
-  get newHead() {
-    return this.newSnapshot.headSnapshot.element;
+  visitScrolledToSamePageLocation(oldURL, newURL) {
+    this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
   }
-  get scriptElements() {
-    return [ ...document.documentElement.querySelectorAll("script") ];
+  willSubmitForm(form, submitter) {
+    return elementIsNavigable(form) && elementIsNavigable(submitter);
   }
-}
-
-class PageRenderer extends Renderer {
-  get shouldRender() {
-    return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical;
+  formSubmitted(form, submitter) {
+    this.navigator.submitForm(form, submitter);
   }
-  prepareToRender() {
-    this.mergeHead();
+  pageBecameInteractive() {
+    this.view.lastRenderedLocation = this.location;
+    this.notifyApplicationAfterPageLoad();
   }
-  async render() {
-    this.replaceBody();
+  pageLoaded() {
+    this.history.assumeControlOfScrollRestoration();
   }
-  finishRendering() {
-    super.finishRendering();
-    if (this.isPreview) {
-      this.focusFirstAutofocusableElement();
-    }
+  pageWillUnload() {
+    this.history.relinquishControlOfScrollRestoration();
   }
-  get currentHeadSnapshot() {
-    return this.currentSnapshot.headSnapshot;
+  receivedMessageFromStream(message) {
+    this.renderStreamMessage(message);
   }
-  get newHeadSnapshot() {
-    return this.newSnapshot.headSnapshot;
+  viewWillCacheSnapshot() {
+    this.notifyApplicationBeforeCachingSnapshot();
   }
-  get newElement() {
-    return this.newSnapshot.element;
+  allowsImmediateRender({element: element}, resume) {
+    const event = this.notifyApplicationBeforeRender(element, resume);
+    return !event.defaultPrevented;
   }
-  mergeHead() {
-    this.copyNewHeadStylesheetElements();
-    this.copyNewHeadScriptElements();
-    this.removeCurrentHeadProvisionalElements();
-    this.copyNewHeadProvisionalElements();
+  viewRenderedSnapshot(snapshot, isPreview) {
+    this.view.lastRenderedLocation = this.history.location;
+    this.notifyApplicationAfterRender();
   }
-  replaceBody() {
-    this.preservingPermanentElements((() => {
-      this.activateNewBody();
-      this.assignNewBody();
-    }));
+  viewInvalidated() {
+    this.adapter.pageInvalidated();
   }
-  get trackedElementsAreIdentical() {
-    return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature;
+  applicationAllowsFollowingLinkToLocation(link, location) {
+    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
+    return !event.defaultPrevented;
   }
-  copyNewHeadStylesheetElements() {
-    for (const element of this.newHeadStylesheetElements) {
-      document.head.appendChild(element);
-    }
+  applicationAllowsVisitingLocation(location) {
+    const event = this.notifyApplicationBeforeVisitingLocation(location);
+    return !event.defaultPrevented;
   }
-  copyNewHeadScriptElements() {
-    for (const element of this.newHeadScriptElements) {
-      document.head.appendChild(this.createScriptElement(element));
-    }
+  notifyApplicationAfterClickingLinkToLocation(link, location) {
+    return dispatch("turbo:click", {
+      target: link,
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
   }
-  removeCurrentHeadProvisionalElements() {
-    for (const element of this.currentHeadProvisionalElements) {
-      document.head.removeChild(element);
-    }
+  notifyApplicationBeforeVisitingLocation(location) {
+    return dispatch("turbo:before-visit", {
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
   }
-  copyNewHeadProvisionalElements() {
-    for (const element of this.newHeadProvisionalElements) {
-      document.head.appendChild(element);
-    }
+  notifyApplicationAfterVisitingLocation(location, action) {
+    return dispatch("turbo:visit", {
+      detail: {
+        url: location.href,
+        action: action
+      }
+    });
   }
-  activateNewBody() {
-    document.adoptNode(this.newElement);
-    this.activateNewBodyScriptElements();
+  notifyApplicationBeforeCachingSnapshot() {
+    return dispatch("turbo:before-cache");
   }
-  activateNewBodyScriptElements() {
-    for (const inertScriptElement of this.newBodyScriptElements) {
-      const activatedScriptElement = this.createScriptElement(inertScriptElement);
-      replaceElementWithElement(inertScriptElement, activatedScriptElement);
-    }
+  notifyApplicationBeforeRender(newBody, resume) {
+    return dispatch("turbo:before-render", {
+      detail: {
+        newBody: newBody,
+        resume: resume
+      },
+      cancelable: true
+    });
   }
-  assignNewBody() {
-    if (document.body && this.newElement instanceof HTMLBodyElement) {
-      replaceElementWithElement(document.body, this.newElement);
-    } else {
-      document.documentElement.appendChild(this.newElement);
-    }
+  notifyApplicationAfterRender() {
+    return dispatch("turbo:render");
   }
-  get newHeadStylesheetElements() {
-    return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
+  notifyApplicationAfterPageLoad(timing = {}) {
+    return dispatch("turbo:load", {
+      detail: {
+        url: this.location.href,
+        timing: timing
+      }
+    });
   }
-  get newHeadScriptElements() {
-    return this.newHeadSnapshot.getScriptElementsNotInSnapshot(this.currentHeadSnapshot);
+  notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
+    dispatchEvent(new HashChangeEvent("hashchange", {
+      oldURL: oldURL.toString(),
+      newURL: newURL.toString()
+    }));
   }
-  get currentHeadProvisionalElements() {
-    return this.currentHeadSnapshot.provisionalElements;
+  getActionForLink(link) {
+    const action = link.getAttribute("data-turbo-action");
+    return isAction(action) ? action : "advance";
   }
-  get newHeadProvisionalElements() {
-    return this.newHeadSnapshot.provisionalElements;
+  locationIsVisitable(location) {
+    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
   }
-  get newBodyScriptElements() {
-    return [ ...this.newElement.querySelectorAll("script") ];
+  get snapshot() {
+    return this.view.snapshot;
   }
 }
 
-class SnapshotCache {
-  constructor(size) {
-    this.keys = [];
-    this.snapshots = {};
-    this.size = size;
+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;
   }
-  has(location) {
-    return toCacheKey(location) in this.snapshots;
+}
+
+function extendURLWithDeprecatedProperties(url) {
+  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
+}
+
+const deprecatedLocationPropertyDescriptors = {
+  absoluteURL: {
+    get() {
+      return this.toString();
+    }
   }
-  get(location) {
-    if (this.has(location)) {
-      const snapshot = this.read(location);
-      this.touch(location);
-      return snapshot;
+};
+
+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();
     }
   }
-  put(location, snapshot) {
-    this.write(location, snapshot);
-    this.touch(location);
-    return snapshot;
+  disconnect() {
+    if (this.connected) {
+      this.connected = false;
+      this.appearanceObserver.stop();
+      this.linkInterceptor.stop();
+      this.formInterceptor.stop();
+    }
   }
-  clear() {
-    this.snapshots = {};
+  disabledChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager) {
+      this.loadSourceURL();
+    }
   }
-  read(location) {
-    return this.snapshots[toCacheKey(location)];
+  sourceURLChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager || this.hasBeenLoaded) {
+      this.loadSourceURL();
+    }
   }
-  write(location, snapshot) {
-    this.snapshots[toCacheKey(location)] = snapshot;
+  loadingStyleChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.lazy) {
+      this.appearanceObserver.start();
+    } else {
+      this.appearanceObserver.stop();
+      this.loadSourceURL();
+    }
   }
-  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();
+  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;
+        }
+      }
+    }
   }
-  trim() {
-    for (const key of this.keys.splice(this.size)) {
-      delete this.snapshots[key];
+  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);
+        if (this.view.renderPromise) await this.view.renderPromise;
+        await this.view.render(renderer);
+      }
+    } catch (error) {
+      console.error(error);
+      this.view.invalidate();
     }
   }
-}
-
-class PageView extends View {
-  constructor() {
-    super(...arguments);
-    this.snapshotCache = new SnapshotCache(10);
-    this.lastRenderedLocation = new URL(location.href);
+  elementAppearedInViewport(element) {
+    this.loadSourceURL();
   }
-  renderPage(snapshot, isPreview = false) {
-    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
-    return this.render(renderer);
+  shouldInterceptLinkClick(element, url) {
+    if (element.hasAttribute("data-turbo-method")) {
+      return false;
+    } else {
+      return this.shouldInterceptNavigation(element);
+    }
   }
-  renderError(snapshot) {
-    const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
-    this.render(renderer);
+  linkClickIntercepted(element, url) {
+    this.navigateFrame(element, url);
   }
-  clearSnapshotCache() {
-    this.snapshotCache.clear();
+  shouldInterceptFormSubmission(element, submitter) {
+    return this.shouldInterceptNavigation(element, submitter);
   }
-  async cacheSnapshot() {
-    if (this.shouldCacheSnapshot) {
-      this.delegate.viewWillCacheSnapshot();
-      const {snapshot: snapshot, lastRenderedLocation: location} = this;
-      await nextEventLoopTick();
-      this.snapshotCache.put(location, snapshot.clone());
+  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();
     }
   }
-  getCachedSnapshotForLocation(location) {
-    return this.snapshotCache.get(location);
+  prepareHeadersForRequest(headers, request) {
+    headers["Turbo-Frame"] = this.id;
   }
-  get snapshot() {
-    return PageSnapshot.fromElement(this.element);
+  requestStarted(request) {
+    this.element.setAttribute("busy", "");
   }
-  get shouldCacheSnapshot() {
-    return this.snapshot.isCacheable;
+  requestPreventedHandlingResponse(request, response) {
+    this.resolveVisitPromise();
   }
-}
-
-class Session {
-  constructor() {
-    this.navigator = new Navigator(this);
-    this.history = new History(this);
-    this.view = new PageView(this, document.documentElement);
-    this.adapter = new BrowserAdapter(this);
-    this.pageObserver = new PageObserver(this);
-    this.linkClickObserver = new LinkClickObserver(this);
-    this.formSubmitObserver = new FormSubmitObserver(this);
-    this.scrollObserver = new ScrollObserver(this);
-    this.streamObserver = new StreamObserver(this);
-    this.frameRedirector = new FrameRedirector(document.documentElement);
-    this.enabled = true;
-    this.progressBarDelay = 500;
-    this.started = false;
+  async requestSucceededWithResponse(request, response) {
+    await this.loadResponse(response);
+    this.resolveVisitPromise();
   }
-  start() {
-    if (!this.started) {
-      this.pageObserver.start();
-      this.linkClickObserver.start();
-      this.formSubmitObserver.start();
-      this.scrollObserver.start();
-      this.streamObserver.start();
-      this.frameRedirector.start();
-      this.history.start();
-      this.started = true;
-      this.enabled = true;
-    }
+  requestFailedWithResponse(request, response) {
+    console.error(response);
+    this.resolveVisitPromise();
   }
-  disable() {
-    this.enabled = false;
+  requestErrored(request, error) {
+    console.error(error);
+    this.resolveVisitPromise();
   }
-  stop() {
-    if (this.started) {
-      this.pageObserver.stop();
-      this.linkClickObserver.stop();
-      this.formSubmitObserver.stop();
-      this.scrollObserver.stop();
-      this.streamObserver.stop();
-      this.frameRedirector.stop();
-      this.history.stop();
-      this.started = false;
-    }
+  requestFinished(request) {
+    this.element.removeAttribute("busy");
   }
-  registerAdapter(adapter) {
-    this.adapter = adapter;
+  formSubmissionStarted(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.setAttribute("busy", "");
   }
-  visit(location, options = {}) {
-    this.navigator.proposeVisit(expandURL(location), options);
+  formSubmissionSucceededWithResponse(formSubmission, response) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.delegate.loadResponse(response);
   }
-  connectStreamSource(source) {
-    this.streamObserver.connectStreamSource(source);
+  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    this.element.delegate.loadResponse(fetchResponse);
   }
-  disconnectStreamSource(source) {
-    this.streamObserver.disconnectStreamSource(source);
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
   }
-  renderStreamMessage(message) {
-    document.documentElement.appendChild(StreamMessage.wrap(message).fragment);
+  formSubmissionFinished(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.removeAttribute("busy");
   }
-  clearCache() {
-    this.view.clearSnapshotCache();
+  allowsImmediateRender(snapshot, resume) {
+    return true;
   }
-  setProgressBarDelay(delay) {
-    this.progressBarDelay = delay;
+  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();
+    }));
   }
-  get location() {
-    return this.history.location;
+  navigateFrame(element, url) {
+    const frame = this.findFrameElement(element);
+    frame.src = url;
   }
-  get restorationIdentifier() {
-    return this.history.restorationIdentifier;
+  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;
   }
-  historyPoppedToLocationWithRestorationIdentifier(location) {
-    if (this.enabled) {
-      this.navigator.proposeVisit(location, {
-        action: "restore",
-        historyChanged: true
-      });
-    } else {
-      this.adapter.pageInvalidated();
+  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;
   }
-  scrollPositionChanged(position) {
-    this.history.updateRestorationData({
-      scrollPosition: position
-    });
+  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;
   }
-  willFollowLinkToLocation(link, location) {
-    return this.elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  get id() {
+    return this.element.id;
   }
-  followedLinkToLocation(link, location) {
-    const action = this.getActionForLink(link);
-    this.visit(location.href, {
-      action: action
-    });
+  get enabled() {
+    return !this.element.disabled;
   }
-  allowsVisitingLocation(location) {
-    return this.applicationAllowsVisitingLocation(location);
+  get sourceURL() {
+    if (this.element.src) {
+      return this.element.src;
+    }
   }
-  visitProposedToLocation(location, options) {
-    extendURLWithDeprecatedProperties(location);
-    this.adapter.visitProposedToLocation(location, options);
+  set sourceURL(sourceURL) {
+    this.settingSourceURL = true;
+    this.element.src = sourceURL !== null && sourceURL !== void 0 ? sourceURL : null;
+    this.currentURL = this.element.src;
+    this.settingSourceURL = false;
   }
-  visitStarted(visit) {
-    extendURLWithDeprecatedProperties(visit.location);
-    this.notifyApplicationAfterVisitingLocation(visit.location);
+  get loadingStyle() {
+    return this.element.loading;
   }
-  visitCompleted(visit) {
-    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
+  get isLoading() {
+    return this.formSubmission !== undefined || this.resolveVisitPromise() !== undefined;
   }
-  willSubmitForm(form, submitter) {
-    return this.elementIsNavigable(form) && this.elementIsNavigable(submitter);
+  get isActive() {
+    return this.element.isActive && this.connected;
   }
-  formSubmitted(form, submitter) {
-    this.navigator.submitForm(form, submitter);
+}
+
+function getFrameElementById(id) {
+  if (id != null) {
+    const element = document.getElementById(id);
+    if (element instanceof FrameElement) {
+      return element;
+    }
   }
-  pageBecameInteractive() {
-    this.view.lastRenderedLocation = this.location;
-    this.notifyApplicationAfterPageLoad();
+}
+
+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;
+    }
   }
-  pageLoaded() {
-    this.history.assumeControlOfScrollRestoration();
+}
+
+const StreamActions = {
+  after() {
+    this.targetElements.forEach((e => {
+      var _a;
+      return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e.nextSibling);
+    }));
+  },
+  append() {
+    this.removeDuplicateTargetChildren();
+    this.targetElements.forEach((e => e.append(this.templateContent)));
+  },
+  before() {
+    this.targetElements.forEach((e => {
+      var _a;
+      return (_a = e.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(this.templateContent, e);
+    }));
+  },
+  prepend() {
+    this.removeDuplicateTargetChildren();
+    this.targetElements.forEach((e => e.prepend(this.templateContent)));
+  },
+  remove() {
+    this.targetElements.forEach((e => e.remove()));
+  },
+  replace() {
+    this.targetElements.forEach((e => e.replaceWith(this.templateContent)));
+  },
+  update() {
+    this.targetElements.forEach((e => {
+      e.innerHTML = "";
+      e.append(this.templateContent);
+    }));
   }
-  pageWillUnload() {
-    this.history.relinquishControlOfScrollRestoration();
+};
+
+class StreamElement extends HTMLElement {
+  async connectedCallback() {
+    try {
+      await this.render();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.disconnect();
+    }
   }
-  receivedMessageFromStream(message) {
-    this.renderStreamMessage(message);
+  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();
+      }
+    })();
   }
-  viewWillCacheSnapshot() {
-    this.notifyApplicationBeforeCachingSnapshot();
+  disconnect() {
+    try {
+      this.remove();
+    } catch (_a) {}
   }
-  viewWillRenderSnapshot({element: element}, isPreview) {
-    this.notifyApplicationBeforeRender(element);
+  removeDuplicateTargetChildren() {
+    this.duplicateChildren.forEach((c => c.remove()));
   }
-  viewRenderedSnapshot(snapshot, isPreview) {
-    this.view.lastRenderedLocation = this.history.location;
-    this.notifyApplicationAfterRender();
+  get duplicateChildren() {
+    var _a;
+    const existingChildren = this.targetElements.flatMap((e => [ ...e.children ])).filter((c => !!c.id));
+    const newChildrenIds = [ ...(_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children ].filter((c => !!c.id)).map((c => c.id));
+    return existingChildren.filter((c => newChildrenIds.includes(c.id)));
   }
-  viewInvalidated() {
-    this.adapter.pageInvalidated();
+  get performAction() {
+    if (this.action) {
+      const actionFunction = StreamActions[this.action];
+      if (actionFunction) {
+        return actionFunction;
+      }
+      this.raise("unknown action");
+    }
+    this.raise("action attribute is missing");
   }
-  applicationAllowsFollowingLinkToLocation(link, location) {
-    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
-    return !event.defaultPrevented;
+  get targetElements() {
+    if (this.target) {
+      return this.targetElementsById;
+    } else if (this.targets) {
+      return this.targetElementsByQuery;
+    } else {
+      this.raise("target or targets attribute is missing");
+    }
   }
-  applicationAllowsVisitingLocation(location) {
-    const event = this.notifyApplicationBeforeVisitingLocation(location);
-    return !event.defaultPrevented;
+  get templateContent() {
+    return this.templateElement.content.cloneNode(true);
   }
-  notifyApplicationAfterClickingLinkToLocation(link, location) {
-    return dispatch("turbo:click", {
-      target: link,
-      detail: {
-        url: location.href
-      },
-      cancelable: true
-    });
+  get templateElement() {
+    if (this.firstElementChild instanceof HTMLTemplateElement) {
+      return this.firstElementChild;
+    }
+    this.raise("first child element must be a <template> element");
   }
-  notifyApplicationBeforeVisitingLocation(location) {
-    return dispatch("turbo:before-visit", {
-      detail: {
-        url: location.href
-      },
-      cancelable: true
-    });
+  get action() {
+    return this.getAttribute("action");
   }
-  notifyApplicationAfterVisitingLocation(location) {
-    return dispatch("turbo:visit", {
-      detail: {
-        url: location.href
-      }
-    });
+  get target() {
+    return this.getAttribute("target");
   }
-  notifyApplicationBeforeCachingSnapshot() {
-    return dispatch("turbo:before-cache");
+  get targets() {
+    return this.getAttribute("targets");
   }
-  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.href,
-        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";
+  get targetElementsById() {
+    var _a;
+    const element = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.getElementById(this.target);
+    if (element !== null) {
+      return [ element ];
     } else {
-      return true;
+      return [];
     }
   }
-  locationIsVisitable(location) {
-    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
-  }
-  get snapshot() {
-    return this.view.snapshot;
+  get targetElementsByQuery() {
+    var _a;
+    const elements = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.targets);
+    if (elements.length !== 0) {
+      return Array.prototype.slice.call(elements);
+    } else {
+      return [];
+    }
   }
 }
 
-function extendURLWithDeprecatedProperties(url) {
-  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
-}
+FrameElement.delegateConstructor = FrameController;
 
-const deprecatedLocationPropertyDescriptors = {
-  absoluteURL: {
-    get() {
-      return this.toString();
+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.hotwired.dev/handbook/building#working-with-script-elements
+
+        ——
+        Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
+      `, element.outerHTML);
     }
   }
-};
+})();
 
 const session = new Session;
 
@@ -2833,10 +3125,29 @@ function setProgressBarDelay(delay) {
   session.setProgressBarDelay(delay);
 }
 
+var Turbo = Object.freeze({
+  __proto__: null,
+  navigator: navigator,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
+  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({
   __proto__: null,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
   clearCache: clearCache,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
@@ -2851,17 +3162,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);
@@ -2871,6 +3185,7 @@ var cable = Object.freeze({
   __proto__: null,
   getConsumer: getConsumer,
   setConsumer: setConsumer,
+  createConsumer: createConsumer,
   subscribeTo: subscribeTo
 });
 
@@ -3334,7 +3649,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);
 }
 
@@ -3356,7 +3671,7 @@ var index = Object.freeze({
   adapters: adapters,
   createWebSocketURL: createWebSocketURL,
   logger: logger,
-  createConsumer: createConsumer,
+  createConsumer: createConsumer$1,
   getConfig: getConfig
 });