feat: reactive availableLocales using computed property (#2058)

* feat: add computed property and tests

* feat(tests): add checking with watchEffect

---------

Co-authored-by: mnenie <[email protected]>

Author: mnenie

packages/vue-i18n-core/src/composer.ts

@@ -1315,7 +1315,7 @@ export interface Composer<
    * @remarks
    * The list of available locales in `messages` in lexical order.
    */
-  readonly availableLocales: Locales[]
+  readonly availableLocales: ComputedRef<Locales[]>
   /**
    * @remarks
    * The locale messages of localization.
@@ -2130,6 +2130,11 @@ export function createComposer(options: any = {}): any {
     () => _messages.value as any
   )
 
+  // availableLocales
+  const availableLocales = computed<Locale[]>(() =>
+    Object.keys(_messages.value).sort()
+  )
+
   // datetimeFormats
   const datetimeFormats = /* #__PURE__*/ computed<DateTimeFormatsType>(
     () => _datetimeFormats.value
@@ -2549,9 +2554,7 @@ export function createComposer(options: any = {}): any {
         updateFallbackLocale(_context, _locale.value, _fallbackLocale.value)
       }
     },
-    get availableLocales(): Locale[] {
-      return Object.keys(_messages.value).sort()
-    },
+    availableLocales,
     messages,
     get modifiers(): LinkedModifiers<Message> {
       return _modifiers

packages/vue-i18n-core/src/legacy.ts

@@ -967,7 +967,7 @@ export interface VueI18n<
    * @remarks
    * The list of available locales in `messages` in lexical order.
    */
-  readonly availableLocales: Composition['availableLocales']
+  readonly availableLocales: Locales[]
   /**
    * @remarks
    * The locale messages of localization.
@@ -1485,7 +1485,7 @@ export function createVueI18n(options: any = {}): any {
 
     // availableLocales
     get availableLocales(): Locale[] {
-      return composer.availableLocales as Locale[]
+      return composer.availableLocales.value
     },
 
     // missing

packages/vue-i18n-core/test/composer.test.ts

@@ -150,7 +150,7 @@ describe('inheritLocale', () => {
 describe('availableLocales', () => {
   test('not initialize messages at composer creating', () => {
     const { availableLocales } = createComposer({})
-    expect(availableLocales).toEqual(['en-US'])
+    expect(availableLocales.value).toEqual(['en-US'])
   })
 
   test('initialize messages at composer creating', () => {
@@ -162,10 +162,18 @@ describe('availableLocales', () => {
         fr: {}
       }
     })
-    expect(availableLocales).toEqual(['en', 'ja', 'ru', 'fr'].sort())
+    expect(availableLocales.value).toEqual(['en', 'ja', 'ru', 'fr'].sort())
+  })
+  test('reactive update', () => {
+    const { availableLocales, setLocaleMessage } = createComposer({
+      messages: {
+        en: {}
+      }
+    })
+    setLocaleMessage('ja', { hello: 'こんにちは、世界!' })
+    expect(availableLocales.value).toEqual(['en', 'ja'].sort())
   })
 })
-
 describe('messages', () => {
   test('default value', () => {
     const { messages } = createComposer({})

packages/vue-i18n-core/test/legacy.test.ts

@@ -44,16 +44,44 @@ test('fallbackLocale', () => {
   expect(i18n.fallbackLocale).toEqual('ja')
 })
 
-test('availableLocales', () => {
-  const i18n = createVueI18n({
-    messages: {
-      en: {},
-      ja: {},
-      ru: {},
-      fr: {}
-    }
+describe('availableLocales', () => {
+  test('initialize messages', async () => {
+    const i18n = createVueI18n({
+      messages: {
+        en: {},
+        ja: {},
+        fr: {}
+      }
+    })
+    expect(i18n.availableLocales).toEqual(['en', 'ja', 'fr'].sort())
+  })
+  test('reactive update', () => {
+    const i18n = createVueI18n({
+      messages: {
+        en: {},
+        ja: {},
+        fr: {}
+      }
+    })
+    i18n.setLocaleMessage('ru', { hello: 'Привет мир!' })
+    expect(i18n.availableLocales).toEqual(['en', 'ja', 'fr', 'ru'].sort())
+  })
+  test('trigger new value with watchEffect', async () => {
+    const i18n = createVueI18n({
+      messages: {
+        ja: {}
+      }
+    })
+    let locales = [] as string[]
+
+    watchEffect(() => {
+      locales = i18n.availableLocales
+    })
+
+    i18n.setLocaleMessage('en', { hello: 'Hello' })
+    await nextTick()
+    expect(locales.sort()).toEqual(['en', 'ja'].sort())
   })
-  expect(i18n.availableLocales).toEqual(['en', 'ja', 'ru', 'fr'].sort())
 })
 
 test('missing', () => {