feat(i18n): add country variants support (#1370)

.eslintignore

@@ -4,6 +4,7 @@
 *.toml
 *.patch
 *.txt
+Dockerfile
 public/
 https-dev-config/localhost.crt
 https-dev-config/localhost.key

CONTRIBUTING.md

@@ -93,9 +93,17 @@ We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i
 
 1. Add a new file in [locales](./locales) folder with the language code as the filename.
 2. Copy [en-US](./locales/en-US.json) and translate the strings.
-3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L12), below `en` variants and `ar-EG`.
-4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar-EG](./config/i18n.ts#L27)
-5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar-EG](./config/i18n.ts#L27)
+3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L12), below `en` and `ar`:
+   - If your language have multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one)
+      - Add all country variants in [country variants object](./config/i18n.ts#L97)
+      - Add all country variants files with empty `messages` object: `{}`
+      - Translate the strings in the generic language file
+      - Later, when anyone wants to add the corresponding translations for the country variant, you can override all entries in the corresponding file: check `en` (english variants), and override the entries in all country files, if you omit them, `i18n` module will use the language entry. You will need also copy from base file to the rest of country variants those messages not being shared (the Elk team is working on resolving this, assuming it can be resolved).
+   - If the generic language already exists:
+      - If the translation doesn't differ from the generic language, then add the corresponding translations in the corresponding file
+      - If the translation differs from the generic language, then add the corresponding translations in the corresponding file and remove it from the country variants entry
+4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar](./config/i18n.ts#L22)
+5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar](./config/i18n.ts#L23)
 
 Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
 

config/i18n.ts

@@ -11,18 +11,13 @@ interface LocaleObjectData extends LocaleObject {
 
 const locales: LocaleObjectData[] = [
   {
-    code: 'en-US',
-    file: 'en-US.json',
-    name: 'English (US)',
-  },
-  {
-    code: 'en-GB',
-    file: 'en-GB.json',
-    name: 'English (UK)',
+    code: 'en',
+    file: 'en.json',
+    name: 'English',
   },
   ({
-    code: 'ar-EG',
-    file: 'ar-EG.json',
+    code: 'ar',
+    file: 'ar.json',
     name: 'العربية',
     dir: 'rtl',
     pluralRule: (choice: number) => {
@@ -56,8 +51,8 @@ const locales: LocaleObjectData[] = [
     name: 'Nederlands',
   },
   {
-    code: 'es-ES',
-    file: 'es-ES.json',
+    code: 'es',
+    file: 'es.json',
     name: 'Español',
   },
   {
@@ -114,9 +109,83 @@ const locales: LocaleObjectData[] = [
     file: 'fi-FI.json',
     name: 'Suomea',
   },
-].sort((a, b) => a.code.localeCompare(b.code))
+]
+
+const countryLocaleVariants: Record<string, LocaleObjectData[]> = {
+  ar: [
+    // { code: 'ar-DZ', name: 'Arabic (Algeria)' },
+    // { code: 'ar-BH', name: 'Arabic (Bahrain)' },
+    { code: 'ar-EG', name: 'العربية' },
+    // { code: 'ar-EG', name: 'Arabic (Egypt)' },
+    // { code: 'ar-IQ', name: 'Arabic (Iraq)' },
+    // { code: 'ar-JO', name: 'Arabic (Jordan)' },
+    // { code: 'ar-KW', name: 'Arabic (Kuwait)' },
+    // { code: 'ar-LB', name: 'Arabic (Lebanon)' },
+    // { code: 'ar-LY', name: 'Arabic (Libya)' },
+    // { code: 'ar-MA', name: 'Arabic (Morocco)' },
+    // { code: 'ar-OM', name: 'Arabic (Oman)' },
+    // { code: 'ar-QA', name: 'Arabic (Qatar)' },
+    // { code: 'ar-SA', name: 'Arabic (Saudi Arabia)' },
+    // { code: 'ar-SY', name: 'Arabic (Syria)' },
+    // { code: 'ar-TN', name: 'Arabic (Tunisia)' },
+    // { code: 'ar-AE', name: 'Arabic (U.A.E.)' },
+    // { code: 'ar-YE', name: 'Arabic (Yemen)' },
+  ],
+  en: [
+    { code: 'en-US', name: 'English (US)' },
+    { code: 'en-GB', name: 'English (UK)' },
+  ],
+  es: [
+    // { code: 'es-AR', name: 'Español (Argentina)' },
+    // { code: 'es-BO', name: 'Español (Bolivia)' },
+    // { code: 'es-CL', name: 'Español (Chile)' },
+    // { code: 'es-CO', name: 'Español (Colombia)' },
+    // { code: 'es-CR', name: 'Español (Costa Rica)' },
+    // { code: 'es-DO', name: 'Español (República Dominicana)' },
+    // { code: 'es-EC', name: 'Español (Ecuador)' },
+    { code: 'es-ES', name: 'Español (España)' },
+    { code: 'es-419', name: 'Español (Latinoamérica)' },
+    // { code: 'es-GT', name: 'Español (Guatemala)' },
+    // { code: 'es-HN', name: 'Español (Honduras)' },
+    // { code: 'es-MX', name: 'Español (México)' },
+    // { code: 'es-NI', name: 'Español (Nicaragua)' },
+    // { code: 'es-PA', name: 'Español (Panamá)' },
+    // { code: 'es-PE', name: 'Español (Perú)' },
+    // { code: 'es-PR', name: 'Español (Puerto Rico)' },
+    // { code: 'es-SV', name: 'Español (El Salvador)' },
+    // { code: 'es-US', name: 'Español (Estados Unidos)' },
+    // { code: 'es-UY', name: 'Español (Uruguay)' },
+    // { code: 'es-VE', name: 'Español (Venezuela)' },
+  ],
+}
+
+const buildLocales = () => {
+  const useLocales = Object.values(locales).reduce((acc, data) => {
+    const locales = countryLocaleVariants[data.code]
+    if (locales) {
+      locales.forEach((l) => {
+        const entry: LocaleObjectData = {
+          ...data,
+          code: l.code,
+          name: l.name,
+          files: [data.file!, `${l.code}.json`],
+        }
+        delete entry.file
+        acc.push(entry)
+      })
+    }
+    else {
+      acc.push(data)
+    }
+    return acc
+  }, <LocaleObjectData[]>[])
+
+  return useLocales.sort((a, b) => a.code.localeCompare(b.code))
+}
 
-const datetimeFormats = Object.values(locales).reduce((acc, data) => {
+const currentLocales = buildLocales()
+
+const datetimeFormats = Object.values(currentLocales).reduce((acc, data) => {
   const dateTimeFormats = data.dateTimeFormats
   if (dateTimeFormats) {
     acc[data.code] = { ...dateTimeFormats }
@@ -141,7 +210,7 @@ const datetimeFormats = Object.values(locales).reduce((acc, data) => {
   return acc
 }, <DateTimeFormats>{})
 
-const numberFormats = Object.values(locales).reduce((acc, data) => {
+const numberFormats = Object.values(currentLocales).reduce((acc, data) => {
   const numberFormats = data.numberFormats
   if (numberFormats) {
     acc[data.code] = { ...numberFormats }
@@ -173,7 +242,7 @@ const numberFormats = Object.values(locales).reduce((acc, data) => {
   return acc
 }, <NumberFormats>{})
 
-const pluralRules = Object.values(locales).reduce((acc, data) => {
+const pluralRules = Object.values(currentLocales).reduce((acc, data) => {
   const pluralRule = data.pluralRule
   if (pluralRule) {
     acc[data.code] = pluralRule
@@ -184,18 +253,19 @@ const pluralRules = Object.values(locales).reduce((acc, data) => {
 }, <PluralizationRules>{})
 
 export const i18n: NuxtI18nOptions = {
-  locales,
+  locales: currentLocales,
+  lazy: true,
   strategy: 'no_prefix',
   detectBrowserLanguage: false,
   langDir: 'locales',
   defaultLocale: 'en-US',
   vueI18n: {
+    availableLocales: currentLocales.map(l => l.code),
     fallbackLocale: 'en-US',
     fallbackWarn: false,
     missingWarn: false,
     datetimeFormats,
     numberFormats,
     pluralRules,
   },
-  lazy: true,
 }