Skip to content

Commit

Permalink
Treat [data-turbo-stream] as boolean attribute
Browse files Browse the repository at this point in the history
Replace equality checks for `[data-turbo-stream="true"]` with presence
checks for `[data-turbo-stream]` to more closely match the canonical
behavior for [boolean HTML attributes][].

Turbo already supports other boolean attributes like
`[data-turbo-permanent]` and `[data-turbo-confirm]`, so
`[data-turbo-stream]` should match the precedent.

[boolean HTML attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes
  • Loading branch information
seanpdoyle committed Jul 16, 2022
1 parent 6eb2cde commit 308035a
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 14 deletions.
4 changes: 2 additions & 2 deletions src/core/drive/form_submission.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FetchRequest, FetchMethod, fetchMethodFromString, FetchRequestHeaders } from "../../http/fetch_request"
import { FetchResponse } from "../../http/fetch_response"
import { expandURL } from "../url"
import { attributeTrue, dispatch } from "../../util"
import { dispatch } from "../../util"
import { StreamMessage } from "../streams/stream_message"

export interface FormSubmissionDelegate {
Expand Down Expand Up @@ -219,7 +219,7 @@ export class FormSubmission {
}

requestAcceptsTurboStreamResponse(request: FetchRequest) {
return !request.isIdempotent || attributeTrue(this.formElement, "data-turbo-stream")
return !request.isIdempotent || this.formElement.hasAttribute("data-turbo-stream")
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/core/frames/frame_controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
import { FetchMethod, FetchRequest, FetchRequestDelegate, FetchRequestHeaders } from "../../http/fetch_request"
import { FetchResponse } from "../../http/fetch_response"
import { AppearanceObserver, AppearanceObserverDelegate } from "../../observers/appearance_observer"
import { clearBusyState, getAttribute, parseHTMLDocument, markAsBusy, attributeTrue } from "../../util"
import { clearBusyState, getAttribute, parseHTMLDocument, markAsBusy } from "../../util"
import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission"
import { Snapshot } from "../snapshot"
import { ViewDelegate } from "../view"
Expand Down Expand Up @@ -149,7 +149,7 @@ export class FrameController
// Link interceptor delegate

shouldInterceptLinkClick(element: Element, _url: string) {
if (element.hasAttribute("data-turbo-method") || attributeTrue(element, "data-turbo-stream")) {
if (element.hasAttribute("data-turbo-method") || element.hasAttribute("data-turbo-stream")) {
return false
} else {
return this.shouldInterceptNavigation(element)
Expand Down
4 changes: 2 additions & 2 deletions src/core/session.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 { attributeTrue, clearBusyState, dispatch, markAsBusy } from "../util"
import { clearBusyState, dispatch, markAsBusy } from "../util"
import { PageView, PageViewDelegate } from "./drive/page_view"
import { Visit, VisitOptions } from "./drive/visit"
import { PageSnapshot } from "./drive/page_snapshot"
Expand Down Expand Up @@ -174,7 +174,7 @@ export class Session

convertLinkWithMethodClickToFormSubmission(link: Element) {
const linkMethod = link.getAttribute("data-turbo-method")
const useTurboStream = attributeTrue(link, "data-turbo-stream")
const useTurboStream = link.hasAttribute("data-turbo-stream")

if (linkMethod || useTurboStream) {
const form = document.createElement("form")
Expand Down
8 changes: 4 additions & 4 deletions src/tests/fixtures/form.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <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">
<form action="/__turbo/redirect" method="get" data-turbo-stream 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]">
Expand Down Expand Up @@ -259,8 +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="get" data-turbo-stream id="stream-link-get-method-inside-frame">Stream link GET inside frame</a>
<a href="/__turbo/messages?content=Link!&type=stream" data-turbo-stream 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 />
Expand Down Expand Up @@ -290,7 +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>
<a href="/__turbo/messages?content=Link!&type=stream" data-turbo-stream 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>
Expand Down
4 changes: 0 additions & 4 deletions src/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,3 @@ export function clearBusyState(...elements: Element[]) {
element.removeAttribute("aria-busy")
}
}

export function attributeTrue(element: Element, attributeName: string) {
return element.getAttribute(attributeName) === "true"
}

0 comments on commit 308035a

Please sign in to comment.