Infinite loop when adding DOM element

[krom-xr]

let example = new Baobab({test: {}})
let divEl = document.createElement('div');
example.select('test').set({div: divEl});

After .set(...) - infinite loop. Browser tab not responding

[Yomguithereal]

Hello @krom-xr. Normally, a Baobab tree is not supposed to hold anything but raw data, not DOM elements. However this case seems quite strange indeed. I think the tree tries to deep clone the element and stumble upon cyclic references and such. If you really want to do that, you can try turning off the persistent option of your tree. I guess this should fix this use case:

let example = new Baobab({test: {}}, {persistent: false});

[krom-xr]

Ok. Thanks. But may be best solution - throw error in that case. If it possible?

In may case - I put stream (webrtc stream) to Baobab store. In one option i put canvas.captureStream() (empty stream). There was ok in chrome - but infinite loop in firefox. Because stream instance - have link to canvas in firefox.

    CanvasCaptureMediaStream {
​​        active: true
        canvas: <canvas id="webrtc-empty-video" hidden="">
        currentTime: 5.358
​        id: "{dfb95857-2aa8-b14e-a239-bb14cdda3ef6}"
        onaddtrack: null
        onremovetrack: null 
       ...
    }

Thanks for answering. Now i solve my problem. But may be other users can fall into similar situation

[Yomguithereal]

But may be best solution - throw error in that case. If it possible?

Probably so. But checking for circular reference does have a performance cost.

You should really avoid storing classes from the DOM in a Baobab tree if you can, though.