Skip to content

Commit 856a5d8

Browse files
committed
replace usage of lodash with specific exports from lodash-es
1 parent 4776bf9 commit 856a5d8

13 files changed

+55
-43
lines changed

Diff for: assets/js/theme/cart.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PageManager from '../page-manager';
22
import $ from 'jquery';
3-
import _ from 'lodash';
3+
import bind from 'lodash-es/bind';
4+
import debounce from 'lodash-es/debounce';
45
import giftCertCheck from './common/gift-certificate-validator';
56
import utils from '@bigcommerce/stencil-utils';
67
import ShippingEstimator from './cart/shipping-estimator';
@@ -147,8 +148,8 @@ export default class Cart extends PageManager {
147148

148149
bindCartEvents() {
149150
const debounceTimeout = 400;
150-
const cartUpdate = _.bind(_.debounce(this.cartUpdate, debounceTimeout), this);
151-
const cartRemoveItem = _.bind(_.debounce(this.cartRemoveItem, debounceTimeout), this);
151+
const cartUpdate = bind(debounce(this.cartUpdate, debounceTimeout), this);
152+
const cartRemoveItem = bind(debounce(this.cartRemoveItem, debounceTimeout), this);
152153

153154
// cart update
154155
$('[data-cart-update]', this.$cartContent).on('click', (event) => {

Diff for: assets/js/theme/common/collapsible.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import _ from 'lodash';
2+
import extend from 'lodash-es/extend';
33
import mediaQueryListFactory from './media-query-list';
44

55
const PLUGIN_KEY = 'collapsible';
@@ -233,7 +233,7 @@ export default function collapsibleFactory(selector = `[data-${PLUGIN_KEY}]`, ov
233233
$toggle.data(`${PLUGIN_KEY}-target`) ||
234234
$toggle.attr('href')
235235
);
236-
const options = _.extend(optionsFromData($toggle), overrideOptions);
236+
const options = extend(optionsFromData($toggle), overrideOptions);
237237
const collapsible = new Collapsible($toggle, $(targetId), options);
238238

239239
$toggle.data(instanceKey, collapsible);

Diff for: assets/js/theme/common/faceted-search.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { hooks, api } from '@bigcommerce/stencil-utils';
22
import $ from 'jquery';
3-
import _ from 'lodash';
3+
import extend from 'lodash-es/extend';
4+
import without from 'lodash-es/without';
5+
import union from 'lodash-es/union';
6+
import includes from 'lodash-es/includes';
47
import Url from 'url';
58
import urlUtils from './url-utils';
69
import modalFactory from '../global/modal';
@@ -53,7 +56,7 @@ class FacetedSearch {
5356
// Private properties
5457
this.requestOptions = requestOptions;
5558
this.callback = callback;
56-
this.options = _.extend({}, defaultOptions, options);
59+
this.options = extend({}, defaultOptions, options);
5760
this.collapsedFacets = [];
5861
this.collapsedFacetItems = [];
5962

@@ -138,25 +141,25 @@ class FacetedSearch {
138141
const id = $navList.attr('id');
139142

140143
// Remove
141-
this.collapsedFacetItems = _.without(this.collapsedFacetItems, id);
144+
this.collapsedFacetItems = without(this.collapsedFacetItems, id);
142145
}
143146

144147
collapseFacetItems($navList) {
145148
const id = $navList.attr('id');
146149
const hasMoreResults = $navList.data('has-more-results');
147150

148151
if (hasMoreResults) {
149-
this.collapsedFacetItems = _.union(this.collapsedFacetItems, [id]);
152+
this.collapsedFacetItems = union(this.collapsedFacetItems, [id]);
150153
} else {
151-
this.collapsedFacetItems = _.without(this.collapsedFacetItems, id);
154+
this.collapsedFacetItems = without(this.collapsedFacetItems, id);
152155
}
153156
}
154157

155158
toggleFacetItems($navList) {
156159
const id = $navList.attr('id');
157160

158161
// Toggle depending on `collapsed` flag
159-
if (_.contains(this.collapsedFacetItems, id)) {
162+
if (includes(this.collapsedFacetItems, id)) {
160163
this.getMoreFacetResults($navList);
161164

162165
return true;
@@ -266,7 +269,7 @@ class FacetedSearch {
266269
$navLists.each((index, navList) => {
267270
const $navList = $(navList);
268271
const id = $navList.attr('id');
269-
const shouldCollapse = _.contains(this.collapsedFacetItems, id);
272+
const shouldCollapse = includes(this.collapsedFacetItems, id);
270273

271274
if (shouldCollapse) {
272275
this.collapseFacetItems($navList);
@@ -283,7 +286,7 @@ class FacetedSearch {
283286
const $accordionToggle = $(accordionToggle);
284287
const collapsible = $accordionToggle.data('collapsible-instance');
285288
const id = collapsible.targetId;
286-
const shouldCollapse = _.contains(this.collapsedFacets, id);
289+
const shouldCollapse = includes(this.collapsedFacets, id);
287290

288291
if (shouldCollapse) {
289292
this.collapseFacet($accordionToggle);
@@ -397,9 +400,9 @@ class FacetedSearch {
397400
const id = collapsible.targetId;
398401

399402
if (collapsible.isCollapsed) {
400-
this.collapsedFacets = _.union(this.collapsedFacets, [id]);
403+
this.collapsedFacets = union(this.collapsedFacets, [id]);
401404
} else {
402-
this.collapsedFacets = _.without(this.collapsedFacets, id);
405+
this.collapsedFacets = without(this.collapsedFacets, id);
403406
}
404407
}
405408
}

Diff for: assets/js/theme/common/form-utils.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import $ from 'jquery';
2-
import _ from 'lodash';
2+
import includes from 'lodash-es/includes';
3+
import camelCase from 'lodash-es/camelCase';
4+
import capitalize from 'lodash-es/capitalize';
35
import nod from './nod';
46
import forms from './models/forms';
57

@@ -27,12 +29,12 @@ function classifyInput(input, formFieldClass) {
2729
if (tagName === 'input') {
2830
const inputType = $input.prop('type');
2931

30-
if (_.contains(['radio', 'checkbox', 'submit'], inputType)) {
32+
if (includes(['radio', 'checkbox', 'submit'], inputType)) {
3133
// ie: .form-field--checkbox, .form-field--radio
32-
className = `${formFieldClass}--${_.camelCase(inputType)}`;
34+
className = `${formFieldClass}--${camelCase(inputType)}`;
3335
} else {
3436
// ie: .form-field--input .form-field--inputText
35-
specificClassName = `${className}${_.capitalize(inputType)}`;
37+
specificClassName = `${className}${capitalize(inputType)}`;
3638
}
3739
}
3840

Diff for: assets/js/theme/common/nod-functions/min-max-validate.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import _ from 'lodash';
1+
import isNaN from 'lodash-es/isNaN';
22
import $ from 'jquery';
33

44
function minMaxValidate(minInputSelector, maxInputSelector) {
55
function validate(cb) {
66
const minValue = parseFloat($(minInputSelector).val());
77
const maxValue = parseFloat($(maxInputSelector).val());
88

9-
if (maxValue > minValue || _.isNaN(maxValue) || _.isNaN(minValue)) {
9+
if (maxValue > minValue || isNaN(maxValue) || isNaN(minValue)) {
1010
return cb(true);
1111
}
1212

Diff for: assets/js/theme/common/product-details.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import 'foundation-sites/js/foundation/foundation';
77
import 'foundation-sites/js/foundation/foundation.reveal';
88
import ImageGallery from '../product/image-gallery';
99
import modalFactory from '../global/modal';
10-
import _ from 'lodash';
10+
import isEmpty from 'lodash-es/isEmpty';
11+
import isObject from 'lodash-es/isObject';
12+
import isPlainObject from 'lodash-es/isPlainObject';
13+
import isNumber from 'lodash-es/isNumber';
1114

1215
// We want to ensure that the events are bound to a single instance of the product details component
1316
let previewModal = null;
@@ -39,7 +42,7 @@ export default class Product {
3942
const hasOptions = $productOptionsElement.html().trim().length;
4043

4144
// 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
42-
if (_.isEmpty(productAttributesData) && hasOptions) {
45+
if (isEmpty(productAttributesData) && hasOptions) {
4346
const $productId = $('[name="product_id"]', $form).val();
4447

4548
utils.api.productAttributes.optionChange($productId, $form.serialize(), (err, response) => {
@@ -110,7 +113,7 @@ export default class Product {
110113
}
111114

112115
showProductImage(image) {
113-
if (_.isPlainObject(image)) {
116+
if (isPlainObject(image)) {
114117
const zoomImageUrl = utils.tools.image.getSrc(
115118
image.data,
116119
this.context.themeSettings.zoom_size
@@ -325,11 +328,11 @@ export default class Product {
325328

326329
this.showMessageBox(data.stock_message || data.purchasing_message);
327330

328-
if (_.isObject(data.price)) {
331+
if (isObject(data.price)) {
329332
this.updatePriceView(viewModel, data.price);
330333
}
331334

332-
if (_.isObject(data.weight)) {
335+
if (isObject(data.weight)) {
333336
viewModel.$weight.html(data.weight.formatted);
334337
}
335338

@@ -344,7 +347,7 @@ export default class Product {
344347
}
345348

346349
// if stock view is on (CP settings)
347-
if (viewModel.stock.$container.length && _.isNumber(data.stock)) {
350+
if (viewModel.stock.$container.length && isNumber(data.stock)) {
348351
// if the stock container is hidden, show
349352
viewModel.stock.$container.removeClass('u-hiddenVisually');
350353

Diff for: assets/js/theme/common/state-country.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import $ from 'jquery';
22
import utils from '@bigcommerce/stencil-utils';
3-
import _ from 'lodash';
3+
import transform from 'lodash-es/transform';
4+
import isEmpty from 'lodash-es/isEmpty';
5+
import each from 'lodash-es/each';
46
import { insertStateHiddenField } from './form-utils';
57

68
/**
79
* 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.
810
* @returns {jQuery|HTMLElement}
911
*/
1012
function makeStateRequired(stateElement, context) {
11-
const attrs = _.transform(stateElement.prop('attributes'), (result, item) => {
13+
const attrs = transform(stateElement.prop('attributes'), (result, item) => {
1214
const ret = result;
1315
ret[item.name] = item.value;
1416
return ret;
@@ -46,7 +48,7 @@ function makeStateRequired(stateElement, context) {
4648
* In this case we need to be able to switch to an input field and hide the required field
4749
*/
4850
function makeStateOptional(stateElement) {
49-
const attrs = _.transform(stateElement.prop('attributes'), (result, item) => {
51+
const attrs = transform(stateElement.prop('attributes'), (result, item) => {
5052
const ret = result;
5153
ret[item.name] = item.value;
5254

@@ -85,8 +87,8 @@ function addOptions(statesArray, $selectElement, options) {
8587

8688
container.push(`<option value="">${statesArray.prefix}</option>`);
8789

88-
if (!_.isEmpty($selectElement)) {
89-
_.each(statesArray.states, (stateObj) => {
90+
if (!isEmpty($selectElement)) {
91+
each(statesArray.states, (stateObj) => {
9092
if (options.useIdForStates) {
9193
container.push(`<option value="${stateObj.id}">${stateObj.name}</option>`);
9294
} else {
@@ -136,7 +138,7 @@ export default function (stateElement, context = {}, options, callback) {
136138

137139
const $currentInput = $('[data-field-type="State"]');
138140

139-
if (!_.isEmpty(response.data.states)) {
141+
if (!isEmpty(response.data.states)) {
140142
// The element may have been replaced with a select, reselect it
141143
const $selectElement = makeStateRequired($currentInput, context);
142144

Diff for: assets/js/theme/global/compare-products.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import _ from 'lodash';
2+
import map from 'lodash-es/map';
33

44
function decrementCounter(counter, item) {
55
const index = counter.indexOf(item);
@@ -32,7 +32,7 @@ export default function (urlContext) {
3232
const $compareLink = $('a[data-compare-nav]');
3333

3434
if ($checked.length !== 0) {
35-
products = _.map($checked, (element) => element.value);
35+
products = map($checked, (element) => element.value);
3636

3737
updateCounterNav(products, $compareLink, urlContext);
3838
}

Diff for: assets/js/theme/global/mobile-menu-toggle.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import _ from 'lodash';
2+
import extend from 'lodash-es/extend';
33
import mediaQueryListFactory from '../common/media-query-list';
44
import { CartPreviewEvents } from './cart-preview';
55

@@ -148,7 +148,7 @@ export default function mobileMenuToggleFactory(selector = `[data-${PLUGIN_KEY}]
148148
return cachedMobileMenu;
149149
}
150150

151-
const options = _.extend(optionsFromData($toggle), overrideOptions);
151+
const options = extend(optionsFromData($toggle), overrideOptions);
152152
const mobileMenu = new MobileMenuToggle($toggle, options);
153153

154154
$toggle.data(instanceKey, mobileMenu);

Diff for: assets/js/theme/global/quick-search.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import _ from 'lodash';
2+
import debounce from 'lodash-es/debounce';
33
import utils from '@bigcommerce/stencil-utils';
44
import StencilDropDown from './stencil-dropdown';
55

@@ -30,7 +30,7 @@ export default function () {
3030
};
3131

3232
// stagger searching for 200ms after last input
33-
const doSearch = _.debounce((searchQuery) => {
33+
const doSearch = debounce((searchQuery) => {
3434
utils.api.search.search(searchQuery, { template: 'search/quick-results' }, (err, response) => {
3535
if (err) {
3636
return false;

Diff for: assets/js/theme/global/text-truncate.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import _ from 'lodash';
2+
import forOwn from 'lodash-es/forOwn';
33

44
export default class TextTruncate {
55
constructor($element) {
@@ -77,7 +77,7 @@ export default class TextTruncate {
7777

7878
parseDataAttributes() {
7979
// override default css options
80-
_.forOwn(this.defaultCssOptions, (value, key) => {
80+
forOwn(this.defaultCssOptions, (value, key) => {
8181
this.$element.css(key, value);
8282
});
8383
}

Diff for: assets/js/theme/product/image-gallery.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import $ from 'jquery';
22
import 'jquery-zoom';
3-
import _ from 'lodash';
3+
import clone from 'lodash-es/clone';
44

55
export default class ImageGallery {
66

@@ -16,7 +16,7 @@ export default class ImageGallery {
1616
}
1717

1818
setMainImage(imgObj) {
19-
this.currentImage = _.clone(imgObj);
19+
this.currentImage = clone(imgObj);
2020

2121
this.destroyImageZoom();
2222
this.setActiveThumb();

Diff for: package.json

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"karma-webpack": "^2.0.2",
4141
"load-grunt-config": "0.17.1",
4242
"lodash": "^3.5.0",
43+
"lodash-es": "^4.17.4",
4344
"nod-validate": "^2.0.12",
4445
"pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
4546
"slick-carousel": "1.5.5",

0 commit comments

Comments
 (0)