[Tools] Rename i18n context field to description field (#25105) (#25204)

* [Tools] Rename React i18n context field to description field * Rename context to description in all i18n use cases
2018-11-06 18:11:32 +03:00 · 2018-11-06 18:11:32 +03:00 · f0bbb66bd6
parent 33cbfd76b5
commit f0bbb66bd6
30 changed files with 114 additions and 112 deletions
--- a/packages/kbn-i18n/README.md
+++ b/packages/kbn-i18n/README.md
@ -107,8 +107,8 @@ when missing translations
 For the detailed explanation, see the section below
 - `getFormats()` - returns current formats
 - `getRegisteredLocales()` - returns array of locales having translations
- `translate(id: string, [{values: object, defaultMessage: string, context: string}])` –
-translate message by id. `context` is optional context comment that will be extracted
+- `translate(id: string, [{values: object, defaultMessage: string, description: string}])` –
+translate message by id. `description` is optional context comment that will be extracted
 by i18n tools and added as a comment next to translation message at `defaultMessages.json`.
 - `init(messages: Map<string, string>)` - initializes the engine

@ -269,7 +269,7 @@ class RootComponent extends Component {
 }
 ```

-Optionally we can pass `context` prop into `FormattedMessage` component.
+Optionally we can pass `description` prop into `FormattedMessage` component.
 This prop is optional context comment that will be extracted by i18n tools
 and added as a comment next to translation message at `defaultMessages.json`

@ -292,6 +292,7 @@ const MyComponentContent = ({ intl }) => (
        id: 'welcome',
        defaultMessage: 'Hello {name}, you have {unreadCount, number}\
 {unreadCount, plural, one {message} other {messages}}',
+        description: 'Message description',
      },
      { name, unreadCount }
    )}
@ -356,13 +357,13 @@ when missing translations
 - `init(messages: Map<string, string>)` - initializes the engine

 The translation `service` provides only one method:
- `i18n(id: string, [{values: object, defaultMessage: string, context: string }])`–
+- `i18n(id: string, [{values: object, defaultMessage: string, description: string }])`–
 translate message by id

 The translation `filter` is used for attributes translation and has
 the following syntax:
 ```
-{{'translationId' | i18n[:{ values: object, defaultMessage: string, context: string }]}}
+{{'translationId' | i18n[:{ values: object, defaultMessage: string, description: string }]}}
 ```

 Where:
@ -370,7 +371,7 @@ Where:
 - `values` - values to pass into translation
 - `defaultMessage` - will be used unless translation was successful (the final
  fallback in english, will be used for generating `en.json`)
- `context` - optional context comment that will be extracted by i18n tools
+- `description` - optional context comment that will be extracted by i18n tools
 and added as a comment next to translation message at `defaultMessages.json`

 The translation `directive` has the following syntax:
@ -379,7 +380,7 @@ The translation `directive` has the following syntax:
  i18n-id="{string}"
  [i18n-values="{object}"]
  [i18n-default-message="{string}"]
-  [i18n-context="{string}"]
+  [i18n-description="{string}"]
 ></ANY>
 ```

@ -387,7 +388,7 @@ Where:
 - `i18n-id` - translation id to be translated
 - `i18n-values` - values to pass into translation
 - `i18n-default-message` - will be used unless translation was successful
- `i18n-context` - optional context comment that will be extracted by i18n tools
+- `i18n-description` - optional context comment that will be extracted by i18n tools
 and added as a comment next to translation message at `defaultMessages.json`

 Angular `I18n` module is placed into `autoload` module, so it will be
--- a/packages/kbn-i18n/src/core/i18n.ts
+++ b/packages/kbn-i18n/src/core/i18n.ts
@ -167,7 +167,7 @@ export function getRegisteredLocales() {
 interface TranslateArguments {
  values?: { [key: string]: string | number | Date };
  defaultMessage?: string;
-  context?: string;
+  description?: string;
 }

 /**
--- a/src/dev/i18n/fixtures/extract_default_translations/test_plugin_1/test_file_1.jsx
+++ b/src/dev/i18n/fixtures/extract_default_translations/test_plugin_1/test_file_1.jsx
@ -6,7 +6,7 @@ i18n('plugin_1.id_1', { defaultMessage: 'Message 1' });
 // @kbn/i18n
 i18n.translate('plugin_1.id_2', {
  defaultMessage: 'Message 2',
-  context: 'Message context',
+  description: 'Message description',
 });

 // React component. FormattedMessage, Intl.formatMessage()
--- a/src/dev/i18n/fixtures/extract_default_translations/test_plugin_3/test_file.jsx
+++ b/src/dev/i18n/fixtures/extract_default_translations/test_plugin_3/test_file.jsx
@ -4,5 +4,5 @@ i18n('plugin_3.duplicate_id', { defaultMessage: 'Message 1' });

 i18n.translate('plugin_3.duplicate_id', {
  defaultMessage: 'Message 2',
-  context: 'Message context',
+  description: 'Message description',
 });
--- a/src/dev/i18n/snapshots/extract_default_translations.test.js.snap
+++ b/src/dev/i18n/snapshots/extract_default_translations.test.js.snap
@ -5,49 +5,49 @@ Array [
  Array [
    "plugin_1.id_1",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message 1",
    },
  ],
  Array [
    "plugin_1.id_2",
    Object {
-      "context": "Message context",
+      "description": "Message description",
      "message": "Message 2",
    },
  ],
  Array [
    "plugin_1.id_3",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message 3",
    },
  ],
  Array [
    "plugin_1.id_4",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message 4",
    },
  ],
  Array [
    "plugin_1.id_5",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message 5",
    },
  ],
  Array [
    "plugin_1.id_6",
    Object {
-      "context": "",
+      "description": "",
      "message": "Message 6",
    },
  ],
  Array [
    "plugin_1.id_7",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message 7",
    },
  ],
--- a/src/dev/i18n/constants.js
+++ b/src/dev/i18n/constants.js
@ -18,5 +18,5 @@
 */

 export const DEFAULT_MESSAGE_KEY = 'defaultMessage';
-export const CONTEXT_KEY = 'context';
+export const DESCRIPTION_KEY = 'description';
 export const VALUES_KEY = 'values';
--- a/src/dev/i18n/extractors/snapshots/code.test.js.snap
+++ b/src/dev/i18n/extractors/snapshots/code.test.js.snap
@ -5,21 +5,21 @@ Array [
  Array [
    "kbn.mgmt.id-1",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message text 1",
    },
  ],
  Array [
    "kbn.mgmt.id-2",
    Object {
-      "context": "Message context",
+      "description": "Message description",
      "message": "Message text 2",
    },
  ],
  Array [
    "kbn.mgmt.id-3",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message text 3",
    },
  ],
--- a/src/dev/i18n/extractors/snapshots/handlebars.test.js.snap
+++ b/src/dev/i18n/extractors/snapshots/handlebars.test.js.snap
@ -5,7 +5,7 @@ Array [
  Array [
    "ui.id-1",
    Object {
-      "context": "Message context",
+      "description": "Message description",
      "message": "Message text",
    },
  ],
--- a/src/dev/i18n/extractors/snapshots/html.test.js.snap
+++ b/src/dev/i18n/extractors/snapshots/html.test.js.snap
@ -5,21 +5,21 @@ Array [
  Array [
    "kbn.dashboard.id-1",
    Object {
-      "context": "Message context 1",
+      "description": "Message description 1",
      "message": "Message text 1 {value}",
    },
  ],
  Array [
    "kbn.dashboard.id-2",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message text 2",
    },
  ],
  Array [
    "kbn.dashboard.id-3",
    Object {
-      "context": "Message context 3",
+      "description": "Message description 3",
      "message": "Message text 3",
    },
  ],
@ -31,7 +31,7 @@ Array [
  Array [
    "kbn.id",
    Object {
-      "context": undefined,
+      "description": undefined,
      "message": "Message text with {value}",
    },
  ],
--- a/src/dev/i18n/extractors/snapshots/i18n_call.test.js.snap
+++ b/src/dev/i18n/extractors/snapshots/i18n_call.test.js.snap
@ -4,7 +4,7 @@ exports[`dev/i18n/extractors/i18n_call extracts "i18n" and "i18n.translate" func
 Array [
  "message-id-1",
  Object {
-    "context": "Message context 1",
+    "description": "Message description 1",
    "message": "Default message 1",
  },
 ]
@ -14,7 +14,7 @@ exports[`dev/i18n/extractors/i18n_call extracts "i18n" and "i18n.translate" func
 Array [
  "message-id-2",
  Object {
-    "context": "Message context 2",
+    "description": "Message description 2",
    "message": "Default message 2",
  },
 ]
@ -24,8 +24,8 @@ exports[`dev/i18n/extractors/i18n_call extracts "i18n" and "i18n.translate" func
 Array [
  "message-id-3",
  Object {
-    "context": "Message
-context 3",
+    "description": "Message
+description 3",
    "message": "Default
 message 3",
  },
--- a/src/dev/i18n/extractors/snapshots/pug.test.js.snap
+++ b/src/dev/i18n/extractors/snapshots/pug.test.js.snap
@ -4,7 +4,7 @@ exports[`dev/i18n/extractors/pug extracts messages from pug template with interp
 Array [
  "message-id",
  Object {
-    "context": "Message context",
+    "description": "Message description",
    "message": "Default message",
  },
 ]
@ -14,7 +14,7 @@ exports[`dev/i18n/extractors/pug extracts messages from pug template without int
 Array [
  "message-id",
  Object {
-    "context": "Message context",
+    "description": "Message description",
    "message": "Default message",
  },
 ]
--- a/src/dev/i18n/extractors/snapshots/react.test.js.snap
+++ b/src/dev/i18n/extractors/snapshots/react.test.js.snap
@ -4,7 +4,7 @@ exports[`dev/i18n/extractors/react extractFormattedMessages extracts messages fr
 Array [
  "message-id-2",
  Object {
-    "context": "Message context 2",
+    "description": "Message description 2",
    "message": "Default message 2",
  },
 ]
@ -14,13 +14,13 @@ exports[`dev/i18n/extractors/react extractIntlMessages extracts messages from "i
 Array [
  "message-id-1",
  Object {
-    "context": "Message context 1",
+    "description": "Message description 1",
    "message": "Default message 1",
  },
 ]
 `;

-exports[`dev/i18n/extractors/react extractIntlMessages throws if context value is not a string literal 1`] = `"context value should be a string or template literal (\\"message-id\\")."`;
+exports[`dev/i18n/extractors/react extractIntlMessages throws if description value is not a string literal 1`] = `"description value should be a string or template literal (\\"message-id\\")."`;

 exports[`dev/i18n/extractors/react extractIntlMessages throws if defaultMessage value is not a string literal 1`] = `"defaultMessage value should be a string or template literal (\\"message-id\\")."`;

--- a/src/dev/i18n/extractors/code.test.js
+++ b/src/dev/i18n/extractors/code.test.js
@ -37,7 +37,7 @@ class Component extends PureComponent {
        <FormattedMessage
          id="kbn.mgmt.id-2"
          defaultMessage="Message text 2"
-          context="Message context"
+          description="Message description"
        />
        {intl.formatMessage({ id: 'kbn.mgmt.id-3', defaultMessage: 'Message text 3' })}
      </div>
@ -47,10 +47,10 @@ class Component extends PureComponent {
 `);

 const intlFormatMessageSource = `
-  formatMessage({ id: 'kbn.mgmt.id-1', defaultMessage: 'Message text 1', context: 'Message context' });
-  intl.formatMessage({ id: 'kbn.mgmt.id-2', defaultMessage: 'Message text 2', context: 'Message context' });
-  props.intl.formatMessage({ id: 'kbn.mgmt.id-5', defaultMessage: 'Message text 5', context: 'Message context' });
-  this.props.intl.formatMessage({ id: 'kbn.mgmt.id-6', defaultMessage: 'Message text 6', context: 'Message context' });
+  formatMessage({ id: 'kbn.mgmt.id-1', defaultMessage: 'Message text 1', description: 'Message description' });
+  intl.formatMessage({ id: 'kbn.mgmt.id-2', defaultMessage: 'Message text 2', description: 'Message description' });
+  props.intl.formatMessage({ id: 'kbn.mgmt.id-5', defaultMessage: 'Message text 5', description: 'Message description' });
+  this.props.intl.formatMessage({ id: 'kbn.mgmt.id-6', defaultMessage: 'Message text 6', description: 'Message description' });
 `;

 const formattedMessageSource = `
@ -59,7 +59,7 @@ function f() {
    <FormattedMessage
      id="kbn.mgmt.id-1"
      defaultMessage="Message text 1"
-      context="Message context"
+      description="Message description"
    />
  );
 }
--- a/src/dev/i18n/extractors/handlebars.js
+++ b/src/dev/i18n/extractors/handlebars.js
@ -19,6 +19,7 @@

 import { formatJSString, checkValuesProperty } from '../utils';
 import { createFailError } from '../../run';
+import { DEFAULT_MESSAGE_KEY, DESCRIPTION_KEY } from '../constants';

 const HBS_REGEX = /(?<=\{\{)([\s\S]*?)(?=\}\})/g;
 const TOKENS_REGEX = /[^'\s]+|(?:'([^'\\]|\\[\s\S])*')/g;
@ -64,14 +65,14 @@ export function* extractHandlebarsMessages(buffer) {
      );
    }

-    if (properties.context != null && typeof properties.context !== 'string') {
+    if (properties[DESCRIPTION_KEY] != null && typeof properties[DESCRIPTION_KEY] !== 'string') {
      throw createFailError(
-        `Context value in Handlebars i18n should be a string ("${messageId}").`
+        `Description value in Handlebars i18n should be a string ("${messageId}").`
      );
    }

-    const message = formatJSString(properties.defaultMessage);
-    const context = formatJSString(properties.context);
+    const message = formatJSString(properties[DEFAULT_MESSAGE_KEY]);
+    const description = formatJSString(properties[DESCRIPTION_KEY]);

    if (!message) {
      throw createFailError(
@ -89,6 +90,6 @@ export function* extractHandlebarsMessages(buffer) {

    checkValuesProperty(Object.keys(valuesObject || {}), message, messageId);

-    yield [messageId, { message, context }];
+    yield [messageId, { message, description }];
  }
 }
--- a/src/dev/i18n/extractors/handlebars.test.js
+++ b/src/dev/i18n/extractors/handlebars.test.js
@ -30,7 +30,7 @@ window.onload = function () {
      var err = document.createElement('h1');
      err.style['color'] = 'white';
      err.innerText = '{{i18n 'ui.id-1' \
-'{"defaultMessage": "Message text", "context": "Message context"}'}}';
+'{"defaultMessage": "Message text", "description": "Message description"}'}}';

      document.body.innerHTML = err.outerHTML;
    }
@ -65,7 +65,7 @@ window.onload = function () {
  test('throws on empty id', () => {
    const source = Buffer.from(`\
 window.onload = function () {
-  err.innerText = '{{i18n '' '{"defaultMessage": "Message text", "context": "Message context"}'}}';
+  err.innerText = '{{i18n '' '{"defaultMessage": "Message text", "description": "Message description"}'}}';
 };
 `);

@ -75,7 +75,7 @@ window.onload = function () {
  test('throws on missing defaultMessage property', () => {
    const source = Buffer.from(`\
 window.onload = function () {
-  err.innerText = '{{i18n 'message-id' '{"context": "Message context"}'}}';
+  err.innerText = '{{i18n 'message-id' '{"description": "Message description"}'}}';
 };
 `);

--- a/src/dev/i18n/extractors/html.js
+++ b/src/dev/i18n/extractors/html.js
@ -30,9 +30,9 @@ import {
  createParserErrorMessage,
  extractMessageValueFromNode,
  extractValuesKeysFromNode,
-  extractContextValueFromNode,
+  extractDescriptionValueFromNode,
 } from '../utils';
-import { DEFAULT_MESSAGE_KEY, CONTEXT_KEY, VALUES_KEY } from '../constants';
+import { DEFAULT_MESSAGE_KEY, DESCRIPTION_KEY, VALUES_KEY } from '../constants';
 import { createFailError } from '../../run';

 /**
@ -64,7 +64,7 @@ function parseExpression(expression) {
 * Extract default message from an angular filter expression argument
 * @param {string} expression JavaScript code containing a filter object
 * @param {string} messageId id of the message
- * @returns {{ message?: string, context?: string, valuesKeys: string[]] }}
+ * @returns {{ message?: string, description?: string, valuesKeys: string[]] }}
 */
 function parseFilterObjectExpression(expression, messageId) {
  const ast = parseExpression(expression);
@ -76,9 +76,9 @@ function parseFilterObjectExpression(expression, messageId) {
    return {};
  }

-  const [messageProperty, contextProperty, valuesProperty] = [
+  const [messageProperty, descriptionProperty, valuesProperty] = [
    DEFAULT_MESSAGE_KEY,
-    CONTEXT_KEY,
+    DESCRIPTION_KEY,
    VALUES_KEY,
  ].map(key => objectExpressionNode.properties.find(property => isPropertyWithKey(property, key)));

@ -86,15 +86,15 @@ function parseFilterObjectExpression(expression, messageId) {
    ? formatJSString(extractMessageValueFromNode(messageProperty.value, messageId))
    : undefined;

-  const context = contextProperty
-    ? formatJSString(extractContextValueFromNode(contextProperty.value, messageId))
+  const description = descriptionProperty
+    ? formatJSString(extractDescriptionValueFromNode(descriptionProperty.value, messageId))
    : undefined;

  const valuesKeys = valuesProperty
    ? extractValuesKeysFromNode(valuesProperty.value, messageId)
    : [];

-  return { message, context, valuesKeys };
+  return { message, description, valuesKeys };
 }

 function parseIdExpression(expression) {
@ -196,7 +196,7 @@ function* getFilterMessages(htmlContent) {
      throw createFailError(`Empty "id" value in angular filter expression is not allowed.`);
    }

-    const { message, context, valuesKeys } = parseFilterObjectExpression(
+    const { message, description, valuesKeys } = parseFilterObjectExpression(
      filterObjectExpression,
      messageId
    );
@ -209,7 +209,7 @@ function* getFilterMessages(htmlContent) {

    checkValuesProperty(valuesKeys, message, messageId);

-    yield [messageId, { message, context }];
+    yield [messageId, { message, description }];
  }
 }

@ -222,7 +222,7 @@ function* getDirectiveMessages(htmlContent) {
      return {
        id: $el.attr('i18n-id'),
        defaultMessage: $el.attr('i18n-default-message'),
-        context: $el.attr('i18n-context'),
+        description: $el.attr('i18n-description'),
        values: $el.attr('i18n-values'),
      };
    })
@ -253,7 +253,7 @@ function* getDirectiveMessages(htmlContent) {
      checkValuesProperty([], message, messageId);
    }

-    yield [messageId, { message, context: formatHTMLString(element.context) || undefined }];
+    yield [messageId, { message, description: formatHTMLString(element.description) || undefined }];
  }
 }

--- a/src/dev/i18n/extractors/html.test.js
+++ b/src/dev/i18n/extractors/html.test.js
@ -25,7 +25,7 @@ const htmlSourceBuffer = Buffer.from(`
    <p
      i18n-id="kbn.dashboard.id-1"
      i18n-default-message="Message text 1 {value}"
-      i18n-context="Message context 1"
+      i18n-description="Message description 1"
      i18n-values="{
        value: 'Multiline
                string',
@ -36,7 +36,7 @@ const htmlSourceBuffer = Buffer.from(`
    {{ 'kbn.dashboard.id-2' | i18n: { defaultMessage: 'Message text 2' } }}
  </div>
  <div>
-    {{ 'kbn.dashboard.id-3' | i18n: { defaultMessage: 'Message text 3', context: 'Message context 3' } }}
+    {{ 'kbn.dashboard.id-3' | i18n: { defaultMessage: 'Message text 3', description: 'Message description 3' } }}
  </div>
 </div>
 `);
@ -63,7 +63,7 @@ describe('dev/i18n/extractors/html', () => {
 <p
  i18n-id=""
  i18n-default-message="Message text"
-  i18n-context="Message context"
+  i18n-description="Message description"
 ></p>
 `);

--- a/src/dev/i18n/extractors/i18n_call.js
+++ b/src/dev/i18n/extractors/i18n_call.js
@ -25,10 +25,10 @@ import {
  checkValuesProperty,
  extractMessageIdFromNode,
  extractMessageValueFromNode,
-  extractContextValueFromNode,
+  extractDescriptionValueFromNode,
  extractValuesKeysFromNode,
 } from '../utils';
-import { DEFAULT_MESSAGE_KEY, CONTEXT_KEY, VALUES_KEY } from '../constants';
+import { DEFAULT_MESSAGE_KEY, DESCRIPTION_KEY, VALUES_KEY } from '../constants';
 import { createFailError } from '../../run';

 /**
@ -48,9 +48,9 @@ export function extractI18nCallMessages(node) {
    );
  }

-  const [messageProperty, contextProperty, valuesProperty] = [
+  const [messageProperty, descriptionProperty, valuesProperty] = [
    DEFAULT_MESSAGE_KEY,
-    CONTEXT_KEY,
+    DESCRIPTION_KEY,
    VALUES_KEY,
  ].map(key => optionsSubTree.properties.find(property => isPropertyWithKey(property, key)));

@ -58,8 +58,8 @@ export function extractI18nCallMessages(node) {
    ? formatJSString(extractMessageValueFromNode(messageProperty.value, messageId))
    : undefined;

-  const context = contextProperty
-    ? formatJSString(extractContextValueFromNode(contextProperty.value, messageId))
+  const description = descriptionProperty
+    ? formatJSString(extractDescriptionValueFromNode(descriptionProperty.value, messageId))
    : undefined;

  if (!message) {
@ -74,5 +74,5 @@ export function extractI18nCallMessages(node) {

  checkValuesProperty(valuesKeys, message, messageId);

-  return [messageId, { message, context }];
+  return [messageId, { message, description }];
 }
--- a/src/dev/i18n/extractors/i18n_call.test.js
+++ b/src/dev/i18n/extractors/i18n_call.test.js
@ -24,17 +24,17 @@ import { extractI18nCallMessages } from './i18n_call';
 import { traverseNodes } from '../utils';

 const i18nCallMessageSource = `
-i18n('message-id-1', { defaultMessage: 'Default message 1', context: 'Message context 1' });
+i18n('message-id-1', { defaultMessage: 'Default message 1', description: 'Message description 1' });
 `;

 const translateCallMessageSource = `
-i18n.translate('message-id-2', { defaultMessage: 'Default message 2', context: 'Message context 2' });
+i18n.translate('message-id-2', { defaultMessage: 'Default message 2', description: 'Message description 2' });
 `;

 const i18nCallMessageWithTemplateLiteralSource = `
 i18n('message-id-3', { defaultMessage: \`Default
-message 3\`, context: \`Message
-context 3\` });
+message 3\`, description: \`Message
+description 3\` });
 `;

 describe('dev/i18n/extractors/i18n_call', () => {
@ -60,7 +60,7 @@ describe('dev/i18n/extractors/i18n_call', () => {

  test('throws if message id value is not a string literal', () => {
    const source = `
-i18n(messageIdIdentifier, { defaultMessage: 'Default message', context: 'Message context' });
+i18n(messageIdIdentifier, { defaultMessage: 'Default message', description: 'Message description' });
 `;
    const callExpressionNode = [...traverseNodes(parse(source).program.body)].find(node =>
      isCallExpression(node)
--- a/src/dev/i18n/extractors/pug.test.js
+++ b/src/dev/i18n/extractors/pug.test.js
@ -22,7 +22,7 @@ import { extractPugMessages } from './pug';
 describe('dev/i18n/extractors/pug', () => {
  test('extracts messages from pug template with interpolation', () => {
    const source = Buffer.from(`\
-#{i18n('message-id', { defaultMessage: 'Default message', context: 'Message context' })}
+#{i18n('message-id', { defaultMessage: 'Default message', description: 'Message description' })}
 `);
    const [messageObject] = extractPugMessages(source);

@ -31,7 +31,7 @@ describe('dev/i18n/extractors/pug', () => {

  test('extracts messages from pug template without interpolation', () => {
    const source = Buffer.from(`\
-.kibanaWelcomeText(data-error-message=i18n('message-id', { defaultMessage: 'Default message', context: 'Message context' }))
+.kibanaWelcomeText(data-error-message=i18n('message-id', { defaultMessage: 'Default message', description: 'Message description' }))
 `);
    const [messageObject] = extractPugMessages(source);

@ -40,7 +40,7 @@ describe('dev/i18n/extractors/pug', () => {

  test('throws on empty id', () => {
    const source = Buffer.from(`\
-h1= i18n('', { defaultMessage: 'Default message', context: 'Message context' })
+h1= i18n('', { defaultMessage: 'Default message', description: 'Message description' })
 `);

    expect(() => extractPugMessages(source).next()).toThrowErrorMatchingSnapshot();
@ -48,7 +48,7 @@ h1= i18n('', { defaultMessage: 'Default message', context: 'Message context' })

  test('throws on missing default message', () => {
    const source = Buffer.from(`\
-#{i18n('message-id', { context: 'Message context' })}
+#{i18n('message-id', { description: 'Message description' })}
 `);

    expect(() => extractPugMessages(source).next()).toThrowErrorMatchingSnapshot();
--- a/src/dev/i18n/extractors/react.js
+++ b/src/dev/i18n/extractors/react.js
@ -25,11 +25,11 @@ import {
  formatHTMLString,
  extractMessageIdFromNode,
  extractMessageValueFromNode,
-  extractContextValueFromNode,
+  extractDescriptionValueFromNode,
  extractValuesKeysFromNode,
  checkValuesProperty,
 } from '../utils';
-import { DEFAULT_MESSAGE_KEY, CONTEXT_KEY, VALUES_KEY } from '../constants';
+import { DEFAULT_MESSAGE_KEY, VALUES_KEY, DESCRIPTION_KEY } from '../constants';
 import { createFailError } from '../../run';

 /**
@ -46,10 +46,10 @@ export function extractIntlMessages(node) {
    );
  }

-  const [messageIdProperty, messageProperty, contextProperty] = [
+  const [messageIdProperty, messageProperty, descriptionProperty] = [
    'id',
    DEFAULT_MESSAGE_KEY,
-    CONTEXT_KEY,
+    DESCRIPTION_KEY,
  ].map(key => options.properties.find(property => isPropertyWithKey(property, key)));

  const messageId = messageIdProperty
@ -64,8 +64,8 @@ export function extractIntlMessages(node) {
    ? formatJSString(extractMessageValueFromNode(messageProperty.value, messageId))
    : undefined;

-  const context = contextProperty
-    ? formatJSString(extractContextValueFromNode(contextProperty.value, messageId))
+  const description = descriptionProperty
+    ? formatJSString(extractDescriptionValueFromNode(descriptionProperty.value, messageId))
    : undefined;

  if (!message) {
@ -78,7 +78,7 @@ export function extractIntlMessages(node) {

  checkValuesProperty(valuesKeys, message, messageId);

-  return [messageId, { message, context }];
+  return [messageId, { message, description }];
 }

 /**
@ -87,10 +87,10 @@ export function extractIntlMessages(node) {
 * @returns {[string, string][]} Array of id-message tuples
 */
 export function extractFormattedMessages(node) {
-  const [messageIdAttribute, messageAttribute, contextAttribute, valuesAttribute] = [
+  const [messageIdAttribute, messageAttribute, descriptionAttribute, valuesAttribute] = [
    'id',
    DEFAULT_MESSAGE_KEY,
-    CONTEXT_KEY,
+    DESCRIPTION_KEY,
    VALUES_KEY,
  ].map(key => node.attributes.find(attribute => isJSXIdentifier(attribute.name, { name: key })));

@ -106,8 +106,8 @@ export function extractFormattedMessages(node) {
    ? formatHTMLString(extractMessageValueFromNode(messageAttribute.value, messageId))
    : undefined;

-  const context = contextAttribute
-    ? formatHTMLString(extractContextValueFromNode(contextAttribute.value, messageId))
+  const description = descriptionAttribute
+    ? formatHTMLString(extractDescriptionValueFromNode(descriptionAttribute.value, messageId))
    : undefined;

  if (!message) {
@ -132,5 +132,5 @@ export function extractFormattedMessages(node) {

  checkValuesProperty(valuesKeys, message, messageId);

-  return [messageId, { message, context }];
+  return [messageId, { message, description }];
 }
--- a/src/dev/i18n/extractors/react.test.js
+++ b/src/dev/i18n/extractors/react.test.js
@ -30,7 +30,7 @@ const MyComponentContent = ({ intl }) => (
    placeholder={intl.formatMessage({
      id: 'message-id-1',
      defaultMessage: 'Default message 1',
-      context: 'Message context 1'
+      description: 'Message description 1'
    })}
  />
 );
@ -44,7 +44,7 @@ class Component extends PureComponent {
        <FormattedMessage
          id="message-id-2"
          defaultMessage="Default message 2"
-          context="Message context 2"
+          description="Message description 2"
        />
      </p>
    );
@ -58,7 +58,7 @@ const messageId = 'message-id'
 intl.formatMessage({
  id: messageId,
  defaultMessage: 'Default message',
-  context: 'Message context'
+  description: 'Message description'
 });
 `,
  `
@ -66,15 +66,15 @@ intl.formatMessage({
  intl.formatMessage({
    id: 'message-id',
    defaultMessage: message,
-    context: 'Message context'
+    description: 'Message description'
  });
 `,
  `
-const context = 'Message context'
+const description = 'Message description'
 intl.formatMessage({
  id: 'message-id',
  defaultMessage: 'Default message',
-  context
+  description: 1
 });
 `,
 ];
@ -110,7 +110,7 @@ describe('dev/i18n/extractors/react', () => {
      expect(() => extractIntlMessages(callExpressionNode)).toThrowErrorMatchingSnapshot();
    });

-    test('throws if context value is not a string literal', () => {
+    test('throws if description value is not a string literal', () => {
      const source = intlFormatMessageCallErrorSources[2];
      const ast = parse(source, { plugins: ['jsx'] });
      const callExpressionNode = [...traverseNodes(ast.program.body)].find(node =>
--- a/src/dev/i18n/serializers/snapshots/json.test.js.snap
+++ b/src/dev/i18n/serializers/snapshots/json.test.js.snap
@ -62,7 +62,7 @@ exports[`dev/i18n/serializers/json should serialize default messages to JSON 1`]
    \\"plugin1.message.id-1\\": \\"Message text 1 \\",
    \\"plugin2.message.id-2\\": {
      \\"text\\": \\"Message text 2\\",
-      \\"comment\\": \\"Message context\\"
+      \\"comment\\": \\"Message description\\"
    }
  }
 }"
--- a/src/dev/i18n/serializers/snapshots/json5.test.js.snap
+++ b/src/dev/i18n/serializers/snapshots/json5.test.js.snap
@ -60,7 +60,7 @@ exports[`dev/i18n/serializers/json5 should serialize default messages to JSON5 1
  },
  messages: {
    'plugin1.message.id-1': 'Message text 1',
-    'plugin2.message.id-2': 'Message text 2', // Message context
+    'plugin2.message.id-2': 'Message text 2', // Message description
  },
 }
 "
--- a/src/dev/i18n/serializers/json.js
+++ b/src/dev/i18n/serializers/json.js
@ -23,8 +23,8 @@ export function serializeToJson(defaultMessages) {
  const resultJsonObject = { formats: i18n.formats, messages: {} };

  for (const [mapKey, mapValue] of defaultMessages) {
-    if (mapValue.context) {
-      resultJsonObject.messages[mapKey] = { text: mapValue.message, comment: mapValue.context };
+    if (mapValue.description) {
+      resultJsonObject.messages[mapKey] = { text: mapValue.message, comment: mapValue.description };
    } else {
      resultJsonObject.messages[mapKey] = mapValue.message;
    }
--- a/src/dev/i18n/serializers/json.test.js
+++ b/src/dev/i18n/serializers/json.test.js
@ -27,7 +27,7 @@ describe('dev/i18n/serializers/json', () => {
        'plugin2.message.id-2',
        {
          message: 'Message text 2',
-          context: 'Message context',
+          description: 'Message description',
        },
      ],
    ]);
--- a/src/dev/i18n/serializers/json5.js
+++ b/src/dev/i18n/serializers/json5.js
@ -32,14 +32,14 @@ export function serializeToJson5(defaultMessages) {

  for (const [mapKey, mapValue] of defaultMessages) {
    const formattedMessage = mapValue.message.replace(ESCAPE_SINGLE_QUOTE_REGEX, '\\$1$2');
-    const formattedContext = mapValue.context
-      ? mapValue.context.replace(ESCAPE_SINGLE_QUOTE_REGEX, '\\$1$2')
+    const formattedDescription = mapValue.description
+      ? mapValue.description.replace(ESCAPE_SINGLE_QUOTE_REGEX, '\\$1$2')
      : '';

    jsonBuffer = Buffer.concat([
      jsonBuffer,
      Buffer.from(`    '${mapKey}': '${formattedMessage}',`),
-      Buffer.from(formattedContext ? ` // ${formattedContext}\n` : '\n'),
+      Buffer.from(formattedDescription ? ` // ${formattedDescription}\n` : '\n'),
    ]);
  }

--- a/src/dev/i18n/serializers/json5.test.js
+++ b/src/dev/i18n/serializers/json5.test.js
@ -32,7 +32,7 @@ describe('dev/i18n/serializers/json5', () => {
        'plugin2.message.id-2',
        {
          message: 'Message text 2',
-          context: 'Message context',
+          description: 'Message description',
        },
      ],
    ]);
--- a/src/dev/i18n/utils.js
+++ b/src/dev/i18n/utils.js
@ -226,7 +226,7 @@ export function extractMessageValueFromNode(node, messageId) {
  );
 }

-export function extractContextValueFromNode(node, messageId) {
+export function extractDescriptionValueFromNode(node, messageId) {
  if (isStringLiteral(node)) {
    return node.value;
  }
@ -236,7 +236,7 @@ export function extractContextValueFromNode(node, messageId) {
  }

  throw createFailError(
-    `context value should be a string or template literal ("${messageId}").`
+    `description value should be a string or template literal ("${messageId}").`
  );
 }

--- a/src/dev/i18n/utils.test.js
+++ b/src/dev/i18n/utils.test.js
@ -36,7 +36,7 @@ ${callee}('plugin_1.id_1', {
    key: 'value',
  },
  defaultMessage: 'Message text',
-  context: 'Message context'
+  description: 'Message description'
 });
 `
 );