Using existing objects as van state objects

[kosirm]

Hi, I just started with van.js. so first of all HUGE THANK YOU for this amazing project!!! It looks like everything I need for my current work.
I have one question, sorry if maybe it was answered already or maybe I missed it in documentation.
I have few existing javascript objects (two arrays of objects and two deeply nested objects) and I would like to set/assign them as van state objects, so I can build reactive html ui for changing these objects properties and that html elements will reflect state of these objects due to reactivity. These objects are changed also from my project workflow (not only from van html elements). Is there any problem to use/change these objects for van state or van state objects can be used only for reactive htlml van elements and then synchronized/merged with my existing objects? Thank you in advance for any reply!

[Tao-VanJS]

Hi @kosirm,

Thanks for reaching out!

For your purpose, you might want to take a look at VanX (the official VanJS extension), which has the functionality of adding reactivity to existing JavaScript classes. To bind arrays to DOM nodes, you can take a look at vanX.list.

Hope it helps :-)

[kosirm]

Perfect, thank you so much!

[kosirm]

There is "Caveat: Once an object is turned reactive with vanX.reactive, you shouldn't access the original object anymore." If I understand it well... I'm accessing/changing these objects all the time (not only from van.js), but if these objects are vanX.reactive objects I can access them directly as vanX.reactive objects and then this should not be a problem, I guess.

[kosirm]

I'm using vis.js network visualization library. Now I'm instatiating nodes and edges like this:

const nodes = new vis.DataSet(nodeArray);
const edges = new vis.DataSet(edgeArray);
const options ={ nodes:{...}, edges:{...}, inteaction:{...}, ...}; // lot of options, ommited for brevity
    var data = {
        nodes: nodes,
        edges: edges,
    };

and I instantiate network with:

const network = new vis.Network(container, data, options); //container is html object holding visualization, so network can not be added to vanX as far as I understand

But that's ok, because what I want to be reactive is nodes, edges and options:

const data = vanX.reactive( {nodes: nodes, edges: edges,})
const options =  vanX.reactive(options);

And then make network with reative objects:

const network = new vis.Network(container, data, options);

Is this ok with van.js?
That way I could make reactive html UI to manage nodes, edges and options.

Thanks for any reply!

[Tao-VanJS]

Yes. That should work well. One caveat is that there could be problems if you try to bind a field that is implemented in native code (see: https://vanjs.org/x#caveat-native-reactivity). If you use a 3rd party library, this might be something out of your control. If the field is implemented in JavaScript, I don't think there will be any problems.

[kosirm]

Thank you Mr. Tao, no it's just plain vanilla js 😄 Now when I have your confirmation, I want to test it!
Looking forward to make it reactive 🚀

[kosirm]

So sorry to report this, but van.js does not work with vis.js network... as far as I can see. It returns ERROR:
Uncaught TypeError: Incompatible receiver, Map required
I hoped so much that this would work... Any hint maybe?
This is the line in vis.js which reports error:

getterFor: function(g) {
            return function(t) {
                var A;
                if (!TC(t) || (A = qe(t)).type !== g)
                    throw new zC("Incompatible receiver, " + g + " required");
                return A
            }
        }

[Tao-VanJS]

I think vis.js has designated code to disallow Proxy's on top of its objects. As a 3rd party library, this is something out of our control.

[kosirm]

Yes I understand this, thank you for reply! I can stringify and parse my objects, they have only primitive values, I removed all functions frome these objects, because I'm sending/receiving them in json anyway. So it's probably even better this way to avoid potential problems down the road, because vis.js is a huge library. I would just need a small&fast json diff/patch library. But that way I loose all reactivity and then this is a nonsense... So I'll probably go with standard js events.

[kosirm]

Very good news... during my work (I work as a bricklayer) I was thinking about this. Vis Network is using another library for storing nodes and edges (vis dataset), and this needs to be done via json, but for options there is no problem, works fine. And exactly options are the thing which I mostly want to be reactive... So I'm happy camper again 😄 🚐

[kosirm]

Only problem which I encountered when using vanX is that chrome is trowing warning/recommendation:
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

I put options in vanX:
var options = vanX.reactive(optionsObj);
and then I create network with it:
var network = new vis.Network(container, data, options); //chrome marks problematic this line