Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🚧 Updates List of boolean attributes to follow spec #4325

Merged
merged 2 commits into from
Jul 29, 2024
Merged

🚧 Updates List of boolean attributes to follow spec #4325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c381353
:construction: Updates List of boolean attributes to follow spec
ekwoka Jul 29, 2024
7beaaf4
:white_check_mark: Updates Test for new attributes
ekwoka Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions packages/alpinejs/src/utils/bind.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,18 +146,39 @@ export function safeParseBoolean(rawValue) {
return rawValue ? Boolean(rawValue) : null
}

// As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute
const booleanAttributes = new Set([
'allowfullscreen',
'async',
'autofocus',
'autoplay',
'checked',
'controls',
'default',
'defer',
'disabled',
'formnovalidate',
'inert',
'ismap',
'itemscope',
'loop',
'multiple',
'muted',
'nomodule',
'novalidate',
'open',
'playsinline',
'readonly',
'required',
'reversed',
'selected',
'shadowrootclonable',
'shadowrootdelegatesfocus',
'shadowrootserializable',
])

function isBooleanAttr(attrName) {
// As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute
// Array roughly ordered by estimated usage
const booleanAttributes = [
'disabled','checked','required','readonly','open', 'selected',
'autofocus', 'itemscope', 'multiple', 'novalidate','allowfullscreen',
'allowpaymentrequest', 'formnovalidate', 'autoplay', 'controls', 'loop',
'muted', 'playsinline', 'default', 'ismap', 'reversed', 'async', 'defer',
'nomodule'
]

return booleanAttributes.includes(attrName)
return booleanAttributes.has(attrName)
}

function attributeShouldntBePreservedIfFalsy(name) {
Expand Down
15 changes: 12 additions & 3 deletions tests/cypress/integration/directives/x-bind.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,12 @@ test('boolean attribute values are set to their attribute name if true and remov
<option x-bind:selected="isSet"></option>
<textarea x-bind:autofocus="isSet"></textarea>
<dl x-bind:itemscope="isSet"></dl>
<form x-bind:novalidate="isSet"></form>
<form
x-bind:novalidate="isSet"
x-bind:inert="isSet"
></form>
<iframe
x-bind:allowfullscreen="isSet"
x-bind:allowpaymentrequest="isSet"
></iframe>
<button x-bind:formnovalidate="isSet"></button>
<audio
Expand All @@ -121,6 +123,11 @@ test('boolean attribute values are set to their attribute name if true and remov
<track x-bind:default="isSet" />
<img x-bind:ismap="isSet" />
<ol x-bind:reversed="isSet"></ol>
<template
x-bind:shadowrootclonable="isSet"
x-bind:shadowrootdelegatesfocus="isSet"
x-bind:shadowrootserializable="isSet"
></template>
</div>
`,
({ get }) => {
Expand All @@ -135,7 +142,6 @@ test('boolean attribute values are set to their attribute name if true and remov
get('dl').should(haveAttribute('itemscope', 'itemscope'))
get('form').should(haveAttribute('novalidate', 'novalidate'))
get('iframe').should(haveAttribute('allowfullscreen', 'allowfullscreen'))
get('iframe').should(haveAttribute('allowpaymentrequest', 'allowpaymentrequest'))
get('button').should(haveAttribute('formnovalidate', 'formnovalidate'))
get('audio').should(haveAttribute('autoplay', 'autoplay'))
get('audio').should(haveAttribute('controls', 'controls'))
Expand All @@ -145,6 +151,9 @@ test('boolean attribute values are set to their attribute name if true and remov
get('track').should(haveAttribute('default', 'default'))
get('img').should(haveAttribute('ismap', 'ismap'))
get('ol').should(haveAttribute('reversed', 'reversed'))
get('template').should(haveAttribute('shadowrootclonable', 'shadowrootclonable'))
get('template').should(haveAttribute('shadowrootdelegatesfocus', 'shadowrootdelegatesfocus'))
get('template').should(haveAttribute('shadowrootserializable', 'shadowrootserializable'))

get('#setToFalse').click()

Expand Down
Loading