chore(i18n): Upgrade react-intl to 3.x (#396)

box · Feb 20, 2020 · da36b29 · da36b29
1 parent ea259ae
commit da36b29
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 314 deletions.
diff --git a/flow-typed/npm/react-intl_v2.x.x.js b/flow-typed/npm/react-intl_v2.x.x.js
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
         "yarn": ">=1.19.x"
     },
     "dependencies": {
+        "@formatjs/intl-pluralrules": "^1.5.2",
+        "@formatjs/intl-relativetimeformat": "^4.5.9",
         "axios": "^0.19.1",
         "bluebird": "^3.7.2",
         "box-ui-elements": "11.1.0-beta.35",
@@ -43,7 +45,7 @@
         "rbush": "^3.0.1",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
-        "react-intl": "^2.9.0",
+        "react-intl": "^3.12.0",
         "react-tether": "1.0.5",
         "react-textarea-autosize": "^7.1.2",
         "scroll-into-view-if-needed": "^2.2.22",

diff --git a/scripts/jest/react-intl-mock.js b/scripts/jest/react-intl-mock.js
@@ -15,16 +15,10 @@ FormattedTime.displayName = 'FormattedTime';
 export const FormattedMessage = () => <div />;
 FormattedMessage.displayName = 'FormattedMessage';
 
-export const IntlProvider = () => {
-    return {
-        render() {
-            return <div />;
-        },
-        getChildContext: () => ({ intl: intlMock }),
-    };
-};
+export const RawIntlProvider = () => <div />;
 
-IntlProvider.displayName = 'IntlProvider';
+RawIntlProvider.displayName = 'RawIntlProvider';
+export const createIntl = () => intlMock;
 
 export const defineMessages = messages => messages;
 

diff --git a/scripts/webpack.common.config.js b/scripts/webpack.common.config.js
@@ -23,7 +23,7 @@ module.exports = () => {
                 {
                     test: /\.js$/,
                     loader: 'babel-loader',
-                    exclude: [path.resolve('node_modules')],
+                    exclude: /node_modules\/(?!(react-intl|intl-messageformat|intl-messageformat-parser)\/).*/,
                 },
                 {
                     test: /\.s?css$/,

diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js
@@ -37,7 +37,12 @@ const config = Object.assign(commonConfig(), {
         alias: {
             'box-annotations-locale-data': path.resolve(`i18n/${language}`),
             'box-elements-messages': path.resolve(`node_modules/box-ui-elements/i18n/${language}`),
-            'react-intl-locale-data': path.resolve(`node_modules/react-intl/locale-data/${locale}`),
+            'react-intl-relativetimeformat-locale-data': path.resolve(
+                `node_modules/@formatjs/intl-relativetimeformat/dist/locale-data/${locale}`,
+            ),
+            'react-intl-pluralrules-locale-data': path.resolve(
+                `node_modules/@formatjs/intl-pluralrules/dist/locale-data/${locale}`,
+            ),
             moment: path.resolve('src/utils/MomentShim'), // Hack to leverage Intl instead
         },
         modules: ['src', 'node_modules'],

diff --git a/src/components/Internationalize.js b/src/components/Internationalize.js
@@ -5,20 +5,15 @@
  */
 
 import React from 'react';
-import { IntlProvider } from 'react-intl';
-import i18n from '../utils/i18n';
+import { RawIntlProvider } from 'react-intl';
 
 type Props = {
     children?: any,
     intl: Object,
 };
 
 const Internationalize = ({ children, intl }: Props) => {
-    return (
-        <IntlProvider {...intl} locale={i18n.getLocale()}>
-            {children}
-        </IntlProvider>
-    );
+    return <RawIntlProvider value={intl}>{children}</RawIntlProvider>;
 };
 
 export default Internationalize;
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
@@ -6,21 +6,36 @@
 
 import annotationsLocaleData from 'box-annotations-locale-data'; // eslint-disable-line
 import boxElementsMessages from 'box-elements-messages';
-import { IntlProvider } from 'react-intl';
+import { createIntl } from 'react-intl';
 
 declare var __LANGUAGE__: string;
 
 const language = __LANGUAGE__;
-const annotationsMessages = { ...annotationsLocaleData, ...boxElementsMessages };
-const getLocale = (lang: string = __LANGUAGE__) => {
+const getLocale = (lang: string = language) => {
     return lang.substr(0, lang.indexOf('-'));
 };
 
+if (!window.Intl.PluralRules) {
+    require('@formatjs/intl-pluralrules/polyfill'); // eslint-disable-line
+
+    // $FlowFixMe
+    require(`react-intl-pluralrules-locale-data`); // eslint-disable-line
+}
+
+if (!window.Intl.RelativeTimeFormat) {
+    require('@formatjs/intl-relativetimeformat/polyfill'); // eslint-disable-line
+
+    // $FlowFixMe
+    require('react-intl-relativetimeformat-locale-data'); // eslint-disable-line
+}
+
+const annotationsMessages = { ...annotationsLocaleData, ...boxElementsMessages };
+
 const createIntlProvider = ({ locale = getLocale(), messages = annotationsMessages }: IntlOptions) => {
-    return new IntlProvider({
+    return createIntl({
         messages,
         locale,
-    }).getChildContext().intl;
+    });
 };
 
 export default { createIntlProvider, getLocale, language };