feat(directive): update translations when parameters change

Author: Demivan

src/directive.ts

@@ -1,31 +1,41 @@
 import { DirectiveBinding } from 'vue/types/options'
 import { VNode } from 'vue/types/vnode'
 import { warn } from './util/warn'
+import { FluentVueObject } from '../types'
+
+function translate(el: HTMLElement, fluent: FluentVueObject, binding: DirectiveBinding) {
+  if (binding.arg === undefined) {
+    warn(false, 'v-t directive is missing arg with translation key')
+    return
+  }
+
+  const msg = fluent.getMessage(binding.arg)
+
+  if (msg === undefined) {
+    return
+  }
+
+  el.textContent = fluent.formatPattern(msg.value, binding.value)
+
+  for (const [attr] of Object.entries(binding.modifiers)) {
+    el.setAttribute(attr, fluent.formatPattern(msg.attributes[attr], binding.value))
+  }
+}
 
 export default {
   bind(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
     if (vnode.context === undefined) {
       return
     }
 
-    if (binding.arg === undefined) {
-      warn(false, 'v-t directive is missing arg with translation key')
-      return
-    }
-
-    const msg = vnode.context.$fluent.getMessage(binding.arg)
+    translate(el, vnode.context.$fluent, binding)
+  },
 
-    if (msg === undefined) {
+  update(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
+    if (vnode.context === undefined) {
       return
     }
 
-    el.textContent = vnode.context.$fluent.formatPattern(msg.value, binding.value)
-
-    for (const [attr] of Object.entries(binding.modifiers)) {
-      el.setAttribute(
-        attr,
-        vnode.context.$fluent.formatPattern(msg.attributes[attr], binding.value)
-      )
-    }
+    translate(el, vnode.context.$fluent, binding)
   }
 }

test/__snapshots__/directive.test.ts.snap

@@ -6,6 +6,10 @@ exports[`directive can use parameters 1`] = `<a href="/foo">Hello John</a>`;
 
 exports[`directive translates text content 1`] = `<a href="/foo">Link text</a>`;
 
+exports[`directive updates translations on component update 1`] = `<a aria-label="Localized aria">Hello John</a>`;
+
+exports[`directive updates translations on component update 2`] = `<a aria-label="Localized aria">Hello Anna</a>`;
+
 exports[`directive warns about missing key arg 1`] = `<a href="/foo">Fallback text</a>`;
 
 exports[`directive works without fallbacks 1`] = `<a aria-label="Localized aria">Hello John</a>`;

test/directive.test.ts

@@ -133,4 +133,31 @@ describe('directive', () => {
     // Assert
     expect(mounted).toMatchSnapshot()
   })
+
+  it('updates translations on component update', () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      link = Hello {$name}
+        .aria-label = Localized aria
+      `)
+    )
+
+    const component = {
+      data: () => ({
+        name: 'John'
+      }),
+      template: `<a v-t:link.aria-label="{ name }"></a>`
+    }
+
+    const mounted = mount(component, options)
+
+    expect(mounted).toMatchSnapshot()
+
+    // Act
+    mounted.setData({ name: 'Anna' })
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+  })
 })