In this post, I will cover my experience converting Emblem templates to Handlebars in an Ember application.

To convert Emblem templates to Handlebars, we can use a tool called emblem-migrator, thanks to simplabs. We can use it as follows:

npx emblem-migrator [PATH]

Behind the scenes, this script is using the emblem package itself to convert from Emblem to Handlebars. You will find the following line of code in this script:

let hbs = Emblem.compile(emblem, { quiet: true });

It works very well, but I did run into a few issues that I think is helpful to be aware of.

1. White Space

I did experience some white space issues causing layouts to break. I think when ember-cli-emblem compiles Emblem templates to Handlebars, white space is removed. When I convert Emblem templates to Handlebars via emblem-migrator, those templates now have white space, causing some layouts that are very sensitive to spacing changes to break. This didn't happen too often though.

2. Comments

Comments will be ignored and won't show up in the resulting Handlebars template. This is mentioned in the emblem-migrator README.

3. Angle Bracket Invocation with Contextual Components

Let's say we have the following Emblem template:

% Container as |Container|
	% Container.Left
		| Left
	% Container.Right
		| Right

This will get compiled to the following via emblem-migrator:

<Container as |Container|>
  <Container class="Left">
    Left
  </Container>
  <Container class="Right">
    Right
  </Container>
</Container>

Notice how % Container.Left and % Container.Right were incorrectly compiled? It should be:

<Container as |Container|>
  <Container.Left>
    Left
  </Container.Left>
  <Container.Right>
    Right
  </Container.Right>
</Container>

Monitoring the Ratio of Handlebars to Emblem Files

To keep an eye on the ratio of Emblem to Handlebar templates in the application I'm working on, I added the following commands to my .bash_profile:

alias count-hbs="find ./app/ -name '*.hbs' | wc -l"
alias count-emblem="find ./app/ -name '*.emblem' | wc -l"
alias hbs-vs-emblem-breakdown="count-hbs; count-emblem;"

Finding the Shortest Emblem Files to Convert First

I also added the following command to my .bash_profile to easily see all of the Emblem files sorted by length:

alias ls-emblem-by-length="find ./app -name '*.emblem'  -type f -exec wc -l {} + | sort -rn"

This is helpful because it gives me a good idea of the lower hanging fruit so that I can convert a few templates with high confidence in between my primary responsibilites. Converting the larger Emblem templates can require a bit more time.

Conclusion

Are you working with Emblem? Do you plan on migrating to Handlebars? Let me know at @iamdtang on Twitter.