Using mobx' @observable annotation together with mobx-keystone

[hcschuetz]

Hi, I tried to use the @observable annotation supported by MobX together with mobx-keystone, but could not get it to work.

Here is some stripped-down example code.

Instead of calling makeObservable in the constructor I would prefer to just prepend @observable accessor to the property declarations. (Notice that this is not a mobx-keystone-based model class. It is rather a view class where I just happen to use MobX as well.)

According to https://mobx.js.org/enabling-decorators.html this requires the TypeScript compiler option "experimentalDecorators" to be unset. But then the compiler leaves the @model annotation from mobx-keystone in the JS code, which Firefox 120 does not like.

Is there a way to use both mobx-keystone class annotations and mobx @observable accessor annotations with the same TypeScript config? Or should I just wait for more widespread annotation support?

[xaviergonz]

That's because you are using vite, which actually uses esbuild to compile TS files rather than tsc internally, and esbuild does not transpile the new decorators yet (evanw/esbuild#104).

If at least the browsers would support them then the lack of transpilation would be ok, but the new standard decorators are still in stage 3 of TC39 and no browsers have yet implemented them (https://caniuse.com/decorators).

If you want to use them then you need to either use tsc to compile the code or pass the esbuild code through babel with the new decorators plugin.

[hcschuetz]

Thanks for the explanation.
So I probably stick with makeObservable for now until either esbuild or the browsers have better decorator support.