react-intl 3.12.0 → 4.1.1

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.7.8"
     }
   ]
 }

package/lib/types.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import IntlMessageFormat, { Formats, PrimitiveType, FormatXMLElementFn } from 'intl-messageformat';
+import IntlMessageFormat, { Formats, PrimitiveType, FormatXMLElementFn, FormatError } from 'intl-messageformat';
 import IntlRelativeTimeFormat, { IntlRelativeTimeFormatOptions } from '@formatjs/intl-relativetimeformat';
 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';
+import { ReactIntlError } from './error';
 export interface IntlConfig {
     locale: string;
     timeZone?: string;
@@ -13,7 +14,7 @@ export interface IntlConfig {
     messages: Record<string, string> | Record<string, MessageFormatElement[]>;
     defaultLocale: string;
     defaultFormats: CustomFormats;
-    onError(err: string): void;
+    onError(err: ReactIntlError | FormatError): void;
 }
 export interface CustomFormats extends Partial<Formats> {
     relative?: Record<string, IntlRelativeTimeFormatOptions>;
@@ -27,7 +28,7 @@ export declare type FormatRelativeTimeOptions = Exclude<IntlRelativeTimeFormatOp
 export declare type FormatPluralOptions = Exclude<Intl.PluralRulesOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
 export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
-export interface IntlFormatters {
+export interface IntlFormatters<T = React.ReactNode> {
     formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     formatTime(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     formatDateToParts(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): Intl.DateTimeFormatPart[];
@@ -37,8 +38,7 @@ export interface IntlFormatters {
     formatNumberToParts(value: Parameters<Intl.NumberFormat['format']>[0], opts?: FormatNumberOptions): Intl.NumberFormatPart[];
     formatPlural(value: Parameters<Intl.PluralRules['select']>[0], opts?: FormatPluralOptions): ReturnType<Intl.PluralRules['select']>;
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
-    formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>): string | React.ReactNodeArray;
-    formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
+    formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn<T>>): string | React.ReactNodeArray;
     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;

package/lib/utils.d.ts

@@ -1,10 +1,9 @@
 import { IntlConfig, IntlCache, CustomFormats, Formatters } from './types';
 import { IntlRelativeTimeFormatOptions } from '@formatjs/intl-relativetimeformat';
-export declare function escape(str: string): string;
+import { ReactIntlError } from './error';
 export declare function filterProps<T extends Record<string, any>, K extends string>(props: T, whitelist: Array<K>, defaults?: Partial<T>): Pick<T, K>;
 export declare function invariantIntlContext(intl?: any): asserts intl;
-export declare function createError(message: string, exception?: Error): string;
-export declare function defaultErrorHandler(error: string): void;
+export declare function defaultErrorHandler(error: ReactIntlError): void;
 export declare const DEFAULT_INTL_CONFIG: Pick<IntlConfig, 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;
 export declare function createIntlCache(): IntlCache;
 /**
@@ -12,4 +11,4 @@ export declare function createIntlCache(): IntlCache;
  * @param cache explicit cache to prevent leaking memory
  */
 export declare function createFormatters(cache?: IntlCache): Formatters;
-export declare function getNamedFormat<T extends keyof CustomFormats>(formats: CustomFormats, type: T, name: string, onError: (err: string) => void): Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | IntlRelativeTimeFormatOptions | undefined;
+export declare function getNamedFormat<T extends keyof CustomFormats>(formats: CustomFormats, type: T, name: string, onError: (err: ReactIntlError) => void): Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | IntlRelativeTimeFormatOptions | undefined;

package/lib/utils.js

@@ -12,17 +12,7 @@ import * as React from 'react';
 import IntlMessageFormat from 'intl-messageformat';
 import memoizeIntlConstructor from 'intl-format-cache';
 import { invariant } from '@formatjs/intl-utils';
-const ESCAPED_CHARS = {
-    38: '&',
-    62: '>',
-    60: '<',
-    34: '"',
-    39: ''',
-};
-const UNSAFE_CHARS_REGEX = /[&><"']/g;
-export function escape(str) {
-    return ('' + str).replace(UNSAFE_CHARS_REGEX, match => ESCAPED_CHARS[match.charCodeAt(0)]);
-}
+import { ReactIntlError } from './error';
 export function filterProps(props, whitelist, defaults = {}) {
     return whitelist.reduce((filtered, name) => {
         if (name in props) {
@@ -38,10 +28,6 @@ export function invariantIntlContext(intl) {
     invariant(intl, '[React Intl] Could not find required `intl` object. ' +
         '<IntlProvider> needs to exist in the component ancestry.');
 }
-export function createError(message, exception) {
-    const eMsg = exception ? `\n${exception.stack}` : '';
-    return `[React Intl] ${message}${eMsg}`;
-}
 export function defaultErrorHandler(error) {
     if (process.env.NODE_ENV !== 'production') {
         console.error(error);
@@ -94,5 +80,5 @@ export function getNamedFormat(formats, type, name, onError) {
     if (format) {
         return format;
     }
-    onError(createError(`No ${type} format named: ${name}`));
+    onError(new ReactIntlError("UNSUPPORTED_FORMATTER" /* UNSUPPORTED_FORMATTER */, `No ${type} format named: ${name}`));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "3.12.0",
+  "version": "4.1.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,75 +131,73 @@
   "types": "./lib/react-intl.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@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",
+    "@formatjs/intl-displaynames": "^1.2.1",
+    "@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.31",
-    "hoist-non-react-statics": "^3.3.1",
-    "intl-format-cache": "^4.2.19",
-    "intl-locales-supported": "^1.8.4",
-    "intl-messageformat": "^7.8.2",
-    "intl-messageformat-parser": "^3.6.2",
+    "hoist-non-react-statics": "^3.3.2",
+    "intl-format-cache": "^4.2.21",
+    "intl-messageformat": "^8.2.1",
+    "intl-messageformat-parser": "^4.1.0",
     "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@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.7",
-    "@babel/preset-react": "^7.7.4",
-    "@formatjs/intl-pluralrules": "^1.5.0",
-    "@microsoft/api-documenter": "^7.7.3",
-    "@microsoft/api-extractor": "^7.7.1",
+    "@babel/core": "^7.8.7",
+    "@babel/node": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@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.25",
+    "@types/enzyme": "^3.10.5",
+    "@types/jest": "^25.1.3",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
-    "@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.6.2",
-    "cross-env": "^6.0.3",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/parser": "^2.22.0",
+    "babel-jest": "^25.1.0",
+    "benchmark": "^2.1.4",
+    "core-js": "^3.6.4",
+    "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "enzyme-to-json": "^3.4.3",
+    "enzyme-to-json": "^3.4.4",
     "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.18.3",
     "fs-extra": "^8.1.0",
-    "full-icu": "^1.3.0",
+    "full-icu": "^1.3.1",
     "glob": "^7.1.6",
-    "jest": "^24.9.0",
+    "jest": "^25.1.0",
     "markdown-toc": "^1.2.0",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.3",
     "parcel": "^1.12.4",
     "pre-commit": "^1.2.2",
     "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.29.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^1.32.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-replace": "^2.2.0",
+    "rollup-plugin-typescript2": "^0.26.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "standard-version": "^7.0.1",
-    "ts-jest": "^24.3.0",
-    "ts-node": "^8.5.4",
-    "tslib": "^1.9.3",
-    "typescript": "^3.7.0"
+    "standard-version": "^7.1.0",
+    "ts-jest": "^25.2.1",
+    "ts-node": "^8.6.2",
+    "tslib": "^1.11.1",
+    "typescript": "^3.8.3"
   },
   "scripts": {
     "benchmark": "cross-env NODE_ENV=production TS_NODE_PROJECT=./tsconfig.cjs.json ts-node test/perf/index.tsx",

package/src/components/message.tsx

@@ -18,13 +18,13 @@ import * as shallowEquals_ from 'shallow-equal/objects';
 const shallowEquals: typeof shallowEquals_ =
   (shallowEquals_ as any).default || shallowEquals_;
 
-const defaultFormatMessage = (
+function defaultFormatMessage<T = React.ReactNode>(
   descriptor: MessageDescriptor,
   values?: Record<
     string,
-    PrimitiveType | React.ReactElement | FormatXMLElementFn
+    PrimitiveType | React.ReactElement | FormatXMLElementFn<T>
   >
-): string => {
+): string {
   if (process.env.NODE_ENV !== 'production') {
     console.error(
       '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry. Using default message as fallback.'
@@ -40,7 +40,7 @@ const defaultFormatMessage = (
     descriptor,
     values as any
   );
-};
+}
 
 export interface Props<
   V extends Record<string, any> = Record<string, React.ReactNode>
@@ -51,9 +51,10 @@ export interface Props<
 }
 
 class FormattedMessage<
+  T = React.ReactNode,
   V extends Record<string, any> = Record<
     string,
-    PrimitiveType | React.ReactElement | FormatXMLElementFn
+    PrimitiveType | React.ReactElement | FormatXMLElementFn<T>
   >
 > extends React.Component<Props<V>> {
   static displayName = 'FormattedMessage';

package/src/components/provider.tsx

@@ -7,14 +7,12 @@
 import * as React from 'react';
 import {Provider} from './injectIntl';
 import {
-  createError,
   DEFAULT_INTL_CONFIG,
   createFormatters,
   invariantIntlContext,
   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 {
@@ -24,10 +22,11 @@ import {
   formatTimeToParts,
 } from '../formatters/dateTime';
 import {formatPlural} from '../formatters/plural';
-import {formatMessage, formatHTMLMessage} from '../formatters/message';
+import {formatMessage} from '../formatters/message';
 import * as shallowEquals_ from 'shallow-equal/objects';
 import {formatList} from '../formatters/list';
 import {formatDisplayName} from '../formatters/displayName';
+import {ReactIntlError, ReactIntlErrorCode} from '../error';
 const shallowEquals: typeof shallowEquals_ =
   (shallowEquals_ as any).default || shallowEquals_;
 
@@ -80,26 +79,39 @@ 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.`
+        new ReactIntlError(
+          ReactIntlErrorCode.INVALID_CONFIG,
+          `"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(
+      new ReactIntlError(
+        ReactIntlErrorCode.MISSING_DATA,
+        `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(
+      new ReactIntlError(
+        ReactIntlErrorCode.MISSING_DATA,
+        `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,
@@ -145,7 +157,6 @@ export function createIntl(
       formatters.getPluralRules
     ),
     formatMessage: formatMessage.bind(null, resolvedConfig, formatters),
-    formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters),
     formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat),
     formatDisplayName: formatDisplayName.bind(
       null,

package/src/error.ts

@@ -0,0 +1,18 @@
+export const enum ReactIntlErrorCode {
+    FORMAT_ERROR = 'FORMAT_ERROR',
+    UNSUPPORTED_FORMATTER = 'UNSUPPORTED_FORMATTER',
+    INVALID_CONFIG = 'INVALID_CONFIG',
+    MISSING_DATA = 'MISSING_DATA',
+    MISSING_TRANSLATION = 'MISSING_TRANSLATION'
+}
+
+export class ReactIntlError extends Error {
+    public code: ReactIntlErrorCode
+    constructor(code: ReactIntlErrorCode, message: string, exception?: Error) {
+        super(`[React Intl Error ${code}] ${message} ${exception ? `\n${exception.stack}` : ''}`)
+        this.code = code
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(this, ReactIntlError)
+        }
+    }
+}

package/src/formatters/dateTime.ts

@@ -6,7 +6,8 @@
 
 import {Formatters, IntlConfig, IntlFormatters} from '../types';
 
-import {createError, filterProps, getNamedFormat} from '../utils';
+import {filterProps, getNamedFormat} from '../utils';
+import {ReactIntlError, ReactIntlErrorCode} from '../error';
 
 const DATE_TIME_FORMAT_OPTIONS: Array<keyof Intl.DateTimeFormatOptions> = [
   'localeMatcher',
@@ -74,7 +75,13 @@ export function formatDate(
       date
     );
   } catch (e) {
-    config.onError(createError('Error formatting date.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting date.',
+        e
+      )
+    );
   }
 
   return String(date);
@@ -93,7 +100,13 @@ export function formatTime(
       date
     );
   } catch (e) {
-    config.onError(createError('Error formatting time.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting time.',
+        e
+      )
+    );
   }
 
   return String(date);
@@ -114,7 +127,13 @@ export function formatDateToParts(
       options
     ).formatToParts(date);
   } catch (e) {
-    config.onError(createError('Error formatting date.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting date.',
+        e
+      )
+    );
   }
 
   return [];
@@ -136,7 +155,13 @@ export function formatTimeToParts(
       options
     ).formatToParts(date);
   } catch (e) {
-    config.onError(createError('Error formatting time.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting time.',
+        e
+      )
+    );
   }
 
   return [];

package/src/formatters/displayName.ts

@@ -1,9 +1,11 @@
 import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {filterProps, createError} from '../utils';
+import {filterProps} from '../utils';
 import {
   DisplayNamesOptions,
   DisplayNames as IntlDisplayNames,
 } from '@formatjs/intl-displaynames';
+import {FormatError, ErrorCode} from 'intl-messageformat';
+import {ReactIntlErrorCode, ReactIntlError} from '../error';
 
 const DISPLAY_NAMES_OPTONS: Array<keyof DisplayNamesOptions> = [
   'localeMatcher',
@@ -21,15 +23,24 @@ export function formatDisplayName(
   const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames;
   if (!DisplayNames) {
     onError(
-      createError(`Intl.DisplayNames is not available in this environment.
+      new FormatError(
+        `Intl.DisplayNames is not available in this environment.
 Try polyfilling it using "@formatjs/intl-displaynames"
-`)
+`,
+        ErrorCode.MISSING_INTL_API
+      )
     );
   }
   const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
   try {
     return getDisplayNames(locale, filteredOptions).of(value);
   } catch (e) {
-    onError(createError('Error formatting display name.', e));
+    onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting display name.',
+        e
+      )
+    );
   }
 }

package/src/formatters/list.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {filterProps, createError} from '../utils';
+import {filterProps} from '../utils';
 import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat';
+import {FormatError, ErrorCode} from 'intl-messageformat';
+import {ReactIntlError, ReactIntlErrorCode} from '../error';
 
 const LIST_FORMAT_OPTIONS: Array<keyof IntlListFormatOptions> = [
   'localeMatcher',
@@ -30,9 +32,12 @@ export function formatList(
   const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat;
   if (!ListFormat) {
     onError(
-      createError(`Intl.ListFormat is not available in this environment.
+      new FormatError(
+        `Intl.ListFormat is not available in this environment.
 Try polyfilling it using "@formatjs/intl-listformat"
-`)
+`,
+        ErrorCode.MISSING_INTL_API
+      )
     );
   }
   const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS);
@@ -65,7 +70,13 @@ Try polyfilling it using "@formatjs/intl-listformat"
       return all;
     }, []);
   } catch (e) {
-    onError(createError('Error formatting list.', e));
+    onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting list.',
+        e
+      )
+    );
   }
 
   return values;