Giter Site home page Giter Site logo

extract-react-intl-messages's Introduction

extract-react-intl-messages

Build Status tested with jest styled with prettier MIT License All Contributors

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 the defineMessages function of react-intl. The value of each of these keys will be an empty string, except for your defaultLocale which will be populated with the defaultMessage.

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'

export default defineMessages({
  hello: {
    id: 'a.hello',
    defaultMessage: 'hello'
  },
  world: {
    id: 'a.world',
    defaultMessage: 'world'
  }
})

export const SubmitButton = () => {
  const intl = useIntl()
  const label = intl.formatMessage({
    id: 'a.submit',
    defaultMessage: 'Submit Button'
  })
  return <button aria-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 with babel-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]
  --flat             json [default: true] | yaml [default: false]
  --default-locale   default locale [default: en]
  --moduleSourceName module source name from where components are imported [default: react-intl]

  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'
  $ extract-messages -l=ja,en -o i18n 'src/**/*.js' --extractFromFormatMessageCall

create-react-app user

create .babelrc like this.

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

Run with NODE_ENV=development.

$ NODE_ENV=development extract-messages ...

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.

flat

Type: boolean
Default: true

If format is yaml, set to false.

Be careful if false. See this issue.

babel-plugin-react-intl's Options

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

Contributors

Thanks goes to these wonderful people (emoji key):

akameco
akameco

๐Ÿ’ป โš ๏ธ ๐Ÿ“– ๐Ÿš‡
Hoan Tran
Hoan Tran

๐Ÿ’ป โš ๏ธ
giantpinkwalrus
giantpinkwalrus

๐Ÿ’ป
enrique-ramirez
enrique-ramirez

๐Ÿ“–
Stefan Gojan
Stefan Gojan

๐Ÿ› ๐Ÿ’ป โš ๏ธ
Solomon English
Solomon English

๐Ÿ’ป
Filip
Filip "Filson" Pasternak

๐Ÿ’ป
nodaguti
nodaguti

๐Ÿ’ป โš ๏ธ
fix-fix
fix-fix

๐Ÿ’ป
bradbarrow
bradbarrow

๐Ÿ› ๐Ÿ’ป โš ๏ธ
Gregor MacLennan
Gregor MacLennan

๐Ÿ’ป
Dmitry Zarva
Dmitry Zarva

๐Ÿ’ป
Michael Pan
Michael Pan

๐Ÿ’ก

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT ยฉ akameco

extract-react-intl-messages's People

Contributors

akameco avatar bradbarrow avatar enrique-ramirez avatar fix-fix avatar giantpinkwalrus avatar greenkeeper[bot] avatar hoantran-it avatar hoschi avatar nodaguti avatar panpanc avatar remcohaszing avatar solomon23 avatar zarv1k avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.