search

evenchange4 / react-intl-po

:rocket: Extract POT from react-intl and convert back to json.
MIT License
89 stars 23 forks source link
babel-plugin-react-intl po2json pot react-intl

readme

react-intl-po

Extract POT from react-intl and convert back to json.

messages.json → POT → PO → translation.json

Travis Codecov Status npm package npm downloads

Dependency Status devDependency Status peerDependency Status

license prettier

Tutorial

Please take a look at standalone repo based on Create-React-App: https://github.com/evenchange4/react-intl-po-example

Installation

$ yarn add react-intl-po

Requirements and Workflow

RIP Workflow

Usage

There are two sub-commands of react-intl-po or rip:

  1. json2pot: Convert the json files extracted from babel-plugin-react-intl into one .pot file.
  2. po2json: Convert translated .po files back to .json format.

json2pot

$ rip json2pot '_translations/src/**/*.json' \
    -o ./mcs-public.pot
Arguments Description
srcPatterns The pattern of .json files extracted from babel-plugin-react-intl
-o, --output <path> The output pathname of .pot file to be translated
-k, --message-key [key] [Optional] Translation message key (default key is defaultMessage)
-c, --message-context [context] [Optional] Translation message context (defaults to no context)

po2json

Case 1: Output one file per locale if a directory is set

$ rip po2json './node_modules/mcs-translation/po/mcs-public*.po' \
     -m './_translations/src/**/*.json' \
     -o './translations'

Case 2: Output one merged file if a .json file is set

$ rip po2json './node_modules/mcs-translation/po/mcs-public*.po' \`
     -m './_translations/src/**/*.json' \
     -o './translations.json'
Arguments Description
srcPatterns The pattern of translated .po files
-m, --messages-pattern <path> The pattern of .json files extracted from babel-plugin-react-intl
-o, --output <path> The output pathname of a file / directory
-k, --message-key [key] [Optional] Translation message key (default key is defaultMessage)
-c, --message-context [context] [Optional] Translation message context (defaults to no context)
-l, --lang-mapper-pattern <pattern> [Optional] Custom regex to use for lang mapping. PR#122
-i, --lang-mapper-pattern-index [index] [Optional] When specifying a custom lang-mapper-pattern, the index of match to use for the lang mapping. Default is 1, index is ignored if not using a custom lang mapping regex. PR#122
--indentation <number\|char> [Optional] Specify a number of spaces or a set of characters to be used before each entry of the resulting json file. Defaults to null, which means the entries are not prefixed with spaces.
--sort-by-id [Optional] If specified, the entries of each language are sorted by id before being output

Property

Q&A

How to translate the same message into two different meanings?

Option 1 (Recommended):

Set the message-context (-c) to 'id' of message object from babel-plugin-react-intl (there is no context by default).

The advantage of this option over Option 2 (below) is that PO file editors that provide features such as translation suggestions or error-checking often expect the message key to be defaultMessage.

$ rip po2json './node_modules/mcs-translation/po/mcs-public*.po' \
     -m './_translations/src/**/*.json' \
     -o './translations' \
     -c 'id'

$ rip po2json './node_modules/mcs-translation/po/mcs-public*.po' \`
    -m './_translations/src/**/*.json' \
    -o './translations.json' \
    -c 'id'

Example: https://github.com/evenchange4/react-intl-po-example#option

Option 2: [Maybe deprecated next major release]

Set the message-key (-k) to 'id' of message object from babel-plugin-react-intl (default key is 'defaultMessage'). (#41)

$ rip po2json './node_modules/mcs-translation/po/mcs-public*.po' \
     -m './_translations/src/**/*.json' \
     -o './translations' \
     -k 'id'

$ rip po2json './node_modules/mcs-translation/po/mcs-public*.po' \`
    -m './_translations/src/**/*.json' \
    -o './translations.json' \
    -k 'id'

Development

$ yarn install --pure-lockfile

Ramda.js

You can use R.tap() for developing.

R.pipe(
  R.concat(...),
+ R.tap(e => console.log(e)),
  R.mergeAll,
);

Requirements

Test

$ yarn run format
$ yarn run eslint
$ yarn run test:watch

NPM Release

Any git tags.

  1. Create a new git tag
  2. Update CHANGELOG.md
$ npm version patch

CONTRIBUTING

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org