Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dvhb/react-intl-messages
Library for parsing source files and extract react-intl messages
https://github.com/dvhb/react-intl-messages
Last synced: 2 months ago
JSON representation
Library for parsing source files and extract react-intl messages
- Host: GitHub
- URL: https://github.com/dvhb/react-intl-messages
- Owner: dvhb
- Created: 2019-04-03T10:05:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-09-27T13:34:01.000Z (over 2 years ago)
- Last Synced: 2024-09-16T12:30:52.390Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 562 KB
- Stars: 4
- Watchers: 7
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/@dvhb/react-intl-messages.svg)](https://npmjs.org/package/@dvhb/react-intl-messages)
[![Downloads/week](https://img.shields.io/npm/dw/@dvhb/react-intl-messages.svg)](https://npmjs.org/package/@dvhb/react-intl-messages)
[![License](https://img.shields.io/npm/l/@dvhb/react-intl-messages.svg)](https://github.com/sairus2k/@dvhb/react-intl-messages/blob/master/package.json)- [Features](#features)
- [Usage](#usage)
- [Commands](#commands)
- [Config](#config)
- [Integration](#integration)
# Features
- synchronize translations with translation service ([lokalise.co](https://lokalise.co/) and [Locize](https://locize.com/) for now)
- custom babel config, appropriate for projects on react-native and typescript
- prettify extracted json files
- store parameters in config# Usage
```sh-session
$ npm install -g @dvhb/react-intl-messages
$ messages COMMAND
running command...
$ messages (-v|--version|version)
@dvhb/react-intl-messages/2.2.2 darwin-x64 node-v10.16.0
$ messages --help [COMMAND]
USAGE
$ messages COMMAND
...
```# Commands
- [`messages clean`](#messages-clean)
- [`messages extract`](#messages-extract)
- [`messages help [COMMAND]`](#messages-help-command)
- [`messages sync`](#messages-sync)## `messages clean`
Clean lokalise for unused translation keys
```
USAGE
$ messages cleanOPTIONS
-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](https://github.com/dvhb/react-intl-messages/blob/v2.2.2/src/commands/clean.ts)_
## `messages extract`
Extract translations from source files to json
```
USAGE
$ messages extractOPTIONS
-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 filesEXAMPLE
$ messages extract --langs=en,fr,de,ru --pattern="src/**/*.{ts,tsx}"
```_See code: [src/commands/extract.ts](https://github.com/dvhb/react-intl-messages/blob/v2.2.2/src/commands/extract.ts)_
## `messages help [COMMAND]`
display help for messages
```
USAGE
$ messages help [COMMAND]ARGUMENTS
COMMAND command to show help forOPTIONS
--all see all commands in CLI
```_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v2.1.6/src/commands/help.ts)_
## `messages sync`
Synchronise extracted files with Lokalise.co
```
USAGE
$ messages syncOPTIONS
-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 LocizeEXAMPLE
$ messages extract --langs=en,fr,de,ru --pattern="src/**/*.{ts,tsx}"
```_See code: [src/commands/sync.ts](https://github.com/dvhb/react-intl-messages/blob/v2.2.2/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:
```json
{
"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](https://github.com/formatjs/react-intl/blob/master/docs/README.md)
1. Install [react-intl](https://www.npmjs.com/package/react-intl) and [@dvhb/react-intl-messages](https://www.npmjs.com/package/@dvhb/react-intl-messages)
```shell script
npm install --save-dev react-intl @dvhb/react-intl-messages
```
1. Add config for `@dvhb/react-intl-messages` as described in [Config](#config) section.After that you can generate messages files like that:
```shell script
npx messages extract
```1. Add polyfills for `Intl.NumberFormat` and `Intl.DateTimeFormat` if necessary (for IE11 and react-native) like described in the [instruction](https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#runtime-requirements).
1. Wrap the app with [IntlProvider](https://github.com/formatjs/react-intl/blob/master/docs/Components.md#intlprovider).
Import translations from extracted files. Then reduce translations and pass them to the provider:```jsx harmony
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),
}
;
```1. After that you can use react-intl components in your project. Like that:
```jsx harmony
{msg},
icon: ,
}}
/>
```1. Now if you extract messages again, in `_default.json` file should appear new item.
```json
[
{
"id": "app.greeting",
"defaultMessage": "Greeting to welcome the user to the app",
"message": "",
"files": ["src/HelloWorld.js"]
}
]
```