akameco/extract-react-intl-messagesPublic

NotificationsYou must be signed in to change notification settings
Fork42
Star182

extract react intl messages

License

MIT license

182 stars 42 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 334 Commits
.github		.github
.husky		.husky
example		example
src		src
.all-contributorsrc		.all-contributorsrc
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
license		license
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md
tsconfig.json		tsconfig.json

Repository files navigation

extract-react-intl-messages

This package will generate json or yaml files from a glob. It will generate one file per locale, with the ids of each message defined by thedefineMessages function ofreact-intl. The value of each of these keys will be an empty string, except for yourdefaultLocale which will be populated with thedefaultMessage.

Dependencies

Babel

0.x works with Babel 6

Install

$ npm install --save-dev extract-react-intl-messages

Usage

app/components/App/messages.js

import{defineMessages,useIntl}from'react-intl'exportdefaultdefineMessages({hello:{id:'a.hello',defaultMessage:'hello'},world:{id:'a.world',defaultMessage:'world'}})exportconstSubmitButton=()=>{constintl=useIntl()constlabel=intl.formatMessage({id:'a.submit',defaultMessage:'Submit Button'})return<buttonaria-label={label}>{label}</button>}

Run Script

$ extract-messages -l=en,ja -o app/translations -d en --flat false './app/**/!(*.test).js'

Output

app/translations/en.json

{"a": {"hello":"hello","world":"world","submit":"Submit Button"  }}

app/translations/ja.json

{"a": {"hello":"","world":"","submit":""  }}

Recommend

Use withbabel-plugin-react-intl-auto: i18n for the component age. Auto management react-intl ID.

CLI

$extract-messages --help  Extract react-intl messages  Usage  $ extract-react-intl-messages <input>  $ extract-messages <input>  Options  -o, --output            Output directory [require: true]  -l, --locales           locales [require: true]  -f, --format            json | yaml [default: json]  -d, --defaultLocale     default locale  --overwriteDefault      default: true  --flat                  json [default: true] | yaml [default: false]  --indent                default: 2  Example  $ extract-messages --locales=ja,en --output app/translations 'app/**/*.js'  $ extract-messages -l=ja,en -o i18n 'src/**/*.js'  $ extract-messages -l=ja,en -o app/translations -f yaml 'app/**/messages.js'

create-react-app user

create.babelrc like this.

{"presets": ["react-app"]}

Run withNODE_ENV=development.

$ NODE_ENV=development extract-messages ...

TypeScript

babel required.

Seeexample/with-typescript

npm install --save-dev @babel/core @babel/preset-typescript @babel/preset-react

babel.config.js

module.exports=function(api){api.cache(true)return{presets:['@babel/preset-react','@babel/preset-typescript']}}

API

extractReactIntlMessages(locales, input, buildDir, [options])

locales

Type:Array<string>

Example:['en', 'ja']

input

Type:Array<string>

Target files.glob.

buildDir

Type:string

Export directory.

options

defaultLocale

Type:string
Default:en

format

Type:json |yaml
Default:json

Set extension to output.

overwriteDefault

Type:boolean
Default: true

If overwriteDefault isfalse, it will not overwrite messages in the default locale.

indent

Type:number
Default:2

flat

Type:boolean
Default:true

If format isyaml, set tofalse.

Be careful iffalse.Seethis issue.

babel-plugin-react-intl's Options

Seehttps://github.com/formatjs/formatjs/tree/master/packages/babel-plugin-react-intl#options

Contributors

Thanks goes to these wonderful people (emoji key):

_akameco 💻⚠️📖🚇	_{Hoan Tran} 💻⚠️	_{giantpinkwalrus} 💻	_{enrique-ramirez} 📖	_{Stefan Gojan} 🐛💻⚠️	_{Solomon English} 💻	_{Filip "Filson" Pasternak} 💻
_nodaguti 💻⚠️	_fix-fix 💻	_bradbarrow 🐛💻⚠️	_{Gregor MacLennan} 💻	_{Dmitry Zarva} 💻	_{Michael Pan} 💡	_{Tom Erik Støwer} 💻
_{Bart Lens} 💻	_{Truong Hoang Dung} 💡	_Nestoro 💻	_{Yutaro Kido} 💻