Lodash: Remove completely from media-utils package (WordPress#41967)

.eslintrc.js

@@ -82,6 +82,7 @@ module.exports = {
 							'chunk',
 							'clamp',
 							'concat',
+							'defaults',
 							'defaultTo',
 							'differenceWith',
 							'dropRight',

packages/media-utils/package.json

@@ -29,8 +29,7 @@
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
-		"lodash": "^4.17.21"
+		"@wordpress/i18n": "file:../i18n"
 	},
 	"publishConfig": {
 		"access": "public"

packages/media-utils/src/components/media-upload/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, defaults, pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -169,14 +164,10 @@ const getGalleryDetailsMediaFrame = () => {
 					multiple: 'add',
 					editable: false,
 
-					library: wp.media.query(
-						defaults(
-							{
-								type: 'image',
-							},
-							this.options.library
-						)
-					),
+					library: wp.media.query( {
+						type: 'image',
+						...this.options.library,
+					} ),
 				} ),
 				new wp.media.controller.EditImage( {
 					model: this.options.editImage,
@@ -210,7 +201,12 @@ const slimImageObject = ( img ) => {
 		'link',
 		'caption',
 	];
-	return pick( img, attrSet );
+	return attrSet.reduce( ( result, key ) => {
+		if ( img?.hasOwnProperty( key ) ) {
+			result[ key ] = img[ key ];
+		}
+		return result;
+	}, {} );
 };
 
 const getAttachmentsCollection = ( ids ) => {
@@ -375,6 +371,7 @@ class MediaUpload extends Component {
 	}
 
 	onOpen() {
+		const { value } = this.props;
 		this.updateCollection();
 
 		//Handle active tab in media model on model open.
@@ -384,27 +381,24 @@ class MediaUpload extends Component {
 
 		// Handle both this.props.value being either (number[]) multiple ids
 		// (for galleries) or a (number) singular id (e.g. image block).
-		const hasMedia = Array.isArray( this.props.value )
-			? !! this.props.value?.length
-			: !! this.props.value;
+		const hasMedia = Array.isArray( value ) ? !! value?.length : !! value;
 
 		if ( ! hasMedia ) {
 			return;
 		}
 
 		const isGallery = this.props.gallery;
 		const selection = this.frame.state().get( 'selection' );
+		const valueArray = Array.isArray( value ) ? value : [ value ];
 
 		if ( ! isGallery ) {
-			castArray( this.props.value ).forEach( ( id ) => {
+			valueArray.forEach( ( id ) => {
 				selection.add( wp.media.attachment( id ) );
 			} );
 		}
 
 		// Load the images so they are available in the media modal.
-		const attachments = getAttachmentsCollection(
-			castArray( this.props.value )
-		);
+		const attachments = getAttachmentsCollection( valueArray );
 
 		// Once attachments are loaded, set the current selection.
 		attachments.more().done( function () {

packages/media-utils/src/utils/upload-media.js

@@ -1,19 +1,3 @@
-/**
- * External dependencies
- */
-import {
-	compact,
-	flatMap,
-	forEach,
-	get,
-	has,
-	includes,
-	map,
-	omit,
-	some,
-	startsWith,
-} from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -40,14 +24,18 @@ export function getMimeTypesArray( wpMimeTypesObject ) {
 	if ( ! wpMimeTypesObject ) {
 		return wpMimeTypesObject;
 	}
-	return flatMap( wpMimeTypesObject, ( mime, extensionsString ) => {
-		const [ type ] = mime.split( '/' );
-		const extensions = extensionsString.split( '|' );
-		return [
-			mime,
-			...map( extensions, ( extension ) => `${ type }/${ extension }` ),
-		];
-	} );
+	return Object.entries( wpMimeTypesObject )
+		.map( ( [ extensionsString, mime ] ) => {
+			const [ type ] = mime.split( '/' );
+			const extensions = extensionsString.split( '|' );
+			return [
+				mime,
+				...extensions.map(
+					( extension ) => `${ type }/${ extension }`
+				),
+			];
+		} )
+		.flat();
 }
 
 /**
@@ -79,30 +67,30 @@ export async function uploadMedia( {
 
 	const filesSet = [];
 	const setAndUpdateFiles = ( idx, value ) => {
-		revokeBlobURL( get( filesSet, [ idx, 'url' ] ) );
+		revokeBlobURL( filesSet[ idx ]?.url );
 		filesSet[ idx ] = value;
-		onFileChange( compact( filesSet ) );
+		onFileChange( filesSet.filter( Boolean ) );
 	};
 
 	// Allowed type specified by consumer.
 	const isAllowedType = ( fileType ) => {
 		if ( ! allowedTypes ) {
 			return true;
 		}
-		return some( allowedTypes, ( allowedType ) => {
+		return allowedTypes.some( ( allowedType ) => {
 			// If a complete mimetype is specified verify if it matches exactly the mime type of the file.
-			if ( includes( allowedType, '/' ) ) {
+			if ( allowedType.includes( '/' ) ) {
 				return allowedType === fileType;
 			}
 			// Otherwise a general mime type is used and we should verify if the file mimetype starts with it.
-			return startsWith( fileType, `${ allowedType }/` );
+			return fileType.startsWith( `${ allowedType }/` );
 		} );
 	};
 
 	// Allowed types for the current WP_User.
 	const allowedMimeTypesForUser = getMimeTypesArray( wpAllowedMimeTypes );
 	const isAllowedMimeTypeForUser = ( fileType ) => {
-		return includes( allowedMimeTypesForUser, fileType );
+		return allowedMimeTypesForUser.includes( fileType );
 	};
 
 	const validFiles = [];
@@ -189,10 +177,12 @@ export async function uploadMedia( {
 				mediaFile,
 				additionalData
 			);
+			// eslint-disable-next-line camelcase
+			const { alt_text, source_url, ...savedMediaProps } = savedMedia;
 			const mediaObject = {
-				...omit( savedMedia, [ 'alt_text', 'source_url' ] ),
+				...savedMediaProps,
 				alt: savedMedia.alt_text,
-				caption: get( savedMedia, [ 'caption', 'raw' ], '' ),
+				caption: savedMedia.caption?.raw ?? '',
 				title: savedMedia.title.raw,
 				url: savedMedia.source_url,
 			};
@@ -201,8 +191,8 @@ export async function uploadMedia( {
 			// Reset to empty on failure.
 			setAndUpdateFiles( idx, null );
 			let message;
-			if ( has( error, [ 'message' ] ) ) {
-				message = get( error, [ 'message' ] );
+			if ( error.message ) {
+				message = error.message;
 			} else {
 				message = sprintf(
 					// translators: %s: file name
@@ -229,7 +219,11 @@ function createMediaFromFile( file, additionalData ) {
 	// Create upload payload.
 	const data = new window.FormData();
 	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );
-	forEach( additionalData, ( value, key ) => data.append( key, value ) );
+	if ( additionalData ) {
+		Object.entries( additionalData ).forEach( ( [ key, value ] ) =>
+			data.append( key, value )
+		);
+	}
 	return apiFetch( {
 		path: '/wp/v2/media',
 		body: data,