diff --git a/__tests__/changeLanguage.spec.ts b/__tests__/changeLanguage.spec.ts index b3c5ccee..c4a0d181 100644 --- 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('link text') }) + 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: '{{ $t("child") }}', + fluent: { + 'en-US': new FluentResource(ftl` + child = Child message + `), + 'uk-UA': new FluentResource(ftl` + child = Повідомлення + `), + }, + } + + const component = { + components: { + child, + }, + data: () => ({ + show: true, + }), + template: '', + } + + // Act + const mounted = mountWithFluent(fluent, component) + + expect(mounted.html()).toEqual('Повідомлення') + + await mounted.setData({ show: false }) + + if (isVue3) + expect(mounted.html()).toEqual('') + else + expect(mounted.html()).toEqual('') + + fluent.bundles = [bundleEn] + + await mounted.setData({ show: true }) + + // Assert + expect(mounted.html()).toEqual('Child message') + }) + + 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: '{{ $t("child") }}', + fluent: { + 'en-US': new FluentResource(ftl` + child = Child message + `), + 'uk-UA': new FluentResource(ftl` + child = Повідомлення + `), + }, + } + + const component = { + components: { + child, + }, + data: () => ({ + show: true, + }), + template: '', + } + + // Act + const mounted = mountWithFluent(fluent, component) + + expect(mounted.html()).toEqual('Повідомлення') + + await mounted.setData({ show: false }) + + if (isVue3) + expect(mounted.html()).toEqual('') + else + expect(mounted.html()).toEqual('') + + fluent.bundles = [bundleEn] + + await mounted.setData({ show: true }) + + // Assert + expect(mounted.html()).toEqual('Child message') + }) + it('works when dynamically adding bundles', async () => { // Arrange bundleEn = new FluentBundle('en-US') diff --git a/src/composition.ts b/src/composition.ts index e074f1c0..e1f5f3a5 100644 --- 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 index 365f8a51..f5113dfb 100644 --- a/src/getContext.ts +++ b/src/getContext.ts @@ -13,6 +13,7 @@ function * flatMap(iterable: Iterable, 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 index 729cee04..732acf01 100644 --- a/src/types/vue.d.ts +++ b/src/types/vue.d.ts @@ -1,6 +1,6 @@ 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 @@ -8,7 +8,10 @@ declare module 'vue-2/types/options' { fluent?: Record /** @private */ - _fluent?: FluentVue + _fluent?: TranslationContext + + /** @private */ + _fluentSetup?: TranslationContext } } pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy