Pre-compile localized strings and remove intl-messageformat #3294
Conversation
|
Build successful! 🎉 |
…s at the same time
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Discussed with @dannify about how to handle the breaking change. We would like to avoid bumping
Alternative would be to only bump a major on |
|
Build successful! 🎉 |
…ormat # Conflicts: # packages/@react-aria/calendar/src/useCalendarBase.ts # packages/@react-aria/calendar/src/useCalendarCell.ts # packages/@react-aria/datepicker/src/useDateRangePicker.ts # packages/@react-aria/i18n/src/index.ts
|
Build successful! 🎉 |
|
Build successful! 🎉 |
There was a problem hiding this comment.
Heads up, Field had an instance of useMessageFormatter that was added recently so I went ahead and updated that. Other than that, I assume we'll be updating internationalized.mdx to point to useLocalizedStringFormatter and adding a deprecation notice to useMessageFormatter.mdx after this goes in?
|
Build successful! 🎉 |
|
Yes, will update the docs separately. |
4 participants
This reduces our bundle size by ~40 KB minified, or around ~11 KB min+gzip by removing the intl-messageformat dependency. This is done by pre-compiling messages during the build rather than parsing them at runtime. Basically, a message like this:
"{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}."is compiled to a function like this, which returns a template literal:
As you can see, the
MessageFormatterclass includes some helpers used by the messages, such as plural formatting.This example is kinda advanced, but in many cases, there are only basic interpolations without fancy formatting.
And if there are no interpolations at all, then only a string is returned rather than a function.
This is a breaking change to
@internationalized/messageand therefore@react-aria/i18nsince the input message format changed. We will need to decide how to handle this, especially with the mono package.