vue-cal icon indicating copy to clipboard operation
vue-cal copied to clipboard

How to import locales when using a built app?

Open DNA-PC opened this issue 1 year ago • 0 comments

image

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

DNA-PC avatar Jun 01 '23 12:06 DNA-PC