Add legacy decorator support for TypeScript files

[Timer]

Oops, looks like we forgot to turn legacy decorators on:

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (24:3)

I'm surprised there hasn't been a complaint yet!

[metawave]

@Timer Used craco so far to turn decorators on (use it for mobx), but if cra would support it, that would be great!

[smithdalec]

Looking forward to this going in 2.1.1 - the decorators are the one thing preventing me from migrating to react-scripts from react-scripts-ts

[ghost]

I've just hit this, trying to port an app using MobX.

[metawave]

@AndyCJ Warning if you use MobX with @observable decorators on class properties. Babel 7 doesn't support class property annotations yet! This results in no change detection from MobX on those, so your observers don't get notified when values have changed. You have to enable the @babel/plugin-proposal-class-properties to overcome this. You can do it without ejecting using something like craco or another config overloading lib/tool. Maybe this could be added to CRA as well in addition to the decorators already added by @Timer in #5659 ? Without class property decorators the decorators support is not really complete.

[ianschmitz]

@metawave that plugin should already be included in CRA

[ghost]

@metawave That package was added 2 months ago: https://github.com/facebook/create-react-app/blame/fbfa21621ae3c2a66e63daeca1a98beb09860227/packages/babel-preset-react-app/package.json#L21

Unless I'm missing something?

EDIT: Interestingly I currently have a @MobXReact.observer export class MapView extends React.Component which isn't calling render when I change a @MobX.observable.
I'm currently trying to get to the bottom of the cause.
The symptom certainly matches what you say, but the config does appear to load that babel plugin.

EDIT 2: It was a mistake on my part, I was dereferencing an observable in a render callback, which isn't monitored by @MobXReact.observer.
So @babel/plugin-proposal-class-properties appears to be working fine.

[metawave]

@AndyCJ

I do see a difference when compiling. On a vanilla project created with cli, the decorators on class fields don't get transpiled:

/***/ "./src/state.ts":
/*!**********************!*\
  !*** ./src/state.ts ***!
  \**********************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return State; });
/* harmony import */ var _Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/classCallCheck */ "./node_modules/@babel/runtime/helpers/esm/classCallCheck.js");
/* harmony import */ var mobx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mobx */ "./node_modules/mobx/lib/mobx.module.js");

var State = function State() {
  Object(_Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_0__["default"])(this, State);
  this.text = '';
};

for typescript file

import { observable } from 'mobx';

export default class State {
  @observable text: string;

  constructor() {
  	this.text = '';
  }
}

Only when configuring babel to use this plugin, the resulting code is complete:

/*!**********************!*\
  !*** ./src/state.ts ***!
  \**********************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return State; });
/* harmony import */ var _Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_initializerDefineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/initializerDefineProperty */ "./node_modules/@babel/runtime/helpers/esm/initializerDefineProperty.js");
/* harmony import */ var _Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/classCallCheck */ "./node_modules/@babel/runtime/helpers/esm/classCallCheck.js");
/* harmony import */ var _Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_applyDecoratedDescriptor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/applyDecoratedDescriptor */ "./node_modules/@babel/runtime/helpers/esm/applyDecoratedDescriptor.js");
/* harmony import */ var _Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_initializerWarningHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/initializerWarningHelper */ "./node_modules/@babel/runtime/helpers/esm/initializerWarningHelper.js");
/* harmony import */ var mobx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! mobx */ "./node_modules/mobx/lib/mobx.module.js");

var _class, _descriptor;
var State = (_class = function State() {
  Object(_Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_1__["default"])(this, State);
  Object(_Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_initializerDefineProperty__WEBPACK_IMPORTED_MODULE_0__["default"])(this, "text", _descriptor, this);

  this.text = '';
}, (_descriptor = Object(_Users_marcel_Source_test2_node_modules_babel_runtime_helpers_esm_applyDecoratedDescriptor__WEBPACK_IMPORTED_MODULE_2__["default"])(_class.prototype, "text", [mobx__WEBPACK_IMPORTED_MODULE_4__["observable"]], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
})), _class);

/***/ }),

[Timer]

Hmm, that sounds like a bug. Can you file a new issue please?

[metawave]

done! #5741