Switch to graphemer to split strings

[sandhose]

I had a problem with consuming the ESM module in vitest.
The resulting bundle had a import { split } from "lodash", which does not work because lodash is not an ESM module.
There is an alternative lodash-es which is an ESM module, but then using that would break some CJS environments.

lodash's split function notably doesn't handle well some emoji graphemes, so instead this switches to graphemer

fixes element-hq/compound#196

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	d7afdea
Status:	✅  Deploy successful!
Preview URL:	https://67502f1d.compound-web.pages.dev
Branch Preview URL:	https://quenting-lodash-es.compound-web.pages.dev

View logs

[t3chguy]

Lodash currently makes up a not insignificant amount of the react SDK main bundle. This sounds like it'll double that.

[t3chguy]

Also worth pointing out EW hit bugs in Lodash's split grapheme splitting, we had to switch to graphemer

[t3chguy]

See matrix-org/matrix-react-sdk#10976 + matrix-org/matrix-react-sdk#11037

[t3chguy]

beaugunderson/emoji-aware#25 & lodash/lodash#5652 being related issues about this bug

[t3chguy]

Have opened element-hq/compound#196 to track this

[sandhose]

Not that much, because this tree-shakes correctly, so only the methods we use (in this case, _.split) are included in the bundle.

Library size with lodash-es not marked as external:

dist/style.css        20.06 kB │ gzip: 3.39 kB
dist/compound-web.js  21.02 kB │ gzip: 6.36 kB
dist/compound-web.cjs  16.59 kB │ gzip: 5.71 kB

and with it marked as external:

dist/style.css        20.06 kB │ gzip: 3.39 kB
dist/compound-web.js  16.40 kB │ gzip: 4.68 kB
dist/compound-web.cjs  13.03 kB │ gzip: 4.19 kB

So there is a 1.5kB difference gzipped

[t3chguy]

So there is a 1.5kB difference gzipped

Otherwise known as 36%...

[sandhose]

Alright fair, switching to graphemer then

[t3chguy]

bonus points for the flag test