Lists in tags work, but () => [..., ...] returns a string

[jfillmore]

I have a scenario where I'd like a reactive element's contents to contain a dynamic list of elements. While the example below is contrived (e.g. nothing here is reactive), it still shows the issue in a concise way:

van.tags.div(
  {class: 'test'},
 () => van.tags.div('good'),
 [van.tags.span('good'), van.tags.span('good')],
 () => [van.tags.span('fail'), van.tags.span('fail')],
);

The output here shows the last items in the div being coerce to strings:

<div class="test">
  <div>good</div>
  <span>good</span>
  <span>good</span>
  [object HTMLSpanElement],[object HTMLSpanElement]
</div>

I've solved this by bumping the function wrapper up to a higher level (e.g.: () => van.tags.div({class: 'test'}, ...). I did find it surprising that returning lists causes string coercion, but normally lists within tags are expanded as if passed as individual arguments.

Any thoughts?

[Tao-VanJS]

This is intended behavior. For state-derived child nodes, the binding function can't return an array of nodes due to the limitation of DOM. You are encouraged to wrap the array with a pass-through container (e.g.: <span> for inline elements and <div> for block elements).

You can refer to section State-derived child nodes in the Tutorial page of VanJS website for this.