Update react intl v3 - saga based translation files #2866
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* new formatjs/intl-relativetimeformat and intl-pluralrules dependencies as react-intl polyfills * changes in jest.config.js, webpack.base.babel.js, i18n.js and ToggleOption component according to react-intl upgrade guide * various snapshot updates due to internal react-intl changes Signed-off-by: mhatvan <markus_hatvan@aon.at>
…erplate into chore/upgrade-react-intl-to-v3
* react-intl upgrade from 3.1.9 to 3.3.0 * switch from intl-pluralrules to @formatjs/intl-pluralrules * update i18n.js and i18n.md Signed-off-by: mhatvan <markus_hatvan@aon.at>
* change add-locale-data.hbs and intl-locale-data.hbs generation * add istanbul ignore to conditional polyfill imports * remove intl polyfill in app/app.js and polyfill-intl-locale.hbs * change documentation url for intl webpack transpilation Signed-off-by: mhatvan <markus_hatvan@aon.at>
Signed-off-by: markushatvan <markus_hatvan@aon.at>
…ndows environments Signed-off-by: markushatvan <markus_hatvan@aon.at>
…erplate into chore/upgrade-react-intl-to-v3 Signed-off-by: mhatvan <markus_hatvan@aon.at>
…eact-boilerplate into chore/upgrade-react-intl-to-v3
…erplate into chore/upgrade-react-intl-to-v3
* add full-icu package to fix locale data missing error in jest tests * add english locale data polyfill for Intl.Pluralrules and Intl.RelativeTimeFormat * change language generation to add locale data polyfills after english locale data Signed-off-by: mhatvan <markus_hatvan@aon.at>
Update react-intl to latest version. Update LanguageProvider, app.js, and i18n.js in both app and template as described below. i18n.js - Despite the comment at the top of the file, i18n.js is not being used by the extract-intl script anymore, and can therefore use import/export syntax. - The translation files are now imported dynamically so that only the necessary translations are included. In the example app, this doesn't make much difference, but when there are many locales, loading json files individually will make a significant difference. - Create fetchMessages convenience function for importing/formatting translations. app.js - Update dynamic imports of Intl polyfills to @formatjs/intl-pluralrules and @formatjs/intl-relativetimeformat. - Remove translationMessages as they are now being fetched by the getTranslationMessages Saga. LanguageProvider - The CHANGE_LOCALE action now triggers the getTranslationMessages Saga. The Saga will use the fetchMessages function in i18n.js to fetch the appropriate messages file and then update the locale and messages. - If the messages are unable to be fetched, the saga will fall back to the default locale and messages. generators - Fix all language generators so that they work properly for new i18n.js/app.js implementaiton.
colbysadams
requested review from
gretzky,
julienben,
justingreenberg,
jwinn and
JohnMostlyR
as code owners
- Previous commit failed because the app.js template was not formatted properly
|
Edit: Sorry I am opening this back as a result of not merging the #2935 if that means anything;) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When using react-boilerplate in production, I found that all of the translation messages were being bundled together and loaded at the entrypoint. In the example app, this only wastes ~1KB , but when you're dealing with larger apps with many languages, this wasted overhead can be significant.
This fix would move the fetching of translation files into a redux-saga, allowing only the necessary translations to be sent to the client.
All commits for updated react-intl in the pull request #2721 submitted by @mhatvan are merged with the dev branch and then I made the following changes on top of that:
i18n.jsDespite the comment at the top of the file, i18n.js is not being used
by the extract-intl script anymore, and can therefore use import/export
syntax.
The translation files are now imported dynamically so that only the
necessary translations are included. In the example app, this doesn't
make much difference, but when there are many locales, loading json
files individually will make a significant difference in the initial load.
Create
fetchMessagesconvenience function for importing/formattingtranslations.
app.jsUpdate dynamic imports of Intl polyfills to @formatjs/intl-pluralrules
and @formatjs/intl-relativetimeformat.
Remove translationMessages as they are now being fetched by the
getTranslationMessages Saga.
LanguageProviderThe CHANGE_LOCALE action now triggers the getTranslationMessages Saga.
The Saga will use the fetchMessages function in i18n.js to fetch the
appropriate messages file and then update the locale and messages.
If the messages are unable to be fetched, the saga will fall back to
the default locale and messages.
generatorsi18n.js/app.js implementaiton.