Lit-html: when vs if

[kenchris]

When is called if in JS, so I find it a bit weird to have to invent another term

const render = () => html`
  ${when(state === 'loading',
    html`<div>Loading...</div>`,
    html`<p>${message}</p>`)}
`;

In general, I think people will keep preferring JSX, because there they could just use actual JS (if, map etc) and mix and match it with HTML.

hyperHTML does something similar to when but used the [] format instead:

(it requires a wire() method call though)

https://viperhtml.js.org/hyperhtml/examples/#!fw=React&example=Conditional%20Rendering
https://github.com/WebReflection/hyperHTML#wait--there-is-a-wire--in-the-code

hyperHTML seems to be able to use map for collections as well:

function update(render, state) {
  render`
  <article data-magic="${state.magic}">
    <h3> ${state.title} </h3>
    List of ${state.paragraphs.length} paragraphs:
    <ul>${
      state.paragraphs
        .map(p => `<li>${p.title}</li>`)
    }</ul>
  </article>
  `;
}

Can you do the same with lit-html?

[justinfagnani]

You absolutely can just use a regular if statement, or ternary operator. The idea behind when() is that it would preserve the hidden-content when the condition is false so that it was cheaper to show it again when the condition change. This is what Polymer's <dom-if> does.

There are two issues with using the name if for this function:

1. if is a keyword. We could use capital If, but personally, style-wise, I wouldn't want to have to name all template related functions with capital case just to avoid keyword collisions.
2. There is a slight difference in behavior over a plain if statement, due to the caching of content.

The when name isn't set in stone, just an idea. A name that concisely conveys that this directive would preserve hidden content would be better.

Regarding hyperHTML:

I think that conditional rendering example is just using a ternary, as you can in lit-html. The use of array is to keep the nested expressions from rendering as plain text - that's something particular to hyperHTML. In lit-html you could leave out the array and have separate nested expressions (or you could leave the array, which would still work).

You can use any iterable in lit-html, so list.map(...) works here too.