van_jsx enhancements

[cqh963852]

As of now, van_jsx cannot handle children of array type as well.

1. Limit the children type.
   Accept type Children = JSXNode | JSXNode[] | ()=>(JSXNode | JSXNode[])

   <div><div/></div>
   

   <div><div/><div/></div>
   

   <div>{ ()=>hidden.val ? null : <div/> }</div>
   

   <div>{ ()=>array.val.map(value=><div/>) }</div>
   

The above type of processing will be simpler than the implementation of the previous version. And adding caching to jsx can realize the ability of array diff

I created another implementation to prove that this idea is feasible. Maybe it can be used to enhance van_jsx

@Tao-VanJS @yahia-berashish

[yahia-berashish]

Hello @cqh963852
I'm sorry but I don't seem to understand the enhancements you are suggesting.
I'm currently working on fixing some type issues with the addon, is this discussion related?

[cqh963852]

It is type related. The type of children will be the previous subset

[yahia-berashish]

I don't see how the Children type differs from ChildDom,
Can you explain your suggestion further?

[yahia-berashish]

I have made a PR #166 that should solve the children and attributes type issues @Tao-VanJS
I hope it fixes the problem you are trying to address here @cqh963852

[cqh963852]

I don't see how the Children type differs from ChildDom,
Can you explain your suggestion further?

It is type related, but not only type change.

The createElement function will be refactored.

type JSXNode {
    el: ChildDom
    dispose: Dispose[]
}
function createElement(): JSXNode

Under this structure, side effects can be better recycled within the component.

You can view the details of this implementation

---

type Children = JSXNode | JSXNode[] | ()=>(JSXNode | JSXNode[])

The reason for restricting children to the above type is that it is easier to achieve this goal with this type.

[yahia-berashish]

In that case, I'm interested if VanX reactive lists and the list() function have diffing built into them @Tao-VanJS @cqh963852

[Tao-VanJS]

vanX.list support keyed input (for that case you need to pass-in a plain object as items). It's guaranteed that the DOM elements won't be refreshed if the values for their keys don't change.