https://github.com/vinhlh/tagged-translations

A dead simple babel-plugin for translating texts in React applications
https://github.com/vinhlh/tagged-translations

babel-plugin babel-plugin-macros es6 i18n react translation

Last synced: 3 months ago
JSON representation

A dead simple babel-plugin for translating texts in React applications

• Host: GitHub
• URL: https://github.com/vinhlh/tagged-translations
• Owner: vinhlh
• License: mit
• Created: 2017-07-26T07:52:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-24T08:46:32.000Z (almost 7 years ago)
• Last Synced: 2024-10-28T05:52:11.072Z (3 months ago)
• Topics: babel-plugin, babel-plugin-macros, es6, i18n, react, translation
• Language: JavaScript
• Size: 95.7 KB
• Stars: 63
• Watchers: 4
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - tagged-translations - plugin for translating texts in React applications | vinhlh | 58 | (JavaScript)

README

        
# tagged-translations

[![Build Status](https://img.shields.io/travis/vinhlh/tagged-translations.svg?style=flat-square)](https://travis-ci.org/vinhlh/tagged-translations) [![npm](https://img.shields.io/npm/v/tagged-translations.svg?style=flat-square)](https://www.npmjs.com/package/tagged-translations) [![Coverage Status](https://img.shields.io/coveralls/github/vinhlh/tagged-translations.svg?style=flat-square)](https://coveralls.io/github/vinhlh/tagged-translations?branch=master) [![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-plugin-macros)

A dead simple `babel-plugin` for translating texts in React applications.

Input

```js

  {t`Hello ${name}!`}

```

Output

```js

  {`Xin chào ${name} 🤣!`}

```

## Features

- Build time translation: build app with minimal footprint.

- Based on ES6 tagged template literals: really helpful for readability/ maintaination/ integrations.

- Translations are configured in a JSON file.

## Usage

Install

`yarn add --dev tagged-translations`

then configure

### Via `.babelrc`

```js

{

  "plugins": [

    ["tagged-translations", {

      "translationFile": "./translation.json",

      "tagName": "t"

    }]

  ]

}

```

- `translationFile`: the location of translation json.

- `tagName`: translation tag name. Default: `t`.

### Via `babel-plugin-macros`

```js

{

  "plugins": ["macros"]

}

```

then import the macro and use it.

```js

import t from 'tagged-translations/macro';

const name = 'Vinh Le';

t`Hello ${name}`;

```

### Multiple translations

In order to support multiple translations, we could specify the translation file based on an environment variable in the build time.

```js

// babel-plugin-macros.config.js

const { REACT_APP_LANGUAGE: language } = process.env

module.exports = {

  taggedTranslations: {

    tagName: 't',

    translationFile: `./src/translations/buildTime/${language}.json`

  }

}

```

## Contributing

- Run all tests

`yarn test:dev`

## Notes

- We don't cover 100% cases: don't support `\n` characters.