turbo-rails 1.3.3 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecb315ac4b0462119b892a555ba5942ac1de84d8bdc565e31d0e166ac244a6c1
-  data.tar.gz: a2e2033e73b26803e9b87962ac451b825257e1f052cb86cef013e0b8eb16bbcd
+  metadata.gz: 216ef0fb1d4b07f9231e52702506e6888495d7c15f07a0778eee156692c84d74
+  data.tar.gz: 964ea9a3f3111be08955e9c707a591941dfe7b5f943566716bcd26fbd3d9b19b
 SHA512:
-  metadata.gz: d830701cc6b05ceb930ed1d873998849d870f7b25701ccc3d5cede6f5659eb107e175a46465963a23bf1239fd3aeb798f105155047324644446305e1fea34d71
-  data.tar.gz: 0bb9370f532eb74a8230320c1aed5ac1d4e5f434873d017454ffe1c005daa124f413ffe1ee11df1cb49f325f85fcd417b9db6bd6909b234d87032d56dcb99284
+  metadata.gz: 2f42f0e27dcb80e83b3bae71416b1c9c0cdd82ef462dfa96c57bc3fa2d2c88b548785d9e7b10945575ab53538cfc0cf99c49c3c7f5d6f4fdd0608f251ae38bad
+  data.tar.gz: 21bd467eed15705e4c46f3da62ae84d8466adc85dcd770abc837c1fbcb517ccca2d7a004f9c856bd2af1f6aed9f83df51825929de463428699a35a58c4b89846

data/README.md

@@ -4,7 +4,7 @@
 
 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](https://github.com/hotwired/turbo-android) or [iOS](https://github.com/hotwired/turbo-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.
 
-Turbo is a language-agnostic framework written in TypeScript, but this gem builds on top of those basics to make the integration with Rails as smooth as possible. You can deliver turbo updates via model callbacks over Action Cable, respond to controller actions with native navigation or standard redirects, and render turbo frames with helpers and layout-free responses.
+Turbo is a language-agnostic framework written in JavaScript, but this gem builds on top of those basics to make the integration with Rails as smooth as possible. You can deliver turbo updates via model callbacks over Action Cable, respond to controller actions with native navigation or standard redirects, and render turbo frames with helpers and layout-free responses.
 
 
 ## Navigate with Turbo Drive
@@ -18,7 +18,7 @@ Whereas Turbolinks previously just dealt with links, Turbo can now also process
 Turbo Drive can be disabled on a per-element basis by annotating the element or any of its ancestors with `data-turbo="false"`. If you want Turbo Drive to be disabled by default, then you can adjust your import like this:
 
 ```js
-import { Turbo } from "@hotwired/turbo-rails"
+import "@hotwired/turbo-rails"
 Turbo.session.drive = false
 ```
 
@@ -55,6 +55,37 @@ When the user will click on the `Edit this todo` link, as direct response to thi
 
 [See documentation](https://turbo.hotwired.dev/handbook/frames).
 
+### A note on custom layouts
+
+In order to render turbo frame requests without the application layout, Turbo registers a custom [layout method](https://api.rubyonrails.org/classes/ActionView/Layouts/ClassMethods.html#method-i-layout). 
+If your application uses custom layout resolution, you have to make sure to return `"turbo_rails/frame"` (or `false` for TurboRails < 1.4.0) for turbo frame requests:
+
+```ruby
+layout :custom_layout
+
+def custom_layout
+  return "turbo_rails/frame" if turbo_frame_request?
+  
+  # ... your custom layout logic
+```
+
+If you are using a custom, but "static" layout,
+
+```ruby
+layout "some_static_layout"
+```
+
+you **have** to change it to a layout method in order to conditionally return `false` for turbo frame requests:
+
+```ruby
+layout :custom_layout
+
+def custom_layout
+  return "turbo_rails/frame" if turbo_frame_request?
+  
+  "some_static_layout"
+```
+
 ## Come Alive with Turbo Streams
 
 Partial page updates that are **delivered asynchronously over a web socket connection** is the hallmark of modern, reactive web applications. With Turbo Streams, you can get all of that modern goodness using the existing server-side HTML you're already rendering to deliver the first page load. With a set of simple CRUD container tags, you can send HTML fragments over the web socket (or in response to direct interactions), and see the page change in response to new data. Again, **no need to construct an entirely separate API**, **no need to wrangle JSON**, **no need to reimplement the HTML construction in JavaScript**. Take the HTML you're already making, wrap it in an update tag, and, voila, your page comes alive.
@@ -96,11 +127,25 @@ import "@hotwired/turbo-rails"
 
 You can watch [the video introduction to Hotwire](https://hotwired.dev/#screencast), which focuses extensively on demonstrating Turbo in a Rails demo. Then you should familiarize yourself with [Turbo handbook](https://turbo.hotwired.dev/handbook/introduction) to understand Drive, Frames, and Streams in-depth. Finally, dive into the code documentation by starting with [`Turbo::FramesHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/frames_helper.rb), [`Turbo::StreamsHelper`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/streams_helper.rb), [`Turbo::Streams::TagBuilder`](https://github.com/hotwired/turbo-rails/blob/main/app/models/turbo/streams/tag_builder.rb), and [`Turbo::Broadcastable`](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb).
 
+### RubyDoc Documentation
+
+For the API documentation covering this gem's classes and packages, [visit the
+RubyDoc page][].
+
+[visit the RubyDoc page](https://rubydoc.info/github/hotwired/turbo-rails/main)
 
 ## Compatibility with Rails UJS
 
 Turbo can coexist with Rails UJS, but you need to take a series of upgrade steps to make it happen. See [the upgrading guide](https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md).
 
+## Testing
+
+
+The [`Turbo::TestAssertions`](./lib/turbo/test_assertions.rb) concern provides Turbo Stream test helpers that assert the presence or absence of `<turbo-stream>` elements in a rendered fragment of HTML. `Turbo::TestAssertions` are automatically included in [`ActiveSupport::TestCase`](https://edgeapi.rubyonrails.org/classes/ActiveSupport/TestCase.html) and depend on the presence of [`rails-dom-testing`](https://github.com/rails/rails-dom-testing/) assertions.
+
+The [`Turbo::TestAssertions::IntegrationTestAssertions`](./lib/turbo/test_assertions/integration_test_assertions.rb) are built on top of `Turbo::TestAssertions`, and add support for passing a `status:` keyword. They are automatically included in [`ActionDispatch::IntegrationTest`](https://edgeguides.rubyonrails.org/testing.html#integration-testing).
+
+The [`Turbo::Broadcastable::TestHelper`](./lib/turbo/broadcastable/test_helper.rb) concern provides Action Cable-aware test helpers that assert that `<turbo-stream>` elements were or were not broadcast over Action Cable. They are not automatically included. To use them in your tests, make sure to `include Turbo::Broadcastable::TestHelper`.
 
 ## Development
 

data/Rakefile

@@ -9,7 +9,20 @@ load "rails/tasks/statistics.rake"
 Rake::TestTask.new do |test|
   test.libs << "test"
   test.test_files = FileList["test/**/*_test.rb"]
-  test.warning = false
 end
 
-task default: :test
+task :test_prereq do
+  puts "Installing Ruby dependencies"
+  `bundle install`
+
+  puts "Installing JavaScript dependencies"
+  `yarn install`
+
+  puts "Building JavaScript"
+  `yarn build`
+
+  puts "Preparing test database"
+  `cd test/dummy; ./bin/rails db:test:prepare; cd ../..`
+end
+
+task default: [:test_prereq, :test]

data/app/assets/javascripts/turbo.js

@@ -56,13 +56,11 @@ function clickCaptured(event) {
 
 (function() {
   if ("submitter" in Event.prototype) return;
-  let prototype;
+  let prototype = window.Event.prototype;
   if ("SubmitEvent" in window && /Apple Computer/.test(navigator.vendor)) {
     prototype = window.SubmitEvent.prototype;
   } else if ("SubmitEvent" in window) {
     return;
-  } else {
-    prototype = window.Event.prototype;
   }
   addEventListener("click", clickCaptured, true);
   Object.defineProperty(prototype, "submitter", {
@@ -82,14 +80,14 @@ var FrameLoadingStyle;
 })(FrameLoadingStyle || (FrameLoadingStyle = {}));
 
 class FrameElement extends HTMLElement {
+  static get observedAttributes() {
+    return [ "disabled", "complete", "loading", "src" ];
+  }
   constructor() {
     super();
     this.loaded = Promise.resolve();
     this.delegate = new FrameElement.delegateConstructor(this);
   }
-  static get observedAttributes() {
-    return [ "disabled", "complete", "loading", "src" ];
-  }
   connectedCallback() {
     this.delegate.connect();
   }
@@ -560,7 +558,7 @@ class FetchRequest {
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
-      body: this.isIdempotent ? null : this.body,
+      body: this.isSafe ? null : this.body,
       signal: this.abortSignal,
       referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href
     };
@@ -570,8 +568,8 @@ class FetchRequest {
       Accept: "text/html, application/xhtml+xml"
     };
   }
-  get isIdempotent() {
-    return this.method == FetchMethod.get;
+  get isSafe() {
+    return this.method === FetchMethod.get;
   }
   get abortSignal() {
     return this.abortController.signal;
@@ -633,9 +631,6 @@ class AppearanceObserver {
 }
 
 class StreamMessage {
-  constructor(fragment) {
-    this.fragment = importStreamElements(fragment);
-  }
   static wrap(message) {
     if (typeof message == "string") {
       return new this(createDocumentFragment(message));
@@ -643,6 +638,9 @@ class StreamMessage {
       return message;
     }
   }
+  constructor(fragment) {
+    this.fragment = importStreamElements(fragment);
+  }
 }
 
 StreamMessage.contentType = "text/vnd.turbo-stream.html";
@@ -691,6 +689,9 @@ function formEnctypeFromString(encoding) {
 }
 
 class FormSubmission {
+  static confirmMethod(message, _element, _submitter) {
+    return Promise.resolve(confirm(message));
+  }
   constructor(delegate, formElement, submitter, mustRedirect = false) {
     this.state = FormSubmissionState.initialized;
     this.delegate = delegate;
@@ -704,9 +705,6 @@ class FormSubmission {
     this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
     this.mustRedirect = mustRedirect;
   }
-  static confirmMethod(message, _element, _submitter) {
-    return Promise.resolve(confirm(message));
-  }
   get method() {
     var _a;
     const method = ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formmethod")) || this.formElement.getAttribute("method") || "";
@@ -732,8 +730,8 @@ 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 isSafe() {
+    return this.fetchRequest.isSafe;
   }
   get stringFormData() {
     return [ ...this.formData ].reduce(((entries, [name, value]) => entries.concat(typeof value == "string" ? [ [ name, value ] ] : [])), []);
@@ -761,7 +759,7 @@ class FormSubmission {
     }
   }
   prepareRequest(request) {
-    if (!request.isIdempotent) {
+    if (!request.isSafe) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
       if (token) {
         request.headers["X-CSRF-Token"] = token;
@@ -775,6 +773,7 @@ class FormSubmission {
     var _a;
     this.state = FormSubmissionState.waiting;
     (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.setAttribute("disabled", "");
+    this.setSubmitsWith();
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: {
@@ -822,6 +821,7 @@ class FormSubmission {
     var _a;
     this.state = FormSubmissionState.stopped;
     (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.removeAttribute("disabled");
+    this.resetSubmitterText();
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: Object.assign({
@@ -830,11 +830,35 @@ class FormSubmission {
     });
     this.delegate.formSubmissionFinished(this);
   }
+  setSubmitsWith() {
+    if (!this.submitter || !this.submitsWith) return;
+    if (this.submitter.matches("button")) {
+      this.originalSubmitText = this.submitter.innerHTML;
+      this.submitter.innerHTML = this.submitsWith;
+    } else if (this.submitter.matches("input")) {
+      const input = this.submitter;
+      this.originalSubmitText = input.value;
+      input.value = this.submitsWith;
+    }
+  }
+  resetSubmitterText() {
+    if (!this.submitter || !this.originalSubmitText) return;
+    if (this.submitter.matches("button")) {
+      this.submitter.innerHTML = this.originalSubmitText;
+    } else if (this.submitter.matches("input")) {
+      const input = this.submitter;
+      input.value = this.originalSubmitText;
+    }
+  }
   requestMustRedirect(request) {
-    return !request.isIdempotent && this.mustRedirect;
+    return !request.isSafe && this.mustRedirect;
   }
   requestAcceptsTurboStreamResponse(request) {
-    return !request.isIdempotent || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+    return !request.isSafe || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+  }
+  get submitsWith() {
+    var _a;
+    return (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("data-turbo-submits-with");
   }
 }
 
@@ -1076,8 +1100,8 @@ class View {
 }
 
 class FrameView extends View {
-  invalidate() {
-    this.element.innerHTML = "";
+  missing() {
+    this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`;
   }
   get snapshot() {
     return new Snapshot(this.element);
@@ -1232,16 +1256,16 @@ class FormLinkClickObserver {
 }
 
 class Bardo {
-  constructor(delegate, permanentElementMap) {
-    this.delegate = delegate;
-    this.permanentElementMap = permanentElementMap;
-  }
   static async preservingPermanentElements(delegate, permanentElementMap, callback) {
     const bardo = new this(delegate, permanentElementMap);
     bardo.enter();
     await callback();
     bardo.leave();
   }
+  constructor(delegate, permanentElementMap) {
+    this.delegate = delegate;
+    this.permanentElementMap = permanentElementMap;
+  }
   enter() {
     for (const id in this.permanentElementMap) {
       const [currentPermanentElement, newPermanentElement] = this.permanentElementMap[id];
@@ -1352,10 +1376,6 @@ function elementIsFocusable(element) {
 }
 
 class FrameRenderer extends Renderer {
-  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
-    super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender);
-    this.delegate = delegate;
-  }
   static renderElement(currentElement, newElement) {
     var _a;
     const destinationRange = document.createRange();
@@ -1368,6 +1388,10 @@ class FrameRenderer extends Renderer {
       currentElement.appendChild(sourceRange.extractContents());
     }
   }
+  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+    super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender);
+    this.delegate = delegate;
+  }
   get shouldRender() {
     return true;
   }
@@ -1429,18 +1453,6 @@ function readScrollBehavior(value, defaultValue) {
 }
 
 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 {
@@ -1458,6 +1470,18 @@ 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);
+  }
   show() {
     if (!this.visible) {
       this.visible = true;
@@ -1626,10 +1650,6 @@ function elementWithoutNonce(element) {
 }
 
 class PageSnapshot extends Snapshot {
-  constructor(element, headSnapshot) {
-    super(element);
-    this.headSnapshot = headSnapshot;
-  }
   static fromHTMLString(html = "") {
     return this.fromDocument(parseHTMLDocument(html));
   }
@@ -1639,6 +1659,10 @@ class PageSnapshot extends Snapshot {
   static fromDocument({head: head, body: body}) {
     return new this(body, new HeadSnapshot(head));
   }
+  constructor(element, headSnapshot) {
+    super(element);
+    this.headSnapshot = headSnapshot;
+  }
   clone() {
     const clonedElement = this.element.cloneNode(true);
     const selectElements = this.element.querySelectorAll("select");
@@ -2143,10 +2167,11 @@ class BrowserAdapter {
 
 class CacheObserver {
   constructor() {
+    this.selector = "[data-turbo-temporary]";
+    this.deprecatedSelector = "[data-turbo-cache=false]";
     this.started = false;
-    this.removeStaleElements = _event => {
-      const staleElements = [ ...document.querySelectorAll('[data-turbo-cache="false"]') ];
-      for (const element of staleElements) {
+    this.removeTemporaryElements = _event => {
+      for (const element of this.temporaryElements) {
         element.remove();
       }
     };
@@ -2154,15 +2179,25 @@ class CacheObserver {
   start() {
     if (!this.started) {
       this.started = true;
-      addEventListener("turbo:before-cache", this.removeStaleElements, false);
+      addEventListener("turbo:before-cache", this.removeTemporaryElements, false);
     }
   }
   stop() {
     if (this.started) {
       this.started = false;
-      removeEventListener("turbo:before-cache", this.removeStaleElements, false);
+      removeEventListener("turbo:before-cache", this.removeTemporaryElements, false);
     }
   }
+  get temporaryElements() {
+    return [ ...document.querySelectorAll(this.selector), ...this.temporaryElementsWithDeprecation ];
+  }
+  get temporaryElementsWithDeprecation() {
+    const elements = document.querySelectorAll(this.deprecatedSelector);
+    if (elements.length) {
+      console.warn(`The ${this.deprecatedSelector} selector is deprecated and will be removed in a future version. Use ${this.selector} instead.`);
+    }
+    return [ ...elements ];
+  }
 }
 
 class FrameRedirector {
@@ -2361,7 +2396,7 @@ class Navigator {
     if (formSubmission == this.formSubmission) {
       const responseHTML = await fetchResponse.responseHTML;
       if (responseHTML) {
-        const shouldCacheSnapshot = formSubmission.method == FetchMethod.get;
+        const shouldCacheSnapshot = formSubmission.isSafe;
         if (!shouldCacheSnapshot) {
           this.view.clearSnapshotCache();
         }
@@ -3362,6 +3397,8 @@ var Turbo = Object.freeze({
   StreamActions: StreamActions
 });
 
+class TurboFrameMissingError extends Error {}
+
 class FrameController {
   constructor(element) {
     this.fetchResponseLoaded = _fetchResponse => {};
@@ -3458,26 +3495,14 @@ class FrameController {
     try {
       const html = await fetchResponse.responseHTML;
       if (html) {
-        const {body: body} = parseHTMLDocument(html);
-        const newFrameElement = await this.extractForeignFrameElement(body);
-        if (newFrameElement) {
-          const snapshot = new Snapshot(newFrameElement);
-          const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
-          if (this.view.renderPromise) await this.view.renderPromise;
-          this.changeHistory();
-          await this.view.render(renderer);
-          this.complete = true;
-          session.frameRendered(fetchResponse, this.element);
-          session.frameLoaded(this.element);
-          this.fetchResponseLoaded(fetchResponse);
-        } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
-          console.warn(`A matching frame for #${this.element.id} was missing from the response, transforming into full-page Visit.`);
-          this.visitResponse(fetchResponse.response);
+        const document = parseHTMLDocument(html);
+        const pageSnapshot = PageSnapshot.fromDocument(document);
+        if (pageSnapshot.isVisitable) {
+          await this.loadFrameResponse(fetchResponse, document);
+        } else {
+          await this.handleUnvisitableFrameResponse(fetchResponse);
         }
       }
-    } catch (error) {
-      console.error(error);
-      this.view.invalidate();
     } finally {
       this.fetchResponseLoaded = () => {};
     }
@@ -3529,7 +3554,6 @@ class FrameController {
     this.resolveVisitPromise();
   }
   async requestFailedWithResponse(request, response) {
-    console.error(response);
     await this.loadResponse(response);
     this.resolveVisitPromise();
   }
@@ -3547,9 +3571,13 @@ class FrameController {
     const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter);
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
     frame.delegate.loadResponse(response);
+    if (!formSubmission.isSafe) {
+      session.clearCache();
+    }
   }
   formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
     this.element.delegate.loadResponse(fetchResponse);
+    session.clearCache();
   }
   formSubmissionErrored(formSubmission, error) {
     console.error(error);
@@ -3579,6 +3607,22 @@ class FrameController {
   willRenderFrame(currentElement, _newElement) {
     this.previousFrameElement = currentElement.cloneNode(true);
   }
+  async loadFrameResponse(fetchResponse, document) {
+    const newFrameElement = await this.extractForeignFrameElement(document.body);
+    if (newFrameElement) {
+      const snapshot = new Snapshot(newFrameElement);
+      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
+      if (this.view.renderPromise) await this.view.renderPromise;
+      this.changeHistory();
+      await this.view.render(renderer);
+      this.complete = true;
+      session.frameRendered(fetchResponse, this.element);
+      session.frameLoaded(this.element);
+      this.fetchResponseLoaded(fetchResponse);
+    } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
+      this.handleFrameMissingFromResponse(fetchResponse);
+    }
+  }
   async visit(url) {
     var _a;
     const request = new FetchRequest(this, FetchMethod.get, url, new URLSearchParams, this.element);
@@ -3634,6 +3678,10 @@ class FrameController {
       session.history.update(method, expandURL(this.element.src || ""), this.restorationIdentifier);
     }
   }
+  async handleUnvisitableFrameResponse(fetchResponse) {
+    console.warn(`The response (${fetchResponse.statusCode}) from <turbo-frame id="${this.element.id}"> is performing a full page visit due to turbo-visit-control.`);
+    await this.visitResponse(fetchResponse.response);
+  }
   willHandleFrameMissingFromResponse(fetchResponse) {
     this.element.setAttribute("complete", "");
     const response = fetchResponse.response;
@@ -3654,6 +3702,14 @@ class FrameController {
     });
     return !event.defaultPrevented;
   }
+  handleFrameMissingFromResponse(fetchResponse) {
+    this.view.missing();
+    this.throwFrameMissingError(fetchResponse);
+  }
+  throwFrameMissingError(fetchResponse) {
+    const message = `The response (${fetchResponse.statusCode}) did not contain the expected <turbo-frame id="${this.element.id}"> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.`;
+    throw new TurboFrameMissingError(message);
+  }
   async visitResponse(response) {
     const wrapped = new FetchResponse(response);
     const responseHTML = await wrapped.responseHTML;
@@ -4048,7 +4104,9 @@ class TurboCableStreamSourceElement extends HTMLElement {
   async connectedCallback() {
     connectStreamSource(this);
     this.subscription = await subscribeTo(this.channel, {
-      received: this.dispatchMessageEvent.bind(this)
+      received: this.dispatchMessageEvent.bind(this),
+      connected: this.subscriptionConnected.bind(this),
+      disconnected: this.subscriptionDisconnected.bind(this)
     });
   }
   disconnectedCallback() {
@@ -4061,6 +4119,12 @@ class TurboCableStreamSourceElement extends HTMLElement {
     });
     return this.dispatchEvent(event);
   }
+  subscriptionConnected() {
+    this.setAttribute("connected", "");
+  }
+  subscriptionDisconnected() {
+    this.removeAttribute("connected");
+  }
   get channel() {
     const channel = this.getAttribute("channel");
     const signed_stream_name = this.getAttribute("signed-stream-name");
@@ -4113,7 +4177,9 @@ function determineFetchMethod(submitter, body, form) {
 
 function determineFormMethod(submitter) {
   if (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) {
-    if (submitter.hasAttribute("formmethod")) {
+    if (submitter.name === "_method") {
+      return submitter.value;
+    } else if (submitter.hasAttribute("formmethod")) {
       return submitter.formMethod;
     } else {
       return null;