Ultimate decorator setup in 2024?

[hyperknot]

Hi,

I'm trying to follow the documentation but in 3 places it says 3 different things about configuring decorators. Can you tell me how to do it in a MobX 7 compatible way?

So far I did:

1. overwrite @babel/core resolution to latest 7.x

  "resolutions": {
    "@babel/core": "7.x"
  },

2. Add this to my config-overrides.js for customize-cra:

    // MobX decorator support
    config =>
      addBabelPlugin([
        '@babel/plugin-proposal-decorators',
        {
          version: '2023-05',
        },
      ])(config),
    config => addBabelPlugin(['@babel/plugin-proposal-class-properties', { loose: false }])(config),
    config => addBabelPlugin(['@babel/plugin-transform-private-methods', { loose: false }])(config),
    config =>
      addBabelPlugin(['@babel/plugin-transform-private-property-in-object', { loose: false }])(
        config,
      ),
    config => addBabelPlugin(['@babel/plugin-transform-class-static-block'])(config),

Interestingly I didn't find @babel/plugin-transform-class-static-block in MobX docs anywhere, but it was asking for it. I found one package by Google, called mobx-mc which had this config: https://github.com/rakenapp/mobx-mc/blob/master/.babelrc

After changing everything to accessor, now it's terminating with, which I couldn't solve yet.

Parsing error: This experimental syntax requires enabling the parser plugin: "decoratorAutoAccessors".=

Also, about the accessors, I don't understand what happens with @observable.ref and observable.map and observable.array. Does @observable.ref accessor work?