Does not translate within Handlebars template

[mgurnani]

Hello, I have successfully used this plugin with HTML files. I am now trying to use this with Handlebars template files. However I am seeing that the translation isn't taking place - it displays the original value itself.

In my handlebars I have : <li><a id="menuMyOrg" data-toggle="modal">__(Header.TopMenu1.MyOrganization.Title)</a></li>

When I build with webpack, and load the HTML, it shows the same value in the list. __(Header.TopMenu1.MyOrganization.Title)

I do have a json which has the key defined :

{
  "Header.TopMenu1.MyOrganization.Title" : "My Org"
}

[mightyaleksey]

@mgurnani Hi,

Can you provide a minimal reproducible test repo to look into it?

[mgurnani]

@sullenor Sure. Give me some time to create and share it.. Thanks !

[mgurnani]

Here's a test repo : https://github.com/mgurnani/Handlebars-Test.git

[mgurnani]

@sullenor Just wanted to check if you could suggest any workaround to get this working till there's a fix?

[mightyaleksey]

@mgurnani Finally I checked it and here are my thoughts about it.

Problem

During the compilation webpack usually run all the code through the loaders first (in order to get a valid js code), so it can be parsed after and plugins can make the modifications.

So the handlebars-loader does the precompilation and turns the templates into the string literals. Also adds necessary deps and templating function calls.

module.exports = (Handlebars["default"] || Handlebars).template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
    return "<a id=\"menuMyOrg\" data-toggle=\"modal\">${__(\"Header.TopMenu1.MyOrganization.Title\")} HB</a>";
},"useData":true});

The i18nPlugin expects to find the __ function calls in order to make the replacements. Since the desired calls are a part of a string — it actually doesn't find it.

Solution

I think you may use the handlebars paths here (the {{variable}} thing). Not convenient, but will work. Referring your example, you should place a context variable to the template:

<a id="menuMyOrg" data-toggle="modal">{{text}} HB</a>

and add the context to the template invocation:

$(document).ready(function () {
    $("#content").append(exampleTemplate({text: __('Header.TopMenu1.MyOrganization.Title')}))
});

p.s. thank you for the repo :)

[mgurnani]

@sullenor Thanks for looking into it !! I already built a workaround on the similar lines. The problem here would be how to pass many strings at once. What I did was to create a separate function which loads the i18n strings and then sets it in a placeholder. This placeholder is then passed in the template.. I will update the repo with the latest code and you can take a look and see if it can be improved further.. I will close this issue and we can continue just the discussion here..