Adding decorators support (Khan#271)

* Add decorators support

* Add missing babel dependency

* Add submodule update to prepare

* Add tests for decorators

* Simplify the test

* Add multi-decorator test

* Add decoratory factory test

* Add decorator on a class test

* Add decorator on a class with argument test

* Remove charcodes and add babel install to prepare

Author: aminya

.prettierignore

@@ -2,6 +2,7 @@ test/fixtures/convert/formatting
 test/fixtures/convert/imports/named_import_specifier_kind/
 test/fixtures/convert/function-types/predicate03
 test/fixtures/convert/imports/dynamic_import
+test/fixtures/convert/decorator/
 playground/static
 babel-traverse
 babel-types

babel.configs.js

@@ -4,6 +4,10 @@ const presets = [
 
 const commonPlugins = [
   "@babel/plugin-proposal-class-properties",
+  [
+    "@babel/plugin-proposal-decorators",
+    { legacy: true },
+  ],
   ["module-resolver", {
     "alias": {
       "^@babel/(.+)": "./babel/packages/babel-\\1/src/index"

package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@babel/core": "^7.13.10",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
     "@babel/plugin-transform-flow-strip-types": "^7.13.0",
     "@babel/plugin-transform-typescript": "^7.13.0",
     "@babel/preset-env": "^7.13.10",
@@ -49,6 +50,7 @@
     "webpack-cli": "^4.5.0"
   },
   "scripts": {
+    "prepare": "git submodule update --init --recursive && cd babel && yarn install && cd ..",
     "prepublishOnly": "webpack build",
     "build": "webpack build",
     "type-check": "tsc --project tsconfig.json",

src/convert.ts

@@ -22,6 +22,8 @@ export const parseOptions: ParserOptions = {
     "nullishCoalescingOperator",
     "classPrivateProperties",
     "classPrivateMethods",
+    // decorators
+    "decorators-legacy",
   ],
 };
 

test/fixtures/convert/decorator/decorator-factory/flow.js

@@ -0,0 +1,15 @@
+function inject(options: {
+  api_version: string;
+}) {
+  return target => target;
+}
+
+@inject({
+  api_version: "0.3.4"
+})
+class MyComponent extends React.Component<Props> {
+  render() {
+    return document.createElement("div");
+  }
+
+}

test/fixtures/convert/decorator/decorator-factory/ts.js

@@ -0,0 +1,15 @@
+function inject(options: {
+  api_version: string;
+}) {
+  return target => target;
+}
+
+@inject({
+  api_version: "0.3.4"
+})
+class MyComponent extends React.Component<Props> {
+  render() {
+    return document.createElement("div");
+  }
+
+}

test/fixtures/convert/decorator/decorator-on-class-with-argument/flow.js

@@ -0,0 +1,12 @@
+import { autoBindMethodsForReact } from "class-autobind-decorator";
+
+@autoBindMethodsForReact(AUTOBIND_CFG)
+class PasswordEditor extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showPassword: false
+    };
+  }
+
+}

test/fixtures/convert/decorator/decorator-on-class-with-argument/ts.js

@@ -0,0 +1,12 @@
+import { autoBindMethodsForReact } from "class-autobind-decorator";
+
+@autoBindMethodsForReact(AUTOBIND_CFG)
+class PasswordEditor extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showPassword: false
+    };
+  }
+
+}

test/fixtures/convert/decorator/decorator-on-class/flow.js

@@ -0,0 +1,9 @@
+import { observer } from "mobx";
+
+@observer
+class Store {
+  constructor() {}
+
+}
+
+export default Store;

test/fixtures/convert/decorator/decorator-on-class/ts.js

@@ -0,0 +1,9 @@
+import { observer } from "mobx";
+
+@observer
+class Store {
+  constructor() {}
+
+}
+
+export default Store;