How to get a list of available languages?

[marcvangend]

Sometimes I need to loop over the list of available languages. For instance when creating a language switcher component. This list is already configured in .linguirc. From the setup instructions:

   "locales": ["en", "cs", "fr"],

However I don't see a way to retrieve this data. At first I expected that const { i18n } = useLingui(); const locales = i18n.locales; would do the trick, but it seems to always return undefined. I did notice there is i18n._localeData, but since that starts with an underscore, I assume that it is considered internal and may change without notice.

Is there an official supported way to retrieve the available languages? If not, please consider this a feature request.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[marcvangend]

This is not stale, this is as fresh as the day I posted it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nmoinvaz]

Still relevant.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nmoinvaz]

Please don't close.

[timofei-iatsenko]

There no such feature out of the box, in our code we use two different lists to accomplish that (language switcher). And the list in the runtime consist much more data

export const ALL_LANGUAGES: { [key: string]: ILang } = {
  en: {
    label: 'English',
    twoLettersCode: 'en',
    locale: 'en-GB',
  },
  de: {
    label: 'Deutsch',
    twoLettersCode: 'de',
    locale: 'de-DE',
  },
  'pt-br': {
    label: 'Português (Brazil)',
    twoLettersCode: 'pt',
    locale: 'pt-BR',
  },
  'ja': {
    label: '日本語',
    twoLettersCode: 'ja',
    locale: 'ja-JP',
  },
  ar: {
    label: 'العربية',
    twoLettersCode: 'ar',
    locale: 'ar-SA',
  },
  es: {
    label: 'Español',
    twoLettersCode: 'es',
    locale: 'es-ES',
  },
}

So even i would have access to the lingui's list of languages it wouldn't be very useful in our case.

Workaround

lingui.config.js is a plain javascript file with no dependencies, you can import it in your code and use list of languages:

import {locales} from './lingui.config.js'

console.log({locales})

[andrii-bodnar]

There are a few ways of specifying the Lingui config and the mentioned workaround couldn't be applied to all of them

Probably we should consider adding some common interface for the locales list in the future

[nmoinvaz]

We currently don't use the lingui.config.js because our locales are loaded remotely with the remote loader. So it would be good if the interface allowed specifying another file to load the locale list too.

[timofei-iatsenko]

IMO, I think the value not worth the effort. Injecting config to the runtime brings a lot of problems and questions (consider different setup with different bundlers and etc etc).

It should be in users app responsibility. If you don't want to duplicate configs, just create a file with all your locales/languages and use in both places (lingui config and app)

We currently don't use the lingui.config.js because our locales are loaded remotely with the remote loader.

It doesn't matter what loader you use, you still should have a lingui config. And what format of config you use is a just a matter of user preferences (package.json field, js, ts, dot.rc, etc) it doesn't affect anything.

So if someone really need it, a library already have a way to configure it out of the box.