Preserve formatting

[rajasegar]

Currently, the codemod is not preserving the code format properly, there are some missing indentations and line breaks. Need to fix this.

[jelhan]

Accordingly to an answer by @ef4 on discuss.emberjs.com writing "there’s not a handlebars AST printer that does a good job of preserving formatting. That is the main blocker to writing HBS code mods." It's from October 2018, so maybe there were some improvements in the tool chain.

[rajasegar]

@jelhan Have you take a look at ember-template-recast by @rwjblue, it is supposed to be a non-destructive template transformer, i didn't explored it thoroughly, need to dig deep.

[jelhan]

Another option would be not to preserve the format but just apply the coding style used in guides? Not quite sure if this is easier but having a code mod that also fixes all template linting errors sounds quite nice. 😆

[Alonski]

You could also use Prettier to format using the glimmer parser :)
prettier template.hbs --parser glimmer
Something like that

[rajasegar-c]

Thanks @Alonski it works, but it entirely reformats the whole file though the formatting is pretty.
Sounds OK to me

[tylerturdenpants]

@rajasegar-c I have been working on transitioning to ember-template-recast and have a near 1 to 1 transform as the original transform but I’m unsure how to write test for it. Could you help me with that? @rwjblue is there a way to test using the currrent fixtures?

[rajasegar]

@tylerturdenpants As far as I know, the tests should work fine, since you will be using a different parser here for the transform, it should not affect the tests I guess

[patocallaghan]

@tylerturdenpants do you have a branch with the ember-template-recast to share? I'd be curious to see the results it gives.

I've been playing around with Prettier handlebars support and it still seems a bit experimental to me as it gives some strange formatting results. I wonder if using Prettier formatting out-of-the-box could be a blocker for folks to adopt using this codemod?

[tylerturdenpants]

What I have been able to do is retrofit the jscodeshift to use ember-template-recast, but the API for codemod-cli doesnt support ember-template-recast which means I can't use the same testing code here in the repo. That's my only hurdle to pushing any code. We need to figure out how to test. I can push to the repo my ember-template-recast version if you want.

[patocallaghan]

@tylerturdenpants yeah that would be great 👍 I'm curious to see the difference between the formatting.

[tylerturdenpants]

@patocallaghan

Use my branch https://github.com/tylerturdenpants/ember-angle-brackets-codemod/tree/use-etr

npm install -g ember-template-recast

cd into the etr directory and run: ember-template-recast . -t transform.js

[patocallaghan]

@tylerturdenpants doesn't look like the ember-template-recast (ETR) version is as stable as I'd hoped. I've never used ember-template-recast before so maybe I'm misunderstanding the non-destructive part. I have lots of components which place their properties onto separate lines but it appears ETR just outputs them all onto the same line. However it does leave the rest of the template alone.

// before
{{ic-button
  label='Save photo'
  type='primary'	
  onClick=(action 'saveAdminAvatar')	
  inLeftList=true	
}}

// ember-template-recast
// 1) Doesn't self-close non-block component 2) places all properties on the same line
<IcButton @label="Cancel" @type="secondary" @onClick={{action "removeFile"}} @inLeftList={{true}}></IcButton>

// current master + prettier
<IcButton
  @label="Save photo"
  @type="primary"
  @onClick={{action "saveAdminAvatar"}}
  @inLeftList={{true}}
 />

I've also found some bugs where it deletes closing {{/if}} tags and other closing elements but doesn't on master.

Edit: an example of deleting closing {{/if}} tags was here

//before
{{#if autoHeight}}
  <div></div>
{{else}}
  {{#vertical-collection rows as |row|}}
    {{ic-legacy-table-row
      columns=fullColumnsWithSettings
      row=row
      tableActions=tableActions
      updateWidths=(action updateWidths)
    }}
  {{/vertical-collection}}
{{/if}}

// ember-template-recast
// closing if deleted and also the inner-component isn't converted
{{#if autoHeight}}
  <div></div>
{{else}}
  <VerticalCollection as |row|>
    {{ic-legacy-table-row columns=fullColumnsWithSettings row=row tableActions=tableActions updateWidths=(action updateWidths)}}
  </VerticalCollection>

[Turbo87]

resolved by #97