HTML entities in templates render incorrectly

[benjamminf]

Using HTML entities like → in Monkberry templates are encoded incorrectly. For example, instead of → showing →, it shows →.

I'm compiling templates using the webpack loader.

[antonmedv]

Looks like working for me. Can you show online example?

[benjamminf]

Looking at the compiled files I see nothing wrong with Monkberry. It outputs something like h0.appendChild(document.createTextNode("→ Hello")), which looks fine. But apparently embedding entities like this doesn't seem to play nice in Javascript. Running console.log('→ Hello') outputs the same broken string. The only way I can actually get the entity in the DOM correctly is to use .innerHTML = '→' instead.

Oddly enough, running the same code in JSFiddle, it outputs fine. I wonder if this has something to do with my environment. But I've tried Chrome on both Windows 10 and OSX, as well as Edge, Firefox and Safari. I've also tried compiling the project on both Windows and OSX.

I can't seem to find anything in Google about this either. I must be going insane haha. Either way, it's likely not an issue with Monkberry.

[benjamminf]

Okay, it turns out my files are being saved in UTF-8 encoding, when they need to be saved as Unicode. I'm not sure how to set this as a default encoding when compiling with webpack... I'm looking into it.

[antonmedv]

Nice. If tell me how you solve this. :+1:

[benjamminf]

Oh... I'm an idiot. I forgot my character set meta tag in my HTML. Adding <meta charset="UTF-8"> in the head solves this.

Carry on.