diff --git a/create.js b/create.js index dcc06e5..9068109 100644 --- 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 index 3cb3e1e..ee189b0 100644 --- 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 index ea3a539..0cae9a1 100644 --- 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``.data.attrs.disabled, + false, + 'sets false value for boolean attributes' + ) + + t.is( + snabby``.data.attrs.disabled, + 'true', + 'sets value for boolean attributes' + ) + + t.is( + snabby``.data.attrs.disabled, + 'disabled', + 'sets value for boolean attributes' + ) + + + t.is( + snabby``.data.attrs.disabled, + false, + 'preserves value for boolean attributes in @attrs: directives' + ) + + t.is( + snabby``.data.attrs.disabled, + false, + 'preserves value for boolean attributes in @attrs: directives' + ) + + t.is( + snabby``.data.attrs.disabled, + 'disabled', + 'preserves value for boolean attributes in @attrs: directives' + ) + + + t.is( + snabby``.data.attrs.disabled, + 'true', + 'preserves value for boolean attributes in @attrs: directives' + ) + + t.is( + snabby``.data.attrs.disabled, + 'true', + 'preserves value for boolean attributes in @attrs: directives' + ) +}) + + +test('non-boolean attribute', function (t) { + t.plan(6) + + t.is( + snabby``.data.attrs.draggable, + 'false', + 'preserves "false" value for non-boolean attributes' + ) + + t.is( + snabby``.data.attrs.draggable, + 'true', + 'preserves "true" value for non-boolean attributes' + ) + + t.is( + snabby``.data.attrs.draggable, + 'false', + 'preserves value for non-boolean attributes in @attrs: directives' + ) + + t.is( + snabby``.data.attrs.draggable, + 'false', + 'preserves value for non-boolean attributes in @attrs: directives' + ) + + t.is( + snabby``.data.attrs.draggable, + 'true', + 'preserves value for non-boolean attributes in @attrs: directives' + ) + + t.is( + snabby``.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``.data.props.enabled, + false, + 'sets a prop to the real false value, not a string' + ) + + t.is( + snabby``.data.props.enabled, + 'true', + 'sets a prop to the real false value, not a string' + ) + + t.is( + snabby``.data.props.derp, + 'flerp', + 'sets a prop to a string value' + ) + + t.same( + snabby``.data.props.cool, + { a: true, b: 345 }, + 'sets a prop to an object value' + ) + +}) + test('flatten array children', function (t) { t.plan(1)