feat(directive): allow to localize attributes

Author: Demivan

src/directive.ts

@@ -13,6 +13,22 @@ export default {
       return
     }
 
-    el.textContent = vnode.context.$t(binding.arg, binding.value)
+    const msg = vnode.context.$fluent.getMessage(binding.arg)
+
+    if (msg === undefined) {
+      return
+    }
+
+    el.textContent = vnode.context.$fluent.formatPattern(msg.value, binding.value)
+    if (vnode.data === undefined || vnode.data.attrs === undefined) {
+      return
+    }
+
+    for (const [attr] of Object.entries(binding.modifiers)) {
+      el.setAttribute(
+        attr,
+        vnode.context.$fluent.formatPattern(msg.attributes[attr], binding.value)
+      )
+    }
   }
 }

src/fluent-vue.ts

@@ -1,26 +1,40 @@
-import { FluentVueOptions } from '../types'
+import { FluentVueObject, FluentVueOptions } from '../types'
 import { Vue, VueConstructor } from 'vue/types/vue'
 import { warn } from './util/warn'
+import { Pattern } from '@fluent/bundle'
 
-export default class FluentVue {
+export default class FluentVue implements FluentVueObject {
   private options: FluentVueOptions
   static install: (vue: VueConstructor<Vue>) => void
 
   constructor(options: FluentVueOptions) {
     this.options = options
   }
 
-  format(key: string, value?: object): string {
+  getMessage(key: string) {
     const message = this.options.bundle.getMessage(key)
 
     if (message === undefined) {
       warn(false, `Could not find translation for key [${key}]`)
+      return undefined
+    }
+
+    return message
+  }
+
+  formatPattern(message: Pattern, value?: object, errors?: string[]): string {
+    return this.options.bundle.formatPattern(message, value, errors)
+  }
+
+  format(key: string, value?: object): string {
+    const message = this.getMessage(key)
+
+    if (message === undefined) {
       return key
     }
 
     const errors: string[] = []
-    const result = this.options.bundle.formatPattern(message.value, value, errors)
-
+    const result = this.formatPattern(message.value, value, errors)
     for (const error of errors) {
       warn(false, `Fluent error for key [${key}]: ${error}`)
     }

test/__snapshots__/directive.test.ts.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`directive can translate DOM attributes 1`] = `<a href="/foo" aria-label="Localized aria">Hello John</a>`;
+
 exports[`directive can use parameters 1`] = `<a href="/foo">Hello John</a>`;
 
 exports[`directive translates text content 1`] = `<a href="/foo">Link text</a>`;

test/directive.test.ts

@@ -87,4 +87,27 @@ describe('directive', () => {
     // Assert
     expect(mounted).toMatchSnapshot()
   })
+
+  it('can translate DOM attributes', () => {
+    // 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 }" href="/foo" aria-label="Fallback aria">Fallback text</a>`
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+  })
 })

types/index.d.ts

@@ -1,7 +1,11 @@
 import { Vue } from 'vue/types/vue'
-import { FluentBundle } from '@fluent/bundle'
+import { FluentBundle, MessageInfo, Pattern } from '@fluent/bundle'
 
-export interface FluentVueObject {}
+export interface FluentVueObject {
+  getMessage(key: string): MessageInfo | undefined
+  formatPattern(message: Pattern, value?: object, errors?: string[]): string
+  format(key: string, value?: object): string
+}
 
 export interface FluentVueOptions {
   bundle: FluentBundle