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

fix: changed from lodash to es-toolkit #18162

Merged
merged 19 commits into from
Dec 16, 2024

Conversation

guidari
Copy link
Contributor

@guidari guidari commented Nov 26, 2024

Closes #17731

We are moving from lodash to es-toolkit which is a modern library. That change will solve security issues we were having in lodash and also it will lead to a smaller final bundle and better performance.

Replaced a few lodash code to use pure JavaScript. Here it is a Stackblitz with the code changes examples to show that it works.

Changelog

New

  • Added es-toolkit dependency

Changed

  • Removed lodash.findlast to use pure Javascript code
  • Removed lodash.omit to use pure Javascript code

Removed

  • Removed lodash dependencies

Testing / Reviewing

  • Build should work
  • CI should pass

@guidari guidari requested a review from a team as a code owner November 26, 2024 17:25
Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 3f5b5d7
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-web-components/deploys/67602a3adaa4530008662554
😎 Deploy Preview https://deploy-preview-18162--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 3f5b5d7
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/67602a3add7ecd000847d19d
😎 Deploy Preview https://deploy-preview-18162--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 3f5b5d7
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/67602a3a03db3500087d8528
😎 Deploy Preview https://deploy-preview-18162--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@guidari guidari changed the title fix: changed from lodash to lodash-es fix: changed from lodash to es-toolkit Nov 28, 2024
@@ -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!

Copy link
Member

@ariellalgilmore ariellalgilmore left a comment

Choose a reason for hiding this comment

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

Great! LGTM!

@ariellalgilmore
Copy link
Member

looks like just need to resolve conflicts

Copy link

codecov bot commented Dec 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.31%. Comparing base (9333db9) to head (3f5b5d7).
Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main   #18162   +/-   ##
=======================================
  Coverage   84.31%   84.31%           
=======================================
  Files         404      404           
  Lines       14352    14353    +1     
  Branches     4655     4601   -54     
=======================================
+ Hits        12101    12102    +1     
- Misses       2089     2090    +1     
+ Partials      162      161    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@guidari guidari added this pull request to the merge queue Dec 16, 2024
Merged via the queue into carbon-design-system:main with commit 4cf18d3 Dec 16, 2024
37 checks passed
@guidari guidari deleted the 17731-lodash branch December 16, 2024 14:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request]: Drop per-method lodash dependencies
4 participants