Array type for properties values

[damienflament]

Hi !

I'm currently working with your excellent library and Bulma CSS.

As Bulma is based on CSS classes, it can require many values in the class property.

A simple example here, with a tag color depending on a flag:

div({ class: 'tags' },
  span({ class: config.persistence ? 'tag is-success' : 'tag is-warning' }, 'Persistence'),
  span({ class: config.serviceWorker ? 'tag is-success' : 'tag is-warning' }, 'Service Worker')
)

To prevent repeating the constant values, we can use an array and the join function:

div({ class: 'tags' },
  span({ class: ['tag', config.persistence ? 'is-success' : 'is-warning'].join(' ') }, 'Persistence'),
  span({ class: ['tag', config.serviceWorker ? 'is-success' : 'is-warning'].join(' ') }, 'Service Worker')
)

But I like VanJS because it allows to write components in pure JS in a declarative way. A bit more of syntactic sugar can't hurt !

Allowing Array values by joining can do the job:

div({ class: 'tags' },
  span({ class: ['tag', config.persistence ? 'is-success' : 'is-warning'] }, 'Persistence'),
  span({ class: ['tag', config.serviceWorker ? 'is-success' : 'is-warning'] }, 'Service Worker')
)

What about that ?

[Tao-VanJS]

My take is that adding join(" ") at the end isn't too much overhead. It probably doesn't worth the complexity of introducing the special handling of class property.

[damienflament]

Just come back after thinking about template strings.

div({ class: 'tags' },
  span({ class: `tag  ${config.persistence ? 'is-success' : 'is-warning'}` }, 'Persistence'),
  span({ class: `tag  ${config.serviceWorker ? 'is-success' : 'is-warning'}` }, 'Service Worker')
)

This library is definitely perfect as it is.

Thanks for your work !

I close this issue.