Monday, November 28, 2022
HomeJavaScriptCountdown to The New 12 months

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"}}

After

<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" />

Moreover, the codemod has quite a few choices that may be configured. The codemod will be adjusted to skip sure helpers, keep away from altering built-in elements {{link-to}}, {{enter}} and {{textarea}}, or skipping recordsdata for conversion altogether.

Why I Like It

Codemods are the perfect, particularly if they’re sensible! They save a major period of time and they’re usually higher than handbook intervention. Till a couple of months in the past, working this codemod and the modifications it made have been totally based mostly on a set of heuristics. The codemod was good nevertheless it typically made errors, requiring an exhaustive quantity of human enter. At present the codemod can intelligently convert templates to Angle Bracket invocation with distinctive precision, typically with few to no errors. This permits groups to opt-in to the long run immediately as an alternative of wasting your cycles.

Do you utilize this codemod? Or one prefer it? We might love to listen to about Ember codemods that carry you pleasure!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments