vue-cal
vue-cal copied to clipboard
How to import locales when using a built app?
I'm updating the ww-calendar for WeWeb.
Migrating from 3.2 to 3.8.0, I noticed the ESM build.
Before, we used to import each locale manually. I removed that now that locales are loading dynamically.
But, because vue-cal is compiled by WeWeb (they have their own internal build process), I feel like the locale files aren't available in the final output, which leads to locales to fail to load whenever a locale is loaded.
To work around the issue, I preloaded a fixed set of locales, and loaded the locale by providing the Module (ESM), instead of a string. This way, it uses the object inside the Module, instead of dynamically loading the locale from files.
import * as lang_en from 'vue-cal/dist/i18n/en.es.js';
import * as lang_fr from 'vue-cal/dist/i18n/fr.es.js';
import * as lang_es from 'vue-cal/dist/i18n/es.es.js';
import * as lang_de from 'vue-cal/dist/i18n/de.es.js';
const locales = {
lang_en,
lang_fr,
lang_es,
lang_de,
};
// ... stuff
// Load the locale we want to use
if (selectedLocale && selectedLocale.hasOwnProperty('code')) {
return locales[`lang_${selectedLocale.code}`];
} else {
return locales[`lang_en`];
}
This works, but the downside is that I don't see how we could dynamically load any locale this way. Is there a better solution?
https://github.com/weweb-assets/ww-calendar/pull/19