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

1import { defineMessages, FormattedMessage } from 'react-intl'
2
3export default defineMessages({
4  hello: {
5    id: 'App.Components.Greeting.hello',
6    defaultMessage: 'hello {name}',
7  },
8  welcome: {
9    id: 'App.Components.Greeting.welcome',
10    defaultMessage: 'Welcome!',
11  },
12})
13
14const MyComponent = () => (
15  <FormattedMessage
16    id="App.Components.Greeting.goodbye"
17    defaultMessage="goodbye {name}"
18  />
19)

After

With babel-plugin-react-intl-auto.

1import { defineMessages, FormattedMessage } from 'react-intl'
2
3export default defineMessages({
4  hello: 'hello {name}',
5  welcome: 'Welcome!',
6})
7
8const MyComponent = () => <FormattedMessage defaultMessage="goodbye {name}" />

See examples.

With extract-react-intl-messages

Example usage with extract-react-intl-messages.

$ extract-messages -l=en -o translations 'src/**/*.js'

en.json

1{
2  "components.App.hello": "hello {name}",
3  "components.App.welcome": "Welcome",
4  "components.App.189751785": "goodbye {name}" // unique hash of defaultMessage
5}

Install

npm

1$ npm install --save-dev babel-plugin-react-intl-auto
2
3# Optional: TypeScript support
4$ npm install --save-dev @babel/plugin-transform-typescript

yarn

1$ yarn add --dev babel-plugin-react-intl-auto
2
3# Optional: TypeScript support
4$ yarn add --dev @babel/plugin-transform-typescript

Usage

.babelrc

1{
2  "plugins": [
3    [
4      "react-intl-auto",
5      {
6        "removePrefix": "app/",
7        "filebase": false
8      }
9    ]
10  ]
11}

with injectIntl

Input:

1import { injectIntl } from 'react-intl'
2
3const MyComponent = ({ intl }) => {
4  const label = intl.formatMessage({ defaultMessage: 'Submit button' })
5  return <button aria-label={label}>{label}</button>
6}
7
8injectIntl(MyComponent)

↓ 　 ↓ 　 ↓

Output:

1import { injectIntl } from 'react-intl'
2
3const MyComponent = ({ intl }) => {
4  const label = intl.formatMessage({
5    id: 'App.Components.Button.label',
6    defaultMessage: 'Submit button',
7  })
8  return <button aria-label={label}>{label}</button>
9}
10
11injectIntl(MyComponent)

with useIntl

Input:

1import { useIntl } from 'react-intl'
2
3const MyComponent = () => {
4  const intl = useIntl()
5  const label = intl.formatMessage({ defaultMessage: 'Submit button' })
6  return <button aria-label={label}>{label}</button>
7}

↓ 　 ↓ 　 ↓

Output:

1import { useIntl } from 'react-intl'
2
3const MyComponent = () => {
4  const intl = useIntl()
5  const label = intl.formatMessage({
6    id: 'App.Components.Button.label',
7    defaultMessage: 'Submit button',
8  })
9  return <button aria-label={label}>{label}</button>
10}

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"

1import { defineMessages } from 'react-intl';
2
3export default defineMessages({
4  hello: 'hello world'
5});
6
7      ↓ ↓ ↓ ↓ ↓ ↓
8
9import { defineMessages } from 'react-intl';
10
11export default defineMessages({
12  hello: {
13    id: 'components.App.hello',
14    defaultMessage: 'hello world'
15  }
16});

when removePrefix is "src.components"

1import { defineMessages } from 'react-intl';
2
3export default defineMessages({
4  hello: 'hello world'
5});
6
7      ↓ ↓ ↓ ↓ ↓ ↓
8
9import { defineMessages } from 'react-intl';
10
11export default defineMessages({
12  hello: {
13    id: 'App.hello',
14    defaultMessage: 'hello world'
15  }
16});

when removePrefix is true

1import { defineMessages } from 'react-intl';
2
3export default defineMessages({
4  hello: 'hello world'
5});
6
7      ↓ ↓ ↓ ↓ ↓ ↓
8
9import { defineMessages } from 'react-intl';
10
11export default defineMessages({
12  hello: {
13    id: 'hello',
14    defaultMessage: 'hello world'
15  }
16});

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

1export const test = defineMessages({
2  hello: 'hello {name}',
3})
4
5      ↓ ↓ ↓ ↓ ↓ ↓
6
7export const test = defineMessages({
8  hello: {
9    id: 'path.to.file.test.hello',
10    defaultMessage: 'hello {name}',
11  },
12})

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

1export const test = defineMessages({
2  // Message used to greet the user
3  hello: 'hello {name}',
4})
5
6      ↓ ↓ ↓ ↓ ↓ ↓
7
8export const test = defineMessages({
9  hello: {
10    id: 'path.to.file.test.hello',
11    defaultMessage: 'hello {name}',
12    description: 'Message used to greet the user',
13  },
14})

useKey

Only works with 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

1<FormattedMessage key="foobar" defaultMessage="hello" />
2
3      ↓ ↓ ↓ ↓ ↓ ↓
4
5<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 "_"

1export const test = defineMessages({
2  hello: 'hello {name}',
3})
4
5      ↓ ↓ ↓ ↓ ↓ ↓
6
7export const test = defineMessages({
8  hello: {
9    id: 'path_to_file_test_hello',
10    defaultMessage: 'hello {name}',
11  },
12})

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.

1|- packageA
2| |
3|  -- componentA
4|
5|- packageB
6| |
7|  -- componentB
8| |
9|  -- .babelrc

Set relativeTo to parent directory in packageB babel config

1{
2  "plugins": [
3    [
4      "react-intl-auto",
5      {
6        "relativeTo": "..",
7        // ...
8      },
9    ],
10  ]
11}

Run babel in packageB

1cd packageB && babel

Messages in componentA are prefixed relative to the project root

1export const test = defineMessages({
2  hello: 'hello {name}',
3})
4
5      ↓ ↓ ↓ ↓ ↓ ↓
6
7export const test = defineMessages({
8  hello: {
9    id: 'packageA.componentA.hello',
10    defaultMessage: 'hello {name}',
11  },
12})

Support variable

Example

1const messages = { hello: 'hello world' }
2
3export default defineMessages(messages)
4
5      ↓ ↓ ↓ ↓ ↓ ↓
6
7const messages = {
8  hello: {
9    id: 'path.to.file.hello',
10    defaultMessage: 'hello wolrd'
11  }
12};
13
14export default defineMessages(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

1{
2  "include": ["node_modules/babel-plugin-react-intl-auto/**/*.d.ts"]
3}

.babelrc

1{
2  "plugins": [["@babel/plugin-transform-typescript"], ["react-intl-auto"]]
3}

webpack.config.js

Use babel-loader along with ts-loader when using webpack as well.

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.tsx?$/,
6        exclude: [/node_modules/],
7        use: [
8          {
9            loader: 'babel-loader',
10          },
11          {
12            loader: 'ts-loader',
13          },
14        ],
15      },
16    ],
17  },
18}

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):

akameco 💻 ⚠️ 👀 📖	Aleksander Heintz 💻 📖	Ryan Leckey 💻	Adam 💻 📖	Guylian Cox 💻 📖 ⚠️	Carl Grundberg 💡 📖	bradbarrow 💻 📖 ⚠️
Mauro Gabriel Titimoli 💻 ⚠️	Stanislav Ermakov 💻	Chitoku 💻	Kouta Kumagai 📖 💻 ⚠️	Shahyar G 💻	Remco Haszing 💻	jmarceli 💻 ⚠️
Dominik Żegleń 💻 ⚠️	Filip "Filson" Pasternak 💻	Eric Masiello 💻 ⚠️

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

License

MIT © akameco