react-intl 3.12.0 → 4.1.1

package/src/formatters/message.ts

@@ -14,11 +14,11 @@ import {
   CustomFormats,
 } from '../types';
 
-import {createError, escape} from '../utils';
 import IntlMessageFormat, {
   FormatXMLElementFn,
   PrimitiveType,
 } from 'intl-messageformat';
+import {ReactIntlError, ReactIntlErrorCode} from '../error';
 
 function setTimeZoneInOptions(
   opts: Record<string, Intl.DateTimeFormatOptions>,
@@ -72,8 +72,8 @@ function deepMergeFormatsAndSetTimeZone(
   };
 }
 
-export const prepareIntlMessageFormatHtmlOutput = (
-  chunks: (string | object)[]
+export const prepareIntlMessageFormatHtmlOutput = <T>(
+  chunks: (string | T)[]
 ): React.ReactElement => React.createElement(React.Fragment, null, ...chunks);
 
 export function formatMessage(
@@ -97,7 +97,7 @@ export function formatMessage(
   messageDescriptor?: MessageDescriptor,
   values?: Record<string, PrimitiveType>
 ): string;
-export function formatMessage(
+export function formatMessage<T>(
   {
     locale,
     formats,
@@ -118,11 +118,20 @@ export function formatMessage(
   >,
   state: Formatters,
   messageDescriptor: MessageDescriptor = {id: ''},
-  values: Record<
-    string,
-    PrimitiveType | React.ReactElement | FormatXMLElementFn
-  > = {}
-): string | React.ReactNodeArray | React.ReactElement {
+  values:
+    | Record<
+        string,
+        | string
+        | number
+        | boolean
+        | Date
+        | T
+        | FormatXMLElementFn<T>
+        | null
+        | undefined
+      >
+    | undefined = {}
+): React.ReactNode {
   const {id, defaultMessage} = messageDescriptor;
 
   // `id` is a required field of a Message Descriptor.
@@ -131,7 +140,7 @@ export function formatMessage(
   formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
   defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
 
-  let formattedMessageParts: Array<string | object> = [];
+  let formattedMessageParts: string | T | (string | T)[] = '';
 
   if (message) {
     try {
@@ -139,34 +148,34 @@ export function formatMessage(
         formatters: state,
       });
 
-      formattedMessageParts = formatter.formatHTMLMessage(values);
+      formattedMessageParts = formatter.format(values);
     } catch (e) {
       onError(
-        createError(
+        new ReactIntlError(
+          ReactIntlErrorCode.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(
+        ReactIntlErrorCode.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,
@@ -174,17 +183,22 @@ export function formatMessage(
         defaultFormats
       );
 
-      formattedMessageParts = formatter.formatHTMLMessage(values);
+      formattedMessageParts = formatter.format(values);
     } catch (e) {
       onError(
-        createError(`Error formatting the default message for: "${id}"`, e)
+        new ReactIntlError(
+          ReactIntlErrorCode.FORMAT_ERROR,
+          `Error formatting the default message for: "${id}"`,
+          e
+        )
       );
     }
   }
 
-  if (!formattedMessageParts.length) {
+  if (!formattedMessageParts) {
     onError(
-      createError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
         `Cannot format message: "${id}", ` +
           `using message ${
             message || defaultMessage ? 'source' : 'id'
@@ -196,41 +210,10 @@ export function formatMessage(
     }
     return defaultMessage || String(id);
   }
-  if (
-    formattedMessageParts.length === 1 &&
-    typeof formattedMessageParts[0] === 'string'
-  ) {
-    return (formattedMessageParts[0] as string) || defaultMessage || String(id);
+  if (Array.isArray(formattedMessageParts)) {
+    return prepareIntlMessageFormatHtmlOutput<T>(
+      formattedMessageParts as Array<string | T>
+    );
   }
-
-  return prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
-}
-
-export function formatHTMLMessage(
-  config: Pick<
-    IntlConfig,
-    | 'locale'
-    | 'formats'
-    | 'messages'
-    | 'defaultLocale'
-    | 'defaultFormats'
-    | 'onError'
-  >,
-  state: Formatters,
-  messageDescriptor: MessageDescriptor = {id: ''},
-  rawValues: Record<string, PrimitiveType> = {}
-): React.ReactNode {
-  // 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: Record<string, any>, name) => {
-      const value = rawValues[name];
-      escaped[name] = typeof value === 'string' ? escape(value) : value;
-      return escaped;
-    },
-    {}
-  );
-
-  return formatMessage(config, state, messageDescriptor, escapedValues);
+  return formattedMessageParts as string | T;
 }

package/src/formatters/number.ts

@@ -1,6 +1,7 @@
 import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {getNamedFormat, filterProps, createError} from '../utils';
+import {getNamedFormat, filterProps} from '../utils';
 import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
+import {ReactIntlError, ReactIntlErrorCode} from '../error';
 
 const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
   'localeMatcher',
@@ -55,7 +56,13 @@ export function formatNumber(
   try {
     return getFormatter(config, getNumberFormat, options).format(value);
   } catch (e) {
-    config.onError(createError('Error formatting number.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting number.',
+        e
+      )
+    );
   }
 
   return String(value);
@@ -70,7 +77,13 @@ export function formatNumberToParts(
   try {
     return getFormatter(config, getNumberFormat, options).formatToParts(value);
   } catch (e) {
-    config.onError(createError('Error formatting number.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting number.',
+        e
+      )
+    );
   }
 
   return [];

package/src/formatters/plural.ts

@@ -1,5 +1,7 @@
 import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {filterProps, createError} from '../utils';
+import {filterProps} from '../utils';
+import {ReactIntlErrorCode, ReactIntlError} from '../error';
+import {FormatError, ErrorCode} from 'intl-messageformat';
 
 const PLURAL_FORMAT_OPTIONS: Array<keyof Intl.PluralRulesOptions> = [
   'localeMatcher',
@@ -14,9 +16,12 @@ export function formatPlural(
 ): string {
   if (!Intl.PluralRules) {
     onError(
-      createError(`Intl.PluralRules is not available in this environment.
+      new FormatError(
+        `Intl.PluralRules is not available in this environment.
 Try polyfilling it using "@formatjs/intl-pluralrules"
-`)
+`,
+        ErrorCode.MISSING_INTL_API
+      )
     );
   }
   const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS);
@@ -24,7 +29,13 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
   try {
     return getPluralRules(locale, filteredOptions).select(value);
   } catch (e) {
-    onError(createError('Error formatting plural.', e));
+    onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting plural.',
+        e
+      )
+    );
   }
 
   return 'other';

package/src/formatters/relativeTime.ts

@@ -1,9 +1,11 @@
 import {IntlConfig, IntlFormatters, Formatters} from '../types';
 
-import {getNamedFormat, filterProps, createError} from '../utils';
+import {getNamedFormat, filterProps} from '../utils';
 import RelativeTimeFormat, {
   IntlRelativeTimeFormatOptions,
 } from '@formatjs/intl-relativetimeformat';
+import {FormatError, ErrorCode} from 'intl-messageformat';
+import {ReactIntlError, ReactIntlErrorCode} from '../error';
 
 const RELATIVE_TIME_FORMAT_OPTIONS: Array<keyof IntlRelativeTimeFormatOptions> = [
   'numeric',
@@ -45,9 +47,12 @@ export function formatRelativeTime(
   const RelativeTimeFormat = (Intl as any).RelativeTimeFormat;
   if (!RelativeTimeFormat) {
     config.onError(
-      createError(`Intl.RelativeTimeFormat is not available in this environment.
+      new FormatError(
+        `Intl.RelativeTimeFormat is not available in this environment.
 Try polyfilling it using "@formatjs/intl-relativetimeformat"
-`)
+`,
+        ErrorCode.MISSING_INTL_API
+      )
     );
   }
   try {
@@ -56,7 +61,13 @@ Try polyfilling it using "@formatjs/intl-relativetimeformat"
       unit
     );
   } catch (e) {
-    config.onError(createError('Error formatting relative time.', e));
+    config.onError(
+      new ReactIntlError(
+        ReactIntlErrorCode.FORMAT_ERROR,
+        'Error formatting relative time.',
+        e
+      )
+    );
   }
 
   return String(value);

package/src/index.ts

@@ -5,7 +5,9 @@
  */
 import * as React from 'react';
 export * from './types';
-export {defineMessages} from '@formatjs/macro';
+export function defineMessages<T, U extends Record<string, T>>(msgs: U): U {
+  return msgs;
+}
 import {
   createFormattedComponent,
   createFormattedDateTimePartsComponent,
@@ -52,5 +54,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/src/types.ts

@@ -8,6 +8,7 @@ import IntlMessageFormat, {
   Formats,
   PrimitiveType,
   FormatXMLElementFn,
+  FormatError,
 } from 'intl-messageformat';
 import IntlRelativeTimeFormat, {
   IntlRelativeTimeFormatOptions,
@@ -16,6 +17,7 @@ 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;
@@ -25,7 +27,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> {
@@ -64,7 +66,7 @@ export type FormatDisplayNameOptions = Exclude<
   'localeMatcher'
 >;
 
-export interface IntlFormatters {
+export interface IntlFormatters<T = React.ReactNode> {
   formatDate(
     value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
     opts?: FormatDateOptions
@@ -106,13 +108,9 @@ export interface IntlFormatters {
     descriptor: MessageDescriptor,
     values?: Record<
       string,
-      PrimitiveType | React.ReactElement | FormatXMLElementFn
+      PrimitiveType | React.ReactElement | FormatXMLElementFn<T>
     >
   ): string | React.ReactNodeArray;
-  formatHTMLMessage(
-    descriptor: MessageDescriptor,
-    values?: Record<string, PrimitiveType>
-  ): React.ReactNode;
   formatList(values: Array<string>, opts?: FormatListOptions): string;
   formatList(
     values: Array<string | React.ReactNode>,

package/src/utils.ts

@@ -15,23 +15,7 @@ import IntlMessageFormat from 'intl-messageformat';
 import memoizeIntlConstructor from 'intl-format-cache';
 import {invariant} from '@formatjs/intl-utils';
 import {IntlRelativeTimeFormatOptions} from '@formatjs/intl-relativetimeformat';
-
-const ESCAPED_CHARS: Record<number, string> = {
-  38: '&amp;',
-  62: '&gt;',
-  60: '&lt;',
-  34: '&quot;',
-  39: '&#x27;',
-};
-
-const UNSAFE_CHARS_REGEX = /[&><"']/g;
-
-export function escape(str: string): string {
-  return ('' + str).replace(
-    UNSAFE_CHARS_REGEX,
-    match => ESCAPED_CHARS[match.charCodeAt(0)]
-  );
-}
+import { ReactIntlError, ReactIntlErrorCode } from './error';
 
 export function filterProps<T extends Record<string, any>, K extends string>(
   props: T,
@@ -57,12 +41,7 @@ export function invariantIntlContext(intl?: any): asserts intl {
   );
 }
 
-export function createError(message: string, exception?: Error): string {
-  const eMsg = exception ? `\n${exception.stack}` : '';
-  return `[React Intl] ${message}${eMsg}`;
-}
-
-export function defaultErrorHandler(error: string): void {
+export function defaultErrorHandler(error: ReactIntlError): void {
   if (process.env.NODE_ENV !== 'production') {
     console.error(error);
   }
@@ -132,7 +111,7 @@ export function getNamedFormat<T extends keyof CustomFormats>(
   formats: CustomFormats,
   type: T,
   name: string,
-  onError: (err: string) => void
+  onError: (err: ReactIntlError) => void
 ):
   | Intl.NumberFormatOptions
   | Intl.DateTimeFormatOptions
@@ -147,5 +126,5 @@ export function getNamedFormat<T extends keyof CustomFormats>(
     return format;
   }
 
-  onError(createError(`No ${type} format named: ${name}`));
+  onError(new ReactIntlError(ReactIntlErrorCode.UNSUPPORTED_FORMATTER, `No ${type} format named: ${name}`));
 }

package/dist/components/html-message.d.ts

@@ -1,11 +0,0 @@
-import { PrimitiveType } from 'intl-messageformat';
-import FormattedMessage from './message';
-declare class FormattedHTMLMessage extends FormattedMessage<Record<string, PrimitiveType>> {
-    static displayName: string;
-    static defaultProps: {
-        tagName: "span";
-        values: {};
-    };
-    render(): JSX.Element;
-}
-export default FormattedHTMLMessage;

package/dist/components/html-message.js

@@ -1,75 +0,0 @@
-"use strict";
-/*
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License.
- * See the accompanying LICENSE file for terms.
- */
-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 __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var message_1 = require("./message");
-var injectIntl_1 = require("./injectIntl");
-var utils_1 = require("../utils");
-var FormattedHTMLMessage = /** @class */ (function (_super) {
-    __extends(FormattedHTMLMessage, _super);
-    function FormattedHTMLMessage() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FormattedHTMLMessage.prototype.render = function () {
-        var _this = this;
-        return (React.createElement(injectIntl_1.Context.Consumer, null, function (intl) {
-            if (!_this.props.defaultMessage) {
-                utils_1.invariantIntlContext(intl);
-            }
-            var formatHTMLMessage = intl.formatHTMLMessage, textComponent = intl.textComponent;
-            var _a = _this.props, id = _a.id, description = _a.description, defaultMessage = _a.defaultMessage, rawValues = _a.values, children = _a.children;
-            var Component = _this.props.tagName;
-            // This is bc of TS3.3 doesn't recognize `defaultProps`
-            if (!Component) {
-                Component = textComponent || 'span';
-            }
-            var descriptor = { id: id, description: description, defaultMessage: defaultMessage };
-            var formattedHTMLMessage = formatHTMLMessage(descriptor, rawValues);
-            if (typeof children === 'function') {
-                return children(formattedHTMLMessage);
-            }
-            // Since the message presumably has HTML in it, we need to set
-            // `innerHTML` in order for it to be rendered and not escaped by React.
-            // To be safe, all string prop values were escaped when formatting the
-            // message. It is assumed that the message is not UGC, and came from the
-            // developer making it more like a template.
-            //
-            // Note: There's a perf impact of using this component since there's no
-            // way for React to do its virtual DOM diffing.
-            var html = { __html: formattedHTMLMessage };
-            return React.createElement(Component, { dangerouslySetInnerHTML: html });
-        }));
-    };
-    FormattedHTMLMessage.displayName = 'FormattedHTMLMessage';
-    FormattedHTMLMessage.defaultProps = __assign(__assign({}, message_1.default.defaultProps), { tagName: 'span' });
-    return FormattedHTMLMessage;
-}(message_1.default));
-exports.default = FormattedHTMLMessage;

package/lib/components/html-message.d.ts

@@ -1,11 +0,0 @@
-import { PrimitiveType } from 'intl-messageformat';
-import FormattedMessage from './message';
-declare class FormattedHTMLMessage extends FormattedMessage<Record<string, PrimitiveType>> {
-    static displayName: string;
-    static defaultProps: {
-        tagName: "span";
-        values: {};
-    };
-    render(): JSX.Element;
-}
-export default FormattedHTMLMessage;

package/lib/components/html-message.js

@@ -1,43 +0,0 @@
-/*
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License.
- * See the accompanying LICENSE file for terms.
- */
-import * as React from 'react';
-import FormattedMessage from './message';
-import { Context } from './injectIntl';
-import { invariantIntlContext } from '../utils';
-class FormattedHTMLMessage extends FormattedMessage {
-    render() {
-        return (React.createElement(Context.Consumer, null, (intl) => {
-            if (!this.props.defaultMessage) {
-                invariantIntlContext(intl);
-            }
-            const { formatHTMLMessage, textComponent } = intl;
-            const { id, description, defaultMessage, values: rawValues, children, } = this.props;
-            let { tagName: Component } = this.props;
-            // This is bc of TS3.3 doesn't recognize `defaultProps`
-            if (!Component) {
-                Component = textComponent || 'span';
-            }
-            const descriptor = { id, description, defaultMessage };
-            const formattedHTMLMessage = formatHTMLMessage(descriptor, rawValues);
-            if (typeof children === 'function') {
-                return children(formattedHTMLMessage);
-            }
-            // Since the message presumably has HTML in it, we need to set
-            // `innerHTML` in order for it to be rendered and not escaped by React.
-            // To be safe, all string prop values were escaped when formatting the
-            // message. It is assumed that the message is not UGC, and came from the
-            // developer making it more like a template.
-            //
-            // Note: There's a perf impact of using this component since there's no
-            // way for React to do its virtual DOM diffing.
-            const html = { __html: formattedHTMLMessage };
-            return React.createElement(Component, { dangerouslySetInnerHTML: html });
-        }));
-    }
-}
-FormattedHTMLMessage.displayName = 'FormattedHTMLMessage';
-FormattedHTMLMessage.defaultProps = Object.assign(Object.assign({}, FormattedMessage.defaultProps), { tagName: 'span' });
-export default FormattedHTMLMessage;

package/src/components/html-message.tsx

@@ -1,68 +0,0 @@
-/*
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License.
- * See the accompanying LICENSE file for terms.
- */
-
-import * as React from 'react';
-import {PrimitiveType} from 'intl-messageformat';
-import FormattedMessage from './message';
-import {Context} from './injectIntl';
-import {invariantIntlContext} from '../utils';
-
-class FormattedHTMLMessage extends FormattedMessage<
-  Record<string, PrimitiveType>
-> {
-  static displayName = 'FormattedHTMLMessage';
-  static defaultProps = {
-    ...FormattedMessage.defaultProps,
-    tagName: 'span' as 'span',
-  };
-  render(): JSX.Element {
-    return (
-      <Context.Consumer>
-        {(intl): React.ReactNode => {
-          if (!this.props.defaultMessage) {
-            invariantIntlContext(intl);
-          }
-
-          const {formatHTMLMessage, textComponent} = intl;
-          const {
-            id,
-            description,
-            defaultMessage,
-            values: rawValues,
-            children,
-          } = this.props;
-
-          let {tagName: Component} = this.props;
-
-          // This is bc of TS3.3 doesn't recognize `defaultProps`
-          if (!Component) {
-            Component = textComponent || 'span';
-          }
-
-          const descriptor = {id, description, defaultMessage};
-          const formattedHTMLMessage = formatHTMLMessage(descriptor, rawValues);
-
-          if (typeof children === 'function') {
-            return children(formattedHTMLMessage);
-          }
-
-          // Since the message presumably has HTML in it, we need to set
-          // `innerHTML` in order for it to be rendered and not escaped by React.
-          // To be safe, all string prop values were escaped when formatting the
-          // message. It is assumed that the message is not UGC, and came from the
-          // developer making it more like a template.
-          //
-          // Note: There's a perf impact of using this component since there's no
-          // way for React to do its virtual DOM diffing.
-          const html = {__html: formattedHTMLMessage};
-          return <Component dangerouslySetInnerHTML={html} />;
-        }}
-      </Context.Consumer>
-    );
-  }
-}
-
-export default FormattedHTMLMessage;