mobxjs / mobx-utils

Utility functions and common patterns for MobX
MIT License
1.18k stars 124 forks source link

deepObserve doesn't respect mobx's observer decorator variants #312

Open TomasChmelik opened 1 year ago

TomasChmelik commented 1 year ago

deepObserve observes everything deeply even if property is decorated by @observable.ref or @observable.shallow.

import {observable, makeObserable} from 'mobx'
import {deepObserve} from 'mobx-utils'

class Entity {
    @observable.ref byRef?: Entity
    @observable property = 0

    constructor() {
        makeObserable(this)
    }
}

const entity = new Entity()
const dispose = deepObserve(entity, () => console.log('Change'))

entity.byRef = new Entity() // Outputs "Change" to console (expected)
entity.byRef.property++ // Outputs "Change" to console (unexpected)

dispose()
import {observable} from 'mobx'
import {deepObserve} from 'mobx-utils'

class Entity {
    @observable.shallow shallow: Entity[] = []
    @observable property = 0

    constructor() {
        makeObserable(this)
    }
}

const entity = new Entity()
const dispose = deepObserve(entity, () => console.log('Change'))

entity.shallow.push(new Entity()) // Outputs "Change" to console (expected)
entity.shallow[0].property++ // Outputs "Change" to console (unexpected)

dispose()

MobX version: 6.3.5 MobX-utils version: 6.0.4