Babel macro which generates id for React Intl messages automatically. This project was inspired by babel-plugin-react-intl-auto, but it generates id for react-intl messages more explicitly and works with zero-config projects such as Create React App
If you use Create React App or have installed babel-plugin-macros skip babel plugin setup step
npm install --save-dev babel-plugin-macrosand add in .babelrc:
{
"plugins": ["macros"]
}Just install define-messages.macro with npm or yarn
npm install --save-dev define-messages.macroThat’s it!
import defineMessages from 'define-messages.macro'- (optional) setup id unique prefix for file using
setupPrefixmethod - define messages
- (optional) update translations files using react-intl-cli
import defineMessages from 'define-messages.macro';
defineMessages.setupPrefix('components.some-component');
const messages = defineMessages({
greeting: 'hello',
goodbye: 'goodbye'
});this code will be transformed to:
import { defineMessages } from 'react-intl';
const messages = defineMessages({
greeting: {
id: 'components.some-component.greeting',
defaultMessage: 'hello'
},
goodbye: {
id: 'components.some-component.goodbye',
defaultMessage: 'goodbye'
}
});in NODE_ENV !== 'production' environment
and to:
const messages = {
greeting: {
id: 'components.some-component.greeting',
defaultMessage: 'hello'
},
goodbye: {
id: 'components.some-component.goodbye',
defaultMessage: 'goodbye'
}
};in NODE_ENV === 'production' environment
You can use define-messages.macro without setting up prefix for id manually:
// file: component/some-component/messages.js
import defineMessages from 'define-messages.macro';
const messages = defineMessages({
greeting: 'hello',
goodbye: 'goodbye'
});
// ↓ ↓ ↓ ↓ ↓ ↓
const messages = defineMessages({
greeting: 'component.some-component.hello',
goodbye: 'component.some-component.goodbye'
});You could define description field for your message:
import defineMessages from 'define-messages.macro';
defineMessages.setupPrefix('components.some-component');
const messages = defineMessages({
greeting: {
defaultMessage: 'hello',
description: 'Some description'
}
});will be transformed to:
import { defineMessages } from 'react-intl';
const messages = defineMessages({
greeting: {
id: 'components.some-component.greeting',
defaultMessage: 'hello',
description: 'Some description'
}
});You could define id for some of your message and it won't be override:
import defineMessages from 'define-messages.macro';
defineMessages.setupPrefix('components.some-component');
const messages = defineMessages({
greeting: {
id: 'my-existing-id',
defaultMessage: 'hello',
description: 'Some description'
}
});will be transformed to:
import { defineMessages } from 'react-intl';
const messages = defineMessages({
greeting: {
id: 'my-existing-id',
defaultMessage: 'hello',
descrip
74AC
tion: 'Some description'
}
});babel-plugin-macros uses cosmiconfig to read a babel-plugin-macros configuration which can be located in any of the following files up the directories from the importing file:
.babel-plugin-macrosrc.babel-plugin-macrosrc.json.babel-plugin-macrosrc.yaml.babel-plugin-macrosrc.yml.babel-plugin-macrosrc.jsbabel-plugin-macros.config.jsbabelMacrosinpackage.json
You can then specify plugin options in defineMessages entry:
relativeTo- allows you to specify the directory that is used when determining a file's prefix
// babel-plugin-macros.config.js
module.exports = {
// ...
// Other macros config
defineMessages: {
relativeTo: 'src' // by default path is babel work directory
}
}This package is licensed under MIT license.