From 53a44bedfc90451592c895e245bc662f3b345333 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Wed, 6 Jul 2022 11:31:58 +0300 Subject: [PATCH] Lodash: Remove completely from media-utils package (#41967) --- .eslintrc.js | 1 + package-lock.json | 3 +- packages/media-utils/package.json | 3 +- .../src/components/media-upload/index.js | 36 +++++------ .../media-utils/src/utils/upload-media.js | 64 +++++++++---------- 5 files changed, 47 insertions(+), 60 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 34def1b5a413d..b2115bd7f185c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -82,6 +82,7 @@ module.exports = { 'chunk', 'clamp', 'concat', + 'defaults', 'defaultTo', 'differenceWith', 'dropRight', diff --git a/package-lock.json b/package-lock.json index f8e9c4aba0abf..3773f22a631b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17496,8 +17496,7 @@ "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/blob": "file:packages/blob", "@wordpress/element": "file:packages/element", - "@wordpress/i18n": "file:packages/i18n", - "lodash": "^4.17.21" + "@wordpress/i18n": "file:packages/i18n" } }, "@wordpress/notices": { diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json index 6e64e57200690..7ace74a4ab72f 100644 --- a/packages/media-utils/package.json +++ b/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" diff --git a/packages/media-utils/src/components/media-upload/index.js b/packages/media-utils/src/components/media-upload/index.js index 1e24764a996b4..03343e8b1cbe9 100644 --- a/packages/media-utils/src/components/media-upload/index.js +++ b/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,9 +381,7 @@ 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; @@ -394,17 +389,16 @@ class MediaUpload extends Component { 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 () { diff --git a/packages/media-utils/src/utils/upload-media.js b/packages/media-utils/src/utils/upload-media.js index 3232ee065c95d..e3c9b95d5c25c 100644 --- a/packages/media-utils/src/utils/upload-media.js +++ b/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,9 +67,9 @@ 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. @@ -89,20 +77,20 @@ export async function uploadMedia( { 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,