add basic support for mixins on native classes

Author: mansona

lib/__tests__/__snapshots__/transform.js.snap

@@ -311,6 +311,36 @@ foo
 =========="
 `;
 
+exports[`native components basic mixins 1`] = `
+"==========
+
+      import Component from '@ember/component';
+      import SuperMixin from 'some-place';
+
+      export default class FooComponent extends Component.extends(SuperMixin) {
+      }
+  
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+      import { tagName } from \\"@ember-decorators/component\\";
+      import Component from '@ember/component';
+      import SuperMixin from 'some-place';
+
+      @tagName(\\"\\")
+      export default class FooComponent extends Component.extends(SuperMixin) {
+      }
+  
+~~~~~~~~~~
+<div ...attributes>
+  foo
+</div>
+=========="
+`;
+
 exports[`native components handles \`@attribute\` and \`@attributeBindings\` correctly 1`] = `
 "==========
 
@@ -744,3 +774,35 @@ foo
 </span>
 =========="
 `;
+
+exports[`native components replaces existing \`tagName\` on a mixin class 1`] = `
+"==========
+
+      import Component from '@ember/component';
+      import { tagName } from '@ember-decorators/component';
+      import SomeMixin from 'somewhere';
+
+      @tagName('span')
+      export default class FooComponent extends Component.extends(SomeMixin) {
+      }
+    
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: span
+~~~~~~~~~~
+
+      import Component from '@ember/component';
+      import { tagName } from '@ember-decorators/component';
+      import SomeMixin from 'somewhere';
+
+      @tagName(\\"\\")
+      export default class FooComponent extends Component.extends(SomeMixin) {
+      }
+    
+~~~~~~~~~~
+<span ...attributes>
+  foo
+</span>
+=========="
+`;

lib/__tests__/transform.js

@@ -304,6 +304,20 @@ describe('native components', () => {
     expect(generateSnapshot(source, template)).toMatchSnapshot();
   });
 
+  test('basic mixins', () => {
+    let source = `
+      import Component from '@ember/component';
+      import SuperMixin from 'some-place';
+
+      export default class FooComponent extends Component.extends(SuperMixin) {
+      }
+  `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
   test('replaces existing `tagName`', () => {
     let source = `
       import Component from '@ember/component';
@@ -319,6 +333,22 @@ describe('native components', () => {
     expect(generateSnapshot(source, template)).toMatchSnapshot();
   });
 
+  test('replaces existing `tagName` on a mixin class', () => {
+    let source = `
+      import Component from '@ember/component';
+      import { tagName } from '@ember-decorators/component';
+      import SomeMixin from 'somewhere';
+
+      @tagName('span')
+      export default class FooComponent extends Component.extends(SomeMixin) {
+      }
+    `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
   test('handles `elementId` correctly', () => {
     let source = `
       import Component from '@ember/component';

lib/transform.js

@@ -57,8 +57,22 @@ function checkComponentType(root) {
       },
     },
   });
+
+  if (classExport.length === 0) {
+    // find `export default class FooComponent extends Component.extends(SomeMixin) {}` AST node
+    classExport = root.find(j.ExportDefaultDeclaration, {
+      declaration: {
+        type: 'ClassDeclaration',
+        superClass: {
+          type: 'CallExpression',
+        },
+      },
+    });
+  }
+
   if (classExport.length === 1) {
-    let className = classExport.get().node.declaration.superClass.name;
+    const superClass = classExport.get().node.declaration.superClass;
+    let className = superClass.name || superClass.callee.object.name;
     if (
       root.find(j.ImportDeclaration, node => {
         return (