A jscodeshift Codemod to convert curly braces syntax to angle brackets syntax for templates in an Ember.js app
Refer to this RFC for more details on Angle brackets invocation syntax.
WARNING: jscodeshift
, and thus this codemod, edits your files in place.
It does not make a copy. Make sure your code is checked into a source control
repository like Git and that you have no outstanding changes to commit before
running this tool.
$ cd my-ember-app-or-addon
$ npx ember-angle-brackets-codemod angle-brackets app/templates
To help the codemod disambiguate components and helpers, you can define a list of helpers from your application in a configuration file as follows:
config/anglebrackets-codemod-config.json
{
"helpers": [
"date-formatter",
"info-pill"
]
}
The codemod will then ignore the above list of helpers and prevent them from being transformed into the new angle-brackets syntax.
You can also disable the conversion of the built-in components {{link-to}}
, {{input}}
and {{textarea}}
as follows:
config/anglebrackets-codemod-config.json
{
"helpers": [],
"skipBuiltInComponents": true
}
You can execute the codemod with custom configuration by specifying a --config
command line option as follows:
$ cd my-ember-app-or-addon
$ npx ember-angle-brackets-codemod angle-brackets app/templates --config ./config/anglebrackets-codemod-config.json
To get a list of helpers in your app you can do this in the Developer Console in your browser inside of your app:
var componentLikeHelpers = Object.keys(require.entries)
.filter(name=>(name.includes('/helpers/')|| name.includes('/helper')))
.filter(name=>!name.includes('/-')).map(name=>{
let path = name.split('/helpers/');
return path.pop();
}).filter(name=>!name.includes('/')).uniq();
copy(JSON.stringify(componentLikeHelpers))
If there are files that don't convert well, you can skip them by specifying an optional skipFilesThatMatchRegex
configuration setting. For example, with the configuration below, all files that contain "foo"
or "bar"
will be skipped:
config/anglebrackets-codemod-config.json
{
"helpers": [],
"skipBuiltInComponents": true,
"skipFilesThatMatchRegex": "foo|bar"
}
Oftentimes, you want to debug the codemod or the transform to identify issues with the code or to understand how the transforms are working, or to troubleshoot why some tests are failing.
Hence we recommend a debugging work-flow like below to quickly find out what is causing the issue.
Add debugger
statements, in appropriate places in the code. For example:
...
const params = a.value.params.map(p => {
debugger;
if(p.type === "SubExpression") {
return transformNestedSubExpression(p)
...
Here we are going to start the tests selectively in node debug mode. Since the
codemod is bootstrapped using codemod-cli which is using jest in turn
to run the tests, jest is having an option -t <name-of-spec>
to run a particular
set of tests instead of running the whole test suite.
We are making use of both these features to start our tests in this particular fashion. For more details on node debug, visit the official Node.js debugging guide, and for jest documentation on tests, please refer here.
node --inspect-brk ./node_modules/.bin/codemod-cli -t '<fixture-name>'
For example, if you want to debug the null-subexp.input.hbs
fixture or only that particular test case is failing
because of an issue.
node --inspect-brk ./node_modules/.bin/codemod-cli -t 'null-subexp'
Once you run the above command, your tests will start running in debug mode and your breakpoints will be triggered appropriately when that particular block of code gets executed. You can run the debugger inside Chrome browser dev-tools. More details on here
- Go to the AST Explorer
- Paste your curly brace syntax code in the top left corner window (Source)
- You will get the converted angle bracket syntax in the bottom right corner window (Transform Output)
- No formatting preserved