fluent-vue · Demivan · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023
diff --git a/__tests__/changeLanguage.spec.ts b/__tests__/changeLanguage.spec.ts
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest'

-import { nextTick } from 'vue-demi'
+import { isVue3, nextTick } from 'vue-demi'
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'

 import type { FluentVue } from '../src'
-import { createFluentVue } from '../src'
+import { createFluentVue, useFluent } from '../src'
 import { mountWithFluent } from './utils'

 describe('language change', () => {
@@ -104,6 +104,111 @@ describe('language change', () => {
    expect(mounted.html()).toEqual('<a href="/foo">link text</a>')
  })

+  it('updates locale even if component is unmounted github.com/orgs/fluent-vue/discussions/834', async () => {
+    // Arrange
+    bundleEn = new FluentBundle('en-US')
+    bundleUk = new FluentBundle('uk-UA')
+
+    const fluent = createFluentVue({
+      bundles: [bundleUk],
+    })
+
+    const child = {
+      template: '<span>{{ $t("child") }}</span>',
+      fluent: {
+        'en-US': new FluentResource(ftl`
+        child = Child message
+        `),
+        'uk-UA': new FluentResource(ftl`
+        child = Повідомлення
+        `),
+      },
+    }
+
+    const component = {
+      components: {
+        child,
+      },
+      data: () => ({
+        show: true,
+      }),
+      template: '<child v-if="show" />',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    expect(mounted.html()).toEqual('<span>Повідомлення</span>')
+
+    await mounted.setData({ show: false })
+
+    if (isVue3)
+      expect(mounted.html()).toEqual('<!--v-if-->')
+    else
+      expect(mounted.html()).toEqual('')
+
+    fluent.bundles = [bundleEn]
+
+    await mounted.setData({ show: true })
+
+    // Assert
+    expect(mounted.html()).toEqual('<span>Child message</span>')
+  })
+
+  it('useFluent updates locale even if component is unmounted github.com/orgs/fluent-vue/discussions/834', async () => {
+    // Arrange
+    bundleEn = new FluentBundle('en-US')
+    bundleUk = new FluentBundle('uk-UA')
+
+    const fluent = createFluentVue({
+      bundles: [bundleUk],
+    })
+
+    const child = {
+      setup() {
+        useFluent()
+      },
+      template: '<span>{{ $t("child") }}</span>',
+      fluent: {
+        'en-US': new FluentResource(ftl`
+        child = Child message
+        `),
+        'uk-UA': new FluentResource(ftl`
+        child = Повідомлення
+        `),
+      },
+    }
+
+    const component = {
+      components: {
+        child,
+      },
+      data: () => ({
+        show: true,
+      }),
+      template: '<child v-if="show" />',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    expect(mounted.html()).toEqual('<span>Повідомлення</span>')
+
+    await mounted.setData({ show: false })
+
+    if (isVue3)
+      expect(mounted.html()).toEqual('<!--v-if-->')
+    else
+      expect(mounted.html()).toEqual('')
+
+    fluent.bundles = [bundleEn]
+
+    await mounted.setData({ show: true })
+
+    // Assert
+    expect(mounted.html()).toEqual('<span>Child message</span>')
+  })
+
  it('works when dynamically adding bundles', async () => {
    // Arrange
    bundleEn = new FluentBundle('en-US')

diff --git a/src/composition.ts b/src/composition.ts
@@ -12,5 +12,5 @@ export function useFluent(): TranslationContext {
  const rootContext = inject(RootContextSymbol)
  assert(rootContext != null, 'useFluent called without installing plugin')

-  return getContext(rootContext, instance.proxy)
+  return getContext(rootContext, instance.proxy, true)
 }
diff --git a/src/getContext.ts b/src/getContext.ts
@@ -13,6 +13,7 @@ function * flatMap<T, TR>(iterable: Iterable<T>, mapper: (element: T) => TR[]):
 export function getContext(
  rootContext: TranslationContext,
  instance: VueComponent | null | undefined,
+  fromSetup = false,
 ): TranslationContext {
  if (instance == null)
    return rootContext
@@ -50,7 +51,10 @@ export function getContext(

  const context = new TranslationContext(overriddenBundles, rootContext.options)

-  options._fluent = context
+  // If we are in script setup, we cannot cache the context
+  // because after component is unmounted, computed will not be updated
+  if (!fromSetup)
+    options._fluent = context

  return context
 }
diff --git a/src/types/vue.d.ts b/src/types/vue.d.ts
@@ -1,14 +1,17 @@
 import type Vue from 'vue-2'
 import type { FluentResource } from '@fluent/bundle'
-import type { FluentVue } from '../index'
+import type { TranslationContext } from '../TranslationContext'

 declare module 'vue-2/types/options' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface ComponentOptions<V extends Vue> {
    fluent?: Record<string, FluentResource>

    /** @private */
-    _fluent?: FluentVue
+    _fluent?: TranslationContext
+
+    /** @private */
+    _fluentSetup?: TranslationContext
  }
 }