Observing only specific properties

[Miteshdv]

What can be done if observable is applied to 3 different vars Nd need to provide observer to target variables instead of observing all 3

[solkimicreb]

Every observable has a $raw property, which points to the underlying non-reactive raw object (the one passed to the observable() function.) You can use this to fine tune observability in two ways.

1. Example: Use $raw in observers

import { observable, observe } from '@nx-js/observer-util'

const person = observable({ age: 20 })
observe(() => console.log(`${person.name}: ${person.$raw.age}`))

// this logs 'Bob: 20'
person.name = 'Bob'

// this won't log anything as the observer uses the non-reactive `$raw` object to access `age`
person.age = 33

2. Example: Use $raw at observable mutations

import { observable, observe } from '@nx-js/observer-util'

const person = observable()
observe(() => console.log(person.name))

// this logs 'Bob'
person.name = 'Bob'

// this won't log anything, mutating the $raw object doesn't trigger observers
person.$raw.name = 'John'

I hope this helps. I plan to improve tests and the docs in the next days. I will boost this section a bit too.

Thanks for the issue 🙂

[Miteshdv]

Well Thanks for the reply , you have done tremendous job I appreciate it . It would be nice if we find a way to pair observer Nd observable neatly for eg like Mobx Observables Nd observer Thanks

[Miteshdv]

One way might be using observer function like observer('TARGET PROPERTY TO WATCH',fn()) Thanks

[solkimicreb]

I don't think that I will add that as a feature sorry 🙁 but it can be easily done with normal observers. Take this pseudo code example:

const person = observable({
  name: 'Bob'
})

observe(() => render(person.name))
// this would equal to
// observeProp(person, 'name', () => render(person.name))

You can even build a library that does what you want on top of this library without a lot of code if you feel like doing it 🙂 . I hope this helped, I am closing this now.