Implement binding analysis

Author: Turbo87

lib/index.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const chalk = require('chalk');
 const pkgDir = require('pkg-dir');
 const globby = require('globby');
+const stringUtils = require('ember-cli-string-utils');
 const j = require('jscodeshift').withParser('ts');
 const debug = require('debug')('tagless-ember-components-codemod');
 
@@ -146,7 +147,47 @@ async function runForPath(path, options = {}) {
       }
     }
 
-    // TODO analyze `tagName`, `attributeBindings`, `classNames`, ...
+    // analyze `elementId`, `attributeBindings`, `classNames` and `classNameBindings`
+    let elementId = findElementId(properties);
+    if (elementId !== null && elementId.constructor.name === 'NodePath') {
+      console.log(
+        chalk.yellow(`${dimPath}: Unexpected \`elementId\` value: ${j(elementId).toSource()}`)
+      );
+      continue;
+    }
+    debug(`${componentPath}: elementId: %o`, elementId);
+
+    let attributeBindings = findAttributeBindings(properties);
+    if (attributeBindings.constructor.name === 'NodePath') {
+      console.log(
+        chalk.yellow(
+          `${dimPath}: Unexpected \`attributeBindings\` value: ${j(attributeBindings).toSource()}`
+        )
+      );
+      continue;
+    }
+    debug(`${componentPath}: attributeBindings: %o`, attributeBindings);
+
+    let classNames = findClassNames(properties);
+    if (classNames.constructor.name === 'NodePath') {
+      console.log(
+        chalk.yellow(`${dimPath}: Unexpected \`classNames\` value: ${j(classNames).toSource()}`)
+      );
+      continue;
+    }
+    debug(`${componentPath}: classNames: %o`, classNames);
+
+    let classNameBindings = findClassNameBindings(properties);
+    if (classNameBindings.constructor.name === 'NodePath') {
+      console.log(
+        chalk.yellow(
+          `${dimPath}: Unexpected \`classNameBindings\` value: ${j(classNameBindings).toSource()}`
+        )
+      );
+      continue;
+    }
+    debug(`${componentPath}: classNameBindings: %o`, classNameBindings);
+
     // TODO skip on error (warn incl. please report)
 
     // TODO find corresponding template files
@@ -183,4 +224,106 @@ function findTagName(properties) {
   return tagNamePath;
 }
 
+function findElementId(properties) {
+  let elementIdProperty = properties.filter(path => isProperty(path, 'elementId'))[0];
+  if (!elementIdProperty) {
+    return null;
+  }
+
+  let elementIdPath = elementIdProperty.get('value');
+  if (elementIdPath.value.type === 'StringLiteral') {
+    return elementIdPath.value.value;
+  }
+
+  return elementIdPath;
+}
+
+function findAttributeBindings(properties) {
+  let attrBindingsProperty = properties.filter(path => isProperty(path, 'attributeBindings'))[0];
+  if (!attrBindingsProperty) {
+    return new Map();
+  }
+
+  let arrayPath = attrBindingsProperty.get('value');
+  if (arrayPath.value.type !== 'ArrayExpression') {
+    return arrayPath;
+  }
+
+  let elements = arrayPath.get('elements').value;
+
+  let attrBindings = new Map();
+  for (let element of elements) {
+    if (element.type !== 'StringLiteral') {
+      return arrayPath;
+    }
+
+    let [from, to] = element.value.split(':');
+    attrBindings.set(from, to || from);
+  }
+
+  return attrBindings;
+}
+
+function findClassNames(properties) {
+  let classNamesProperty = properties.filter(path => isProperty(path, 'classNames'))[0];
+  if (!classNamesProperty) {
+    return [];
+  }
+
+  let arrayPath = classNamesProperty.get('value');
+  if (arrayPath.value.type !== 'ArrayExpression') {
+    return arrayPath;
+  }
+
+  let elements = arrayPath.get('elements').value;
+
+  let classNames = [];
+  for (let element of elements) {
+    if (element.type !== 'StringLiteral') {
+      return arrayPath;
+    }
+
+    classNames.push(element.value);
+  }
+
+  return classNames;
+}
+
+function findClassNameBindings(properties) {
+  let classNameBindingsProperty = properties.filter(path =>
+    isProperty(path, 'classNameBindings')
+  )[0];
+  if (!classNameBindingsProperty) {
+    return new Map();
+  }
+
+  let arrayPath = classNameBindingsProperty.get('value');
+  if (arrayPath.value.type !== 'ArrayExpression') {
+    return arrayPath;
+  }
+
+  let elements = arrayPath.get('elements').value;
+
+  let classNameBindings = new Map();
+  for (let element of elements) {
+    if (element.type !== 'StringLiteral') {
+      return arrayPath;
+    }
+
+    let parts = element.value.split(':');
+
+    if (parts.length === 1) {
+      classNameBindings.set(parts[0], [stringUtils.dasherize(parts[0]), null]);
+    } else if (parts.length === 2) {
+      classNameBindings.set(parts[0], [parts[1], null]);
+    } else if (parts.length === 3) {
+      classNameBindings.set(parts[0], [parts[1] || null, parts[2]]);
+    } else {
+      return arrayPath;
+    }
+  }
+
+  return classNameBindings;
+}
+
 module.exports = { run };

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "chalk": "^2.4.2",
     "debug": "^4.1.1",
+    "ember-cli-string-utils": "^1.1.0",
     "globby": "^10.0.1",
     "jscodeshift": "^0.6.4",
     "pkg-dir": "^4.2.0"

yarn.lock

@@ -1299,6 +1299,11 @@ electron-to-chromium@^1.3.247:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.280.tgz#5f8950c8329e3e11b59c705fd59b4b8d9b3de5b9"
   integrity sha512-qYWNMjKLEfQAWZF2Sarvo+ahigu0EArnpCFSoUuZJS3W5wIeVfeEvsgmT2mgIrieQkeQ0+xFmykK3nx2ezekPQ==
 
+ember-cli-string-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-string-utils/-/ember-cli-string-utils-1.1.0.tgz#39b677fc2805f55173735376fcef278eaa4452a1"
+  integrity sha1-ObZ3/CgF9VFzc1N2/O8njqpEUqE=
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"