Decorator "composition" with Mobx

[adampash]

In my application, I use mobx decorators, but also write my own decorators for custom functionality. Sometimes, I need to apply my own decorator and a mobx decorator (e.g., to make an accessor observable). Ideally, I'd like to be able to apply the mobx observability inside of my decorator so I don't have to fill my class definitions with decorator after decorator. So, my question is:

What's the best way to do this? The only way I’ve gotten it to work is with extendObservable, but i’m not confident this is the right way to do it.

Here's an example of the code I'm using inside a decorator that I've written (in this code, parentKey is a dynamic value passed as an argument to the decorator):

      // make the parent key observable; this is the best way to
      // do this that I've found. Without this, the only way I was able
      // to make the parent observable was by doubling up the decorators
      // on the accessor, which is very repetitive/not ideal, since I always want this behavior.
      // Documentation [here](https://mobx.js.org/api.html#extendobservable)
      extendObservable(this, { [name]: this[parentKey] });
    });

cc'ing @mweststrate (since you asked me to create an issue! Rather than creating an issue, the repo's issue page suggested that discussion was the right place to put this. :) )

[mweststrate]

Hey @adampash, in principle decorators are higher order functions, sou you should be able to call observable as a function with the exact arguments your own decorator received, and get it working from there.

In practice it is often more nuanced, mostly depending on the decorator setup of your application (babel / typescript, standard spec or legacy decorators etc). So if calling observable inside your decorator with the same target and descriptor, and apply your decorator's logic to the output to that, feel free to share the code of your decorator and/or set up a small sandbox, to be able to give more accurate details :)