Add support fo multiple decorators

transforms/ember-object/__testfixtures__/decorators.input.js

@@ -1,5 +1,5 @@
 import { alias, sum as add } from "@ember/object/computed";
-import { get, set, observer, computed } from "@ember/object";
+import { get, set, observer as watcher, computed } from "@ember/object";
 import { inject as controller } from "@ember/controller";
 import { inject as service } from "@ember/service";
 import { on } from "@ember/object/evented";
@@ -11,8 +11,12 @@ const Foo = EmberObject.extend({
   a: "",
   b: service("store"),
   myController: controller("abc"),
-  observedProp: observer("xyz"),
-  event: on("click"),
+  observedProp: watcher("xyz", function() {
+    return "observed";
+  }),
+  event: on("click", function() {
+    return "abc";
+  }),
 
   actions: {
     /**
@@ -28,7 +32,9 @@ const Foo = EmberObject.extend({
 
 var comp = EmberObject.extend({
   classNameBindings: ["isEnabled:enabled:disabled", "a:b:c", "c:d"],
-  isEnabled: false,
+  isEnabled: computed("a", "c", function() {
+    return false;
+  }),
   a: true,
   c: "",
   attributeBindings: ["customHref:href"],

transforms/ember-object/__testfixtures__/decorators.output.js

@@ -1,8 +1,9 @@
-import { alias, sum as add } from "@ember/object/computed";
-import { get, set, observer, computed } from "@ember/object";
-import { inject as controller } from "@ember/controller";
-import { inject as service } from "@ember/service";
-import { on } from "@ember/object/evented";
+import { sum as add, alias } from "@ember-decorators/object/computed";
+import { get, set } from "@ember/object";
+import { computed, observes as watcher } from "@ember-decorators/object";
+import { controller as controller } from "@ember-decorators/controller";
+import { service as service } from "@ember-decorators/service";
+import { on } from "@ember-decorators/object/evented";
 import layout from "components/templates/foo";
 
 @tagName("div")
@@ -16,11 +17,15 @@ class Foo extends EmberObject {
   @controller("abc")
   myController;
 
-  @observes("xyz")
-  observedProp;
+  @watcher("xyz")
+  get observedProp() {
+    return "observed";
+  }
 
   @on("click")
-  event;
+  event() {
+    return "abc";
+  }
 
   /**
   Comments
@@ -38,8 +43,11 @@ class Foo extends EmberObject {
 }
 
 class Comp extends EmberObject {
+  @computed("a", "c")
   @className("enabled", "disabled")
-  isEnabled = false;
+  get isEnabled() {
+    return false;
+  }
 
   @className("b", "c")
   a = true;
@@ -74,7 +82,7 @@ class Foo extends EmberObject {
   Computed description
   */
   @computed("fullName", "age", "country")
-  description() {
+  get description() {
     return `${this.get(
       "fullName"
     )}; Age: ${this.get("age")}; Country: ${this.get("country")}`;

transforms/ember-object/__testfixtures__/mixins.output.js

@@ -1,8 +1,9 @@
-import { alias, sum as add } from "@ember/object/computed";
-import { get, set, observer, computed } from "@ember/object";
-import { inject as controller } from "@ember/controller";
-import { inject as service } from "@ember/service";
-import { on } from "@ember/object/evented";
+import { sum as add, alias } from "@ember-decorators/object/computed";
+import { get, set } from "@ember/object";
+import { computed, observes } from "@ember-decorators/object";
+import { controller as controller } from "@ember-decorators/controller";
+import { service as service } from "@ember-decorators/service";
+import { on } from "@ember-decorators/object/evented";
 import layout from "components/templates/foo";
 import MixinA from "mixins/A";
 import MixinB from "mixins/B";
@@ -82,7 +83,7 @@ class Foo extends EmberObject.extend(MixinA, MixinB) {
   Computed description
   */
   @computed("fullName", "age", "country")
-  description() {
+  get description() {
     return `${this.get(
       "fullName"
     )}; Age: ${this.get("age")}; Country: ${this.get("country")}`;

transforms/helpers/EOProp.js

@@ -0,0 +1,103 @@
+const {
+  get,
+  getPropName,
+  getPropType,
+  getPropCalleeName,
+  isClassDecoratorProp,
+  METHOD_DECORATORS
+} = require("./util");
+
+/**
+ * Ember Objet Property
+ *
+ * A wrapper object for ember object properties
+ */
+class EOProp {
+  constructor(eoProp) {
+    this._prop = eoProp;
+    this.decoratorNames = [];
+  }
+
+  get value() {
+    return get(this._prop, "value");
+  }
+
+  get kind() {
+    let kind = get(this._prop, "kind");
+    if (kind === "init" && this.hasDecorators && !this.hasMethodDecorator) {
+      kind = "get";
+    }
+    return kind;
+  }
+
+  get key() {
+    return get(this._prop, "key");
+  }
+
+  get name() {
+    return getPropName(this._prop);
+  }
+
+  get type() {
+    return getPropType(this._prop);
+  }
+
+  get calleeName() {
+    return getPropCalleeName(this._prop);
+  }
+
+  get comments() {
+    return this._prop.comments;
+  }
+
+  get computed() {
+    return this._prop.computed;
+  }
+
+  get isClassDecorator() {
+    return isClassDecoratorProp(this.name);
+  }
+
+  get isCallExpression() {
+    return this.type === "CallExpression";
+  }
+
+  get hasDecorators() {
+    return this.decoratorNames.length;
+  }
+
+  get callExprArgs() {
+    return get(this._prop, "value.arguments") || [];
+  }
+
+  get hasNonLiteralArg() {
+    return this.callExprArgs.some(arg => arg.type !== "Literal");
+  }
+
+  get hasMethodDecorator() {
+    return this.decoratorNames.some(decoratormName =>
+      METHOD_DECORATORS.includes(decoratormName)
+    );
+  }
+
+  setDecorators(importedDecoratedProps) {
+    if (this.isCallExpression) {
+      const decoratorName = importedDecoratedProps[this.calleeName];
+      if (decoratorName) {
+        this.decoratorNames.push(decoratorName);
+      }
+    }
+  }
+
+  addBindingProps(attributeBindingsProps, classNameBindingsProps) {
+    if (attributeBindingsProps[this.name]) {
+      this.decoratorNames.push("attribute");
+      this.propList = attributeBindingsProps[this.name];
+    } else if (classNameBindingsProps[this.name]) {
+      this.decoratorNames.push("className");
+      this.propList = classNameBindingsProps[this.name];
+    }
+  }
+}
+
+module.exports = EOProp;

transforms/helpers/decorator-helper.js

@@ -17,17 +17,15 @@ function withDecorators(to, decorators = []) {
  * Creates a list of class decorators `tagName` and `classNames`
  *
  * @param {Object} j - jscodeshift lib reference
- * @param {Property[]} classDecoratorProps
+ * @param {Property} classDecoratorProp
  * @returns {Decorator[]}
  */
-function createClassDecorators(j, classDecoratorProps = []) {
-  return classDecoratorProps.map(classDecoratorProp => {
-    return j.decorator(
-      j.callExpression(j.identifier(classDecoratorProp.key.name), [
-        classDecoratorProp.value
-      ])
-    );
-  });
+function createClassDecorator(j, classDecoratorProp) {
+  return j.decorator(
+    j.callExpression(j.identifier(classDecoratorProp.key.name), [
+      classDecoratorProp.value
+    ])
+  );
 }
 
 /**
@@ -40,7 +38,7 @@ function createClassDecorators(j, classDecoratorProps = []) {
  * @returns {Decorator[]}
  */
 function createCallExpressionDecorators(j, decoratorName, instanceProp) {
-  if (decoratorName === "computed") {
+  if (instanceProp.hasNonLiteralArg) {
     const decoratorArgs = get(instanceProp, "value.arguments").slice(0, -1);
     return [
       j.decorator(j.callExpression(j.identifier(decoratorName), decoratorArgs))
@@ -49,10 +47,7 @@ function createCallExpressionDecorators(j, decoratorName, instanceProp) {
     // clone the instance prop value
     const instancePropValue = JSON.parse(JSON.stringify(instanceProp.value));
     instancePropValue.callee.name = decoratorName;
-    if (
-      instanceProp.decoratorName &&
-      get(instanceProp, "value.callee.object.callee.name")
-    ) {
+    if (get(instanceProp, "value.callee.object.callee.name")) {
       const decoratorArgs = get(instancePropValue, "callee.object.arguments");
       instancePropValue.callee.object = get(
         instancePropValue,
@@ -101,19 +96,24 @@ function createBindingDecorators(j, decoratorName, instanceProp) {
  * @returns {Decorator[]}
  */
 function createInstancePropDecorators(j, instanceProp) {
-  const decoratorName = instanceProp.decoratorName;
-  if (!decoratorName) {
-    return [];
-  }
-  if (decoratorName === "className" || decoratorName === "attribute") {
-    return createBindingDecorators(j, decoratorName, instanceProp);
-  }
-  return createCallExpressionDecorators(j, decoratorName, instanceProp);
+  return instanceProp.decoratorNames.reduce((decorators, decoratorName) => {
+    if (!decoratorName) {
+      return decorators;
+    }
+    if (decoratorName === "className" || decoratorName === "attribute") {
+      return decorators.concat(
+        createBindingDecorators(j, decoratorName, instanceProp)
+      );
+    }
+    return decorators.concat(
+      createCallExpressionDecorators(j, decoratorName, instanceProp)
+    );
+  }, []);
 }
 
 module.exports = {
   withDecorators,
-  createClassDecorators,
+  createClassDecorator,
   createActionDecorators,
   createCallExpressionDecorators,
   createInstancePropDecorators