-
-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #563 from aurelia/i18n-service
feat(i18n): core translation service and related auxiliary features
- Loading branch information
Showing
47 changed files
with
3,403 additions
and
263 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,5 @@ | ||
| <template> | ||
| <div>${message}</div> | ||
|
|
||
| <!-- <button id="locale-changer-de" click.delegate="changeLocale('de')">DE</button> | ||
| <button id="rt-changer" click.delegate="changeMyDate()">Change my date</button> --> | ||
|
|
||
| <span id="i18n-simple" t="simple.text"></span> | ||
| <!-- <span id="i18n-attr" t="[title]simple.attr">attribute test</span> | ||
| <span id="i18n-multiple-attr" t="simple.text;[title]simple.attr"></span> | ||
| <span id="i18n-multiple-attr-same-key" t="simple.text;[title,data-foo]simple.attr"></span> | ||
| <span id="i18n-nested" t="$t(simple.text) $t(simple.attr)"></span> | ||
| <span id="i18n-ctx" t="status"></span> | ||
| <span id="i18n-ctx-dispatched" t="status" t-params.bind="{context: 'dispatched', date: dispatchedOn}"></span> | ||
| <span id="i18n-ctx-delivered" t="status" t-params.bind="{context: 'delivered', date: deliveredOn}"></span> | ||
| <span id="i18n-interpolation" t="status_delivered" t-params.bind="{date: deliveredOn}"></span> | ||
| <span id="i18n-interpolation-custom" t="custom_interpolation_brace" | ||
| t-params.bind="{date: deliveredOn, interpolation: { prefix: '{', suffix: '}' }}"></span> | ||
| <span id="i18n-interpolation-es6" t="custom_interpolation_es6_syntax" | ||
| t-params.bind="{date: deliveredOn, interpolation: { prefix: '${', suffix: '}' }}"></span> | ||
| <span id="i18n-items-plural-0" t="itemWithCount" t-params.bind="{count: 0}"></span> | ||
| <span id="i18n-items-plural-1" t="itemWithCount" t-params.bind="{count: 1}"></span> | ||
| <span id="i18n-items-plural-10" t="itemWithCount" t-params.bind="{count: 10}"></span> | ||
| <span id="i18n-interval-0" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 0}"></span> | ||
| <span id="i18n-interval-1" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 1}"></span> | ||
| <span id="i18n-interval-2" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 2}"></span> | ||
| <span id="i18n-interval-3" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 3}"></span> | ||
| <span id="i18n-interval-6" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 6}"></span> | ||
| <span id="i18n-interval-7" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 7}"></span> | ||
| <span id="i18n-interval-10" t="itemWithCount_interval" t-params.bind="{postProcess: 'interval', count: 10}"></span> | ||
| <span id="i18n-html" t="[html]html"></span> | ||
| <span id="i18n-prepend-append" t="[prepend]pretest;[append]post-test">Blue</span> | ||
| <img id="i18n-img" t="imgPath" /> | ||
| <span id="i18n-t-vc"> ${'itemWithCount' | t : {count: 10}} </span> | ||
| <span id="i18n-t-bb"> ${'itemWithCount' & t : {count: 100}} </span> | ||
| <span id="i18n-nf-vc"> ${ 123456789.12 | nf : undefined : locale} </span> | ||
| <span id="i18n-nf-bb"> ${ 123456789.12 & nf : undefined : 'de'} </span> | ||
| <span id="i18n-nf-vc-cur"> ${ 123456789.12 | nf: {style:'currency', currency: 'EUR' } : 'de' } </span> | ||
| <span id="i18n-nf-bb-cur"> ${ 123456789.12 & nf: {style:'currency', currency: 'USD' } : locale } </span> | ||
| <span id="i18n-df-vc"> ${ dispatchedOn | df : undefined : locale} </span> | ||
| <span id="i18n-df-bb"> ${ dispatchedOn & df : undefined : 'de'} </span> | ||
| <span id="i18n-rt-vc"> ${ myDate | rt} </span> | ||
| <span id="i18n-rt-bb"> ${ myDate & rt} </span>--> | ||
|
|
||
| <!-- translations via code --> | ||
| <!-- <div> | ||
| <span id="i18n-code-simple">${translations.simple}</span> | ||
| <span id="i18n-code-context">${translations.context}</span> | ||
| <span id="i18n-code-plural">${translations.plural}</span> | ||
| <span id="i18n-code-interval">${translations.interval}</span> | ||
| <span id="i18n-code-num">${translations.num}</span> | ||
| <span id="i18n-code-num-uf-simple">${translations.numUfSimple}</span> | ||
| <span id="i18n-code-num-uf-locale">${translations.numUfLocale}</span> | ||
| <span id="i18n-code-num-uf-currency">${translations.numUfCurrency}</span> | ||
| <span id="i18n-code-num-uf-text">${translations.numUfText}</span> | ||
| <span id="i18n-code-num-uf-minus">${translations.numUfMinus}</span> | ||
| <span id="i18n-code-date">${translations.date}</span> | ||
| <span id="i18n-code-rtime">${translations.rtime}</span> | ||
| </div> | ||
| <custom-message data-test-id="custom-element-interpolated" message="${'simple.text' | t}"></custom-message> | ||
| <custom-message data-test-id="custom-element-target-bindable" t="[message]simple.text"></custom-message> | ||
| <custom-message data-test-id="custom-element-with-params" t="[message]itemWithCount" t-params.bind="{count: 0}"> | ||
| </custom-message> | ||
| <span data-test-id="missing-key" t="missing-key">non-translated text</span> --> | ||
| <sut-i18n></sut-i18n> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { bindable, customElement } from '@aurelia/runtime'; | ||
|
|
||
| @customElement({ | ||
| name: 'custom-message', | ||
| template: `<div>\${message}</div>` | ||
| }) | ||
| export class CustomMessage { | ||
| @bindable public message: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { I18N, I18nService, RT_SIGNAL } from '@aurelia/i18n'; | ||
| import { customElement, ISignaler } from '@aurelia/runtime'; | ||
| import template from './sut-i18n.html'; | ||
| import { Locale } from './translation-resources'; | ||
|
|
||
| @customElement({ name: 'sut-i18n', template }) | ||
| export class SutI18N { | ||
| public obj = { key: 'simple.text', foo: 'bar' }; | ||
| public dispatchedOn = new Date(2020, 1, 10, 5, 15); | ||
| public deliveredOn = new Date(2021, 1, 10, 5, 15); | ||
| public params = { context: 'delivered', date: this.deliveredOn }; | ||
| public translations: { [key: string]: string | number }; | ||
| private readonly myDate: Date; | ||
| private locale: Locale; | ||
| constructor( | ||
| @I18N private readonly i18n: I18nService, | ||
| @ISignaler private readonly signaler: ISignaler | ||
| ) { | ||
| this.locale = this.i18n.getLocale() as Locale; | ||
| this.myDate = new Date(); | ||
| this.myDate.setHours(this.myDate.getHours() - 2); | ||
|
|
||
| this.translations = { | ||
| simple: this.i18n.tr('simple.text'), | ||
| context: this.i18n.tr('status', { context: 'dispatched', date: this.dispatchedOn }), | ||
| plural: this.i18n.tr('itemWithCount', { count: 10 }), | ||
| interval: this.i18n.tr('itemWithCount_interval', { postProcess: 'interval', count: 10 }), | ||
|
|
||
| num: this.i18n.nf(123456789), | ||
| numUfSimple: this.i18n.uf('123,456,789.12'), | ||
| numUfLocale: this.i18n.uf('123.456.789,12', 'de'), | ||
| numUfCurrency: this.i18n.uf('$ 123,456,789.12'), | ||
| numUfText: this.i18n.uf('123,456,789.12 foo bar'), | ||
| numUfMinus: this.i18n.uf('- 123,456,789.12'), | ||
|
|
||
| date: this.i18n.df(this.deliveredOn), | ||
| rtime: this.i18n.rt(this.myDate) | ||
| }; | ||
| } | ||
| public changeKey() { | ||
| this.obj.key = 'simple.attr'; | ||
| } | ||
|
|
||
| public changeParams() { | ||
| this.params = { ...this.params, context: 'dispatched' }; | ||
| } | ||
| public async changeLocale(locale) { | ||
| await this.i18n.setLocale(locale); | ||
| this.locale = locale; | ||
| } | ||
|
|
||
| public changeMyDate() { | ||
| this.myDate.setFullYear(this.myDate.getFullYear() - 1); | ||
| this.signaler.dispatchSignal(RT_SIGNAL); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import * as de from '../locales/de/translations.json'; | ||
| import * as en from '../locales/en/translations.json'; | ||
|
|
||
| export const resources = { | ||
| en: { translation: en['default'] }, | ||
| de: { translation: de['default'] }, | ||
| }; | ||
|
|
||
| export type Locale = keyof typeof resources; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.