Merge remote-tracking branch 'turbo/main' into frame-history-update

src/core/drive/form_submission.ts

@@ -1,7 +1,7 @@
 import { FetchRequest, FetchMethod, fetchMethodFromString, FetchRequestHeaders } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { expandURL } from "../url"
-import { dispatch } from "../../util"
+import { attributeTrue, dispatch } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
 
 export interface FormSubmissionDelegate {
@@ -153,6 +153,9 @@ export class FormSubmission {
       if (token) {
         headers["X-CSRF-Token"] = token
       }
+    }
+
+    if (this.requestAcceptsTurboStreamResponse(request)) {
       headers["Accept"] = [StreamMessage.contentType, headers["Accept"]].join(", ")
     }
   }
@@ -204,9 +207,15 @@ export class FormSubmission {
     this.delegate.formSubmissionFinished(this)
   }
 
+  // Private
+
   requestMustRedirect(request: FetchRequest) {
     return !request.isIdempotent && this.mustRedirect
   }
+
+  requestAcceptsTurboStreamResponse(request: FetchRequest) {
+    return !request.isIdempotent || attributeTrue(this.formElement, "data-turbo-stream")
+  }
 }
 
 function buildFormData(formElement: HTMLFormElement, submitter?: HTMLElement): FormData {

src/core/frames/frame_controller.ts

@@ -15,6 +15,7 @@ import {
   uuid,
   getHistoryMethodForAction,
   getVisitAction,
+  attributeTrue,
 } from "../../util"
 import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission"
 import { Snapshot } from "../snapshot"
@@ -169,7 +170,7 @@ export class FrameController
   // Link interceptor delegate
 
   shouldInterceptLinkClick(element: Element, _url: string) {
-    if (element.hasAttribute("data-turbo-method")) {
+    if (element.hasAttribute("data-turbo-method") || attributeTrue(element, "data-turbo-stream")) {
       return false
     } else {
       return this.shouldInterceptNavigation(element)

src/core/session.ts

@@ -12,7 +12,7 @@ import { ScrollObserver } from "../observers/scroll_observer"
 import { StreamMessage } from "./streams/stream_message"
 import { StreamObserver } from "../observers/stream_observer"
 import { Action, Position, StreamSource, isAction } from "./types"
-import { clearBusyState, dispatch, markAsBusy } from "../util"
+import { attributeTrue, clearBusyState, dispatch, markAsBusy } from "../util"
 import { PageView, PageViewDelegate } from "./drive/page_view"
 import { Visit, VisitOptions } from "./drive/visit"
 import { PageSnapshot } from "./drive/page_snapshot"
@@ -165,16 +165,20 @@ export class Session
 
   convertLinkWithMethodClickToFormSubmission(link: Element) {
     const linkMethod = link.getAttribute("data-turbo-method")
+    const useTurboStream = attributeTrue(link, "data-turbo-stream")
 
-    if (linkMethod) {
+    if (linkMethod || useTurboStream) {
       const form = document.createElement("form")
-      form.setAttribute("method", linkMethod)
+      form.setAttribute("method", linkMethod || "get")
       form.action = link.getAttribute("href") || "undefined"
       form.hidden = true
 
-      if (link.hasAttribute("data-turbo-confirm")) {
-        form.setAttribute("data-turbo-confirm", link.getAttribute("data-turbo-confirm")!)
-      }
+      const attributes = ["data-turbo-confirm", "data-turbo-stream"]
+      attributes.forEach((attribute) => {
+        if (link.hasAttribute(attribute)) {
+          form.setAttribute(attribute, link.getAttribute(attribute)!)
+        }
+      })
 
       const frame = this.getTargetFrameForLink(link)
       if (frame) {

src/tests/fixtures/form.html

@@ -25,6 +25,11 @@ <h1>Form</h1>
         <input type="hidden" name="greeting" value="Hello from a redirect">
         <input id="standard-get-form-submit" type="submit" value="form[method=get]">
       </form>
+      <form action="/__turbo/redirect" method="get" data-turbo-stream="true" class="redirect">
+        <input type="hidden" name="path" value="/src/tests/fixtures/form.html">
+        <input type="hidden" name="greeting" value="Hello from a redirect">
+        <input id="standard-get-form-with-stream-opt-in-submit" type="submit" value="form[method=get]">
+      </form>
       <hr>
       <form>
         <button id="form-action-none-q-a" name="q" value="a">Submit ?q=a to form:not([action])</button>
@@ -254,6 +259,8 @@ <h2>Frame: Form</h2>
       <a href="/src/tests/fixtures/frames/hello.html" data-turbo-method="get" data-turbo-frame="_top" id="link-method-inside-frame-target-top">Break-out of frame with method link inside frame</a><br />
       <a href="/src/tests/fixtures/frames/hello.html" data-turbo-method="get" data-turbo-frame="hello" id="link-method-inside-frame-with-target">Method link inside frame targeting another frame</a><br />
       <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-method="post" id="stream-link-method-inside-frame">Stream link inside frame</a>
+      <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-method="get" data-turbo-stream="true" id="stream-link-get-method-inside-frame">Stream link GET inside frame</a>
+      <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-stream="true" id="stream-link-inside-frame">Stream link (no method) inside frame</a>
       <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-method="post" data-turbo-confirm="Are you sure?" id="link-method-inside-frame-with-confirmation"data-turbo-confirm="Are you sure?">Stream link inside frame with confirmation</a>
       <form>
         <a href="/src/tests/fixtures/frames/frame.html" data-turbo-method="get" id="method-link-within-form-inside-frame">Method link within form inside frame</a><br />
@@ -283,6 +290,7 @@ <h2>Frame: Form</h2>
     </turbo-frame>
     <a href="/src/tests/fixtures/frames/hello.html" data-turbo-method="get" id="link-method-outside-frame">Method link outside frame</a><br />
     <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-method="post" id="stream-link-method-outside-frame">Stream link outside frame</a>
+    <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-stream="true" id="stream-link-outside-frame">Stream link (no method) outside frame</a>
     <form>
       <a href="/src/tests/fixtures/frames/hello.html" data-turbo-method="get" id="link-method-within-form-outside-frame">Method link within form outside frame</a><br />
       <a href="/__turbo/messages?content=Link!&type=stream" data-turbo-method="post" id="stream-link-method-within-form-outside-frame">Stream link within form outside frame</a>

src/tests/functional/form_submission_tests.ts

@@ -150,6 +150,14 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await this.getSearchParam("greeting"), "Hello from a form")
   }
 
+  async "test standard GET form submission with data-turbo-stream"() {
+    await this.clickSelector("#standard-get-form-with-stream-opt-in-submit")
+
+    const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request")
+
+    this.assert.ok(fetchOptions.headers["Accept"].includes("text/vnd.turbo-stream.html"))
+  }
+
   async "test standard GET form submission events"() {
     await this.clickSelector("#standard-get-form-submit")
 
@@ -800,6 +808,30 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await message.getVisibleText(), "Link!")
   }
 
+  async "test stream link GET method form submission inside frame"() {
+    await this.clickSelector("#stream-link-get-method-inside-frame")
+
+    const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request")
+
+    this.assert.ok(fetchOptions.headers["Accept"].includes("text/vnd.turbo-stream.html"))
+  }
+
+  async "test stream link inside frame"() {
+    await this.clickSelector("#stream-link-inside-frame")
+
+    const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request")
+
+    this.assert.ok(fetchOptions.headers["Accept"].includes("text/vnd.turbo-stream.html"))
+  }
+
+  async "test stream link outside frame"() {
+    await this.clickSelector("#stream-link-outside-frame")
+
+    const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request")
+
+    this.assert.ok(fetchOptions.headers["Accept"].includes("text/vnd.turbo-stream.html"))
+  }
+
   async "test link method form submission within form inside frame"() {
     await this.clickSelector("#stream-link-method-within-form-inside-frame")
     await this.nextBeat

src/util.ts

@@ -110,3 +110,7 @@ export function getVisitAction(...elements: (Element | undefined)[]): Action | n
 
   return isAction(action) ? action : null
 }
+
+export function attributeTrue(element: Element, attributeName: string) {
+  return element.getAttribute(attributeName) === "true"
+}