Support TypeScript components

Author: simonihmig

lib/__tests__/__snapshots__/transform.js.snap

@@ -559,6 +559,38 @@ foo
 =========="
 `;
 
+exports[`native components handles TypeScript components correctly 1`] = `
+"==========
+
+      import Component from '@ember/component';
+      import { classNames } from '@ember-decorators/component';
+
+      @classNameBindings('foo:bar')
+      export default class extends Component {
+        foo: boolean = true;
+      }
+    
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+      import Component from '@ember/component';
+      import { classNames, tagName } from '@ember-decorators/component';
+
+      @tagName(\\"\\")
+      export default class extends Component {
+        foo: boolean = true;
+      }
+    
+~~~~~~~~~~
+<div class={{if this.foo \\"bar\\"}} ...attributes>
+  foo
+</div>
+=========="
+`;
+
 exports[`native components handles single \`@classNames\` item correctly 1`] = `
 "==========
 

lib/__tests__/guess-template.js

@@ -8,6 +8,12 @@ describe('guessTemplatePath()', () => {
       'app/components/nested/sub/component/component.js',
       'app/components/nested/sub/component/template.hbs',
     ],
+    ['app/components/checkbox.ts', 'app/templates/components/checkbox.hbs'],
+    ['app/components/checkbox/component.ts', 'app/components/checkbox/template.hbs'],
+    [
+      'app/components/nested/sub/component/component.ts',
+      'app/components/nested/sub/component/template.hbs',
+    ],
   ];
 
   for (let [input, expected] of TESTS) {

lib/__tests__/transform.js

@@ -602,4 +602,20 @@ describe('native components', function() {
 
     expect(generateSnapshot(source, template, { hasComponentCSS: true })).toMatchSnapshot();
   });
+
+  test('handles TypeScript components correctly', () => {
+    let source = `
+      import Component from '@ember/component';
+      import { classNames } from '@ember-decorators/component';
+
+      @classNameBindings('foo:bar')
+      export default class extends Component {
+        foo: boolean = true;
+      }
+    `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
 });

lib/transform.js

@@ -100,12 +100,14 @@ function transform(source, template, options = {}) {
 }
 
 function guessTemplatePath(componentPath) {
-  let isPods = path.basename(componentPath) === 'component.js';
+  let isPods = path.basename(componentPath, path.extname(componentPath)) === 'component';
   if (isPods) {
     return path.dirname(componentPath) + '/template.hbs';
   }
 
-  return componentPath.replace('/components/', '/templates/components/').replace(/\.js$/, '.hbs');
+  return componentPath
+    .replace('/components/', '/templates/components/')
+    .replace(/\.(js|ts)$/, '.hbs');
 }
 
 module.exports = {