undefined attribute values are converted to strings

[Mathias Rasmussen]

When attribute values are undefined or null they are appended as strings 'undefined' or 'null'.

For example this code:

var none // unassigned
hx`<li.item class=${none}>...</li>`

Will result in html like this:

<li class="item undefined">...</li>

Whereas virtual-hyperscript will ignore the value and not add it to the class list.

I'm not sure if this is the correct behavior, but i expected it to do the same as virtual-hyperscript. This can be achieved by the developer by supplying a custom concat function, or by ensuring that undefined values are never used, but i think this should be handled by default?

If it is a bug, I think it can be fixed in the concat function, by making undefined parameters default to empty strings (''). However maybe there is a better way to do it?

[Robert Sköld]

I agree.

Ideally the renderers would be responsible for interpreting the attribute values (such as converting to string or whatever) and have the attribute value set to whatever was passed in through the ${}.

[Jorge Bucaran]

I thought this was fixed according to #8.

[Mathias Rasmussen]

@jbucaran Seems like it only works for tag content and not attributes?

[Casey Link]

I can confirm it still exists.

const imgsrc = undefined;
const img = hx`<img src=${imgsrc}/>`

This causes chrome to make http requests to /undefined

[Vladimir Kosmala]

I agree with this issue, it is actually implemented with Babel/JSX.
Those falsy values should be forgotten (not numbers):

• false
• null
• undefined
• empty string

Let's compare:

❌ html`<input value="${data.value ? data.value : ''}" />`
✅ html`<input value="${data.value}" />`

Declarative conditional

❌ html`<div>${data.alert ? html`<x-alert />` : ''}</div>`
✅ html`<div>${data.alert && html`<x-alert />}</div>`

Declarative switch case with three ternary operators

❌ html`<div>${data.option === 1 ? html`<x-option1 />` : (data.option === 2 ? html`<x-option2 />` : html`<x-option3 />`)}</div>`
✅ html`<div>
${data.option === 1 && html`<x-option1 />}
${data.option === 2 && html`<x-option2 />}
${data.option === 3 && html`<x-option3 />}
</div>`

The idea is to keep it declarative (no if/else/swtich) and lisible as possible.

It could create a breaking change so v3 is a possibility.
An other one is to provide this as an option.
What do you think?