Fix/you do not need lodash (#9161)

* Remove lodash `without` usage

* isNumber

* Remove lodash `difference`

* Replace lodash isEmpty with type guard

* Replace isObject with type guard

* remove lodash noop

* Replace lodash clamp

* replace lodash uniqueId

* Remove uniqueId import

* Add eslint rule to restrict lodash import

* Replace lodash range

* Replace lodash has() function

Replace lodash has

* replace omitby

* Replace lodash isEqual with fastDeepEqual

* Replace kebabCase with change-case package

* Replace lodash camelCase

Replace lodash mapKeys with function

Move mapkeys to utility

Create camelCaseKeys which replaces usage of mapKeys

* Replace lodash debounce with custom utiity

* replace lodash keyby

* Replace lodash pick with native function

* Replace lodash cloneDeep with klona

* Replace snake case keys package with change case

* Replace sortBy with fast sort package

* replace isEmpty with type guard

* Replace pickBy usage in validation reducer

* Replace groupBy usage in search list control

* Replace flatten, uniqBy usage in getProducts()

* Remove setWith and clone from updateState

* Replace custom useThrottle with useThrottledCallback from use-debounce package

* onSelectRate can use-debounce

* Fix missing flatten

* Update assets/js/data/cart/test/push-changes.ts

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

.eslintrc.js

@@ -1,3 +1,121 @@
+const restrictedImports = [
+	{
+		name: 'lodash',
+		importNames: [
+			'camelCase',
+			'capitalize',
+			'castArray',
+			'chunk',
+			'clamp',
+			'clone',
+			'cloneDeep',
+			'compact',
+			'concat',
+			'countBy',
+			'debounce',
+			'deburr',
+			'defaults',
+			'defaultTo',
+			'delay',
+			'difference',
+			'differenceWith',
+			'dropRight',
+			'each',
+			'escape',
+			'escapeRegExp',
+			'every',
+			'extend',
+			'filter',
+			'find',
+			'findIndex',
+			'findKey',
+			'findLast',
+			'first',
+			'flatMap',
+			'flatten',
+			'flattenDeep',
+			'flow',
+			'flowRight',
+			'forEach',
+			'fromPairs',
+			'has',
+			'identity',
+			'includes',
+			'invoke',
+			'isArray',
+			'isBoolean',
+			'isEqual',
+			'isFinite',
+			'isFunction',
+			'isMatch',
+			'isNil',
+			'isNumber',
+			'isObject',
+			'isObjectLike',
+			'isPlainObject',
+			'isString',
+			'isUndefined',
+			'keyBy',
+			'keys',
+			'last',
+			'lowerCase',
+			'map',
+			'mapKeys',
+			'maxBy',
+			'memoize',
+			'merge',
+			'negate',
+			'noop',
+			'nth',
+			'omit',
+			'omitBy',
+			'once',
+			'orderby',
+			'overEvery',
+			'partial',
+			'partialRight',
+			'pick',
+			'pickBy',
+			'random',
+			'reduce',
+			'reject',
+			'repeat',
+			'reverse',
+			'setWith',
+			'size',
+			'snakeCase',
+			'some',
+			'sortBy',
+			'startCase',
+			'startsWith',
+			'stubFalse',
+			'stubTrue',
+			'sum',
+			'sumBy',
+			'take',
+			'throttle',
+			'times',
+			'toString',
+			'trim',
+			'truncate',
+			'unescape',
+			'unionBy',
+			'uniq',
+			'uniqBy',
+			'uniqueId',
+			'uniqWith',
+			'upperFirst',
+			'values',
+			'without',
+			'words',
+			'xor',
+			'zip',
+		],
+		message:
+			'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
+	},
+];
+
 module.exports = {
 	root: true,
 	extends: [
@@ -71,6 +189,12 @@ module.exports = {
 				allowedTextDomain: [ 'woo-gutenberg-products-block' ],
 			},
 		],
+		'no-restricted-imports': [
+			'error',
+			{
+				paths: restrictedImports,
+			},
+		],
 		'@typescript-eslint/no-restricted-imports': [
 			'error',
 			{

assets/js/atomic/blocks/product-elements/add-to-cart/block.tsx

@@ -8,7 +8,7 @@ import {
 	useAddToCartFormContext,
 } from '@woocommerce/base-context';
 import { useProductDataContext } from '@woocommerce/shared-context';
-import { isEmpty } from 'lodash';
+import { isEmpty } from '@woocommerce/types';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/utils.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { keyBy } from 'lodash';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
 	Dictionary,
@@ -10,6 +9,7 @@ import {
 	ProductResponseTermItem,
 	ProductResponseVariationsItem,
 } from '@woocommerce/types';
+import { keyBy } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies

assets/js/base/components/cart-checkout/product-details/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 import { decodeEntities } from '@wordpress/html-entities';
 import type { ProductResponseItemData } from '@woocommerce/types';
 

assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -12,7 +12,7 @@ import {
 	useStoreEvents,
 } from '@woocommerce/base-context/hooks';
 import { sanitizeHTML } from '@woocommerce/utils';
-import { debounce } from 'lodash';
+import { useDebouncedCallback } from 'use-debounce';
 import type { ReactElement } from 'react';
 
 /**
@@ -91,23 +91,22 @@ export const ShippingRatesControlPackage = ( {
 			) }
 		</>
 	);
-	const onSelectRate = debounce(
-		useCallback(
-			( newShippingRateId: string ) => {
-				selectShippingRate( newShippingRateId, packageId );
-				dispatchCheckoutEvent( 'set-selected-shipping-rate', {
-					shippingRateId: newShippingRateId,
-				} );
-			},
-			[ dispatchCheckoutEvent, packageId, selectShippingRate ]
-		),
-		1000
+
+	const onSelectRate = useCallback(
+		( newShippingRateId: string ) => {
+			selectShippingRate( newShippingRateId, packageId );
+			dispatchCheckoutEvent( 'set-selected-shipping-rate', {
+				shippingRateId: newShippingRateId,
+			} );
+		},
+		[ dispatchCheckoutEvent, packageId, selectShippingRate ]
 	);
+	const debouncedOnSelectRate = useDebouncedCallback( onSelectRate, 1000 );
 	const packageRatesProps = {
 		className,
 		noResultsMessage,
 		rates: packageData.shipping_rates,
-		onSelectRate,
+		onSelectRate: debouncedOnSelectRate,
 		selectedRate: packageData.shipping_rates.find(
 			( rate ) => rate.selected
 		),

assets/js/base/components/product-list/product-list.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 import classnames from 'classnames';
 import Pagination from '@woocommerce/base-components/pagination';
 import { useEffect } from '@wordpress/element';
@@ -113,7 +113,9 @@ const announceLoadingCompletion = ( totalProducts: number ): void => {
 const areQueryTotalsDifferent: AreQueryTotalsDifferent = (
 	{ totalQuery: nextQuery, totalProducts: nextProducts },
 	{ totalQuery: currentQuery } = {}
-) => ! isEqual( nextQuery, currentQuery ) && Number.isFinite( nextProducts );
+) =>
+	! fastDeepEqual( nextQuery, currentQuery ) &&
+	Number.isFinite( nextProducts );
 
 const ProductList = ( {
 	attributes,
@@ -169,7 +171,7 @@ const ProductList = ( {
 
 	// If query state (excluding pagination/sorting attributes) changed, reset pagination to the first page.
 	useEffect( () => {
-		if ( isEqual( totalQuery, previousQueryTotals?.totalQuery ) ) {
+		if ( fastDeepEqual( totalQuery, previousQueryTotals?.totalQuery ) ) {
 			return;
 		}
 		onPageChange( 1 );
@@ -210,7 +212,7 @@ const ProductList = ( {
 	const totalPages =
 		! Number.isFinite( totalProducts ) &&
 		Number.isFinite( previousQueryTotals?.totalProducts ) &&
-		isEqual( totalQuery, previousQueryTotals?.totalQuery )
+		fastDeepEqual( totalQuery, previousQueryTotals?.totalQuery )
 			? Math.ceil( ( previousQueryTotals?.totalProducts || 0 ) / perPage )
 			: Math.ceil( totalProducts / perPage );
 	const listProducts = products.length

assets/js/base/context/event-emit/reducer.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -13,14 +8,18 @@ import {
 	EventObserversType,
 } from './types';
 
+export function generateUniqueId() {
+	return Math.floor( Math.random() * Date.now() ).toString();
+}
+
 export const actions = {
 	addEventCallback: (
 		eventType: string,
 		callback: ActionCallbackType,
 		priority = 10
 	): ActionType => {
 		return {
-			id: uniqueId(),
+			id: generateUniqueId(),
 			type: ACTION.ADD_EVENT_CALLBACK,
 			eventType,
 			callback,

assets/js/base/context/hooks/cart/use-store-cart.ts

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 import { useRef } from '@wordpress/element';
 import {
 	CART_STORE_KEY as storeKey,
@@ -247,7 +247,7 @@ export const useStoreCart = (
 
 	if (
 		! currentResults.current ||
-		! isEqual( currentResults.current, results )
+		! fastDeepEqual( currentResults.current, results )
 	) {
 		currentResults.current = results;
 	}

assets/js/base/context/hooks/collections/use-collection-data.ts

@@ -3,9 +3,9 @@
  */
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { useDebounce } from 'use-debounce';
-import { isEmpty, sortBy } from 'lodash';
+import { isEmpty, objectHasProp } from '@woocommerce/types';
+import { sort } from 'fast-sort';
 import { useShallowEqual } from '@woocommerce/base-hooks';
-import { objectHasProp } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -22,17 +22,16 @@ const buildCollectionDataQuery = (
 	if (
 		Array.isArray( collectionDataQueryState.calculate_attribute_counts )
 	) {
-		query.calculate_attribute_counts = sortBy(
+		query.calculate_attribute_counts = sort(
 			collectionDataQueryState.calculate_attribute_counts.map(
 				( { taxonomy, queryType } ) => {
 					return {
 						taxonomy,
 						query_type: queryType,
 					};
 				}
-			),
-			[ 'taxonomy', 'query_type' ]
-		);
+			)
+		).asc( [ 'taxonomy', 'query_type' ] );
 	}
 
 	return query;

assets/js/base/utils/camel-case-keys.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { camelCase } from 'change-case';
+
+/**
+ * Internal dependencies
+ */
+import { mapKeys } from './map-keys';
+
+export const camelCaseKeys = ( obj: object ) =>
+	mapKeys( obj, ( _, key ) => camelCase( key ) );

assets/js/base/utils/debounce.ts

@@ -0,0 +1,34 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DebouncedFunction< T extends ( ...args: any[] ) => any > = ( (
+	...args: Parameters< T >
+) => void ) & { flush: () => void };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const debounce = < T extends ( ...args: any[] ) => any >(
+	func: T,
+	wait: number,
+	immediate?: boolean
+): DebouncedFunction< T > => {
+	let timeout: ReturnType< typeof setTimeout > | null;
+	let latestArgs: Parameters< T > | null = null;
+
+	const debounced = ( ( ...args: Parameters< T > ) => {
+		latestArgs = args;
+		if ( timeout ) clearTimeout( timeout );
+		timeout = setTimeout( () => {
+			timeout = null;
+			if ( ! immediate && latestArgs ) func( ...latestArgs );
+		}, wait );
+		if ( immediate && ! timeout ) func( ...args );
+	} ) as DebouncedFunction< T >;
+
+	debounced.flush = () => {
+		if ( timeout && latestArgs ) {
+			func( ...latestArgs );
+			clearTimeout( timeout );
+			timeout = null;
+		}
+	};
+
+	return debounced;
+};

assets/js/base/utils/index.js

@@ -10,3 +10,8 @@ export * from './get-icons-from-payment-methods';
 export * from './parse-style';
 export * from './create-notice';
 export * from './get-navigation-type';
+export * from './map-keys';
+export * from './camel-case-keys';
+export * from './snake-case-keys';
+export * from './debounce';
+export * from './keyby';

assets/js/base/utils/keyby.ts

@@ -0,0 +1,7 @@
+export const keyBy = < T >( array: T[], key: keyof T ) => {
+	return array.reduce( ( acc, value ) => {
+		const computedKey = key ? String( value[ key ] ) : String( value );
+		acc[ computedKey ] = value;
+		return acc;
+	}, {} as Record< string, T > );
+};