** Disclaimer** This information might be inaccurate, due to it being generated automatically

Implementation Steps

1. Replace lodash/camelCase:

   • Use a custom function or a library like change-case.
   • Example: import { camelCase } from 'change-case';

2. Replace lodash/cloneDeep:

   • Use structuredClone or a custom deep clone function.
   • Example: const clone = structuredClone(obj);

3. Replace lodash/countBy:

   • Use Array.prototype.reduce to count occurrences.
   • Example: const countBy = (arr, fn) => arr.reduce((acc, val) => { const key = fn(val); acc[key] = (acc[key] || 0) + 1; return acc; }, {});

4. Replace lodash/debounce:

   • Use a custom debounce function.
   • Example: const debounce = (func, wait) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; };

5. Replace lodash/isEqual:

   • Use a deep equality check function.
   • Example: const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

6. Replace lodash/isPlainObject:

   • Use typeof and Object.prototype.toString.
   • Example: const isPlainObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]';

7. Replace lodash/kebabCase:

   • Use a custom function or a library like change-case.
   • Example: import { paramCase } from 'change-case';

8. Replace lodash/mapKeys:

   • Use Object.entries and Array.prototype.reduce.
   • Example: const mapKeys = (obj, fn) => Object.entries(obj).reduce((acc, [key, value]) => { acc[fn(key)] = value; return acc; }, {});

9. Replace lodash/mapValues:

   • Use Object.entries and Array.prototype.reduce.
   • Example: const mapValues = (obj, fn) => Object.entries(obj).reduce((acc, [key, value]) => { acc[key] = fn(value); return acc; }, {});

10. Replace lodash/merge and lodash/mergeWith:

    • Use Object.assign or a custom deep merge function.
    • Example: const merge = (target, ...sources) => sources.reduce((acc, src) => { Object.keys(src).forEach(key => { if (typeof src[key] === 'object' && src[key] !== null) { if (!acc[key]) acc[key] = {}; merge(acc[key], src[key]); } else { acc[key] = src[key]; } }); return acc; }, target);

11. Replace lodash/pick and lodash/pickBy:

    • Use Object.keys and Array.prototype.reduce.
    • Example: const pick = (obj, keys) => keys.reduce((acc, key) => { if (obj.hasOwnProperty(key)) acc[key] = obj[key]; return acc; }, {});

12. Replace lodash/startCase:

    • Use a custom function or a library like change-case.
    • Example: import { startCase } from 'change-case';

13. Replace lodash/throttle:

    • Use a custom throttle function.
    • Example: const throttle = (func, limit) => { let inThrottle; return (...args) => { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; };

14. Replace lodash/uniq:

    • Use Array.prototype.filter and Set.
    • Example: const uniq = (arr) => [...new Set(arr)];

15. Replace lodash/upperFirst:

    • Use a custom function.
    • Example: const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);

Code References

• Refer to /code/lib/cli/src/automigrate/helpers for utility functions that might be useful.
• Update the relevant files in /code/lib/cli/src/automigrate/fixes to replace Lodash functions.

Testing

• Ensure all unit tests pass without modifications to the tests themselves, except for changing the way Lodash functionalities might get mocked.
• Measure bundle size reduction using current bundle analysis tools.

References

/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts
/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts
/code/lib/cli/src/automigrate/fixes/prompt-remove-react.test.ts
/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts
/code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts
/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts
/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts
/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts
/code/lib/cli/src/automigrate
/code/lib/cli/src/automigrate/helpers
/code/core/src/builder-manager/utils/framework.ts
/code/core/src/builder-manager/utils/framework.test.ts
/code/core/src/telemetry/get-monorepo-type.test.ts
/code/lib/cli/src/automigrate/index.test.ts

Hello,
I am new here so I might ask some silly questions.

Which bundle exactly is it preferable to analyze? manager-bundle, common-manager-bundle or globals-runtime?
Is it possible to contribute gradually, by refactoring one function in one PR?

Thank you.

Can deepmerge-ts be a potential candidate for replacing merge?

It possibly can replace mergeWith with deepmergeCustom as well.

es-toolkit could be considered as an alternative to lodash - https://github.com/toss/es-toolkit

Hello, I am new here so I might ask some silly questions.

Which bundle exactly is it preferable to analyze? manager-bundle, common-manager-bundle or globals-runtime? Is it possible to contribute gradually, by refactoring one function in one PR?

Thank you.

The biggest impact would be to get rid of lodash in @storybook/core. Due to how the sub packages of @storybook/core are bundled, lodash occurs several times in the built output.

Also feel free to contribute one PR at a time to remove/replace single occurrences of lodash calls.

As soon as you open a PR, you will see some benchmark stats about bundle size.

Can deepmerge-ts be a potential candidate for replacing merge?

It possibly can replace mergeWith with deepmergeCustom as well.

Would replacing merge from lodash with deepmerge-ts have a positive impact on bundle size? We have some benchmarking in place as soon as you create a PR. The manager's and preview's bundle size will be reported. So just open a PR to figure out its impact.

es-toolkit could be considered as an alternative to lodash - https://github.com/toss/es-toolkit

Seems to be pretty interesting! @xeho91, @tanel-terras, @stolbikova do you have any experience or opinion about es-toolkit?

I analyzed es-toolkit, and it seems it doesn't cover the following lodash functions (yet):

• lodash/cloneDeep (PR available)
• lodash/isPlainObject
• lodash/mapKeys
• lodash/mapValues
• lodash/merge
• lodash/mergeWith

I think to split the work so that multiple contributors could contribute, we could do the following:

Workstream: Introduce es-toolkit/compat

• Let's introduce https://es-toolkit.slash.page/compatibility.html to have maximum compatibility with lodash, as es-toolkit/compat is a compatibility layer that bridges the gap between the two libraries.
• Let's replace all replaceable lodash functions by es-toolkit
• In the last step lets try to migrate away from the compat layer and use es-toolkit "purely"

Workstream: Find alternatives for the functions, which are not replaceable

• The aforementioned functions like lodash/cloneDeep need alternatives. Ideally, we should analyze the code, understand its context, and figure out how we can best replace its usage.
• Another approach would be to contribute to es-toolkit directly. My feeling says, though, that this might take a bit of time.

Can deepmerge-ts be a potential candidate for replacing merge?
It possibly can replace mergeWith with deepmergeCustom as well.

Would replacing merge from lodash with deepmerge-ts have a positive impact on bundle size? We have some benchmarking in place as soon as you create a PR. The manager's and preview's bundle size will be reported. So just open a PR to figure out its impact.

Are there any set boundaries for maximum positive impact on the bundle size?

Is very minimal package, 5,8kB and tree-shakeable: https://bundlephobia.com/package/[email protected]

And also, not 'polluted', 0 dependencies: https://npmgraph.js.org/?q=deepmerge-ts

PR for preview: #28663

es-toolkit could be considered as an alternative to lodash - https://github.com/toss/es-toolkit

Seems to be pretty interesting! @xeho91, @tanel-terras, @stolbikova do you have any experience or opinion about es-toolkit?

Honestly, no strong opinion.

I definitely would favour this more over lodash, because how well maintained, and even typed this collection is. Benchmarks included as well, awesome to see how much possible positive impact we could get from replacing.

You already observed that it cannot replace all of the existing lodash snippets, but is a good start, and definitely worth a try/effort. 👍

Hello! I'm the maintainer of es-toolkit.

Just a quick update to let you know that we've added several new functions to es-toolkit, including:

• cloneDeep
• isPlainObject
• mapKeys
• mapValues
• merge
• mergeWith

Please note that there are some differences between es-toolkit and lodash, designed to optimize bundle size and runtime performance. For example:

• es-toolkit does not clone values like Object(true) or arguments in a special way.
• es-toolkit does not check for Symbol.toStringTag.
• es-toolkit does not support special property syntax for object mapping, such as mapKeys(arr, 'property'). Instead, use mapKeys(arr, x => x.property).
• es-toolkit does not support merging multiple objects at once with merge(obj1, obj2, obj3) or mergeWith(obj1, obj2, obj3). You can use merge or mergeWith iteratively instead.

In the meantime, if you need full compatibility with lodash, you might want to use es-toolkit/compat, which fully supports and tests all behaviors from lodash.

Hi @raon0211!
That's amazing. Thank you for letting us know.