@dvhb/react-intl-messages

react-intl-messages

Library for parsing source files and extract react-intl messages. Extracted messages saves to json files. Underhood it uses babe-plugin-react-intl

• react-intl-messages
• Features
• Usage
• Commands
• Config
• Integration

Features

• synchronize translations with translation service (lokalise.co and Locize for now)
• custom babel config, appropriate for projects on react-native and typescript
• prettify extracted json files
• store parameters in config

Usage

$ npm install -g @dvhb/react-intl-messages
$ messages COMMAND
running command...
$ messages (-v|--version|version)
@dvhb/react-intl-messages/2.4.6 darwin-arm64 node-v16.13.1
$ messages --help [COMMAND]
USAGE
  $ messages COMMAND
...

Commands

• messages clean
• messages extract
• messages help [COMMAND]
• messages sync

messages clean

Clean lokalise for unused translation keys

USAGE
  $ messages clean

OPTIONS
  -d, --messagesDir=messagesDir  (required) [default: src/messages] Directory for extracted messages
  -h, --help                     show CLI help
  --namespace=namespace          Provider`s namespace. Required for Locize
  --projectId=projectId          Provider`s project id
  --provider=lokalise|locize     (required) Translation service provider
  --token=token                  Provider`s token
  --uploadTranslations           Upload existing translations to provider. Useful for provider migration.
  --version=version              Translations version, for example "production". Required for Locize

See code: src/commands/clean.ts

messages extract

Extract translations from source files to json

USAGE
  $ messages extract

OPTIONS
  -d, --messagesDir=messagesDir  (required) [default: src/messages] Directory for extracted messages
  -h, --help                     show CLI help
  -i, --ignore=ignore            Regex mask for ignored files
  -l, --langs=langs              (required) Comma separated languages
  -p, --pattern=pattern          (required) Regex mask for files

EXAMPLE
  $ messages extract --langs=en,fr,de,ru --pattern="src/**/*.{ts,tsx}"

See code: src/commands/extract.ts

messages help [COMMAND]

display help for messages

USAGE
  $ messages help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

See code: @oclif/plugin-help

messages sync

Synchronise extracted files with Lokalise.co

USAGE
  $ messages sync

OPTIONS
  -d, --messagesDir=messagesDir  (required) [default: src/messages] Directory for extracted messages
  -h, --help                     show CLI help
  -l, --langs=langs              (required) Comma separated languages
  --namespace=namespace          Provider`s namespace. Required for Locize
  --projectId=projectId          Provider`s project id
  --provider=lokalise|locize     (required) Translation service provider
  --token=token                  Provider`s token
  --uploadTranslations           Upload existing translations to provider. Useful for provider migration.
  --version=version              Translations version, for example "production". Required for Locize

EXAMPLE
  $ messages extract --langs=en,fr,de,ru --pattern="src/**/*.{ts,tsx}"

See code: src/commands/sync.ts

Config

• messages property in a package.json file.
• .messages file with JSON or YAML syntax.
• .messages.json file.
• .messages.yaml or .messages.yml file.
• .messages.js or messages.config.js JS file exporting the object.

package.json example:

{
  "messages": {
    "langs": "en,fr,de,ru",
    "pattern": "src/**/*.js",
    "messagesDir": "src/messages"
  }
}

Integration

A brief instruction how to integrate react-intl in your project. For more details please check the react-intl documentation

1. Install react-intl and @dvhb/react-intl-messages

   npm install --save-dev react-intl @dvhb/react-intl-messages

2. Add config for @dvhb/react-intl-messages as described in Config section.

   After that you can generate messages files like that:

   npx messages extract

3. Add polyfills for Intl.NumberFormat and Intl.DateTimeFormat if necessary (for IE11 and react-native) like described in the instruction.

4. Wrap the app with IntlProvider. Import translations from extracted files. Then reduce translations and pass them to the provider:

   import messagesEn from '../messages/en.json'
   
   const reduceMessages = messages => Object.assign({}, ...messages.map(msg => ({ [msg.id]: msg })));
   
   const locale = 'en';
   
   const messages = {
     en: reduceMessages(messagesEn),
   }
   
   <IntlProvider messages={messages[locale]} locale={locale}>
     <App />
   </IntlProvider>;

5. After that you can use react-intl components in your project. Like that:

   <FormattedMessage
     id="app.greeting"
     description="Greeting to welcome the user to the app"
     defaultMessage="Hello, <b>Eric</b> {icon}"
     values={{
       b: msg => <b>{msg}</b>,
       icon: <svg />,
     }}
   />

6. Now if you extract messages again, in _default.json file should appear new item.

   [
     {
       "id": "app.greeting",
       "defaultMessage": "Greeting to welcome the user to the app",
       "message": "",
       "files": ["src/HelloWorld.js"]
     }
   ]