Implement tagless component skipping

Author: Turbo87

lib/index.js

@@ -1,10 +1,13 @@
+const fs = require('fs');
+const chalk = require('chalk');
 const pkgDir = require('pkg-dir');
 const globby = require('globby');
+const j = require('jscodeshift').withParser('ts');
 const debug = require('debug')('tagless-ember-components-codemod');
 
 async function run() {
   let path = await pkgDir();
-  await runForPath(path)
+  await runForPath(path);
 }
 
 async function runForPath(path, options = {}) {
@@ -19,7 +22,79 @@ async function runForPath(path, options = {}) {
   debug('componentPaths = %O', componentPaths);
 
   for (let componentPath of componentPaths) {
-    // TODO skip tagless components (silent)
+    let dimPath = chalk.dim(componentPath);
+
+    let source = fs.readFileSync(componentPath, 'utf8');
+
+    let root = j(source);
+
+    // find `export default Component.extend({ ... });` AST node
+    let exportDefaultDeclarations = root.find(j.ExportDefaultDeclaration, {
+      declaration: {
+        type: 'CallExpression',
+        callee: {
+          type: 'MemberExpression',
+          object: { name: 'Component' },
+          property: { name: 'extend' },
+        },
+      },
+    });
+
+    if (exportDefaultDeclarations.length !== 1) {
+      console.log(
+        chalk.yellow(`${dimPath}: Could not find \`export default Component.extend({ ... });\``)
+      );
+      continue;
+    }
+
+    let exportDefaultDeclaration = exportDefaultDeclarations.get();
+
+    // find first `{ ... }` inside `Component.extend()` arguments
+    let extendObjectArgs = exportDefaultDeclaration
+      .get('declaration', 'arguments')
+      .filter(path => path.value.type === 'ObjectExpression');
+
+    let objectArg = extendObjectArgs[0];
+    if (!objectArg) {
+      console.log(
+        chalk.yellow(
+          `${dimPath}: Could not find object argument in \`export default Component.extend({ ... });\``
+        )
+      );
+      continue;
+    }
+
+    // find `tagName` property if it exists
+    let properties = objectArg.get('properties');
+
+    let tagName = 'div';
+
+    let tagNameProperty = properties.filter(
+      ({ value: node }) =>
+        node.type === 'ObjectProperty' &&
+        node.key.type === 'Identifier' &&
+        node.key.name === 'tagName'
+    )[0];
+    if (tagNameProperty) {
+      let tagNamePath = tagNameProperty.get('value');
+      if (tagNamePath.value.type !== 'StringLiteral') {
+        console.log(
+          chalk.yellow(`${dimPath}: Unexpected \`tagName\` value: ${j(tagNamePath).toSource()}`)
+        );
+        continue;
+      }
+
+      tagName = tagNamePath.value.value;
+    }
+
+    // skip tagless components (silent)
+    if (tagName === '') {
+      debug(`${componentPath}: tagName detected: %o -> skip`, tagName);
+      continue;
+    }
+
+    debug(`${componentPath}: tagName detected: %o`, tagName);
+
     // TODO skip components that use `this.element` (warn)
     // TODO skip components that use `click()` etc. (warn)
 
@@ -32,6 +107,8 @@ async function runForPath(path, options = {}) {
     // TODO set `tagName: ''` and remove `attributeBindings`, `classNames`, ...
     // TODO wrap existing template with root element
   }
+
+  debug('runForPath() finished');
 }
 
 module.exports = { run };

package.json

@@ -17,6 +17,7 @@
     "chalk": "^2.4.2",
     "debug": "^4.1.1",
     "globby": "^10.0.1",
+    "jscodeshift": "^0.6.4",
     "pkg-dir": "^4.2.0"
   },
   "devDependencies": {