`@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/url@3.5.1.

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.