What is the purpose of VanX?

[deanebarker]

I'm confused about the purpose of VanX.

In an earlier version of VanJS, there was van.bind which I used to bind an array to a repeating UI component. Then a new version came out, van.bind no longer worked, and now we have VanX.

So, there's van.state and van.reactive, which seems like two ways of doing the same thing.

Can I still bind arrays to UI components without VanX? Is there some new way of whatever van.bind used to do? This just seems like a pretty core use case, and I'm confused why it was moved out of the base library.

[Tao-VanJS]

van.bind was deprecated in VanJS 1.0 because we introduced a better API for state-derived DOM nodes. You can refer to the release notes of VanJS 1.0 at #72. VanJS 1.0 doesn't remove any functionality we had in pre-1.0 versions. It just replaces some API with a more ergonomic version.

vanx.list is making bindings from arrays to a list of UI elements more ergonomic and powerful. But the bindings can be achieved without VanX as well.

[deanebarker]

But why does VanX exist? What does it provide?

[Tao-VanJS]

See #144.

[richcorbs]

I asked the same/similar question last week. I don't speak with any authority but one thing I think I've learned is that with const state = van.state({ abc: 123 }) I cannot set directly the nested/embedded value of state.val.abc = 234 and have the change be reactive. Using van.state, reactivity is only on the whole object like state.val = { abc: 234 }.

However, with const state = vanX.reactive({ abc: 123 }) I can set state.abc = 234 and it will be reactive.

I haven't yet figured out why I need vanX.list.

[Tao-VanJS]

Hi @richcorbs,

For vanX.list, you can refer to this section: https://vanjs.org/demo#todo-app, which has the implementation of a TODO app with and without vanX.list. So you can see the difference.

[deanebarker]

So, to be clear, VanX doesn't add any functionality, it just adds some syntactic sugar so some things require less code?

[Tao-VanJS]

Yeah, sort of.