Handle @classname

Author: simonihmig

lib/__tests__/__snapshots__/transform.js.snap

@@ -354,6 +354,39 @@ foo
 =========="
 `;
 
+exports[`native components handles \`@className\` correctly 1`] = `
+"==========
+
+      import { className } from '@ember-decorators/component';
+
+      export default class FooComponent extends Component {
+        @className('b') a;
+        @className('y', 'z') x;
+        @className(undefined, 'bar') foo;
+      }
+    
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+      import { tagName } from '@ember-decorators/component';
+
+      @tagName(\\"\\")
+      export default class FooComponent extends Component {
+        a;
+        x;
+        foo;
+      }
+    
+~~~~~~~~~~
+<div class=\\"{{if this.a \\"b\\"}} {{if this.x \\"y\\" \\"z\\"}} {{unless this.foo \\"bar\\"}}\\" ...attributes>
+  foo
+</div>
+=========="
+`;
+
 exports[`native components handles \`@classNameBindings\` correctly 1`] = `
 "==========
 

lib/__tests__/transform.js

@@ -338,6 +338,36 @@ describe('native components', function() {
     expect(generateSnapshot(source, template)).toMatchSnapshot();
   });
 
+  test('handles `@className` correctly', () => {
+    let source = `
+      import { className } from '@ember-decorators/component';
+
+      export default class FooComponent extends Component {
+        @className('b') a;
+        @className('y', 'z') x;
+        @className(undefined, 'bar') foo;
+      }
+    `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
+  test('throws for non-boolean @className', () => {
+    let source = `
+      import { className } from '@ember-decorators/component';
+
+      export default class FooComponent extends Component {
+        @className activeClass = 'active';
+      }
+    `;
+
+    expect(() => transform(source, '')).toThrowErrorMatchingInlineSnapshot(
+      `"Unsupported non-boolean \`@className\` for property: activeClass"`
+    );
+  });
+
   test('handles `@classNames` correctly', () => {
     let source = `
       import { classNames } from '@ember-decorators/component';
@@ -380,6 +410,20 @@ describe('native components', function() {
     expect(generateSnapshot(source, template)).toMatchSnapshot();
   });
 
+  test('throws for non-boolean @classNameBindings', () => {
+    let source = `
+      import { classNameBindings } from '@ember-decorators/component';
+
+      @classNameBindings('a:b', 'foo')
+      export default class FooComponent extends Component {
+      }
+    `;
+
+    expect(() => transform(source, '')).toThrowErrorMatchingInlineSnapshot(
+      `"Unsupported non-boolean \`@classNameBindings\` value: foo"`
+    );
+  });
+
   test('skips tagless components', () => {
     let source = `
       import { tagName } from '@ember-decorators/component';

lib/transform/native.js

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

lib/utils/native.js

@@ -139,16 +139,34 @@ function findClassNameBindings(classDeclaration) {
     let parts = binding.split(':');
 
     if (parts.length === 1) {
-      throw new SilentError(`Unsupported non-boolean \`classNameBindings\` value: ${binding}`);
+      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}`);
+      throw new SilentError(`Unexpected \`@classNameBindings\` value: ${binding}`);
     }
   }
 
+  j(classDeclaration)
+    .find(j.ClassProperty)
+    .forEach(path => {
+      let key = path.node.key.name;
+
+      if (findDecorator(path, 'className', false)) {
+        throw new SilentError(`Unsupported non-boolean \`@className\` for property: ${key}`);
+      }
+      let decorator = findDecorator(path, 'className', true);
+      if (!decorator) {
+        return;
+      }
+
+      let args = decorator.get('expression').value.arguments;
+      let [truthy, falsy] = args.map(element => element.value);
+      classNameBindings.set(key, [truthy || null, falsy || null]);
+    });
+
   return classNameBindings;
 }