turbo-rails 0.5.9 → 0.5.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 025ba92afa27783a938ec698ff465685559d71698ab3023b091a54d14f0d6dd1
-  data.tar.gz: ae377ccfdb57c9f9f2f862dc81e5863a5bc614002bbdfe39547cb1ede2aa797a
+  metadata.gz: 1abdc38a6d5a735bf6bbd2ff6fb8db49ea74d14e3452afa5c2bda93b23ffb073
+  data.tar.gz: 0bf468488fd8232fec62b975fb9f0ef5449325cf57b932858e03af876d0548e6
 SHA512:
-  metadata.gz: a7f03c2b76b07d65f64b3170b9f9ed6c1a9c4429c9f7eee3abf8bffbdbed8a320806f239df725c5aad37c826d2171ec2abc0c7787d42f929e2741584fc4d84e3
-  data.tar.gz: b2566bd6203b982d5b3cad1c852517a41b3a11ca8c8f097cac3cf7ff45f8d83db3eab3337807a80299cf61fc21f58990275f2e5dc92af75b03b167bf04f05ecc
+  metadata.gz: 79272181e9d15ab14434ba684ac33a2fa186df4fa15462d2ad96a77caaeb8caaf111beebd9bf70f67b7fee3eae0e35c5af5f6e86a4e2c970f07c7b1c58e983bf
+  data.tar.gz: ed1f850a041f5d66ae7bafa8264ac3ee5679db81eb5f91869e4e8624ef0cfadb92f345e9f1de192ee917a568deb866e1231db248820ecdb0afcafc96f8296dc4

data/Rakefile

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

data/app/assets/javascripts/turbo.js

@@ -55,7 +55,7 @@ class FrameElement extends HTMLElement {
     this.delegate = new FrameElement.delegateConstructor(this);
   }
   static get observedAttributes() {
-    return [ "loading", "src" ];
+    return [ "disabled", "loading", "src" ];
   }
   connectedCallback() {
     this.delegate.connect();
@@ -68,6 +68,8 @@ class FrameElement extends HTMLElement {
       this.delegate.loadingStyleChanged();
     } else if (name == "src") {
       this.delegate.sourceURLChanged();
+    } else {
+      this.delegate.disabledChanged();
     }
   }
   get src() {
@@ -133,9 +135,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) {
@@ -171,6 +171,10 @@ function toCacheKey(url) {
   }
 }
 
+function urlsAreEqual(left, right) {
+  return expandURL(left).href == expandURL(right).href;
+}
+
 function getPathComponents(url) {
   return url.pathname.split("/").slice(1);
 }
@@ -323,6 +327,7 @@ class FetchRequest {
     this.abortController = new AbortController;
     this.delegate = delegate;
     this.method = method;
+    this.headers = this.defaultHeaders;
     if (this.isIdempotent) {
       this.url = mergeFormDataEntries(location, [ ...body.entries() ]);
     } else {
@@ -343,7 +348,9 @@ class FetchRequest {
     this.abortController.abort();
   }
   async perform() {
+    var _a, _b;
     const {fetchOptions: fetchOptions} = this;
+    (_b = (_a = this.delegate).prepareHeadersForRequest) === null || _b === void 0 ? void 0 : _b.call(_a, this.headers, this);
     dispatch("turbo:before-fetch-request", {
       detail: {
         fetchOptions: fetchOptions
@@ -387,24 +394,17 @@ 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"
-    };
-  }
 }
 
 function mergeFormDataEntries(url, entries) {
@@ -548,6 +548,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 +642,8 @@ function buildFormData(formElement, submitter) {
   const formData = new FormData(formElement);
   const name = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("name");
   const value = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("value");
-  if (name && formData.get(name) != value) {
-    formData.append(name, value || "");
+  if (name && value != null && formData.get(name) != value) {
+    formData.append(name, value);
   }
   return formData;
 }
@@ -682,6 +685,9 @@ class Snapshot {
       return null;
     }
   }
+  get isConnected() {
+    return this.element.isConnected;
+  }
   get firstAutofocusableElement() {
     return this.element.querySelector("[autofocus]");
   }
@@ -691,8 +697,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;
   }
 }
 
@@ -810,7 +824,7 @@ class LinkInterceptor {
         if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
           this.clickEvent.preventDefault();
           event.preventDefault();
-          this.delegate.linkClickIntercepted(event.target, event.detail.url);
+          this.convertLinkWithMethodClickToFormSubmission(event.target) || this.delegate.linkClickIntercepted(event.target, event.detail.url);
         }
       }
       delete this.clickEvent;
@@ -831,12 +845,77 @@ class LinkInterceptor {
     document.removeEventListener("turbo:click", this.linkClicked);
     document.removeEventListener("turbo:before-visit", this.willVisit);
   }
+  convertLinkWithMethodClickToFormSubmission(link) {
+    var _a;
+    const linkMethod = link.getAttribute("data-turbo-method") || link.getAttribute("data-method");
+    if (linkMethod) {
+      const form = document.createElement("form");
+      form.method = linkMethod;
+      form.action = link.getAttribute("href") || "undefined";
+      (_a = link.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(form, link);
+      return dispatch("submit", {
+        target: form
+      });
+    } else {
+      return false;
+    }
+  }
   respondsToEventTarget(target) {
     const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
     return element && element.closest("turbo-frame, html") == this.element;
   }
 }
 
+class 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;
@@ -871,28 +950,25 @@ 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);
   }
 }
 
@@ -902,37 +978,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";
 }
@@ -985,458 +1030,133 @@ 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();
+}
+
+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 ]
+        })
+      });
+    }), {});
   }
-  requestErrored(request, error) {
-    console.error(error);
-    this.resolveVisitPromise();
+  get trackedElementSignature() {
+    return Object.keys(this.detailsByOuterHTML).filter((outerHTML => this.detailsByOuterHTML[outerHTML].tracked)).join("");
   }
-  requestFinished(request) {
-    this.element.removeAttribute("busy");
+  getScriptElementsNotInSnapshot(snapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot("script", snapshot);
   }
-  formSubmissionStarted(formSubmission) {}
-  formSubmissionSucceededWithResponse(formSubmission, response) {
-    const frame = this.findFrameElement(formSubmission.formElement);
-    frame.delegate.loadResponse(response);
+  getStylesheetElementsNotInSnapshot(snapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot);
   }
-  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 ]
-        })
-      });
-    }), {});
-  }
-  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));
+  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) => {
@@ -1707,7 +1427,7 @@ class Visit {
       const isPreview = this.shouldIssueRequest();
       this.render((async () => {
         this.cacheSnapshot();
-        await this.view.renderPage(snapshot);
+        await this.view.renderPage(snapshot, isPreview);
         this.adapter.visitRendered(this);
         if (!isPreview) {
           this.complete();
@@ -1779,7 +1499,7 @@ class Visit {
     }
   }
   scrollToAnchor() {
-    if (getAnchor(this.location) != null) {
+    if (getAnchor(this.location)) {
       this.view.scrollToAnchor(getAnchor(this.location));
       return true;
     }
@@ -2119,6 +1839,10 @@ class LinkClickObserver {
   }
 }
 
+function isAction(action) {
+  return action == "advance" || action == "replace" || action == "restore";
+}
+
 class Navigator {
   constructor(delegate) {
     this.delegate = delegate;
@@ -2138,8 +1862,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();
     }
@@ -2190,7 +1916,9 @@ class Navigator {
       this.view.clearSnapshotCache();
     }
   }
-  formSubmissionErrored(formSubmission, error) {}
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
+  }
   formSubmissionFinished(formSubmission) {}
   visitStarted(visit) {
     this.delegate.visitStarted(visit);
@@ -2204,6 +1932,11 @@ class Navigator {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
+  getActionForFormSubmission(formSubmission) {
+    const {formElement: formElement, submitter: submitter} = formSubmission;
+    const action = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("data-turbo-action")) || formElement.getAttribute("data-turbo-action");
+    return isAction(action) ? action : "advance";
+  }
 }
 
 var PageStage;
@@ -2366,10 +2099,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 +2138,7 @@ class PageRenderer extends Renderer {
   }
   finishRendering() {
     super.finishRendering();
-    if (this.isPreview) {
+    if (!this.isPreview) {
       this.focusFirstAutofocusableElement();
     }
   }
@@ -2464,12 +2193,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);
     }
@@ -2521,281 +2250,689 @@ class SnapshotCache {
   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();
+  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 PageView extends View {
+  constructor() {
+    super(...arguments);
+    this.snapshotCache = new SnapshotCache(10);
+    this.lastRenderedLocation = new URL(location.href);
+  }
+  renderPage(snapshot, isPreview = false) {
+    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
+    return this.render(renderer);
+  }
+  renderError(snapshot) {
+    const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
+    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());
+    }
+  }
+  getCachedSnapshotForLocation(location) {
+    return this.snapshotCache.get(location);
+  }
+  get snapshot() {
+    return PageSnapshot.fromElement(this.element);
+  }
+  get shouldCacheSnapshot() {
+    return this.snapshot.isCacheable;
+  }
+}
+
+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;
+  }
+  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;
+    }
+  }
+  disable() {
+    this.enabled = false;
+  }
+  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;
+    }
+  }
+  registerAdapter(adapter) {
+    this.adapter = adapter;
+  }
+  visit(location, options = {}) {
+    this.navigator.proposeVisit(expandURL(location), options);
+  }
+  connectStreamSource(source) {
+    this.streamObserver.connectStreamSource(source);
+  }
+  disconnectStreamSource(source) {
+    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) {
+    if (this.enabled) {
+      this.navigator.proposeVisit(location, {
+        action: "restore",
+        historyChanged: true
+      });
+    } else {
+      this.adapter.pageInvalidated();
+    }
+  }
+  scrollPositionChanged(position) {
+    this.history.updateRestorationData({
+      scrollPosition: position
+    });
+  }
+  willFollowLinkToLocation(link, location) {
+    return elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  }
+  followedLinkToLocation(link, location) {
+    const action = this.getActionForLink(link);
+    this.visit(location.href, {
+      action: action
+    });
+  }
+  allowsVisitingLocation(location) {
+    return this.applicationAllowsVisitingLocation(location);
+  }
+  visitProposedToLocation(location, options) {
+    extendURLWithDeprecatedProperties(location);
+    this.adapter.visitProposedToLocation(location, options);
+  }
+  visitStarted(visit) {
+    extendURLWithDeprecatedProperties(visit.location);
+    this.notifyApplicationAfterVisitingLocation(visit.location);
+  }
+  visitCompleted(visit) {
+    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
+  }
+  willSubmitForm(form, submitter) {
+    return elementIsNavigable(form) && elementIsNavigable(submitter);
+  }
+  formSubmitted(form, submitter) {
+    this.navigator.submitForm(form, submitter);
+  }
+  pageBecameInteractive() {
+    this.view.lastRenderedLocation = this.location;
+    this.notifyApplicationAfterPageLoad();
+  }
+  pageLoaded() {
+    this.history.assumeControlOfScrollRestoration();
+  }
+  pageWillUnload() {
+    this.history.relinquishControlOfScrollRestoration();
+  }
+  receivedMessageFromStream(message) {
+    this.renderStreamMessage(message);
+  }
+  viewWillCacheSnapshot() {
+    this.notifyApplicationBeforeCachingSnapshot();
+  }
+  viewWillRenderSnapshot({element: element}, isPreview) {
+    this.notifyApplicationBeforeRender(element);
+  }
+  viewRenderedSnapshot(snapshot, isPreview) {
+    this.view.lastRenderedLocation = this.history.location;
+    this.notifyApplicationAfterRender();
+  }
+  viewInvalidated() {
+    this.adapter.pageInvalidated();
+  }
+  applicationAllowsFollowingLinkToLocation(link, location) {
+    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
+    return !event.defaultPrevented;
+  }
+  applicationAllowsVisitingLocation(location) {
+    const event = this.notifyApplicationBeforeVisitingLocation(location);
+    return !event.defaultPrevented;
+  }
+  notifyApplicationAfterClickingLinkToLocation(link, location) {
+    return dispatch("turbo:click", {
+      target: link,
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationBeforeVisitingLocation(location) {
+    return dispatch("turbo:before-visit", {
+      detail: {
+        url: location.href
+      },
+      cancelable: true
+    });
+  }
+  notifyApplicationAfterVisitingLocation(location) {
+    return dispatch("turbo:visit", {
+      detail: {
+        url: location.href
+      }
+    });
+  }
+  notifyApplicationBeforeCachingSnapshot() {
+    return dispatch("turbo:before-cache");
+  }
+  notifyApplicationBeforeRender(newBody) {
+    return dispatch("turbo:before-render", {
+      detail: {
+        newBody: newBody
+      }
+    });
+  }
+  notifyApplicationAfterRender() {
+    return dispatch("turbo:render");
+  }
+  notifyApplicationAfterPageLoad(timing = {}) {
+    return dispatch("turbo:load", {
+      detail: {
+        url: this.location.href,
+        timing: timing
+      }
+    });
+  }
+  getActionForLink(link) {
+    const action = link.getAttribute("data-turbo-action");
+    return isAction(action) ? action : "advance";
+  }
+  locationIsVisitable(location) {
+    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
   }
-  trim() {
-    for (const key of this.keys.splice(this.size)) {
-      delete this.snapshots[key];
-    }
+  get snapshot() {
+    return this.view.snapshot;
   }
 }
 
-class PageView extends View {
-  constructor() {
-    super(...arguments);
-    this.snapshotCache = new SnapshotCache(10);
-    this.lastRenderedLocation = new URL(location.href);
+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;
   }
-  renderPage(snapshot, isPreview = false) {
-    const renderer = new PageRenderer(this.snapshot, snapshot, isPreview);
-    return this.render(renderer);
+}
+
+function extendURLWithDeprecatedProperties(url) {
+  Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
+}
+
+const deprecatedLocationPropertyDescriptors = {
+  absoluteURL: {
+    get() {
+      return this.toString();
+    }
   }
-  renderError(snapshot) {
-    const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
-    this.render(renderer);
+};
+
+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);
   }
-  clearSnapshotCache() {
-    this.snapshotCache.clear();
+  connect() {
+    if (!this.connected) {
+      this.connected = true;
+      if (this.loadingStyle == FrameLoadingStyle.lazy) {
+        this.appearanceObserver.start();
+      }
+      this.linkInterceptor.start();
+      this.formInterceptor.start();
+      this.sourceURLChanged();
+    }
   }
-  async cacheSnapshot() {
-    if (this.shouldCacheSnapshot) {
-      this.delegate.viewWillCacheSnapshot();
-      const {snapshot: snapshot, lastRenderedLocation: location} = this;
-      await nextEventLoopTick();
-      this.snapshotCache.put(location, snapshot.clone());
+  disconnect() {
+    if (this.connected) {
+      this.connected = false;
+      this.appearanceObserver.stop();
+      this.linkInterceptor.stop();
+      this.formInterceptor.stop();
     }
   }
-  getCachedSnapshotForLocation(location) {
-    return this.snapshotCache.get(location);
+  disabledChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager) {
+      this.loadSourceURL();
+    }
   }
-  get snapshot() {
-    return PageSnapshot.fromElement(this.element);
+  sourceURLChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.eager || this.hasBeenLoaded) {
+      this.loadSourceURL();
+    }
   }
-  get shouldCacheSnapshot() {
-    return this.snapshot.isCacheable;
+  loadingStyleChanged() {
+    if (this.loadingStyle == FrameLoadingStyle.lazy) {
+      this.appearanceObserver.start();
+    } else {
+      this.appearanceObserver.stop();
+      this.loadSourceURL();
+    }
   }
-}
-
-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 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;
+        }
+      }
+    }
   }
-  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;
+  async loadResponse(fetchResponse) {
+    if (fetchResponse.redirected) {
+      this.sourceURL = fetchResponse.response.url;
+    }
+    try {
+      const html = await fetchResponse.responseHTML;
+      if (html) {
+        const {body: body} = parseHTMLDocument(html);
+        const snapshot = new Snapshot(await this.extractForeignFrameElement(body));
+        const renderer = new FrameRenderer(this.view.snapshot, snapshot, false);
+        await this.view.render(renderer);
+      }
+    } catch (error) {
+      console.error(error);
+      this.view.invalidate();
     }
   }
-  disable() {
-    this.enabled = false;
+  elementAppearedInViewport(element) {
+    this.loadSourceURL();
   }
-  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;
+  shouldInterceptLinkClick(element, url) {
+    return this.shouldInterceptNavigation(element);
+  }
+  linkClickIntercepted(element, url) {
+    this.navigateFrame(element, url);
+  }
+  shouldInterceptFormSubmission(element, submitter) {
+    return this.shouldInterceptNavigation(element, submitter);
+  }
+  formSubmissionIntercepted(element, submitter) {
+    if (this.formSubmission) {
+      this.formSubmission.stop();
+    }
+    this.formSubmission = new FormSubmission(this, element, submitter);
+    if (this.formSubmission.fetchRequest.isIdempotent) {
+      this.navigateFrame(element, this.formSubmission.fetchRequest.url.href);
+    } else {
+      const {fetchRequest: fetchRequest} = this.formSubmission;
+      this.prepareHeadersForRequest(fetchRequest.headers, fetchRequest);
+      this.formSubmission.start();
     }
   }
-  registerAdapter(adapter) {
-    this.adapter = adapter;
+  prepareHeadersForRequest(headers, request) {
+    headers["Turbo-Frame"] = this.id;
   }
-  visit(location, options = {}) {
-    this.navigator.proposeVisit(expandURL(location), options);
+  requestStarted(request) {
+    this.element.setAttribute("busy", "");
   }
-  connectStreamSource(source) {
-    this.streamObserver.connectStreamSource(source);
+  requestPreventedHandlingResponse(request, response) {
+    this.resolveVisitPromise();
   }
-  disconnectStreamSource(source) {
-    this.streamObserver.disconnectStreamSource(source);
+  async requestSucceededWithResponse(request, response) {
+    await this.loadResponse(response);
+    this.resolveVisitPromise();
   }
-  renderStreamMessage(message) {
-    document.documentElement.appendChild(StreamMessage.wrap(message).fragment);
+  requestFailedWithResponse(request, response) {
+    console.error(response);
+    this.resolveVisitPromise();
   }
-  clearCache() {
-    this.view.clearSnapshotCache();
+  requestErrored(request, error) {
+    console.error(error);
+    this.resolveVisitPromise();
   }
-  setProgressBarDelay(delay) {
-    this.progressBarDelay = delay;
+  requestFinished(request) {
+    this.element.removeAttribute("busy");
   }
-  get location() {
-    return this.history.location;
+  formSubmissionStarted(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.setAttribute("busy", "");
   }
-  get restorationIdentifier() {
-    return this.history.restorationIdentifier;
+  formSubmissionSucceededWithResponse(formSubmission, response) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.delegate.loadResponse(response);
   }
-  historyPoppedToLocationWithRestorationIdentifier(location) {
-    if (this.enabled) {
-      this.navigator.proposeVisit(location, {
-        action: "restore",
-        historyChanged: true
-      });
-    } else {
-      this.adapter.pageInvalidated();
-    }
+  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    this.element.delegate.loadResponse(fetchResponse);
   }
-  scrollPositionChanged(position) {
-    this.history.updateRestorationData({
-      scrollPosition: position
-    });
+  formSubmissionErrored(formSubmission, error) {
+    console.error(error);
   }
-  willFollowLinkToLocation(link, location) {
-    return this.elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+  formSubmissionFinished(formSubmission) {
+    const frame = this.findFrameElement(formSubmission.formElement);
+    frame.removeAttribute("busy");
   }
-  followedLinkToLocation(link, location) {
-    const action = this.getActionForLink(link);
-    this.visit(location.href, {
-      action: action
-    });
+  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();
+    }));
   }
-  allowsVisitingLocation(location) {
-    return this.applicationAllowsVisitingLocation(location);
+  navigateFrame(element, url) {
+    const frame = this.findFrameElement(element);
+    frame.src = url;
   }
-  visitProposedToLocation(location, options) {
-    extendURLWithDeprecatedProperties(location);
-    this.adapter.visitProposedToLocation(location, options);
+  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;
   }
-  visitStarted(visit) {
-    extendURLWithDeprecatedProperties(visit.location);
-    this.notifyApplicationAfterVisitingLocation(visit.location);
+  async extractForeignFrameElement(container) {
+    let element;
+    const id = CSS.escape(this.id);
+    try {
+      if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
+        return element;
+      }
+      if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
+        await element.loaded;
+        return await this.extractForeignFrameElement(element);
+      }
+      console.error(`Response has no matching <turbo-frame id="${id}"> element`);
+    } catch (error) {
+      console.error(error);
+    }
+    return new FrameElement;
+  }
+  shouldInterceptNavigation(element, submitter) {
+    const id = element.getAttribute("data-turbo-frame") || this.element.getAttribute("target");
+    if (!this.enabled || id == "_top") {
+      return false;
+    }
+    if (id) {
+      const frameElement = getFrameElementById(id);
+      if (frameElement) {
+        return !frameElement.disabled;
+      }
+    }
+    if (!elementIsNavigable(element)) {
+      return false;
+    }
+    if (submitter && !elementIsNavigable(submitter)) {
+      return false;
+    }
+    return true;
   }
-  visitCompleted(visit) {
-    this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
+  get id() {
+    return this.element.id;
   }
-  willSubmitForm(form, submitter) {
-    return this.elementIsNavigable(form) && this.elementIsNavigable(submitter);
+  get enabled() {
+    return !this.element.disabled;
   }
-  formSubmitted(form, submitter) {
-    this.navigator.submitForm(form, submitter);
+  get sourceURL() {
+    if (this.element.src) {
+      return this.element.src;
+    }
   }
-  pageBecameInteractive() {
-    this.view.lastRenderedLocation = this.location;
-    this.notifyApplicationAfterPageLoad();
+  set sourceURL(sourceURL) {
+    this.settingSourceURL = true;
+    this.element.src = sourceURL !== null && sourceURL !== void 0 ? sourceURL : null;
+    this.settingSourceURL = false;
   }
-  pageLoaded() {
-    this.history.assumeControlOfScrollRestoration();
+  get loadingStyle() {
+    return this.element.loading;
   }
-  pageWillUnload() {
-    this.history.relinquishControlOfScrollRestoration();
+  get isLoading() {
+    return this.formSubmission !== undefined || this.resolveVisitPromise !== undefined;
   }
-  receivedMessageFromStream(message) {
-    this.renderStreamMessage(message);
+  get isActive() {
+    return this.element.isActive && this.connected;
   }
-  viewWillCacheSnapshot() {
-    this.notifyApplicationBeforeCachingSnapshot();
+}
+
+function getFrameElementById(id) {
+  if (id != null) {
+    const element = document.getElementById(id);
+    if (element instanceof FrameElement) {
+      return element;
+    }
   }
-  viewWillRenderSnapshot({element: element}, isPreview) {
-    this.notifyApplicationBeforeRender(element);
+}
+
+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;
+    }
   }
-  viewRenderedSnapshot(snapshot, isPreview) {
-    this.view.lastRenderedLocation = this.history.location;
-    this.notifyApplicationAfterRender();
+}
+
+const StreamActions = {
+  after() {
+    var _a, _b;
+    (_b = (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.templateContent, this.targetElement.nextSibling);
+  },
+  append() {
+    var _a;
+    this.removeDuplicateTargetChildren();
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.append(this.templateContent);
+  },
+  before() {
+    var _a, _b;
+    (_b = (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.templateContent, this.targetElement);
+  },
+  prepend() {
+    var _a;
+    this.removeDuplicateTargetChildren();
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.prepend(this.templateContent);
+  },
+  remove() {
+    var _a;
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.remove();
+  },
+  replace() {
+    var _a;
+    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.replaceWith(this.templateContent);
+  },
+  update() {
+    if (this.targetElement) {
+      this.targetElement.innerHTML = "";
+      this.targetElement.append(this.templateContent);
+    }
   }
-  viewInvalidated() {
-    this.adapter.pageInvalidated();
+};
+
+class StreamElement extends HTMLElement {
+  async connectedCallback() {
+    try {
+      await this.render();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.disconnect();
+    }
   }
-  applicationAllowsFollowingLinkToLocation(link, location) {
-    const event = this.notifyApplicationAfterClickingLinkToLocation(link, location);
-    return !event.defaultPrevented;
+  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();
+      }
+    })();
   }
-  applicationAllowsVisitingLocation(location) {
-    const event = this.notifyApplicationBeforeVisitingLocation(location);
-    return !event.defaultPrevented;
+  disconnect() {
+    try {
+      this.remove();
+    } catch (_a) {}
   }
-  notifyApplicationAfterClickingLinkToLocation(link, location) {
-    return dispatch("turbo:click", {
-      target: link,
-      detail: {
-        url: location.href
-      },
-      cancelable: true
-    });
+  removeDuplicateTargetChildren() {
+    this.duplicateChildren.forEach((({targetChild: targetChild}) => {
+      targetChild.remove();
+    }));
   }
-  notifyApplicationBeforeVisitingLocation(location) {
-    return dispatch("turbo:before-visit", {
-      detail: {
-        url: location.href
-      },
-      cancelable: true
-    });
+  get duplicateChildren() {
+    var _a;
+    return [ ...(_a = this.templateContent) === null || _a === void 0 ? void 0 : _a.children ].map((templateChild => {
+      let targetChild = [ ...this.targetElement.children ].filter((c => c.id === templateChild.id))[0];
+      return {
+        targetChild: targetChild,
+        templateChild: templateChild
+      };
+    })).filter((({targetChild: targetChild}) => targetChild));
   }
-  notifyApplicationAfterVisitingLocation(location) {
-    return dispatch("turbo:visit", {
-      detail: {
-        url: location.href
+  get performAction() {
+    if (this.action) {
+      const actionFunction = StreamActions[this.action];
+      if (actionFunction) {
+        return actionFunction;
       }
-    });
+      this.raise("unknown action");
+    }
+    this.raise("action attribute is missing");
   }
-  notifyApplicationBeforeCachingSnapshot() {
-    return dispatch("turbo:before-cache");
+  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");
   }
-  notifyApplicationBeforeRender(newBody) {
-    return dispatch("turbo:before-render", {
-      detail: {
-        newBody: newBody
-      }
-    });
+  get templateContent() {
+    return this.templateElement.content;
   }
-  notifyApplicationAfterRender() {
-    return dispatch("turbo:render");
+  get templateElement() {
+    if (this.firstElementChild instanceof HTMLTemplateElement) {
+      return this.firstElementChild;
+    }
+    this.raise("first child element must be a <template> element");
   }
-  notifyApplicationAfterPageLoad(timing = {}) {
-    return dispatch("turbo:load", {
-      detail: {
-        url: this.location.href,
-        timing: timing
-      }
-    });
+  get action() {
+    return this.getAttribute("action");
   }
-  getActionForLink(link) {
-    const action = link.getAttribute("data-turbo-action");
-    return isAction(action) ? action : "advance";
+  get target() {
+    return this.getAttribute("target");
   }
-  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;
-    }
+  raise(message) {
+    throw new Error(`${this.description}: ${message}`);
   }
-  locationIsVisitable(location) {
-    return isPrefixedBy(location, this.snapshot.rootLocation) && isHTML(location);
+  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 snapshot() {
-    return this.view.snapshot;
+  get beforeRenderEvent() {
+    return new CustomEvent("turbo:before-stream-render", {
+      bubbles: true,
+      cancelable: true
+    });
   }
 }
 
-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.hotwire.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,6 +2970,21 @@ function setProgressBarDelay(delay) {
   session.setProgressBarDelay(delay);
 }
 
+var Turbo = Object.freeze({
+  __proto__: null,
+  navigator: navigator,
+  start: start,
+  registerAdapter: registerAdapter,
+  visit: visit,
+  connectStreamSource: connectStreamSource,
+  disconnectStreamSource: disconnectStreamSource,
+  renderStreamMessage: renderStreamMessage,
+  clearCache: clearCache,
+  setProgressBarDelay: setProgressBarDelay
+});
+
+window.Turbo = Turbo;
+
 start();
 
 var turbo_es2017Esm = Object.freeze({
@@ -2851,17 +3003,20 @@ var turbo_es2017Esm = Object.freeze({
 let consumer;
 
 async function getConsumer() {
-  if (consumer) return consumer;
-  const {createConsumer: createConsumer} = await Promise.resolve().then((function() {
-    return index;
-  }));
-  return setConsumer(createConsumer());
+  return consumer || setConsumer(createConsumer().then(setConsumer));
 }
 
 function setConsumer(newConsumer) {
   return consumer = newConsumer;
 }
 
+async function createConsumer() {
+  const {createConsumer: createConsumer} = await Promise.resolve().then((function() {
+    return index;
+  }));
+  return createConsumer();
+}
+
 async function subscribeTo(channel, mixin) {
   const {subscriptions: subscriptions} = await getConsumer();
   return subscriptions.create(channel, mixin);
@@ -2871,6 +3026,7 @@ var cable = Object.freeze({
   __proto__: null,
   getConsumer: getConsumer,
   setConsumer: setConsumer,
+  createConsumer: createConsumer,
   subscribeTo: subscribeTo
 });
 
@@ -3334,7 +3490,7 @@ function createWebSocketURL(url) {
   }
 }
 
-function createConsumer(url = getConfig("url") || INTERNAL.default_mount_path) {
+function createConsumer$1(url = getConfig("url") || INTERNAL.default_mount_path) {
   return new Consumer(url);
 }
 
@@ -3356,7 +3512,7 @@ var index = Object.freeze({
   adapters: adapters,
   createWebSocketURL: createWebSocketURL,
   logger: logger,
-  createConsumer: createConsumer,
+  createConsumer: createConsumer$1,
   getConfig: getConfig
 });