feat(method): add a way to get message attrs

Add $ta method that gets message attributes

fix #9

Author: Demivan

src/extend.ts

@@ -19,4 +19,13 @@ export default function extend(Vue: VueConstructor<Vue>): void {
   Vue.prototype.$t = function(key: string, values: any): string {
     return this.$fluent.format(key, values)
   }
+
+  /**
+   * Format message attributes
+   * @param key Translation key
+   * @param values Message parameters
+   */
+  Vue.prototype.$ta = function(key: string, values: any): string {
+    return this.$fluent.formatAttrs(key, values)
+  }
 }

src/fluent-vue.ts

@@ -74,6 +74,29 @@ export default class FluentVue implements FluentVueObject {
 
     const errors: string[] = []
     const result = this.formatPattern(context, message.value, value, errors)
+
+    for (const error of errors) {
+      warn(`Fluent error for key [${key}]: ${error}`)
+    }
+
+    return result
+  }
+
+  formatAttrs(key: string, value?: object): object {
+    const context = this.getBundle(key)
+    const message = this.getMessage(context, key)
+
+    if (message === null || message.value === null) {
+      return {}
+    }
+
+    const errors: string[] = []
+    const result = {}
+
+    for (const [attrName, attrValue] of Object.entries(message.attributes)) {
+      ;(result as any)[attrName] = this.formatPattern(context, attrValue, value, errors)
+    }
+
     for (const error of errors) {
       warn(`Fluent error for key [${key}]: ${error}`)
     }

test/vue/__snapshots__/custom-components.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`method works with vue components 1`] = `<div attr="Attr value">Inner data</div>`;

test/vue/custom-components.test.ts

@@ -0,0 +1,58 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+import ftl from '@fluent/dedent'
+
+import FluentVue from '../../src'
+
+describe('method', () => {
+  let options: any
+  let bundle: FluentBundle
+
+  beforeEach(() => {
+    const localVue = createLocalVue()
+    localVue.use(FluentVue)
+
+    bundle = new FluentBundle('en-US')
+
+    const fluent = new FluentVue({
+      bundles: [bundle]
+    })
+
+    options = {
+      fluent,
+      localVue
+    }
+  })
+
+  it('works with vue components', () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Inner data
+        .attr = Attr value
+      `)
+    )
+
+    const child = {
+      props: {
+        text: { type: String },
+        attrs: { type: Object }
+      },
+      template: `<div :attr="attrs.attr">{{ text }}</div>`
+    }
+
+    const component = {
+      components: {
+        child
+      },
+      template: `<child :text="$t('key')" :attrs="$ta('key')"></child>`
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+  })
+})