New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade react-intl #24906

Merged

Gargron merged 15 commits into mastodon:main from renchap:upgrade-react-intl

May 31, 2023

Sponsor Member

renchap commented May 8, 2023 •

edited

See the various commits for details of what is does.

TODO:

Ensure that the Crowdin process still works
Replace manage:translations
Ensure polyfills are loaded correctly (https://formatjs.io/docs/polyfills)
See if we can replace <RelativeTimestamp> with something simpler based on react-intl components or helpers, but I am not sure what all the props do. status: should be in a future PR, not really needed right now
Correctly handle oc and sa locales (see below)
Ensure no errors occur when we try to load polyfills for a non-existing locale (oc). status: shoudPolyfillPluralRules has a built-in list of supported locales, and fallbacks to en, so all here.

Custom plural rules issue

Currently we are using sa and oc as custom plural rules, but they are not supported by the Javascript Intl API, resulting is this message on page load:
formatjs/intl Error MISSING_DATA] Missing locale data for locale: "oc" in Intl.NumberFormat. Using default locale: "en" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details

I am not sure how to properly handle this.

The browser is supposed to pick the best fit for the provided locale, so I guess we could just make FormatJS not print this message (using onError) for those 2 locales?

✅ Solution

oc is not supported in Chrome & Firefox, sa is not supported in Chrome, both are supported in Safari. According to the JS spec, the browsers should pick the best available locale here, so we can simply silence the message.

Fixes

In Google Chrome, times between midnight and 1AM are shown as, e.g. 24:17 instead of 00:17 due to an issue with react-intl #22760

renchap requested a review from Gargron

May 8, 2023 10:42

renchap force-pushed the upgrade-react-intl branch from a8a027d to b0707b7 Compare

May 8, 2023 10:45

Sponsor Member Author

renchap commented May 8, 2023

@Quenty31 I see you contributed to the Occitan translation before, do you have an opinion on the custom plural issue I described above?

Sponsor Member Author

renchap commented May 8, 2023 •

edited

Added polyfills for Intl. See the commit message for details. It relies on my polyfill PR, I will rebase once its merged.

github-actions bot added the rebase needed 🚧 label

Contributor

github-actions bot commented May 9, 2023

This pull request has merge conflicts that must be resolved before it can be merged.

renchap force-pushed the upgrade-react-intl branch from b373caf to 8757f0e Compare

May 9, 2023 07:30

github-actions bot removed the rebase needed 🚧 label

Contributor

github-actions bot commented May 9, 2023

This pull request has resolved merge conflicts and is ready for review.

github-actions bot added the rebase needed 🚧 label

Contributor

github-actions bot commented May 9, 2023

This pull request has merge conflicts that must be resolved before it can be merged.

renchap force-pushed the upgrade-react-intl branch from 8757f0e to 8000415 Compare

May 9, 2023 14:07

github-actions bot removed the rebase needed 🚧 label

Contributor

github-actions bot commented May 9, 2023

This pull request has resolved merge conflicts and is ready for review.

github-actions bot added the rebase needed 🚧 label

Contributor

github-actions bot commented May 9, 2023

This pull request has merge conflicts that must be resolved before it can be merged.

renchap force-pushed the upgrade-react-intl branch from 8000415 to 9b96d67 Compare

May 10, 2023 12:25

github-actions bot removed the rebase needed 🚧 label

Contributor

github-actions bot commented May 10, 2023

This pull request has resolved merge conflicts and is ready for review.

github-actions bot added the rebase needed 🚧 label

Contributor

github-actions bot commented May 11, 2023

This pull request has merge conflicts that must be resolved before it can be merged.

renchap force-pushed the upgrade-react-intl branch from 9b96d67 to 28bb148 Compare

May 14, 2023 16:11

github-actions bot removed the rebase needed 🚧 label

Contributor

github-actions bot commented May 14, 2023

This pull request has resolved merge conflicts and is ready for review.

renchap mentioned this pull request

Migrate from Webpacker to ViteJS #24981

Draft

12 tasks

Contributor

github-actions bot commented May 15, 2023

This pull request has merge conflicts that must be resolved before it can be merged.

github-actions bot added the rebase needed 🚧 label

renchap mentioned this pull request

Replace all date formatting to use native APIs #22850

Closed

renchap linked an issue

that may be closed by this pull request

In Google Chrome, times between midnight and 1AM are shown as, e.g. 24:17 instead of 00:17 due to an issue with react-intl #22760

Closed

Contributor

brawaru commented May 19, 2023

Doesn't seem that oc (Occitan) and sa (Sanskrit) languages have plural rules defined:

They maybe can contribute the rules to CLDR, otherwise this warning about locale data is probably OK to ignore. It shouldn't cause any issues and Intl should resort to using default locale rules.

renchap added 15 commits

May 31, 2023 11:35


          Upgrade to latest react-intl

90e03b0

- It now uses the browser's built-in plural rules, no longer need to load them
- Translations are loaded using dynamic import, this is more future-proof


          Upgrade various Intl packages

a7a9f4c


          Remove usage of FormattedHTMLMessage

65146e7

Its now supported by `FormattedMessage` using the Rich Text feature: https://formatjs.io/docs/react-intl/components#rich-text-formatting


          Add a new i18n:extract yarn command to extract localisation data

e839db2


          Fix loading of messages in public.jsx

66b15cc


          babel-plugin-formatjs needs to be in prod dependencies

a9864fb


          Properly polyfill Intl

f43f98f

The `intl` package has been deprecated, so let's replace it with FormatJS polyfills.

It also allows to properly load the locale data for every locale, before it always loaded `en` from the polyfill.
This created a Webpack chunk for every locale, but this is needed if we want per-locale loading.

I chose to only enable the polyfill for `Intl.PluralRules`, as the browser support for the others is good noaways. `RelativeTimeFormat` will need to use its own polyfill once we use it in the codebase, but as its not used for now, its commented.
I left the other polyfills commented out, if we notice they are really needed somehow.

The change in `tsconfig.json` is needed for dynamic imports, it has no impact for Webpack/Babel


          Only displays a warning when the browser does not advertise support f…

53e3d8f

…or our locale

For example, `oc` locale in Google Chrome

When this happens, the browser will select another "best" locale.


          Remove manage:translations and associated files

86391ae

Those no longer works for the newer `react-intl` (and last commit was 5 years ago)


          Update I18n check workflow

fd71d36

It will now extract the JS translations, and exit if it changed any files, meaning the author forgot to run `yarn i18n:extract` to handle I18n key changes


          Adjust formatjs formatted to match current behavior

495c11d


          Ensure CI fails if formatjs extract reports any issue

bc08ab1

For example, keys with 2 different `defaultMessage`


          Replace injectIntl by useIntl in function components

e1bdfe2


          Fix locales loading in embedded layout

f242b35


          Display a deprecation message when manage:translations is ran

263f8b9

renchap force-pushed the upgrade-react-intl branch from a2c712a to 263f8b9 Compare

May 31, 2023 09:39

github-actions bot removed the rebase needed 🚧 label

Contributor

github-actions bot commented May 31, 2023

This pull request has resolved merge conflicts and is ready for review.

Gargron approved these changes

View reviewed changes

Gargron merged commit 44cd88a into mastodon:main

30 checks passed

renchap deleted the upgrade-react-intl branch

May 31, 2023 21:50

S-H-GAMELINKS mentioned this pull request

Fix using Date.now() instead of intl.now() #25234

Merged

supernovae pushed a commit to Universeodon-com/mastodon that referenced this pull request


          Upgrade react-intl (mastodon#24906)

cf40973

Contributor

ClearlyClaire commented Jun 18, 2023

Note that this breaks cross-origin loading of the assets because of the missing crossorigin attribute on the preload tags.

This was referenced Jun 18, 2023

Webui breaks when CDN enabled glitch-soc/mastodon#2250

Closed

Fix cross-origin loading of locales #25498

Merged

skerit pushed a commit to 11ways/mastodon that referenced this pull request


          Upgrade react-intl (mastodon#24906)

3f146ad

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment