feat: upgrade formatjs dev (#1357)

package.json

@@ -36,27 +36,28 @@
     "react": "global:React"
   },
   "dependencies": {
-    "@formatjs/intl-relativetimeformat": "^2.3.1",
+    "@formatjs/intl-relativetimeformat": "^2.3.3",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/invariant": "^2.2.30",
-    "@types/react": "^16.8.20",
+    "@types/react": "^16.8.23",
     "hoist-non-react-statics": "^3.3.0",
-    "intl-format-cache": "^3.3.1",
-    "intl-locales-supported": "^1.3.1",
-    "intl-messageformat": "^4.3.0",
+    "intl-format-cache": "^4.0.0",
+    "intl-locales-supported": "^1.3.3",
+    "intl-messageformat-parser": "^2.0.0",
+    "intl-messageformat": "^5.0.0",
     "invariant": "^2.1.1",
     "react": "^16.3.0",
     "shallow-equal": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/node": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-transform-async-to-generator": "^7.1.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/cli": "^7.5.0",
+    "@babel/core": "^7.5.0",
+    "@babel/node": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.2",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
+    "@babel/preset-env": "^7.5.2",
     "@babel/preset-react": "^7.0.0",
     "@types/benchmark": "^1.0.31",
     "@types/enzyme": "^3.10.1",
@@ -66,13 +67,13 @@
     "@typescript-eslint/eslint-plugin": "^1.10.2",
     "@typescript-eslint/parser": "^1.10.2",
     "babel-jest": "^24.8.0",
-    "babel-plugin-react-intl": "^3.5.0",
+    "babel-plugin-react-intl": "^4.0.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",
     "babelify": "^10.0.0",
     "benchmark": "^2.1.0",
-    "browserify": "^16.2.3",
+    "browserify": "^16.3.0",
     "browserify-shim": "^3.8.11",
     "cross-env": "^5.2.0",
     "enzyme": "^3.6.0",
@@ -84,7 +85,6 @@
     "full-icu": "^1.3.0",
     "glob": "^7.0.0",
     "intl": "^1.2.1",
-    "intl-messageformat-parser": "^1.8.0",
     "intl-pluralrules": "^1.0.3",
     "jest": "^24.8.0",
     "markdown-toc": "^1.2.0",
@@ -96,7 +96,7 @@
     "prop-types": "^15.7.2",
     "react-dom": "^16.8.6",
     "rimraf": "^2.4.2",
-    "rollup": "^1.16.4",
+    "rollup": "^1.16.6",
     "rollup-plugin-commonjs": "^10.0.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.0.0",

src/format.ts

@@ -27,7 +27,7 @@ import {
   IntlRelativeTimeFormatOptions,
   FormattableUnit,
 } from '@formatjs/intl-relativetimeformat';
-import {MessageTextElement} from 'intl-messageformat-parser';
+import {LiteralElement, TYPE} from 'intl-messageformat-parser';
 
 const DATE_TIME_FORMAT_OPTIONS: Array<keyof Intl.DateTimeFormatOptions> = [
   'localeMatcher',
@@ -282,11 +282,10 @@ export function formatMessage(
       return escapeUnformattedMessage(val);
     }
     invariant(
-      val.elements.length === 1 &&
-        val.elements[0].type === 'messageTextElement',
+      val.length === 1 && val[0].type === TYPE.literal,
       'Message has placeholders but no values was provided'
     );
-    return (val.elements[0] as MessageTextElement).value;
+    return (val[0] as LiteralElement).value;
   }
 
   let formattedMessage;

src/types.ts

@@ -3,20 +3,19 @@
  * Copyrights licensed under the New BSD License.
  * See the accompanying LICENSE file for terms.
  */
-import {Formats} from 'intl-messageformat/lib/compiler';
-import IntlMessageFormat from 'intl-messageformat';
+import IntlMessageFormat, {Formats} from 'intl-messageformat';
 import IntlRelativeTimeFormat, {
   IntlRelativeTimeFormatOptions,
   FormattableUnit,
 } from '@formatjs/intl-relativetimeformat';
-import {MessageFormatPattern} from 'intl-messageformat-parser';
+import {MessageFormatElement} from 'intl-messageformat-parser';
 
 export interface IntlConfig {
   locale: string;
   timeZone?: string;
   formats: CustomFormats;
   textComponent: React.ComponentType | keyof React.ReactHTML;
-  messages: Record<string, string> | Record<string, MessageFormatPattern>;
+  messages: Record<string, string> | Record<string, MessageFormatElement[]>;
   defaultLocale: string;
   defaultFormats: CustomFormats;
   onError(err: string): void;

test/perf/index.tsx

@@ -8,7 +8,7 @@ import {
   FormattedMessage,
   // FormattedRelativeTime,
 } from '../../dist';
-import parser, {MessageFormatPattern} from 'intl-messageformat-parser';
+import {parse, MessageFormatElement} from 'intl-messageformat-parser';
 
 const suite = new Suite('renderToString', {
   onCycle: function(e: any) {
@@ -97,10 +97,10 @@ suite.add('100 x <FormattedMessage> with placeholder', function() {
   );
 });
 
-let messageAsts: Record<number, MessageFormatPattern> = {};
+let messageAsts: Record<number, MessageFormatElement[]> = {};
 for (let i = 0, len = 100; i < len; i += 1) {
   const varName = `var${i}`;
-  messageAsts[i] = parser.parse(
+  messageAsts[i] = parse(
     `{${varName}, plural, 
       zero {{${varName}, number} message} 
       one {{${varName}, number} message} 
@@ -151,7 +151,7 @@ suite.add('100 x <FormattedMessage> with placeholder, cached', function() {
   );
 });
 
-const cachedAst = parser.parse(
+const cachedAst = parse(
   `{var0, plural, 
     zero {{var0, number} message} 
     one {{var0, number} message} 
@@ -163,7 +163,7 @@ const cachedAst = parser.parse(
 suite.add(
   '100 x <FormattedMessage> with placeholder, cached in AST form',
   function() {
-    let messages: Record<number, MessageFormatPattern> = {};
+    let messages: Record<number, MessageFormatElement[]> = {};
     let formattedMessages = [];
     for (let i = 0, len = 100; i < len; i += 1) {
       messages[i] = cachedAst;

test/unit/components/html-message.tsx

@@ -122,7 +122,7 @@ describe('<FormattedHTMLMessage>', () => {
     ).find('span');
 
     expect((rendered.prop('dangerouslySetInnerHTML') as any).__html).toBe(
-      'Hello, <b>[object Object]</b>!'
+      'Hello, <b></b>!'
     );
   });
 });

test/unit/format.ts

@@ -1,6 +1,6 @@
 import IntlMessageFormat from 'intl-messageformat';
 import * as f from '../../src/format';
-import parser from 'intl-messageformat-parser';
+import {parse} from 'intl-messageformat-parser';
 describe('format API', () => {
   const {NODE_ENV} = process.env;
 
@@ -25,8 +25,8 @@ describe('format API', () => {
         invalid: 'invalid {}',
         missing_value: 'missing {arg_missing}',
         missing_named_format: 'missing {now, date, format_missing}',
-        ast_simple: parser.parse('hello world'),
-        ast_var: parser.parse('hello there, {name}'),
+        ast_simple: parse('hello world'),
+        ast_var: parse('hello there, {name}'),
       },
 
       formats: {