Babel-based JS/JSX auto-translator for Russian source code
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Vitaliy Filippov 8eb8527f94 Fix "0" substitutions 4 weeks ago
__tests__ Add a test 4 weeks ago
COPYING Add COPYING (LGPL-3.0) 4 weeks ago Add README 4 weeks ago
index.js Remove empty arrays 4 weeks ago
package.json Fix "0" substitutions 4 weeks ago
plural_ru.js Add license headers 4 weeks ago
runtime.js Fix "0" substitutions 4 weeks ago

Automatic Babel-based Translation Generator for JS/JSX

The idea: Writing software in Russian is cool because Cyrillic letters differ from Latin. This means you can extract all strings that need localisation automatically, without manually wrapping all messages into _() or <LocalizedMessage /> or anything else.

The same is also true for other languages with an alphabet different from Latin. :)

This Babel plugin implements this idea in practice.


First install the plugin and include it into your Babel configuration. For example, in .babelrc:

{ ..., "plugins": [ ..., "react-translate" ] }

Or, if you want to specify options:

{ ..., "plugins": [ ..., [ "react-translate", { "output": "strings.json", "regexp": "[А-ЯЁа-яё]" } ] ] }

Then build your project as usual.

The plugin extracts all strings that match the given regexp and puts them into the file specified by the output option (react-translate-output.json by default), relative to the build root (directory containing package.json).

At the same time, the plugin replaces extracted strings with L("message", param1, ..., paramN) function calls in the compilation result.

Now you just have to look into strings.json, translate strings from it into desired languages and feed them to the plugin at runtime with:

import { L, setLanguage, setFallback, setStrings } from 'babel-plugin-react-translate/runtime';

setStrings('en', { "Автор": "Author" });

// Now L() will translate Автор into Author:
L("Автор") == "Author";

Type of strings.json contents is { [filename: string]: string[] } (TS). I.e. it contains a JSON object with keys equal to source file names and values equal to arrays of strings found in the corresponding file.

The plugin handles the following cases:

  1. Simple string literals: 'Привет' becomes L("Привет").
  2. Template literals: `Привет, ${name}!` becomes L("Привет, {1}!", name).
  3. Concatenated string literals: 'Привет, '+name+'!' also becomes L("Привет, {1}!", name).
  4. JSX text: <span>Привет!</span> becomes <span>{L("Привет!")}</span>.

You can also use L() manually to handle more complex scenarios.

Plural Forms

L() supports pluralisation, the syntax is {N:<arg>:<one>:<few>:<many>} (Russian and other languages have different plural forms for "few" (2-4) and "many" objects). Example:

L("У меня {1} {N:1:брат:брата:братьев}!", 155)

You can also use it manually:

import { plural } from 'babel-plugin-react-translate/runtime';

console.log(plural(155, 'брат', 'брата', 'братьев'));

License and author

Author: Vitaliy Filippov, 2021+

License: GNU LGPLv3.0