Countdown to The New 12 months

That is the ninth in our DecEmber sequence–”Countdown to The New 12 months: 31 Days of Ember Addons”. We plan to focus on a brand new addon every day till the brand new yr, and we hope you will be part of us for the enjoyable!

Day 9

Till lately, changing Ember templates to make use of Angle Bracket invocation was a tiresome and handbook process. With the most recent model of ember-angle-brackets-codemod, you get a wiser, extra full codemod to alter your templates in a flash!

What It Does

Earlier than Angle Bracket invocation, almost each template assemble in Ember was invoked utilizing Handlebars {{doubleCurly}} syntax. This made differentiating between elements, helpers, and plain values extremely tough. Angle Brackets alleviate most of this ambiguity. However what if you happen to wished to alter each double curly element invocation to Angle Brackets? That process might take perpetually (particularly if you happen to cant reliably inform the distinction between all the pieces in your templates)! The Angle Bracket Codemod eases the transition in a couple of steps:

1. It visits a URL of your app that’s provided as a command line argument
2. A small little bit of code is injected into the context of the app.
3. The code identifies the app’s elements and their properties, in addition to all of the helpers. This contains these in addons!
4. Given all this data, the codemod rapidly modifications all of the apps templates preserving a lot of the area and indentation.

Right here is an instance of typical conversion:

Earlier than

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

{s}
  {nation}
    {{#s.choice worth=nation}}{{nation.title}}{{/s.choice}}
  {{/every}}
{{/super-select}}

{{ui/button textual content="Click on me"}}

<SiteHeader @consumer={{this.consumer}} class={{if this.consumer.isAdmin "admin"}} />
<SuperSelect @chosen={{this.consumer.nation}} as |s|>
  {nation}
    <s.choice @worth={{nation}}>
      {{nation.title}}
    </s.choice>
  {{/every}}
</SuperSelect>

<Ui::Button @textual content="Click on me" />