chore: rm some custom utils impl (#1315)

* chore: rm some custom utils impl - Use shallow-equal instead of custom impl - Use PureComponent instead of custom impl - rm unused packages - convert stateless components to stateless functional components - no need to enforce intl bc withIntl already does that - fix tests - config prettier to set lf
formatjs · Jun 12, 2019 · 22e4989 · 22e4989
1 parent 3fdc08d
commit 22e4989
Show file tree

Hide file tree

Showing 20 changed files with 190 additions and 376 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,7 @@ node_modules/
 src/en.js
 
 # IntelliJ
-.idea/
+.idea/
+
+# VS Code
+.vscode
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "es5",
-  "bracketSpacing": false
+  "bracketSpacing": false,
+  "endOfLine": "lf"
 }
diff --git a/package.json b/package.json
@@ -65,12 +65,12 @@
   "dependencies": {
     "hoist-non-react-statics": "^3.3.0",
     "intl-format-cache": "^3.0.0",
+    "intl-locales-supported": "^1.0.10",
     "intl-messageformat": "^4.0.0",
     "intl-relativeformat": "^6.1.0",
-    "intl-locales-supported": "^1.0.10",
     "invariant": "^2.1.1",
-    "react-display-name": "^0.2.4",
-    "react-is": "^16.3.1"
+    "react-is": "^16.3.1",
+    "shallow-equal": "^1.1.0"
   },
   "peerDependencies": {
     "prop-types": "^15.5.4",
@@ -86,6 +86,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@formatjs/intl-relativetimeformat": "^1.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^23.6.0",
@@ -104,13 +105,11 @@
     "eslint-plugin-react": "^7.0.1",
     "expect": "^1.9.0",
     "express": "^4.13.3",
-    "formatjs-extract-cldr-data": "^6.0.0",
     "full-icu": "^1.3.0",
     "glob": "^7.0.0",
     "intl": "^1.2.1",
     "intl-messageformat-parser": "^1.2.0",
     "intl-pluralrules": "^1.0.1",
-    "@formatjs/intl-relativetimeformat": "^1.0.0",
     "jest": "^23.6.0",
     "mkdirp": "^0.5.1",
     "prettier": "^1.6.1",

diff --git a/src/components/date.js b/src/components/date.js
@@ -4,44 +4,35 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withIntl from './withIntl';
 import {intlShape, dateTimeFormatPropTypes} from '../types';
-import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
-
-class FormattedDate extends Component {
-  static displayName = 'FormattedDate';
-
-  static propTypes = {
-    ...dateTimeFormatPropTypes,
-    intl: intlShape,
-    value: PropTypes.any.isRequired,
-    format: PropTypes.string,
-    children: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-    invariantIntlContext(props);
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldIntlComponentUpdate(this, nextProps, nextState);
-  }
-
-  render() {
-    const {formatDate, textComponent: Text} = this.props.intl;
-    const {value, children} = this.props;
 
-    let formattedDate = formatDate(value, this.props);
+function FormattedDate(props) {
+  const {
+    value,
+    children,
+    intl: {formatDate, textComponent: Text},
+  } = props;
 
-    if (typeof children === 'function') {
-      return children(formattedDate);
-    }
+  let formattedDate = formatDate(value, props);
 
-    return <Text>{formattedDate}</Text>;
+  if (typeof children === 'function') {
+    return children(formattedDate);
   }
+
+  return <Text>{formattedDate}</Text>;
 }
 
+FormattedDate.propTypes = {
+  ...dateTimeFormatPropTypes,
+  intl: intlShape,
+  value: PropTypes.any.isRequired,
+  format: PropTypes.string,
+  children: PropTypes.func,
+};
+
+FormattedDate.displayName = 'FormattedDate';
+
 export default withIntl(FormattedDate);
diff --git a/src/components/html-message.js b/src/components/html-message.js
@@ -9,8 +9,6 @@ import withIntl from './withIntl';
 import {BaseFormattedMessage} from './message';
 
 class FormattedHTMLMessage extends BaseFormattedMessage {
-  static displayName = 'FormattedHTMLMessage';
-
   render() {
     const {formatHTMLMessage, textComponent: Text} = this.props.intl;
 

diff --git a/src/components/message.js b/src/components/message.js
@@ -10,12 +10,9 @@ import withIntl from './withIntl';
 import IntlMessageFormat from 'intl-messageformat';
 import memoizeIntlConstructor from 'intl-format-cache';
 import {intlShape, messageDescriptorPropTypes} from '../types';
-import {
-  invariantIntlContext,
-  shallowEquals,
-  shouldIntlComponentUpdate,
-} from '../utils';
+import shallowEquals from 'shallow-equal/objects';
 import {formatMessage as baseFormatMessage} from '../format';
+import {invariantIntlContext} from '../utils';
 
 const defaultFormatMessage = (descriptor, values) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -33,8 +30,6 @@ const defaultFormatMessage = (descriptor, values) => {
 };
 
 class FormattedMessage extends Component {
-  static displayName = 'FormattedMessage';
-
   static propTypes = {
     ...messageDescriptorPropTypes,
     intl: intlShape,
@@ -70,7 +65,10 @@ class FormattedMessage extends Component {
       values,
     };
 
-    return shouldIntlComponentUpdate(this, nextPropsToCheck, nextState);
+    return (
+      !shallowEquals(this.props, nextPropsToCheck) ||
+      !shallowEquals(this.state, nextState)
+    );
   }
 
   render() {
@@ -157,4 +155,4 @@ class FormattedMessage extends Component {
 
 export const BaseFormattedMessage = FormattedMessage;
 
-export default withIntl(FormattedMessage);
+export default withIntl(FormattedMessage, {enforceContext: false});
diff --git a/src/components/number.js b/src/components/number.js
@@ -4,44 +4,35 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withIntl from './withIntl';
 import {intlShape, numberFormatPropTypes} from '../types';
-import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
-
-class FormattedNumber extends Component {
-  static displayName = 'FormattedNumber';
-
-  static propTypes = {
-    ...numberFormatPropTypes,
-    intl: intlShape,
-    value: PropTypes.any.isRequired,
-    format: PropTypes.string,
-    children: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-    invariantIntlContext(props);
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldIntlComponentUpdate(this, nextProps, nextState);
-  }
-
-  render() {
-    const {formatNumber, textComponent: Text} = this.props.intl;
-    const {value, children} = this.props;
 
-    let formattedNumber = formatNumber(value, this.props);
+function FormattedNumber(props) {
+  const {
+    value,
+    children,
+    intl: {formatNumber, textComponent: Text},
+  } = props;
 
-    if (typeof children === 'function') {
-      return children(formattedNumber);
-    }
+  let formattedNumber = formatNumber(value, props);
 
-    return <Text>{formattedNumber}</Text>;
+  if (typeof children === 'function') {
+    return children(formattedNumber);
   }
+
+  return <Text>{formattedNumber}</Text>;
 }
 
+FormattedNumber.propTypes = {
+  ...numberFormatPropTypes,
+  intl: intlShape,
+  value: PropTypes.any.isRequired,
+  format: PropTypes.string,
+  children: PropTypes.func,
+};
+
+FormattedNumber.displayName = 'FormattedNumber';
+
 export default withIntl(FormattedNumber);
diff --git a/src/components/plural.js b/src/components/plural.js
@@ -4,56 +4,48 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withIntl from './withIntl';
 import {intlShape, pluralFormatPropTypes} from '../types';
-import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
-class FormattedPlural extends Component {
-  static displayName = 'FormattedPlural';
+function FormattedPlural(props) {
+  const {
+    value,
+    other,
+    children,
+    intl: {formatPlural, textComponent: Text},
+  } = props;
 
-  static propTypes = {
-    ...pluralFormatPropTypes,
-    intl: intlShape,
-    value: PropTypes.any.isRequired,
+  let pluralCategory = formatPlural(value, props);
+  let formattedPlural = props[pluralCategory] || other;
 
-    other: PropTypes.node.isRequired,
-    zero: PropTypes.node,
-    one: PropTypes.node,
-    two: PropTypes.node,
-    few: PropTypes.node,
-    many: PropTypes.node,
-
-    children: PropTypes.func,
-  };
-
-  static defaultProps = {
-    type: 'cardinal',
-  };
-
-  constructor(props) {
-    super(props);
-    invariantIntlContext(props);
+  if (typeof children === 'function') {
+    return children(formattedPlural);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldIntlComponentUpdate(this, nextProps, nextState);
-  }
+  return <Text>{formattedPlural}</Text>;
+}
 
-  render() {
-    const {formatPlural, textComponent: Text} = this.props.intl;
-    const {value, other, children} = this.props;
+FormattedPlural.propTypes = {
+  ...pluralFormatPropTypes,
+  intl: intlShape,
+  value: PropTypes.any.isRequired,
 
-    let pluralCategory = formatPlural(value, this.props);
-    let formattedPlural = this.props[pluralCategory] || other;
+  other: PropTypes.node.isRequired,
+  zero: PropTypes.node,
+  one: PropTypes.node,
+  two: PropTypes.node,
+  few: PropTypes.node,
+  many: PropTypes.node,
 
-    if (typeof children === 'function') {
-      return children(formattedPlural);
-    }
+  children: PropTypes.func,
+};
 
-    return <Text>{formattedPlural}</Text>;
-  }
-}
+FormattedPlural.defaultProps = {
+  type: 'cardinal',
+};
+
+FormattedPlural.displayName = 'FormattedPlural';
 
 export default withIntl(FormattedPlural);
diff --git a/src/components/provider.js b/src/components/provider.js
@@ -4,23 +4,18 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, Children} from 'react';
+import React, {PureComponent, Children} from 'react';
 import PropTypes from 'prop-types';
 import withIntl, {Provider} from './withIntl';
 import IntlMessageFormat from 'intl-messageformat';
 import IntlRelativeFormat from 'intl-relativeformat';
 import memoizeIntlConstructor from 'intl-format-cache';
 import invariant from 'invariant';
-import {
-  createError,
-  defaultErrorHandler,
-  shouldIntlComponentUpdate,
-  filterProps,
-  shallowEquals,
-} from '../utils';
+import {createError, defaultErrorHandler, filterProps} from '../utils';
 import {intlConfigPropTypes, intlFormatPropTypes} from '../types';
 import * as format from '../format';
 import areIntlLocalesSupported from 'intl-locales-supported';
+import shallowEquals from 'shallow-equal/objects';
 
 const intlConfigPropNames = Object.keys(intlConfigPropTypes);
 const intlFormatPropNames = Object.keys(intlFormatPropTypes);
@@ -86,9 +81,7 @@ function getBoundFormatFns(config, state) {
   }, {});
 }
 
-class IntlProvider extends Component {
-  static displayName = 'IntlProvider';
-
+class IntlProvider extends PureComponent {
   static propTypes = {
     ...intlConfigPropTypes,
     children: PropTypes.element.isRequired,
@@ -177,10 +170,6 @@ class IntlProvider extends Component {
     return this.state.context;
   }
 
-  shouldComponentUpdate(...next) {
-    return shouldIntlComponentUpdate(this, ...next);
-  }
-
   componentDidMount() {
     this._didDisplay = true;
   }