turbo-rails 0.5.2 → 0.5.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b0552458511ec8ad34c4b0b3978d2a9ffb88485b844f60f6bc283287e0eecdd
-  data.tar.gz: eccd64955e5db2682efe9b503c24feeb6cbf50c1e542d7bcef0416ded95026fb
+  metadata.gz: bde12fe28a415f37f7000160bfe9577c066d0a450b2a8b3a072acb11a620f229
+  data.tar.gz: 06e64c67ade4fa00e7ba13eabf31e3f78fef72e8e9faedd66861b0d370c9e94e
 SHA512:
-  metadata.gz: 950a8abe637775b61e610d9c99a61f22fa514704a2a3d4453a0e53854c2c4dfe4e4c65f342cd534869d9d1edd83c513590a70744632a6981df52265b20ca142e
-  data.tar.gz: 5d97247505d6934b2bda932a53b0ca3b19d69fe7000a269001cd50ecc9f38bba090e26f50a3d489073699a93ccc50093f218465f45b054969d10c10026052100
+  metadata.gz: d18cfb444d1511997d07d15e6696ef4a22dafef448ddbe21b0037c60c1b565ab4a24a623393dd9dbadb8685336f0fd6487d0350d4895d336b041b5d07bca7f66
+  data.tar.gz: 1e094bc98631469c394117c65f8e73387c577c4d3e1fdfa329c9bf5ef3f5fd62ea7ba0a4efc394f8696e087f8f06c8870e7fe1ab4066bbe1049f659f22aa8163

data/README.md

@@ -40,14 +40,29 @@ The JavaScript for Turbo can either be run through the asset pipeline, which is
 
 Running `turbo:install` will install through NPM if Webpacker is installed in the application. Otherwise the asset pipeline version is used.
 
-If you're using Webpack and need to use either the cable consumer or the Turbo instance, you can import [`Turbo`](https://turbo.hotwire.dev/reference/drive) and/or [`cable`](https://github.com/hotwired/turbo-rails/blob/87542edecc4008c46249e5d8ede79b3eda62a5e2/app/javascript/turbo/cable.js) (`import { Turbo, cable } from "@hotwired/turbo-rails"`), but ensure that your application actually *uses* the members it `import`s when using this style (see [turbo-rails#48](https://github.com/hotwired/turbo-rails/issues/48)).
+If you're using Webpack and need to use either the cable consumer or the Turbo instance, you can import [`Turbo`](https://turbo.hotwire.dev/reference/drive) and/or [`cable`](https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable.js) (`import { Turbo, cable } from "@hotwired/turbo-rails"`), but ensure that your application actually *uses* the members it `import`s when using this style (see [turbo-rails#48](https://github.com/hotwired/turbo-rails/issues/48)).
 
+If you're using 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 {