Handle attribute decorator

Author: simonihmig

lib/__tests__/__snapshots__/transform.js.snap

@@ -241,6 +241,67 @@ foo
 =========="
 `;
 
+exports[`native components handles \`@attribute\` and \`@attributeBindings\` correctly 1`] = `
+"==========
+
+      import { attribute, attributeBindings } from '@ember-decorators/component';
+
+      @attributeBindings('foo')
+      export default class FooComponent extends Component {
+        @attribute('baz') bar;
+      }
+    
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+      import { tagName } from '@ember-decorators/component';
+
+      @tagName(\\"\\")
+      export default class FooComponent extends Component {
+        bar;
+      }
+    
+~~~~~~~~~~
+<div foo={{this.foo}} baz={{this.bar}} ...attributes>
+  foo
+</div>
+=========="
+`;
+
+exports[`native components handles \`@attribute\` correctly 1`] = `
+"==========
+
+      import { attribute } from '@ember-decorators/component';
+
+      export default class FooComponent extends Component {
+        @attribute foo;
+        @attribute('baz') bar;
+      }
+    
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+      import { tagName } from '@ember-decorators/component';
+
+      @tagName(\\"\\")
+      export default class FooComponent extends Component {
+        foo;
+        bar;
+      }
+    
+~~~~~~~~~~
+<div foo={{this.foo}} baz={{this.bar}} ...attributes>
+  foo
+</div>
+=========="
+`;
+
 exports[`native components handles \`@attributeBindings\` correctly 1`] = `
 "==========
 

lib/__tests__/transform.js

@@ -271,6 +271,36 @@ describe('native components', function() {
     expect(generateSnapshot(source, template)).toMatchSnapshot();
   });
 
+  test('handles `@attribute` correctly', () => {
+    let source = `
+      import { attribute } from '@ember-decorators/component';
+
+      export default class FooComponent extends Component {
+        @attribute foo;
+        @attribute('baz') bar;
+      }
+    `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
+  test('handles `@attribute` and `@attributeBindings` correctly', () => {
+    let source = `
+      import { attribute, attributeBindings } from '@ember-decorators/component';
+
+      @attributeBindings('foo')
+      export default class FooComponent extends Component {
+        @attribute('baz') bar;
+      }
+    `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
   test('handles `@classNames` correctly', () => {
     let source = `
       import { classNames } from '@ember-decorators/component';

lib/transform/native.js

@@ -146,6 +146,8 @@ module.exports = function transformNativeComponent(root, options) {
   removeDecorator(root, classDeclaration, 'attributeBindings', '@ember-decorators/component');
   removeDecorator(root, classDeclaration, 'classNames', '@ember-decorators/component');
   removeDecorator(root, classDeclaration, 'classNameBindings', '@ember-decorators/component');
+  j(classBody).find(j.ClassProperty).forEach(path => removeDecorator(root, path, 'attribute', '@ember-decorators/component'));
+
 
   let newSource = root.toSource();
 

lib/utils/native.js

@@ -17,13 +17,16 @@ function addClassDecorator(classDeclaration, name, args) {
   }
 }
 
-function isDecorator(path, name) {
+function isDecorator(path, name, withArgs) {
   let node = path.value;
+  let isCall =
+    node.expression.type === 'CallExpression' && node.expression.callee.type === 'Identifier';
+
   return (
     node.type === 'Decorator' &&
-    node.expression.type === 'CallExpression' &&
-    node.expression.callee.type === 'Identifier' &&
-    node.expression.callee.name === name
+    ((isCall && node.expression.callee.name === name) ||
+      (!isCall && node.expression.name === name)) &&
+    (withArgs === undefined || ((withArgs === true && isCall) || (withArgs === false && !isCall)))
   );
 }
 
@@ -51,39 +54,40 @@ function findStringProperty(properties, name, defaultValue = null) {
   return valuePath.value.value;
 }
 
-function findDecorator(path, name) {
+function findDecorator(path, name, withArgs) {
   let decorators = path.get('decorators');
   if (decorators.value === undefined) {
     return;
   }
 
-  let existing = decorators.filter(path => isDecorator(path, name));
+  let existing = decorators.filter(path => isDecorator(path, name, withArgs));
 
   if (existing.length > 0) {
     return existing[0];
   }
 }
 
-function findStringDecorator(path, name, defaultValue = null) {
-  let decorator = findDecorator(path, name);
+function findStringDecorator(path, name) {
+  let decorator = findDecorator(path, name, true);
 
   if (!decorator) {
-    return defaultValue;
+    return;
   }
 
   return decorator.value.expression.arguments[0].value;
 }
 
 function findTagName(path) {
-  return findStringDecorator(path, 'tagName', 'div');
+  let value = findStringDecorator(path, 'tagName');
+  return value !== undefined ? value : 'div';
 }
 
 function findElementId(path) {
   return findStringProperty(path, 'elementId');
 }
 
 function findStringArrayDecorator(path, name) {
-  let decorator = findDecorator(path, name);
+  let decorator = findDecorator(path, name, true);
   if (!decorator) {
     return [];
   }
@@ -106,6 +110,22 @@ function findAttributeBindings(classDeclaration) {
     attrBindings.set(attr || value, value);
   }
 
+  j(classDeclaration)
+    .find(j.ClassProperty)
+    .forEach(path => {
+      let value = path.node.key.name;
+      let key = findStringDecorator(path, 'attribute');
+      if (key === undefined) {
+        let decorator = findDecorator(path, 'attribute', false);
+        if (decorator) {
+          key = value;
+        }
+      }
+      if (key !== undefined) {
+        attrBindings.set(key, value);
+      }
+    });
+
   return attrBindings;
 }