🚧 Updates List of boolean attributes to follow spec (#4325)

* 🚧 Updates List of boolean attributes to follow spec * ✅ Updates Test for new attributes
alpinejs · Jul 29, 2024 · 081816f · 081816f
1 parent 6ac9782
commit 081816f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/packages/alpinejs/src/utils/bind.js b/packages/alpinejs/src/utils/bind.js
@@ -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) {

diff --git a/tests/cypress/integration/directives/x-bind.spec.js b/tests/cypress/integration/directives/x-bind.spec.js
@@ -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
@@ -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 }) => {
@@ -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'))
@@ -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()