Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lodash: Refactor away from _.words() #42467

Merged
merged 1 commit into from
Aug 10, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ module.exports = {
'uniqueId',
'uniqWith',
'values',
'words',
'zip',
],
message:
Expand Down
2 changes: 2 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/block-editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"@wordpress/url": "file:../url",
"@wordpress/warning": "file:../warning",
"@wordpress/wordcount": "file:../wordcount",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"colord": "^2.7.0",
"diff": "^4.0.2",
Expand All @@ -68,6 +69,7 @@
"react-autosize-textarea": "^7.1.0",
"react-easy-crop": "^3.0.0",
"rememo": "^4.0.0",
"remove-accents": "^0.4.2",
"traverse": "^0.6.6"
},
"peerDependencies": {
Expand Down
22 changes: 17 additions & 5 deletions packages/block-editor/src/components/inserter/search-items.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
/**
* External dependencies
*/
import { deburr, find, words } from 'lodash';
import { noCase } from 'change-case';
Copy link
Contributor

@talldan talldan Jul 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noCase could be overkill given the string being operated on is human search text. Seems like the main thing it does is insert spaces into camel cased text, but I don't expect humans will write that way (even those of us that are coders 😄).

edit - ah, I missed that this is also used on the block name, github had collapsed that part of the code, you can ignore this comment!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feedback - FWIW _.words() is pretty costly, and while I haven't directly compared the costs with noCase(), I'm almost certain that noCase() will be cheaper. Can thoroughly compare if you have doubts, though.

Did you have any other reservations with the changes suggested in this PR, @talldan?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're all good. This was just a passing comment while I was reviewing #42459, which discussed this file.

import removeAccents from 'remove-accents';
import { find } from 'lodash';

// Default search helpers.
const defaultGetName = ( item ) => item.name || '';
Expand All @@ -21,7 +23,7 @@ const defaultGetCollection = () => null;
function normalizeSearchInput( input = '' ) {
// Disregard diacritics.
// Input: "média"
input = deburr( input );
input = removeAccents( input );

// Accommodate leading slash, matching autocomplete expectations.
// Input: "/media"
Expand All @@ -34,6 +36,17 @@ function normalizeSearchInput( input = '' ) {
return input;
}

/**
* Extracts words from an input string.
*
* @param {string} input The input string.
*
* @return {Array} Words, extracted from the input string.
*/
function extractWords( input = '' ) {
return noCase( input ).split( ' ' ).filter( Boolean );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I would prefer .filter( s => !!s ), .filter( s => Boolean( s ) ), or .filter( s => s !== '' ), as I find them much more readable, but I concede that .filter( Boolean ) usage is pretty widespread, and has probably become an idiom at this point.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we're doing that in quite a bunch of places in Gutenberg already, and it's already become idiomatic in this codebase IMHO.

}

/**
* Converts the search term into a list of normalized terms.
*
Expand All @@ -42,8 +55,7 @@ function normalizeSearchInput( input = '' ) {
* @return {string[]} The normalized list of search terms.
*/
export const getNormalizedSearchTerms = ( input = '' ) => {
// Extract words.
return words( normalizeSearchInput( input ) );
return extractWords( normalizeSearchInput( input ) );
};

const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
Expand Down Expand Up @@ -150,7 +162,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
category,
collection,
].join( ' ' );
const normalizedSearchTerms = words( normalizedSearchInput );
const normalizedSearchTerms = extractWords( normalizedSearchInput );
const unmatchedTerms = removeMatchingTerms(
normalizedSearchTerms,
terms
Expand Down