Reactive Current Locale (#200)

* Reactive current locale - Related to this #192

* make reactive instance of current language to be readonly

Author: sylvano-tombo

src/index.ts

@@ -1,4 +1,4 @@
-import { reactive, Plugin, computed, ComputedRef, watchEffect } from 'vue'
+import { reactive, Plugin, computed, ComputedRef, watchEffect, ref, ComputedRef } from 'vue'
 import { OptionsInterface } from './interfaces/options'
 import { PluginOptionsInterface } from './interfaces/plugin-options'
 import { LanguageInterface } from './interfaces/language'
@@ -26,6 +26,17 @@ const DEFAULT_OPTIONS: OptionsInterface = {
   onLoad: (lang: string) => {}
 }
 
+/**
+ * A computed property that reflects the current reactive language.
+ *
+ * This value is derived from the shared I18n instance. When the language
+ * is updated via the I18n API, this computed value will automatically reflect
+ * the new language.
+ */
+export const currentLocale: ComputedRef<string> = computed(() => {
+    return I18n.getSharedInstance().getCurrentLanguage().value
+})
+
 /**
  * The default options, for the plugin.
  */
@@ -137,6 +148,9 @@ export class I18n {
   // Stores options for the current instance
   private options: OptionsInterface
 
+  // Stores a reactive reference to the current active language
+  private currentLanguage = ref<string>(DEFAULT_OPTIONS.lang || DEFAULT_OPTIONS.fallbackLang)
+
   // Stores messages for the currently active language
   private activeMessages: object = reactive({})
 
@@ -358,6 +372,7 @@ export class I18n {
     }
 
     this.options.lang = lang
+    this.currentLanguage.value = lang
 
     for (const [key, value] of Object.entries(messages)) {
       this.activeMessages[key] = value
@@ -386,6 +401,13 @@ export class I18n {
     return this.options.lang || this.options.fallbackLang
   }
 
+  /**
+   * Returns the reactive current active language
+   */
+  getCurrentLanguage(): ComputedRef<string> {
+    return computed(() => this.currentLanguage.value)
+  }
+
   /**
    * Checks if the language is loaded.
    */

test/translate.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { i18nVue, trans, trans_choice, loadLanguageAsync, reset, getActiveLanguage, isLoaded, wTrans, I18n } from '../src'
+import { i18nVue, trans, trans_choice, loadLanguageAsync, reset, getActiveLanguage, isLoaded, wTrans, I18n, currentLocale } from '../src'
 import { reset as resetLoader } from '../src/loader'
 
 beforeEach(() => reset());
@@ -278,3 +278,15 @@ it('checks if watching wTrans works if key does not exist', async () => {
 
   expect(translated.value).toBe('Not existing translation');
 })
+
+it('get current reactive locale with "currentLocale"', async () => {
+    await global.mountPlugin();
+
+    expect(currentLocale.value)
+      .toBe('pt')
+
+    await loadLanguageAsync('en');
+
+    expect(currentLocale.value)
+        .toBe('en')
+  })