react-intl 3.12.0 → 4.1.1

package/dist/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/dist/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/dist/utils.js

@@ -14,18 +14,7 @@ var React = require("react");
 var intl_messageformat_1 = require("intl-messageformat");
 var intl_format_cache_1 = require("intl-format-cache");
 var intl_utils_1 = require("@formatjs/intl-utils");
-var ESCAPED_CHARS = {
-    38: '&',
-    62: '>',
-    60: '<',
-    34: '"',
-    39: ''',
-};
-var UNSAFE_CHARS_REGEX = /[&><"']/g;
-function escape(str) {
-    return ('' + str).replace(UNSAFE_CHARS_REGEX, function (match) { return ESCAPED_CHARS[match.charCodeAt(0)]; });
-}
-exports.escape = escape;
+var error_1 = require("./error");
 function filterProps(props, whitelist, defaults) {
     if (defaults === void 0) { defaults = {}; }
     return whitelist.reduce(function (filtered, name) {
@@ -44,11 +33,6 @@ function invariantIntlContext(intl) {
         '<IntlProvider> needs to exist in the component ancestry.');
 }
 exports.invariantIntlContext = invariantIntlContext;
-function createError(message, exception) {
-    var eMsg = exception ? "\n" + exception.stack : '';
-    return "[React Intl] " + message + eMsg;
-}
-exports.createError = createError;
 function defaultErrorHandler(error) {
     if (process.env.NODE_ENV !== 'production') {
         console.error(error);
@@ -105,6 +89,6 @@ function getNamedFormat(formats, type, name, onError) {
     if (format) {
         return format;
     }
-    onError(createError("No " + type + " format named: " + name));
+    onError(new error_1.ReactIntlError("UNSUPPORTED_FORMATTER" /* UNSUPPORTED_FORMATTER */, "No " + type + " format named: " + name));
 }
 exports.getNamedFormat = getNamedFormat;

package/lib/components/message.d.ts

@@ -6,7 +6,7 @@ export interface Props<V extends Record<string, any> = Record<string, React.Reac
     tagName?: React.ElementType<any>;
     children?(...nodes: React.ReactNodeArray): React.ReactNode;
 }
-declare class FormattedMessage<V extends Record<string, any> = Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>> extends React.Component<Props<V>> {
+declare class FormattedMessage<T = React.ReactNode, V extends Record<string, any> = Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn<T>>> extends React.Component<Props<V>> {
     static displayName: string;
     static defaultProps: {
         values: {};

package/lib/components/message.js

@@ -20,12 +20,12 @@ import { formatMessage } from '../formatters/message';
 import { invariantIntlContext, DEFAULT_INTL_CONFIG, createFormatters, } from '../utils';
 import * as shallowEquals_ from 'shallow-equal/objects';
 const shallowEquals = shallowEquals_.default || shallowEquals_;
-const defaultFormatMessage = (descriptor, values) => {
+function defaultFormatMessage(descriptor, values) {
     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.');
     }
     return formatMessage(Object.assign(Object.assign({}, DEFAULT_INTL_CONFIG), { locale: 'en' }), createFormatters(), descriptor, values);
-};
+}
 class FormattedMessage extends React.Component {
     shouldComponentUpdate(nextProps) {
         const _a = this.props, { values } = _a, otherProps = __rest(_a, ["values"]);

package/lib/components/plural.d.ts

@@ -11,7 +11,7 @@ interface Props extends FormatPluralOptions {
     many?: React.ReactNode;
     children?(value: React.ReactNode): React.ReactElement | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "format" | "localeMatcher" | "type" | "value"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "format" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/lib/components/provider.js

@@ -5,16 +5,16 @@
  */
 import * as React from 'react';
 import { Provider } from './injectIntl';
-import { createError, DEFAULT_INTL_CONFIG, createFormatters, invariantIntlContext, createIntlCache, } from '../utils';
-import areIntlLocalesSupported from 'intl-locales-supported';
+import { DEFAULT_INTL_CONFIG, createFormatters, invariantIntlContext, createIntlCache, } from '../utils';
 import { formatNumber, formatNumberToParts } from '../formatters/number';
 import { formatRelativeTime } from '../formatters/relativeTime';
 import { formatDate, formatTime, formatDateToParts, 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 } from '../error';
 const shallowEquals = shallowEquals_.default || shallowEquals_;
 function processIntlConfig(config) {
     return {
@@ -36,12 +36,10 @@ function processIntlConfig(config) {
 export function createIntl(config, cache) {
     const formatters = createFormatters(cache);
     const resolvedConfig = Object.assign(Object.assign({}, DEFAULT_INTL_CONFIG), config);
-    if (!resolvedConfig.locale ||
-        !areIntlLocalesSupported(resolvedConfig.locale)) {
-        const { locale, defaultLocale, onError } = resolvedConfig;
-        if (typeof onError === 'function') {
-            onError(createError(`Missing locale data for locale: "${locale}". ` +
-                `Using default locale: "${defaultLocale}" as fallback.`));
+    const { locale, defaultLocale, onError } = resolvedConfig;
+    if (!locale) {
+        if (onError) {
+            onError(new ReactIntlError("INVALID_CONFIG" /* 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.
@@ -50,7 +48,14 @@ export function createIntl(config, cache) {
         // each <FormattedMessage> contains a `defaultMessage` prop.
         resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
     }
-    return Object.assign(Object.assign({}, resolvedConfig), { formatters, formatNumber: formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: formatPlural.bind(null, resolvedConfig, 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, resolvedConfig, formatters.getDisplayNames) });
+    else if (!Intl.NumberFormat.supportedLocalesOf(locale).length && onError) {
+        onError(new ReactIntlError("MISSING_DATA" /* 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("MISSING_DATA" /* 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 Object.assign(Object.assign({}, resolvedConfig), { formatters, formatNumber: formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: formatMessage.bind(null, resolvedConfig, formatters), formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat), formatDisplayName: formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames) });
 }
 export default class IntlProvider extends React.PureComponent {
     constructor() {

package/lib/error.d.ts

@@ -0,0 +1,11 @@
+export declare const enum ReactIntlErrorCode {
+    FORMAT_ERROR = "FORMAT_ERROR",
+    UNSUPPORTED_FORMATTER = "UNSUPPORTED_FORMATTER",
+    INVALID_CONFIG = "INVALID_CONFIG",
+    MISSING_DATA = "MISSING_DATA",
+    MISSING_TRANSLATION = "MISSING_TRANSLATION"
+}
+export declare class ReactIntlError extends Error {
+    code: ReactIntlErrorCode;
+    constructor(code: ReactIntlErrorCode, message: string, exception?: Error);
+}

package/lib/error.js

@@ -0,0 +1,9 @@
+export class ReactIntlError extends Error {
+    constructor(code, message, exception) {
+        super(`[React Intl Error ${code}] ${message} ${exception ? `\n${exception.stack}` : ''}`);
+        this.code = code;
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(this, ReactIntlError);
+        }
+    }
+}

package/lib/formatters/dateTime.js

@@ -3,7 +3,8 @@
  * Copyrights licensed under the New BSD License.
  * See the accompanying LICENSE file for terms.
  */
-import { createError, filterProps, getNamedFormat } from '../utils';
+import { filterProps, getNamedFormat } from '../utils';
+import { ReactIntlError } from '../error';
 const DATE_TIME_FORMAT_OPTIONS = [
     'localeMatcher',
     'formatMatcher',
@@ -38,7 +39,7 @@ export function formatDate(config, getDateTimeFormat, value, options = {}) {
         return getFormatter(config, 'date', getDateTimeFormat, options).format(date);
     }
     catch (e) {
-        config.onError(createError('Error formatting date.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting date.', e));
     }
     return String(date);
 }
@@ -48,7 +49,7 @@ export function formatTime(config, getDateTimeFormat, value, options = {}) {
         return getFormatter(config, 'time', getDateTimeFormat, options).format(date);
     }
     catch (e) {
-        config.onError(createError('Error formatting time.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting time.', e));
     }
     return String(date);
 }
@@ -58,7 +59,7 @@ export function formatDateToParts(config, getDateTimeFormat, value, options = {}
         return getFormatter(config, 'date', getDateTimeFormat, options).formatToParts(date);
     }
     catch (e) {
-        config.onError(createError('Error formatting date.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting date.', e));
     }
     return [];
 }
@@ -68,7 +69,7 @@ export function formatTimeToParts(config, getDateTimeFormat, value, options = {}
         return getFormatter(config, 'time', getDateTimeFormat, options).formatToParts(date);
     }
     catch (e) {
-        config.onError(createError('Error formatting time.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting time.', e));
     }
     return [];
 }

package/lib/formatters/displayName.js

@@ -1,4 +1,6 @@
-import { filterProps, createError } from '../utils';
+import { filterProps } from '../utils';
+import { FormatError } from 'intl-messageformat';
+import { ReactIntlError } from '../error';
 const DISPLAY_NAMES_OPTONS = [
     'localeMatcher',
     'style',
@@ -8,15 +10,15 @@ const DISPLAY_NAMES_OPTONS = [
 export function formatDisplayName({ locale, onError }, getDisplayNames, value, options = {}) {
     const DisplayNames = Intl.DisplayNames;
     if (!DisplayNames) {
-        onError(createError(`Intl.DisplayNames is not available in this environment.
+        onError(new FormatError(`Intl.DisplayNames is not available in this environment.
 Try polyfilling it using "@formatjs/intl-displaynames"
-`));
+`, 2 /* 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("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting display name.', e));
     }
 }

package/lib/formatters/list.js

@@ -1,4 +1,6 @@
-import { filterProps, createError } from '../utils';
+import { filterProps } from '../utils';
+import { FormatError } from 'intl-messageformat';
+import { ReactIntlError } from '../error';
 const LIST_FORMAT_OPTIONS = [
     'localeMatcher',
     'type',
@@ -11,9 +13,9 @@ function generateToken(i) {
 export function formatList({ locale, onError }, getListFormat, values, options = {}) {
     const ListFormat = Intl.ListFormat;
     if (!ListFormat) {
-        onError(createError(`Intl.ListFormat is not available in this environment.
+        onError(new FormatError(`Intl.ListFormat is not available in this environment.
 Try polyfilling it using "@formatjs/intl-listformat"
-`));
+`, 2 /* MISSING_INTL_API */));
     }
     const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS);
     try {
@@ -45,7 +47,7 @@ Try polyfilling it using "@formatjs/intl-listformat"
         }, []);
     }
     catch (e) {
-        onError(createError('Error formatting list.', e));
+        onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting list.', e));
     }
     return values;
 }

package/lib/formatters/message.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Formatters, IntlConfig, MessageDescriptor } from '../types';
 import { PrimitiveType } from 'intl-messageformat';
-export declare const prepareIntlMessageFormatHtmlOutput: (chunks: (string | object)[]) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const prepareIntlMessageFormatHtmlOutput: <T>(chunks: (string | T)[]) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 export declare function formatMessage({ locale, formats, messages, defaultLocale, defaultFormats, onError, }: Pick<IntlConfig, 'locale' | 'formats' | 'messages' | 'defaultLocale' | 'defaultFormats' | 'onError'>, state: Formatters, messageDescriptor?: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
-export declare function formatHTMLMessage(config: Pick<IntlConfig, 'locale' | 'formats' | 'messages' | 'defaultLocale' | 'defaultFormats' | 'onError'>, state: Formatters, messageDescriptor?: MessageDescriptor, rawValues?: Record<string, PrimitiveType>): React.ReactNode;

package/lib/formatters/message.js

@@ -5,8 +5,8 @@
  */
 import * as React from 'react';
 import { invariant } from '@formatjs/intl-utils';
-import { createError, escape } from '../utils';
 import IntlMessageFormat from 'intl-messageformat';
+import { ReactIntlError } from '../error';
 function setTimeZoneInOptions(opts, timeZone) {
     return Object.keys(opts).reduce((all, k) => {
         all[k] = Object.assign({ timeZone }, opts[k]);
@@ -35,60 +35,46 @@ export function formatMessage({ locale, formats, messages, defaultLocale, defaul
     const message = messages && messages[String(id)];
     formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
     defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
-    let formattedMessageParts = [];
+    let formattedMessageParts = '';
     if (message) {
         try {
             const formatter = state.getMessageFormat(message, locale, formats, {
                 formatters: state,
             });
-            formattedMessageParts = formatter.formatHTMLMessage(values);
+            formattedMessageParts = formatter.format(values);
         }
         catch (e) {
-            onError(createError(`Error formatting message: "${id}" for locale: "${locale}"` +
+            onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, `Error formatting message: "${id}" for locale: "${locale}"` +
                 (defaultMessage ? ', using default message as fallback.' : ''), e));
         }
     }
-    else {
+    else if (!defaultMessage ||
+        (locale && locale.toLowerCase() !== defaultLocale.toLowerCase())) {
         // This prevents warnings from littering the console in development
         // when no `messages` are passed into the <IntlProvider> for the
-        // default locale, and a default message is in the source.
-        if (!defaultMessage ||
-            (locale && locale.toLowerCase() !== defaultLocale.toLowerCase())) {
-            onError(createError(`Missing message: "${id}" for locale: "${locale}"` +
-                (defaultMessage ? ', using default message as fallback.' : '')));
-        }
+        // default locale.
+        onError(new ReactIntlError("MISSING_TRANSLATION" /* MISSING_TRANSLATION */, `Missing message: "${id}" for locale: "${locale}"` +
+            (defaultMessage ? ', using default message as fallback.' : '')));
     }
-    if (!formattedMessageParts.length && defaultMessage) {
+    if (!formattedMessageParts && defaultMessage) {
         try {
             const formatter = state.getMessageFormat(defaultMessage, defaultLocale, defaultFormats);
-            formattedMessageParts = formatter.formatHTMLMessage(values);
+            formattedMessageParts = formatter.format(values);
         }
         catch (e) {
-            onError(createError(`Error formatting the default message for: "${id}"`, e));
+            onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, `Error formatting the default message for: "${id}"`, e));
         }
     }
-    if (!formattedMessageParts.length) {
-        onError(createError(`Cannot format message: "${id}", ` +
+    if (!formattedMessageParts) {
+        onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, `Cannot format message: "${id}", ` +
             `using message ${message || defaultMessage ? 'source' : 'id'} as fallback.`));
         if (typeof message === 'string') {
             return message || defaultMessage || String(id);
         }
         return defaultMessage || String(id);
     }
-    if (formattedMessageParts.length === 1 &&
-        typeof formattedMessageParts[0] === 'string') {
-        return formattedMessageParts[0] || defaultMessage || String(id);
+    if (Array.isArray(formattedMessageParts)) {
+        return prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
     }
-    return prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
-}
-export function formatHTMLMessage(config, state, messageDescriptor = { id: '' }, rawValues = {}) {
-    // Process all the values before they are used when formatting the ICU
-    // Message string. Since the formatted message might be injected via
-    // `innerHTML`, all String-based values need to be HTML-escaped.
-    const escapedValues = Object.keys(rawValues).reduce((escaped, name) => {
-        const value = rawValues[name];
-        escaped[name] = typeof value === 'string' ? escape(value) : value;
-        return escaped;
-    }, {});
-    return formatMessage(config, state, messageDescriptor, escapedValues);
+    return formattedMessageParts;
 }

package/lib/formatters/number.js

@@ -1,4 +1,5 @@
-import { getNamedFormat, filterProps, createError } from '../utils';
+import { getNamedFormat, filterProps } from '../utils';
+import { ReactIntlError } from '../error';
 const NUMBER_FORMAT_OPTIONS = [
     'localeMatcher',
     'style',
@@ -34,7 +35,7 @@ export function formatNumber(config, getNumberFormat, value, options = {}) {
         return getFormatter(config, getNumberFormat, options).format(value);
     }
     catch (e) {
-        config.onError(createError('Error formatting number.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting number.', e));
     }
     return String(value);
 }
@@ -43,7 +44,7 @@ export function formatNumberToParts(config, getNumberFormat, value, options = {}
         return getFormatter(config, getNumberFormat, options).formatToParts(value);
     }
     catch (e) {
-        config.onError(createError('Error formatting number.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting number.', e));
     }
     return [];
 }

package/lib/formatters/plural.js

@@ -1,20 +1,22 @@
-import { filterProps, createError } from '../utils';
+import { filterProps } from '../utils';
+import { ReactIntlError } from '../error';
+import { FormatError } from 'intl-messageformat';
 const PLURAL_FORMAT_OPTIONS = [
     'localeMatcher',
     'type',
 ];
 export function formatPlural({ locale, onError }, getPluralRules, value, options = {}) {
     if (!Intl.PluralRules) {
-        onError(createError(`Intl.PluralRules is not available in this environment.
+        onError(new FormatError(`Intl.PluralRules is not available in this environment.
 Try polyfilling it using "@formatjs/intl-pluralrules"
-`));
+`, 2 /* MISSING_INTL_API */));
     }
     const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS);
     try {
         return getPluralRules(locale, filteredOptions).select(value);
     }
     catch (e) {
-        onError(createError('Error formatting plural.', e));
+        onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting plural.', e));
     }
     return 'other';
 }

package/lib/formatters/relativeTime.js

@@ -1,4 +1,6 @@
-import { getNamedFormat, filterProps, createError } from '../utils';
+import { getNamedFormat, filterProps } from '../utils';
+import { FormatError } from 'intl-messageformat';
+import { ReactIntlError } from '../error';
 const RELATIVE_TIME_FORMAT_OPTIONS = [
     'numeric',
     'style',
@@ -15,15 +17,15 @@ export function formatRelativeTime(config, getRelativeTimeFormat, value, unit, o
     }
     const RelativeTimeFormat = Intl.RelativeTimeFormat;
     if (!RelativeTimeFormat) {
-        config.onError(createError(`Intl.RelativeTimeFormat is not available in this environment.
+        config.onError(new FormatError(`Intl.RelativeTimeFormat is not available in this environment.
 Try polyfilling it using "@formatjs/intl-relativetimeformat"
-`));
+`, 2 /* MISSING_INTL_API */));
     }
     try {
         return getFormatter(config, getRelativeTimeFormat, options).format(value, unit);
     }
     catch (e) {
-        config.onError(createError('Error formatting relative time.', e));
+        config.onError(new ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting relative time.', e));
     }
     return String(value);
 }

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export * from './types';
-export { defineMessages } from '@formatjs/macro';
+export declare function defineMessages<T, U extends Record<string, T>>(msgs: U): U;
 import { CustomFormatConfig } from './types';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import { IntlListFormatOptions } from '@formatjs/intl-listformat';
@@ -35,5 +35,5 @@ export { FormattedNumberParts } from './components/createFormattedComponent';
 export { default as FormattedRelativeTime } from './components/relative';
 export { default as FormattedPlural } from './components/plural';
 export { default as FormattedMessage } from './components/message';
-export { default as FormattedHTMLMessage } from './components/html-message';
 export { createIntlCache } from './utils';
+export { ReactIntlError, ReactIntlErrorCode } from './error';

package/lib/index.js

@@ -1,4 +1,6 @@
-export { defineMessages } from '@formatjs/macro';
+export function defineMessages(msgs) {
+    return msgs;
+}
 import { createFormattedComponent, createFormattedDateTimePartsComponent, } from './components/createFormattedComponent';
 export { default as injectIntl, Provider as RawIntlProvider, Context as IntlContext, } from './components/injectIntl';
 export { default as useIntl } from './components/useIntl';
@@ -15,5 +17,5 @@ export { FormattedNumberParts } from './components/createFormattedComponent';
 export { default as FormattedRelativeTime } from './components/relative';
 export { default as FormattedPlural } from './components/plural';
 export { default as FormattedMessage } from './components/message';
-export { default as FormattedHTMLMessage } from './components/html-message';
 export { createIntlCache } from './utils';
+export { ReactIntlError } from './error';

package/lib/react-intl.d.ts

@@ -1,7 +1,7 @@
-import { defineMessages } from '@formatjs/macro';
 import { DisplayNames } from '@formatjs/intl-displaynames';
 import { DisplayNamesOptions } from '@formatjs/intl-displaynames';
 import { DisplayNamesOptions as DisplayNamesOptions_2 } from '@formatjs/intl-displaynames/lib';
+import { FormatError } from 'intl-messageformat';
 import { Formats } from 'intl-messageformat';
 import { FormatXMLElementFn } from 'intl-messageformat';
 import IntlListFormat from '@formatjs/intl-listformat';
@@ -33,7 +33,8 @@ export declare interface CustomFormats extends Partial<Formats> {
 }
 
 declare const DEFAULT_INTL_CONFIG: Pick<IntlConfig, 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;
-export { defineMessages }
+
+export declare function defineMessages<T, U extends Record<string, T>>(msgs: U): U;
 
 export declare type FormatDateOptions = Exclude<Intl.DateTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 
@@ -60,20 +61,11 @@ export declare const FormattedDisplayName: React.FC<DisplayNamesOptions_2 & {
     value: string | number | object;
 }>;
 
-export declare class FormattedHTMLMessage extends FormattedMessage<Record<string, PrimitiveType>> {
-    static displayName: string;
-    static defaultProps: {
-        tagName: "span";
-        values: {};
-    };
-    render(): JSX.Element;
-}
-
 export declare const FormattedList: React.FC<IntlListFormatOptions & {
     value: React.ReactNode[];
 }>;
 
-export declare class FormattedMessage<V extends Record<string, any> = Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>> extends React.Component<Props_3<V>> {
+export declare class FormattedMessage<T = React.ReactNode, V extends Record<string, any> = Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn<T>>> extends React.Component<Props_3<V>> {
     static displayName: string;
     static defaultProps: {
         values: {};
@@ -91,7 +83,7 @@ export declare const FormattedNumberParts: React.FC<Formatter['formatNumber'] &
     children(val: Intl.NumberFormatPart[]): React.ReactElement | null;
 }>;
 
-export declare const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "format" | "localeMatcher" | "type" | "value"> & {
+export declare const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "format" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props_2>;
@@ -164,12 +156,12 @@ export declare interface IntlConfig {
     messages: Record<string, string> | Record<string, MessageFormatElement[]>;
     defaultLocale: string;
     defaultFormats: CustomFormats;
-    onError(err: string): void;
+    onError(err: ReactIntlError | FormatError): void;
 }
 
 export declare const IntlContext: React.Context<IntlShape>;
 
-export declare interface IntlFormatters {
+export declare 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[];
@@ -179,8 +171,7 @@ export declare 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;
@@ -242,6 +233,19 @@ declare interface Props_3<V extends Record<string, any> = Record<string, React.R
 
 export declare const RawIntlProvider: React.Provider<IntlShape>;
 
+export declare class ReactIntlError extends Error {
+    code: ReactIntlErrorCode;
+    constructor(code: ReactIntlErrorCode, message: string, exception?: Error);
+}
+
+export declare const enum ReactIntlErrorCode {
+    FORMAT_ERROR = "FORMAT_ERROR",
+    UNSUPPORTED_FORMATTER = "UNSUPPORTED_FORMATTER",
+    INVALID_CONFIG = "INVALID_CONFIG",
+    MISSING_DATA = "MISSING_DATA",
+    MISSING_TRANSLATION = "MISSING_TRANSLATION"
+}
+
 declare interface State {
     /**
      * Explicit intl cache to prevent memory leaks