Localization in Polymer?

Question

I'm going to create a webapp with Polymer. For that webapp I need localization. Is there a Polymer way to do localization? Has anyone ever done localization in a Polymer webapp?

Depalma

I use L20n. Check here:#35677698 – Alberto

Answer 1

I created an implementation on my own. Looking what I made it's not that difficult to do.

Depalma

can you add anything which you did as a part of implementation? – Cystectomy

Answer 2

I18n and l10n are also on my to-do list. Currently i'm porting an app from AngularJS to Polymer. The back-end is Ruby on Rails. I use the i18n-js gem which converts the Rails translation files (en.yml, de.yml and so on) into one big JavaScript file containing an I18n object with all the translations. This gem also provides a JavaScript library for performing text translations and value localizations. But there are other JavaScript libraries providing a similar functionality.

The current locale is set from the response of a HTTP request, returning the users Accept-Language header.

Nothing Polymer specific up to this point.

I then created a bunch of global Polymer expression filters that perform the various locale transformations on their input strings. This is the same method as the one that i've learned to use in an AngularJS application. The translation filter looks like follows (I18n.t is the translation function of the JavaScript library)

PolymerExpressions.prototype.i18n = function(key) {
  return I18n.t(key);
};

and is used like so

<paper-button label="{{ 'action.help' | i18n }}"></paper-button>

A date localization may be written as

{{ someDate | i18n_date('short') }}

I packaged the i18n filters and additional helper functions into a Polymer element, so I can also include this element in another element and use the translation functions from within it's JavaScript code.

The i18n element is also include in my main app element where it initializes the I18n library and sets the default and current locale.

Tightwad

This looks great ! Will you put your package on GitHub ? – Eckman

@dirk this sounds great. Can you share the code with the world? There is not much out there at the moment. – Collard

Answer 3

Use Polymer.AppLocalizeBehavior

https://github.com/PolymerElements/app-localize-behavior

I am using this behavior in PWA Template for locales per custom element.

https://github.com/StartPolymer/progressive-web-app-template

Conga

Most of these answers are out of date. AppLocalizeBehavior is the official way to do i18n in polymer 1.0/2.0. Check the localization page from the project website for more info: polymer-project.org/2.0/toolbox/localize – Fulks

Answer 4

Not being aware of a Polymer-way doing i18n, I suggest doing that server-side.

In case the framework is Spring, I would implement the custom elements as jsp, and handle the i18n as usual with the <spring:message /> tags.

Only caveat is that switching the language of the application would require a complete reload. But as language switching is usually not done often, I don't think of this as a problem.

Remonaremonetize

Answer 5

For Polymer 1.0 I just published a simple (heavily in development) element (see it on gitlab or read about it here). It loads the translation files asynchronously and the usage is fairly simple:

<!-- Import it in head -->
<link rel="import" href="bower_components/quaintous-i18n/quaintous-i18n.html">
<!-- initialize it in body -->
<quaintous-i18n locales-path="/locales/fa.json"></quaintous-i18n>

Now you can use it in various ways:

• In computed properties: just add I18N as your element behavior and translate your data bindings, e.g. {{__('hello')}}
• In global context just use I18N object, e.g. I18N.__('hello')

Gosling

Answer 6

I implemented a different way of doing it even though there is AppLocalizeBehavior which seem to do it pretty well. I created a locale.json file with a list of languages, name of the page for which data was needed and then the data to be displayed.

{
"en": {
"loginPage"       : {
  "login"           : "Log in",
  "loginUserid"     : "Enter user id",
  "loginPassword"   : "Enter password"
},
},
"nl": {
"loginPage"       : {
  "login"           : "Log in",
  "loginUserid"     : "Voer gebruikers-ID in",
  "loginPassword"   : "Voer wachtwoord in"
},
},
}

I created a translate component which has the responsibility of setting the language in the local-storage (though it needs a bit of refactoring and I could use navigator object for getting the language) as well as get data from the locale.json. This looked like this:

class Translate extends 
Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
        static get is() { return 'translate'; }


        static get properties() {
            return {
                language: {
                    type: String,
                    value: 'nl',
                    notify: true
                },
                resources: {
                    type: Object,
                    notify: true
                }
            }
        }

        ready() {
            super.ready();
            if (localStorage.length) {
                if (localStorage.getItem('language')) {
                    this.language = localStorage.getItem('language');
                }
                else {
                    localStorage.setItem('language', this.language);
                }
            } else {
                localStorage.setItem('language', this.language);
            }

        }

        attached() {
            this.loadResources(this.resolveUrl('locales.json'));
        }

    }

    window.customElements.define(Translate.is, Translate);

Now you can utilize this custom element inside your root or app shell of the application

<translate 
class="translate" 
language="{{language}}" 
resources="{{resources}}">
</translate>

Put an observer on your resources property and get the data from your locale.json. Now based on different pages pass only the translation values which are needed for that page. page-values being the values of the translation strings like this:

<login-form 
        title='Login' 
        name="login" 
        page-values="[[pageValues.loginPage]]" 
        login-success="[[_loginSuccess]]"
        api={{apiCollection.login}}></login-form>

Hope this helps.

Cystectomy