react-intl 3.12.0 → 4.1.1

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [4.1.1](https://github.com/formatjs/react-intl/compare/v4.1.0...v4.1.1) (2020-03-06)
+
+
+### Bug Fixes
+
+* dont warn if locale is the same as defaultLocale ([c8b178b](https://github.com/formatjs/react-intl/commit/c8b178b1e825b3e1abc2417c3ec60d92ab1911f6)), closes [#1594](https://github.com/formatjs/react-intl/issues/1594)
+
+## [4.1.0](https://github.com/formatjs/react-intl/compare/v4.0.0...v4.1.0) (2020-03-05)
+
+
+### Features
+
+* Introduce ReactIntlErrorCode so we can distinguish and log things differently ([5b2b034](https://github.com/formatjs/react-intl/commit/5b2b034b0afd03479943cf4d1162be532deb95b8))
+
+## [4.0.0](https://github.com/formatjs/react-intl/compare/v3.12.1...v4.0.0) (2020-03-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* This release contains subtle changes to the way we handle embedded HTML Message:
+
+1. All tags specified must have corresponding values and will throw
+error if it's missing, e.g:
+```
+new IntlMessageFormat("a<b>strong</b>").format({ b: (...chunks) => <strong>chunks</strong> })
+```
+2. We don't allow formatting self-closing tags because we already use ICU `{placeholder}` syntax for that.
+3. XML/HTML tags are escaped using apostrophe just like other ICU constructs.
+4. Remove dependency on DOMParser and restrictions on void element like `<link>`. This effectively means you don't need to polyfill DOMParser in Node anymore.
+5. `FormattedHTMLMessage` & `intl.formatHTMLMessage` have been removed since `FormattedMessage` now fully supports embedded HTML tag.
+
+Why are we doing those changes?
+- `FormattedHTMLMessage` & `intl.formatHTMLMessage` were originally created when React was fairly new. These components helped ease migration over from raw HTML to JSX. Given that current popularity of React right now and the fact that `FormattedMessage` allow rendering embedded HTML tag, this is no longer needed.
+- Initially during the 1st iteration of embedded HTML support, we allow any tag that doesn’t have a corresponding formatter to be rendered as raw HTML. We’ve received feedbacks internally that allowing embedded HTML tag to be rendered as-is without sanitization is a XSS security risk. Therefore, in order to allow raw HTML tag you have to opt-in by escaping them using apostrophe. We will update our linter to check for this as well.
+
+### Features
+
+* Upgrade intl-messageformat & intl-messageformat-parser, remove FormattedHTMLMessage ([fae69e9](https://github.com/formatjs/react-intl/commit/fae69e9da2cfd395eeb5d7333a637f6627d94ade))
+
+### [3.12.1](https://github.com/formatjs/react-intl/compare/v3.12.0...v3.12.1) (2020-03-04)
+
+
+### Bug Fixes
+
+* clarify err messages ([b207d80](https://github.com/formatjs/react-intl/commit/b207d805a9e5609983ac1b2ca8f9708030e12337))
+* inline defineMessages macro, fix [#1592](https://github.com/formatjs/react-intl/issues/1592) ([5ae8349](https://github.com/formatjs/react-intl/commit/5ae8349dc2ee08b54a54a2a521b8a9c052960d04))
+
 ## [3.12.0](https://github.com/formatjs/react-intl/compare/v3.11.0...v3.12.0) (2020-02-04)
 
 

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

@@ -53,12 +53,12 @@ var message_1 = require("../formatters/message");
 var utils_1 = require("../utils");
 var shallowEquals_ = require("shallow-equal/objects");
 var shallowEquals = shallowEquals_.default || shallowEquals_;
-var defaultFormatMessage = function (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 message_1.formatMessage(__assign(__assign({}, utils_1.DEFAULT_INTL_CONFIG), { locale: 'en' }), utils_1.createFormatters(), descriptor, values);
-};
+}
 var FormattedMessage = /** @class */ (function (_super) {
     __extends(FormattedMessage, _super);
     function FormattedMessage() {

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

@@ -32,7 +32,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var injectIntl_1 = require("./injectIntl");
 var utils_1 = require("../utils");
-var intl_locales_supported_1 = require("intl-locales-supported");
 var number_1 = require("../formatters/number");
 var relativeTime_1 = require("../formatters/relativeTime");
 var dateTime_1 = require("../formatters/dateTime");
@@ -41,6 +40,7 @@ var message_1 = require("../formatters/message");
 var shallowEquals_ = require("shallow-equal/objects");
 var list_1 = require("../formatters/list");
 var displayName_1 = require("../formatters/displayName");
+var error_1 = require("../error");
 var shallowEquals = shallowEquals_.default || shallowEquals_;
 function processIntlConfig(config) {
     return {
@@ -62,12 +62,10 @@ function processIntlConfig(config) {
 function createIntl(config, cache) {
     var formatters = utils_1.createFormatters(cache);
     var resolvedConfig = __assign(__assign({}, utils_1.DEFAULT_INTL_CONFIG), config);
-    if (!resolvedConfig.locale ||
-        !intl_locales_supported_1.default(resolvedConfig.locale)) {
-        var locale = resolvedConfig.locale, defaultLocale = resolvedConfig.defaultLocale, onError = resolvedConfig.onError;
-        if (typeof onError === 'function') {
-            onError(utils_1.createError("Missing locale data for locale: \"" + locale + "\". " +
-                ("Using default locale: \"" + defaultLocale + "\" as fallback.")));
+    var locale = resolvedConfig.locale, defaultLocale = resolvedConfig.defaultLocale, onError = resolvedConfig.onError;
+    if (!locale) {
+        if (onError) {
+            onError(new error_1.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.
@@ -76,7 +74,14 @@ function createIntl(config, cache) {
         // each <FormattedMessage> contains a `defaultMessage` prop.
         resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
     }
-    return __assign(__assign({}, resolvedConfig), { formatters: formatters, formatNumber: number_1.formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: number_1.formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: relativeTime_1.formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: dateTime_1.formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: dateTime_1.formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: dateTime_1.formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: dateTime_1.formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: plural_1.formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: message_1.formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: message_1.formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: list_1.formatList.bind(null, resolvedConfig, formatters.getListFormat), formatDisplayName: displayName_1.formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames) });
+    else if (!Intl.NumberFormat.supportedLocalesOf(locale).length && onError) {
+        onError(new error_1.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 error_1.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 __assign(__assign({}, resolvedConfig), { formatters: formatters, formatNumber: number_1.formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: number_1.formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: relativeTime_1.formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: dateTime_1.formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: dateTime_1.formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: dateTime_1.formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: dateTime_1.formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: plural_1.formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: message_1.formatMessage.bind(null, resolvedConfig, formatters), formatList: list_1.formatList.bind(null, resolvedConfig, formatters.getListFormat), formatDisplayName: displayName_1.formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames) });
 }
 exports.createIntl = createIntl;
 var IntlProvider = /** @class */ (function (_super) {

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

@@ -0,0 +1,28 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var ReactIntlError = /** @class */ (function (_super) {
+    __extends(ReactIntlError, _super);
+    function ReactIntlError(code, message, exception) {
+        var _this = _super.call(this, "[React Intl Error " + code + "] " + message + " " + (exception ? "\n" + exception.stack : '')) || this;
+        _this.code = code;
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(_this, ReactIntlError);
+        }
+        return _this;
+    }
+    return ReactIntlError;
+}(Error));
+exports.ReactIntlError = ReactIntlError;

package/dist/formatters/dateTime.js

@@ -17,6 +17,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../utils");
+var error_1 = require("../error");
 var DATE_TIME_FORMAT_OPTIONS = [
     'localeMatcher',
     'formatMatcher',
@@ -55,7 +56,7 @@ function formatDate(config, getDateTimeFormat, value, options) {
         return getFormatter(config, 'date', getDateTimeFormat, options).format(date);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting date.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting date.', e));
     }
     return String(date);
 }
@@ -67,7 +68,7 @@ function formatTime(config, getDateTimeFormat, value, options) {
         return getFormatter(config, 'time', getDateTimeFormat, options).format(date);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting time.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting time.', e));
     }
     return String(date);
 }
@@ -79,7 +80,7 @@ function formatDateToParts(config, getDateTimeFormat, value, options) {
         return getFormatter(config, 'date', getDateTimeFormat, options).formatToParts(date);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting date.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting date.', e));
     }
     return [];
 }
@@ -91,7 +92,7 @@ function formatTimeToParts(config, getDateTimeFormat, value, options) {
         return getFormatter(config, 'time', getDateTimeFormat, options).formatToParts(date);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting time.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting time.', e));
     }
     return [];
 }

package/dist/formatters/displayName.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../utils");
+var intl_messageformat_1 = require("intl-messageformat");
+var error_1 = require("../error");
 var DISPLAY_NAMES_OPTONS = [
     'localeMatcher',
     'style',
@@ -12,14 +14,14 @@ function formatDisplayName(_a, getDisplayNames, value, options) {
     if (options === void 0) { options = {}; }
     var DisplayNames = Intl.DisplayNames;
     if (!DisplayNames) {
-        onError(utils_1.createError("Intl.DisplayNames is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-displaynames\"\n"));
+        onError(new intl_messageformat_1.FormatError("Intl.DisplayNames is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-displaynames\"\n", 2 /* MISSING_INTL_API */));
     }
     var filteredOptions = utils_1.filterProps(options, DISPLAY_NAMES_OPTONS);
     try {
         return getDisplayNames(locale, filteredOptions).of(value);
     }
     catch (e) {
-        onError(utils_1.createError('Error formatting display name.', e));
+        onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting display name.', e));
     }
 }
 exports.formatDisplayName = formatDisplayName;

package/dist/formatters/list.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../utils");
+var intl_messageformat_1 = require("intl-messageformat");
+var error_1 = require("../error");
 var LIST_FORMAT_OPTIONS = [
     'localeMatcher',
     'type',
@@ -15,7 +17,7 @@ function formatList(_a, getListFormat, values, options) {
     if (options === void 0) { options = {}; }
     var ListFormat = Intl.ListFormat;
     if (!ListFormat) {
-        onError(utils_1.createError("Intl.ListFormat is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-listformat\"\n"));
+        onError(new intl_messageformat_1.FormatError("Intl.ListFormat is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-listformat\"\n", 2 /* MISSING_INTL_API */));
     }
     var filteredOptions = utils_1.filterProps(options, LIST_FORMAT_OPTIONS);
     try {
@@ -47,7 +49,7 @@ function formatList(_a, getListFormat, values, options) {
         }, []);
     }
     catch (e) {
-        onError(utils_1.createError('Error formatting list.', e));
+        onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting list.', e));
     }
     return values;
 }

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

@@ -25,8 +25,8 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var intl_utils_1 = require("@formatjs/intl-utils");
-var utils_1 = require("../utils");
 var intl_messageformat_1 = require("intl-messageformat");
+var error_1 = require("../error");
 function setTimeZoneInOptions(opts, timeZone) {
     return Object.keys(opts).reduce(function (all, k) {
         all[k] = __assign({ timeZone: timeZone }, opts[k]);
@@ -58,64 +58,47 @@ function formatMessage(_a, state, messageDescriptor, values) {
     var message = messages && messages[String(id)];
     formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
     defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
-    var formattedMessageParts = [];
+    var formattedMessageParts = '';
     if (message) {
         try {
             var formatter = state.getMessageFormat(message, locale, formats, {
                 formatters: state,
             });
-            formattedMessageParts = formatter.formatHTMLMessage(values);
+            formattedMessageParts = formatter.format(values);
         }
         catch (e) {
-            onError(utils_1.createError("Error formatting message: \"" + id + "\" for locale: \"" + locale + "\"" +
+            onError(new error_1.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(utils_1.createError("Missing message: \"" + id + "\" for locale: \"" + locale + "\"" +
-                (defaultMessage ? ', using default message as fallback.' : '')));
-        }
+        // default locale.
+        onError(new error_1.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 {
             var formatter = state.getMessageFormat(defaultMessage, defaultLocale, defaultFormats);
-            formattedMessageParts = formatter.formatHTMLMessage(values);
+            formattedMessageParts = formatter.format(values);
         }
         catch (e) {
-            onError(utils_1.createError("Error formatting the default message for: \"" + id + "\"", e));
+            onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, "Error formatting the default message for: \"" + id + "\"", e));
         }
     }
-    if (!formattedMessageParts.length) {
-        onError(utils_1.createError("Cannot format message: \"" + id + "\", " +
+    if (!formattedMessageParts) {
+        onError(new error_1.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 exports.prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
     }
-    return exports.prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
+    return formattedMessageParts;
 }
 exports.formatMessage = formatMessage;
-function formatHTMLMessage(config, state, messageDescriptor, rawValues) {
-    if (messageDescriptor === void 0) { messageDescriptor = { id: '' }; }
-    if (rawValues === void 0) { 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.
-    var escapedValues = Object.keys(rawValues).reduce(function (escaped, name) {
-        var value = rawValues[name];
-        escaped[name] = typeof value === 'string' ? utils_1.escape(value) : value;
-        return escaped;
-    }, {});
-    return formatMessage(config, state, messageDescriptor, escapedValues);
-}
-exports.formatHTMLMessage = formatHTMLMessage;

package/dist/formatters/number.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../utils");
+var error_1 = require("../error");
 var NUMBER_FORMAT_OPTIONS = [
     'localeMatcher',
     'style',
@@ -40,7 +41,7 @@ function formatNumber(config, getNumberFormat, value, options) {
         return getFormatter(config, getNumberFormat, options).format(value);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting number.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting number.', e));
     }
     return String(value);
 }
@@ -51,7 +52,7 @@ function formatNumberToParts(config, getNumberFormat, value, options) {
         return getFormatter(config, getNumberFormat, options).formatToParts(value);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting number.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting number.', e));
     }
     return [];
 }

package/dist/formatters/plural.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../utils");
+var error_1 = require("../error");
+var intl_messageformat_1 = require("intl-messageformat");
 var PLURAL_FORMAT_OPTIONS = [
     'localeMatcher',
     'type',
@@ -9,14 +11,14 @@ function formatPlural(_a, getPluralRules, value, options) {
     var locale = _a.locale, onError = _a.onError;
     if (options === void 0) { options = {}; }
     if (!Intl.PluralRules) {
-        onError(utils_1.createError("Intl.PluralRules is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-pluralrules\"\n"));
+        onError(new intl_messageformat_1.FormatError("Intl.PluralRules is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-pluralrules\"\n", 2 /* MISSING_INTL_API */));
     }
     var filteredOptions = utils_1.filterProps(options, PLURAL_FORMAT_OPTIONS);
     try {
         return getPluralRules(locale, filteredOptions).select(value);
     }
     catch (e) {
-        onError(utils_1.createError('Error formatting plural.', e));
+        onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting plural.', e));
     }
     return 'other';
 }

package/dist/formatters/relativeTime.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../utils");
+var intl_messageformat_1 = require("intl-messageformat");
+var error_1 = require("../error");
 var RELATIVE_TIME_FORMAT_OPTIONS = [
     'numeric',
     'style',
@@ -20,13 +22,13 @@ function formatRelativeTime(config, getRelativeTimeFormat, value, unit, options)
     }
     var RelativeTimeFormat = Intl.RelativeTimeFormat;
     if (!RelativeTimeFormat) {
-        config.onError(utils_1.createError("Intl.RelativeTimeFormat is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-relativetimeformat\"\n"));
+        config.onError(new intl_messageformat_1.FormatError("Intl.RelativeTimeFormat is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-relativetimeformat\"\n", 2 /* MISSING_INTL_API */));
     }
     try {
         return getFormatter(config, getRelativeTimeFormat, options).format(value, unit);
     }
     catch (e) {
-        config.onError(utils_1.createError('Error formatting relative time.', e));
+        config.onError(new error_1.ReactIntlError("FORMAT_ERROR" /* FORMAT_ERROR */, 'Error formatting relative time.', e));
     }
     return String(value);
 }

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var macro_1 = require("@formatjs/macro");
-exports.defineMessages = macro_1.defineMessages;
+function defineMessages(msgs) {
+    return msgs;
+}
+exports.defineMessages = defineMessages;
 var createFormattedComponent_1 = require("./components/createFormattedComponent");
 var injectIntl_1 = require("./components/injectIntl");
 exports.injectIntl = injectIntl_1.default;
@@ -28,7 +30,7 @@ var plural_1 = require("./components/plural");
 exports.FormattedPlural = plural_1.default;
 var message_1 = require("./components/message");
 exports.FormattedMessage = message_1.default;
-var html_message_1 = require("./components/html-message");
-exports.FormattedHTMLMessage = html_message_1.default;
 var utils_1 = require("./utils");
 exports.createIntlCache = utils_1.createIntlCache;
+var error_1 = require("./error");
+exports.ReactIntlError = error_1.ReactIntlError;

package/dist/react-intl.api.md

@@ -74,31 +74,17 @@ export const FormattedDisplayName: React.FC<DisplayNamesOptions_2 & {
     value: string | number | object;
 }>;
 
-// Warning: (ae-forgotten-export) The symbol "PrimitiveType" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export class FormattedHTMLMessage extends FormattedMessage<Record<string, PrimitiveType>> {
-    // (undocumented)
-    static defaultProps: {
-        tagName: "span";
-        values: {};
-    };
-    // (undocumented)
-    static displayName: string;
-    // (undocumented)
-    render(): JSX.Element;
-}
-
 // @public (undocumented)
 export const FormattedList: React.FC<IntlListFormatOptions & {
     value: React.ReactNode[];
 }>;
 
+// Warning: (ae-forgotten-export) The symbol "PrimitiveType" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "FormatXMLElementFn" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export class FormattedMessage<V extends Record<string, any> = Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>> extends React.Component<Props_3<V>> {
+export class FormattedMessage<T = React.ReactNode, V extends Record<string, any> = Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn<T>>> extends React.Component<Props_3<V>> {
     // (undocumented)
     static defaultProps: {
         values: {};
@@ -127,7 +113,7 @@ export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "format" | "localeMatcher" | "type" | "value"> & {
+export 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>;
@@ -240,8 +226,10 @@ export interface IntlConfig {
     //
     // (undocumented)
     messages: Record<string, string> | Record<string, MessageFormatElement[]>;
+    // Warning: (ae-forgotten-export) The symbol "FormatError" needs to be exported by the entry point index.d.ts
+    //
     // (undocumented)
-    onError(err: string): void;
+    onError(err: ReactIntlError | FormatError): void;
     // (undocumented)
     textComponent?: React.ComponentType | keyof React.ReactHTML;
     // (undocumented)
@@ -252,7 +240,7 @@ export interface IntlConfig {
 export const IntlContext: React.Context<IntlShape>;
 
 // @public (undocumented)
-export interface IntlFormatters {
+export interface IntlFormatters<T = React.ReactNode> {
     // (undocumented)
     formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     // (undocumented)
@@ -260,15 +248,13 @@ export interface IntlFormatters {
     // (undocumented)
     formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
     // (undocumented)
-    formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
-    // (undocumented)
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     // (undocumented)
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
     // (undocumented)
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
     // (undocumented)
-    formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>): string | React.ReactNodeArray;
+    formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn<T>>): string | React.ReactNodeArray;
     // (undocumented)
     formatNumber(value: Parameters<Intl.NumberFormat['format']>[0], opts?: FormatNumberOptions): string;
     // (undocumented)
@@ -321,6 +307,27 @@ export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 // @public (undocumented)
 export const RawIntlProvider: React.Provider<IntlShape>;
 
+// @public (undocumented)
+export class ReactIntlError extends Error {
+    constructor(code: ReactIntlErrorCode, message: string, exception?: Error);
+    // (undocumented)
+    code: ReactIntlErrorCode;
+}
+
+// @public (undocumented)
+export const enum ReactIntlErrorCode {
+    // (undocumented)
+    FORMAT_ERROR = "FORMAT_ERROR",
+    // (undocumented)
+    INVALID_CONFIG = "INVALID_CONFIG",
+    // (undocumented)
+    MISSING_DATA = "MISSING_DATA",
+    // (undocumented)
+    MISSING_TRANSLATION = "MISSING_TRANSLATION",
+    // (undocumented)
+    UNSUPPORTED_FORMATTER = "UNSUPPORTED_FORMATTER"
+}
+
 // @public (undocumented)
 export function useIntl(): IntlShape;