undefined attribute values are converted to strings

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?

[vladimirkosmala]

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?

[Ramblurr]

I can confirm it still exists.

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

This causes chrome to make http requests to /undefined