define-messages.macro
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
Installation
If you use Create React App or have installed babel-plugin-macros skip babel plugin setup step
Setup Babel Macros Plugin
and add in .babelrc:
"plugins": ["macros"]
}
Install define-messages.macro
Just install define-messages.macro with npm or yarn
That's it!
Basic Usage
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
defineMessages.setupPrefix('components.some-component');
const messages = defineMessages({
greeting: 'hello',
goodbye: 'goodbye'
});
this code will be transformed to:
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:
greeting: {
id: 'components.some-component.greeting',
defaultMessage: 'hello'
},
goodbye: {
id: 'components.some-component.goodbye',
defaultMessage: 'goodbye'
}
};
in NODE_ENV === 'production' environment
More Examples
Without setupPrefix method
You can use define-messages.macro without setting up prefix for id manually:
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'
});
Define description field
You could define description field for your message:
defineMessages.setupPrefix('components.some-component');
const messages = defineMessages({
greeting: {
defaultMessage: 'hello',
description: 'Some description'
}
});
will be transformed to:
const messages = defineMessages({
greeting: {
id: 'components.some-component.greeting',
defaultMessage: 'hello',
description: 'Some description'
}
});
Define id for message
You could define id for some of your message and it won't be override:
defineMessages.setupPrefix('components.some-component');
const messages = defineMessages({
greeting: {
id: 'my-existing-id',
defaultMessage: 'hello',
description: 'Some description'
}
});
will be transformed to:
const messages = defineMessages({
greeting: {
id: 'my-existing-id',
defaultMessage: 'hello',
description: 'Some description'
}
});
Configuration
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
module.exports = {
// ...
// Other macros config
defineMessages: {
relativeTo: 'src' // by default path is babel work directory
}
}
License
This package is licensed under MIT license.