Permalink
Browse files

replace usage of lodash with specific exports from lodash-es

  • Loading branch information...
dstaley committed Feb 13, 2017
1 parent 4776bf9 commit 856a5d8da20c335fcee9d5a9bde4a147d7119879
View
@@ -1,6 +1,7 @@
import PageManager from '../page-manager';
import $ from 'jquery';
import _ from 'lodash';
import bind from 'lodash-es/bind';
import debounce from 'lodash-es/debounce';
import giftCertCheck from './common/gift-certificate-validator';
import utils from '@bigcommerce/stencil-utils';
import ShippingEstimator from './cart/shipping-estimator';
@@ -147,8 +148,8 @@ export default class Cart extends PageManager {
bindCartEvents() {
const debounceTimeout = 400;
const cartUpdate = _.bind(_.debounce(this.cartUpdate, debounceTimeout), this);
const cartRemoveItem = _.bind(_.debounce(this.cartRemoveItem, debounceTimeout), this);
const cartUpdate = bind(debounce(this.cartUpdate, debounceTimeout), this);
const cartRemoveItem = bind(debounce(this.cartRemoveItem, debounceTimeout), this);
// cart update
$('[data-cart-update]', this.$cartContent).on('click', (event) => {
@@ -1,5 +1,5 @@
import $ from 'jquery';
import _ from 'lodash';
import extend from 'lodash-es/extend';
import mediaQueryListFactory from './media-query-list';
const PLUGIN_KEY = 'collapsible';
@@ -233,7 +233,7 @@ export default function collapsibleFactory(selector = `[data-${PLUGIN_KEY}]`, ov
$toggle.data(`${PLUGIN_KEY}-target`) ||
$toggle.attr('href')
);
const options = _.extend(optionsFromData($toggle), overrideOptions);
const options = extend(optionsFromData($toggle), overrideOptions);
const collapsible = new Collapsible($toggle, $(targetId), options);
$toggle.data(instanceKey, collapsible);
@@ -1,6 +1,9 @@
import { hooks, api } from '@bigcommerce/stencil-utils';
import $ from 'jquery';
import _ from 'lodash';
import extend from 'lodash-es/extend';
import without from 'lodash-es/without';
import union from 'lodash-es/union';
import includes from 'lodash-es/includes';
import Url from 'url';
import urlUtils from './url-utils';
import modalFactory from '../global/modal';
@@ -53,7 +56,7 @@ class FacetedSearch {
// Private properties
this.requestOptions = requestOptions;
this.callback = callback;
this.options = _.extend({}, defaultOptions, options);
this.options = extend({}, defaultOptions, options);
this.collapsedFacets = [];
this.collapsedFacetItems = [];
@@ -138,25 +141,25 @@ class FacetedSearch {
const id = $navList.attr('id');
// Remove
this.collapsedFacetItems = _.without(this.collapsedFacetItems, id);
this.collapsedFacetItems = without(this.collapsedFacetItems, id);
}
collapseFacetItems($navList) {
const id = $navList.attr('id');
const hasMoreResults = $navList.data('has-more-results');
if (hasMoreResults) {
this.collapsedFacetItems = _.union(this.collapsedFacetItems, [id]);
this.collapsedFacetItems = union(this.collapsedFacetItems, [id]);
} else {
this.collapsedFacetItems = _.without(this.collapsedFacetItems, id);
this.collapsedFacetItems = without(this.collapsedFacetItems, id);
}
}
toggleFacetItems($navList) {
const id = $navList.attr('id');
// Toggle depending on `collapsed` flag
if (_.contains(this.collapsedFacetItems, id)) {
if (includes(this.collapsedFacetItems, id)) {
this.getMoreFacetResults($navList);
return true;
@@ -266,7 +269,7 @@ class FacetedSearch {
$navLists.each((index, navList) => {
const $navList = $(navList);
const id = $navList.attr('id');
const shouldCollapse = _.contains(this.collapsedFacetItems, id);
const shouldCollapse = includes(this.collapsedFacetItems, id);
if (shouldCollapse) {
this.collapseFacetItems($navList);
@@ -283,7 +286,7 @@ class FacetedSearch {
const $accordionToggle = $(accordionToggle);
const collapsible = $accordionToggle.data('collapsible-instance');
const id = collapsible.targetId;
const shouldCollapse = _.contains(this.collapsedFacets, id);
const shouldCollapse = includes(this.collapsedFacets, id);
if (shouldCollapse) {
this.collapseFacet($accordionToggle);
@@ -397,9 +400,9 @@ class FacetedSearch {
const id = collapsible.targetId;
if (collapsible.isCollapsed) {
this.collapsedFacets = _.union(this.collapsedFacets, [id]);
this.collapsedFacets = union(this.collapsedFacets, [id]);
} else {
this.collapsedFacets = _.without(this.collapsedFacets, id);
this.collapsedFacets = without(this.collapsedFacets, id);
}
}
}
@@ -1,5 +1,7 @@
import $ from 'jquery';
import _ from 'lodash';
import includes from 'lodash-es/includes';
import camelCase from 'lodash-es/camelCase';
import capitalize from 'lodash-es/capitalize';
import nod from './nod';
import forms from './models/forms';
@@ -27,12 +29,12 @@ function classifyInput(input, formFieldClass) {
if (tagName === 'input') {
const inputType = $input.prop('type');
if (_.contains(['radio', 'checkbox', 'submit'], inputType)) {
if (includes(['radio', 'checkbox', 'submit'], inputType)) {
// ie: .form-field--checkbox, .form-field--radio
className = `${formFieldClass}--${_.camelCase(inputType)}`;
className = `${formFieldClass}--${camelCase(inputType)}`;
} else {
// ie: .form-field--input .form-field--inputText
specificClassName = `${className}${_.capitalize(inputType)}`;
specificClassName = `${className}${capitalize(inputType)}`;
}
}
@@ -1,12 +1,12 @@
import _ from 'lodash';
import isNaN from 'lodash-es/isNaN';
import $ from 'jquery';
function minMaxValidate(minInputSelector, maxInputSelector) {
function validate(cb) {
const minValue = parseFloat($(minInputSelector).val());
const maxValue = parseFloat($(maxInputSelector).val());
if (maxValue > minValue || _.isNaN(maxValue) || _.isNaN(minValue)) {
if (maxValue > minValue || isNaN(maxValue) || isNaN(minValue)) {
return cb(true);
}
@@ -7,7 +7,10 @@ import 'foundation-sites/js/foundation/foundation';
import 'foundation-sites/js/foundation/foundation.reveal';
import ImageGallery from '../product/image-gallery';
import modalFactory from '../global/modal';
import _ from 'lodash';
import isEmpty from 'lodash-es/isEmpty';
import isObject from 'lodash-es/isObject';
import isPlainObject from 'lodash-es/isPlainObject';
import isNumber from 'lodash-es/isNumber';
// We want to ensure that the events are bound to a single instance of the product details component
let previewModal = null;
@@ -39,7 +42,7 @@ export default class Product {
const hasOptions = $productOptionsElement.html().trim().length;
// Update product attributes. If we're in quick view and the product has options, then also update the initial view in case items are oos
if (_.isEmpty(productAttributesData) && hasOptions) {
if (isEmpty(productAttributesData) && hasOptions) {
const $productId = $('[name="product_id"]', $form).val();
utils.api.productAttributes.optionChange($productId, $form.serialize(), (err, response) => {
@@ -110,7 +113,7 @@ export default class Product {
}
showProductImage(image) {
if (_.isPlainObject(image)) {
if (isPlainObject(image)) {
const zoomImageUrl = utils.tools.image.getSrc(
image.data,
this.context.themeSettings.zoom_size
@@ -325,11 +328,11 @@ export default class Product {
this.showMessageBox(data.stock_message || data.purchasing_message);
if (_.isObject(data.price)) {
if (isObject(data.price)) {
this.updatePriceView(viewModel, data.price);
}
if (_.isObject(data.weight)) {
if (isObject(data.weight)) {
viewModel.$weight.html(data.weight.formatted);
}
@@ -344,7 +347,7 @@ export default class Product {
}
// if stock view is on (CP settings)
if (viewModel.stock.$container.length && _.isNumber(data.stock)) {
if (viewModel.stock.$container.length && isNumber(data.stock)) {
// if the stock container is hidden, show
viewModel.stock.$container.removeClass('u-hiddenVisually');
@@ -1,14 +1,16 @@
import $ from 'jquery';
import utils from '@bigcommerce/stencil-utils';
import _ from 'lodash';
import transform from 'lodash-es/transform';
import isEmpty from 'lodash-es/isEmpty';
import each from 'lodash-es/each';
import { insertStateHiddenField } from './form-utils';
/**
* If there are no options from bcapp, a text field will be sent. This will create a select element to hold options after the remote request.
* @returns {jQuery|HTMLElement}
*/
function makeStateRequired(stateElement, context) {
const attrs = _.transform(stateElement.prop('attributes'), (result, item) => {
const attrs = transform(stateElement.prop('attributes'), (result, item) => {
const ret = result;
ret[item.name] = item.value;
return ret;
@@ -46,7 +48,7 @@ function makeStateRequired(stateElement, context) {
* In this case we need to be able to switch to an input field and hide the required field
*/
function makeStateOptional(stateElement) {
const attrs = _.transform(stateElement.prop('attributes'), (result, item) => {
const attrs = transform(stateElement.prop('attributes'), (result, item) => {
const ret = result;
ret[item.name] = item.value;
@@ -85,8 +87,8 @@ function addOptions(statesArray, $selectElement, options) {
container.push(`<option value="">${statesArray.prefix}</option>`);
if (!_.isEmpty($selectElement)) {
_.each(statesArray.states, (stateObj) => {
if (!isEmpty($selectElement)) {
each(statesArray.states, (stateObj) => {
if (options.useIdForStates) {
container.push(`<option value="${stateObj.id}">${stateObj.name}</option>`);
} else {
@@ -136,7 +138,7 @@ export default function (stateElement, context = {}, options, callback) {
const $currentInput = $('[data-field-type="State"]');
if (!_.isEmpty(response.data.states)) {
if (!isEmpty(response.data.states)) {
// The element may have been replaced with a select, reselect it
const $selectElement = makeStateRequired($currentInput, context);
@@ -1,5 +1,5 @@
import $ from 'jquery';
import _ from 'lodash';
import map from 'lodash-es/map';
function decrementCounter(counter, item) {
const index = counter.indexOf(item);
@@ -32,7 +32,7 @@ export default function (urlContext) {
const $compareLink = $('a[data-compare-nav]');
if ($checked.length !== 0) {
products = _.map($checked, (element) => element.value);
products = map($checked, (element) => element.value);
updateCounterNav(products, $compareLink, urlContext);
}
@@ -1,5 +1,5 @@
import $ from 'jquery';
import _ from 'lodash';
import extend from 'lodash-es/extend';
import mediaQueryListFactory from '../common/media-query-list';
import { CartPreviewEvents } from './cart-preview';
@@ -148,7 +148,7 @@ export default function mobileMenuToggleFactory(selector = `[data-${PLUGIN_KEY}]
return cachedMobileMenu;
}
const options = _.extend(optionsFromData($toggle), overrideOptions);
const options = extend(optionsFromData($toggle), overrideOptions);
const mobileMenu = new MobileMenuToggle($toggle, options);
$toggle.data(instanceKey, mobileMenu);
@@ -1,5 +1,5 @@
import $ from 'jquery';
import _ from 'lodash';
import debounce from 'lodash-es/debounce';
import utils from '@bigcommerce/stencil-utils';
import StencilDropDown from './stencil-dropdown';
@@ -30,7 +30,7 @@ export default function () {
};
// stagger searching for 200ms after last input
const doSearch = _.debounce((searchQuery) => {
const doSearch = debounce((searchQuery) => {
utils.api.search.search(searchQuery, { template: 'search/quick-results' }, (err, response) => {
if (err) {
return false;
@@ -1,5 +1,5 @@
import $ from 'jquery';
import _ from 'lodash';
import forOwn from 'lodash-es/forOwn';
export default class TextTruncate {
constructor($element) {
@@ -77,7 +77,7 @@ export default class TextTruncate {
parseDataAttributes() {
// override default css options
_.forOwn(this.defaultCssOptions, (value, key) => {
forOwn(this.defaultCssOptions, (value, key) => {
this.$element.css(key, value);
});
}
@@ -1,6 +1,6 @@
import $ from 'jquery';
import 'jquery-zoom';
import _ from 'lodash';
import clone from 'lodash-es/clone';
export default class ImageGallery {
@@ -16,7 +16,7 @@ export default class ImageGallery {
}
setMainImage(imgObj) {
this.currentImage = _.clone(imgObj);
this.currentImage = clone(imgObj);
this.destroyImageZoom();
this.setActiveThumb();
View
@@ -40,6 +40,7 @@
"karma-webpack": "^2.0.2",
"load-grunt-config": "0.17.1",
"lodash": "^3.5.0",
"lodash-es": "^4.17.4",

This comment has been minimized.

Show comment
Hide comment
@dstaley

dstaley Feb 13, 2017

Owner

Instead of including the entirety of lodash, we instead use the lodash-es package to import just the functions that we need. This helps Webpack know what exports we need, and what exports it can ignore.

@dstaley

dstaley Feb 13, 2017

Owner

Instead of including the entirety of lodash, we instead use the lodash-es package to import just the functions that we need. This helps Webpack know what exports we need, and what exports it can ignore.

"nod-validate": "^2.0.12",
"pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
"slick-carousel": "1.5.5",

0 comments on commit 856a5d8

Please sign in to comment.