How to customize annotation?

[janryWang]

I now require a deep observable object to exclude some special data types of objects, but Mobx does not provide the corresponding API, so I hope to be able to customize the annotation.

Like this.

import { makeObservable } from 'mobx'

const myAnnotation = ()=>{
  //...
}

makeObservable({
  data:{
    node:<div>hello world</div> //If the node attribute is react node(React.isValidElement),
                                // then use observable.ref, otherwise use deep observable
  }
},{
  data:myAnnotation
})

[iChenLei]

@urugator Any suggestion? 👀

[janryWang]

This issue is the same issue as #2809 @urugator My core requirement is to observe the properties of deep objects through customized means.

[urugator]

You're supposed to modify observables via actions - meaning you're in control of the conversion process if the automatic one doesn't work you. So as I said you can use lodash or something to traverse provided object and make things observable as required.

[janryWang]

How to convert it? Can you give a demo?

[urugator]

Another way to handle this is to wrap these in extra observable box with deep false
store.data.node = observable.box(reactElement, { deep: false })
Since the box is already observable, the mobx will ignore it and leaves reactElement untouched.

[janryWang]

The problem is that in my scenario, I don’t know whether the data type of node is a react element or a normal object. If it is a normal object, I want to continue to observe recursively. like this #2809 (reply in thread)