feat(directive): use directive argument for translation key

Author: Demivan

src/directive.ts

@@ -1,5 +1,6 @@
 import { DirectiveBinding } from 'vue/types/options'
 import { VNode } from 'vue/types/vnode'
+import { warn } from './util/warn'
 
 interface FluentDirectiveBinding {
   key: string
@@ -13,8 +14,13 @@ export default {
       return
     }
 
-    const directiveData = binding.value as FluentDirectiveBinding
+    if (binding.arg === undefined) {
+      warn(false, 'v-t directive is missing arg with translation key')
+      return
+    }
+
+    const directiveData = (binding.value as FluentDirectiveBinding) || {}
 
-    el.textContent = vnode.context.$t(directiveData.key, directiveData.arg)
+    el.textContent = vnode.context.$t(binding.arg, directiveData.arg)
   }
 }

test/__snapshots__/directive.test.ts.snap

@@ -3,3 +3,5 @@
 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 warns about missing key arg 1`] = `<a href="/foo">Fallback text</a>`;

test/directive.test.ts

@@ -39,7 +39,7 @@ describe('directive', () => {
       data: () => ({
         name: 'John'
       }),
-      template: `<a v-t="{ key: 'link' }" href="/foo">Fallback text</a>`
+      template: `<a v-t:link href="/foo">Fallback text</a>`
     }
 
     // Act
@@ -49,6 +49,23 @@ describe('directive', () => {
     expect(mounted).toMatchSnapshot()
   })
 
+  it('warns about missing key arg', () => {
+    // Arrange
+    const component = {
+      template: `<a v-t href="/foo">Fallback text</a>`
+    }
+
+    const warn = jest.fn()
+    console.warn = warn
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+    expect(warn).toHaveBeenCalledTimes(1)
+  })
+
   it('can use parameters', () => {
     // Arrange
     bundle.addResource(
@@ -61,7 +78,7 @@ describe('directive', () => {
       data: () => ({
         name: 'John'
       }),
-      template: `<a v-t="{ key: 'link', arg: { name: 'John' } }" href="/foo">Fallback text</a>`
+      template: `<a v-t:link="{ arg: { name: 'John' } }" href="/foo">Fallback text</a>`
     }
 
     // Act