Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
373 lines (262 sloc) 13.1 KB

babel-plugin-react-intl-auto

Build Status Build status Coverage Status styled with prettier tested with jest All Contributors

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

import { defineMessages, FormattedMessage } from 'react-intl'

export default defineMessages({
  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.

import { defineMessages, FormattedMessage } from 'react-intl'

export default defineMessages({
  hello: 'hello {name}',
  welcome: 'Welcome!',
})

const 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

{
  "components.App.hello": "hello {name}",
  "components.App.welcome": "Welcome",
  "components.App.189751785": "goodbye {name}" // unique hash of defaultMessage
}

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

{
  "plugins": [
    [
      "react-intl-auto",
      {
        "removePrefix": "app/",
        "filebase": false
      }
    ]
  ]
}

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"

import { defineMessages } from 'react-intl';

export default defineMessages({
  hello: 'hello world'
});

      ↓ ↓ ↓ ↓ ↓ ↓

import { defineMessages } from 'react-intl';

export default defineMessages({
  hello: {
    id: 'components.App.hello',
    defaultMessage: 'hello world'
  }
});

when removePrefix is "src.components"

import { defineMessages } from 'react-intl';

export default defineMessages({
  hello: 'hello world'
});

      ↓ ↓ ↓ ↓ ↓ ↓

import { defineMessages } from 'react-intl';

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

when removePrefix is true

import { defineMessages } from 'react-intl';

export default defineMessages({
  hello: 'hello world'
});

      ↓ ↓ ↓ ↓ ↓ ↓

import { defineMessages } from 'react-intl';

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

filebase

Type: boolean
Default: false

if filebase is true, generate id with filename.

includeExportName

Type: boolean | 'all'
Default: false

if includeExportName is true, adds named exports as part of the id.

Only works with defineMessages.

Example
export const test = defineMessages({
  hello: 'hello {name}',
})

      ↓ ↓ ↓ ↓ ↓ ↓

export const test = defineMessages({
  hello: {
    id: 'path.to.file.test.hello',
    defaultMessage: 'hello {name}',
  },
})

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
export const test = defineMessages({
  // Message used to greet the user
  hello: 'hello {name}',
})

      ↓ ↓ ↓ ↓ ↓ ↓

export const test = defineMessages({
  hello: {
    id: 'path.to.file.test.hello',
    defaultMessage: 'hello {name}',
    description: 'Message used to greet the user',
  },
})

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
<FormattedMessage key="foobar" defaultMessage="hello" />

      ↓ ↓ ↓ ↓ ↓ ↓

<FormattedMessage id="path.to.file.foobar" key="foobar" defaultMessage="hello" />

Support variable

Example
const messages = { hello: 'hello world' }

export default defineMessages(messages)

      ↓ ↓ ↓ ↓ ↓ ↓

const messages = {
  hello: {
    id: 'path.to.file.hello',
    defaultMessage: 'hello wolrd'
  }
};

export 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

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

.babelrc

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

webpack.config.js

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

module.exports = {
  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):

akameco
akameco

💻 ⚠️ 👀 📖
Aleksander Heintz
Aleksander Heintz

💻 📖
Ryan Leckey
Ryan Leckey

💻
Adam
Adam

💻 📖
Guylian Cox
Guylian Cox

💻 📖 ⚠️
Carl Grundberg
Carl Grundberg

💡 📖
bradbarrow
bradbarrow

💻 📖 ⚠️
Mauro Gabriel Titimoli
Mauro Gabriel Titimoli

💻 ⚠️
Stanislav Ermakov
Stanislav Ermakov

💻
Chitoku
Chitoku

💻
Kouta Kumagai
Kouta Kumagai

📖 💻 ⚠️
Shahyar G
Shahyar G

💻

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

License

MIT © akameco

You can’t perform that action at this time.