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

Jump to bottom

fix: changed from lodash to es-toolkit #18162

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

fix: changed from lodash to es-toolkit #18162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7807edf
fix: changed from lodash to lodash-es
guidari Nov 26, 2024
db3fcc8
fix: fixed import
guidari Nov 26, 2024
af3966c
fix: removed console log
guidari Nov 26, 2024
bc63e12
test: added transform to the jest.e2e.config.js as well
guidari Nov 26, 2024
07aa8b2
fix: fixed examples folders to add type module
guidari Nov 26, 2024
4bc019c
fix: roll back example folder
guidari Nov 26, 2024
0eaa706
Merge branch 'main' into 17731-lodash
guidari Nov 26, 2024
7ccbffc
Merge branch 'main' into 17731-lodash
guidari Nov 27, 2024
029bd94
fix: removed omit from lodash to use pure JS
guidari Nov 27, 2024
a76ec07
fix: added es-toolkit in throttle method in Slider
guidari Nov 28, 2024
240cb7c
feat: added es-toolkit for debounce as well
guidari Nov 28, 2024
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
Binary file added .yarn/cache/es-toolkit-npm-1.27.0-cc8e376cdb-637fb282c1.zip
View file
Open in desktop
Binary file not shown.
Binary file removed .yarn/cache/lodash.omit-npm-4.5.0-786639f9a0-f5c67cd1df.zip
View file
Open in desktop
Binary file not shown.
Binary file removed .yarn/cache/lodash.throttle-npm-4.1.1-856641af92-9be9fb2ffd.zip
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = {
'!**/*.stories.js',
'!**/*-test.e2e.js',
],
transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es)'],
moduleNameMapper: {
// This is a temporary workaround from moving to Jest v28. In this update,
// certain dependencies are only providing ESM through exports and so we use
Expand Down
4 changes: 1 addition & 3 deletions packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,9 @@
"classnames": "2.5.1",
"copy-to-clipboard": "^3.3.1",
"downshift": "9.0.8",
"es-toolkit": "^1.27.0",
"flatpickr": "4.6.13",
"invariant": "^2.2.3",
"lodash.debounce": "^4.0.8",
"lodash.omit": "^4.5.0",
"lodash.throttle": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.2.2",
"react-is": "^18.2.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/ComposedModal/ComposedModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
import { Layer } from '../Layer';
import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
import { ModalFooter, type ModalFooterProps } from './ModalFooter';
import debounce from 'lodash.debounce';
import { debounce } from 'es-toolkit/compat';
import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
import mergeRefs from '../../tools/mergeRefs';
import cx from 'classnames';
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Copy/Copy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import React, {
MouseEventHandler,
PropsWithChildren,
} from 'react';
import debounce from 'lodash.debounce';
import { debounce } from 'es-toolkit/compat';
import classnames from 'classnames';
import { composeEventHandlers } from '../../tools/events';
import { usePrefix } from '../../internal/usePrefix';
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import debounce from 'lodash.debounce';
import { debounce } from 'es-toolkit/compat';
import { usePrefix } from '../../internal/usePrefix';
import { TableContext } from './TableContext';
import { useWindowEvent } from '../../internal/useEvent';
Expand Down
26 changes: 14 additions & 12 deletions packages/react/src/components/DataTable/TableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@

import React from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash.omit';
import cx from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { ReactAttr } from '../../types/common';
Expand Down Expand Up @@ -43,17 +42,20 @@ const TableRow = (props: TableRowProps) => {
[`${prefix}--data-table--slug-row`]: rowHasSlug,
});

const cleanProps = {
...omit(props, [
'ariaLabel',
'aria-label',
'aria-controls',
'onExpand',
'isExpanded',
'isSelected',
]),
className: className || undefined,
};
const {
ariaLabel,
'aria-label': ariaLabelAlt,
'aria-controls': ariaControls,
onExpand,
isExpanded,
isSelected,
...cleanProps
} = props as any;

if (className) {
cleanProps.className = className;
}

return <tr {...cleanProps} />;
};

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import wrapFocus, {
wrapFocusWithoutSentinels,
elementOrParentIsFloatingMenu,
} from '../../internal/wrapFocus';
import debounce from 'lodash.debounce';
import { debounce } from 'es-toolkit/compat';
import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
import { useId } from '../../internal/useId';
import { usePrefix } from '../../internal/usePrefix';
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import React, {
import PropTypes from 'prop-types';

import classNames from 'classnames';
import throttle from 'lodash.throttle';
import { throttle } from 'es-toolkit/compat';
Copy link
Contributor

Choose a reason for hiding this comment

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

Hey Gui, Thanks for the changes, its Awesome!

I tried to read about throttle from es-toolkit and found that it will accept only 2 parameters like throttle(func, wait) while for lodash it's like throttle(func, wait, options)

In this file Slider.tsx we were using throttle from lodash as

onDrag = throttle(this._onDrag, EVENT_THROTTLE, {
   leading: true,
   trailing: false,
 });

Which means the function this._onDrag is executed immediately when the event is triggered , but it will not be executed again at the end of the throttling interval.

Can you please make sure to change the code as well as per es-toolkit to achieve the same functionality.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hey Preeti!
I tested with lodash and es-toolkit and the behaviour is the same. We are using the es-toolkit/compat that has full compatibility with lodash, so we don't have to change the code. All es-toolkit functions have a "compat" version to ensure we don’t need to change anything in our code.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh yes, the link is saying it supports leading and trailing options as well. Thanks!


import * as keys from '../../internal/keyboard/keys';
import { matches } from '../../internal/keyboard';
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { ChevronLeft, ChevronRight } from '@carbon/icons-react';
import { breakpoints } from '@carbon/layout';
import cx from 'classnames';
import debounce from 'lodash.debounce';
import { debounce } from 'es-toolkit/compat';
import PropTypes from 'prop-types';
import React, {
useCallback,
Expand Down
30 changes: 13 additions & 17 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2025,14 +2025,12 @@ __metadata:
css-loader: "npm:^7.0.0"
downshift: "npm:9.0.8"
enquirer: "npm:^2.3.6"
es-toolkit: "npm:^1.27.0"
fast-glob: "npm:^3.2.7"
flatpickr: "npm:4.6.13"
fs-extra: "npm:^11.0.0"
html-webpack-plugin: "npm:^5.5.0"
invariant: "npm:^2.2.3"
lodash.debounce: "npm:^4.0.8"
lodash.omit: "npm:^4.5.0"
lodash.throttle: "npm:^4.1.1"
mini-css-extract-plugin: "npm:^2.4.5"
postcss: "npm:^8.4.5"
postcss-loader: "npm:^8.0.0"
Expand Down Expand Up @@ -12520,6 +12518,18 @@ __metadata:
languageName: node
linkType: hard

"es-toolkit@npm:^1.27.0":
version: 1.27.0
resolution: "es-toolkit@npm:1.27.0"
dependenciesMeta:
"@trivago/[email protected]":
unplugged: true
[email protected]:
unplugged: true
checksum: 10/637fb282c17614143aa185f20b44a7b113157b103a92e20d7c483da24170710cf01a5f93285737e33364b03f773765bc4276ccbbfc65702387173c34ec7a259b
languageName: node
linkType: hard

"es6-denodeify@npm:^0.1.0":
version: 0.1.5
resolution: "es6-denodeify@npm:0.1.5"
Expand Down Expand Up @@ -18748,13 +18758,6 @@ __metadata:
languageName: node
linkType: hard

"lodash.omit@npm:^4.5.0":
version: 4.5.0
resolution: "lodash.omit@npm:4.5.0"
checksum: 10/f5c67cd1df11f1275662060febb629a4d4e7b547c4bea66454508b5e6096162c2af882aab1ff8cb5dcf2b328f22252416de6ca9c1334588f6310edfac525e511
languageName: node
linkType: hard

"lodash.snakecase@npm:^4.1.1":
version: 4.1.1
resolution: "lodash.snakecase@npm:4.1.1"
Expand Down Expand Up @@ -18797,13 +18800,6 @@ __metadata:
languageName: node
linkType: hard

"lodash.throttle@npm:^4.1.1":
version: 4.1.1
resolution: "lodash.throttle@npm:4.1.1"
checksum: 10/9be9fb2ffd686c20543167883305542f4564062a5f712a40e8c6f2f0d9fd8254a6e9d801c2470b1b24e0cdf2ae83c1277b55aa0fb4799a2db6daf545f53820e1
languageName: node
linkType: hard

"lodash.truncate@npm:^4.4.2":
version: 4.4.2
resolution: "lodash.truncate@npm:4.4.2"
Expand Down
Loading