react-intl 4.4.0 → 4.5.0

package/lib/components/createFormattedComponent.js

@@ -51,7 +51,9 @@ export function createFormattedDateTimePartsComponent(name) {
 export function createFormattedComponent(name) {
     const Component = props => (React.createElement(Context.Consumer, null, (intl) => {
         invariantIntlContext(intl);
-        const { value, children } = props, formatProps = __rest(props, ["value", "children"]);
+        const { value, children } = props, formatProps = __rest(props
+        // TODO: fix TS type definition for localeMatcher upstream
+        , ["value", "children"]);
         // TODO: fix TS type definition for localeMatcher upstream
         const formattedValue = intl[name](value, formatProps);
         if (typeof children === 'function') {

package/lib/error.d.ts

@@ -1,4 +1,4 @@
-import { MessageDescriptor } from "./types";
+import { MessageDescriptor } from './types';
 export declare const enum ReactIntlErrorCode {
     FORMAT_ERROR = "FORMAT_ERROR",
     UNSUPPORTED_FORMATTER = "UNSUPPORTED_FORMATTER",

package/lib/formatters/relativeTime.js

@@ -1,10 +1,7 @@
 import { getNamedFormat, filterProps } from '../utils';
 import { FormatError } from 'intl-messageformat';
 import { ReactIntlError } from '../error';
-const RELATIVE_TIME_FORMAT_OPTIONS = [
-    'numeric',
-    'style',
-];
+const RELATIVE_TIME_FORMAT_OPTIONS = ['numeric', 'style'];
 function getFormatter({ locale, formats, onError, }, getRelativeTimeFormat, options = {}) {
     const { format } = options;
     const defaults = (!!format && getNamedFormat(formats, 'relative', format, onError)) || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.",
   "keywords": [
     "intl",
@@ -131,7 +131,7 @@
   "types": "./lib/react-intl.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@formatjs/intl-displaynames": "^1.2.4",
+    "@formatjs/intl-displaynames": "^1.2.5",
     "@formatjs/intl-listformat": "^1.4.4",
     "@formatjs/intl-relativetimeformat": "^4.5.12",
     "@formatjs/intl-unified-numberformat": "^3.3.3",
@@ -140,8 +140,8 @@
     "@types/invariant": "^2.2.31",
     "hoist-non-react-statics": "^3.3.2",
     "intl-format-cache": "^4.2.24",
-    "intl-messageformat": "^8.3.6",
-    "intl-messageformat-parser": "^4.1.4",
+    "intl-messageformat": "^8.3.7",
+    "intl-messageformat-parser": "^5.0.0",
     "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
@@ -163,26 +163,22 @@
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
-    "babel-jest": "^25.3.0",
+    "babel-jest": "^25.4.0",
     "benchmark": "^2.1.4",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.19.0",
     "fs-extra": "^9.0.0",
     "full-icu": "^1.3.1",
     "glob": "^7.1.6",
-    "jest": "^25.3.0",
+    "jest": "^25.4.0",
     "markdown-toc": "^1.2.0",
     "mkdirp": "^1.0.4",
     "parcel": "^1.12.4",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rimraf": "^3.0.2",
@@ -191,10 +187,10 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-typescript2": "^0.26.0",
+    "rollup-plugin-typescript2": "^0.27.0",
     "rollup-plugin-uglify": "^6.0.4",
     "standard-version": "^7.1.0",
-    "ts-jest": "^25.3.1",
+    "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",
     "tslib": "^1.11.1",
     "typescript": "3.8"
@@ -209,14 +205,12 @@
     "build": "npm run build:lib && npm run build:dts && npm run build:dist",
     "clean": "rimraf coverage/ dist/ lib/ core.js core.d.ts",
     "example": "parcel examples/index.html",
-    "format:fix": "prettier --write {src,scripts,test,docs,examples}/**/*.{js,md,jsx,ts,tsx}",
-    "format": "npm run format:fix -- --check",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "lint": "eslint src --ext .ts,.tsx",
-    "postchangelog": "npm run toc && npm run format:fix",
+    "prettier": "prettier --write \"{src,scripts,test,docs,examples}/**/*\"",
+    "prettier:check": "prettier \"{src,scripts,test,docs,examples}/**/*\" --check",
+    "postchangelog": "npm run toc && npm run prettier",
     "prerelease": "npm run clean && npm run build && npm run test:all",
     "release": "standard-version",
-    "test:all": "npm run lint && npm run format && npm run test",
+    "test:all": "npm run prettier:check && npm run test",
     "test:perf": "cross-env NODE_ENV=production babel-node test/perf",
     "test:watch": "cross-env NODE_ICU_DATA=./node_modules/full-icu jest --watch",
     "test": "cross-env TZ=UTC NODE_ICU_DATA=./node_modules/full-icu jest --coverage --verbose",
@@ -224,8 +218,7 @@
   },
   "pre-commit": [
     "toc",
-    "format:fix",
-    "lint:fix"
+    "prettier"
   ],
   "browserslist": [
     "ie 11"

package/src/components/createFormattedComponent.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {invariantIntlContext} from '../utils';
+import * as React from 'react'
+import {invariantIntlContext} from '../utils'
 import {
   IntlShape,
   FormatDateOptions,
   FormatNumberOptions,
   FormatListOptions,
   FormatDisplayNameOptions,
-} from '../types';
-import {Context} from './injectIntl';
+} from '../types'
+import {Context} from './injectIntl'
 
 enum DisplayName {
   formatDate = 'FormattedDate',
@@ -27,27 +27,29 @@ enum DisplayNameParts {
 }
 
 type Formatter = {
-  formatDate: FormatDateOptions;
-  formatTime: FormatDateOptions;
-  formatNumber: FormatNumberOptions;
-  formatList: FormatListOptions;
-  formatDisplayName: FormatDisplayNameOptions;
-};
+  formatDate: FormatDateOptions
+  formatTime: FormatDateOptions
+  formatNumber: FormatNumberOptions
+  formatList: FormatListOptions
+  formatDisplayName: FormatDisplayNameOptions
+}
 
-export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
-  value: Parameters<IntlShape['formatNumber']>[0];
+export const FormattedNumberParts: React.FC<
+  Formatter['formatNumber'] & {
+    value: Parameters<IntlShape['formatNumber']>[0]
 
-  children(val: Intl.NumberFormatPart[]): React.ReactElement | null;
-}> = props => (
+    children(val: Intl.NumberFormatPart[]): React.ReactElement | null
+  }
+> = props => (
   <Context.Consumer>
     {(intl): React.ReactElement | null => {
-      invariantIntlContext(intl);
-      const {value, children, ...formatProps} = props;
-      return children(intl.formatNumberToParts(value, formatProps));
+      invariantIntlContext(intl)
+      const {value, children, ...formatProps} = props
+      return children(intl.formatNumberToParts(value, formatProps))
     }}
   </Context.Consumer>
-);
-FormattedNumberParts.displayName = 'FormattedNumberParts';
+)
+FormattedNumberParts.displayName = 'FormattedNumberParts'
 
 export function createFormattedDateTimePartsComponent<
   Name extends 'formatDate' | 'formatTime'
@@ -55,65 +57,65 @@ export function createFormattedDateTimePartsComponent<
   name: Name
 ): React.FC<
   Formatter[Name] & {
-    value: Parameters<IntlShape[Name]>[0];
-    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
+    value: Parameters<IntlShape[Name]>[0]
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
   }
 > {
-  type FormatFn = IntlShape[Name];
+  type FormatFn = IntlShape[Name]
   type Props = Formatter[Name] & {
-    value: Parameters<FormatFn>[0];
-    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
-  };
+    value: Parameters<FormatFn>[0]
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
+  }
 
   const ComponentParts: React.FC<Props> = props => (
     <Context.Consumer>
       {(intl): React.ReactElement | null => {
-        invariantIntlContext(intl);
-        const {value, children, ...formatProps} = props;
-        const date = typeof value === 'string' ? new Date(value || 0) : value;
+        invariantIntlContext(intl)
+        const {value, children, ...formatProps} = props
+        const date = typeof value === 'string' ? new Date(value || 0) : value
         const formattedParts: Intl.DateTimeFormatPart[] =
           name === 'formatDate'
             ? intl.formatDateToParts(date, formatProps)
-            : intl.formatTimeToParts(date, formatProps);
+            : intl.formatTimeToParts(date, formatProps)
 
-        return children(formattedParts);
+        return children(formattedParts)
       }}
     </Context.Consumer>
-  );
-  ComponentParts.displayName = DisplayNameParts[name];
-  return ComponentParts;
+  )
+  ComponentParts.displayName = DisplayNameParts[name]
+  return ComponentParts
 }
 
 export function createFormattedComponent<Name extends keyof Formatter>(
   name: Name
 ): React.FC<
   Formatter[Name] & {
-    value: Parameters<IntlShape[Name]>[0];
-    children?(val: string): React.ReactElement | null;
+    value: Parameters<IntlShape[Name]>[0]
+    children?(val: string): React.ReactElement | null
   }
 > {
-  type FormatFn = IntlShape[Name];
+  type FormatFn = IntlShape[Name]
   type Props = Formatter[Name] & {
-    value: Parameters<FormatFn>[0];
-    children?(val: string): React.ReactElement | null;
-  };
+    value: Parameters<FormatFn>[0]
+    children?(val: string): React.ReactElement | null
+  }
 
   const Component: React.FC<Props> = props => (
     <Context.Consumer>
       {(intl): JSX.Element | null => {
-        invariantIntlContext(intl);
-        const {value, children, ...formatProps} = props;
+        invariantIntlContext(intl)
+        const {value, children, ...formatProps} = props
         // TODO: fix TS type definition for localeMatcher upstream
-        const formattedValue = intl[name](value as any, formatProps as any);
+        const formattedValue = intl[name](value as any, formatProps as any)
 
         if (typeof children === 'function') {
-          return children(formattedValue as any);
+          return children(formattedValue as any)
         }
-        const Text = intl.textComponent || React.Fragment;
-        return <Text>{formattedValue}</Text>;
+        const Text = intl.textComponent || React.Fragment
+        return <Text>{formattedValue}</Text>
       }}
     </Context.Consumer>
-  );
-  Component.displayName = DisplayName[name];
-  return Component;
+  )
+  Component.displayName = DisplayName[name]
+  return Component
 }

package/src/components/injectIntl.tsx

@@ -1,41 +1,41 @@
-import * as React from 'react';
-import * as hoistNonReactStatics_ from 'hoist-non-react-statics';
+import * as React from 'react'
+import * as hoistNonReactStatics_ from 'hoist-non-react-statics'
 // Since rollup cannot deal with namespace being a function,
 // this is to interop with TypeScript since `invariant`
 // does not export a default
 // https://github.com/rollup/rollup/issues/1267
 const hoistNonReactStatics: typeof hoistNonReactStatics_ =
-  (hoistNonReactStatics_ as any).default || hoistNonReactStatics_;
-import {invariantIntlContext} from '../utils';
-import {IntlShape, Omit} from '../types';
+  (hoistNonReactStatics_ as any).default || hoistNonReactStatics_
+import {invariantIntlContext} from '../utils'
+import {IntlShape, Omit} from '../types'
 
 function getDisplayName(Component: React.ComponentType<any>): string {
-  return Component.displayName || Component.name || 'Component';
+  return Component.displayName || Component.name || 'Component'
 }
 
 // TODO: We should provide initial value here
-const IntlContext = React.createContext<IntlShape>(null as any);
-const {Consumer: IntlConsumer, Provider: IntlProvider} = IntlContext;
+const IntlContext = React.createContext<IntlShape>(null as any)
+const {Consumer: IntlConsumer, Provider: IntlProvider} = IntlContext
 
-export const Provider = IntlProvider;
-export const Context = IntlContext;
+export const Provider = IntlProvider
+export const Context = IntlContext
 
 export interface Opts<
   IntlPropName extends string = 'intl',
   ForwardRef extends boolean = false
 > {
-  intlPropName?: IntlPropName;
-  forwardRef?: ForwardRef;
-  enforceContext?: boolean;
+  intlPropName?: IntlPropName
+  forwardRef?: ForwardRef
+  enforceContext?: boolean
 }
 
 export type WrappedComponentProps<IntlPropName extends string = 'intl'> = {
-  [k in IntlPropName]: IntlShape;
-};
+  [k in IntlPropName]: IntlShape
+}
 
 export type WithIntlProps<P> = Omit<P, keyof WrappedComponentProps> & {
-  forwardedRef?: React.Ref<any>;
-};
+  forwardedRef?: React.Ref<any>
+}
 
 export default function injectIntl<
   IntlPropName extends string,
@@ -44,8 +44,8 @@ export default function injectIntl<
   WrappedComponent: React.ComponentType<P>,
   options?: Opts<IntlPropName, false>
 ): React.FC<WithIntlProps<P>> & {
-  WrappedComponent: React.ComponentType<P>;
-};
+  WrappedComponent: React.ComponentType<P>
+}
 export default function injectIntl<
   IntlPropName extends string = 'intl',
   P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
@@ -56,8 +56,8 @@ export default function injectIntl<
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
 > & {
-  WrappedComponent: React.ComponentType<P>;
-};
+  WrappedComponent: React.ComponentType<P>
+}
 export default function injectIntl<
   IntlPropName extends string = 'intl',
   P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
@@ -69,20 +69,20 @@ export default function injectIntl<
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
 > & {
-  WrappedComponent: React.ComponentType<P>;
+  WrappedComponent: React.ComponentType<P>
 } {
   const {intlPropName = 'intl', forwardRef = false, enforceContext = true} =
-    options || {};
+    options || {}
 
   const WithIntl: React.FC<P & {forwardedRef?: React.Ref<any>}> & {
-    WrappedComponent: React.ComponentType<P>;
+    WrappedComponent: React.ComponentType<P>
   } = props => (
     <IntlConsumer>
       {(intl): React.ReactNode => {
         if (enforceContext) {
-          invariantIntlContext(intl);
+          invariantIntlContext(intl)
         }
-        const intlProp = {[intlPropName]: intl};
+        const intlProp = {[intlPropName]: intl}
 
         return (
           <WrappedComponent
@@ -90,12 +90,12 @@ export default function injectIntl<
             {...intlProp}
             ref={forwardRef ? props.forwardedRef : null}
           />
-        );
+        )
       }}
     </IntlConsumer>
-  );
-  WithIntl.displayName = `injectIntl(${getDisplayName(WrappedComponent)})`;
-  WithIntl.WrappedComponent = WrappedComponent;
+  )
+  WithIntl.displayName = `injectIntl(${getDisplayName(WrappedComponent)})`
+  WithIntl.WrappedComponent = WrappedComponent
 
   if (forwardRef) {
     return hoistNonReactStatics(
@@ -103,8 +103,8 @@ export default function injectIntl<
         <WithIntl {...props} forwardedRef={ref} />
       )),
       WrappedComponent
-    ) as any;
+    ) as any
   }
 
-  return hoistNonReactStatics(WithIntl, WrappedComponent) as any;
+  return hoistNonReactStatics(WithIntl, WrappedComponent) as any
 }

package/src/components/message.tsx

@@ -4,19 +4,19 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import * as React from 'react';
-import {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
-import {Context} from './injectIntl';
-import {MessageDescriptor} from '../types';
-import {formatMessage} from '../formatters/message';
+import * as React from 'react'
+import {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat'
+import {Context} from './injectIntl'
+import {MessageDescriptor} from '../types'
+import {formatMessage} from '../formatters/message'
 import {
   invariantIntlContext,
   DEFAULT_INTL_CONFIG,
   createFormatters,
-} from '../utils';
-import * as shallowEquals_ from 'shallow-equal/objects';
+} from '../utils'
+import * as shallowEquals_ from 'shallow-equal/objects'
 const shallowEquals: typeof shallowEquals_ =
-  (shallowEquals_ as any).default || shallowEquals_;
+  (shallowEquals_ as any).default || shallowEquals_
 
 function defaultFormatMessage<T = React.ReactNode>(
   descriptor: MessageDescriptor,
@@ -28,7 +28,7 @@ function defaultFormatMessage<T = React.ReactNode>(
   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(
@@ -39,15 +39,15 @@ function defaultFormatMessage<T = React.ReactNode>(
     createFormatters(),
     descriptor,
     values as any
-  );
+  )
 }
 
 export interface Props<
   V extends Record<string, any> = Record<string, React.ReactNode>
 > extends MessageDescriptor {
-  values?: V;
-  tagName?: React.ElementType<any>;
-  children?(...nodes: React.ReactNodeArray): React.ReactNode;
+  values?: V
+  tagName?: React.ElementType<any>
+  children?(...nodes: React.ReactNodeArray): React.ReactNode
 }
 
 class FormattedMessage<
@@ -58,18 +58,18 @@ class FormattedMessage<
     | FormatXMLElementFn<React.ReactNode, React.ReactNode>
   >
 > extends React.Component<Props<V>> {
-  static displayName = 'FormattedMessage';
+  static displayName = 'FormattedMessage'
   static defaultProps = {
     values: {},
-  };
+  }
 
   shouldComponentUpdate(nextProps: Props<V>): boolean {
-    const {values, ...otherProps} = this.props;
-    const {values: nextValues, ...nextOtherProps} = nextProps;
+    const {values, ...otherProps} = this.props
+    const {values: nextValues, ...nextOtherProps} = nextProps
     return (
       !shallowEquals(nextValues, values) ||
       !shallowEquals(otherProps, nextOtherProps)
-    );
+    )
   }
 
   render(): JSX.Element {
@@ -77,13 +77,13 @@ class FormattedMessage<
       <Context.Consumer>
         {(intl): React.ReactNode => {
           if (!this.props.defaultMessage) {
-            invariantIntlContext(intl);
+            invariantIntlContext(intl)
           }
 
           const {
             formatMessage = defaultFormatMessage,
             textComponent: Text = React.Fragment,
-          } = intl || {};
+          } = intl || {}
           const {
             id,
             description,
@@ -91,32 +91,32 @@ class FormattedMessage<
             values,
             children,
             tagName: Component = Text,
-          } = this.props;
+          } = this.props
 
-          const descriptor = {id, description, defaultMessage};
+          const descriptor = {id, description, defaultMessage}
           let nodes: string | React.ReactNodeArray = formatMessage(
             descriptor,
             values
-          );
+          )
 
           if (!Array.isArray(nodes)) {
-            nodes = [nodes];
+            nodes = [nodes]
           }
 
           if (typeof children === 'function') {
-            return children(...nodes);
+            return children(...nodes)
           }
 
           if (Component) {
             // Needs to use `createElement()` instead of JSX, otherwise React will
             // warn about a missing `key` prop with rich-text message formatting.
-            return React.createElement(Component, null, ...nodes);
+            return React.createElement(Component, null, ...nodes)
           }
-          return nodes;
+          return nodes
         }}
       </Context.Consumer>
-    );
+    )
   }
 }
 
-export default FormattedMessage;
+export default FormattedMessage

package/src/components/plural.tsx

@@ -4,20 +4,20 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import * as React from 'react';
-import withIntl from './injectIntl';
-import {IntlShape, FormatPluralOptions} from '../types';
+import * as React from 'react'
+import withIntl from './injectIntl'
+import {IntlShape, FormatPluralOptions} from '../types'
 
 interface Props extends FormatPluralOptions {
-  value: number;
-  intl: IntlShape;
-  other: React.ReactNode;
-  zero?: React.ReactNode;
-  one?: React.ReactNode;
-  two?: React.ReactNode;
-  few?: React.ReactNode;
-  many?: React.ReactNode;
-  children?(value: React.ReactNode): React.ReactElement | null;
+  value: number
+  intl: IntlShape
+  other: React.ReactNode
+  zero?: React.ReactNode
+  one?: React.ReactNode
+  two?: React.ReactNode
+  few?: React.ReactNode
+  many?: React.ReactNode
+  children?(value: React.ReactNode): React.ReactElement | null
 }
 
 const FormattedPlural: React.FC<Props> = props => {
@@ -26,25 +26,25 @@ const FormattedPlural: React.FC<Props> = props => {
     other,
     children,
     intl: {formatPlural, textComponent: Text},
-  } = props;
+  } = props
 
-  const pluralCategory = formatPlural(value, props);
-  const formattedPlural = props[pluralCategory as 'one'] || other;
+  const pluralCategory = formatPlural(value, props)
+  const formattedPlural = props[pluralCategory as 'one'] || other
 
   if (typeof children === 'function') {
-    return children(formattedPlural);
+    return children(formattedPlural)
   }
   if (Text) {
-    return <Text>{formattedPlural}</Text>;
+    return <Text>{formattedPlural}</Text>
   }
   // Work around @types/react where React.FC cannot return string
-  return formattedPlural as any;
-};
+  return formattedPlural as any
+}
 
 FormattedPlural.defaultProps = {
   type: 'cardinal',
-};
+}
 
-FormattedPlural.displayName = 'FormattedPlural';
+FormattedPlural.displayName = 'FormattedPlural'
 
-export default withIntl(FormattedPlural);
+export default withIntl(FormattedPlural)