Support for running on templates in JS files

[Turbo87]

Example:

await render(hbs`{{
  file-preview/slider
  files=files
  selectedFileIndex=selectedFileIndex
}}`);

[rwjblue]

Should support the following import locations:

import hbs from 'htmlbars-inline-precompile';
import hbs from 'ember-cli-htmlbars-inline-precompile';
import { hbs } from 'ember-cli-htmlbars';

(Note that the actual local name is completely up to the app, and does not need to be hbs).

Should also support the following call signatures of hbs:

hbs`{{stuff-here blah="derp"}}`;

hbs('{{stuff-here blah="derp"}}');
hbs('{{stuff-here blah="derp"}}', { moduleName: 'app-name/templates/foo.hbs' });

[jelhan]

I wasn't aware that this is formally not supported. Running the codemod with a RegExp that matches JavaScript files works quiet well. If run the codemod on the huge test suite of Ember Bootstrap and it has worked quiet well. This commit is mostly done by the codemod: ember-bootstrap/ember-bootstrap@ae598bc

But there are some problems which causes files to be skipped:

• It tries to pass code outside of hbs(''), which results in an error if that code contains part that looks like HTML. E.g. this line was throwing a Unclosed element textarea (on line 490). error: https://github.com/kaliber5/ember-bootstrap/blob/a0e2a2ea1732296f28e964ab2e1b800f7d08597d/tests/integration/components/bs-dropdown-test.js#L490
• For some files it has thrown a Syntax error like ' is not a valid character within attribute names.It includes the line and char, e.g. at line 390 col 7. But that's not that helpful as it might seem. It has pointed to these lines: https://github.com/kaliber5/ember-bootstrap/blob/a0e2a2ea1732296f28e964ab2e1b800f7d08597d/tests/integration/components/bs-popover-test.js#L101 https://github.com/kaliber5/ember-bootstrap/blob/a0e2a2ea1732296f28e964ab2e1b800f7d08597d/tests/integration/components/bs-popover-test.js#L101.
• One file was failing with Error: A block may only be used inside an HTML element or another block.. That error hasn't included any hint.

I haven't noticed any wrong conversion. It has either skipped the file or provided correct conversion. In some rare edge cases the conversion was incomplete and missing some yielded blocks.

---

Update:

All syntax errors were caused by < char in the code. These are two examples: https://github.com/kaliber5/ember-bootstrap/blob/a0e2a2ea1732296f28e964ab2e1b800f7d08597d/tests/integration/components/bs-popover-test.js#L98 https://github.com/kaliber5/ember-bootstrap/blob/a0e2a2ea1732296f28e964ab2e1b800f7d08597d/tests/integration/components/bs-form/element-test.js#L392 Please note that commenting the line out does not have an affect. You need to replace the char while running the codemod.

---

Update 2:

The A block may only be used inside an HTML element or another block. was caused by a < char in code as well. Temporary replacing this line and another one, which was similar allowed the codemod to run.

---

Summary

While running the codemod on rendering tests is not official supported it works quite well. It either does it job as expected or fails and skips the file. Such failures seem to be caused by < chars in code. Temporary replacing them allows the codemod to be run. Not the best solution but it was good enough to convert the test suite of Ember Bootstrap.

[lifeart]

https://github.com/flashios09/ember-extract-inline-templates

// @flashios09

[flashios09]

https://github.com/flashios09/ember-extract-inline-templates

// @flashios09

hi @lifeart , i will update the code and publish it this weekend :)

[acknudson]

I haven't been able to get this to work in our test files, but I would love for that to be possible!

[ghost]

@ajcolter I believe you need to specify the .js extension explicitly. I had to run:

npx ember-angle-brackets-codemod http://localhost:4200 tests/integration/components/*.js

I saw a few parsing errors that I will open separate issues for. But to confirm @jelhan's findings, the migration worked for the majority of cases.