Support Array<string | number | boolean | null | undefined> in classList

[samuelgozi]

The problem

Many times I find myself needing to add multiple classes to an element nad I want all of them to be on.
In that case I have two options:

Using the regular class syntax:

export function MyComp() {
  return <div class="class-a class-b"  />
}

Using the classList syntax:

export function MyComp() {
  return <div classList={{ class-a: true, class-b: true }}  />
}

In this case its seems obvious that using the regular class syntax is cleaner and takes less space. But working with dynamically named classes, lets say for example when working with css modules, then both options become ugly.

Using the regular class syntax:

export function MyComp() {
  return <div class={`${styles.classA} ${styles.classB}`}  />
}

Using the classList syntax:

export function MyComp() {
  return <div classList={{ [styles.classA]: true, [styles.classB]: true }}  />
}

In this scenario both options feel bad. The class syntax is hard to type, and you need to "manage" spaces, while the classList syntax feels redundant.

The Proposed solution

I think that adding support for arrays Array<string | boolean | null | undefined> to classList can help in this case as well as in other cases. Such syntax exist in Vue for a while, and svelte handles this case by allowing multiple class attributes on an element.

In the following examples strings, or values that coerce to false are not added to the element.

Here are a few examples that show the strengths of this syntax:
Multiple dynamic classes

export function MyComp() {
  return <div classList={[ styles.classA, styles.classB ]}  />
}

Class A or Class B, if A wasn't set.

export function MyComp() {
  return <div classList={[ styles.classA ?? styles.classB ]}  />
}

Toggle class conditionally. This is an alternative to the object syntax that shines when combined with other classes.

export function MyComp() {
  return <div classList={[ isHidden && styles.hidden ]}  />
}

export function MyComp() {
  return <div classList={[ styles.classA, isHidden && styles.hidden ]}  />
}

This syntax even feels nice when working with multiple string classes:

export function MyComp() {
  return <div classList={[ "class-a", "class-b" ]}  />
}

[samuelgozi]

I want ahead and created a PR for this:
ryansolid/dom-expressions#308