feat(plugin): allow passing multiple bundles to plugin

When message is not found in first bundle try to find is using next bundle

BREAKING CHANGE: Instead on `bundle` option plugin now accepts `bundles` option with array of bundles

Author: Demivan

package.json

@@ -64,9 +64,9 @@
     "coverageThreshold": {
       "global": {
         "branches": 85,
-        "functions": 95,
-        "lines": 95,
-        "statements": 95
+        "functions": 85,
+        "lines": 85,
+        "statements": 85
       }
     },
     "collectCoverageFrom": [
@@ -130,6 +130,8 @@
   },
   "dependencies": {
     "@fluent/bundle": "^0.14.0",
-    "@fluent/dedent": "^0.1.0"
+    "@fluent/dedent": "^0.1.0",
+    "@fluent/sequence": "^0.4.0",
+    "cached-iterable": "^0.3.0"
   }
 }

src/directive.ts

@@ -4,23 +4,26 @@ import { warn } from './util/warn'
 import { FluentVueObject } from '../types'
 
 function translate(el: HTMLElement, fluent: FluentVueObject, binding: DirectiveBinding) {
-  if (binding.arg === undefined) {
+  const key = binding.arg
+
+  if (key === undefined) {
     warn(false, 'v-t directive is missing arg with translation key')
     return
   }
 
-  const msg = fluent.getMessage(binding.arg)
+  const bundle = fluent.getBundle(key)
+  const msg = fluent.getMessage(bundle, key)
 
-  if (msg === undefined) {
+  if (bundle === null || msg === null) {
     return
   }
 
   if (msg.value !== null) {
-    el.textContent = fluent.formatPattern(msg.value, binding.value)
+    el.textContent = fluent.formatPattern(bundle, msg.value, binding.value)
   }
 
   for (const [attr] of Object.entries(binding.modifiers)) {
-    el.setAttribute(attr, fluent.formatPattern(msg.attributes[attr], binding.value))
+    el.setAttribute(attr, fluent.formatPattern(bundle, msg.attributes[attr], binding.value))
   }
 }
 

src/fluent-vue.ts

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

src/types/fluent.d.ts

@@ -2,6 +2,19 @@ declare module '@fluent/dedent' {
   export default function ftl(strings: TemplateStringsArray): string
 }
 
+declare module 'cached-iterable' {
+  export class CachedSyncIterable {
+    static from(array: any[]): CachedSyncIterable
+  }
+}
+
+declare module '@fluent/sequence' {
+  import { CachedSyncIterable } from 'cached-iterable'
+  import { FluentBundle } from '@fluent/bundle'
+
+  export function mapBundleSync(iterable: CachedSyncIterable, key: string): FluentBundle
+}
+
 declare module '@fluent/bundle' {
   export interface FluentBundleContructorOptions {
     functions?: object

test/__snapshots__/change-language.test.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`language change can work with multiple bundles 1`] = `<a href="/foo">текст посилання</a>`;
+
+exports[`language change falls back to previous bundle 1`] = `<a href="/foo">link text</a>`;

test/change-language.test.ts

@@ -0,0 +1,78 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+import ftl from '@fluent/dedent'
+
+import FluentVue from '../src'
+
+describe('language change', () => {
+  let options: any
+  let bundleEn: FluentBundle
+  let bundleUk: FluentBundle
+
+  beforeEach(() => {
+    const localVue = createLocalVue()
+    localVue.use(FluentVue)
+
+    bundleEn = new FluentBundle('en-US', {
+      useIsolating: false
+    })
+
+    bundleUk = new FluentBundle('uk-UA', {
+      useIsolating: false
+    })
+
+    const fluent = new FluentVue({
+      bundles: [bundleUk, bundleEn]
+    })
+
+    options = {
+      fluent,
+      localVue
+    }
+  })
+
+  it('can work with multiple bundles', () => {
+    // Arrange
+    bundleEn.addResource(
+      new FluentResource(ftl`
+      link = link text
+      `)
+    )
+
+    bundleUk.addResource(
+      new FluentResource(ftl`
+      link = текст посилання
+      `)
+    )
+
+    const component = {
+      template: `<a v-t:link href="/foo">Fallback text</a>`
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+  })
+
+  it('falls back to previous bundle', () => {
+    // Arrange
+    bundleEn.addResource(
+      new FluentResource(ftl`
+      link = link text
+      `)
+    )
+
+    const component = {
+      template: `<a v-t:link href="/foo">Fallback text</a>`
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted).toMatchSnapshot()
+  })
+})

test/directive.test.ts

@@ -18,7 +18,7 @@ describe('directive', () => {
     })
 
     const fluent = new FluentVue({
-      bundle
+      bundles: [bundle]
     })
 
     options = {

test/error-handling.test.ts

@@ -21,7 +21,7 @@ describe('vue integration', () => {
   )
 
   const fluent = new FluentVue({
-    bundle
+    bundles: [bundle]
   })
 
   const options = {

test/vue-integration.test.ts

@@ -21,7 +21,7 @@ describe('vue integration', () => {
   )
 
   const fluent = new FluentVue({
-    bundle
+    bundles: [bundle]
   })
 
   const options = {

types/index.d.ts

@@ -2,13 +2,14 @@ import { Vue } from 'vue/types/vue'
 import { FluentBundle, MessageInfo, Pattern } from '@fluent/bundle'
 
 export interface FluentVueObject {
-  getMessage(key: string): MessageInfo | undefined
-  formatPattern(message: Pattern, value?: object, errors?: string[]): string
+  getBundle(key: string): FluentBundle | null
+  getMessage(bundle: FluentBundle | null, key: string): MessageInfo | null
+  formatPattern(bundle: FluentBundle, message: Pattern, value?: object, errors?: string[]): string
   format(key: string, value?: object): string
 }
 
 export interface FluentVueOptions {
-  bundle: FluentBundle
+  bundles: FluentBundle[]
 }
 
 declare module 'vue/types/vue' {