How to know if polyfill locale data exists or needs to be trimmed to base?

[klimashkin]

Hello,

I'm dynamically importing the polyfill for Intl.DisplayNames (and Intl.NumberFormat, Intl.ListFormat etc), but have stumbled upon the problem of choosing the right file from the locale-data folder.

Let's say users locale is 'en-US' or 'ru-RU', how do I know that I need to trim them down to 'en' or 'ru' respectively when importing a file from the locale-data folder, but do not trim 'en-GB'? If I don't trim certain locales then the following code will error out, but manually listing locales for all the available files in the switch statement is not feasible.

if ((await import('@formatjs/intl-displaynames/should-polyfill')).shouldPolyfill(locale)) {
  try {
    await import(
      // webpackChunkName: "intlpolyfill-display"
      '@formatjs/intl-displaynames/polyfill'
    );

    // How to load en in case of locale="en-US"?
    await import(
      // webpackChunkName: "intlpolyfill-display-[request]"
      `@formatjs/intl-displaynames/locale-data/${locale}.js`
    );
  } catch (error) {
    console.error('Failed to load intl-displaynames polyfill', error);
  }
}

[longlho]

Thanks for reporting! We'll take a look asap.
As a workaround we do have https://formatjs.io/docs/polyfills/intl-localematcher that handles locale negotiation which would work in this scenario.

Created #3255

[klimashkin]

Think you @longlho,

I was thinking about the Intl.LocaleMatcher initially as well, but the main problem is how to get its second parameter availableLocales, which should be a list of locales from the file system in the locale-data folder in this case.

I guess I'd need to find a webpack way of listing all the files in the folder into some kind of an array variable, and then feeding it into LocaleMatcher (or doing the match manually which should be pretty straightforward as well).

[klimashkin]

Ideally, would be great if the polyfill itself would have a static array of available locales attached to it (it can be generated by the package build script upon publishing)!

So in the user land it could be used like this

if ((await import('@formatjs/intl-displaynames/should-polyfill')).shouldPolyfill(locale)) {
  try {
    const {locales} = await import(
      // webpackChunkName: "intlpolyfill-display"
      '@formatjs/intl-displaynames/polyfill'
    );

    await import(
      // webpackChunkName: "intlpolyfill-display-[request]"
      `@formatjs/intl-displaynames/locale-data/${Intl.LocaleMatcher.match([locale], locales, 'en')}.js`
    );
  } catch (error) {
    console.error('Failed to load intl-displaynames polyfill', error);
  }
}