ZPT-JS reference - I18n expressions

Syntax

tr, trNumber and trDate syntax:

tr_expressions   :: = ('tr:' | 'trNumber:' | 'trDate:') expression (tr_argument_list)
tr_argument_list :: = tr_argument_item [';' tr_argument_item]*
tr_argument_item :: = ICU_key ICU_value
ICU_key          :: = Name
ICU_value        :: = expression
                

trCurrency syntax:

tr_currency_expressions :: = 'trCurrency:' currency expression (tr_argument_list)
currency                :: = expression
                

Description

ZPT-JS provide some expressions to make it easy i18n and l18n. The complete list is:

I18n and L10n support is implemented using standards Intl and ICU.

Differences with ZPT

This statement does not exist in ZPT.

Examples

Some necessary javascript code:

"use strict";

var zpt = require( 'zpt' );

/* I18n maps init */
var msg = {
    en : {},
    es : {}
};

/* English i18n messages */
msg.en[ '/CONF/' ] = {
    language: 'en',
    locale: 'en-US'
};
msg.en[ 'Hello world!' ] = 'Hello world!';
msg.en[ 'Results msg' ] = '{GENDER, select, male{He} female{She} other{They} }' +
    ' found ' +
    '{RES, plural, =0{no results} one{1 result} other{# results} }';
msg.en[ 'Oh, noooo!' ] = 'Error found!';

/* Spanish i18n messages */
msg.es[ '/CONF/' ] = {
    language: 'es',
    locale: 'es-ES'
};
msg.es[ 'Hello world!' ] = '¡Hola mundo!';
msg.es[ 'Results msg' ] = '{ GENDER, select, male{Él} female{Ella} other{Ellos} }' +
    ' ' +
    '{ RES, plural, =0{no } other{} }' +
    '{ GENDER, select, male{ha} female{ha} other{han} }' +
    ' encontrado ' +
    '{ RES, plural, =0{ningún resultado} one{un único resultado} other{# resultados} }';
msg.es[ 'Oh, noooo!' ] = '¡Error encontrado!';

// Create I18n and I18nBundle instances
var i18nES = new zpt.I18n( 'es', msg[ 'es' ] );
var i18nEN = new zpt.I18n( 'en', msg[ 'en' ] );
var i18nBundle = new zpt.I18nBundle( i18nES, i18nEN );

// Init dictionary
var dictionary = {
    'i18nBundle': i18nBundle,
    fireError: function( ){
        document.getElementById("mydiv").innerHTML='Success'; //assuming "mydiv" is undefined
    },
    date : new Date( Date.UTC( 2018, 11, 20, 3, 0, 0 ) ),
    hello: 'Hello world!'
};

// Parse template
zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

Translate using a literal:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span>
</div>
                

Translate using a variable:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="tr: hello">Must be ¡Hola mundo!</span>
</div>
                

Using parameters:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="tr: 'Results msg' ( GENDER 'male'; RES 0 )">Must be 'Él no ha encontrado ningún resultado'</span>
    <span data-content="tr: 'Results msg' ( GENDER 'male'; RES 1 )">Must be 'Él ha encontrado un único resultado'</span>
    <span data-content="tr: 'Results msg' ( GENDER 'female'; RES 10 )">Must be 'Ella ha encontrado 10 resultados'</span>
    <span data-content="tr: 'Results msg' ( RES 0 )">Must be 'Ellos no han encontrado ningún resultado'</span>
</div>
                

Working with numbers:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="trNumber: 1355.23">Must be 1.355,23</span>
    <span data-content="trNumber: 1355.23643 ( maximumFractionDigits 3 )">Must be 1.355,236</span>
    <span data-content="trNumber: 1355.23643 ( maximumFractionDigits 3; minimumIntegerDigits 6 )">Must be 001.355,236</span>
</div>
                

Currencies:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="trCurrency: 'EUR' 1355.23">Must be 1.355,23 €</span>
    <span data-content="trCurrency: 'USD' 1355.23">Must be 1.355,23 $</span>
    <span data-content="trCurrency: 'EUR' 1355.23 ( currencyDisplay 'name' )">Must be 1.355,23 euros</span>
    <span data-content="trCurrency: 'USD' 1355.23 ( currencyDisplay 'name' )">Must be 1.355,23 dólares estadounidenses</span>
</div>
                

Datetimes:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="trDate: date">Must be 20/12/2012</span>
    <span data-content="trDate: ( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) )">Must be 20/12/2012</span>
    <span data-content="trDate: date ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric' )">Must be jueves, 20 de diciembre de 2012</span>
    <span data-content="trDate: ( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) ) ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric' )">Must be jueves, 21 de diciembre de 2012</span>
    <span data-content="trDate: date ( hour 'numeric'; minute 'numeric'; second 'numeric' )">Must be 4:00:00</span>
    <span data-content="trDate: date ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric'; hour 'numeric'; minute 'numeric'; second 'numeric' )">Must be jueves, 21 de diciembre de 2012 4:00:00</span>
</div>
                

Translating errors:

<div data-language="'es'" data-domain="i18nBundle">
    <div data-on-error="tr: 'Oh, noooo!'">
        <span data-content="fireError()">Must fire error and then: ¡Error encontrado!</span>
    </div>
</div>