Skip to content
Permalink
Browse files
replace usage of lodash with specific exports from lodash-es
  • Loading branch information
@dstaley
dstaley committed Feb 13, 2017
1 parent 4776bf9 commit 856a5d8
Show file tree
Hide file tree
Showing 13 changed files with 55 additions and 43 deletions.
7 assets/js/theme/cart.js
View file
@@ -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) => {
4 assets/js/theme/common/collapsible.js
View file
@@ -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);
23 assets/js/theme/common/faceted-search.js
View file
@@ -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);
}
}
}
10 assets/js/theme/common/form-utils.js
View file
@@ -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)}`;
}
}

4 assets/js/theme/common/nod-functions/min-max-validate.js
View file
@@ -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);
}

15 assets/js/theme/common/product-details.js
View file
@@ -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');

14 assets/js/theme/common/state-country.js
View file
@@ -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);

4 assets/js/theme/global/compare-products.js
View file
@@ -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);
}
4 assets/js/theme/global/mobile-menu-toggle.js
View file
@@ -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);
4 assets/js/theme/global/quick-search.js
View file
@@ -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;
4 assets/js/theme/global/text-truncate.js
View file
@@ -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);
});
}
4 assets/js/theme/product/image-gallery.js
View file
@@ -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();
1 package.json
View file
@@ -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.

Sign in to view

Copy link
@dstaley

dstaley Feb 13, 2017

Author 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.