Merge pull request #839 from sharetribe/change-lodash-import

import lodash per file to reduce bundle size

CHANGELOG.md

@@ -12,6 +12,11 @@ way to update this template, but currently, we follow a pattern:
 
 ----
 
+## Upcoming version
+
+* Change lodash import syntax to reduce bundle size (-15.14 KB)
+  [839](https://github.com/sharetribe/flex-template-web/pull/839)
+
 ## v0.3.0
 
 * Remove custom touched handling from `FieldCheckboxGroup` as it has has become obsolete now that

src/app.js

@@ -9,7 +9,7 @@ import 'react-dates/initialize';
 import Helmet from 'react-helmet';
 import { BrowserRouter, StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { mapValues } from 'lodash';
+import mapValues from 'lodash/mapValues';
 import moment from 'moment';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import configureStore from './store';

src/app.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 import Helmet from 'react-helmet';
-import { forEach } from 'lodash';
+import forEach from 'lodash/forEach';
 import { ClientApp, ServerApp } from './app';
 import configureStore from './store';
 

src/components/ActivityFeed/ActivityFeed.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { string, arrayOf, bool, func, number } from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { dropWhile } from 'lodash';
+import dropWhile from 'lodash/dropWhile';
 import classNames from 'classnames';
 import { Avatar, InlineTextButton, ReviewRating } from '../../components';
 import { formatDate } from '../../util/dates';

src/components/AddImages/AddImages.example.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React, { Component } from 'react';
-import { findIndex, uniqueId } from 'lodash';
+import findIndex from 'lodash/findIndex';
+import uniqueId from 'lodash/uniqueId';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import AddImages from './AddImages';
 import css from './AddImages.example.css';

src/components/FieldBirthdayInput/FieldBirthdayInput.js

@@ -7,7 +7,7 @@ import { func, instanceOf, object, node, string, bool } from 'prop-types';
 import { Field } from 'react-final-form';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import { range } from 'lodash';
+import range from 'lodash/range';
 import { ValidationError } from '../../components';
 
 import css from './FieldBirthdayInput.css';

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Field } from 'react-final-form';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import { getPlacePredictions, getPlaceDetails } from '../../util/googleMaps';

src/components/PaginationLinks/PaginationLinks.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import { range } from 'lodash';
+import range from 'lodash/range';
 import { NamedLink } from '../../components';
 import { stringify } from '../../util/urlHelpers';
 import { propTypes } from '../../util/types';

src/components/PropertyGroup/PropertyGroup.js

@@ -9,7 +9,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { includes } from 'lodash';
+import includes from 'lodash/includes';
 
 import css from './PropertyGroup.css';
 

src/components/SearchFilters/SearchFilters.js

@@ -4,7 +4,7 @@ import { object, string, bool, number, func, shape } from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import { SelectSingleFilter, SelectMultipleFilter } from '../../components';
 import routeConfiguration from '../../routeConfiguration';

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -3,7 +3,7 @@ import { object, string, bool, number, func, shape, array } from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { withRouter } from 'react-router-dom';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import routeConfiguration from '../../routeConfiguration';
 import { createResourceLocatorString } from '../../util/routes';

src/components/SearchFiltersPanel/SearchFiltersPanel.js

@@ -31,7 +31,7 @@ import { array, func, object, shape, string } from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { withRouter } from 'react-router-dom';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import routeConfiguration from '../../routeConfiguration';
 import { createResourceLocatorString } from '../../util/routes';

src/components/SearchMap/SearchMap.js

@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import { arrayOf, bool, func, number, string, shape } from 'prop-types';
 import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import classNames from 'classnames';
-import { groupBy, isEqual, reduce } from 'lodash';
+import groupBy from 'lodash/groupBy';
+import isEqual from 'lodash/isEqual';
+import reduce from 'lodash/reduce';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { propTypes } from '../../util/types';
 import { obfuscatedCoordinates } from '../../util/maps';

src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 import { Field } from 'react-final-form';
 import classNames from 'classnames';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import config from '../../config';
 
 import {

src/components/Topbar/Topbar.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
-import { pickBy } from 'lodash';
+import pickBy from 'lodash/pickBy';
 import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';

src/components/UserCard/UserCard.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { string, func, oneOfType } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { truncate } from 'lodash';
+import truncate from 'lodash/truncate';
 import classNames from 'classnames';
 import { AvatarLarge, NamedLink, InlineTextButton } from '../../components';
 import { ensureUser, ensureCurrentUser } from '../../util/data';

src/containers/CheckoutPage/CheckoutPage.duck.js

@@ -1,4 +1,4 @@
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import config from '../../config';
 import { denormalisedResponseEntities } from '../../util/data';
 import { storableError } from '../../util/errors';

src/containers/CheckoutPage/CheckoutPageSessionHelpers.js

@@ -5,7 +5,7 @@
  * e.g. tab is open. (Session Store is not related to session cookies.)
  */
 import moment from 'moment';
-import { reduce } from 'lodash';
+import reduce from 'lodash/reduce';
 import { types as sdkTypes } from '../../util/sdkLoader';
 
 const { UUID, Money } = sdkTypes;

src/containers/EditListingPage/EditListingPage.duck.js

@@ -1,4 +1,7 @@
-import { omit, omitBy, isUndefined, mergeWith } from 'lodash';
+import omit from 'lodash/omit';
+import omitBy from 'lodash/omitBy';
+import isUndefined from 'lodash/isUndefined';
+import mergeWith from 'lodash/mergeWith';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { storableError } from '../../util/errors';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';

src/containers/InboxPage/InboxPage.duck.js

@@ -1,4 +1,5 @@
-import { reverse, sortBy } from 'lodash';
+import reverse from 'lodash/reverse';
+import sortBy from 'lodash/sortBy';
 import { storableError } from '../../util/errors';
 import { parse } from '../../util/urlHelpers';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';

src/containers/ListingPage/ListingPage.duck.js

@@ -1,4 +1,4 @@
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import config from '../../config';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { storableError } from '../../util/errors';

src/containers/SearchPage/MainPanel.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { array, bool, func, number, object, objectOf, string } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { propTypes } from '../../util/types';
 import {
   SearchResultsPanel,

src/containers/SearchPage/SearchPage.duck.js

@@ -1,4 +1,4 @@
-import { unionWith } from 'lodash';
+import unionWith from 'lodash/unionWith';
 import { storableError } from '../../util/errors';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 

src/containers/SearchPage/SearchPage.helpers.js

@@ -1,4 +1,4 @@
-import { intersection } from 'lodash';
+import intersection from 'lodash/intersection';
 import config from '../../config';
 import { createResourceLocatorString } from '../../util/routes';
 import { createSlug } from '../../util/urlHelpers';

src/containers/SearchPage/SearchPage.js

@@ -4,7 +4,9 @@ import { injectIntl, intlShape } from 'react-intl';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { debounce, isEqual, unionWith } from 'lodash';
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+import unionWith from 'lodash/unionWith';
 import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';

src/containers/StyleguidePage/StyleguidePage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
 import { NamedLink } from '../../components';
 

src/containers/TransactionPage/TransactionPage.duck.js

@@ -1,4 +1,4 @@
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { isTransactionsTransitionInvalidTransition, storableError } from '../../util/errors';
 import {

src/ducks/Auth.duck.js

@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { clearCurrentUser, fetchCurrentUser } from './user.duck';
 import { storableError } from '../util/errors';
 import * as log from '../util/log';

src/ducks/FlashNotification.duck.js

@@ -5,7 +5,8 @@
  * https://github.com/erikras/ducks-modular-redux
  */
 
-import { find, findIndex } from 'lodash';
+import find from 'lodash/find';
+import findIndex from 'lodash/findIndex';
 
 // Actions: system notifications
 export const ADD_FLASH_NOTIFICATION = 'app/FlashNotification/ADD_NOTIFICATION';

src/ducks/user.duck.js

@@ -1,4 +1,5 @@
-import { omitBy, isUndefined } from 'lodash';
+import omitBy from 'lodash/omitBy';
+import isUndefined from 'lodash/isUndefined';
 import config from '../config';
 import { denormalisedResponseEntities } from '../util/data';
 import { storableError } from '../util/errors';

src/forms/ContactDetailsForm/ContactDetailsForm.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Form as FinalForm } from 'react-final-form';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import * as validators from '../../util/validators';

src/forms/EditListingPhotosForm/EditListingPhotosForm.js

@@ -3,7 +3,7 @@ import { array, bool, func, object, shape, string } from 'prop-types';
 import { compose } from 'redux';
 import { Form as FinalForm, Field } from 'react-final-form';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import { nonEmptyArray, composeValidators } from '../../util/validators';

src/forms/PasswordChangeForm/PasswordChangeForm.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Form as FinalForm } from 'react-final-form';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import * as validators from '../../util/validators';

src/forms/PasswordRecoveryForm/PasswordRecoveryForm.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Form as FinalForm } from 'react-final-form';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import * as validators from '../../util/validators';

src/forms/ProfileSettingsForm/ProfileSettingsForm.js

@@ -3,7 +3,7 @@ import { bool, string } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, Form as FinalForm } from 'react-final-form';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
 import { ensureCurrentUser } from '../../util/data';
 import { propTypes } from '../../util/types';

src/util/contextHelpers.js

@@ -1,6 +1,6 @@
 import React, { Component as ReactComponent } from 'react';
 import PropTypes from 'prop-types';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 
 /**
  * A higher order component (HOC) to take the togglePageClassNames function from

src/util/currency.js

@@ -1,4 +1,5 @@
-import { has, trimEnd } from 'lodash';
+import has from 'lodash/has';
+import trimEnd from 'lodash/trimEnd';
 import Decimal from 'decimal.js';
 import { types as sdkTypes } from './sdkLoader';
 import { subUnitDivisors } from './currencyConfig';

src/util/data.js

@@ -1,4 +1,6 @@
-import { isArray, reduce, toPairs } from 'lodash';
+import isArray from 'lodash/isArray';
+import reduce from 'lodash/reduce';
+import toPairs from 'lodash/toPairs';
 
 /**
  * Combine the given relationships objects

src/util/maps.js

@@ -1,4 +1,4 @@
-import { memoize } from 'lodash';
+import memoize from 'lodash/memoize';
 import { types as sdkTypes } from './sdkLoader';
 import config from '../config';
 

src/util/richText.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { chain } from 'lodash';
+import flow from 'lodash/flow';
+import flatMap from 'lodash/flatMap';
+import map from 'lodash/map';
 import { ExternalLink } from '../components';
 
 /**
@@ -125,11 +127,12 @@ export const richText = (text, options) => {
   const nonWhiteSpaceSequence = /([^\s]+)/gi;
 
   return text.split(nonWhiteSpaceSequence).reduce((acc, nextChild, i) => {
-    const parts = chain([nextChild])
-      .flatMap(w => linkifyOrWrapLinkSplit(w, i, { linkify, linkClass: linkOrLongWordClass }))
-      .flatMap(w => zwspAroundSpecialCharsSplit(w, '/,'))
-      .map((w, j) => wrapLongWord(w, `${i}${j}`, { longWordMinLength, longWordClass }))
-      .value();
+    const parts = flow([
+      v =>
+        flatMap(v, w => linkifyOrWrapLinkSplit(w, i, { linkify, linkClass: linkOrLongWordClass })),
+      v => flatMap(v, w => zwspAroundSpecialCharsSplit(w, '/,')),
+      v => map(v, (w, j) => wrapLongWord(w, `${i}${j}`, { longWordMinLength, longWordClass })),
+    ])([nextChild]);
     return acc.concat(parts);
   }, []);
 };

src/util/routes.js

@@ -1,4 +1,4 @@
-import { find } from 'lodash';
+import find from 'lodash/find';
 import { matchPath } from 'react-router-dom';
 import pathToRegexp from 'path-to-regexp';
 import { stringify } from './urlHelpers';

src/util/test-helpers.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mapValues } from 'lodash';
+import mapValues from 'lodash/mapValues';
 import Enzyme, { shallow, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import toJson from 'enzyme-to-json';

src/util/validators.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { types as sdkTypes } from './sdkLoader';
-import { toPairs } from 'lodash';
+import toPairs from 'lodash/toPairs';
 
 const { LatLng, Money } = sdkTypes;