Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akameco/babel-plugin-react-intl-auto
i18n for the component age. Auto management react-intl ID.
https://github.com/akameco/babel-plugin-react-intl-auto
auto babel babel-plugin component i18n react react-intl
Last synced: 3 days ago
JSON representation
i18n for the component age. Auto management react-intl ID.
- Host: GitHub
- URL: https://github.com/akameco/babel-plugin-react-intl-auto
- Owner: akameco
- License: mit
- Created: 2017-04-22T13:56:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:17:20.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T03:38:02.378Z (about 2 months ago)
- Topics: auto, babel, babel-plugin, component, i18n, react, react-intl
- Language: TypeScript
- Homepage:
- Size: 4.76 MB
- Stars: 211
- Watchers: 4
- Forks: 34
- Open Issues: 55
-
Metadata Files:
- Readme: readme.md
- License: license
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# babel-plugin-react-intl-auto
[](https://github.com/akameco/babel-plugin-react-intl-auto/actions?query=workflow%3Atest)
[](https://coveralls.io/github/akameco/babel-plugin-react-intl-auto?branch=master)
[](https://github.com/prettier/prettier)
[](https://github.com/facebook/jest)
[](#contributors-)
[](https://devtoken.rocks/package/babel-plugin-react-intl-auto)
> i18n for the component age. Auto management react-intl ID.
[React Intl](https://github.com/formatjs/react-intl) is awesome. But, Global ID management is difficult and confusing.
Many projects, like [react-boilerplate](https://github.com/react-boilerplate/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](https://github.com/akameco/extract-react-intl-messages).
You can generate json automatically.
Goodbye, global ID!!
#### Before
```js
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 = () => (
)
```
#### After
With babel-plugin-react-intl-auto.
```js
import { defineMessages, FormattedMessage } from 'react-intl'
export default defineMessages({
hello: 'hello {name}',
welcome: 'Welcome!',
})
const MyComponent = () =>
```
See [examples](https://github.com/akameco/babel-plugin-react-intl-auto/tree/master/examples).
### With `extract-react-intl-messages`
Example usage with [extract-react-intl-messages](https://github.com/akameco/extract-react-intl-messages).
```
$ extract-messages -l=en -o translations 'src/**/*.js'
```
en.json
```json
{
"components.App.hello": "hello {name}",
"components.App.welcome": "Welcome",
"components.App.189751785": "goodbye {name}" // unique hash of defaultMessage
}
```
## Install
npm
```shell
$ npm install --save-dev babel-plugin-react-intl-auto
# Optional: TypeScript support
$ npm install --save-dev @babel/plugin-transform-typescript
```
yarn
```shell
$ yarn add --dev babel-plugin-react-intl-auto
# Optional: TypeScript support
$ yarn add --dev @babel/plugin-transform-typescript
```
## Usage
.babelrc
```json
{
"plugins": [
[
"react-intl-auto",
{
"removePrefix": "app/",
"filebase": false
}
]
]
}
```
### with injectIntl
Input:
```js
import { injectIntl } from 'react-intl'
const MyComponent = ({ intl }) => {
const label = intl.formatMessage({ defaultMessage: 'Submit button' })
return {label}
}
injectIntl(MyComponent)
```
↓ ↓ ↓
Output:
```js
import { injectIntl } from 'react-intl'
const MyComponent = ({ intl }) => {
const label = intl.formatMessage({
id: 'App.Components.Button.label',
defaultMessage: 'Submit button',
})
return {label}
}
injectIntl(MyComponent)
```
### with useIntl
Input:
```js
import { useIntl } from 'react-intl'
const MyComponent = () => {
const intl = useIntl()
const label = intl.formatMessage({ defaultMessage: 'Submit button' })
return {label}
}
```
↓ ↓ ↓
Output:
```js
import { useIntl } from 'react-intl'
const MyComponent = () => {
const intl = useIntl()
const label = intl.formatMessage({
id: 'App.Components.Button.label',
defaultMessage: 'Submit button',
})
return {label}
}
```
### Options
#### removePrefix
remove prefix.
Type: `string | boolean` | `regexp`
Default: `''`
if `removePrefix` is `true`, no file path prefix is included in the id.
##### Example (src/components/App/messages.js)
when `removePrefix` is `"src"`
```js
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"`
```js
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`
```js
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.
#### 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
```js
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
```js
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 `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
```js
intl.formatMessage({
key: 'foobar',
defaultMessage: 'hello'
});
↓ ↓ ↓ ↓ ↓ ↓
intl.formatMessage({
key: 'foobar',
defaultMessage: 'hello',
"id": "path.to.file.foobar"
});
```
```js
↓ ↓ ↓ ↓ ↓ ↓
```
#### separator
Allows you to specify a custom separator
Type: `string`
Default: `.`
##### Example
when `separator` is `"_"`
```js
export const test = defineMessages({
hello: 'hello {name}',
})
↓ ↓ ↓ ↓ ↓ ↓
export const test = defineMessages({
hello: {
id: 'path_to_file_test_hello',
defaultMessage: 'hello {name}',
},
})
```
#### 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`.
```bash
|- packageA
| |
| -- componentA
|
|- packageB
| |
| -- componentB
| |
| -- .babelrc
```
Set `relativeTo` to parent directory in `packageB` babel config
```js
{
"plugins": [
[
"react-intl-auto",
{
"relativeTo": "..",
// ...
},
],
]
}
```
Run babel in packageB
```bash
cd packageB && babel
```
Messages in `componentA` are prefixed relative to the project root
```js
export const test = defineMessages({
hello: 'hello {name}',
})
↓ ↓ ↓ ↓ ↓ ↓
export const test = defineMessages({
hello: {
id: 'packageA.componentA.hello',
defaultMessage: 'hello {name}',
},
})
```
### Support variable
##### Example
```js
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](https://github.com/akameco/extract-react-intl-messages).
### tsconfig.json
```json
{
"compilerOptions": {
// ...
"jsx": "preserve"
// ...
},
"include": ["node_modules/babel-plugin-react-intl-auto/**/*.d.ts"]
}
```
### .babelrc
```json
{
"plugins": [["@babel/plugin-transform-typescript"], ["react-intl-auto"]]
}
```
### webpack.config.js
Use `babel-loader` along with `ts-loader` when using webpack as well.
```js
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
},
{
loader: 'ts-loader',
},
],
},
],
},
}
```
## Related
### [babel-plugin-react-intl-id-hash](https://github.com/adam-26/babel-plugin-react-intl-id-hash)
If you want short consistent hash values for the ID, you can use [react-intl-id-hash](https://github.com/adam-26/babel-plugin-react-intl-id-hash) in addition to this plugin to help reduce your applications bundle size.
### [extract-react-intl-messages](https://github.com/akameco/extract-react-intl-messages)
Extract react-intl messages.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#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
💻 ⚠️
Josh Poole
💻 ⚠️
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## License
MIT © [akameco](http://akameco.github.io)