Internationalization (i18n)

To have multiple languages, let's create an languages folder with multiple JSON files:

en_EN.json:

[
    {
        "hello": "hello"
    }
]

fr_FR.json:

[
    {
        "hello": "salut"
    }
]

Let's create an languages/index.js file

import fr_FR from './fr_FR.json'
import en_EN from './en_EN.json'

export default {
    packages: { en_EN, fr_FR }
}

In the main.js file, import the languages ​​and assign them to the languages property:

import code from './main.converse'
import languages from './languages'

export default {
   code,
   languages
}

In the main.converse scenario:

@Event('start')
start() {
    > hello
}

Depending on the language of the user, it will show "Hello" or "Hi"

On the browser side, the default language is the browser language

In a string

Let's put the symbol # before the text. Example:

@Event('start')
start() {
    myvar = '#hello'
}

With parameters

If the JSON is:

en_EN.json:

[
    {
        "nb message": "you have %d message%p"
    }, 
    {
        "plurial": {
            "p": [
                "s"
            ]
        }
    }
]

The goal is to display the plural according to the number of messages. To add parameters, put a table at the end of the line:

@Event('start')
start() {
    nb = 1
    > nb message [3] // You have 3 messages
    > nb message [nb] // You have 1 message
}

Ask the language

It is possible to assign a language to the user. Why not make a dialogue that asks for language?

@Event('start')
start() {
    Lang.set('fr_FR') // change language
    > Your language : { Lang.name() }
}

Go further The language system is based on Languages.js. You can consult the documentation on https://languages.js.org

Last updated