Update decorator syntax (#57)

Fix for:

#56
#55

Author: ssutar

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

@@ -1,21 +1,21 @@
-import { attribute, className, classNames, layout, tagName } from "@ember-decorators/component";
+import { attribute, className, classNames, tagName, layout as templateLayout } from "@ember-decorators/component";
 
 import {
   filter,
   map as computedMap,
   sum as add,
-  overridableReads as enoWay,
-  overridableReads,
+  oneWay as enoWay,
   reads,
+  readOnly,
   alias,
 } from "@ember-decorators/object/computed";
 
 import { get, set } from "@ember/object";
-import { action, readOnly, volatile, computed, observes as watcher } from "@ember-decorators/object";
+import { action, computed, observes as watcher } from "@ember-decorators/object";
 import { controller } from "@ember-decorators/controller";
 import { service } from "@ember-decorators/service";
 import { on } from "@ember-decorators/object/evented";
-import templateLayout from "components/templates/foo";
+import layout from "components/templates/foo";
 import { someActionUtil } from "some/action/util";
 
 @tagName("div")
@@ -99,8 +99,7 @@ class Foo extends EmberObject {
   /**
   Computed fullname
   */
-  @computed("firstName", "lastName")
-  @readOnly
+  @(computed("firstName", "lastName").readOnly())
   get fullName() {
     return super.fullName &&
     `${this.get("firstName")} ${this.get("lastName")}`;
@@ -141,26 +140,23 @@ class Foo extends EmberObject {
   /**
    * Fname2
    */
-  @computed("firstName", "lastName")
-  @readOnly
+  @(computed("firstName", "lastName").readOnly())
   get fName2() {
     return true;
   }
 
   /**
    * Fname3
    */
-  @computed("firstName", "lastName")
-  @volatile
+  @(computed("firstName", "lastName").volatile())
   get fName3() {
     return true;
   }
 
   /**
    * Lname
    */
-  @alias("firstName", "lastName")
-  @readOnly
+  @(alias("firstName", "lastName").readOnly())
   lName;
 
   /**
@@ -172,13 +168,13 @@ class Foo extends EmberObject {
   /**
    * Lname2
    */
-  @reads("description")
+  @readOnly("description")
   lName2;
 
   /**
    * Lname3
    */
-  @overridableReads("description", "lastName")
+  @reads("description", "lastName")
   lName3;
 
   /**
@@ -190,10 +186,9 @@ class Foo extends EmberObject {
   /**
    * Lname5
    */
-  @add("description", "lastName")
-  @readOnly
+  @(add("description", "lastName").readOnly())
   lName5;
 }
 
-@layout(templateLayout)
+@templateLayout(layout)
 class Foo extends EmberObject {}

transforms/helpers/EOProp.js

@@ -3,7 +3,9 @@ const {
   getPropName,
   getPropType,
   getModifier,
-  isClassDecoratorProp
+  isClassDecoratorProp,
+  LAYOUT_DECORATOR_LOCAL_NAME,
+  LAYOUT_DECORATOR_NAME
 } = require("./util");
 
 /**
@@ -59,6 +61,24 @@ class EOProp {
     return isClassDecoratorProp(this.name);
   }
 
+  get classDecoratorName() {
+    if (
+      this.name === LAYOUT_DECORATOR_NAME &&
+      this.value.name === LAYOUT_DECORATOR_NAME
+    ) {
+      return LAYOUT_DECORATOR_LOCAL_NAME;
+    }
+    return this.name;
+  }
+
+  get isLayoutDecorator() {
+    return this.classDecoratorName === LAYOUT_DECORATOR_NAME;
+  }
+
+  get isTemplateLayoutDecorator() {
+    return this.classDecoratorName === LAYOUT_DECORATOR_LOCAL_NAME;
+  }
+
   get isCallExpression() {
     return this.type === "CallExpression";
   }
@@ -95,10 +115,6 @@ class EOProp {
     return this.modifiers.length === 2 && this.hasVolatile && this.hasReadOnly;
   }
 
-  get isLayout() {
-    return this.name === "layout";
-  }
-
   get isTagName() {
     return this.name === "tagName";
   }
@@ -172,12 +188,6 @@ class EOProp {
     }
   }
 
-  setLayoutValue(value) {
-    if (this.type === "Identifier") {
-      this.value.name = value;
-    }
-  }
-
   setRuntimeData({
     // computedProperties = [],
     // observedProperties = [],

transforms/helpers/decorator-helper.js

@@ -28,7 +28,9 @@ function createClassDecorator(j, classDecoratorProp) {
     decoratorArgs = [classDecoratorProp.value];
   }
   return j.decorator(
-    j.callExpression(j.identifier(classDecoratorProp.name), [...decoratorArgs])
+    j.callExpression(j.identifier(classDecoratorProp.classDecoratorName), [
+      ...decoratorArgs
+    ])
   );
 }
 
@@ -42,30 +44,33 @@ function createClassDecorator(j, classDecoratorProp) {
  * @returns {Decorator[]}
  */
 function createCallExpressionDecorators(j, decoratorName, instanceProp) {
+  if (instanceProp.isVolatileReadOnly) {
+    return [];
+  }
+
   const decoratorArgs =
     !instanceProp.hasMapDecorator &&
     !instanceProp.hasFilterDecorator &&
     instanceProp.hasNonLiteralArg
       ? instanceProp.callExprArgs.slice(0, -1)
       : instanceProp.callExprArgs.slice(0);
 
-  if (instanceProp.isVolatileReadOnly) {
-    return [];
+  const decoratorExpr = instanceProp.modifiers.reduce(
+    (callExpr, modifier) =>
+      j.callExpression(
+        j.memberExpression(callExpr, modifier.prop),
+        modifier.args
+      ),
+    j.callExpression(j.identifier(decoratorName), decoratorArgs)
+  );
+
+  if (!instanceProp.modifiers.length) {
+    return j.decorator(decoratorExpr);
   }
 
-  return instanceProp.modifiers.reduce(
-    (decorators, modifier) => {
-      if (modifier.args.length !== 0) {
-        decorators.push(
-          j.decorator(j.callExpression(modifier.prop), modifier.args)
-        );
-      } else {
-        decorators.push(j.decorator(modifier.prop));
-      }
-      return decorators;
-    },
-    [j.decorator(j.callExpression(j.identifier(decoratorName), decoratorArgs))]
-  );
+  // If has modifiers wrap decorators in anonymous call expression
+  // it transforms @computed('').readOnly() => @(computed('').readOnly())
+  return j.decorator(j.callExpression(j.identifier(""), [decoratorExpr]));
 }
 
 /**

transforms/helpers/parse-helper.js

@@ -7,8 +7,6 @@ const {
   get,
   getOptions,
   getRuntimeData,
-  LAYOUT_IMPORT_SPECIFIER,
-  META_DECORATORS,
   METHOD_DECORATORS,
   startsWithUpperCaseLetter
 } = require("./util");
@@ -68,9 +66,6 @@ function getEmberObjectProps(
       prop.setRuntimeData(runtimeData);
       instanceProps.push(prop);
     }
-    if (prop.isLayout) {
-      prop.setLayoutValue(LAYOUT_IMPORT_SPECIFIER);
-    }
   });
 
   // Assign decoator names to the binding props if any
@@ -127,7 +122,7 @@ function getDecoratorInfo(specifier, importPropDecoratorMap) {
     decoratorName = localName;
   } else {
     if (isMetaDecorator) {
-      decoratorName = META_DECORATORS[importedName] || localName;
+      decoratorName = localName;
     } else {
       decoratorName = importPropDecoratorMap[importedName];
     }
@@ -175,18 +170,12 @@ function getSpecifierLocalIdentifier(specifier) {
  */
 function setSpecifierProps(specifier, importPropDecoratorMap) {
   const isMetaDecorator = !importPropDecoratorMap;
-  const importedName = get(specifier, "imported.name");
   const decoratorImportedName = get(
     importPropDecoratorMap,
     get(specifier, "imported.name")
   );
   specifier.local = getSpecifierLocalIdentifier(specifier);
-  if (isMetaDecorator) {
-    const metaDecoratorName = META_DECORATORS[importedName];
-    if (metaDecoratorName) {
-      specifier.imported.name = metaDecoratorName;
-    }
-  } else {
+  if (!isMetaDecorator) {
     specifier.imported.name = decoratorImportedName;
   }
   // Needed one more time as we changed the imported name
@@ -232,12 +221,11 @@ function getDecoratorsToImport(instanceProps, decoratorsMap = {}) {
       attribute: specs.attribute || prop.hasAttributeDecorator,
       className: specs.className || prop.hasClassNameDecorator,
       classNames: specs.classNames || prop.isClassNames,
-      layout: specs.layout || prop.isLayout,
+      layout: specs.layout || prop.isLayoutDecorator,
+      templateLayout: specs.templateLayout || prop.isTemplateLayoutDecorator,
       off: specs.off || prop.hasOffDecorator,
-      readOnly: specs.readOnly || prop.hasReadOnly,
       tagName: specs.tagName || prop.isTagName,
-      unobserves: specs.unobserves || prop.hasUnobservesDecorator,
-      volatile: specs.volatile || prop.hasVolatile
+      unobserves: specs.unobserves || prop.hasUnobservesDecorator
     };
   }, decoratorsMap);
 }
@@ -375,45 +363,6 @@ function getEmberObjectCallExpressions(j, root) {
     );
 }
 
-/**
- * Extracts the layout property name
- *
- * @param {Object} j - jscodeshift lib reference
- * @param {File} root
- * @returns {String} Name of the layout property
- */
-function getLayoutPropertyName(j, root) {
-  const layoutPropCollection = root.find(j.Property, {
-    key: {
-      type: "Identifier",
-      name: "layout"
-    }
-  });
-  if (layoutPropCollection.length) {
-    const layoutProp = layoutPropCollection.get();
-    return get(layoutProp, "value.value.name");
-  }
-}
-
-/**
- * Update the layout import name
- *
- * @param {Object} j - jscodeshift lib reference
- * @param {File} root
- */
-function updateLayoutImportDeclaration(j, root, layoutName) {
-  if (!layoutName) {
-    return;
-  }
-  const layoutIdentifier = root
-    .find(j.ImportDefaultSpecifier, { local: { name: layoutName } })
-    .find(j.Identifier);
-
-  if (layoutIdentifier.length) {
-    layoutIdentifier.get().value.name = LAYOUT_IMPORT_SPECIFIER;
-  }
-}
-
 /**
  * Returns the variable name
  *
@@ -544,7 +493,6 @@ function replaceEmberObjectExpressions(j, root, filePath, options = {}) {
   }
   // Parse the import statements
   const importedDecoratedProps = getImportedDecoratedProps(j, root);
-  const layoutName = getLayoutPropertyName(j, root);
   let transformed = false;
   let decoratorsToImportMap = {};
 
@@ -603,7 +551,6 @@ function replaceEmberObjectExpressions(j, root, filePath, options = {}) {
       key => decoratorsToImportMap[key]
     );
     createDecoratorImportDeclarations(j, root, decoratorsToImport);
-    updateLayoutImportDeclaration(j, root, layoutName);
     logger.info(`[${filePath}]: SUCCESS`);
   }
   return transformed;

transforms/helpers/transform-helper.js

@@ -1,5 +1,7 @@
 const {
   ACTION_SUPER_EXPRESSION_COMMENT,
+  LAYOUT_DECORATOR_LOCAL_NAME,
+  LAYOUT_DECORATOR_NAME,
   get,
   getPropName,
   shouldSetValue
@@ -435,8 +437,12 @@ function createEmberDecoratorSpecifiers(
   return pathSpecifiers
     .filter(specifier => decoratorsToImport.includes(specifier))
     .map(specifier => {
+      const importedSpecifier =
+        specifier === LAYOUT_DECORATOR_LOCAL_NAME
+          ? LAYOUT_DECORATOR_NAME
+          : specifier;
       return j.importSpecifier(
-        j.identifier(specifier),
+        j.identifier(importedSpecifier),
         j.identifier(specifier)
       );
     });