hyperhype / hyperscript

Create HyperText with JavaScript.
MIT License
2.64k stars 110 forks source link

Treat false attribute values like null/undefined #98

Open kyptin opened 3 years ago

kyptin commented 3 years ago

Treat false attribute values like null/undefined

I noticed that when an attribute value is null or undefined, it's omitted entirely:

const x = require('hyperaxe')
x.input({name: null, id: undefined, type: 'a'}).outerHTML
// which yields:
// => '<input type="a">'

This is convenient (and maybe worth mentioning in the README as a feature) because I can have fewer conditionals in my code.

However, false is handled differently:

x.input({name: false, id: false, type: 'a'}).outerHTML
// which yields:
// => '<input name="false" id="false" type="a">'

In particular, this is a (very slight) pain point when handling the required attribute of inputs.

const Input = (type, name, value, required) => {
  return h(`input`, {type, name, value, required: required ? true : null)
}

Notice the extra noise for the required attribute, which is needed so that a value of false omits the attribute entirely. (Per the HTML spec, any value for the required attribute means that the input is required, so the attribute must be omitted entirely.)

I can't think of a use case where the current behavior is convenient. My idea would technically be a breaking change, but (I think) worth it. Unless I'm missing a good use case for the current behavior.