feat(component): add component for component interpolation

src/install.ts

@@ -2,9 +2,11 @@ import { Vue } from 'vue/types/vue'
 import extend from './extend'
 import mixin from './mixin'
 import directive from './vue/directive'
+import component from './vue/component'
 
 export default function install(vue: typeof Vue) {
   extend(vue)
   vue.mixin(mixin)
   vue.directive('t', directive)
+  vue.component('i18n', component as any)
 }

src/vue/component.ts

@@ -0,0 +1,19 @@
+import { Component } from 'vue/types'
+
+export default {
+  name: 'i18n',
+  functional: true,
+  props: {
+    path: { type: String, required: true },
+    tag: { type: String, default: 'span' },
+    data: { type: Object, default: () => ({}) }
+  },
+  render(h, { parent, props, data }) {
+    const key = props.path
+    const fluent = parent.$fluent
+
+    const translation = fluent.format(key)
+
+    return h(props.tag, data, translation)
+  }
+} as Component

test/vue/__snapshots__/component.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component handles simple translations 1`] = `<span>Inner data</span>`;

test/vue/component.test.ts

@@ -0,0 +1,48 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+import ftl from '@fluent/dedent'
+
+import FluentVue from '../../src'
+
+describe('component', () => {
+  let options: any
+  let bundle: FluentBundle
+
+  beforeEach(() => {
+    const localVue = createLocalVue()
+    localVue.use(FluentVue)
+
+    bundle = new FluentBundle('en-US', {
+      useIsolating: false
+    })
+
+    const fluent = new FluentVue({
+      bundles: [bundle]
+    })
+
+    options = {
+      fluent,
+      localVue
+    }
+  })
+
+  it('handles simple translations', () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Inner data
+      `)
+    )
+
+    const component = {
+      template: '<i18n path="key"></i18n>'
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+  })
+})