t (template literals)

Overview

The t function (or template literal tag) is used almost as a simple GNU gettext function but with the possibility to embed some expressions inside template literals.

Live demo

This demo works without transpilation, consider using babel-plugin-ttag for production usage

https://jsfiddle.net/AlexMost/5vu9ep2c/1/

Usage:

import { t } from 'ttag';

function hello(name) {
  return t`Hello ${name}`
}

t format

To make localized strings more clear and reliable for translators there are some restrictions on expressions that can be used inside string template. Here are allowed expressions formats.

Valid:

t`Hello Mike`                       // valid.
t`Hello ${ name }`                  // valid. (identifiers are allowed)
t`simple string ${this.props.name}` // valid. (member expressions are also allowed)

const f = (arg) => {
// multiline strings will be dedented (by default)
// so translators will not see extra tabs or spaces before each line.
  return t`multiline                
    strings                         
    are supported`
}

Invalid:

t`Hello ${getUserName()}` // function calls are not allowed.
t``                       // empty strings are not allowed.
t`${greeting} ${name}`    // strings that does not contain meaningful information are not allowed.

.pot (.po) extraction

Here is an example of what will be extracted to .pot

import { t } from 'ttag';
const name = 'Mike';
console.log(t`Hello ${name}`);

#: src/source.js:8
msgid "Hello ${ name }"
msgstr ""

Resolve translation

From the example above, let's assume that translator added translation to .po file:

#: src/source.js:8
msgid "Hello ${ name }"
msgstr "Hello ${ name } [translated]"

The resulting compiled file will contain this:

import { t } from 'ttag'
const name = 'Mike'
console.log(`Hello ${ name } [translated]`)

If there are no expressions inside template, then ttag will resolve translation as a simple string.

Default resolve

By default, if no translation was found, ttag will just strip t tag before the tagged template.