react-intl 3.9.2 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "3.9.2",
+  "version": "3.12.0",
   "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,49 +131,50 @@
   "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/intl-displaynames": "^1.2.0",
+    "@formatjs/intl-listformat": "^1.3.7",
+    "@formatjs/intl-relativetimeformat": "^4.5.7",
+    "@formatjs/intl-unified-numberformat": "^3.0.4",
+    "@formatjs/intl-utils": "^2.0.4",
     "@formatjs/macro": "^0.2.6",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/invariant": "^2.2.30",
+    "@types/invariant": "^2.2.31",
     "hoist-non-react-statics": "^3.3.1",
-    "intl-format-cache": "^4.2.13",
+    "intl-format-cache": "^4.2.19",
     "intl-locales-supported": "^1.8.4",
-    "intl-messageformat": "^7.7.2",
-    "intl-messageformat-parser": "^3.5.1",
-    "invariant": "^2.1.1",
+    "intl-messageformat": "^7.8.2",
+    "intl-messageformat-parser": "^3.6.2",
     "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/node": "^7.7.4",
+    "@babel/core": "^7.7.7",
+    "@babel/node": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-transform-modules-commonjs": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
-    "@formatjs/intl-pluralrules": "^1.3.9",
-    "@microsoft/api-documenter": "^7.7.2",
-    "@microsoft/api-extractor": "^7.7.0",
+    "@formatjs/intl-pluralrules": "^1.5.0",
+    "@microsoft/api-documenter": "^7.7.3",
+    "@microsoft/api-extractor": "^7.7.1",
     "@types/benchmark": "^1.0.31",
     "@types/enzyme": "^3.10.4",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.0.25",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.16",
+    "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
+    "@typescript-eslint/eslint-plugin": "^2.15.0",
+    "@typescript-eslint/parser": "^2.15.0",
     "babel-jest": "^24.9.0",
     "benchmark": "^2.1.0",
-    "core-js": "^3.4.8",
+    "core-js": "^3.6.2",
     "cross-env": "^6.0.3",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.17.0",
     "fs-extra": "^8.1.0",
     "full-icu": "^1.3.0",
@@ -187,18 +188,18 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.27.9",
+    "rollup": "^1.29.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",
+    "rollup-plugin-uglify": "^6.0.4",
     "standard-version": "^7.0.1",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^24.3.0",
     "ts-node": "^8.5.4",
     "tslib": "^1.9.3",
-    "typescript": "~3.3.0"
+    "typescript": "^3.7.0"
   },
   "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

@@ -27,6 +27,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_;
 
@@ -146,6 +147,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 +184,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

@@ -13,6 +13,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 +39,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),
   };
 }