Extract transforms and utils

Preparation work for #3: separated existing (classic component and template) transforms and utils into separate modules, so we can later add a native class transform easier.

Author: simonihmig

lib/__tests__/find-properties.js

@@ -6,7 +6,7 @@ const {
   findAttributeBindings,
   findClassNames,
   findClassNameBindings,
-} = require('../transform');
+} = require('../utils');
 
 describe('findTagName()', () => {
   const TESTS = [

lib/__tests__/transform.js

@@ -106,7 +106,7 @@ test('throws if `Component.extend({ ... })` is not found', () => {
   `;
 
   expect(() => transform(source, '')).toThrowErrorMatchingInlineSnapshot(
-    `"Could not find \`export default Component.extend({ ... });\`"`
+    `"Unsupported component type. Only classic components (\`Component.extend({ ... }\`) are supported currently."`
   );
 });
 

lib/transform.js

@@ -1,52 +1,11 @@
 const fs = require('fs');
 const path = require('path');
-const templateRecast = require('ember-template-recast');
 const j = require('jscodeshift').withParser('ts');
 const _debug = require('debug')('tagless-ember-components-codemod');
 
 const SilentError = require('./silent-error');
-
-const b = templateRecast.builders;
-
-const EVENT_HANDLER_METHODS = [
-  // Touch events
-  'touchStart',
-  'touchMove',
-  'touchEnd',
-  'touchCancel',
-
-  // Keyboard events
-  'keyDown',
-  'keyUp',
-  'keyPress',
-
-  // Mouse events
-  'mouseDown',
-  'mouseUp',
-  'contextMenu',
-  'click',
-  'doubleClick',
-  'focusIn',
-  'focusOut',
-
-  // Form events
-  'submit',
-  'change',
-  'focusIn',
-  'focusOut',
-  'input',
-
-  // Drag and drop events
-  'dragStart',
-  'drag',
-  'dragEnter',
-  'dragLeave',
-  'dragOver',
-  'dragEnd',
-  'drop',
-];
-
-const PLACEHOLDER = '@@@PLACEHOLDER@@@';
+const transformClassicComponent = require('./transform/classic');
+const transformTemplate = require('./transform/template');
 
 function transformPath(componentPath, options) {
   let debug = (fmt, ...args) => _debug(`${componentPath}: ${fmt}`, ...args);
@@ -70,11 +29,7 @@ function transformPath(componentPath, options) {
   return result.tagName;
 }
 
-function transform(source, template, options = {}) {
-  let debug = options.debug || _debug;
-
-  let root = j(source);
-
+function checkComponentType(root) {
   // find `export default Component.extend({ ... });` AST node
   let exportDefaultDeclarations = root.find(j.ExportDefaultDeclaration, {
     declaration: {
@@ -87,235 +42,34 @@ function transform(source, template, options = {}) {
     },
   });
 
-  if (exportDefaultDeclarations.length !== 1) {
-    throw new SilentError(`Could not find \`export default Component.extend({ ... });\``);
-  }
-
-  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) {
-    throw new SilentError(
-      `Could not find object argument in \`export default Component.extend({ ... });\``
-    );
-  }
-
-  // find `tagName` property if it exists
-  let properties = objectArg.get('properties');
-  let tagName = findTagName(properties);
-
-  // skip tagless components (silent)
-  if (tagName === '') {
-    debug('tagName: %o -> skip', tagName);
-    return { source, template };
-  }
-
-  debug('tagName: %o', tagName);
-
-  // skip components that use `this.element`
-  let thisElementPaths = j(objectArg).find(j.MemberExpression, {
-    object: { type: 'ThisExpression' },
-    property: { name: 'element' },
-  });
-  if (thisElementPaths.length !== 0) {
-    throw new SilentError(`Using \`this.element\` is not supported in tagless components`);
-  }
-
-  // skip components that use `this.elementId`
-  let thisElementIdPaths = j(objectArg).find(j.MemberExpression, {
-    object: { type: 'ThisExpression' },
-    property: { name: 'elementId' },
-  });
-  if (thisElementIdPaths.length !== 0) {
-    throw new SilentError(`Using \`this.elementId\` is not supported in tagless components`);
-  }
-
-  // skip components that use `click()` etc.
-  for (let methodName of EVENT_HANDLER_METHODS) {
-    let handlerMethod = properties.filter(path => isMethod(path, methodName))[0];
-    if (handlerMethod) {
-      throw new SilentError(`Using \`${methodName}()\` is not supported in tagless components`);
-    }
-  }
-
-  // analyze `elementId`, `attributeBindings`, `classNames` and `classNameBindings`
-  let elementId = findElementId(properties);
-  debug('elementId: %o', elementId);
-
-  let attributeBindings = findAttributeBindings(properties);
-  debug('attributeBindings: %o', attributeBindings);
-
-  let classNames = findClassNames(properties);
-  debug('classNames: %o', classNames);
-
-  let classNameBindings = findClassNameBindings(properties);
-  debug('classNameBindings: %o', classNameBindings);
-
-  let templateAST = templateRecast.parse(template);
-
-  // set `tagName: ''`
-  let tagNamePath = j(properties)
-    .find(j.ObjectProperty)
-    .filter(path => path.parentPath === properties)
-    .filter(path => isProperty(path, 'tagName'));
-
-  if (tagNamePath.length === 1) {
-    j(tagNamePath.get('value')).replaceWith(j.stringLiteral(''));
-  } else {
-    properties.unshift(j.objectProperty(j.identifier('tagName'), j.stringLiteral('')));
-  }
-
-  // remove `elementId`, `attributeBindings`, `classNames` and `classNameBindings`
-  j(properties)
-    .find(j.ObjectProperty)
-    .filter(path => path.parentPath === properties)
-    .filter(
-      path =>
-        isProperty(path, 'elementId') ||
-        isProperty(path, 'attributeBindings') ||
-        isProperty(path, 'classNames') ||
-        isProperty(path, 'classNameBindings')
-    )
-    .remove();
-
-  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('')));
-
-  templateAST.body = [
-    b.element(tagName, {
-      attrs,
-      children: [b.text(`\n${PLACEHOLDER}\n`)],
-    }),
-  ];
-
-  let newTemplate = templateRecast.print(templateAST).replace(PLACEHOLDER, indentLines(template));
-
-  return { source: newSource, template: newTemplate, tagName };
-}
-
-function isProperty(path, name) {
-  let node = path.value;
-  return node.type === 'ObjectProperty' && node.key.type === 'Identifier' && node.key.name === name;
-}
-
-function isMethod(path, name) {
-  let node = path.value;
-  return node.type === 'ObjectMethod' && node.key.type === 'Identifier' && node.key.name === name;
-}
-
-function findStringProperty(properties, name, defaultValue = null) {
-  let propertyPath = properties.filter(path => isProperty(path, name))[0];
-  if (!propertyPath) {
-    return defaultValue;
+  if (exportDefaultDeclarations.length === 1) {
+    return 'classic';
   }
-
-  let valuePath = propertyPath.get('value');
-  if (valuePath.value.type !== 'StringLiteral') {
-    throw new SilentError(`Unexpected \`${name}\` value: ${j(valuePath).toSource()}`);
-  }
-
-  return valuePath.value.value;
 }
 
-function findTagName(properties) {
-  return findStringProperty(properties, 'tagName', 'div');
-}
-
-function findElementId(properties) {
-  return findStringProperty(properties, 'elementId');
-}
-
-function findStringArrayProperties(properties, name) {
-  let propertyPath = properties.filter(path => isProperty(path, name))[0];
-  if (!propertyPath) {
-    return [];
-  }
-
-  let arrayPath = propertyPath.get('value');
-  if (arrayPath.value.type !== 'ArrayExpression') {
-    throw new SilentError(`Unexpected \`${name}\` value: ${j(arrayPath).toSource()}`);
-  }
-
-  return arrayPath.get('elements').value.map(element => {
-    if (element.type !== 'StringLiteral') {
-      throw new SilentError(`Unexpected \`${name}\` value: ${j(arrayPath).toSource()}`);
-    }
-
-    return element.value;
-  });
-}
+function transform(source, template, options = {}) {
+  let root = j(source);
+  let type = checkComponentType(root);
+  let result;
 
-function findAttributeBindings(properties) {
-  let attrBindings = new Map();
-  for (let binding of findStringArrayProperties(properties, 'attributeBindings')) {
-    let [value, attr] = binding.split(':');
-    attrBindings.set(attr || value, value);
+  switch (type) {
+    case 'classic':
+      result = transformClassicComponent(root, options);
+      break;
+    default:
+      throw new Error(
+        `Unsupported component type. Only classic components (\`Component.extend({ ... }\`) are supported currently.`
+      );
   }
 
-  return attrBindings;
-}
+  if (result) {
+    let { newSource, attrs, tagName } = result;
+    let newTemplate = transformTemplate(template, tagName, attrs);
 
-function findClassNames(properties) {
-  return findStringArrayProperties(properties, 'classNames');
-}
-
-function findClassNameBindings(properties) {
-  let classNameBindings = new Map();
-  for (let binding of findStringArrayProperties(properties, 'classNameBindings')) {
-    let parts = binding.split(':');
-
-    if (parts.length === 1) {
-      throw new SilentError(`Unsupported non-boolean \`classNameBindings\` value: ${binding}`);
-    } 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 {
-      throw new SilentError(`Unexpected \`classNameBindings\` value: ${binding}`);
-    }
+    return { source: newSource, template: newTemplate, tagName };
   }
 
-  return classNameBindings;
+  return { source, template };
 }
 
 function guessTemplatePath(componentPath) {
@@ -327,20 +81,8 @@ function guessTemplatePath(componentPath) {
   return componentPath.replace('/components/', '/templates/components/').replace(/\.js$/, '.hbs');
 }
 
-function indentLines(content) {
-  return content
-    .split('\n')
-    .map(it => `  ${it}`)
-    .join('\n');
-}
-
 module.exports = {
   transform,
   transformPath,
-  findTagName,
-  findElementId,
-  findAttributeBindings,
-  findClassNames,
-  findClassNameBindings,
   guessTemplatePath,
 };