Pure JS interface

[tricoder42]

React components are great because they care of updates after language/message changes. However, sometimes it's necessary to get string directly instead of React node tree, e.g: for element attributes, document.title, etc. Sometimes it needs to be done even out of the ProvideI18n context, e.g. inside sagas (from redux-saga).

Phase 1 - Translation of raw ICU message format

const i18n = require('lingui-i18n')

// i18n.use(language: string, catalog: {[key: string]: string})
i18n.use('fr', {
    "Hello World": "Salut le Monde",
    "Hello, my name is {name}": "Salut, je m'appelle {name}"
})

// i18n.t(message: string, params: ?object): string
const translated = i18n.t('Hello world')
const withParams = i18n.t('Hello, my name is {name}', params={ name })

// i18n.compile(message: string): (params: ?object) -> string
const compiled = i18n.compile('Hello, my name is {name}')
compiled({ name })

This is the easiest use case. The only problem might be how to load messages into global object. Optionally add an API for precompiled messages.

This option isn't interesting at all, because many other libs already provides such functionality, but it's simple enough to keep it as a backup.

Implementation

• i18n.use
• i18n.t
• i18n.compile

Phase 2 - ICU message format helper functions

Provide helper functions which mimic behavior of React components. Something like DSL for ICU message format:

const withParams = i18n.t`Hello, my name is ${name}`
const pluralize = i18n.plural({
    value: count,
    one: "# Book",
    other: "# Books"
})
const complex = i18n.select({
    value: gender,
    female: plural({
        value: numOfHosts,
        offset: 1,
        0: t`${host} does not give a party`,
        1: t`${host} invites ${guest} to her party`,
        2: t`${host} invites ${guest} and one other person to the party`,
        other: t`${host} invites ${guest} and # other people to his party`
    }),
    male: plural({...}),
    other: plural({...})
})

// "It happened {0, date, relative}"
const formats = i18n.t`It happened ${i18n.format.relative(value)}`

• Does it require to use babel transformation to make it work? Or better question: What DSL doesn't require babel transformation? Yes
• Does it makes writing messages easier than raw ICU message format? Type-checking, custom formats

Implementation

• i18n.t
• i18n.plural
• i18n.select
• Nesting
• Custom formats

[tricoder42]

Variable names

Tagged template literals don't provide name of variables passed in, so it's not possible to get Hello {name} instead of Hello {0}. One solution might be provide wrapper for parameters, like:

// "Hello {name}"
i18n.t`Hello ${i18n.var({ name })}`
// or
i18n.t`Hello ${{ name }}`

or pass variable inside object 🎉

Both options might be possible:

i18n.t`Hello ${name}` // => Hello {0}
i18n.t`Hello ${{ name }}` // => Hello {name}