Define-messages.macro NPM

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

npm install --save-dev babel-plugin-macros

and add in .babelrc:

{
  "plugins": ["macros"]
}

Install define-messages.macro

Just install define-messages.macro with npm or yarn

npm install --save-dev define-messages.macro

That’s it!

Basic Usage

import defineMessages from 'define-messages.macro'
(optional) setup id unique prefix for file using setupPrefix method
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

More Examples

Without `setupPrefix` method

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'
});

Define description field

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'
    }
});

Define id for message

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',
        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.js
babel-plugin-macros.config.js
babelMacros in package.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 
    }
}