Polymer localization

[david radley]

Hello,

I am looking to localize my Polymer app. I have looked at AppLocalizeBehaviour and see that it works in one of 2 ways. Either you inline the resources as a property or it issues an Ajax call to access a resources file in the server using loadResources. My server requires an authentication token on all rest calls - so the resources Ajax call is rejected .

I then issued the rest call myself with the auth token to get the resources from the server, but have not found a way to update the resources property in such a way that the localise picks it up. The example shows <div>{{localize('hello', 'name', 'Batman')}}</div>    .

This does not pick up the resource property. I have an observer on the resources property and see that it is changing after the page is loaded - but I do not know how to get the resources into the localise method. I have access to this.localise function in my observer but it does not seem to accept any parameters and returns undefined.

I then tries to install formatjs - by installing intl and formatjs npm packages - but my build fails, so did not get the underling libraries to work. 

Any thoughts , all the best,   David   

[Juan Lorenzo Llanes]

Hi David

You can use @appnest/lit-translate that works fine in polymer 3 with lit-element and change the "registerTranslateConfig" to load the resourcebundle using an authentication token and pre-process the result to the locale object

example:

registerTranslateConfig({


  loader: lang => fetch(
    url, //your api url that response with the json locales
    {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        },
    }).then(
        res => res.json()
    )
});

[david radley]

Thanks Juan,

I have one component that I am using to wrapper an iron-ajax call to add the token Do you think there is a way to use my component with lit-translate?  It would be architecturally nice to have one component that does all the rest calls, all the best, David.