turbo-rails 0.5.9 → 0.7.14

data/app/assets/javascripts/turbo.js

@@ -31,6 +31,7 @@ function clickCaptured(event) {
 
 (function() {
   if ("SubmitEvent" in window) return;
+  if ("submitter" in Event.prototype) return;
   addEventListener("click", clickCaptured, true);
   Object.defineProperty(Event.prototype, "submitter", {
     get() {
@@ -55,7 +56,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 +64,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 +141,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 +150,6 @@ function getAnchor(url) {
     return url.hash.slice(1);
   } else if (anchorMatch = url.href.match(/#(.*)$/)) {
     return anchorMatch[1];
-  } else {
-    return "";
   }
 }
 
@@ -162,13 +166,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) {
@@ -219,11 +227,11 @@ class FetchResponse {
     return this.header("Content-Type");
   }
   get responseText() {
-    return this.response.text();
+    return this.response.clone().text();
   }
   get responseHTML() {
     if (this.isHTML) {
-      return this.response.text();
+      return this.response.clone().text();
     } else {
       return Promise.resolve(undefined);
     }
@@ -319,16 +327,19 @@ function fetchMethodFromString(method) {
 }
 
 class FetchRequest {
-  constructor(delegate, method, location, body = new URLSearchParams) {
+  constructor(delegate, method, location, body = new URLSearchParams, target = null) {
     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 {
       this.body = body;
       this.url = location;
     }
+    this.target = target;
   }
   get location() {
     return this.url;
@@ -343,19 +354,19 @@ 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);
       return await this.receive(response);
     } catch (error) {
-      this.delegate.requestErrored(this, error);
-      throw error;
+      if (error.name !== "AbortError") {
+        this.delegate.requestErrored(this, error);
+        throw error;
+      }
     } finally {
       this.delegate.requestFinished(this);
     }
@@ -366,7 +377,8 @@ class FetchRequest {
       cancelable: true,
       detail: {
         fetchResponse: fetchResponse
-      }
+      },
+      target: this.target
     });
     if (event.defaultPrevented) {
       this.delegate.requestPreventedHandlingResponse(this, fetchResponse);
@@ -378,32 +390,40 @@ class FetchRequest {
     return fetchResponse;
   }
   get fetchOptions() {
+    var _a;
     return {
       method: FetchMethod[this.method].toUpperCase(),
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
       body: this.body,
-      signal: this.abortSignal
+      signal: this.abortSignal,
+      referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href
+    };
+  }
+  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
+      },
+      target: this.target
+    });
+    if (event.defaultPrevented) await requestInterception;
   }
 }
 
@@ -522,7 +542,7 @@ class FormSubmission {
     this.formElement = formElement;
     this.submitter = submitter;
     this.formData = buildFormData(formElement, submitter);
-    this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body);
+    this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
     this.mustRedirect = mustRedirect;
   }
   get method() {
@@ -532,7 +552,8 @@ class FormSubmission {
   }
   get action() {
     var _a;
-    return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.action;
+    const formElementAction = typeof this.formElement.action === "string" ? this.formElement.action : null;
+    return ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formaction")) || this.formElement.getAttribute("action") || formElementAction || "";
   }
   get location() {
     return expandURL(this.action);
@@ -548,6 +569,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 +663,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;
 }
@@ -676,11 +700,10 @@ class Snapshot {
     return this.getElementForAnchor(anchor) != null;
   }
   getElementForAnchor(anchor) {
-    try {
-      return this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`);
-    } catch (_a) {
-      return null;
-    }
+    return anchor ? this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`) : null;
+  }
+  get isConnected() {
+    return this.element.isConnected;
   }
   get firstAutofocusableElement() {
     return this.element.querySelector("[autofocus]");
@@ -691,8 +714,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 +753,8 @@ class FormInterceptor {
 
 class View {
   constructor(delegate, element) {
+    this.resolveRenderPromise = value => {};
+    this.resolveInterceptionPromise = value => {};
     this.delegate = delegate;
     this.element = element;
   }
@@ -729,6 +762,7 @@ class View {
     const element = this.snapshot.getElementForAnchor(anchor);
     if (element) {
       this.scrollToElement(element);
+      this.focusElement(element);
     } else {
       this.scrollToPosition({
         x: 0,
@@ -736,30 +770,52 @@ 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);
   }
+  scrollToTop() {
+    this.scrollToPosition({
+      x: 0,
+      y: 0
+    });
+  }
   get scrollRoot() {
     return window;
   }
   async render(renderer) {
-    if (this.renderer) {
-      throw new Error("rendering is already in progress");
-    }
     const {isPreview: isPreview, shouldRender: shouldRender, newSnapshot: snapshot} = renderer;
     if (shouldRender) {
       try {
+        this.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 +893,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 +970,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 +980,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 +1012,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 +1028,8 @@ class FrameRenderer extends Renderer {
     this.scrollFrameIntoView();
     await nextAnimationFrame();
     this.focusFirstAutofocusableElement();
+    await nextAnimationFrame();
+    this.activateScriptElements();
   }
   loadFrameElement() {
     var _a;
@@ -975,6 +1056,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,577 +1075,264 @@ 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();
-    }
-    this.formSubmission = new FormSubmission(this, element, submitter);
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
-    } else {
-      this.formSubmission.start();
+  uninstallProgressElement() {
+    if (this.progressElement.parentNode) {
+      document.documentElement.removeChild(this.progressElement);
     }
   }
-  prepareHeadersForRequest(headers, request) {
-    headers["Turbo-Frame"] = this.id;
-  }
-  requestStarted(request) {
-    this.element.setAttribute("busy", "");
-  }
-  requestPreventedHandlingResponse(request, response) {
-    this.resolveVisitPromise();
+  startTrickling() {
+    if (!this.trickleInterval) {
+      this.trickleInterval = window.setInterval(this.trickle, ProgressBar.animationDuration);
+    }
   }
-  async requestSucceededWithResponse(request, response) {
-    await this.loadResponse(response);
-    this.resolveVisitPromise();
+  stopTrickling() {
+    window.clearInterval(this.trickleInterval);
+    delete this.trickleInterval;
   }
-  requestFailedWithResponse(request, response) {
-    console.error(response);
-    this.resolveVisitPromise();
+  refresh() {
+    requestAnimationFrame((() => {
+      this.progressElement.style.width = `${10 + this.value * 90}%`;
+    }));
   }
-  requestErrored(request, error) {
-    console.error(error);
-    this.resolveVisitPromise();
+  createStylesheetElement() {
+    const element = document.createElement("style");
+    element.type = "text/css";
+    element.textContent = ProgressBar.defaultCSS;
+    return element;
   }
-  requestFinished(request) {
-    this.element.removeAttribute("busy");
+  createProgressElement() {
+    const element = document.createElement("div");
+    element.className = "turbo-progress-bar";
+    return element;
   }
-  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();
+}
+
+ProgressBar.animationDuration = 300;
+
+class HeadSnapshot extends Snapshot {
+  constructor() {
+    super(...arguments);
+    this.detailsByOuterHTML = this.children.filter((element => !elementIsNoscript(element))).map((element => elementWithoutNonce(element))).reduce(((result, element) => {
+      const {outerHTML: outerHTML} = element;
+      const details = outerHTML in result ? result[outerHTML] : {
+        type: elementType(element),
+        tracked: elementIsTracked(element),
+        elements: []
       };
-      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;
+      return Object.assign(Object.assign({}, result), {
+        [outerHTML]: Object.assign(Object.assign({}, details), {
+          elements: [ ...details.elements, element ]
+        })
+      });
+    }), {});
   }
-  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 trackedElementSignature() {
+    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => this.detailsByOuterHTML[outerHTML].tracked)).join("");
   }
-  get id() {
-    return this.element.id;
+  getScriptElementsNotInSnapshot(snapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot("script", snapshot);
   }
-  get enabled() {
-    return !this.element.disabled;
+  getStylesheetElementsNotInSnapshot(snapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot);
   }
-  get sourceURL() {
-    return this.element.src;
+  getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
+    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => !(outerHTML in snapshot.detailsByOuterHTML))).map((outerHTML => this.detailsByOuterHTML[outerHTML])).filter((({type: type}) => type == matchedType)).map((({elements: [element]}) => element));
   }
-  get loadingStyle() {
-    return this.element.loading;
+  get provisionalElements() {
+    return Object.keys(this.detailsByOuterHTML).reduce(((result, outerHTML) => {
+      const {type: type, tracked: tracked, elements: elements} = this.detailsByOuterHTML[outerHTML];
+      if (type == null && !tracked) {
+        return [ ...result, ...elements ];
+      } else if (elements.length > 1) {
+        return [ ...result, ...elements.slice(1) ];
+      } else {
+        return result;
+      }
+    }), []);
   }
-  get isLoading() {
-    return this.formSubmission !== undefined || this.loadingURL !== undefined;
+  getMetaValue(name) {
+    const element = this.findMetaElementByName(name);
+    return element ? element.getAttribute("content") : null;
   }
-  get isActive() {
-    return this.element.isActive;
+  findMetaElementByName(name) {
+    return Object.keys(this.detailsByOuterHTML).reduce(((result, outerHTML) => {
+      const {elements: [element]} = this.detailsByOuterHTML[outerHTML];
+      return elementIsMetaElementWithName(element, name) ? element : result;
+    }), undefined);
   }
 }
 
-function getFrameElementById(id) {
-  if (id != null) {
-    const element = document.getElementById(id);
-    if (element instanceof FrameElement) {
-      return element;
-    }
+function elementType(element) {
+  if (elementIsScript(element)) {
+    return "script";
+  } else if (elementIsStylesheet(element)) {
+    return "stylesheet";
   }
 }
 
-function activateElement(element) {
-  if (element && element.ownerDocument !== document) {
-    element = document.importNode(element, true);
-  }
-  if (element instanceof FrameElement) {
-    return element;
-  }
+function elementIsTracked(element) {
+  return element.getAttribute("data-turbo-track") == "reload";
 }
 
-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);
-    }
+function elementIsScript(element) {
+  const tagName = element.tagName.toLowerCase();
+  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";
+}
+
+function elementIsMetaElementWithName(element, name) {
+  const tagName = element.tagName.toLowerCase();
+  return tagName == "meta" && element.getAttribute("name") == name;
+}
+
+function elementWithoutNonce(element) {
+  if (element.hasAttribute("nonce")) {
+    element.setAttribute("nonce", "");
   }
-};
+  return element;
+}
 
-class StreamElement extends HTMLElement {
-  async connectedCallback() {
-    try {
-      await this.render();
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.disconnect();
-    }
+class PageSnapshot extends Snapshot {
+  constructor(element, headSnapshot) {
+    super(element);
+    this.headSnapshot = headSnapshot;
   }
-  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();
-      }
-    })();
+  static fromHTMLString(html = "") {
+    return this.fromDocument(parseHTMLDocument(html));
   }
-  disconnect() {
-    try {
-      this.remove();
-    } catch (_a) {}
+  static fromElement(element) {
+    return this.fromDocument(element.ownerDocument);
   }
-  get performAction() {
-    if (this.action) {
-      const actionFunction = StreamActions[this.action];
-      if (actionFunction) {
-        return actionFunction;
-      }
-      this.raise("unknown action");
-    }
-    this.raise("action attribute is missing");
+  static fromDocument({head: head, body: body}) {
+    return new this(body, new HeadSnapshot(head));
   }
-  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");
+  clone() {
+    return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
   }
-  get templateContent() {
-    return this.templateElement.content;
+  get headElement() {
+    return this.headSnapshot.element;
   }
-  get templateElement() {
-    if (this.firstElementChild instanceof HTMLTemplateElement) {
-      return this.firstElementChild;
-    }
-    this.raise("first child element must be a <template> element");
+  get rootLocation() {
+    var _a;
+    const root = (_a = this.getSetting("root")) !== null && _a !== void 0 ? _a : "/";
+    return expandURL(root);
   }
-  get action() {
-    return this.getAttribute("action");
+  get cacheControlValue() {
+    return this.getSetting("cache-control");
   }
-  get target() {
-    return this.getAttribute("target");
+  get isPreviewable() {
+    return this.cacheControlValue != "no-preview";
   }
-  raise(message) {
-    throw new Error(`${this.description}: ${message}`);
+  get isCacheable() {
+    return this.cacheControlValue != "no-cache";
   }
-  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 isVisitable() {
+    return this.getSetting("visit-control") != "reload";
   }
-  get beforeRenderEvent() {
-    return new CustomEvent("turbo:before-stream-render", {
-      bubbles: true,
-      cancelable: true
-    });
+  getSetting(name) {
+    return this.headSnapshot.getMetaValue(`turbo-${name}`);
   }
 }
 
-FrameElement.delegateConstructor = FrameController;
+var TimingMetric;
 
-customElements.define("turbo-frame", FrameElement);
+(function(TimingMetric) {
+  TimingMetric["visitStart"] = "visitStart";
+  TimingMetric["requestStart"] = "requestStart";
+  TimingMetric["requestEnd"] = "requestEnd";
+  TimingMetric["visitEnd"] = "visitEnd";
+})(TimingMetric || (TimingMetric = {}));
 
-customElements.define("turbo-stream", StreamElement);
+var VisitState;
 
-(() => {
-  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!
+(function(VisitState) {
+  VisitState["initialized"] = "initialized";
+  VisitState["started"] = "started";
+  VisitState["canceled"] = "canceled";
+  VisitState["failed"] = "failed";
+  VisitState["completed"] = "completed";
+})(VisitState || (VisitState = {}));
 
-        Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
+const defaultOptions = {
+  action: "advance",
+  historyChanged: false
+};
 
-        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 ]
-        })
-      });
-    }), {});
-  }
-  get trackedElementSignature() {
-    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => this.detailsByOuterHTML[outerHTML].tracked)).join("");
-  }
-  getScriptElementsNotInSnapshot(snapshot) {
-    return this.getElementsMatchingTypeNotInSnapshot("script", snapshot);
-  }
-  getStylesheetElementsNotInSnapshot(snapshot) {
-    return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot);
-  }
-  getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
-    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => !(outerHTML in snapshot.detailsByOuterHTML))).map((outerHTML => this.detailsByOuterHTML[outerHTML])).filter((({type: type}) => type == matchedType)).map((({elements: [element]}) => element));
-  }
-  get provisionalElements() {
-    return Object.keys(this.detailsByOuterHTML).reduce(((result, outerHTML) => {
-      const {type: type, tracked: tracked, elements: elements} = this.detailsByOuterHTML[outerHTML];
-      if (type == null && !tracked) {
-        return [ ...result, ...elements ];
-      } else if (elements.length > 1) {
-        return [ ...result, ...elements.slice(1) ];
-      } else {
-        return result;
-      }
-    }), []);
-  }
-  getMetaValue(name) {
-    const element = this.findMetaElementByName(name);
-    return element ? element.getAttribute("content") : null;
-  }
-  findMetaElementByName(name) {
-    return Object.keys(this.detailsByOuterHTML).reduce(((result, outerHTML) => {
-      const {elements: [element]} = this.detailsByOuterHTML[outerHTML];
-      return elementIsMetaElementWithName(element, name) ? element : result;
-    }), undefined);
-  }
-}
-
-function elementType(element) {
-  if (elementIsScript(element)) {
-    return "script";
-  } else if (elementIsStylesheet(element)) {
-    return "stylesheet";
-  }
-}
-
-function elementIsTracked(element) {
-  return element.getAttribute("data-turbo-track") == "reload";
-}
-
-function elementIsScript(element) {
-  const tagName = element.tagName.toLowerCase();
-  return tagName == "script";
-}
-
-function elementIsStylesheet(element) {
-  const tagName = element.tagName.toLowerCase();
-  return tagName == "style" || tagName == "link" && element.getAttribute("rel") == "stylesheet";
-}
-
-function elementIsMetaElementWithName(element, name) {
-  const tagName = element.tagName.toLowerCase();
-  return tagName == "meta" && element.getAttribute("name") == name;
-}
-
-class PageSnapshot extends Snapshot {
-  constructor(element, headSnapshot) {
-    super(element);
-    this.headSnapshot = headSnapshot;
-  }
-  static fromHTMLString(html = "") {
-    return this.fromDocument(parseHTMLDocument(html));
-  }
-  static fromElement(element) {
-    return this.fromDocument(element.ownerDocument);
-  }
-  static fromDocument({head: head, body: body}) {
-    return new this(body, new HeadSnapshot(head));
-  }
-  clone() {
-    return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot);
-  }
-  get headElement() {
-    return this.headSnapshot.element;
-  }
-  get rootLocation() {
-    var _a;
-    const root = (_a = this.getSetting("root")) !== null && _a !== void 0 ? _a : "/";
-    return expandURL(root);
-  }
-  get cacheControlValue() {
-    return this.getSetting("cache-control");
-  }
-  get isPreviewable() {
-    return this.cacheControlValue != "no-preview";
-  }
-  get isCacheable() {
-    return this.cacheControlValue != "no-cache";
-  }
-  get isVisitable() {
-    return this.getSetting("visit-control") != "reload";
-  }
-  getSetting(name) {
-    return this.headSnapshot.getMetaValue(`turbo-${name}`);
-  }
-}
-
-var TimingMetric;
-
-(function(TimingMetric) {
-  TimingMetric["visitStart"] = "visitStart";
-  TimingMetric["requestStart"] = "requestStart";
-  TimingMetric["requestEnd"] = "requestEnd";
-  TimingMetric["visitEnd"] = "visitEnd";
-})(TimingMetric || (TimingMetric = {}));
-
-var VisitState;
-
-(function(VisitState) {
-  VisitState["initialized"] = "initialized";
-  VisitState["started"] = "started";
-  VisitState["canceled"] = "canceled";
-  VisitState["failed"] = "failed";
-  VisitState["completed"] = "completed";
-})(VisitState || (VisitState = {}));
-
-const defaultOptions = {
-  action: "advance",
-  historyChanged: false
-};
-
-var SystemStatusCode;
+var SystemStatusCode;
 
 (function(SystemStatusCode) {
   SystemStatusCode[SystemStatusCode["networkFailure"] = 0] = "networkFailure";
@@ -1581,6 +1358,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;
@@ -1594,6 +1372,9 @@ class Visit {
   get restorationData() {
     return this.history.getRestorationDataForIdentifier(this.restorationIdentifier);
   }
+  get silent() {
+    return this.isSamePage;
+  }
   start() {
     if (this.state == VisitState.initialized) {
       this.recordTimingMetric(TimingMetric.visitStart);
@@ -1617,6 +1398,7 @@ class Visit {
       this.state = VisitState.completed;
       this.adapter.visitCompleted(this);
       this.delegate.visitCompleted(this);
+      this.followRedirect();
     }
   }
   fail() {
@@ -1673,6 +1455,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,21 +1490,36 @@ 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();
+          }
         }
       }));
     }
   }
   followRedirect() {
     if (this.redirectedToLocation && !this.followedRedirect) {
-      this.location = this.redirectedToLocation;
-      this.history.replace(this.redirectedToLocation, this.restorationIdentifier);
+      this.adapter.visitProposedToLocation(this.redirectedToLocation, {
+        action: "replace",
+        response: this.response
+      });
       this.followedRedirect = true;
     }
   }
+  goToSamePageAnchor() {
+    if (this.isSamePage) {
+      this.render((async () => {
+        this.cacheSnapshot();
+        this.adapter.visitRendered(this);
+      }));
+    }
+  }
   requestStarted() {
     this.startRequest();
   }
@@ -1764,9 +1562,12 @@ class Visit {
   performScroll() {
     if (!this.scrolled) {
       if (this.action == "restore") {
-        this.scrollToRestoredPosition() || this.scrollToTop();
+        this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop();
       } else {
-        this.scrollToAnchor() || this.scrollToTop();
+        this.scrollToAnchor() || this.view.scrollToTop();
+      }
+      if (this.isSamePage) {
+        this.delegate.visitScrolledToSamePageLocation(this.view.lastRenderedLocation, this.location);
       }
       this.scrolled = true;
     }
@@ -1779,17 +1580,12 @@ 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;
     }
   }
-  scrollToTop() {
-    this.view.scrollToPosition({
-      x: 0,
-      y: 0
-    });
-  }
   recordTimingMetric(metric) {
     this.timingMetrics[metric] = (new Date).getTime();
   }
@@ -1810,7 +1606,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 +1625,7 @@ class Visit {
     await new Promise((resolve => {
       this.frame = requestAnimationFrame((() => resolve()));
     }));
-    callback();
+    await callback();
     delete this.frame;
     this.performScroll();
   }
@@ -1853,12 +1655,13 @@ class BrowserAdapter {
   visitStarted(visit) {
     visit.issueRequest();
     visit.changeHistory();
+    visit.goToSamePageAnchor();
     visit.loadCachedSnapshot();
   }
   visitRequestStarted(visit) {
     this.progressBar.setValue(0);
     if (visit.hasCachedSnapshot() || visit.action != "restore") {
-      this.showProgressBarAfterDelay();
+      this.showVisitProgressBarAfterDelay();
     } else {
       this.showProgressBar();
     }
@@ -1879,24 +1682,42 @@ class BrowserAdapter {
   }
   visitRequestFinished(visit) {
     this.progressBar.setValue(1);
-    this.hideProgressBar();
-  }
-  visitCompleted(visit) {
-    visit.followRedirect();
+    this.hideVisitProgressBar();
   }
+  visitCompleted(visit) {}
   pageInvalidated() {
     this.reload();
   }
   visitFailed(visit) {}
   visitRendered(visit) {}
-  showProgressBarAfterDelay() {
-    this.progressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
+  formSubmissionStarted(formSubmission) {
+    this.progressBar.setValue(0);
+    this.showFormProgressBarAfterDelay();
+  }
+  formSubmissionFinished(formSubmission) {
+    this.progressBar.setValue(1);
+    this.hideFormProgressBar();
   }
-  hideProgressBar() {
+  showVisitProgressBarAfterDelay() {
+    this.visitProgressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
+  }
+  hideVisitProgressBar() {
     this.progressBar.hide();
-    if (this.progressBarTimeout != null) {
-      window.clearTimeout(this.progressBarTimeout);
-      delete this.progressBarTimeout;
+    if (this.visitProgressBarTimeout != null) {
+      window.clearTimeout(this.visitProgressBarTimeout);
+      delete this.visitProgressBarTimeout;
+    }
+  }
+  showFormProgressBarAfterDelay() {
+    if (this.formProgressBarTimeout == null) {
+      this.formProgressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
+    }
+  }
+  hideFormProgressBar() {
+    this.progressBar.hide();
+    if (this.formProgressBarTimeout != null) {
+      window.clearTimeout(this.formProgressBarTimeout);
+      delete this.formProgressBarTimeout;
     }
   }
   reload() {
@@ -1907,6 +1728,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;
@@ -1963,6 +1808,7 @@ class FrameRedirector {
   linkClickIntercepted(element, url) {
     const frame = this.findFrameElement(element);
     if (frame) {
+      frame.setAttribute("reloadable", "");
       frame.src = url;
     }
   }
@@ -1970,17 +1816,18 @@ class FrameRedirector {
     return this.shouldRedirect(element, submitter);
   }
   formSubmissionIntercepted(element, submitter) {
-    const frame = this.findFrameElement(element);
+    const frame = this.findFrameElement(element, submitter);
     if (frame) {
+      frame.removeAttribute("reloadable");
       frame.delegate.formSubmissionIntercepted(element, submitter);
     }
   }
   shouldRedirect(element, submitter) {
-    const frame = this.findFrameElement(element);
+    const frame = this.findFrameElement(element, submitter);
     return frame ? frame != element.closest("turbo-frame") : false;
   }
-  findFrameElement(element) {
-    const id = element.getAttribute("data-turbo-frame");
+  findFrameElement(element, submitter) {
+    const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame");
     if (id && id != "_top") {
       const frame = this.element.querySelector(`#${id}:not([disabled])`);
       if (frame instanceof FrameElement) {
@@ -2082,7 +1929,8 @@ class LinkClickObserver {
     };
     this.clickBubbled = event => {
       if (this.clickEventIsSignificant(event)) {
-        const link = this.findLinkFromClickTarget(event.target);
+        const target = event.composedPath && event.composedPath()[0] || event.target;
+        const link = this.findLinkFromClickTarget(target);
         if (link) {
           const location = this.getLocationForLink(link);
           if (this.delegate.willFollowLinkToLocation(link, location)) {
@@ -2119,12 +1967,16 @@ class LinkClickObserver {
   }
 }
 
+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)) {
+    if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
       this.delegate.visitProposedToLocation(location, options);
     }
   }
@@ -2138,8 +1990,10 @@ class Navigator {
   submitForm(form, submitter) {
     this.stop();
     this.formSubmission = new FormSubmission(this, form, submitter, true);
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.proposeVisit(this.formSubmission.fetchRequest.url);
+    if (this.formSubmission.isIdempotent) {
+      this.proposeVisit(this.formSubmission.fetchRequest.url, {
+        action: this.getActionForFormSubmission(this.formSubmission)
+      });
     } else {
       this.formSubmission.start();
     }
@@ -2163,7 +2017,11 @@ class Navigator {
   get history() {
     return this.delegate.history;
   }
-  formSubmissionStarted(formSubmission) {}
+  formSubmissionStarted(formSubmission) {
+    if (typeof this.adapter.formSubmissionStarted === "function") {
+      this.adapter.formSubmissionStarted(formSubmission);
+    }
+  }
   async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
     if (formSubmission == this.formSubmission) {
       const responseHTML = await fetchResponse.responseHTML;
@@ -2186,24 +2044,49 @@ class Navigator {
     const responseHTML = await fetchResponse.responseHTML;
     if (responseHTML) {
       const snapshot = PageSnapshot.fromHTMLString(responseHTML);
-      await this.view.renderPage(snapshot);
+      if (fetchResponse.serverError) {
+        await this.view.renderError(snapshot);
+      } else {
+        await this.view.renderPage(snapshot);
+      }
+      this.view.scrollToTop();
       this.view.clearSnapshotCache();
     }
   }
-  formSubmissionErrored(formSubmission, error) {}
-  formSubmissionFinished(formSubmission) {}
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
+  }
+  formSubmissionFinished(formSubmission) {
+    if (typeof this.adapter.formSubmissionFinished === "function") {
+      this.adapter.formSubmissionFinished(formSubmission);
+    }
+  }
   visitStarted(visit) {
     this.delegate.visitStarted(visit);
   }
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit);
   }
+  locationWithActionIsSamePage(location, action) {
+    const anchor = getAnchor(location);
+    const currentAnchor = getAnchor(this.view.lastRenderedLocation);
+    const isRestorationToTop = action === "restore" && typeof anchor === "undefined";
+    return action !== "replace" && getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) && (isRestorationToTop || anchor != null && anchor !== currentAnchor);
+  }
+  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;
@@ -2366,10 +2249,6 @@ function fetchResponseIsStream(response) {
   return contentType.startsWith(StreamMessage.contentType);
 }
 
-function isAction(action) {
-  return action == "advance" || action == "replace" || action == "restore";
-}
-
 class ErrorRenderer extends Renderer {
   async render() {
     this.replaceHeadAndBody();
@@ -2409,7 +2288,7 @@ class PageRenderer extends Renderer {
   }
   finishRendering() {
     super.finishRendering();
-    if (this.isPreview) {
+    if (!this.isPreview) {
       this.focusFirstAutofocusableElement();
     }
   }
@@ -2464,12 +2343,12 @@ class PageRenderer extends Renderer {
   activateNewBodyScriptElements() {
     for (const inertScriptElement of this.newBodyScriptElements) {
       const activatedScriptElement = this.createScriptElement(inertScriptElement);
-      replaceElementWithElement(inertScriptElement, activatedScriptElement);
+      inertScriptElement.replaceWith(activatedScriptElement);
     }
   }
   assignNewBody() {
     if (document.body && this.newElement instanceof HTMLBodyElement) {
-      replaceElementWithElement(document.body, this.newElement);
+      document.body.replaceWith(this.newElement);
     } else {
       document.documentElement.appendChild(this.newElement);
     }
@@ -2487,7 +2366,7 @@ class PageRenderer extends Renderer {
     return this.newHeadSnapshot.provisionalElements;
   }
   get newBodyScriptElements() {
-    return [ ...this.newElement.querySelectorAll("script") ];
+    return this.newElement.querySelectorAll("script");
   }
 }
 
@@ -2547,7 +2426,7 @@ class PageView extends View {
   }
   renderError(snapshot) {
     const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
-    this.render(renderer);
+    return this.render(renderer);
   }
   clearSnapshotCache() {
     this.snapshotCache.clear();
@@ -2578,11 +2457,13 @@ class Session {
     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.drive = true;
     this.enabled = true;
     this.progressBarDelay = 500;
     this.started = false;
@@ -2590,6 +2471,7 @@ class Session {
   start() {
     if (!this.started) {
       this.pageObserver.start();
+      this.cacheObserver.start();
       this.linkClickObserver.start();
       this.formSubmitObserver.start();
       this.scrollObserver.start();
@@ -2606,6 +2488,7 @@ class Session {
   stop() {
     if (this.started) {
       this.pageObserver.stop();
+      this.cacheObserver.stop();
       this.linkClickObserver.stop();
       this.formSubmitObserver.stop();
       this.scrollObserver.stop();
@@ -2642,9 +2525,9 @@ class Session {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  historyPoppedToLocationWithRestorationIdentifier(location) {
+  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
     if (this.enabled) {
-      this.navigator.proposeVisit(location, {
+      this.navigator.startVisit(location, restorationIdentifier, {
         action: "restore",
         historyChanged: true
       });
@@ -2652,197 +2535,733 @@ class Session {
       this.adapter.pageInvalidated();
     }
   }
-  scrollPositionChanged(position) {
-    this.history.updateRestorationData({
-      scrollPosition: position
-    });
+  scrollPositionChanged(position) {
+    this.history.updateRestorationData({
+      scrollPosition: position
+    });
+  }
+  willFollowLinkToLocation(link, location) {
+    return this.elementDriveEnabled(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;
+    }
+  }
+  allowsVisitingLocationWithAction(location, action) {
+    return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location);
+  }
+  visitProposedToLocation(location, options) {
+    extendURLWithDeprecatedProperties(location);
+    this.adapter.visitProposedToLocation(location, options);
+  }
+  visitStarted(visit) {
+    extendURLWithDeprecatedProperties(visit.location);
+    if (!visit.silent) {
+      this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
+    }
+  }
+  visitCompleted(visit) {
+    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
+  }
+  locationWithActionIsSamePage(location, action) {
+    return this.navigator.locationWithActionIsSamePage(location, action);
+  }
+  visitScrolledToSamePageLocation(oldURL, newURL) {
+    this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
+  }
+  willSubmitForm(form, submitter) {
+    return this.elementDriveEnabled(form) && this.elementDriveEnabled(submitter);
+  }
+  formSubmitted(form, submitter) {
+    this.navigator.submitForm(form, submitter);
+  }
+  pageBecameInteractive() {
+    this.view.lastRenderedLocation = this.location;
+    this.notifyApplicationAfterPageLoad();
+  }
+  pageLoaded() {
+    this.history.assumeControlOfScrollRestoration();
+  }
+  pageWillUnload() {
+    this.history.relinquishControlOfScrollRestoration();
+  }
+  receivedMessageFromStream(message) {
+    this.renderStreamMessage(message);
+  }
+  viewWillCacheSnapshot() {
+    var _a;
+    if (!((_a = this.navigator.currentVisit) === null || _a === void 0 ? void 0 : _a.silent)) {
+      this.notifyApplicationBeforeCachingSnapshot();
+    }
+  }
+  allowsImmediateRender({element: element}, resume) {
+    const event = this.notifyApplicationBeforeRender(element, resume);
+    return !event.defaultPrevented;
+  }
+  viewRenderedSnapshot(snapshot, isPreview) {
+    this.view.lastRenderedLocation = this.history.location;
+    this.notifyApplicationAfterRender();
+  }
+  viewInvalidated() {
+    this.adapter.pageInvalidated();
+  }
+  frameLoaded(frame) {
+    this.notifyApplicationAfterFrameLoad(frame);
+  }
+  frameRendered(fetchResponse, frame) {
+    this.notifyApplicationAfterFrameRender(fetchResponse, frame);
+  }
+  applicationAllowsFollowingLinkToLocation(link, location) {
+    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
+    return !event.defaultPrevented;
+  }
+  applicationAllowsVisitingLocation(location) {
+    const event = this.notifyApplicationBeforeVisitingLocation(location);
+    return !event.defaultPrevented;
+  }
+  notifyApplicationAfterClickingLinkToLocation(link, location) {
+    return dispatch("turbo:click", {
+      target: link,
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationBeforeVisitingLocation(location) {
+    return dispatch("turbo:before-visit", {
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationAfterVisitingLocation(location, action) {
+    return dispatch("turbo:visit", {
+      detail: {
+        url: location.href,
+        action: action
+      }
+    });
+  }
+  notifyApplicationBeforeCachingSnapshot() {
+    return dispatch("turbo:before-cache");
+  }
+  notifyApplicationBeforeRender(newBody, resume) {
+    return dispatch("turbo:before-render", {
+      detail: {
+        newBody: newBody,
+        resume: resume
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationAfterRender() {
+    return dispatch("turbo:render");
+  }
+  notifyApplicationAfterPageLoad(timing = {}) {
+    return dispatch("turbo:load", {
+      detail: {
+        url: this.location.href,
+        timing: timing
+      }
+    });
+  }
+  notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
+    dispatchEvent(new HashChangeEvent("hashchange", {
+      oldURL: oldURL.toString(),
+      newURL: newURL.toString()
+    }));
+  }
+  notifyApplicationAfterFrameLoad(frame) {
+    return dispatch("turbo:frame-load", {
+      target: frame
+    });
+  }
+  notifyApplicationAfterFrameRender(fetchResponse, frame) {
+    return dispatch("turbo:frame-render", {
+      detail: {
+        fetchResponse: fetchResponse
+      },
+      target: frame,
+      cancelable: true
+    });
+  }
+  elementDriveEnabled(element) {
+    const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
+    if (this.drive) {
+      if (container) {
+        return container.getAttribute("data-turbo") != "false";
+      } else {
+        return true;
+      }
+    } else {
+      if (container) {
+        return container.getAttribute("data-turbo") == "true";
+      } else {
+        return false;
+      }
+    }
+  }
+  getActionForLink(link) {
+    const action = link.getAttribute("data-turbo-action");
+    return isAction(action) ? action : "advance";
+  }
+  locationIsVisitable(location) {
+    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
+  }
+  get snapshot() {
+    return this.view.snapshot;
+  }
+}
+
+function extendURLWithDeprecatedProperties(url) {
+  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
+}
+
+const deprecatedLocationPropertyDescriptors = {
+  absoluteURL: {
+    get() {
+      return this.toString();
+    }
+  }
+};
+
+const session = new Session;
+
+const {navigator: navigator} = session;
+
+function start() {
+  session.start();
+}
+
+function registerAdapter(adapter) {
+  session.registerAdapter(adapter);
+}
+
+function visit(location, options) {
+  session.visit(location, options);
+}
+
+function connectStreamSource(source) {
+  session.connectStreamSource(source);
+}
+
+function disconnectStreamSource(source) {
+  session.disconnectStreamSource(source);
+}
+
+function renderStreamMessage(message) {
+  session.renderStreamMessage(message);
+}
+
+function clearCache() {
+  session.clearCache();
+}
+
+function setProgressBarDelay(delay) {
+  session.setProgressBarDelay(delay);
+}
+
+var Turbo = Object.freeze({
+  __proto__: null,
+  navigator: navigator,
+  session: session,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
+  start: start,
+  registerAdapter: registerAdapter,
+  visit: visit,
+  connectStreamSource: connectStreamSource,
+  disconnectStreamSource: disconnectStreamSource,
+  renderStreamMessage: renderStreamMessage,
+  clearCache: clearCache,
+  setProgressBarDelay: setProgressBarDelay
+});
+
+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;
+      this.reloadable = false;
+      if (this.loadingStyle == FrameLoadingStyle.lazy) {
+        this.appearanceObserver.start();
+      }
+      this.linkInterceptor.start();
+      this.formInterceptor.start();
+      this.sourceURLChanged();
+    }
+  }
+  disconnect() {
+    if (this.connected) {
+      this.connected = false;
+      this.appearanceObserver.stop();
+      this.linkInterceptor.stop();
+      this.formInterceptor.stop();
+    }
+  }
+  disabledChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager) {
+      this.loadSourceURL();
+    }
+  }
+  sourceURLChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager || this.hasBeenLoaded) {
+      this.loadSourceURL();
+    }
+  }
+  loadingStyleChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.lazy) {
+      this.appearanceObserver.start();
+    } else {
+      this.appearanceObserver.stop();
+      this.loadSourceURL();
+    }
+  }
+  async loadSourceURL() {
+    if (!this.settingSourceURL && this.enabled && this.isActive && (this.reloadable || 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;
+          session.frameLoaded(this.element);
+        } catch (error) {
+          this.currentURL = previousURL;
+          throw error;
+        }
+      }
+    }
+  }
+  async loadResponse(fetchResponse) {
+    if (fetchResponse.redirected) {
+      this.sourceURL = fetchResponse.response.url;
+    }
+    try {
+      const html = await fetchResponse.responseHTML;
+      if (html) {
+        const {body: body} = parseHTMLDocument(html);
+        const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
+        const renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+        if (this.view.renderPromise) await this.view.renderPromise;
+        await this.view.render(renderer);
+        session.frameRendered(fetchResponse, this.element);
+      }
+    } catch (error) {
+      console.error(error);
+      this.view.invalidate();
+    }
+  }
+  elementAppearedInViewport(element) {
+    this.loadSourceURL();
+  }
+  shouldInterceptLinkClick(element, url) {
+    if (element.hasAttribute("data-turbo-method")) {
+      return false;
+    } else {
+      return this.shouldInterceptNavigation(element);
+    }
+  }
+  linkClickIntercepted(element, url) {
+    this.reloadable = true;
+    this.navigateFrame(element, url);
+  }
+  shouldInterceptFormSubmission(element, submitter) {
+    return this.shouldInterceptNavigation(element, submitter);
+  }
+  formSubmissionIntercepted(element, submitter) {
+    if (this.formSubmission) {
+      this.formSubmission.stop();
+    }
+    this.reloadable = false;
+    this.formSubmission = new FormSubmission(this, element, submitter);
+    if (this.formSubmission.fetchRequest.isIdempotent) {
+      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href, submitter);
+    } else {
+      const {fetchRequest: fetchRequest} = this.formSubmission;
+      this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+      this.formSubmission.start();
+    }
+  }
+  prepareHeadersForRequest(headers, request) {
+    headers["Turbo-Frame"] = this.id;
+  }
+  requestStarted(request) {
+    this.element.setAttribute("busy", "");
+  }
+  requestPreventedHandlingResponse(request, response) {
+    this.resolveVisitPromise();
+  }
+  async requestSucceededWithResponse(request, response) {
+    await this.loadResponse(response);
+    this.resolveVisitPromise();
+  }
+  requestFailedWithResponse(request, response) {
+    console.error(response);
+    this.resolveVisitPromise();
+  }
+  requestErrored(request, error) {
+    console.error(error);
+    this.resolveVisitPromise();
+  }
+  requestFinished(request) {
+    this.element.removeAttribute("busy");
+  }
+  formSubmissionStarted(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.setAttribute("busy", "");
+  }
+  formSubmissionSucceededWithResponse(formSubmission, response) {
+    const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter);
+    frame.delegate.loadResponse(response);
+  }
+  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    this.element.delegate.loadResponse(fetchResponse);
+  }
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
+  }
+  formSubmissionFinished(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.removeAttribute("busy");
+  }
+  allowsImmediateRender(snapshot, resume) {
+    return true;
+  }
+  viewRenderedSnapshot(snapshot, isPreview) {}
+  viewInvalidated() {}
+  async visit(url) {
+    const request = new FetchRequest(this, FetchMethod.get, expandURL(url), undefined, this.element);
+    return new Promise((resolve => {
+      this.resolveVisitPromise = () => {
+        this.resolveVisitPromise = () => {};
+        resolve();
+      };
+      request.perform();
+    }));
+  }
+  navigateFrame(element, url, submitter) {
+    const frame = this.findFrameElement(element, submitter);
+    frame.setAttribute("reloadable", "");
+    frame.src = url;
+  }
+  findFrameElement(element, submitter) {
+    var _a;
+    const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+    return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
+  }
+  async extractForeignFrameElement(container) {
+    let element;
+    const id = CSS.escape(this.id);
+    try {
+      if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
+        return element;
+      }
+      if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
+        await element.loaded;
+        return await this.extractForeignFrameElement(element);
+      }
+      console.error(`Response has no matching <turbo-frame id="${id}"> element`);
+    } catch (error) {
+      console.error(error);
+    }
+    return new FrameElement;
+  }
+  shouldInterceptNavigation(element, submitter) {
+    const id = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-frame")) || 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 (!session.elementDriveEnabled(element)) {
+      return false;
+    }
+    if (submitter && !session.elementDriveEnabled(submitter)) {
+      return false;
+    }
+    return true;
+  }
+  get id() {
+    return this.element.id;
+  }
+  get enabled() {
+    return !this.element.disabled;
   }
-  willFollowLinkToLocation(link, location) {
-    return this.elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  get sourceURL() {
+    if (this.element.src) {
+      return this.element.src;
+    }
   }
-  followedLinkToLocation(link, location) {
-    const action = this.getActionForLink(link);
-    this.visit(location.href, {
-      action: action
-    });
+  get reloadable() {
+    const frame = this.findFrameElement(this.element);
+    return frame.hasAttribute("reloadable");
   }
-  allowsVisitingLocation(location) {
-    return this.applicationAllowsVisitingLocation(location);
+  set reloadable(value) {
+    const frame = this.findFrameElement(this.element);
+    if (value) {
+      frame.setAttribute("reloadable", "");
+    } else {
+      frame.removeAttribute("reloadable");
+    }
   }
-  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;
-  }
-}
-
-function extendURLWithDeprecatedProperties(url) {
-  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
-}
-
-const deprecatedLocationPropertyDescriptors = {
-  absoluteURL: {
-    get() {
-      return this.toString();
+  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 [];
     }
   }
-};
-
-const session = new Session;
-
-const {navigator: navigator} = session;
-
-function start() {
-  session.start();
 }
 
-function registerAdapter(adapter) {
-  session.registerAdapter(adapter);
-}
+FrameElement.delegateConstructor = FrameController;
 
-function visit(location, options) {
-  session.visit(location, options);
-}
+customElements.define("turbo-frame", FrameElement);
 
-function connectStreamSource(source) {
-  session.connectStreamSource(source);
-}
+customElements.define("turbo-stream", StreamElement);
 
-function disconnectStreamSource(source) {
-  session.disconnectStreamSource(source);
-}
+(() => {
+  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!
 
-function renderStreamMessage(message) {
-  session.renderStreamMessage(message);
-}
+        Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
 
-function clearCache() {
-  session.clearCache();
-}
+        For more information, see: https://turbo.hotwired.dev/handbook/building#working-with-script-elements
 
-function setProgressBarDelay(delay) {
-  session.setProgressBarDelay(delay);
-}
+        ——
+        Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
+      `, element.outerHTML);
+    }
+  }
+})();
+
+window.Turbo = Turbo;
 
 start();
 
 var turbo_es2017Esm = Object.freeze({
   __proto__: null,
+  PageRenderer: PageRenderer,
+  PageSnapshot: PageSnapshot,
   clearCache: clearCache,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
   navigator: navigator,
   registerAdapter: registerAdapter,
   renderStreamMessage: renderStreamMessage,
+  session: session,
   setProgressBarDelay: setProgressBarDelay,
   start: start,
   visit: visit
@@ -2851,17 +3270,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 +3293,7 @@ var cable = Object.freeze({
   __proto__: null,
   getConsumer: getConsumer,
   setConsumer: setConsumer,
+  createConsumer: createConsumer,
   subscribeTo: subscribeTo
 });
 
@@ -3334,7 +3757,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 +3779,7 @@ var index = Object.freeze({
   adapters: adapters,
   createWebSocketURL: createWebSocketURL,
   logger: logger,
-  createConsumer: createConsumer,
+  createConsumer: createConsumer$1,
   getConfig: getConfig
 });