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.

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

Treat false attribute values like null/undefined #98

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

kyptin
Copy link

@kyptin kyptin commented May 28, 2021

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.

Null and undefined attribute values are omitted, which is
convenient.

Having false attribute values be omitted would also be convenient.
Before this commit, a false value results in an actual attribute
added to the element, e.g.:

    const h = require('hyperscript')
    h('input', {type: 'text', name: null, required: false}).outerHTML

...which yields:

    '<input type="text" required="false">'

This commit makes false-valued attributes be omitted, so that the
above example would instead yield:

    '<input type="text">'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant