Support the new Babel 7 decorator implementation

[mweststrate]

Example config for babel 7, in decorators legacy mode:

//.babelrc
{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

Please note that plugin ordering is important, and plugin-proposal-decorators should be the first plugin in your plugin list

"devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/preset-env": "^7.1.0"
}

Non-legacy mode decorators (stage 2) is work in progress, see #1732

Edit: updated config to show the non-beta configuration for babel 7

[brandonhall]

Just wanted to share my requirements for setting up mobx with babel 7.0.0-beta.40. Mainly, I wanted to highlight the necessary inclusion of babel-plugin-transform-decorators-legacy:

// package.json
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "@babel/preset-stage-1": "^7.0.0-beta.40",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     ....
  }

// using webpack.config.js instead of babel.rc
presets: [
  '@babel/preset-react',
  '@babel/preset-env',
  '@babel/preset-stage-1',
],
plugins: [
  'react-hot-loader/babel',
  'transform-decorators-legacy',
  [
    'transform-class-properties', { loose: true, },
  ],
],

[Kielan]

I really like decorators, any way to keep it?

[und3fined]

My config. It work well

// package.json
"@babel/core": "^7.0.0-beta.42",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.42",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "@babel/preset-react": "^7.0.0-beta.42",
    "@babel/preset-stage-2": "^7.0.0-beta.42",

// .babelrc
{
    "presets": [
        ["@babel/preset-env", { "modules": false }],
        "@babel/preset-react",
        "@babel/preset-stage-2"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-decorators",
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ],
    "env": {
        "development": {
            "plugins": ["react-hot-loader/babel"]
        }
    }
}

[emgyrz]

@und3fined, thanks, it's works!

[Tsury]

When using the new Babel 7.00-beta.46 it no longer works, as described here

[dgcoffman]

UPDATE
Issue I was having below was caused by having "@babel/plugin-transform-flow-strip-types", as my first plugin. It needs to come after decorators and class-properties.

---

Builds work fine for me but I'm getting runtime errors like:

Error: [mobx] no observable property 'someObservableClassProperty' found on the observable object 'MyStoreObject'
    at invariant (webpack-internal:///./node_modules/mobx/lib/mobx.module.js:2704)
    at fail$1 (webpack-internal:///./node_modules/mobx/lib/mobx.module.js:2699)
    at getAtom (webpack-internal:///./node_modules/mobx/lib/mobx.module.js:1990)
    at getAdministration (webpack-internal:///./node_modules/mobx/lib/mobx.module.js:2010)
    at observeObservableProperty (webpack-internal:///./node_modules/mobx/lib/mobx.module.js:3651)
    at observe (webpack-internal:///./node_modules/mobx/lib/mobx.module.js:3643)
    at new MyStoreObject (webpack-internal:///./src/stores/MyStoreObject.js:198)

for things like

class MyStoreObject {
  @observable someObservableClassProperty;
}

It appears that at the time that getAtom is called, thing.$mobx.values does not include property.

thing.__mobxDecorators contains only computed properties -- no observable properties.

My package.json has

    "@babel/cli": "7.0.0-beta.46",
    "@babel/core": "7.0.0-beta.46",
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.46",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.46",
    "@babel/polyfill": "7.0.0-beta.46",
    "@babel/preset-env": "7.0.0-beta.46",
    "@babel/preset-react": "7.0.0-beta.46",
    "@babel/preset-stage-3": "7.0.0-beta.46",
    "babel-loader": "8.0.0-beta.2",
    "mobx": "4.2.0",

.babelrc

{
  "presets": [
    "@babel/react",
    "@babel/stage-3",
    "@babel/preset-env",
  ],
  "plugins": [
    // NOTE: flow-strip-types MUST come after decorators and class-properties
    "@babel/plugin-transform-flow-strip-types",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
  ]
}

[und3fined]

@Tsury please try.

update for babel@7.0.0.-beta.46
My config work well.

// package.json
"@babel/core": "^7.0.0-beta.46",
"@babel/plugin-transform-runtime": "^7.0.0-beta.46",
"@babel/preset-env": "^7.0.0-beta.46",
"@babel/preset-react": "^7.0.0-beta.46",
"@babel/preset-stage-2": "^7.0.0-beta.46",
"@babel/runtime": "^7.0.0-beta.46",

Diff with 7.0.0-beta42

• @babel/plugin-proposal-decorators include in stage-2 (https://github.com/babel/babel/tree/v7.0.0-beta.46/packages/babel-preset-stage-2)
• @babel/plugin-proposal-class-properties include in stage-3

// .babelrc
{
    "presets": [
        ["@babel/preset-env", { "modules": false }],
        "@babel/preset-react",
        ["@babel/preset-stage-2", { "loose": true, "decoratorsLegacy": true }]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ],
    "env": {
        "development": {
            "plugins": ["react-hot-loader/babel"]
        }
    }
}