Skip to content

Instantly share code, notes, and snippets.

@rev087
Last active June 16, 2016 04:40
Show Gist options
  • Save rev087/21652eaf89baa8e96f14eb36d44842d8 to your computer and use it in GitHub Desktop.
Save rev087/21652eaf89baa8e96f14eb36d44842d8 to your computer and use it in GitHub Desktop.
Angular 2 i18n module idea
{
"login-with": "Login with {r0}",
"try-without-acc": "Try without an account",
"new-notifications": {
"string": "You have {p0}",
"plural": {
"p0": { "zero": "no notifications", "one": "one notification", "other": "# notifications"}
}
},
"found-x-in-nth-cat": {
"string": "{s0} found {p1} in the {o2} category",
"s0": {"male": "He", "female": "She", "multiple": "They"},
"p1": {"zero": "no results", "one": "one result", "other": "# results"},
"p2": {"one": "#st", "two": "#nd", "few": "#rd", "other": "#th"}
}
}
{
"login-with": "Entrar com {r0}",
"try-without-acc": "Experimentar sem logar",
"new-notifications": {
"string": "Você {p0}.",
"p0": {
"zero": "não tem nenhuma notificação",
"one": "tem uma notificação",
"other": "tem # noficicações"
}
},
"found-x-in-nth-cat": {
"string": "{s0} {p1} in the {o2} category.",
"s0": {"male": "Ele {p1.0} encontrou", "female": "Ela {p1.0} encontrou", "other": "Eles %p1.0 encontraram"},
"p1": {"zero": "nenhum resultado", "one": "um resultado", "other": "# resultados"},
"p1.0": {"zero": "não", "other": ""},
"p2": {"other": "#ª"}
}
}

tldr: ng2-translate, but with positional instead of named arguments, and the support for pluralization, ordinals and a "switch statement" from MessageFormat, with a simpler JSON format that does away with the need for a parser.


Translations are stored in JSON format.

Each translation is stored and retrieved with a key.

Translations can use positional placeholders to be replaced by variables, which are passed as an array of String and/or Number values.

The {r0} placeholder is replaced with the first value from the input array, the {r1} is replaced with the second and so on.

Besides simple replacement, there are other three special placeholders: The Plural placeholder {p0}, the Ordinal placeholder {o0} and the Select or Switch placeholder {s0}. These are inspired by @SlexAxton/messageformat.js, and use the same ICU keys where applicable (zero, one, two, few, many, other).

When the Plural placeholder {p0} is used, the translation file can provide nouns for the appropriate ICU keys (zero, one, many etc.)

For the Selector or Switch placeholder {s0}, the translation file can provide a map of arbitrary keys and values.

Finally, for the Ordinal placeholder {o0}, the translation file can provide the appropriate ordinal number translations.

In addition to the placeholders in the translated string, values passed to the Plural, Selector/Switc and Ordinal placeholders can themselves contain Nested Placeholders in the format {(p|s|o)<input_index>.<arbitrary_key>}. For example: {p0.1}.

An Angular service would be provided to select and load language JSON files, as well as a simple translate(msg:string, input:Array) method.

A TranslatePipe could be provided as well, mimicking @ocombe/ng2-translate:

@Compoenent({
  template: `
    <div class="notifications">{{ "new-notifications" | translate[unreadNotifications.length] }}</div>
    
    <a (click)="loginWithGoogle()">{{ "login-with" | translate["Google"] }}</a>
    <a (click)="loginWithGitHub()">{{ "login-with" | translate["GitHub"] }}</a>
    
    <div class="assistant-research-results">
      {{ "found-x-in-nth-cat" | tanslate[assistant.gender, results.length, category.index] }}
    </div>
  `
})

This gist includes the example translation files en.json and pt.json. Note that in the Portuguese translation, one of the replacement values required a Nested Replacement, written as {p1.0}.

@nolazybits
Copy link

nolazybits commented Jun 16, 2016

Saw you message on gitter. Super keen to help if need be. Didn't see anything for angular2 yet.
Did one i18n back for ng1: https://github.com/nolazybits/angular-i18n

@rev087
Copy link
Author

rev087 commented Jun 16, 2016

As rob mentioned, there is a work in progress for built-in i18n in Angular 2 angular/angular#9104

Right now I don't have the slightest idea on how it will look like, but pretty much every capability I've described seem to have been at least discussed, and much more. I'll keep an eye out for any official announcements, but if they take a while to release anything, it might be worth making this happen :)

@nolazybits
Copy link

sweet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment