feat: add defineMessage macro to tag single message

Author: longlho

README.md

@@ -36,7 +36,7 @@ _(If you're looking for React Intl v1, you can find it [here][v1-docs].)_
 
 There are several [runnable examples][examples] in this Git repo, but here's a Hello World one:
 
-```js
+```tsx
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import {IntlProvider, FormattedMessage} from 'react-intl';

docs/Getting-Started.md

@@ -62,7 +62,7 @@ If you need to support older browsers, we recommend you do the following:
 2. Polyfill `Intl.DateTimeFormat` with https://github.com/formatjs/date-time-format-timezone
 3. If you're supporting browsers that do not have [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules) (e.g IE11 & Safari 12-), include this [polyfill](https://www.npmjs.com/package/@formatjs/intl-pluralrules) in your build.
 
-```js
+```tsx
 if (!Intl.PluralRules) {
   require('@formatjs/intl-pluralrules/polyfill');
   require('@formatjs/intl-pluralrules/dist/locale-data/de'); // Add locale data for de
@@ -71,7 +71,7 @@ if (!Intl.PluralRules) {
 
 4. If you're supporting browsers that do not have [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat) (e.g IE11, Edge, Safari 12-), include this [polyfill](https://www.npmjs.com/package/@formatjs/intl-relativetimeformat) in your build along with individual CLDR data for each locale you support.
 
-```js
+```tsx
 if (!Intl.RelativeTimeFormat) {
   require('@formatjs/intl-relativetimeformat/polyfill');
   require('@formatjs/intl-relativetimeformat/dist/locale-data/de'); // Add locale data for de
@@ -81,7 +81,7 @@ if (!Intl.RelativeTimeFormat) {
 5. If you need `Intl.DisplayNames`, include this [polyfill][displaynames-polyfill] in your build along
    with individual CLDR data for each locale you support.
 
-```js
+```tsx
 if (!Intl.DisplayNames) {
   require('@formatjs/intl-displaynames/polyfill');
   require('@formatjs/intl-displaynames/dist/locale-data/de'); // Add locale data for de

docs/Testing-with-React-Intl.md

@@ -67,7 +67,7 @@ The following examples will assume `mocha`, `expect`, and `expect-jsx` test fram
 
 #### <ShortDate> (Basic)
 
-```js
+```tsx
 import React from 'react';
 import {FormattedDate} from 'react-intl';
 
@@ -85,7 +85,7 @@ export default ShortDate;
 
 Testing the `<ShortDate>` example component is no different than testing any other basic component in your app using React's shallow rendering:
 
-```js
+```tsx
 import expect from 'expect';
 import expectJSX from 'expect-jsx';
 import React from 'react';
@@ -110,7 +110,7 @@ describe('<ShortDate>', function() {
 
 #### <RelativeDate> (Advanced, Uses `injectIntl()`)
 
-```js
+```tsx
 import React, {Component} from 'react';
 import {injectIntl, FormattedRelative} from 'react-intl';
 
@@ -131,7 +131,7 @@ Shallow rendering only tests one level deep and we want to test the rendering of
 
 Under the hood, `injectIntl()` passes `context.intl` which was created from the `<IntlProvider>` in the component's ancestry to `props.intl`. What we need to do is simulate this for our shallow rendering test:
 
-```js
+```tsx
 import expect from 'expect';
 import expectJSX from 'expect-jsx';
 import React from 'react';
@@ -173,7 +173,7 @@ describe('<RelativeDate>', function() {
 
 If you use the DOM in your tests, you need to supply the `IntlProvider` context to your components using composition:
 
-```js
+```tsx
 let element = ReactTestUtils.renderIntoDocument(
   <IntlProvider>
     <MyComponent />
@@ -185,7 +185,7 @@ However this means that the `element` reference is now pointing to the `IntlProv
 
 In your component, remember to add `{withRef: true}` when calling `injectIntl()`:
 
-```js
+```tsx
 class MyComponent extends React.Component {
   ...
   myClassFn() { ... }
@@ -195,7 +195,7 @@ export default injectIntl(MyComponent, {withRef: true});
 
 In your test, add a "ref" to extract the reference to your tested component:
 
-```js
+```tsx
 let element;
 let root = ReactTestUtils.renderIntoDocument(
   <IntlProvider>
@@ -206,15 +206,15 @@ let root = ReactTestUtils.renderIntoDocument(
 
 You can now access the wrapped component instance from `element` like this:
 
-```js
+```tsx
 element.myClassFn();
 ```
 
 ### Helper function
 
 Since you will have to do this in all your unit tests, you should probably wrap that setup in a `render` function like this:
 
-```js
+```tsx
 function renderWithIntl(element) {
   let instance;
 
@@ -232,7 +232,7 @@ function renderWithIntl(element) {
 
 You can now use this in your tests like this:
 
-```js
+```tsx
 let element = renderWithIntl(<MyElement>);
 element.myClassFn();
 ```
@@ -287,7 +287,7 @@ export function shallowWithIntl(node: React.ReactElement) {
 
 Create a file with the above helper in e.g. `helpers/intl-enzyme-test-helper.js` and `import` the methods you need in your tests.
 
-```js
+```tsx
 // intl-enzyme-test-helper.js
 
 import {mountWithIntl} from 'helpers/intl-enzyme-test-helper.js';
@@ -310,7 +310,7 @@ Snapshot testing is a new feature of Jest that automatically generates text snap
 
 #### Helper function
 
-```js
+```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {IntlProvider} from 'react-intl';
@@ -324,7 +324,7 @@ export default createComponentWithIntl;
 
 #### Usage
 
-```js
+```tsx
 import React from 'react';
 import createComponentWithIntl from '../../utils/createComponentWithIntl';
 import AppMain from '../AppMain';
@@ -350,7 +350,7 @@ You can find runnable example [here](https://github.com/formatjs/react-intl/tree
 
 Jest will automatically mock react-intl, so no any extra implementation is needed, tests should work as is:
 
-```js
+```tsx
 import React from 'react';
 import {shallow} from 'enzyme';
 import AppMain from '../AppMain';
@@ -384,30 +384,30 @@ Our custom `render` function can look like this:
 
 ```jsx
 // test-utils.js
-import React from 'react'
-import { render as rtlRender } from '@testing-library/react'
-import { IntlProvider } from 'react-intl'
+import React from 'react';
+import {render as rtlRender} from '@testing-library/react';
+import {IntlProvider} from 'react-intl';
 
-function render(ui, { locale = 'pt', ...renderOptions } = {}) {
-  function Wrapper({ children }) {
-    return <IntlProvider locale={locale}>{children}</IntlProvider>
+function render(ui, {locale = 'pt', ...renderOptions} = {}) {
+  function Wrapper({children}) {
+    return <IntlProvider locale={locale}>{children}</IntlProvider>;
   }
-  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
+  return rtlRender(ui, {wrapper: Wrapper, ...renderOptions});
 }
 
 // re-export everything
-export * from '@testing-library/react'
+export * from '@testing-library/react';
 
 // override render method
-export { render }
+export {render};
 ```
 
 ```jsx
-import React from 'react'
-import '@testing-library/jest-dom/extend-expect'
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
 // We're importing from our own created test-utils and not RTL's
-import { render, screen } from '../test-utils.js'
-import { FormattedDate } from 'react-intl'
+import {render, screen} from '../test-utils.js';
+import {FormattedDate} from 'react-intl';
 
 const FormatDateView = () => {
   return (
@@ -420,11 +420,11 @@ const FormatDateView = () => {
         year="numeric"
       />
     </div>
-  )
-}
+  );
+};
 
 test('it should render FormattedDate and have a formated pt date', () => {
-  render(<FormatDateView />)
-  expect(screen.getByTestId('date-display')).toHaveTextContent('11/03/2019')
-})
+  render(<FormatDateView />);
+  expect(screen.getByTestId('date-display')).toHaveTextContent('11/03/2019');
+});
 ```

docs/Upgrade-Guide-2.x.md

@@ -39,7 +39,7 @@ This assumes a locale data `<script>` is added based on the request; e.g., for F
 
 **Using `<script src="react-intl/dist/react-intl.js>`:**
 
-```js
+```tsx
 if ('ReactIntl' in window && 'ReactIntlLocaleData' in window) {
   Object.keys(ReactIntlLocaleData).forEach(lang => {
     ReactIntl.addLocaleData(ReactIntlLocaleData[lang]);
@@ -49,7 +49,7 @@ if ('ReactIntl' in window && 'ReactIntlLocaleData' in window) {
 
 **Using Browserify/Webpack to Load React Intl:**
 
-```js
+```tsx
 import {addLocaleData} from 'react-intl';
 
 if ('ReactIntlLocaleData' in window) {
@@ -69,7 +69,7 @@ if ('ReactIntlLocaleData' in window) {
 
 In React Intl v1, you would add the `IntlMixin` to your root component; e.g., `<App>`. Remove the `IntlMixin` and instead wrap your root component with [`<IntlProvider>`](Components#intlprovider):
 
-```js
+```tsx
 import ReactDOM from 'react-dom';
 import {IntlProvider} from 'react-intl';
 
@@ -89,7 +89,7 @@ The `IntlMixin` also provided the imperative API for custom components to use th
 
 Here's an example of a custom `<RelativeTime>` stateless component which uses `injectIntl()` and the imperative [`formatDate()`](API.md#formatdate) API:
 
-```js
+```tsx
 import React from 'react';
 import {injectIntl, FormattedRelative} from 'react-intl';
 
@@ -141,7 +141,7 @@ React Intl v2 no longer supports nested `messages` objects, instead the collecti
 
 Apps using a nested `messages` object structure could use the following function to flatten their object according to React Intl v1's semantics:
 
-```js
+```tsx
 function flattenMessages(nestedMessages, prefix = '') {
   return Object.keys(nestedMessages).reduce((messages, key) => {
     let value = nestedMessages[key];
@@ -170,13 +170,13 @@ All calls to `getIntlMessage()` need to be replaced with a Message Descriptor.
 
 **Replace:**
 
-```js
+```tsx
 this.getIntlMessage('some.message.id');
 ```
 
 **With:**
 
-```js
+```tsx
 {
   id: 'some.message.id';
 }
@@ -188,7 +188,7 @@ A typical pattern when calling `formatMessage()` is to nest a call to `getIntlMe
 
 **1.0:**
 
-```js
+```tsx
 let message = this.formatMessage(
   this.getIntlMessage('some.message.id'),
   values
@@ -197,7 +197,7 @@ let message = this.formatMessage(
 
 **2.0:**
 
-```js
+```tsx
 let message = this.props.intl.formatMessage({id: 'some.message.id'}, values);
 ```
 
@@ -213,13 +213,13 @@ The following example shows up to update a `<FormattedMessage>` instance to use
 
 **1.0:**
 
-```js
+```tsx
 <FormattedMessage message={this.getIntlMessage('greeting')} name="Eric" />
 ```
 
 **2.0:**
 
-```js
+```tsx
 <FormattedMessage id="greeting" values={{name: 'Eric'}} />
 ```
 
@@ -233,13 +233,13 @@ A new feature has been added to [`<FormattedRelative>`](Components#formattedrela
 
 **1.0:**
 
-```js
+```tsx
 <FormattedRelative value={date} now={otherDate} />
 ```
 
 **2.0:**
 
-```js
+```tsx
 <FormattedRelative value={date} initialNow={otherDate} />
 ```
 
@@ -251,13 +251,13 @@ The signature of the `formatRelative()` function has been aligned with the other
 
 **1.0:**
 
-```js
+```tsx
 let relative = this.formatRelative(date, {units: 'hour'}, {now: otherDate});
 ```
 
 **2.0:**
 
-```js
+```tsx
 let relative = this.props.intl.formatRelative(date, {
   units: 'hour',
   now: otherDate,

docs/Upgrade-Guide.md

@@ -152,7 +152,7 @@ If you previously were using `addLocaleData` to support older browsers, we recom
 1. If you're supporting browsers that do not have [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules) (e.g IE11 & Safari 12-), include this [polyfill](https://www.npmjs.com/package/@formatjs/intl-pluralrules) in your build.
 2. If you're supporting browsers that do not have [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat) (e.g IE11, Edge, Safari 13-), include this [polyfill](https://www.npmjs.com/package/@formatjs/intl-relativetimeformat) in your build along with individual CLDR data for each locale you support.
 
-```js
+```tsx
 if (!Intl.PluralRules) {
   require('@formatjs/intl-pluralrules/polyfill');
   require('@formatjs/intl-pluralrules/dist/locale-data/de'); // Add locale data for de

examples/Hooks.tsx

@@ -37,7 +37,7 @@ const messages = {
  * BEFORE using the `useIntl()` hook,
  * as shown in the `App` component below
  *
- * ```js
+ * ```tsx
  * interface Props {}
  *
  * const Wrapper: React.FC<Props> = (props) => {

src/index.ts

@@ -8,6 +8,9 @@ export * from './types';
 export function defineMessages<T, U extends Record<string, T>>(msgs: U): U {
   return msgs;
 }
+export function defineMessage<T>(msg: T): T {
+  return msg;
+}
 import {
   createFormattedComponent,
   createFormattedDateTimePartsComponent,