Support multiple classes for Liminal

[gilbert]

I use tailwind, so it's useful to add multiple classes like this:

m(Liminal, {
  present: "transition duration-300",
  entry: "opacity-100",
  exit: "opacity-0",
}, ...)

However this throws the standard browser error:

InvalidCharacterError: The string contains invalid characters.

on a dom.classList.add line.

[barneycarroll]

Fixed in e0a4c74 - Liminal now additionally accepts arrays of classes. In this example:

m(Liminal, {
  present: ["transition", "transform", "duration-300", "opacity-100", "scale-100"],
  absent: ["transition", "transform", "opacity-0"],
  entry: "scale-0",
  exit: ["duration-700", "scale-75"],
}, /*💥*/)

Your example shows a different understanding of how classes ought to be applied - which makes me wonder if the configuration interface needs tweaking:

1. Applies absent & entry in the immediate render frame
2. Forces a render, then immediately removes the above, and applies present
3. On removal trigger, removes the above, and applies absent & exit

Because the classes are designed as states arrived at and departed from, present is somewhat redundant. In my example I've spammed it with values for the sake of a 'complete' description of the liminal states in configuration - where perhaps the distinction of an exit duration-700 is better controlled - but in practice all these classes could (perhaps ought to?) be applied directly to the childs hyperscript expression.

[gilbert]

Awesome, it works! Do you think you could do a string .split() internally so I can write my css strings with spaces? I already have to think about .x.y.z vs x y z variants when using mithril, I prefer not to introduce a third 😁

I like present as I would prefer to have animation-related classes in Liminal. In fact, a base would be helpful too to put stuff like transition transform once and without having to think about where it should go.

[barneycarroll]

I can't remember when I fixed this, but I did!