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 (