turbo-rails 0.5.0 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02b7b8f50542dc4f9ab484c802b39f3d6534a8738eed4f9366df1b15f7df47b7
-  data.tar.gz: c0d269a2181eb5f26b8cfa359e75f08fdcc7a3a16c3c7dd1eb83147db961d7cf
+  metadata.gz: 94c9c9d12f7b7318bb4e2eede2cb11e8c7f8ca2eb623d21d7c71c27005422f7a
+  data.tar.gz: e2df4c5dc7d36d4c960dfeff36318e1ed36f0b94e386ce151bda33ecf8826131
 SHA512:
-  metadata.gz: e2804f7d6c3aa12d2c6ae1a622f6f762f6e2a42024621de99399c9c898f9f48a3d7e3d82e810b49cb0a39c39298b9e244bc7551d8236eaf1e1cb901959b3fd65
-  data.tar.gz: e4cfc154aae81e25edf7442a820d9ef5c33050879ab67b9b42a78aa51e8da365eab0c6d9669d3b708291ac31299e6739ead947062737af95788121e84990f328
+  metadata.gz: 40dac08e7447ab44a6d6924d60e8bc8c6d5fff7f88bc8f7ba00c54f957b9559e0d0202cb5ece9165fa571c81b9edd49cd83afc0d75f274c16fb44b193ade9578
+  data.tar.gz: bf61cb90835e8aee3aca8c13728a91b488dae4cb903f3bede52f5991279c3587f9c3dd1eee8b04b450721d65f37d9687e69ad07a690a28d0e5d412932095ccbd

data/README.md

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

data/app/assets/javascripts/turbo.js

@@ -19,7 +19,7 @@ const submittersByForm = new WeakMap;
 function findSubmitterFromClickTarget(target) {
   const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
   const candidate = element ? element.closest("input, button") : null;
-  return (candidate === null || candidate === void 0 ? void 0 : candidate.getAttribute("type")) == "submit" ? candidate : null;
+  return (candidate === null || candidate === void 0 ? void 0 : candidate.type) == "submit" ? candidate : null;
 }
 
 function clickCaptured(event) {
@@ -41,6 +41,97 @@ function clickCaptured(event) {
   });
 })();
 
+var FrameLoadingStyle;
+
+(function(FrameLoadingStyle) {
+  FrameLoadingStyle["eager"] = "eager";
+  FrameLoadingStyle["lazy"] = "lazy";
+})(FrameLoadingStyle || (FrameLoadingStyle = {}));
+
+class FrameElement extends HTMLElement {
+  constructor() {
+    super();
+    this.loaded = Promise.resolve();
+    this.delegate = new FrameElement.delegateConstructor(this);
+  }
+  static get observedAttributes() {
+    return [ "loading", "src" ];
+  }
+  connectedCallback() {
+    this.delegate.connect();
+  }
+  disconnectedCallback() {
+    this.delegate.disconnect();
+  }
+  attributeChangedCallback(name) {
+    if (name == "loading") {
+      this.delegate.loadingStyleChanged();
+    } else if (name == "src") {
+      this.delegate.sourceURLChanged();
+    }
+  }
+  get src() {
+    return this.getAttribute("src");
+  }
+  set src(value) {
+    if (value) {
+      this.setAttribute("src", value);
+    } else {
+      this.removeAttribute("src");
+    }
+  }
+  get loading() {
+    return frameLoadingStyleFromString(this.getAttribute("loading") || "");
+  }
+  set loading(value) {
+    if (value) {
+      this.setAttribute("loading", value);
+    } else {
+      this.removeAttribute("loading");
+    }
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(value) {
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  get autoscroll() {
+    return this.hasAttribute("autoscroll");
+  }
+  set autoscroll(value) {
+    if (value) {
+      this.setAttribute("autoscroll", "");
+    } else {
+      this.removeAttribute("autoscroll");
+    }
+  }
+  get complete() {
+    return !this.delegate.isLoading;
+  }
+  get isActive() {
+    return this.ownerDocument === document && !this.isPreview;
+  }
+  get isPreview() {
+    var _a, _b;
+    return (_b = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.hasAttribute("data-turbo-preview");
+  }
+}
+
+function frameLoadingStyleFromString(style) {
+  switch (style.toLowerCase()) {
+   case "lazy":
+    return FrameLoadingStyle.lazy;
+
+   default:
+    return FrameLoadingStyle.eager;
+  }
+}
+
 class Location {
   constructor(url) {
     const linkWithAnchor = document.createElement("a");
@@ -129,6 +220,12 @@ class FetchResponse {
   get failed() {
     return !this.succeeded;
   }
+  get clientError() {
+    return this.statusCode >= 400 && this.statusCode <= 499;
+  }
+  get serverError() {
+    return this.statusCode >= 500 && this.statusCode <= 599;
+  }
   get redirected() {
     return this.response.redirected;
   }
@@ -136,7 +233,7 @@ class FetchResponse {
     return Location.wrap(this.response.url);
   }
   get isHTML() {
-    return this.contentType && this.contentType.match(/^text\/html|^application\/xhtml\+xml/);
+    return this.contentType && this.contentType.match(/^(?:text\/([^\s;,]+\b)?html|application\/xhtml\+xml)\b/);
   }
   get statusCode() {
     return this.response.status;
@@ -330,27 +427,30 @@ class FetchRequest {
   }
 }
 
-class FormInterceptor {
+class AppearanceObserver {
   constructor(delegate, element) {
-    this.submitBubbled = event => {
-      if (event.target instanceof HTMLFormElement) {
-        const form = event.target;
-        const submitter = event.submitter || undefined;
-        if (this.delegate.shouldInterceptFormSubmission(form, submitter)) {
-          event.preventDefault();
-          event.stopImmediatePropagation();
-          this.delegate.formSubmissionIntercepted(form, submitter);
-        }
+    this.started = false;
+    this.intersect = entries => {
+      const lastEntry = entries.slice(-1)[0];
+      if (lastEntry === null || lastEntry === void 0 ? void 0 : lastEntry.isIntersecting) {
+        this.delegate.elementAppearedInViewport(this.element);
       }
     };
     this.delegate = delegate;
     this.element = element;
+    this.intersectionObserver = new IntersectionObserver(this.intersect);
   }
   start() {
-    this.element.addEventListener("submit", this.submitBubbled);
+    if (!this.started) {
+      this.started = true;
+      this.intersectionObserver.observe(this.element);
+    }
   }
   stop() {
-    this.element.removeEventListener("submit", this.submitBubbled);
+    if (this.started) {
+      this.started = false;
+      this.intersectionObserver.unobserve(this.element);
+    }
   }
 }
 
@@ -377,7 +477,7 @@ class FormSubmission {
   }
   get method() {
     var _a;
-    const method = ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formmethod")) || this.formElement.method;
+    const method = ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formmethod")) || this.formElement.getAttribute("method") || "";
     return fetchMethodFromString(method.toLowerCase()) || FetchMethod.get;
   }
   get action() {
@@ -429,7 +529,9 @@ class FormSubmission {
     };
   }
   requestSucceededWithResponse(request, response) {
-    if (this.requestMustRedirect(request) && !response.redirected) {
+    if (response.clientError || response.serverError) {
+      this.delegate.formSubmissionFailedWithResponse(this, response);
+    } else if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
       const error = new Error("Form responses must redirect to another location");
       this.delegate.formSubmissionErrored(this, error);
     } else {
@@ -496,6 +598,34 @@ function getMetaContent(name) {
   return element && element.content;
 }
 
+function responseSucceededWithoutRedirect(response) {
+  return response.statusCode == 200 && !response.redirected;
+}
+
+class FormInterceptor {
+  constructor(delegate, element) {
+    this.submitBubbled = event => {
+      if (event.target instanceof HTMLFormElement) {
+        const form = event.target;
+        const submitter = event.submitter || undefined;
+        if (this.delegate.shouldInterceptFormSubmission(form, submitter)) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          this.delegate.formSubmissionIntercepted(form, submitter);
+        }
+      }
+    };
+    this.delegate = delegate;
+    this.element = element;
+  }
+  start() {
+    this.element.addEventListener("submit", this.submitBubbled);
+  }
+  stop() {
+    this.element.removeEventListener("submit", this.submitBubbled);
+  }
+}
+
 class LinkInterceptor {
   constructor(delegate, element) {
     this.clickBubbled = event => {
@@ -541,17 +671,61 @@ class FrameController {
   constructor(element) {
     this.resolveVisitPromise = () => {};
     this.element = element;
+    this.appearanceObserver = new AppearanceObserver(this, this.element);
     this.linkInterceptor = new LinkInterceptor(this, this.element);
     this.formInterceptor = new FormInterceptor(this, this.element);
   }
   connect() {
+    if (this.loadingStyle == FrameLoadingStyle.lazy) {
+      this.appearanceObserver.start();
+    }
     this.linkInterceptor.start();
     this.formInterceptor.start();
   }
   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();
+    }
+  }
+  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;
+      }
+    }
+  }
+  async loadResponse(response) {
+    const fragment = fragmentFromHTML(await response.responseHTML);
+    if (fragment) {
+      const element = await this.extractForeignFrameElement(fragment);
+      await nextAnimationFrame();
+      this.loadFrameElement(element);
+      this.scrollFrameIntoView(element);
+      await nextAnimationFrame();
+      this.focusFirstAutofocusableElement();
+    }
+  }
+  elementAppearedInViewport(element) {
+    this.loadSourceURL();
+  }
   shouldInterceptLinkClick(element, url) {
     return this.shouldInterceptNavigation(element);
   }
@@ -572,17 +746,6 @@ class FrameController {
       this.formSubmission.start();
     }
   }
-  async visit(url) {
-    const location = Location.wrap(url);
-    const request = new FetchRequest(this, FetchMethod.get, location);
-    return new Promise((resolve => {
-      this.resolveVisitPromise = () => {
-        this.resolveVisitPromise = () => {};
-        resolve();
-      };
-      request.perform();
-    }));
-  }
   additionalHeadersForRequest(request) {
     return {
       "Turbo-Frame": this.id
@@ -612,11 +775,24 @@ class FrameController {
   formSubmissionStarted(formSubmission) {}
   formSubmissionSucceededWithResponse(formSubmission, response) {
     const frame = this.findFrameElement(formSubmission.formElement);
-    frame.controller.loadResponse(response);
+    frame.delegate.loadResponse(response);
+  }
+  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    this.element.delegate.loadResponse(fetchResponse);
   }
-  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {}
   formSubmissionErrored(formSubmission, error) {}
   formSubmissionFinished(formSubmission) {}
+  async visit(url) {
+    const location = Location.wrap(url);
+    const request = new FetchRequest(this, FetchMethod.get, location);
+    return new Promise((resolve => {
+      this.resolveVisitPromise = () => {
+        this.resolveVisitPromise = () => {};
+        resolve();
+      };
+      request.perform();
+    }));
+  }
   navigateFrame(element, url) {
     const frame = this.findFrameElement(element);
     frame.src = url;
@@ -626,17 +802,6 @@ class FrameController {
     const id = element.getAttribute("data-turbo-frame");
     return (_a = getFrameElementById(id)) !== null && _a !== void 0 ? _a : this.element;
   }
-  async loadResponse(response) {
-    const fragment = fragmentFromHTML(await response.responseHTML);
-    const element = await this.extractForeignFrameElement(fragment);
-    if (element) {
-      await nextAnimationFrame();
-      this.loadFrameElement(element);
-      this.scrollFrameIntoView(element);
-      await nextAnimationFrame();
-      this.focusFirstAutofocusableElement();
-    }
-  }
   async extractForeignFrameElement(container) {
     let element;
     const id = CSS.escape(this.id);
@@ -647,6 +812,8 @@ class FrameController {
       await element.loaded;
       return await this.extractForeignFrameElement(element);
     }
+    console.error(`Response has no matching <turbo-frame id="${id}"> element`);
+    return new FrameElement;
   }
   loadFrameElement(frameElement) {
     var _a;
@@ -703,6 +870,18 @@ class FrameController {
   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) {
@@ -722,9 +901,11 @@ function readScrollLogicalPosition(value, defaultValue) {
   }
 }
 
-function fragmentFromHTML(html = "") {
-  const foreignDocument = document.implementation.createHTMLDocument();
-  return foreignDocument.createRange().createContextualFragment(html);
+function fragmentFromHTML(html) {
+  if (html) {
+    const foreignDocument = document.implementation.createHTMLDocument();
+    return foreignDocument.createRange().createContextualFragment(html);
+  }
 }
 
 function activateElement(element) {
@@ -736,76 +917,6 @@ function activateElement(element) {
   }
 }
 
-class FrameElement extends HTMLElement {
-  constructor() {
-    super();
-    this.controller = new FrameController(this);
-  }
-  static get observedAttributes() {
-    return [ "src" ];
-  }
-  connectedCallback() {
-    this.controller.connect();
-  }
-  disconnectedCallback() {
-    this.controller.disconnect();
-  }
-  attributeChangedCallback() {
-    if (this.src && this.isActive) {
-      const value = this.controller.visit(this.src);
-      Object.defineProperty(this, "loaded", {
-        value: value,
-        configurable: true
-      });
-    }
-  }
-  formSubmissionIntercepted(element, submitter) {
-    this.controller.formSubmissionIntercepted(element, submitter);
-  }
-  get src() {
-    return this.getAttribute("src");
-  }
-  set src(value) {
-    if (value) {
-      this.setAttribute("src", value);
-    } else {
-      this.removeAttribute("src");
-    }
-  }
-  get loaded() {
-    return Promise.resolve(undefined);
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(value) {
-    if (value) {
-      this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-    }
-  }
-  get autoscroll() {
-    return this.hasAttribute("autoscroll");
-  }
-  set autoscroll(value) {
-    if (value) {
-      this.setAttribute("autoscroll", "");
-    } else {
-      this.removeAttribute("autoscroll");
-    }
-  }
-  get isActive() {
-    return this.ownerDocument === document && !this.isPreview;
-  }
-  get isPreview() {
-    var _a, _b;
-    return (_b = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.hasAttribute("data-turbo-preview");
-  }
-}
-
-customElements.define("turbo-frame", FrameElement);
-
 const StreamActions = {
   append() {
     var _a;
@@ -902,6 +1013,10 @@ class StreamElement extends HTMLElement {
   }
 }
 
+FrameElement.delegateConstructor = FrameController;
+
+customElements.define("turbo-frame", FrameElement);
+
 customElements.define("turbo-stream", StreamElement);
 
 (() => {
@@ -1570,7 +1685,8 @@ class FormSubmitObserver {
         const form = event.target instanceof HTMLFormElement ? event.target : undefined;
         const submitter = event.submitter || undefined;
         if (form) {
-          if (this.delegate.willSubmitForm(form, submitter)) {
+          const method = (submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute("formmethod")) || form.method;
+          if (method != "dialog" && this.delegate.willSubmitForm(form, submitter)) {
             event.preventDefault();
             this.delegate.formSubmitted(form, submitter);
           }
@@ -1622,7 +1738,7 @@ class FrameRedirector {
   formSubmissionIntercepted(element, submitter) {
     const frame = this.findFrameElement(element);
     if (frame) {
-      frame.formSubmissionIntercepted(element, submitter);
+      frame.delegate.formSubmissionIntercepted(element, submitter);
     }
   }
   shouldRedirect(element, submitter) {
@@ -1666,8 +1782,6 @@ class History {
   }
   start() {
     if (!this.started) {
-      this.previousScrollRestoration = history.scrollRestoration;
-      history.scrollRestoration = "manual";
       addEventListener("popstate", this.onPopState, false);
       addEventListener("load", this.onPageLoad, false);
       this.started = true;
@@ -1675,9 +1789,7 @@ class History {
     }
   }
   stop() {
-    var _a;
     if (this.started) {
-      history.scrollRestoration = (_a = this.previousScrollRestoration) !== null && _a !== void 0 ? _a : "auto";
       removeEventListener("popstate", this.onPopState, false);
       removeEventListener("load", this.onPageLoad, false);
       this.started = false;
@@ -1707,6 +1819,19 @@ class History {
     const restorationData = this.restorationData[restorationIdentifier];
     this.restorationData[restorationIdentifier] = Object.assign(Object.assign({}, restorationData), additionalData);
   }
+  assumeControlOfScrollRestoration() {
+    var _a;
+    if (!this.previousScrollRestoration) {
+      this.previousScrollRestoration = (_a = history.scrollRestoration) !== null && _a !== void 0 ? _a : "auto";
+      history.scrollRestoration = "manual";
+    }
+  }
+  relinquishControlOfScrollRestoration() {
+    if (this.previousScrollRestoration) {
+      history.scrollRestoration = this.previousScrollRestoration;
+      delete this.previousScrollRestoration;
+    }
+  }
   shouldHandlePopState() {
     return this.pageIsLoaded();
   }
@@ -1803,12 +1928,10 @@ class Navigator {
   }
   formSubmissionStarted(formSubmission) {}
   async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
-    console.log("Form submission succeeded", formSubmission);
     if (formSubmission == this.formSubmission) {
       const responseHTML = await fetchResponse.responseHTML;
       if (responseHTML) {
         if (formSubmission.method != FetchMethod.get) {
-          console.log("Clearing snapshot cache after successful form submission");
           this.view.clearSnapshotCache();
         }
         const {statusCode: statusCode} = fetchResponse;
@@ -1818,17 +1941,21 @@ class Navigator {
             responseHTML: responseHTML
           }
         };
-        console.log("Visiting", fetchResponse.location, visitOptions);
         this.proposeVisit(fetchResponse.location, visitOptions);
       }
     }
   }
-  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
-    console.error("Form submission failed", formSubmission, fetchResponse);
-  }
-  formSubmissionErrored(formSubmission, error) {
-    console.error("Form submission failed", formSubmission, error);
+  async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+    const responseHTML = await fetchResponse.responseHTML;
+    if (responseHTML) {
+      const snapshot = Snapshot.fromHTMLString(responseHTML);
+      this.view.render({
+        snapshot: snapshot
+      }, (() => {}));
+      this.view.clearSnapshotCache();
+    }
   }
+  formSubmissionErrored(formSubmission, error) {}
   formSubmissionFinished(formSubmission) {}
   visitStarted(visit) {
     this.delegate.visitStarted(visit);
@@ -1851,7 +1978,6 @@ var PageStage;
   PageStage[PageStage["loading"] = 1] = "loading";
   PageStage[PageStage["interactive"] = 2] = "interactive";
   PageStage[PageStage["complete"] = 3] = "complete";
-  PageStage[PageStage["invalidated"] = 4] = "invalidated";
 })(PageStage || (PageStage = {}));
 
 class PageObserver {
@@ -1866,6 +1992,9 @@ class PageObserver {
         this.pageIsComplete();
       }
     };
+    this.pageWillUnload = () => {
+      this.delegate.pageWillUnload();
+    };
     this.delegate = delegate;
   }
   start() {
@@ -1874,21 +2003,17 @@ class PageObserver {
         this.stage = PageStage.loading;
       }
       document.addEventListener("readystatechange", this.interpretReadyState, false);
+      addEventListener("pagehide", this.pageWillUnload, false);
       this.started = true;
     }
   }
   stop() {
     if (this.started) {
       document.removeEventListener("readystatechange", this.interpretReadyState, false);
+      removeEventListener("pagehide", this.pageWillUnload, false);
       this.started = false;
     }
   }
-  invalidate() {
-    if (this.stage != PageStage.invalidated) {
-      this.stage = PageStage.invalidated;
-      this.delegate.pageInvalidated();
-    }
-  }
   pageIsInteractive() {
     if (this.stage == PageStage.loading) {
       this.stage = PageStage.interactive;
@@ -1978,7 +2103,7 @@ class StreamObserver {
       const fetchOptions = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.fetchOptions;
       if (fetchOptions) {
         const {headers: headers} = fetchOptions;
-        headers.Accept = [ "text/html; turbo-stream", headers.Accept ].join(", ");
+        headers.Accept = [ "text/vnd.turbo-stream.html", headers.Accept ].join(", ");
       }
     };
     this.inspectFetchResponse = event => {
@@ -2046,7 +2171,7 @@ function fetchResponseFromEvent(event) {
 function fetchResponseIsStream(response) {
   var _a;
   const contentType = (_a = response.contentType) !== null && _a !== void 0 ? _a : "";
-  return /text\/html;.*\bturbo-stream\b/.test(contentType);
+  return /^text\/vnd\.turbo-stream\.html\b/.test(contentType);
 }
 
 function isAction(action) {
@@ -2475,7 +2600,7 @@ class Session {
     });
   }
   willFollowLinkToLocation(link, location) {
-    return this.linkIsVisitable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
+    return this.elementIsNavigable(link) && this.locationIsVisitable(location) && this.applicationAllowsFollowingLinkToLocation(link, location);
   }
   followedLinkToLocation(link, location) {
     const action = this.getActionForLink(link);
@@ -2496,7 +2621,7 @@ class Session {
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
   willSubmitForm(form, submitter) {
-    return true;
+    return this.elementIsNavigable(form) && this.elementIsNavigable(submitter);
   }
   formSubmitted(form, submitter) {
     this.navigator.submitForm(form, submitter);
@@ -2505,9 +2630,11 @@ class Session {
     this.view.lastRenderedLocation = this.location;
     this.notifyApplicationAfterPageLoad();
   }
-  pageLoaded() {}
-  pageInvalidated() {
-    this.adapter.pageInvalidated();
+  pageLoaded() {
+    this.history.assumeControlOfScrollRestoration();
+  }
+  pageWillUnload() {
+    this.history.relinquishControlOfScrollRestoration();
   }
   receivedMessageFromStream(message) {
     this.renderStreamMessage(message);
@@ -2520,7 +2647,7 @@ class Session {
     this.notifyApplicationAfterRender();
   }
   viewInvalidated() {
-    this.pageObserver.invalidate();
+    this.adapter.pageInvalidated();
   }
   viewWillCacheSnapshot() {
     this.notifyApplicationBeforeCachingSnapshot();
@@ -2582,8 +2709,8 @@ class Session {
     const action = link.getAttribute("data-turbo-action");
     return isAction(action) ? action : "advance";
   }
-  linkIsVisitable(link) {
-    const container = link.closest("[data-turbo]");
+  elementIsNavigable(element) {
+    const container = element === null || element === void 0 ? void 0 : element.closest("[data-turbo]");
     if (container) {
       return container.getAttribute("data-turbo") != "false";
     } else {
@@ -2675,7 +2802,7 @@ var cable = Object.freeze({
 class TurboCableStreamSourceElement extends HTMLElement {
   async connectedCallback() {
     connectStreamSource(this);
-    this.subscription = subscribeTo(this.channel, {
+    this.subscription = await subscribeTo(this.channel, {
       received: this.dispatchMessageEvent.bind(this)
     });
   }