diff --git a/lib/colocated-broccoli-plugin.js b/lib/colocated-broccoli-plugin.js index 6354eb5e..b4c66705 100644 --- a/lib/colocated-broccoli-plugin.js +++ b/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)); diff --git a/node-tests/colocated-plugin-test.js b/node-tests/colocated-plugin-test.js index de098a45..647bd088 100644 --- a/node-tests/colocated-plugin-test.js +++ b/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': {