search

mainmatter / emblem-migrator

Migrate Emblem.js to pretty Handlebars files
MIT License
9 stars 1 forks source link

New lines in *.hbs node `innerHTML` #41

Open kcarmonamurphy opened 2 years ago

kcarmonamurphy commented 2 years ago

Thank you

Firstly, I'd like to say a huge thank you to the developers of emblem-migrator. I work for a medium sized fintech firm and we had over 260 *.emblem files in our repository that we were seeking to migrate. This tool made it quite easy to convert those in batches without disruption to other developers.

Problem description

Over the course of our conversions, we noticed several small visual regressions that would crop up after conversion. Notably, some of our layouts were sensitive to whitespace and changes to content in innerHTML. We noticed that the converted hbs files would sometimes have \n characters in the innerHTML of nodes. Here's an example:

Given this content: Screen Shot 2021-11-02 at 9 37 37 AM

Before conversion Screen Shot 2021-11-02 at 9 37 30 AM

After conversion Screen Shot 2021-11-02 at 9 37 42 AM

Not sure if this is an issue with emblem-migrator or the way Handlebars handles whitespaces but I thought it'd raise this here. The workaround for us was to use the whitespace control feature (using ~) in handlebars (https://handlebarsjs.com/guide/expressions.html#whitespace-control) to remove whitespace before and after tags, although this didn't always solve our issues.

Turbo87 commented 2 years ago

yeah, that's a known issue caused by the migrator running prettier on the templates after the conversion. If we skipped that step the templates would not be readable at all since the emblem compiler was not written for pretty-printing the output.