fix: i18n component not working with message overrides (#236)

Author: Demivan

packages/fluent-vue/__tests__/vue/component.spec.ts

@@ -48,6 +48,57 @@ describe('component', () => {
     expect(mounted.html()).toEqual(`<span>Inner data</span>`)
   })
 
+  it('works with grandparent translations', () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Inner data
+      `)
+    )
+
+    const child = {
+      template: '<b><slot /></b>',
+    }
+
+    const component = {
+      components: {
+        child,
+      },
+      template: '<div><child><i18n path="key"></i18n></child></div>',
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted.html()).toEqual(`<div><b><span>Inner data</span></b></div>`)
+  })
+
+  it('works with local component messages', () => {
+    // Arrange
+    const child = {
+      template: '<b><slot /></b>',
+    }
+
+    const component = {
+      components: {
+        child,
+      },
+      template: '<div><child><i18n path="i18n-key"></i18n></child></div>',
+      fluent: {
+        'en-US': new FluentResource(ftl`
+        i18n-key = Inner data
+        `),
+      },
+    }
+
+    // Act
+    const mounted = mount(component, options)
+
+    // Assert
+    expect(mounted.html()).toEqual(`<div><b><span>Inner data</span></b></div>`)
+  })
+
   it('interpolates components', () => {
     // Arrange
     bundle.addResource(

packages/fluent-vue/src/composition.ts

@@ -7,6 +7,10 @@ import { inheritBundle } from './inheritBundle'
 import { RootContextSymbol } from './symbols'
 
 export function getContext(rootContext: TranslationContext, instance: any): TranslationContext {
+  if (instance == null) {
+    return rootContext
+  }
+
   const target = instance.$options ?? instance.type
   if (target._fluent != null) {
     return target._fluent

packages/fluent-vue/src/vue/component.ts

@@ -2,8 +2,15 @@ import { defineComponent, h, getCurrentInstance, Vue, inject, computed } from 'v
 import { getContext } from '../composition'
 import { RootContextSymbol } from '../symbols'
 
-function getParent(instance: Vue | null): Vue {
-  return instance?.$parent ?? (instance as any)?.parent.proxy
+function getParentWithFluent(instance: Vue | null): Vue {
+  const parent = instance?.$parent ?? (instance as any)?.parent?.proxy
+  const target = parent?.$options ?? parent?.type
+
+  if (target != null && target.fluent == null) {
+    return getParentWithFluent(parent)
+  }
+
+  return parent
 }
 
 export default defineComponent({
@@ -27,7 +34,7 @@ export default defineComponent({
     const translation = computed(() => {
       const rootContext = inject(RootContextSymbol)!
       const instance = getCurrentInstance()
-      const parent = getParent(instance)
+      const parent = getParentWithFluent(instance)
       const fluent = getContext(rootContext, parent)
       return fluent.format(props.path, params)
     })