react-intl 3.9.3 → 3.12.1

package/lib/utils.js

@@ -11,12 +11,7 @@ file in the root directory of React's source tree.
 import * as React from 'react';
 import IntlMessageFormat from 'intl-messageformat';
 import memoizeIntlConstructor from 'intl-format-cache';
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-import * as invariant_ from 'invariant';
-const invariant = invariant_.default || invariant_;
+import { invariant } from '@formatjs/intl-utils';
 const ESCAPED_CHARS = {
     38: '&',
     62: '>',
@@ -69,6 +64,7 @@ export function createIntlCache() {
         relativeTime: {},
         pluralRules: {},
         list: {},
+        displayNames: {},
     };
 }
 /**
@@ -78,6 +74,7 @@ export function createIntlCache() {
 export function createFormatters(cache = createIntlCache()) {
     const RelativeTimeFormat = Intl.RelativeTimeFormat;
     const ListFormat = Intl.ListFormat;
+    const DisplayNames = Intl.DisplayNames;
     return {
         getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat, cache.dateTime),
         getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat, cache.number),
@@ -85,6 +82,7 @@ export function createFormatters(cache = createIntlCache()) {
         getRelativeTimeFormat: memoizeIntlConstructor(RelativeTimeFormat, cache.relativeTime),
         getPluralRules: memoizeIntlConstructor(Intl.PluralRules, cache.pluralRules),
         getListFormat: memoizeIntlConstructor(ListFormat, cache.list),
+        getDisplayNames: memoizeIntlConstructor(DisplayNames, cache.displayNames),
     };
 }
 export function getNamedFormat(formats, type, name, onError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "3.9.3",
+  "version": "3.12.1",
   "description": "Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.",
   "keywords": [
     "intl",
@@ -131,50 +131,49 @@
   "types": "./lib/react-intl.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@formatjs/intl-listformat": "1.3.1",
-    "@formatjs/intl-relativetimeformat": "4.5.1",
-    "@formatjs/intl-unified-numberformat": "2.2.0",
-    "@formatjs/macro": "0.2.6",
+    "@formatjs/intl-displaynames": "^1.2.0",
+    "@formatjs/intl-listformat": "^1.4.1",
+    "@formatjs/intl-relativetimeformat": "^4.5.9",
+    "@formatjs/intl-unified-numberformat": "^3.2.0",
+    "@formatjs/intl-utils": "^2.2.0",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/invariant": "^2.2.30",
-    "hoist-non-react-statics": "^3.3.1",
-    "intl-format-cache": "4.2.13",
-    "intl-locales-supported": "1.8.4",
-    "intl-messageformat": "7.7.2",
-    "intl-messageformat-parser": "3.5.1",
-    "invariant": "^2.1.1",
+    "@types/invariant": "^2.2.31",
+    "hoist-non-react-statics": "^3.3.2",
+    "intl-format-cache": "^4.2.21",
+    "intl-messageformat": "^7.8.4",
+    "intl-messageformat-parser": "^3.6.4",
     "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/node": "^7.7.4",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-react": "^7.7.4",
-    "@formatjs/intl-pluralrules": "^1.3.9",
-    "@microsoft/api-documenter": "^7.7.2",
-    "@microsoft/api-extractor": "^7.7.0",
+    "@babel/core": "^7.8.4",
+    "@babel/node": "^7.8.4",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "@formatjs/intl-pluralrules": "^1.5.2",
+    "@microsoft/api-documenter": "^7.7.12",
+    "@microsoft/api-extractor": "^7.7.8",
     "@types/benchmark": "^1.0.31",
     "@types/enzyme": "^3.10.4",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.9.1",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.16",
-    "@types/react-dom": "^16.9.4",
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
+    "@types/react": "^16.9.19",
+    "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.19.0",
+    "@typescript-eslint/parser": "^2.19.0",
     "babel-jest": "^24.9.0",
     "benchmark": "^2.1.0",
-    "core-js": "^3.4.8",
+    "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-react": "^7.17.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.18.3",
     "fs-extra": "^8.1.0",
     "full-icu": "^1.3.0",
     "glob": "^7.1.6",
@@ -186,19 +185,19 @@
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.27.9",
+    "rimraf": "^3.0.1",
+    "rollup": "^1.31.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-typescript2": "^0.25.3",
-    "rollup-plugin-uglify": "^6.0.3",
-    "standard-version": "^7.0.1",
-    "ts-jest": "^24.2.0",
-    "ts-node": "^8.5.4",
+    "rollup-plugin-uglify": "^6.0.4",
+    "standard-version": "^7.1.0",
+    "ts-jest": "^24.3.0",
+    "ts-node": "^8.6.2",
     "tslib": "^1.9.3",
-    "typescript": "~3.3.0"
+    "typescript": "^3.7.5"
   },
   "scripts": {
     "benchmark": "cross-env NODE_ENV=production TS_NODE_PROJECT=./tsconfig.cjs.json ts-node test/perf/index.tsx",

package/src/components/createFormattedComponent.tsx

@@ -5,6 +5,7 @@ import {
   FormatDateOptions,
   FormatNumberOptions,
   FormatListOptions,
+  FormatDisplayNameOptions,
 } from '../types';
 import {Context} from './injectIntl';
 
@@ -13,6 +14,9 @@ enum DisplayName {
   formatTime = 'FormattedTime',
   formatNumber = 'FormattedNumber',
   formatList = 'FormattedList',
+  // Note that this DisplayName is the locale display name, not to be confused with
+  // the name of the enum, which is for React component display name in dev tools.
+  formatDisplayName = 'FormattedDisplayName',
 }
 
 enum DisplayNameParts {
@@ -27,6 +31,7 @@ type Formatter = {
   formatTime: FormatDateOptions;
   formatNumber: FormatNumberOptions;
   formatList: FormatListOptions;
+  formatDisplayName: FormatDisplayNameOptions;
 };
 
 export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {

package/src/components/provider.tsx

@@ -14,7 +14,6 @@ import {
   createIntlCache,
 } from '../utils';
 import {IntlConfig, IntlShape, Omit, IntlCache} from '../types';
-import areIntlLocalesSupported from 'intl-locales-supported';
 import {formatNumber, formatNumberToParts} from '../formatters/number';
 import {formatRelativeTime} from '../formatters/relativeTime';
 import {
@@ -27,6 +26,7 @@ import {formatPlural} from '../formatters/plural';
 import {formatMessage, formatHTMLMessage} from '../formatters/message';
 import * as shallowEquals_ from 'shallow-equal/objects';
 import {formatList} from '../formatters/list';
+import {formatDisplayName} from '../formatters/displayName';
 const shallowEquals: typeof shallowEquals_ =
   (shallowEquals_ as any).default || shallowEquals_;
 
@@ -79,26 +79,36 @@ export function createIntl(
 ): IntlShape {
   const formatters = createFormatters(cache);
   const resolvedConfig = {...DEFAULT_INTL_CONFIG, ...config};
-  if (
-    !resolvedConfig.locale ||
-    !areIntlLocalesSupported(resolvedConfig.locale)
-  ) {
-    const {locale, defaultLocale, onError} = resolvedConfig;
-    if (typeof onError === 'function') {
+  const {locale, defaultLocale, onError} = resolvedConfig;
+  if (!locale) {
+    if (onError) {
       onError(
         createError(
-          `Missing locale data for locale: "${locale}". ` +
-            `Using default locale: "${defaultLocale}" as fallback.`
+          `"locale" was not configured, using "${defaultLocale}" as fallback. See https://github.com/formatjs/react-intl/blob/master/docs/API.md#intlshape for more details`
         )
       );
     }
-
     // Since there's no registered locale data for `locale`, this will
     // fallback to the `defaultLocale` to make sure things can render.
     // The `messages` are overridden to the `defaultProps` empty object
     // to maintain referential equality across re-renders. It's assumed
     // each <FormattedMessage> contains a `defaultMessage` prop.
     resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
+  } else if (!Intl.NumberFormat.supportedLocalesOf(locale).length && onError) {
+    onError(
+      createError(
+        `Missing locale data for locale: "${locale}" in Intl.NumberFormat. Using default locale: "${defaultLocale}" as fallback. See https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#runtime-requirements for more details`
+      )
+    );
+  } else if (
+    !Intl.DateTimeFormat.supportedLocalesOf(locale).length &&
+    onError
+  ) {
+    onError(
+      createError(
+        `Missing locale data for locale: "${locale}" in Intl.DateTimeFormat. Using default locale: "${defaultLocale}" as fallback. See https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#runtime-requirements for more details`
+      )
+    );
   }
   return {
     ...resolvedConfig,
@@ -146,6 +156,11 @@ export function createIntl(
     formatMessage: formatMessage.bind(null, resolvedConfig, formatters),
     formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters),
     formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat),
+    formatDisplayName: formatDisplayName.bind(
+      null,
+      resolvedConfig,
+      formatters.getDisplayNames
+    ),
   };
 }
 
@@ -178,6 +193,6 @@ export default class IntlProvider extends React.PureComponent<
 
   render(): JSX.Element {
     invariantIntlContext(this.state.intl);
-    return <Provider value={this.state.intl!}>{this.props.children}</Provider>;
+    return <Provider value={this.state.intl}>{this.props.children}</Provider>;
   }
 }

package/src/components/relative.tsx

@@ -8,13 +8,7 @@ import {Context} from './injectIntl';
 import {FormatRelativeTimeOptions} from '../types';
 import {Unit} from '@formatjs/intl-relativetimeformat';
 import {invariantIntlContext} from '../utils';
-
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-import * as invariant_ from 'invariant';
-const invariant: typeof invariant_ = (invariant_ as any).default || invariant_;
+import {invariant} from '@formatjs/intl-utils';
 const MINUTE = 60;
 const HOUR = 60 * 60;
 const DAY = 60 * 60 * 24;
@@ -82,13 +76,6 @@ function canIncrement(unit: Unit = 'second'): boolean {
   return INCREMENTABLE_UNITS.includes(unit);
 }
 
-function verifyProps(updateIntervalInSeconds?: number, unit?: Unit): void {
-  invariant(
-    !updateIntervalInSeconds || (updateIntervalInSeconds && canIncrement(unit)),
-    'Cannot schedule update with unit longer than hour'
-  );
-}
-
 export class FormattedRelativeTime extends React.PureComponent<Props, State> {
   // Public for testing
   _updateTimer: any = null;
@@ -107,7 +94,11 @@ export class FormattedRelativeTime extends React.PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    verifyProps(props.updateIntervalInSeconds, props.unit);
+    invariant(
+      !props.updateIntervalInSeconds ||
+        !!(props.updateIntervalInSeconds && canIncrement(props.unit)),
+      'Cannot schedule update with unit longer than hour'
+    );
   }
 
   scheduleNextUpdate(

package/src/formatters/displayName.ts

@@ -0,0 +1,35 @@
+import {IntlConfig, Formatters, IntlFormatters} from '../types';
+import {filterProps, createError} from '../utils';
+import {
+  DisplayNamesOptions,
+  DisplayNames as IntlDisplayNames,
+} from '@formatjs/intl-displaynames';
+
+const DISPLAY_NAMES_OPTONS: Array<keyof DisplayNamesOptions> = [
+  'localeMatcher',
+  'style',
+  'type',
+  'fallback',
+];
+
+export function formatDisplayName(
+  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
+  getDisplayNames: Formatters['getDisplayNames'],
+  value: Parameters<IntlFormatters['formatDisplayName']>[0],
+  options: Parameters<IntlFormatters['formatDisplayName']>[1] = {}
+): string | undefined {
+  const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames;
+  if (!DisplayNames) {
+    onError(
+      createError(`Intl.DisplayNames is not available in this environment.
+Try polyfilling it using "@formatjs/intl-displaynames"
+`)
+    );
+  }
+  const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
+  try {
+    return getDisplayNames(locale, filteredOptions).of(value);
+  } catch (e) {
+    onError(createError('Error formatting display name.', e));
+  }
+}

package/src/formatters/message.ts

@@ -5,12 +5,7 @@
  */
 
 import * as React from 'react';
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-import * as invariant_ from 'invariant';
-const invariant: typeof invariant_ = (invariant_ as any).default || invariant_;
+import {invariant} from '@formatjs/intl-utils';
 
 import {
   Formatters,
@@ -77,6 +72,10 @@ function deepMergeFormatsAndSetTimeZone(
   };
 }
 
+export const prepareIntlMessageFormatHtmlOutput = (
+  chunks: (string | object)[]
+): React.ReactElement => React.createElement(React.Fragment, null, ...chunks);
+
 export function formatMessage(
   {
     locale,
@@ -123,17 +122,12 @@ export function formatMessage(
     string,
     PrimitiveType | React.ReactElement | FormatXMLElementFn
   > = {}
-): string | React.ReactNodeArray {
+): string | React.ReactNodeArray | React.ReactElement {
   const {id, defaultMessage} = messageDescriptor;
 
   // `id` is a required field of a Message Descriptor.
-  invariant(id, '[React Intl] An `id` must be provided to format a message.');
-  if (!id) {
-    throw new Error(
-      '[React Intl] An `id` must be provided to format a message.'
-    );
-  }
-  const message = messages && messages[id];
+  invariant(!!id, '[React Intl] An `id` must be provided to format a message.');
+  const message = messages && messages[String(id)];
   formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
   defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
 
@@ -198,17 +192,18 @@ export function formatMessage(
       )
     );
     if (typeof message === 'string') {
-      return message || defaultMessage || id;
+      return message || defaultMessage || String(id);
     }
-    return defaultMessage || id;
+    return defaultMessage || String(id);
   }
   if (
     formattedMessageParts.length === 1 &&
     typeof formattedMessageParts[0] === 'string'
   ) {
-    return (formattedMessageParts[0] as string) || defaultMessage || id;
+    return (formattedMessageParts[0] as string) || defaultMessage || String(id);
   }
-  return formattedMessageParts;
+
+  return prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
 }
 
 export function formatHTMLMessage(

package/src/index.ts

@@ -5,7 +5,9 @@
  */
 import * as React from 'react';
 export * from './types';
-export {defineMessages} from '@formatjs/macro';
+export function defineMessages<T, U extends Record<string, T>>(msgs: U): U {
+  return msgs;
+}
 import {
   createFormattedComponent,
   createFormattedDateTimePartsComponent,
@@ -13,6 +15,7 @@ import {
 import {CustomFormatConfig} from './types';
 import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
 import {IntlListFormatOptions} from '@formatjs/intl-listformat';
+import {DisplayNamesOptions} from '@formatjs/intl-displaynames/lib';
 export {
   default as injectIntl,
   Provider as RawIntlProvider,
@@ -38,6 +41,9 @@ export const FormattedNumber: React.FC<UnifiedNumberFormatOptions &
 export const FormattedList: React.FC<IntlListFormatOptions & {
   value: React.ReactNode[];
 }> = createFormattedComponent('formatList');
+export const FormattedDisplayName: React.FC<DisplayNamesOptions & {
+  value: string | number | object;
+}> = createFormattedComponent('formatDisplayName');
 export const FormattedDateParts = createFormattedDateTimePartsComponent(
   'formatDate'
 );

package/src/types.ts

@@ -15,6 +15,7 @@ import IntlRelativeTimeFormat, {
 import {MessageFormatElement} from 'intl-messageformat-parser';
 import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
 import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat';
+import {DisplayNames, DisplayNamesOptions} from '@formatjs/intl-displaynames';
 
 export interface IntlConfig {
   locale: string;
@@ -58,6 +59,11 @@ export type FormatPluralOptions = Exclude<
 
 export type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
 
+export type FormatDisplayNameOptions = Exclude<
+  DisplayNamesOptions,
+  'localeMatcher'
+>;
+
 export interface IntlFormatters {
   formatDate(
     value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
@@ -107,14 +113,15 @@ export interface IntlFormatters {
     descriptor: MessageDescriptor,
     values?: Record<string, PrimitiveType>
   ): React.ReactNode;
-  formatList(
-    values: Array<string>,
-    opts?: FormatListOptions
-  ): string;
+  formatList(values: Array<string>, opts?: FormatListOptions): string;
   formatList(
     values: Array<string | React.ReactNode>,
     opts?: FormatListOptions
   ): React.ReactNode;
+  formatDisplayName(
+    value: Parameters<DisplayNames['of']>[0],
+    opts?: FormatDisplayNameOptions
+  ): string | undefined;
 }
 
 export interface Formatters {
@@ -136,6 +143,9 @@ export interface Formatters {
   getListFormat(
     ...args: ConstructorParameters<typeof IntlListFormat>
   ): IntlListFormat;
+  getDisplayNames(
+    ...args: ConstructorParameters<typeof DisplayNames>
+  ): DisplayNames;
 }
 
 export interface IntlShape extends IntlConfig, IntlFormatters {
@@ -149,10 +159,11 @@ export interface IntlCache {
   relativeTime: Record<string, IntlRelativeTimeFormat>;
   pluralRules: Record<string, Intl.PluralRules>;
   list: Record<string, IntlListFormat>;
+  displayNames: Record<string, DisplayNames>;
 }
 
 export interface MessageDescriptor {
-  id?: string;
+  id?: string | number;
   description?: string | object;
   defaultMessage?: string;
 }

package/src/utils.ts

@@ -13,13 +13,8 @@ import {IntlConfig, IntlCache, CustomFormats, Formatters} from './types';
 import * as React from 'react';
 import IntlMessageFormat from 'intl-messageformat';
 import memoizeIntlConstructor from 'intl-format-cache';
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-import * as invariant_ from 'invariant';
+import {invariant} from '@formatjs/intl-utils';
 import {IntlRelativeTimeFormatOptions} from '@formatjs/intl-relativetimeformat';
-const invariant: typeof invariant_ = (invariant_ as any).default || invariant_;
 
 const ESCAPED_CHARS: Record<number, string> = {
   38: '&amp;',
@@ -54,7 +49,7 @@ export function filterProps<T extends Record<string, any>, K extends string>(
   }, {} as Pick<T, K>);
 }
 
-export function invariantIntlContext(intl?: any): void {
+export function invariantIntlContext(intl?: any): asserts intl {
   invariant(
     intl,
     '[React Intl] Could not find required `intl` object. ' +
@@ -102,6 +97,7 @@ export function createIntlCache(): IntlCache {
     relativeTime: {},
     pluralRules: {},
     list: {},
+    displayNames: {},
   };
 }
 
@@ -114,6 +110,7 @@ export function createFormatters(
 ): Formatters {
   const RelativeTimeFormat = (Intl as any).RelativeTimeFormat;
   const ListFormat = (Intl as any).ListFormat;
+  const DisplayNames = (Intl as any).DisplayNames;
   return {
     getDateTimeFormat: memoizeIntlConstructor(
       Intl.DateTimeFormat,
@@ -127,6 +124,7 @@ export function createFormatters(
     ),
     getPluralRules: memoizeIntlConstructor(Intl.PluralRules, cache.pluralRules),
     getListFormat: memoizeIntlConstructor(ListFormat, cache.list),
+    getDisplayNames: memoizeIntlConstructor(DisplayNames, cache.displayNames),
   };
 }