False arguments serialized as strings

Suppose use-case for conditional applying classes:

import { render } from "preact";
import { html } from "htm/preact";

let el = document.createElement("div");
render(
  html`
    <div class="${false} ${null} ${undefined} ${"foo"}" />
  `,
  el
);

console.log(el.innerHTML);
// <div class="false null undefined foo"></div> 

Sandbox

That’s unexpected that the htm serializes false/null class values literally. That can be worked around with clsx or alike, but.

[developit]

This is not addressable, since the behaviour described would be specific to a given attribute. For example, htm explicitly cannot treat falsy (combined or otherwise) values within some attributes as empty:

html`<a aria-hidden="${false}">visible</a>`
// should render <a aria-hidden="false">visible</a>

html`<a aria-hidden=" ${false} ">visible</a>`
// should render <a aria-hidden=" false ">visible</a>

While I can see the convenience of special-casing DOMTokenList values in HTM, it’s not feasible to implement a scalable solution for doing so.

// classnames
const cx = (...a) => a.filter(Boolean).join(' ');

html`<a class=${cx(false, 'hello', null, undefined)}>visible</a>`
// renders <a class="hello">visible</a>

In terms of my own preference or recommendation, it seems like this would be nicer to address at the pragma layer. Personally I’d just co-opt classList for the purpose:

function h(tag, props, children) {
  if (props && props.classList) props.class = props.classList.filter(Boolean).join(' ');
  return { tag, props, children };
}
const html = htm.bind(h);
html`<a classList=${[false, 'hello', null, undefined]}>visible</a>`
// renders <a class="hello">visible</a>

[dy]

you can’t just remove values

The problem is not false/null values, but string attributes - htm does rendering part here, meaningless for classes and possibly all string attributes in general:

html`<div attr="foo ${false}"/>`
// expected <div attr="foo" />
// actual <div attr="foo false" />