feat: pass in formatters to IntlMessageFormat for perf (#1343)

* feat: pass in formatters to IntlMessageFormat for perf

* fix up benchmark

Author: longlho

package-lock.json

@@ -63,12 +63,12 @@
   },
   "dependencies": {
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/invariant": "^2.2.29",
+    "@types/invariant": "^2.2.30",
     "@types/react": "^16.8.20",
     "hoist-non-react-statics": "^3.3.0",
-    "intl-format-cache": "^3.2.0",
-    "intl-locales-supported": "^1.2.0",
-    "intl-messageformat": "^4.0.0",
+    "intl-format-cache": "^3.3.0",
+    "intl-locales-supported": "^1.3.0",
+    "intl-messageformat": "^4.3.0",
     "invariant": "^2.1.1",
     "react": "^16.3.0",
     "shallow-equal": "^1.1.0"
@@ -83,14 +83,16 @@
     "@babel/plugin-transform-modules-commonjs": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "@formatjs/intl-relativetimeformat": "^2.1.0",
-    "@types/enzyme": "^3.9.4",
+    "@formatjs/intl-relativetimeformat": "^2.3.0",
+    "@types/benchmark": "^1.0.31",
+    "@types/enzyme": "^3.10.1",
     "@types/jest": "^24.0.13",
     "@types/prop-types": "^15.7.1",
+    "@types/react-dom": "^16.8.4",
     "@typescript-eslint/eslint-plugin": "^1.10.2",
     "@typescript-eslint/parser": "^1.10.2",
     "babel-jest": "^24.8.0",
-    "babel-plugin-react-intl": "^3.2.1",
+    "babel-plugin-react-intl": "^3.5.0",
     "babel-plugin-transform-member-expression-literals": "^6.9.4",
     "babel-plugin-transform-property-literals": "^6.9.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
@@ -108,7 +110,7 @@
     "full-icu": "^1.3.0",
     "glob": "^7.0.0",
     "intl": "^1.2.1",
-    "intl-messageformat-parser": "^1.7.0",
+    "intl-messageformat-parser": "^1.8.0",
     "intl-pluralrules": "^1.0.3",
     "jest": "^24.8.0",
     "markdown-toc": "^1.2.0",
@@ -120,7 +122,7 @@
     "prop-types": "^15.7.2",
     "react-dom": "^16.8.6",
     "rimraf": "^2.4.2",
-    "rollup": "^1.16.3",
+    "rollup": "^1.16.4",
     "rollup-plugin-commonjs": "^10.0.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.0.0",
@@ -129,11 +131,13 @@
     "serialize-javascript": "^1.5.0",
     "superagent": "^5.0.8",
     "ts-jest": "^24.0.2",
+    "ts-node": "^8.3.0",
     "tslib": "^1.9.3",
     "typescript": "^3.5.1",
     "watchify": "^3.7.0"
   },
   "scripts": {
+    "benchmark": "TS_NODE_PROJECT='test/perf/tsconfig.json' ts-node test/perf/index.tsx",
     "build:dist:dev": "cross-env NODE_ENV=development rollup -c rollup.config.dist.js",
     "build:dist:prod": "cross-env NODE_ENV=production rollup -c rollup.config.dist.js",
     "build:dist": "npm run build:dist:dev && npm run build:dist:prod",

package.json

@@ -6,13 +6,15 @@
 
 import * as React from 'react';
 import withIntl from './injectIntl';
-import IntlMessageFormat from 'intl-messageformat';
-import memoizeIntlConstructor from 'intl-format-cache';
 import {MessageDescriptor, IntlShape} from '../types';
 import * as shallowEquals_ from 'shallow-equal/objects';
 const shallowEquals = shallowEquals_;
 import {formatMessage as baseFormatMessage} from '../format';
-import {invariantIntlContext, DEFAULT_INTL_CONFIG} from '../utils';
+import {
+  invariantIntlContext,
+  DEFAULT_INTL_CONFIG,
+  createDefaultFormatters,
+} from '../utils';
 
 const defaultFormatMessage: IntlShape['formatMessage'] = (
   descriptor,
@@ -29,7 +31,7 @@ const defaultFormatMessage: IntlShape['formatMessage'] = (
       ...DEFAULT_INTL_CONFIG,
       locale: 'en',
     },
-    {getMessageFormat: memoizeIntlConstructor(IntlMessageFormat)},
+    createDefaultFormatters(),
     descriptor,
     values
   );

src/components/message.tsx

@@ -17,7 +17,7 @@ import {
   createError,
   filterProps,
   DEFAULT_INTL_CONFIG,
-  DEFAULT_FORMATTERS,
+  createDefaultFormatters,
 } from '../utils';
 import {IntlConfig, IntlShape, IntlFormatters} from '../types';
 import {formatters} from '../format';
@@ -141,7 +141,7 @@ class IntlProvider extends React.PureComponent<ResolvedProps, State> {
     // `<IntlProvider>`, then its formatters will be used. Otherwise, this
     // memoize the `Intl*` constructors and cache them for the lifecycle of
     // this IntlProvider instance.
-    const {formatters = DEFAULT_FORMATTERS} = intlContext || {};
+    const {formatters = createDefaultFormatters()} = intlContext || {};
 
     this.state = {
       context: {
@@ -181,9 +181,7 @@ class IntlProvider extends React.PureComponent<ResolvedProps, State> {
 
   render() {
     return (
-      <Provider value={this.state.context}>
-        {React.Children.only(this.props.children)}
-      </Provider>
+      <Provider value={this.state.context}>{this.props.children}</Provider>
     );
   }
 }

src/components/provider.tsx

@@ -249,7 +249,7 @@ export function formatMessage(
     | 'defaultFormats'
     | 'onError'
   >,
-  state: {getMessageFormat: Formatters['getMessageFormat']},
+  state: Formatters,
   messageDescriptor: MessageDescriptor = {id: ''},
   values: Record<string, any> = {}
 ): string {
@@ -280,7 +280,9 @@ export function formatMessage(
 
   if (message) {
     try {
-      let formatter = state.getMessageFormat(message, locale, formats);
+      let formatter = state.getMessageFormat(message, locale, formats, {
+        formatters: state,
+      });
 
       formattedMessage = formatter.format(values);
     } catch (e) {

src/format.ts

@@ -77,7 +77,7 @@ export interface Formatters {
   ): Intl.NumberFormat;
   getMessageFormat(
     ...args: ConstructorParameters<typeof IntlMessageFormat>
-  ): typeof IntlMessageFormat;
+  ): IntlMessageFormat;
   getRelativeTimeFormat(
     ...args: ConstructorParameters<typeof IntlRelativeTimeFormat>
   ): IntlRelativeTimeFormat;

src/types.ts

@@ -105,10 +105,12 @@ export const DEFAULT_INTL_CONFIG: Pick<
   onError: defaultErrorHandler,
 };
 
-export const DEFAULT_FORMATTERS = {
-  getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat),
-  getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat),
-  getMessageFormat: memoizeIntlConstructor(IntlMessageFormat),
-  getRelativeTimeFormat: memoizeIntlConstructor(Intl.RelativeTimeFormat),
-  getPluralRules: memoizeIntlConstructor(Intl.PluralRules),
-};
+export function createDefaultFormatters() {
+  return {
+    getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat),
+    getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat),
+    getMessageFormat: memoizeIntlConstructor(IntlMessageFormat),
+    getRelativeTimeFormat: memoizeIntlConstructor(Intl.RelativeTimeFormat),
+    getPluralRules: memoizeIntlConstructor(Intl.PluralRules),
+  };
+}