Add support for missing decorator imports (#27)

#26
#28

Author: ssutar

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

@@ -1,12 +1,11 @@
+import { layout, className, classNames, tagName, attribute } from "@ember-decorators/component";
 import { sum as add, overridableReads as enoWay, overridableReads, reads, alias } from "@ember-decorators/object/computed";
 import { get, set } from "@ember/object";
-import { computed, observes as watcher } from "@ember-decorators/object";
+import { action, readOnly, volatile, 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 layout from "components/templates/foo";
-
-import { volatile, readOnly } from "@ember-decorators/object";
+import templateLayout from "components/templates/foo";
 
 @tagName("div")
 @classNames(["test-class", "custom-class"])
@@ -159,5 +158,5 @@ class Foo extends EmberObject {
   lName5;
 }
 
-@layout(layout)
+@layout(templateLayout)
 class Foo extends EmberObject {}

transforms/ember-object/index.js

@@ -1,11 +1,16 @@
 const { getOptions } = require("codemod-cli");
 const { replaceEmberObjectExpressions } = require("../helpers/parse-helper");
 
-module.exports = function transformer(file, api) {
+module.exports = function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
 
-  replaceEmberObjectExpressions(j, root, file.path, getOptions());
+  replaceEmberObjectExpressions(
+    j,
+    root,
+    file.path,
+    Object.assign({}, options, getOptions())
+  );
 
   return root.toSource();
 };

transforms/helpers/EOProp.js

@@ -94,6 +94,30 @@ class EOProp {
     return this.modifiers.length === 2 && this.hasVolatile && this.hasReadOnly;
   }
 
+  get isLayout() {
+    return this.name === "layout";
+  }
+
+  get isTagName() {
+    return this.name === "tagName";
+  }
+
+  get isClassNames() {
+    return this.name === "classNames";
+  }
+
+  get isAction() {
+    return this.name === "actions";
+  }
+
+  get hasClassNameDecorator() {
+    return this.decoratorNames.includes("className");
+  }
+
+  get hasAttributeDecorator() {
+    return this.decoratorNames.includes("attribute");
+  }
+
   setCallExpressionProps() {
     let calleeObject = get(this._prop, "value");
     const modifiers = [getModifier(calleeObject)];
@@ -128,6 +152,12 @@ class EOProp {
       this.propList = classNameBindingsProps[this.name];
     }
   }
+
+  setLayoutValue(value) {
+    if (this.type === "Identifier") {
+      this.value.name = value;
+    }
+  }
 }
 
 module.exports = EOProp;

transforms/helpers/parse-helper.js

@@ -3,19 +3,20 @@ const camelCase = require("camelcase");
 const {
   get,
   getOptions,
-  shouldImportVolatile,
-  shouldImportReadOnly,
   capitalizeFirstLetter,
   startsWithUpperCaseLetter,
   DECORATOR_PATHS,
+  LAYOUT_IMPORT_SPECIFIER,
   METHOD_DECORATORS,
-  META_DECORATORS
+  META_DECORATORS,
+  EMBER_DECORATOR_SPECIFIERS
 } = require("./util");
 const { hasValidProps, isFileOfType } = require("./validation-helper");
 const {
   withComments,
   createClass,
-  createImportDeclaration
+  createImportDeclaration,
+  createEmberDecoratorSpecifiers
 } = require("./transform-helper");
 const EOProp = require("./EOProp");
 const logger = require("./log-helper");
@@ -56,6 +57,9 @@ function getEmberObjectProps(j, eoExpression, importedDecoratedProps = {}) {
       prop.setDecorators(importedDecoratedProps);
       instanceProps.push(prop);
     }
+    if (prop.isLayout) {
+      prop.setLayoutValue(LAYOUT_IMPORT_SPECIFIER);
+    }
   });
 
   // Assign decoator names to the binding props if any
@@ -204,55 +208,25 @@ function getDecoratorImports(j, root) {
 }
 
 /**
- * Create the import declarations for `readOnly` in `computed(...).readOnly()` and `volatile` in `computed(...).volatile()`.
- * It will import from these specifiers from `@ember-decorators/object`
- *
- * @param {Object} j - jscodeshift lib reference
- * @param {Boolean} param.importVolatile if true import `volatile`
- * @param {Boolean} param.importReadOnly if true import `readOnly`
- */
-function createVolatileReadOnlyImportDeclarations(
-  j,
-  { importVolatile = false, importReadOnly = false } = {}
-) {
-  const specifiers = [];
-  if (importVolatile) {
-    specifiers.push(j.importSpecifier(j.identifier("volatile")));
-  }
-  if (importReadOnly) {
-    specifiers.push(j.importSpecifier(j.identifier("readOnly")));
-  }
-  if (specifiers.length) {
-    return createImportDeclaration(j, specifiers, "@ember-decorators/object");
-  }
-}
-
-/**
- * Create and insert the import declarations for `computed(...).volatile()` and `computed(...).readOnly()`
+ * Get the map of decorators to import other than the computed props, services etc
+ * which already have imports in the code
  *
- * @param {Object} j - jscodeshift lib reference
- * @param {File} root
- * @param {Boolean} param.importVolatile if true import `volatile`
- * @param {Boolean} param.importReadOnly if true import `readOnly`
+ * @param {EOProp[]} instanceProps
+ * @param {Object} decoratorsMap
  */
-function insertVolatileReadOnlyImportDeclarations(
-  j,
-  root,
-  { importVolatile, importReadOnly }
-) {
-  const vroImportDeclaration = createVolatileReadOnlyImportDeclarations(j, {
-    importVolatile,
-    importReadOnly
-  });
-  if (!vroImportDeclaration) {
-    return;
-  }
-  const importDeclarations = root.find(j.ImportDeclaration);
-  if (importDeclarations.length) {
-    importDeclarations.at(-1).insertAfter(vroImportDeclaration);
-  } else {
-    root.get().node.program.body.unshift(vroImportDeclaration);
-  }
+function getDecoratorsToImport(instanceProps, decoratorsMap = {}) {
+  return instanceProps.reduce((specs, prop) => {
+    return {
+      attribute: specs.attribute || prop.hasAttributeDecorator,
+      readOnly: specs.readOnly || prop.hasReadOnly,
+      action: specs.action || prop.isAction,
+      layout: specs.layout || prop.isLayout,
+      tagName: specs.tagName || prop.isTagName,
+      className: specs.className || prop.hasClassNameDecorator,
+      classNames: specs.classNames || prop.isClassNames,
+      volatile: specs.volatile || prop.hasVolatile
+    };
+  }, decoratorsMap);
 }
 
 /**
@@ -262,17 +236,24 @@ function insertVolatileReadOnlyImportDeclarations(
  * @param {File} root
  * @returns {Object}
  */
-function createDecoratorImportDeclarations(
-  j,
-  root,
-  { importVolatile = false, importReadOnly = false } = {}
-) {
+function createDecoratorImportDeclarations(j, root, decoratorsToImport = []) {
+  // create a copy - we need to mutate the object later
+  const edSpecifiers = Object.assign({}, EMBER_DECORATOR_SPECIFIERS);
   getDecoratorImports(j, root).forEach(decoratorImport => {
     const { importPropDecoratorMap, decoratorPath } = DECORATOR_PATHS[
       get(decoratorImport, "value.source.value")
     ];
+    const pathSpecifiers = edSpecifiers[decoratorPath] || [];
+    if (pathSpecifiers.length) {
+      // delete the visited path to avoid duplicate imports
+      delete edSpecifiers[decoratorPath];
+    }
+    const decoratedSpecifiers = createEmberDecoratorSpecifiers(
+      j,
+      pathSpecifiers,
+      decoratorsToImport
+    );
 
-    const decoratedSpecifiers = [];
     const specifiers = get(decoratorImport, "value.specifiers") || [];
 
     for (let i = specifiers.length - 1; i >= 0; i -= 1) {
@@ -311,10 +292,25 @@ function createDecoratorImportDeclarations(
     }
   });
 
-  insertVolatileReadOnlyImportDeclarations(j, root, {
-    importVolatile,
-    importReadOnly
-  });
+  const edSpecifierPaths = Object.keys(edSpecifiers);
+  if (edSpecifierPaths.length) {
+    edSpecifierPaths.forEach(path => {
+      const specifiers = createEmberDecoratorSpecifiers(
+        j,
+        edSpecifiers[path],
+        decoratorsToImport
+      );
+
+      if (specifiers.length) {
+        j(
+          root
+            .find(j.Declaration)
+            .at(0)
+            .get()
+        ).insertBefore(createImportDeclaration(j, specifiers, path));
+      }
+    });
+  }
 }
 
 /**
@@ -366,6 +362,45 @@ 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
  *
@@ -466,9 +501,9 @@ function replaceEmberObjectExpressions(j, root, filePath, options = {}) {
   }
   // Parse the import statements
   const importedDecoratedProps = getImportedDecoratedProps(j, root);
+  const layoutName = getLayoutPropertyName(j, root);
   let transformed = false;
-  let importVolatile = false;
-  let importReadOnly = false;
+  let decoratorsToImportMap = {};
 
   getEmberObjectCallExpressions(j, root).forEach(eoCallExpression => {
     const { eoExpression, mixins } = parseEmberObjectCallExpression(
@@ -480,6 +515,7 @@ function replaceEmberObjectExpressions(j, root, filePath, options = {}) {
       eoExpression,
       importedDecoratedProps
     );
+
     const errors = hasValidProps(eoProps, getOptions(options));
     if (errors.length) {
       logger.warn(
@@ -504,20 +540,21 @@ function replaceEmberObjectExpressions(j, root, filePath, options = {}) {
 
     transformed = true;
 
-    importVolatile =
-      importVolatile || shouldImportVolatile(eoProps.instanceProps);
-    importReadOnly =
-      importReadOnly || shouldImportReadOnly(eoProps.instanceProps);
-
-    logger.info(`[${filePath}]: SUCCESS`);
+    decoratorsToImportMap = getDecoratorsToImport(
+      eoProps.instanceProps,
+      decoratorsToImportMap
+    );
   });
+
   // Need to find another way, as there might be a case where
   // one object from a file is transformed and other is not
   if (transformed) {
-    createDecoratorImportDeclarations(j, root, {
-      importVolatile,
-      importReadOnly
-    });
+    const decoratorsToImport = Object.keys(decoratorsToImportMap).filter(
+      key => decoratorsToImportMap[key]
+    );
+    createDecoratorImportDeclarations(j, root, decoratorsToImport);
+    updateLayoutImportDeclaration(j, root, layoutName);
+    logger.info(`[${filePath}]: SUCCESS`);
   }
 }
 

transforms/helpers/transform-helper.js

@@ -312,11 +312,36 @@ function createImportDeclaration(j, specifiers, path) {
   return j.importDeclaration(specifiers, j.literal(path));
 }
 
+/**
+ * Matches the decorators for the current path with the `decoratorsToImport`,
+ * and creates import specifiers for the matching decorators
+ *
+ * @param {Object} j - jscodeshift lib reference
+ * @param {String[]} pathSpecifiers
+ * @param {String[]} decoratorsToImport
+ * @returns {ImportSpecifier}
+ */
+function createEmberDecoratorSpecifiers(
+  j,
+  pathSpecifiers = [],
+  decoratorsToImport = []
+) {
+  return pathSpecifiers
+    .filter(specifier => decoratorsToImport.includes(specifier))
+    .map(specifier => {
+      return j.importSpecifier(
+        j.identifier(specifier),
+        j.identifier(specifier)
+      );
+    });
+}
+
 module.exports = {
   withComments,
   instancePropsToExpressions,
   createSuperExpressionStatement,
   createConstructor,
   createClass,
-  createImportDeclaration
+  createImportDeclaration,
+  createEmberDecoratorSpecifiers
 };