Support && operator-based conditionals in expressions about nanohtml HOT 8 OPEN

I'm on board with this; seems useful enough and can't think of a reason to render the value undefined like ever

from nanohtml.

I don't think we have much control over what happens within the expression of a template literal.

Although I think we should just make it smarter about interpreting booleans for attributes:

html`<input type="checkbox" name="reviewed" checked=${data.reviewed} />`

Would render if true:

<input type="checkbox" name="reviewed" checked="checked" />

and if false:

<input type="checkbox" name="reviewed" />

from nanohtml.

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.

What do you think?

from nanohtml.

I’m on board with this idea

from nanohtml.

Are there any advancements on this ? It seems that it is "supported" syntaxwise but a false value is rendered as the string "false".

I think that it would be best to suppress falsey outputs from the expressions - the only issue being rendering "false" from ${false}, but I think this is much less useful than the simpler conditional rendering ^^.

Thoughts ? Should be an easy fix.

from nanohtml.

I'm going to be diving back into the Choo ecosystem in a big way over the coming months. This is something I would like to see land as well.

from nanohtml.

The type tests in hyperx show that the following values will render empty:

• null
• undefined
• empty string (test is not written, but I wrote a test and will submit a PR)

0 does not render empty thankfully.

I see only two problems making this change.

1. Change false to render empty would be a breaking change
2. I have no idea where in the code to make that change because the code is rather dense. So I could use a hand with that (@goto-bus-stop ?)

from nanohtml.

@mjstahl yeah, hyperx is not an easy codebase. i'd have to go in with some console.logs myself to be sure, but I think the places to look at would be the places that call strfn and concat. Those functions are used to stringify text and attribute values and to concatenate them if there is a ${templatePart} inside.

from nanohtml.