Enable colocated component classes to be TypeScript (#333)

Enable colocated component classes to be TypeScript

Author: Robert Jackson

lib/colocated-broccoli-plugin.js

@@ -68,15 +68,25 @@ module.exports = class ColocatedTemplateProcessor extends Plugin {
         return;
       }
 
-      // TODO: deal with alternate extensions (e.g. ts)
-      let possibleJSPath = path.join(filePathParts.dir, filePathParts.name + '.js');
-      let hasJSFile = fs.existsSync(path.join(this.inputPaths[0], possibleJSPath));
-
       if (filePathParts.name === 'template') {
         filesToCopy.push(filePath);
         return;
       }
 
+      let hasBackingClass = false;
+      let backingClassPath = path.join(filePathParts.dir, filePathParts.name);
+
+      if (fs.existsSync(path.join(this.inputPaths[0], backingClassPath + '.js'))) {
+        backingClassPath += '.js';
+        hasBackingClass = true;
+      } else if (fs.existsSync(path.join(this.inputPaths[0], backingClassPath + '.ts'))) {
+        backingClassPath += '.ts';
+        hasBackingClass = true;
+      } else {
+        backingClassPath += '.js';
+        hasBackingClass = false;
+      }
+
       let templateContents = fs.readFileSync(inputPath, { encoding: 'utf8' });
       let jsContents = null;
 
@@ -92,12 +102,14 @@ module.exports = class ColocatedTemplateProcessor extends Plugin {
       )})`;
       let prefix = `import { hbs } from 'ember-cli-htmlbars';\nconst __COLOCATED_TEMPLATE__ = ${hbsInvocation};\n`;
 
-      logger.debug(`processing colocated template: ${filePath} (template-only: ${hasJSFile})`);
+      logger.debug(
+        `processing colocated template: ${filePath} (template-only: ${hasBackingClass})`
+      );
 
-      if (hasJSFile) {
+      if (hasBackingClass) {
         // add the template, call setComponentTemplate
 
-        jsContents = fs.readFileSync(path.join(this.inputPaths[0], possibleJSPath), {
+        jsContents = fs.readFileSync(path.join(this.inputPaths[0], backingClassPath), {
           encoding: 'utf8',
         });
 
@@ -114,7 +126,7 @@ module.exports = class ColocatedTemplateProcessor extends Plugin {
 
       jsContents = prefix + jsContents;
 
-      let outputPath = path.join(this.outputPath, possibleJSPath);
+      let outputPath = path.join(this.outputPath, backingClassPath);
 
       // TODO: don't speculatively mkdirSync (likely do in a try/catch with ENOENT)
       mkdirp.sync(path.dirname(outputPath));

node-tests/colocated-plugin-test.js

@@ -105,6 +105,50 @@ describe('ColocatedTemplateCompiler', function() {
     });
   });
 
+  it('works for typescript component class with template', async function() {
+    input.write({
+      'app-name-here': {
+        components: {
+          'foo.hbs': `{{yield}}`,
+          'foo.ts': stripIndent`
+            import Component from '@glimmer/component';
+
+            export default class FooComponent extends Component {}
+          `,
+        },
+        templates: {
+          'application.hbs': `{{outlet}}`,
+        },
+      },
+    });
+
+    let tree = new ColocatedTemplateCompiler(input.path(), {
+      precompile(template) {
+        return JSON.stringify({ template });
+      },
+    });
+
+    output = createBuilder(tree);
+    await output.build();
+
+    assert.deepStrictEqual(output.read(), {
+      'app-name-here': {
+        components: {
+          'foo.ts': stripIndent`
+            import { hbs } from 'ember-cli-htmlbars';
+            const __COLOCATED_TEMPLATE__ = hbs("{{yield}}", {"contents":"{{yield}}","moduleName":"app-name-here/components/foo.hbs","parseOptions":{"srcName":"app-name-here/components/foo.hbs"}});
+            import Component from '@glimmer/component';
+
+            export default class FooComponent extends Component {}
+          `,
+        },
+        templates: {
+          'application.hbs': '{{outlet}}',
+        },
+      },
+    });
+  });
+
   it('works for scoped addon using template only component', async function() {
     input.write({
       '@scope-name': {