Lodash: Remove completely from @wordpress/viewport package (#44572)

* Lodash: Remove completely from viewport package * Optimization and enhancement as per review * addListener -> addEventListener * Revert "addListener -> addEventListener" This reverts commit 02472db. * Revert "Optimization and enhancement as per review" This reverts commit 7f17ee9. * Address feedback, again * Fix MediaQueryList mockks * Add the missing Object.fromEntries
WordPress · Oct 5, 2022 · 2c45ac1 · 2c45ac1
1 parent 4b19439
commit 2c45ac1
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 72 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/jest-preset-default/scripts/setup-globals.js b/packages/jest-preset-default/scripts/setup-globals.js
@@ -44,7 +44,9 @@ global.window.cancelIdleCallback = function cancelIdleCallback( handle ) {
 global.window.matchMedia = () => ( {
 	matches: false,
 	addListener: () => {},
+	addEventListener: () => {},
 	removeListener: () => {},
+	removeEventListener: () => {},
 } );
 
 // Setup fake localStorage.

diff --git a/packages/react-native-editor/src/globals.js b/packages/react-native-editor/src/globals.js
@@ -55,7 +55,9 @@ if ( ! global.window.matchMedia ) {
 	global.window.matchMedia = () => ( {
 		matches: false,
 		addListener: () => {},
+		addEventListener: () => {},
 		removeListener: () => {},
+		removeEventListener: () => {},
 	} );
 }
 

diff --git a/packages/viewport/package.json b/packages/viewport/package.json
@@ -27,8 +27,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"lodash": "^4.17.21"
+		"@wordpress/data": "file:../data"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0"

diff --git a/packages/viewport/src/listener.js b/packages/viewport/src/listener.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { reduce, mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -21,7 +16,9 @@ const addDimensionsEventListener = ( breakpoints, operators ) => {
 	 */
 	const setIsMatching = debounce(
 		() => {
-			const values = mapValues( queries, ( query ) => query.matches );
+			const values = Object.fromEntries(
+				queries.map( ( [ key, query ] ) => [ key, query.matches ] )
+			);
 			dispatch( store ).setIsMatching( values );
 		},
 		0,
@@ -37,24 +34,17 @@ const addDimensionsEventListener = ( breakpoints, operators ) => {
 	 *
 	 * @type {Object<string,MediaQueryList>}
 	 */
-	const queries = reduce(
-		breakpoints,
-		( result, width, name ) => {
-			Object.entries( operators ).forEach(
-				( [ operator, condition ] ) => {
-					const list = window.matchMedia(
-						`(${ condition }: ${ width }px)`
-					);
-					list.addListener( setIsMatching );
-
-					const key = [ operator, name ].join( ' ' );
-					result[ key ] = list;
-				}
-			);
-
-			return result;
-		},
-		{}
+	const operatorEntries = Object.entries( operators );
+	const queries = Object.entries( breakpoints ).flatMap(
+		( [ name, width ] ) => {
+			return operatorEntries.map( ( [ operator, condition ] ) => {
+				const list = window.matchMedia(
+					`(${ condition }: ${ width }px)`
+				);
+				list.addEventListener( 'change', setIsMatching );
+				return [ `${ operator } ${ name }`, list ];
+			} );
+		}
 	);
 
 	window.addEventListener( 'orientationchange', setIsMatching );

diff --git a/packages/viewport/src/listener.native.js b/packages/viewport/src/listener.native.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { reduce } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -25,20 +24,17 @@ const matchWidth = ( operator, breakpoint ) => {
 };
 
 const addDimensionsEventListener = ( breakpoints, operators ) => {
+	const operatorEntries = Object.entries( operators );
+	const breakpointEntries = Object.entries( breakpoints );
+
 	const setIsMatching = () => {
-		const matches = reduce(
-			breakpoints,
-			( result, width, name ) => {
-				Object.entries( operators ).forEach(
-					( [ operator, condition ] ) => {
-						const key = [ operator, name ].join( ' ' );
-						result[ key ] = matchWidth( condition, width );
-					}
-				);
-
-				return result;
-			},
-			{}
+		const matches = Object.fromEntries(
+			breakpointEntries.flatMap( ( [ name, width ] ) => {
+				return operatorEntries.map( ( [ operator, condition ] ) => [
+					`${ operator } ${ name }`,
+					matchWidth( condition, width ),
+				] );
+			} )
 		);
 
 		dispatch( store ).setIsMatching( matches );

diff --git a/packages/viewport/src/with-viewport-match.js b/packages/viewport/src/with-viewport-match.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -36,19 +31,22 @@ import {
  * @return {Function} Higher-order component.
  */
 const withViewportMatch = ( queries ) => {
+	const queryEntries = Object.entries( queries );
 	const useViewPortQueriesResult = () =>
-		mapValues( queries, ( query ) => {
-			let [ operator, breakpointName ] = query.split( ' ' );
-			if ( breakpointName === undefined ) {
-				breakpointName = operator;
-				operator = '>=';
-			}
-			// Hooks should unconditionally execute in the same order,
-			// we are respecting that as from the static query of the HOC we generate
-			// a hook that calls other hooks always in the same order (because the query never changes).
-			// eslint-disable-next-line react-hooks/rules-of-hooks
-			return useViewportMatch( breakpointName, operator );
-		} );
+		Object.fromEntries(
+			queryEntries.map( ( [ key, query ] ) => {
+				let [ operator, breakpointName ] = query.split( ' ' );
+				if ( breakpointName === undefined ) {
+					breakpointName = operator;
+					operator = '>=';
+				}
+				// Hooks should unconditionally execute in the same order,
+				// we are respecting that as from the static query of the HOC we generate
+				// a hook that calls other hooks always in the same order (because the query never changes).
+				// eslint-disable-next-line react-hooks/rules-of-hooks
+				return [ key, useViewportMatch( breakpointName, operator ) ];
+			} )
+		);
 	return createHigherOrderComponent( ( WrappedComponent ) => {
 		return pure( ( props ) => {
 			const queriesResult = useViewPortQueriesResult();

diff --git a/packages/viewport/src/with-viewport-match.native.js b/packages/viewport/src/with-viewport-match.native.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -27,24 +22,28 @@ import { store } from './store';
  *
  * ```jsx
  * function MyComponent( { isMobile } ) {
- * 	return (
- * 		<div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
- * 	);
+ *     return (
+ *         <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
+ *     );
  * }
  *
  * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
  * ```
  *
  * @return {Function} Higher-order component.
  */
-const withViewportMatch = ( queries ) =>
-	createHigherOrderComponent(
+const withViewportMatch = ( queries ) => {
+	const queryEntries = Object.entries( queries );
+	return createHigherOrderComponent(
 		withSelect( ( select ) => {
-			return mapValues( queries, ( query ) => {
-				return select( store ).isViewportMatch( query );
-			} );
+			return Object.fromEntries(
+				queryEntries.map( ( [ key, query ] ) => {
+					return [ key, select( store ).isViewportMatch( query ) ];
+				} )
+			);
 		} ),
 		'withViewportMatch'
 	);
+};
 
 export default withViewportMatch;