Piral-translate NPM

Piral Translate ·

This is a plugin that only has a peer dependency to piral-core. What piral-translate brings to the table is a set of Pilet API extensions that is used by piral. The set features a simple yet sufficient translation system.

Why and When

One of the key non-functional requirements of many applications is to be localizable. While this area contains many parts such as potential conversion of currency, number formats etc., one elementary part is the translation of labels and text fragments. There are many solutions out there, but piral-translate brings a quite simplified model to the table that works in a distributed way, yet is simple and allows going from proof of concept (language snippets included in the pilets) to massive application later on (language snippets gathered from a dedicated service).

Alternatives: Use a library such as i18next as a shared library. Choose one that makes working with your content authors or translation team easier.

Video

We also have a video for this plugin:

@youtube

Documentation

The following functions are brought to the Pilet API.

`translate()`

Returns the translation (i.e., a string defined for the currently selected language) of a provided language key.

Variables can also be provided using an object as the second argument. The variable replacement looks for occurrences of double curly braces, e.g., {{foo}}.

`setTranslations()`

Sets the translations (custom language to key to string mapping) for the pilet.

`getTranslations()`

Gets the translations defined in the pilet.

`addTranslations()`

Adds a list of translations (custom language to key to string mapping) to the existing translations for the pilet.

Usage

::: summary: For pilet authors

You can use the setTranslations function from the Pilet API to set predefined translation snippets.

Example use:

import { PiletApi } from '<name-of-piral-instance>';

export function setup(piral: PiletApi) {
  piral.setTranslations({
    en: {
      home: 'home',
    },
    de: {
      home: 'zuhause',
    },
  });
}

You can use the getTranslations function from the Pilet API to get the currently defined translation snippets.

Example use:

import { PiletApi } from '<name-of-piral-instance>';

export function setup(piral: PiletApi) {
  const translations = piral.getTranslations();
  // received: { "en": { "home": "home" }, "de": { "home": "zuhause" }}
}

You can use the translate function from the Pilet API to obtain a translation string for a given key using the currently selected language.

Example use:

import { PiletApi } from '<name-of-piral-instance>';

export function setup(piral: PiletApi) {
  const homeStr = piral.translate('home'); // if in "de" -> "zuhause"
}

:::

::: summary: For Piral instance developers

The provided library only brings API extensions for pilets to a Piral instance.

For the setup of the library itself you'll need to import createLocaleApi from the piral-translate package.

import { createLocaleApi } from 'piral-translate';

The integration looks like:

const instance = createInstance({
  // important part
  plugins: [createLocaleApi()],
  // ...
});

Via the options the available languages, translations, as well as the currently selected language can be chosen.

For example:

const localizer = setupLocalizer({
  language: 'en',
  messages: {
    en: {
      'greeting': 'Hello',
    },
    de: {
      'greeting': 'Hallo',
    },
  },
});

const instance = createInstance({
  // important part
  plugins: [createLocaleApi(localizer)],
  // ...
});

Alternatively, the current language can also be inferred via a function.

const localizer = setupLocalizer({
  language: getUserLocale,
  messages: {
    en: {
      'greeting': 'Hello',
    },
    de: {
      'greeting': 'Hallo',
    },
  },
});

The function getUserLocale retrieves either the cookie with name _culture or local storage value for key locale. In any case either the first found language or ultimately en is used as a fallback.

Piral Translate ·

Why and When

Video

Documentation

translate()

setTranslations()

getTranslations()

addTranslations()

Usage

License

`translate()`

`setTranslations()`

`getTranslations()`

`addTranslations()`