ember-angle-brackets-codemod

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.

Usage

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

From

{{site-header user=this.user class=(if this.user.isAdmin "admin")}}

{{#super-select selected=this.user.country as |s|}}
  {{#each this.availableCountries as |country|}}
    {{#s.option value=country}}{{country.name}}{{/s.option}}
  {{/each}}
{{/super-select}}

{{ui/button text="Click me"}}

To

<SiteHeader @user={{this.user}} class={{if this.user.isAdmin "admin"}} />
<SuperSelect @selected={{this.user.country}} as |s|>
  {{#each this.availableCountries as |country|}}
    <s.option @value={{country}}>
      {{country.name}}
    </s.option>
  {{/each}}
</SuperSelect>

<Ui::Button @text="Click me" />

Advanced Usage

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

AST Explorer playground

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)

RFC

Known issues

No formatting preserved

tylerturdenpants/ember-angle-brackets-codemod