Skip to content
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

Lazy load translations #781

Merged
merged 2 commits into from
Jan 23, 2025
Merged

Conversation

sergei-maertens
Copy link
Member

Partly closes #76

Verified by creating a static build and using it in our backend, switching between languages works as expected 🎉

The vite plugin checks configuration before checking if release
creation is actually needed or not - we currently don't use this
(though we likely will for #557) - the plugin is only used to
manage tree shaking options.

In due time we will configure this to (our own) Sentry instance.
Comment on lines 26 to 38
switch (locale) {
case 'nl':
return messagesNL;
default:
return messagesEN;
case 'nl': {
localeToLoad = 'nl';
break;
}
case 'en':
// in case (accidentally) a locale is set that we don't ship translations for yet,
// fall back to English.
// eslint-disable-next-line no-fallthrough
default: {
localeToLoad = 'en';
}
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this may look a bit over-engineered, but our backend does support things like nl_NL and nl_BE locales and doing things this way makes it future proof for languages we may add in the future that have regional variants.

Copy link

codecov bot commented Jan 22, 2025

Bundle Report

Changes will increase total bundle size by 12.05kB (0.13%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
@open-formulieren/sdk-OpenForms-umd 4.75MB 7.36kB (0.16%) ⬆️
@open-formulieren/sdk-esm 4.75MB 4.69kB (0.1%) ⬆️

Copy link

codecov bot commented Jan 22, 2025

Codecov Report

Attention: Patch coverage is 91.66667% with 1 line in your changes missing coverage. Please review.

Project coverage is 83.32%. Comparing base (1ba7648) to head (4f9cb8a).
Report is 3 commits behind head on main.

Files with missing lines Patch % Lines
src/i18n.jsx 90.90% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #781      +/-   ##
==========================================
- Coverage   83.34%   83.32%   -0.02%     
==========================================
  Files         239      239              
  Lines        4755     4750       -5     
  Branches     1267     1275       +8     
==========================================
- Hits         3963     3958       -5     
  Misses        757      757              
  Partials       35       35              
Flag Coverage Δ
storybook 75.77% <91.66%> (-0.02%) ⬇️
vitest 62.64% <66.66%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

This should make the main bundle smaller and ensure we only fetch the
translations that will actually be used.
@sergei-maertens sergei-maertens force-pushed the issue/76-lazy-load-translations branch from d26ef59 to 4f9cb8a Compare January 22, 2025 14:34
Copy link
Contributor

@robinmolen robinmolen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, looks good to me!

I was slightly concerned that await import('./i18n/compiled/${localeToLoad}.json') in the i18n.jsx would load multiple times, but it doesn't. It seems to load only once, even after switching from NL to EN and back to NL

@sergei-maertens
Copy link
Member Author

Nice, looks good to me!

I was slightly concerned that await import('./i18n/compiled/${localeToLoad}.json') in the i18n.jsx would load multiple times, but it doesn't. It seems to load only once, even after switching from NL to EN and back to NL

Indeed - browsers/bundlers are smart enough to cache that, luckily!

@sergei-maertens sergei-maertens merged commit 49bd7cb into main Jan 23, 2025
17 checks passed
@sergei-maertens sergei-maertens deleted the issue/76-lazy-load-translations branch January 23, 2025 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Re-enable dynamic loading of i18n modules & put our bundle on a diet
2 participants