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.

Sign up for GitHub

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 _.times() #43374

Merged
merged 2 commits into from
Aug 18, 2022
Merged

Lodash: Refactor away from _.times() #43374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1bb3332
Lodash: Refactor away from _.times()
tyxla Aug 18, 2022
6bee883
Add components changelog
tyxla Aug 18, 2022
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ module.exports = {
'sum',
'sumBy',
'take',
'times',
'toString',
'trim',
'truncate',
Expand Down
11 changes: 3 additions & 8 deletions packages/block-directory/src/components/block-ratings/stars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { times } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -24,23 +19,23 @@ function Stars( { rating } ) {
stars
) }
>
{ times( fullStarCount, ( i ) => (
{ Array.from( { length: fullStarCount } ).map( ( _, i ) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

Huh. Array.from( { length: n } ) is a new one for me; I usually do Array( n ).fill( 0 ) or so, .fill being there to avoid the empty array issue. I suppose this is more readable. Very interesting.

This will even silently produce an empty array (instead of throwing an exception) for invalid array lengths, such as fractional numbers, thus matching the behaviour of _.times(). Pretty impressive 👍

<Icon
key={ `full_stars_${ i }` }
className="block-directory-block-ratings__star-full"
icon={ starFilled }
size={ 16 }
/>
) ) }
{ times( halfStarCount, ( i ) => (
{ Array.from( { length: halfStarCount } ).map( ( _, i ) => (
<Icon
key={ `half_stars_${ i }` }
className="block-directory-block-ratings__star-half-full"
icon={ starHalf }
size={ 16 }
/>
) ) }
{ times( emptyStarCount, ( i ) => (
{ Array.from( { length: emptyStarCount } ).map( ( _, i ) => (
<Icon
key={ `empty_stars_${ i }` }
className="block-directory-block-ratings__star-empty"
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/categories/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { times, unescape } from 'lodash';
import { unescape } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -114,7 +114,7 @@ export default function CategoriesEdit( {
const childCategories = getCategoriesList( id );
return [
<option key={ id }>
{ times( level * 3, () => '\xa0' ) }
{ Array.from( { length: level * 3 } ).map( () => '\xa0' ) }
{ renderCategoryName( name ) }
{ showPostCounts && ` (${ count })` }
</option>,
Expand Down
10 changes: 7 additions & 3 deletions packages/block-library/src/columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { get, times } from 'lodash';
import { get } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -183,7 +183,9 @@ const ColumnsEditContainerWrapper = withDispatch(

innerBlocks = [
...getMappedColumnWidths( innerBlocks, widths ),
...times( newColumns - previousColumns, () => {
...Array.from( {
length: newColumns - previousColumns,
} ).map( () => {
return createBlock( 'core/column', {
width: `${ newColumnWidth }%`,
} );
Expand All @@ -192,7 +194,9 @@ const ColumnsEditContainerWrapper = withDispatch(
} else if ( isAddingColumn ) {
innerBlocks = [
...innerBlocks,
...times( newColumns - previousColumns, () => {
...Array.from( {
length: newColumns - previousColumns,
} ).map( () => {
return createBlock( 'core/column' );
} ),
];
Expand Down
10 changes: 7 additions & 3 deletions packages/block-library/src/columns/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { View, Dimensions } from 'react-native';
import { times, map } from 'lodash';
import { map } from 'lodash';
/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -374,7 +374,9 @@ const ColumnsEditContainerWrapper = withDispatch(

innerBlocks = [
...getMappedColumnWidths( innerBlocks, widths ),
...times( newColumns - previousColumns, () => {
...Array.from( {
length: newColumns - previousColumns,
} ).map( () => {
return createBlock( 'core/column', {
width: `${ newColumnWidth }%`,
verticalAlignment,
Expand All @@ -384,7 +386,9 @@ const ColumnsEditContainerWrapper = withDispatch(
} else if ( isAddingColumn ) {
innerBlocks = [
...innerBlocks,
...times( newColumns - previousColumns, () => {
...Array.from( {
length: newColumns - previousColumns,
} ).map( () => {
return createBlock( 'core/column', {
verticalAlignment,
} );
Expand Down
40 changes: 21 additions & 19 deletions packages/block-library/src/table/state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { times, get, mapValues, every, pick } from 'lodash';
import { get, mapValues, every, pick } from 'lodash';

const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];

Expand All @@ -16,8 +16,8 @@ const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
*/
export function createTable( { rowCount, columnCount } ) {
return {
body: times( rowCount, () => ( {
cells: times( columnCount, () => ( {
body: Array.from( { length: rowCount } ).map( () => ( {
cells: Array.from( { length: columnCount } ).map( () => ( {
content: '',
tag: 'td',
} ) ),
Expand Down Expand Up @@ -167,23 +167,25 @@ export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
[ sectionName ]: [
...state[ sectionName ].slice( 0, rowIndex ),
{
cells: times( cellCount, ( index ) => {
const firstCellInColumn = get(
firstRow,
[ 'cells', index ],
{}
);
const inheritedAttributes = pick(
firstCellInColumn,
INHERITED_COLUMN_ATTRIBUTES
);
cells: Array.from( { length: cellCount } ).map(
( _, index ) => {
const firstCellInColumn = get(
firstRow,
[ 'cells', index ],
{}
);
const inheritedAttributes = pick(
firstCellInColumn,
INHERITED_COLUMN_ATTRIBUTES
);

return {
...inheritedAttributes,
content: '',
tag: sectionName === 'head' ? 'th' : 'td',
};
} ),
return {
...inheritedAttributes,
content: '',
tag: sectionName === 'head' ? 'th' : 'td',
};
}
),
},
...state[ sectionName ].slice( rowIndex ),
],
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/text-columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { get, times } from 'lodash';
import { get } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
className: `align${ width } columns-${ columns }`,
} ) }
>
{ times( columns, ( index ) => {
{ Array.from( { length: columns } ).map( ( _, index ) => {
return (
<div
className="wp-block-column"
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/text-columns/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { get, times } from 'lodash';
import { get } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -16,7 +16,7 @@ export default function save( { attributes } ) {
className: `align${ width } columns-${ columns }`,
} ) }
>
{ times( columns, ( index ) => (
{ Array.from( { length: columns } ).map( ( _, index ) => (
<div className="wp-block-column" key={ `column-${ index }` }>
<RichText.Content
tagName="p"
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
- `FormTokenField`: Refactor away from `_.uniq()` ([#43330](https://github.com/WordPress/gutenberg/pull/43330/)).
- `contextConnect`: Refactor away from `_.uniq()` ([#43330](https://github.com/WordPress/gutenberg/pull/43330/)).
- `ColorPalette`: Refactor away from `_.uniq()` ([#43330](https://github.com/WordPress/gutenberg/pull/43330/)).
- `Guide`: Refactor away from `_.times()` ([#43374](https://github.com/WordPress/gutenberg/pull/43374/)).

## 19.17.0 (2022-08-10)

Expand Down
7 changes: 1 addition & 6 deletions packages/components/src/guide/page-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { times } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -24,7 +19,7 @@ export default function PageControl( {
className="components-guide__page-control"
aria-label={ __( 'Guide controls' ) }
>
{ times( numberOfPages, ( page ) => (
{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (
<li
key={ page }
// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
Expand Down
23 changes: 12 additions & 11 deletions packages/components/src/guide/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
import { times } from 'lodash';
import { text, number } from '@storybook/addon-knobs';

/**
Expand Down Expand Up @@ -41,16 +40,18 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
<Guide
{ ...props }
onFinish={ closeGuide }
pages={ times( numberOfPages, ( page ) => ( {
content: (
<>
<h1>
Page { page + 1 } of { numberOfPages }
</h1>
<p>{ loremIpsum }</p>
</>
),
} ) ) }
pages={ Array.from( { length: numberOfPages } ).map(
( _, page ) => ( {
content: (
<>
<h1>
Page { page + 1 } of { numberOfPages }
</h1>
<p>{ loremIpsum }</p>
</>
),
} )
) }
/>
) }
</>
Expand Down
6 changes: 3 additions & 3 deletions packages/e2e-tests/specs/performance/post-editor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,9 @@ describe( 'Post Editor Performance', () => {
await page.evaluate( () => {
const { createBlock } = window.wp.blocks;
const { dispatch } = window.wp.data;
const blocks = window.lodash
.times( 1000 )
.map( () => createBlock( 'core/paragraph' ) );
const blocks = Array.from( { length: 1000 } ).map( () =>
createBlock( 'core/paragraph' )
);
dispatch( 'core/block-editor' ).resetBlocks( blocks );
} );
const paragraphs = await page.$$( '.wp-block' );
Expand Down