add new wTrans and wTransChoice

will watch any changes happens to the activeMessages object
return the correct translation during any changes

Author: AGhorabHekouky

src/index.ts

@@ -1,4 +1,4 @@
-import { reactive, Plugin } from 'vue'
+import { reactive, Plugin, computed, ComputedRef } from 'vue'
 import { OptionsInterface } from './interfaces/options'
 import { LanguageInterface } from './interfaces/language'
 import { LanguageJsonFileInterface } from './interfaces/language-json-file'
@@ -67,22 +67,36 @@ export function loadLanguageAsync(lang: string): Promise<string | void> {
  * Get the translation for the given key.
  */
 export function trans(key: string, replacements: ReplacementsInterface = {}): string {
+  return wTrans(key, replacements).value
+}
+
+/**
+ * Get the translation for the given key and watch for any changes.
+ */
+export function wTrans(key: string, replacements: ReplacementsInterface = {}): ComputedRef<string> {
   if (!activeMessages[key]) {
     activeMessages[key] = key
   }
 
-  return makeReplacements(activeMessages[key], replacements)
+  return computed(() => makeReplacements(activeMessages[key], replacements))
 }
 
 /**
  * Translates the given message based on a count.
  */
 export function transChoice(key: string, number: number, replacements: ReplacementsInterface = {}): string {
-  const message = trans(key, replacements)
+  return wTransChoice(key, number, replacements).value
+}
+
+/**
+ * Translates the given message based on a count and watch for changes.
+ */
+export function wTransChoice(key: string, number: number, replacements: ReplacementsInterface = {}): ComputedRef<string> {
+  const message = wTrans(key, replacements)
 
   replacements.count = number.toString()
 
-  return makeReplacements(choose(message, number, options.lang), replacements)
+  return computed(() => makeReplacements(choose(message.value, number, options.lang), replacements))
 }
 
 /**

test/fixtures/lang/en.json

@@ -1,5 +1,6 @@
 {
     "Welcome!": "Wecome!",
     "Welcome, :name!": "Bem-vindo, :name!",
-    "Only Available on EN": "Only Available on EN"
+    "Only Available on EN": "Only Available on EN",
+    "{1} :count minute ago|[2,*] :count minutes ago": "{1} :count minute ago|[2,*] :count minutes ago"
 }

test/plurization.test.ts

@@ -1,4 +1,4 @@
-import { trans_choice, transChoice } from '../src';
+import { trans_choice, transChoice, wTransChoice, loadLanguageAsync } from '../src';
 
 it.each([
   ['first', 'first', 1],
@@ -71,3 +71,18 @@ it('translates even using an alias "trans_choice"', async () => {
   expect(trans_choice('{1} :count minute ago|[2,*] :count minutes ago', 3))
     .toBe('há 3 minutos');
 })
+
+
+it('translates "wTransChoice" and test language change values', async () => {
+  await global.mountPlugin()
+
+  const translation = wTransChoice('{1} :count minute ago|[2,*] :count minutes ago', 3)
+  expect(translation.value)
+    .toBe('há 3 minutos');
+
+  await loadLanguageAsync('en');
+  
+  expect(translation.value)
+    .toBe('3 minutes ago');
+
+})

test/translate.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { i18nVue, trans, trans_choice, loadLanguageAsync, reset, getActiveLanguage, isLoaded } from '../src'
+import { i18nVue, trans, trans_choice, loadLanguageAsync, reset, getActiveLanguage, isLoaded, wTrans } from '../src'
 
 beforeEach(() => reset());
 
@@ -94,3 +94,16 @@ it('checks if is a lang is loaded', async () => {
   await loadLanguageAsync('zh_TW');
   expect(isLoaded('zh_TW')).toBe(true);
 })
+
+it('checks if watching translation works', async () => {
+  await global.mountPlugin();
+
+  const translated = wTrans("Welcome!");
+  expect(translated.value)
+    .toBe('Bem-vindo!')
+
+  await loadLanguageAsync('en')
+
+  expect(translated.value)
+    .toBe('Wecome!')
+})