fix: Translations with / no need to replace with .. (#118)

Author: xiCO2k

src/index.ts

@@ -381,22 +381,7 @@ export class I18n {
    * Get the translation for the given key and watch for any changes.
    */
   wTrans(key: string, replacements: ReplacementsInterface = {}): ComputedRef<string> {
-    if (!this.activeMessages[key] && !this.activeMessages[`${key}.0`]) {
-      key = key.replace(/\//g, '.')
-    }
-
-    if (!this.activeMessages[key]) {
-      const hasChildItems = this.activeMessages[`${key}.0`] !== undefined
-
-      if (hasChildItems) {
-        const childItems = Object.entries(this.activeMessages)
-          .filter((item) => item[0].startsWith(`${key}.`))
-          .map((item) => item[1])
-        this.activeMessages[key] = reactive(childItems)
-      } else {
-        this.activeMessages[key] = key
-      }
-    }
+    this.activeMessages[key] = this.findTranslation(key) || this.findTranslation(key.replace(/\//g, '.')) || key
 
     return computed(() => this.makeReplacements(this.activeMessages[key], replacements))
   }
@@ -419,6 +404,27 @@ export class I18n {
     return computed(() => this.makeReplacements(choose(message.value, number, this.options.lang), replacements))
   }
 
+  /**
+   * Find translation in memory.
+   */
+  findTranslation(key) {
+    if (this.activeMessages[key]) {
+      return this.activeMessages[key]
+    }
+
+    const hasChildItems = this.activeMessages[`${key}.0`] !== undefined
+
+    if (hasChildItems) {
+      const childItems = Object.entries(this.activeMessages)
+        .filter((item) => item[0].startsWith(`${key}.`))
+        .map((item) => item[1])
+
+      return reactive(childItems)
+    }
+
+    return this.activeMessages[key]
+  }
+
   /**
    * Make the place-holder replacements on a line.
    */

src/mix.ts

@@ -51,10 +51,7 @@ mix.extend(
 
       config.plugins.push(
         new BeforeBuildPlugin(() => {
-          files = generateFiles(this.langPath, [
-            ...parseAll(this.frameworkLangPath),
-            ...parseAll(this.langPath)
-          ])
+          files = generateFiles(this.langPath, [...parseAll(this.frameworkLangPath), ...parseAll(this.langPath)])
         })
       )
 

test/fixtures/lang/pt.json

@@ -5,5 +5,6 @@
     "{1} :count minute ago|[2,*] :count minutes ago": "{1} há :count minuto|[2,*] há :count minutos",
     "foo.bar": "baz",
     "Start/end": "Início/Fim",
-    "Get started.": "Comece."
+    "Get started.": "Comece.",
+    "<div>Welcome</div>": "<div>Bem-vindo</div>"
 }

test/translate.test.ts

@@ -233,3 +233,15 @@ it('does not translate existing strings which contain delimiter symbols', async
   expect(trans('Start/end')).toBe('Início/Fim');
   expect(trans('Get started.')).toBe('Comece.');
 })
+
+it('allows to use html tags on translations', async () => {
+  await global.mountPlugin()
+
+  expect(trans('<div>Welcome</div>')).toBe('<div>Bem-vindo</div>');
+})
+
+it('allows to use html tags on translations even if the key does not exist', async () => {
+  await global.mountPlugin()
+
+  expect(trans('<div>Not Exist</div>')).toBe('<div>Not Exist</div>');
+})