Move template AST logic for classes/attributes to transformTemplate()

Author: simonihmig

lib/transform.js

@@ -52,19 +52,32 @@ function transform(source, template, options = {}) {
   let type = checkComponentType(root);
   let result;
 
-  switch (type) {
-    case 'classic':
-      result = transformClassicComponent(root, options);
-      break;
-    default:
-      throw new Error(
-        `Unsupported component type. Only classic components (\`Component.extend({ ... }\`) are supported currently.`
-      );
+  if (type === 'classic') {
+    result = transformClassicComponent(root, options);
+  } else {
+    throw new SilentError(
+      `Unsupported component type. Only classic components (\`Component.extend({ ... }\`) are supported currently.`
+    );
   }
 
   if (result) {
-    let { newSource, attrs, tagName } = result;
-    let newTemplate = transformTemplate(template, tagName, attrs);
+    let {
+      newSource,
+      tagName,
+      elementId,
+      classNames,
+      classNameBindings,
+      attributeBindings,
+    } = result;
+    let newTemplate = transformTemplate(
+      template,
+      tagName,
+      elementId,
+      classNames,
+      classNameBindings,
+      attributeBindings,
+      options
+    );
 
     return { source: newSource, template: newTemplate, tagName };
   }

lib/transform/classic.js

@@ -1,6 +1,5 @@
 const j = require('jscodeshift').withParser('ts');
 const _debug = require('debug')('tagless-ember-components-codemod');
-const templateRecast = require('ember-template-recast');
 
 const SilentError = require('../silent-error');
 const {
@@ -13,8 +12,6 @@ const {
   isProperty,
 } = require('../utils');
 
-const b = templateRecast.builders;
-
 const EVENT_HANDLER_METHODS = [
   // Touch events
   'touchStart',
@@ -154,41 +151,5 @@ module.exports = function transformClassicComponent(root, options) {
 
   let newSource = root.toSource();
 
-  // wrap existing template with root element
-  let classNodes = [];
-  if (options.hasComponentCSS) {
-    classNodes.push(b.mustache('styleNamespace'));
-  }
-  for (let className of classNames) {
-    classNodes.push(b.text(className));
-  }
-  classNameBindings.forEach(([truthy, falsy], property) => {
-    if (!truthy) {
-      classNodes.push(b.mustache(`unless this.${property} "${falsy}"`));
-    } else {
-      classNodes.push(b.mustache(`if this.${property} "${truthy}"${falsy ? ` "${falsy}"` : ''}`));
-    }
-  });
-
-  let attrs = [];
-  if (elementId) {
-    attrs.push(b.attr('id', b.text(elementId)));
-  }
-  attributeBindings.forEach((value, key) => {
-    attrs.push(b.attr(key, b.mustache(`this.${value}`)));
-  });
-  if (classNodes.length === 1) {
-    attrs.push(b.attr('class', classNodes[0]));
-  } else if (classNodes.length !== 0) {
-    let parts = [];
-    classNodes.forEach((node, i) => {
-      if (i !== 0) parts.push(b.text(' '));
-      parts.push(node);
-    });
-
-    attrs.push(b.attr('class', b.concat(parts)));
-  }
-  attrs.push(b.attr('...attributes', b.text('')));
-
-  return { newSource, attrs, tagName };
+  return { newSource, tagName, elementId, classNames, classNameBindings, attributeBindings };
 };

lib/transform/template.js

@@ -6,7 +6,51 @@ const b = templateRecast.builders;
 
 const PLACEHOLDER = '@@@PLACEHOLDER@@@';
 
-module.exports = function transformTemplate(template, tagName, attrs) {
+module.exports = function transformTemplate(
+  template,
+  tagName,
+  elementId,
+  classNames,
+  classNameBindings,
+  attributeBindings,
+  options
+) {
+  // wrap existing template with root element
+  let classNodes = [];
+  if (options.hasComponentCSS) {
+    classNodes.push(b.mustache('styleNamespace'));
+  }
+  for (let className of classNames) {
+    classNodes.push(b.text(className));
+  }
+  classNameBindings.forEach(([truthy, falsy], property) => {
+    if (!truthy) {
+      classNodes.push(b.mustache(`unless this.${property} "${falsy}"`));
+    } else {
+      classNodes.push(b.mustache(`if this.${property} "${truthy}"${falsy ? ` "${falsy}"` : ''}`));
+    }
+  });
+
+  let attrs = [];
+  if (elementId) {
+    attrs.push(b.attr('id', b.text(elementId)));
+  }
+  attributeBindings.forEach((value, key) => {
+    attrs.push(b.attr(key, b.mustache(`this.${value}`)));
+  });
+  if (classNodes.length === 1) {
+    attrs.push(b.attr('class', classNodes[0]));
+  } else if (classNodes.length !== 0) {
+    let parts = [];
+    classNodes.forEach((node, i) => {
+      if (i !== 0) parts.push(b.text(' '));
+      parts.push(node);
+    });
+
+    attrs.push(b.attr('class', b.concat(parts)));
+  }
+  attrs.push(b.attr('...attributes', b.text('')));
+
   let templateAST = templateRecast.parse(template);
 
   templateAST.body = [