Elm-handlebars - Templating Engine for Elm

Hi there,
I just wanted to quicky announce Elm-Handlebars. With this you can now write templates using the handlebar language and then use Json Values to generate a String out of it.

100% Code Coverage

Shoutout to @ilias for Elm-Coverage. With this I could create tests that cover all edge cases. Generally, using TTD+Code Coverage works perfectly for writing a complier. It really was a joy and im so happy that i found ilias’s tool.

Why write a compiler for a templating language?

Mostly because it was fun. But i am also currently working on a little tool called elm-pen that can be used to generate Elm files using Handlebar templates. It is currently written in ReasonML but im thinking of maybe rewriting it in Elm.

6 Likes

Thanks a lot for sharing your work!

As with most of these posts, I feel a little dense ^^ Would you mind sharing a few use cases? Why am I interested in this? How will I use it? What problems does it solve for me?

Thanks a bunch =)

1 Like

I discovered ELM 1hr ago… just looking around and was interested in styling stuff. Found this,
was just taking a look at the docs and got slapped by this typo “fristname” :slight_smile: :

<p>{{fristname}} {{lastname}}</p>
2 Likes

Since you have only just started looking at Elm, I feel I should mention that ‘handlebars’ is not the usual way of creating and styling HTML in Elm, like it is in other web frameworks. The usual way in Elm is to create your HTML-as-Elm-code with html 1.0.0. You might style it using elm-css 18.0.0. Or you might go higher level and make use of the elm-ui package elm-ui 1.1.8. These are not the only options, but are the most common.

When I first came to Elm, I was surprised by this, and also thought that writing HTML this way would be a very bad idea, since I would no longer be writing bare HTML and injecting values into it, but having to think about my HTML in a more abstract way. That will never catch on I thought; and it certainly takes a while to get used to. As to being a bad idea? I was completely wrong on that, HTML-as-Elm-code is a very powerful concept.

Anyway, sorry for the interuption but felt it necessary to help a beginner with a possible misconception of HTML in Elm. Also interested to hear about your elm-handlebars use cases…

1 Like

@geser thanks for that → I’ve fixed the typo

@Augustin82 @rupert I was thinking about usecases aswell - As I said, i mostly did it because it was fun - not because it was usefull… :sweat_smile:

I see a real potential in CLI programs written in Elm. Handlebar (or Mustache? :thinking:) is currently used in Elm-spa and im using it for Elm-pen aswell.

Unrelated but related: I originally encountered handlebars at work, where we use the swagger-codegen (which also works for Elm). However, it is a Java project. :thinking: Though technology wise one could replace it with elm-pen - it would work the same way.

Occurs to me that you could use it to statically check a template with handlebars.

Typically in Javascript, a mistake in the handlebars template will be detected at runtime. If you evaluate a handlebars template against a typed Elm model, which is going to supply the value to insert into the template, missing/incorrect values should be detectable at runtime. I guess if you are transforming the handlebars template into Elm code, the Elm compiler will do that checking for you.

Yeah that was also my original idea. But then i came across the lookup function.
This function takes a String as input, converts it into a path and returns the value behind that path.

{{lookup . "key"}}

The result for the json {"key":"name","name":"Elm", "isAwesome": true } would be the string Elm. But for the json {"key":"isAwesome","name":"Elm", "isAwesome": true } it would be the boolean true. How would you type check this?

Out of curiosity (sorry for offtopic), does elm-coverage work well for you or did it take some persuading to work?

Elm-coverage worked like a charm. I have nothing but praise to give.

It worked exactly as I expected. The HTML UI gives you an overview of what needs to be covered, grouped by type of test (case … of, parameter and so on) and file. clicking on one of the fields lets you jump into a more detailed explanation where you can see the same table only now grouped by the functions inside the file. Clicking on it again lets you jump directly into the code and see exactly the things that are currently not covered.

2 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.