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

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 datetimeFormats = Object.values(locales).reduce((acc, data) => {
+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 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,12 +253,14 @@ 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,
@@ -197,5 +268,4 @@ export const i18n: NuxtI18nOptions = {
     numberFormats,
     pluralRules,
   },
-  lazy: true,
 }