Add support for decorators (facebook#5659)

* Turn on decorators * Add decorator test

Author: Timer

packages/babel-preset-react-app/create.js

@@ -117,6 +117,11 @@ module.exports = function(api, opts, env) {
  // in practice some other transforms (such as object-rest-spread)
  // don't work without it: https://github.com/babel/babel/issues/7215
  require('@babel/plugin-transform-destructuring').default,
+ // Turn on legacy decorators for TypeScript files
+ isTypeScriptEnabled && [
+ require('@babel/plugin-proposal-decorators').default,
+ false,
+ ],
  // class { handleClick = () => { } }
  // Enable loose mode to use assignment instead of defineProperty
  // See discussion in https://github.com/facebook/create-react-app/issues/4263
@@ -166,5 +171,16 @@ module.exports = function(api, opts, env) {
  // Transform dynamic import to require
  require('babel-plugin-dynamic-import-node'),
  ].filter(Boolean),
+ overrides: [
+ isTypeScriptEnabled && {
+ test: /\.tsx?$/,
+ plugins: [
+ [
+ require('@babel/plugin-proposal-decorators').default,
+ { legacy: true },
+ ],
+ ],
+ },
+ ].filter(Boolean),
  };
 };

packages/babel-preset-react-app/package.json

@@ -19,6 +19,7 @@
  "dependencies": {
  "@babel/core": "7.1.0",
  "@babel/plugin-proposal-class-properties": "7.1.0",
+ "@babel/plugin-proposal-decorators": "7.1.2",
  "@babel/plugin-proposal-object-rest-spread": "7.0.0",
  "@babel/plugin-syntax-dynamic-import": "7.0.0",
  "@babel/plugin-transform-classes": "7.1.0",

test/fixtures/typescript/src/App.ts

@@ -6,9 +6,14 @@ interface MyType {
 
 type MyObject = Pick<MyType, 'bar' | 'baz'>;
 
+@annotation
 class App {
  static foo: MyObject = { bar: true, baz: { n: 123 } };
  n = App.foo.baz!.n;
 }
 
+function annotation(target: any) {
+ target.annotated = true;
+}
+
 export default App;

test/fixtures/typescript/tsconfig.json

@@ -0,0 +1,5 @@
+{
+ "compilerOptions": {
+ "experimentalDecorators": true
+ }
+}