undefined attribute values are converted to strings

[mathiasvr]

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?

[slaskis]

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 ${}.

[jorgebucaran]

I thought this was fixed according to https://github.com/substack/hyperx/issues/8.

[mathiasvr]

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

[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

[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?