Add support for addons

Before template colocation, addons had to explicitly import a template
and set it via the `layout` property or using the `layout` decorator.
With template colocation, those can all be dropped: the build pipeline
automatically sets it up correctly (though it can also still be set up
manually if users so desire, using `setComponentTemplate`, which is what
colocation transforms to in the end).

Accordingly, running the codemod against an addon does more than it does
in the (default) app case. As with apps, it *does* colocate the template
with the backing class. However, it also looks up the imports for the
template in question and removes those along with their binding to the
`layout` property of a component class or via the `layout` decorator
from `ember-decorators`.

Notes on the change:

- Templates shared by multiple components are excluded. In this case, it
  is up to end users how to list those; they are reported in the same
  way other skipped templates (like partials) are.

- App components using the `layout` property or decorator are now
  updated as well. This is very rare, but the codemod can handle it
  trivially, so it does.

Additional improvements made along the way:

- Add basic JSDoc type annotations for the `Migrator` class to make
  working with its properties easier (autocomplete etc.).

- Replace `find` methods with getters for repeated lookups where
  possible (some have to be rerun after other transforms).

- Reuse the values looked up via the utility types.

Author: chriskrycho

lib/migrator.js

@@ -1,12 +1,12 @@
 const fse = require("fs-extra");
-const path = require('path');
-const removeDirectories = require('remove-empty-directories');
+const path = require("path");
+const removeDirectories = require("remove-empty-directories");
 
 function moveFile(sourceFilePath, targetFilePath) {
   let targetFileDirectory = path.dirname(targetFilePath);
   if (!fse.existsSync(targetFileDirectory)) {
     console.info(`📁 Creating ${targetFileDirectory}`);
-    fse.mkdirSync(targetFileDirectory, { recursive: true })
+    fse.mkdirSync(targetFileDirectory, { recursive: true });
   }
 
   console.info(`👍 Moving ${sourceFilePath} -> ${targetFilePath}`);
@@ -15,13 +15,17 @@ function moveFile(sourceFilePath, targetFilePath) {
 
 async function removeDirs(dirPath, removeOnlyEmptyDirectories = false) {
   if (removeOnlyEmptyDirectories) {
-    removeDirectories(dirPath);
+    if (fse.existsSync(dirPath)) {
+      removeDirectories(dirPath);
+    }
   } else {
-    await fse.remove(dirPath)
+    if (fse.existsSync(dirPath)) {
+      await fse.remove(dirPath);
+    }
   }
 }
 
 module.exports = {
   moveFile,
-  removeDirs
-}
+  removeDirs,
+};

lib/utils/file.js

@@ -0,0 +1,193 @@
+/** Rewrite the imports for modules we moved. */
+
+let parser = require('recast/parsers/typescript');
+const j = require("jscodeshift").withParser(parser);
+
+function transform(source) {
+  const root = j(source);
+
+  // Start by eliminating the classic class `layout` property and corresponding
+  // import of the template.
+  let layoutProperty = findClassicLayout(root);
+  if (layoutProperty) {
+    let importDeclaration = findMatchingImport(
+      root,
+      layoutProperty.node.value.name
+    );
+    if (importDeclaration) {
+      importDeclaration.parent.prune();
+    }
+    layoutProperty.prune();
+  }
+
+  // Then do the same for `layout` property set on an ES class via assignment
+  // and corresponding import of the template.
+  let layoutClassProperties = findClassPropertyLayout(root);
+  layoutClassProperties.forEach((lcp) => {
+    let importDeclaration = findMatchingImport(root, lcp.node.value.name);
+    if (importDeclaration) {
+      importDeclaration.parent.prune();
+    }
+    lcp.prune();
+  });
+
+  // Finally, remove the `layout` decorator import, its usage, and the import
+  // for whatever template was used in the decorator invocation.
+  let layoutDecoratorSpecifier = findLayoutDecorator(root);
+  if (layoutDecoratorSpecifier) {
+    let decoratorUsages = findLayoutDecoratorUsage(root, layoutDecoratorSpecifier);
+    decoratorUsages.forEach((decorator) => {
+      let layoutName = decorator.node.expression.arguments[0].name;
+      let importDeclaration = findMatchingImport(root, layoutName);
+      if (importDeclaration) {
+        importDeclaration.parent.prune();
+      }
+      decorator.prune();
+    });
+
+    if (layoutDecoratorSpecifier.parentPath.node.specifiers.length > 1) {
+      layoutDecoratorSpecifier.prune();
+    } else {
+      layoutDecoratorSpecifier.parentPath.parentPath.prune();
+    }
+  }
+
+  return root.toSource();
+}
+
+/**
+  ID `layout` properties on classic objects like this:
+ 
+  ```js
+  export default Component.extend({
+    layout
+  });
+  ```
+ */
+function findClassicLayout(root) {
+  let layoutProperty;
+
+  root
+    .find(j.CallExpression, {
+      callee: {
+        property: {
+          name: "extend",
+        },
+      },
+    })
+    .forEach((path) => {
+      path.get("arguments").filter((argumentPath) => {
+        if (argumentPath.node.type === "ObjectExpression") {
+          let properties = argumentPath.get("properties");
+          let matches = properties.filter((p) => p.node.key.name === "layout");
+
+          layoutProperty = matches[0];
+        }
+      });
+    });
+
+  return layoutProperty;
+}
+
+/**
+  ID `layout` properties on modern classes like this:
+ 
+  ```js
+  export default class MyThing extends Component {
+    layout
+  }
+  ```
+ */
+function findClassPropertyLayout(root) {
+  return root.find(j.ClassDeclaration).map((path) => {
+    let properties = path.get("body").get("body");
+    return properties.filter((p) =>
+      j.match(p, { type: "ClassProperty", key: { name: "layout" } })
+    );
+  });
+}
+
+/**
+  ID imports with a given name -- useful for mapping back to the import for
+  whatever is  bound to a given class property (whether classic or ES classes).
+ */
+function findMatchingImport(root, name) {
+  let importPath;
+
+  root
+    .find(j.ImportDeclaration)
+    .forEach((importDeclaration) => {
+      let specifiers = importDeclaration.get("specifiers");
+      let matches = specifiers.filter((specifierPath) =>
+        j.match(specifierPath, {
+          type: "ImportDefaultSpecifier",
+          local: { name },  
+        })
+      );
+
+      if (matches[0]) {
+        importPath = matches[0];
+      }
+    });
+
+  return importPath;
+}
+
+/**
+  ID `layout` decorator imports, since it can be renamed after importing and if
+  so we need the local name. For example:
+ 
+  ```js
+  import { layout as templateLayout } from '@ember-decorators/component';
+  ```
+ */
+function findLayoutDecorator(root) {
+  let importSpecifier;
+
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: "@ember-decorators/component" },
+    })
+    .forEach((importPath) => {
+      let specifiers = importPath.get("specifiers");
+      let matches = specifiers.filter((specifierPath) =>
+        j.match(specifierPath, { imported: { name: "layout" } })
+      );
+
+      importSpecifier = matches[0];
+    });
+
+  return importSpecifier;
+}
+
+/**
+  ID `layout` decorator imports, since it can be renamed after importing and ifn
+  so we need the local name
+ 
+  ```js
+  @layout(someTemplateValue)
+  export default class MyThing extends Component {
+    // ...
+  }
+  ```
+ */
+function findLayoutDecoratorUsage(root, layoutDecorator) {
+  return root.find(j.ClassDeclaration).map((classPath) => {
+    if (classPath.node.decorators === undefined) {
+      return;
+    }
+
+    let decorators = classPath.get("decorators");
+    let matches = decorators.filter((decoratorPath) =>
+      j.match(decoratorPath, {
+        expression: {
+          callee: { name: layoutDecorator.node.local.name },
+        },
+      })
+    );
+
+    return matches;
+  });
+}
+
+module.exports = { transform };

lib/utils/rewrite-imports.js

@@ -1,28 +1,30 @@
-const { readFileSync } = require('fs');
-const JSParser = require('./js-parser');
-const jsTraverse = require('@babel/traverse').default;
-const { parse, traverse } = require('ember-template-recast');
+const { readFileSync } = require("fs");
+const JSParser = require("./js-parser");
+const jsTraverse = require("@babel/traverse").default;
+const { parse, traverse } = require("ember-template-recast");
 
 function getLayoutNameTemplates(files) {
-  let names = files.map(file => {
-    let content = readFileSync(file, 'utf8');
-    return fileInLayoutName(content);
-  }).filter(Boolean);
+  let names = files
+    .map((file) => {
+      let content = readFileSync(file, "utf8");
+      return fileInLayoutName(content);
+    })
+    .filter(Boolean);
   return Array.from(new Set(names));
 }
 
 function fileInLayoutName(content) {
   let ast = JSParser.parse(content);
   let layoutName;
   jsTraverse(ast, {
-    ClassProperty: function(path) {
-      if (path.node.key.name === 'layoutName') {
+    ClassProperty: function (path) {
+      if (path.node.key.name === "layoutName") {
         layoutName = path.node.key.value.value;
         path.stop();
       }
     },
-    Property: function(path) {
-      if (path.node.key.name === 'layoutName') {
+    Property: function (path) {
+      if (path.node.key.name === "layoutName") {
         layoutName = path.node.value.value;
         path.stop();
       }
@@ -32,13 +34,14 @@ function fileInLayoutName(content) {
 }
 
 function getPartialTemplates(files) {
-  let names = files.reduce((acc, file) => {
-    let content = readFileSync(file, 'utf8');
-    let partials = filesInPartials(content);
-    return partials.length ? acc.concat(partials) : acc;
-  }, [])
-  .filter(Boolean)
-  .filter(path => path.startsWith('components/'))
+  let names = files
+    .reduce((acc, file) => {
+      let content = readFileSync(file, "utf8");
+      let partials = filesInPartials(content);
+      return partials.length ? acc.concat(partials) : acc;
+    }, [])
+    .filter(Boolean)
+    .filter((path) => path.startsWith("components/"));
   return Array.from(new Set(names));
 }
 
@@ -47,15 +50,67 @@ function filesInPartials(content) {
   const ast = parse(content);
   traverse(ast, {
     MustacheStatement(node) {
-      if (node.path.original === 'partial') {
+      if (node.path.original === "partial") {
         partials.push(node.params[0].value);
       }
     },
   });
   return partials;
 }
 
+/**
+ * Get a
+ * @param {string[]} componentPaths
+ * @param {string[]} templatePaths
+ * @return {Array<{ backingClassPath: string, importedTemplates: string[]]>}
+ */
+function getImportedTemplates(componentPaths, templatePaths) {
+  let pathsForComparison = templatePaths.map(path => 
+    path.replace(/.*\/templates/gi, "templates").replace('.hbs', '')
+  );
+
+  return (
+    componentPaths
+      // load the contents of each backing class, preserving its original file
+      // path so it can be used in later steps.
+      .map((path) => [path, readFileSync(path, { encoding: "utf8" })])
+      // Then parse each file's contents into an AST to search through.
+      .map(([path, contents]) => [path, JSParser.parse(contents)])
+      // Then traverse the backing class's AST for imports matching any of the
+      // known template paths.
+      .map(([path, ast]) => ({
+        backingClassPath: path,
+        importedTemplates: importedTemplates(ast, pathsForComparison),
+      }))
+      // Finally, get rid of any component paths which didn't have any  matches,
+      // since we only care about components which *do* import the templates.
+      .filter(({ importedTemplates }) => importedTemplates.length > 0)
+  );
+}
+
+/**
+ * @param {File} ast
+ * @param {string[]} templatePaths
+ * @returns {string[]}
+ */
+function importedTemplates(ast, templatePaths) {
+  /** @type {string[]} */
+  let templatesImportedInAst = [];
+
+  jsTraverse(ast, {
+    ImportDeclaration(path) {
+      const { value } = path.node.source;
+      if (templatePaths.find(path => value.includes(path))) {
+        templatesImportedInAst.push(value);
+      }
+    },
+  });
+
+  return templatesImportedInAst;
+}
+
 module.exports = {
   getLayoutNameTemplates,
-  getPartialTemplates
-}
+  getPartialTemplates,
+  getImportedTemplates,
+};