@wordpress/api-fetch package has lodash as a dependency

[fabiankaegy]

The @wordpress/api-fetch package is super useful even outside of the context of the editor. In theory it would be a great package to use on the frontend of any WordPress site to interact with the WordPress Rest API.

Currently however it relies on the @wordpress/url package which intern has a dependency on lodash. Because of that the size of the @wordpress/api-fetch npm package is 230 kB making it un suitable for the sage on the frontend.

[gziolo]

There is a more high-level issue that opened a long time ago: #17025. I think there is a common agreement that we could replace lodash usage with native API wherever applicable. Should we consolidate the issue with the other one and close this one as duplicate?

[gziolo]

There is also #16938 that is still open for @wordpress/element so it might need some more thinking on how we approach this growing inconvenience.

[fabiankaegy]

For reference, this here is the only instance of lodash being used in the @wordpress/url package:

gutenberg/packages/url/src/clean-for-slug.js

Line 4 in 71a63fd

import { deburr, trim } from 'lodash';

[gziolo]

String.prototype.trim() is a simple one to use as replacement.

deburr is a more tricky one.

[Mamaduka]

We could probably have to re-implement remove_accents in JS and get rid of deburr.

Few folks also pointed out that deburr doesn't handle accent removal correctly.

[fabiankaegy]

@Mamaduka I didn't know that PHP function existed. If we were to port it to JS where should it live? 🤔 Would it be it's own @wordpress/ package or should it live under compose / i18n ?

[gziolo]

Do we use it outside of @wordpress/url? Otherwise, it can be internal for now.

[fabiankaegy]

deburr seems to be used in 9 files across the entire repo: https://github.com/WordPress/gutenberg/search?q=deburr

gutenberg/packages/components/src/navigation/utils.js

Line 4 in 3da717b

import { deburr } from 'lodash';

gutenberg/packages/url/src/clean-for-slug.js

Line 4 in ebb4a8a

import { deburr, trim } from 'lodash';

gutenberg/packages/editor/src/components/page-attributes/parent.js

Line 11 in 9580b45

deburr,

gutenberg/packages/block-library/src/heading/autogenerate-anchors.js

Line 4 in f885488

import { deburr, trim } from 'lodash';

gutenberg/packages/components/src/autocomplete/get-default-use-items.js

Line 4 in d591591

import { debounce, deburr, escapeRegExp } from 'lodash';

gutenberg/packages/components/src/combobox-control/index.js

Line 5 in d591591

import { noop, deburr } from 'lodash';

gutenberg/packages/block-editor/src/components/inserter/search-items.js

Line 4 in d591591

import { deburr, differenceWith, find, words } from 'lodash';

gutenberg/packages/blocks/src/store/selectors.js

Line 6 in 4ba530c

deburr,

gutenberg/packages/components/src/autocomplete/index.js

Line 4 in bd514b8

import { escapeRegExp, find, deburr } from 'lodash';

But the usage in the url package is the only one I would consider one in a public package meant for consumption outside of the editor

[Mamaduka]

We could potentially replace most of them with updated cleanForSlug.

[gziolo]

We could potentially replace most of them with updated cleanForSlug.

The question would be if making @wordpress/url a dependency makes sense in all cases.

[Mamaduka]

The question would be if making @wordpress/url a dependency makes sense in all cases.

Probably not, but we don't need to replace them all. We can start with cases where strings are used for slugs.

[gziolo]

@wordpress/url alone is 3.78 kB without lodash according to https://bundlephobia.com/package/@wordpress/[email protected].

Probably not, but we don't need to replace them all. We can start with cases where strings are used for slugs.

I think that would be a good first step. We can decide later whether it makes sense to extract to its own package.

[tyxla]

I'm planning to start working incrementally on removing Lodash completely from the repository. Usage is not so high, and the bundle size impact will be huge for some of the packages when used externally.

[fabiankaegy]

@tyxla That is awesome to hear <3

The biggest hurdle for me when looking into removing lodash from the @wordpress/url package was that I couldn't find a great replacement for the deburr function.

If you find a way to remove that dependency that will have a huge impact on the ability to use various @wordpress/ packages on the frontend of a site.

[tyxla]

Good to know @fabiankaegy 👍 We'll most likely end up having to introduce either a few new utility functions or reusing some well-established implementations that are broadly adopted by the community. deburr is definitely one of those, but throttle and debounce also immediately come to mind when talking about this. We'll get to them all eventually.

[fabiankaegy]

I took a shot at #39495 (comment) but failed because I don't really have a good enough understanding of the underlying text encoding.

[tyxla]

Interesting. Luckily, a few years ago I did implement an almost exact replica of the WP core remove_accents() for a side project: remove-accents.

It seems to be used quite extensively, and I couldn't be happier to spend more time maintaining it than if it was used in Gutenberg. It could be one way to get rid of deburr() usage, even if it meant releasing a new version with some improvements.