babel-plugin-react-intl-auto
i18n for the component age. Auto management react-intl ID.
React Intl is awesome. But, Global ID management is difficult and confusing.
Many projects, like react-boilerplate, give the ID to the name of the component as a prefix. But it is redundant and troublesome.
This babel-plugin releases you from cumbersome ID management. Based on the file path, this automatically generates a prefixed id.
Also, we strongly encourage you to use extract-react-intl-messages. You can generate json automatically.
Goodbye, global ID!!
Before
hello: id: 'App.Components.Greeting.hello' defaultMessage: 'hello {name}' welcome: id: 'App.Components.Greeting.welcome' defaultMessage: 'Welcome!' const MyComponent = <FormattedMessage id="App.Components.Greeting.goodbye" defaultMessage="goodbye {name}" />
After
With babel-plugin-react-intl-auto.
hello: 'hello {name}' welcome: 'Welcome!' const MyComponent = <FormattedMessage defaultMessage="goodbye {name}" />
See examples.
extract-react-intl-messages
With Example usage with extract-react-intl-messages.
$ extract-messages -l=en -o translations 'src/**/*.js'
en.json
Install
npm
$ npm install --save-dev babel-plugin-react-intl-auto # Optional: TypeScript support $ npm install --save-dev @babel/plugin-transform-typescript
yarn
$ yarn add --dev babel-plugin-react-intl-auto # Optional: TypeScript support $ yarn add --dev @babel/plugin-transform-typescript
Usage
.babelrc
with injectIntl
Input:
const MyComponent = { const label = intl return <button aria-label=label>label</button>}
↓ ↓ ↓
Output:
const MyComponent = { const label = intl return <button aria-label=label>label</button>}
with useIntl
Input:
const MyComponent = { const intl = const label = intl return <button aria-label=label>label</button>}
↓ ↓ ↓
Output:
const MyComponent = { const intl = const label = intl return <button aria-label=label>label</button>}
Options
removePrefix
remove prefix.
Type: string | boolean
Default: ''
if removePrefix
is true
, no file path prefix is included in the id.
Example (src/components/App/messages.js)
when removePrefix
is "src"
; hello: 'hello world'; ↓ ↓ ↓ ↓ ↓ ↓ ; hello: id: 'components.App.hello' defaultMessage: 'hello world' ;
when removePrefix
is "src.components"
; hello: 'hello world'; ↓ ↓ ↓ ↓ ↓ ↓ ; hello: id: 'App.hello' defaultMessage: 'hello world' ;
when removePrefix
is true
; hello: 'hello world'; ↓ ↓ ↓ ↓ ↓ ↓ ; hello: id: 'hello' defaultMessage: 'hello world' ;
filebase
Type: boolean
Default: false
if filebase
is true
, generate id with filename.
moduleSourceName
Type: string
Default: react-intl
if set, enables to use custom module as a source for defineMessages etc.
https://github.com/akameco/babel-plugin-react-intl-auto/issues/74#issuecomment-528562743
includeExportName
Type: boolean | 'all'
Default: false
if includeExportName
is true
, adds named exports as part of the id.
Only works with defineMessages
.
Example
const test = ↓ ↓ ↓ ↓ ↓ ↓ const test =
If includeExportName is 'all'
, it will also add default
to the id on default
exports.
extractComments
Use leading comments as the message description.
Only works with defineMessages
Type: boolean
Default: true
Example
const test = ↓ ↓ ↓ ↓ ↓ ↓ const test =
useKey
Only works with intl.formatMessage
, FormattedMessage
and FormattedHTMLMessage
. Instead of
generating an ID by hashing defaultMessage
, it will use the key
property if
it exists.
Type: boolean
Default: false
Example
intl; ↓ ↓ ↓ ↓ ↓ ↓ intl;
<FormattedMessage key="foobar" defaultMessage="hello" /> ↓ ↓ ↓ ↓ ↓ ↓ <FormattedMessage id="path.to.file.foobar" key="foobar" defaultMessage="hello" />
separator
Allows you to specify a custom separator
Type: string
Default: .
Example
when separator
is "_"
const test = ↓ ↓ ↓ ↓ ↓ ↓ const test =
relativeTo
Allows you to specify the directory that is used when determining a file's prefix.
This option is useful for monorepo setups.
Type: string
Default: process.cwd()
Example
Folder structure with two sibling packages. packageB
contains babel config and depends on packageA
.
|- packageA| || -- componentA||- packageB| || -- componentB| || -- .babelrc
Set relativeTo
to parent directory in packageB
babel config
"plugins": "react-intl-auto" "relativeTo": ".." // ...
Run babel in packageB
cd packageB && babel
Messages in componentA
are prefixed relative to the project root
const test = ↓ ↓ ↓ ↓ ↓ ↓ const test =
Support variable
Example
const messages = hello: 'hello world' messages ↓ ↓ ↓ ↓ ↓ ↓ const messages = hello: id: 'path.to.file.hello' defaultMessage: 'hello wolrd' ; messages;
TypeScript
TypeScript support is bundled with this package. Be sure to include our type
definition and run @babel/plugin-transform-typescript
beforehand. This way,
you can also be empowered by extract-react-intl-messages.
tsconfig.json
.babelrc
webpack.config.js
Use babel-loader
along with ts-loader
when using webpack as well.
moduleexports = module: rules: test: /\.tsx?$/ exclude: /node_modules/ use: loader: 'babel-loader' loader: 'ts-loader'
Related
babel-plugin-react-intl-id-hash
If you want short consistent hash values for the ID, you can use react-intl-id-hash in addition to this plugin to help reduce your applications bundle size.
extract-react-intl-messages
Extract react-intl messages.
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © akameco