diff --git a/plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/src/locale.tsx b/plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/src/locale.tsx index 1863e20..0afdad4 100644 --- a/plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/src/locale.tsx +++ b/plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/src/locale.tsx @@ -5,15 +5,54 @@ import { useEffect, useState } from 'react'; import { I18nProvider } from '@lingui/react'; +/** + * Attempt to load the locale file for the given locale, returning null if it fails + */ +async function tryLoadLocale(locale: string): Promise { + try { + const messages = await import(`./locales/${locale}/messages.ts`); + return messages; + } catch (error) { + console.warn(`Failed to load locale ${locale}`); + return null; + } +} + + /** * Helper function to dynamically load frontend translations, * based on the provided locale. */ async function loadPluginLocale(locale: string) { - const { messages } = await import(`./locales/${locale}/messages.ts`); - + + let messages = null; + + // Find the most specific locale file possible, with fallbacks to less specific locales if necessary + messages = await tryLoadLocale(locale); + + if (!messages && locale.includes('-')) { + const fallbackLocale = locale.split('-')[0]; + console.debug(`Locale ${locale} not found, trying fallback locale ${fallbackLocale}`); + messages = await tryLoadLocale(fallbackLocale); + } + + if (!messages && locale.includes('_')) { + const fallbackLocale = locale.split('_')[0]; + console.debug(`Locale ${locale} not found, trying fallback locale ${fallbackLocale}`); + messages = await tryLoadLocale(fallbackLocale); + } + + if (!messages && locale !== 'en') { + console.debug(`Locale ${locale} not found, trying fallback locale en`); + messages = await tryLoadLocale('en'); + } + + if (messages) { i18n.load(locale, messages); i18n.activate(locale); + } else { + console.error(`Failed to load any locale for ${locale}`); + } }