How can i make observable fields provided by a decorator

[nihil-pro]

Hi everyone
Imagine this:

// Model
class Foo {
    a: string

    constructor(value: string) {
        this.a = value
    }

    // Works fine, mobx react when {a} is changed
    setA(newValue: string) {
        this.a = newValue
    }
}

// json from api
const response = [{value: 'bar1'}, {value: 'bar2'}, {value: 'bar3'}]

// transform to class with class transformer
const data = response.map(el => plainToInstance(Foo, el))

// store
class store {
    data

    constructor(data: Foo[]) {
        this.data = data
        makeAutoObservable(this, {}, { autoBind: true })
    }

    // works fine, mobx will fire when new item will be added
    add(value: Foo) {
        this.data.push(value)
    }

    // also fine
    remove(element: any) {
        // remove ...
    }
}

above everything is ok, but i want to decorate my model with additional fields, like this:

export function Decorator<T extends Constructor>(Class: T): T {
    return class extends Class {
        constructor(...args: any[]) {
            super(...args);
            
            // this new field won't be tracked by mobx
            Reflect.defineProperty(this, 'test', { value: { foo: '', bar: '' }, enumerable: false })
            
            // i can use set from mobx-utils instead, it will be observable then, but enumerable 
            // set(this, 'test', { value: { foo: '', bar: '' })
        }
    }
}

My question is, how can i decorate a class with new annotations, and make them observable or not, depends of my task?

Thanks a lot

[urugator]

I think both of these should work

super(...args);
Reflect.defineProperty(this, 'test', { value: { foo: '', bar: '' }, enumerable: false })
makeObservable(this, { 'test': true })

or

super(...args);
extendObservable(this, { test: { foo: '', bar: '' } })

[nihil-pro]

I think both of these should work

super(...args);
Reflect.defineProperty(this, 'test', { value: { foo: '', bar: '' }, enumerable: false })
makeObservable(this, { 'test': true })

or

super(...args);
extendObservable(this, { test: { foo: '', bar: '' } })

extendObservable make the property enumerable:

Reflect.defineProperty(this, destination, { enumerable: false, configurable: true, writable: true })

                /** Make it observable by mobx */
                if (makeObservable) {
                    extendObservable(this, { [destination]: null })
                }

Object.keys(class) // contain this new property ((

[urugator]

Yes, no way around that, it's hardcoded for BC reasons

mobx/packages/mobx/src/types/observableobject.ts

Line 398 in 36d3d35

enumerable: true,

[nihil-pro]

well, ok. Thanks.

[urugator]

Why do you need non-enumerable observable prop? If it's some internal state, does it have to be an observable prop of the instance itself? Can't you have a hidden observable nested object like:

defineProperty(this, internalsSymbol, { 
  configurable:false,
  enumerable: false,
  writable: false,
  value: observable({ test: 'I can modify and observe this' }) 
})

[nihil-pro]

well, i get a dto (json), transform into a class, and show it in the view.
The dto contains the main information and also a few ids which contain technical information, i want to lazy fetch these additional objects by id and add them to the main class, and then update the view. But i want to hide these additional fields
Example:

export function WithAddress(
    { source = 'parentId', destination = 'address', parameterName = 'address', makeItObservable = false }: WithAddressOptions
) {
    return function<T extends Constructor>(Class: T): T {
        return class extends Class {
            constructor(...args: any[]) {
                super(...args);

                Reflect.defineProperty(this, destination, { enumerable: false, configurable: true, writable: true })

                /** Make it observable by mobx */
                if (makeItObservable) {
                    extendObservable(this, { [destination]: null })
                }

                /** Lazy setter */
                const setProperty = (value: Parameter | null) => {
                    // @ts-ignore
                    this[destination] = value
                }

                /** Get parent by id and it's address from parameters */
                const setAddress = async (parentId: string) => {

                    if (!controller) {
                        console.error(`In WithAddress > setAddress: typeof controller = ${typeof controller}`)
                    }

                    if (!cache.hasOwnProperty(parentId)) {
                        const instance = await controller.getById(parentId)

                        if (!instance) {
                            console.error(`In WithAddress > setAddress: Instance ${source} wasn't found`)
                            return
                        }

                        cache[parentId] = instance
                    }

                    const address = cache[parentId].parameters.find(param => param.name === parameterName)

                    setProperty(address || null)
                }


                return new Proxy(this, {
                    set: (target: Record<string | symbol, any>, key: string | symbol, value: any) => {
                        // set value
                        target[key] = value

                        // only react on source
                        if (key !== source) return true

                        // apply type setter, value will be typeName
                        setAddress(value).catch(e => console.log(e))

                        return true
                    }
                })
            }
        };
    };
}