fix(i18n): update i18n logic (#434)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: userquin

app/pages/settings.vue

@@ -5,10 +5,6 @@ const { locale, locales, setLocale } = useI18n()
 const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 
-const availableLocales = computed(() =>
-  locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
-)
-
 // Escape to go back (but not when focused on form elements)
 onKeyStroke('Escape', e => {
   const target = e.target as HTMLElement
@@ -211,7 +207,7 @@ defineOgImageComponent('Default', {
                   class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
-                  <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
+                  <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
                     {{ loc.name }}
                   </option>
                 </select>

config/i18n.ts

@@ -78,22 +78,22 @@ export const countryLocaleVariants: Record<string, (LocaleObjectData & { country
     ],*/
 }
 
-const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
+const locales: (LocaleObjectData | (Omit<LocaleObjectData, 'code'> & { code: string }))[] = [
   {
     code: 'en',
     file: 'en.json',
     name: 'English',
   },
   {
-    code: 'ar-EG',
+    code: 'ar',
     file: 'ar.json',
     name: 'العربية',
     dir: 'rtl',
     pluralRule: (choice: number) => {
       const name = new Intl.PluralRules('ar-EG').select(choice)
       return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
   /*{
     code: 'ckb',
     file: 'ckb.json',
@@ -103,7 +103,7 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
       const name = new Intl.PluralRules('ckb').select(choice)
       return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
   {
     code: 'fa-IR',
     file: 'fa-IR.json',
@@ -113,7 +113,7 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
       const name = new Intl.PluralRules('fa-IR').select(choice)
       return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
   {
     code: 'ca',
     file: 'ca.json',
@@ -177,7 +177,7 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
       const name = new Intl.PluralRules('ru-RU').select(choice)
       return { zero: 2, one: 0, two: 1, few: 1, many: 2, other: 3 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
   /*{
       code: 'ru-RU',
       file: 'ru-RU.json',
@@ -278,6 +278,8 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
     },*/
 ]
 
+const lunariaJSONFiles: Record<string, string> = {}
+
 function buildLocales() {
   const useLocales = Object.values(locales).reduce((acc, data) => {
     const locales = countryLocaleVariants[data.code]
@@ -289,10 +291,12 @@ function buildLocales() {
           name: l.name,
           files: [data.file as string, `${l.code}.json`],
         }
+        lunariaJSONFiles[l.code] = l.country ? (data.file as string) : `${l.code}.json`
         delete entry.file
         acc.push(entry)
       })
     } else {
+      lunariaJSONFiles[data.code] = data.file as string
       acc.push(data as LocaleObjectData)
     }
     return acc
@@ -303,6 +307,8 @@ function buildLocales() {
 
 export const currentLocales = buildLocales()
 
+export { lunariaJSONFiles }
+
 export const datetimeFormats = Object.values(currentLocales).reduce((acc, data) => {
   const dateTimeFormats = data.dateTimeFormats
   if (dateTimeFormats) {

lunaria/files/ar.json lunaria/files/ar-EG.jsonlunaria/files/ar.json renamed to lunaria/files/ar-EG.json

@@ -1,7 +1,7 @@
 import { createLunaria } from '@lunariajs/core'
 import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { Page } from './components.ts'
-import { prepareJsonFiles } from './prepare-json-files.ts'
+import { lunariaJSONFiles, prepareJsonFiles } from './prepare-json-files.ts'
 import type { I18nStatus } from '../shared/types/i18n-status.ts'
 
 await prepareJsonFiles()
@@ -61,7 +61,7 @@ const jsonStatus: I18nStatus = {
     }
 
     const completedKeys = totalKeys - missingKeys.length
-    const localeFilePath = `i18n/locales/${locale.lang}.json`
+    const localeFilePath = `i18n/locales/${lunariaJSONFiles[locale.lang]!}.json`
 
     return {
       lang: locale.lang,

lunaria/lunaria.ts

@@ -2,14 +2,16 @@ import type { Locale } from '@lunariajs/core'
 import type { LocaleObject } from '@nuxtjs/i18n'
 import * as path from 'node:path'
 import * as fs from 'node:fs/promises'
-import { currentLocales } from '../config/i18n.ts'
+import { currentLocales, lunariaJSONFiles } from '../config/i18n.ts'
 import { deepCopy } from '@intlify/shared'
 
 const destFolder = path.resolve('lunaria/files')
 const localesFolder = path.resolve('i18n/locales')
 
 const defaultLocale = currentLocales.find(l => l.code === 'en-US')!
 /** @public */
+export { lunariaJSONFiles }
+/** @public */
 export const sourceLocale = {
   label: defaultLocale.name,
   lang: defaultLocale.code,