babel-plugin-dynamic-i18n

Basic Overview

babel-plugin-dynamic-i18n is a small and powerful plugin to generate localization/internationalization files.

- Use an alias for a function that receives a string as parameter in your code
- Configure the plugin with own options
- During code compilation, get your function observed and strings mapped
- Get a JSON file with key/value of the strings used in your code
- Have your localization files ready for translation

How it works

Babel is a JavaScript compiler, specifically a source-to-source compiler, often called a "transpiler". This means that you give Babel some JavaScript code, Babel modifies the code, and generates the new code back out.

babel-plugin-dynamic-i18n is mostly an observer of the alias function usage in the source code and, as a side-effect, creates new localization files.

This plugin is able to generate one or multiple JSON files, language specific, with the strings used in your source code.

Example

Input

• Source javascript file, regular string with alias function __ (double underscore)

    <StyledSpan>{__('A really important string')}</StyledSpan>

Output

• Localization file with the key/value mapped. Alternatively, include a tag to not forget the translation.

    {
        "A really important string": "A really important string// TODO"
    }

Getting Started

If you want to work with babel-plugin-dynamic-i18n, you can add it to your project as a node dependency, using a node package manager as npm or yarn.

Installing

From the root folder of your project:

$ npm install --save-dev babel-plugin-dynamic-i18n

or, alternatively:

$ yarn add babel-plugin-dynamic-i18n

Usage

Via .babelrc (Recommended)

{
  "plugins": ["babel-plugin-dynamic-i18n", options = {}]
}

Via CLI

babel --plugins babel-plugin-dynamic-i18n index.js

Plugin Options

• Must be an object with some attributes.

{
    outputPath: '/languages', // write new localization files
    todoTag: '// TODO', // tag to be added in the value of the strings, default // TODO
    alias: '__', // plugin observes the usage of this function, default __ (double underscore)
    language: ['de', 'ch', 'pt'] // each language generate a new output file, can be a single string,
    replaceInline: false, // if compiled code should have the key replaced by it's value, default false
}

The code itself has more information about the current flow and usage.

Benchmark testing

To create the translation file with 1000 keys, the plugin takes about 500-700ms in total, when observing default options. Replacing the occurrence directly in file does not affect the time in total.

If we increase the number of keys to 5000, the plugin takes about 7-10s in total, to build the language file.

Features

Key Deletion

Plugin is able to remove keys that are not used anymore in code. This is done by default every time the project is built. If process starters are used with watch file options (webkpack, parcel, hot-reload module), the keys will be deleted only when the process restarts. This happens because all the keys are stored inside babel plugin cache variable, and it is restored after the process starts.

License

This project is licensed under the MIT License - see the LICENSE.md file for details