support boolean attributes. Fixes #31

mreinstein · Oct 29, 2023 · ee09d11 · ee09d11
1 parent 88dc34e
commit ee09d11
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 8 deletions.
diff --git a/create.js b/create.js
@@ -1,5 +1,6 @@
 import { init, thunk, h } from 'snabbdom'
 import hyperx             from 'hyperx-tmp'
+import isBoolAttribute    from 'is-boolean-attribute'
 
 
 export default function create (modules, options={}) {
@@ -26,12 +27,14 @@ export default function create (modules, options={}) {
     const data = { }
     for (let i = 0, max = names.length; max > i; i++) {
       const name = names[i]
-      if (input[name] === 'false')
-        input[name] = false
+
+      const isDirective = name.indexOf(directive) === 0
 
-      // directive attributes
-      if (name.indexOf(directive) === 0) {
+      if (isDirective) {
         const parts = name.slice(1).split(':')
+        if ((parts[0] !== 'attrs' || isBoolAttribute(parts[1])) && input[name] === 'false')
+          input[name] = false
+
         let previous = data
         for (let p = 0, pmax = parts.length, last = pmax - 1; p < pmax; p++) {
           const part = parts[p]
@@ -42,17 +45,19 @@ export default function create (modules, options={}) {
           else
             previous = previous[part]
         }
-      }
 
-      // put all other attributes into `data.attrs`
-      else {
+      } else {
+        // put all other attributes into `data.attrs`
+        if (isBoolAttribute(name) && input[name] === 'false')
+          input[name] = false
+
         if (!data.attrs)
           data.attrs = { }
         data.attrs[name] = input[name]
       }
     }
 
-    // return vnode:
+    // return vnode
     return h(sel, data, content)
   }
 

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "hyperx-tmp": "^2.5.4",
+    "is-boolean-attribute": "^0.0.1",
     "snabbdom": "^3.0.3"
   },
   "engines": {

diff --git a/test/test.js b/test/test.js
@@ -64,6 +64,102 @@ test('class attribute', function (t) {
 })
 
 
+test('boolean attribute', function (t) {
+  t.plan(8)
+
+  t.is(
+    snabby`<img disabled="false" />`.data.attrs.disabled,
+    false,
+    'sets false value for boolean attributes'
+  )
+
+  t.is(
+    snabby`<img disabled="true" />`.data.attrs.disabled,
+    'true',
+    'sets value for boolean attributes'
+  )
+
+  t.is(
+    snabby`<img disabled />`.data.attrs.disabled,
+    'disabled',
+    'sets value for boolean attributes'
+  )
+
+
+  t.is(
+    snabby`<img @attrs:disabled=${false} />`.data.attrs.disabled,
+    false,
+    'preserves value for boolean attributes in @attrs: directives'
+  )
+
+  t.is(
+    snabby`<img @attrs:disabled=${'false'} />`.data.attrs.disabled,
+    false,
+    'preserves value for boolean attributes in @attrs: directives'
+  )
+
+  t.is(
+    snabby`<img @attrs:disabled=${'disabled'} />`.data.attrs.disabled,
+    'disabled',
+    'preserves value for boolean attributes in @attrs: directives'
+  )
+
+
+  t.is(
+    snabby`<img @attrs:disabled=${true} />`.data.attrs.disabled,
+    'true',
+    'preserves value for boolean attributes in @attrs: directives'
+  )
+
+  t.is(
+    snabby`<img @attrs:disabled=${'true'} />`.data.attrs.disabled,
+    'true',
+    'preserves value for boolean attributes in @attrs: directives'
+  )
+})
+
+
+test('non-boolean attribute', function (t) {
+  t.plan(6)
+
+  t.is(
+    snabby`<img draggable="false" />`.data.attrs.draggable,
+    'false',
+    'preserves "false" value for non-boolean attributes'
+  )
+
+  t.is(
+    snabby`<img draggable="true" />`.data.attrs.draggable,
+    'true',
+    'preserves "true" value for non-boolean attributes'
+  )
+
+  t.is(
+    snabby`<img @attrs:draggable=${false} />`.data.attrs.draggable,
+    'false',
+    'preserves value for non-boolean attributes in @attrs: directives'
+  )
+
+  t.is(
+    snabby`<img @attrs:draggable=${'false'} />`.data.attrs.draggable,
+    'false',
+    'preserves value for non-boolean attributes in @attrs: directives'
+  )
+
+  t.is(
+    snabby`<img @attrs:draggable=${true} />`.data.attrs.draggable,
+    'true',
+    'preserves value for non-boolean attributes in @attrs: directives'
+  )
+
+  t.is(
+    snabby`<img @attrs:draggable=${'true'} />`.data.attrs.draggable,
+    'true',
+    'preserves value for non-boolean attributes in @attrs: directives'
+  )
+})
+
+
 test('non-string attribute value', function (t) {
   t.plan(1)
   t.is(
@@ -73,6 +169,35 @@ test('non-string attribute value', function (t) {
   )
 })
 
+test('props', function (t) {
+  t.plan(4)
+
+  t.is(
+    snabby`<input @props:enabled=${false}>`.data.props.enabled,
+    false,
+    'sets a prop to the real false value, not a string'
+  )
+
+  t.is(
+    snabby`<input @props:enabled=${true}>`.data.props.enabled,
+    'true',
+    'sets a prop to the real false value, not a string'
+  )
+
+  t.is(
+    snabby`<input @props:derp=${'flerp'}>`.data.props.derp,
+    'flerp',
+    'sets a prop to a string value'
+  )
+
+  t.same(
+    snabby`<input @props:cool=${ { a: true, b: 345 } }>`.data.props.cool,
+    { a: true, b: 345 },
+    'sets a prop to an object value'
+  )
+
+})
+
 
 test('flatten array children', function (t) {
   t.plan(1)