feat(directive): use directive argument for translation key

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