fix: v-t directive reactivity (#1086)

* fix: v-t directive reactivity

closes #1083

* refactor

* remove

* fix

* fix eslint warnings

Author: kazupon

packages/vue-i18n-core/src/directive.ts

@@ -1,11 +1,20 @@
+import { watch } from 'vue'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 import { createI18nError, I18nErrorCodes } from './errors'
-import { isString, isPlainObject, isNumber, warn } from '@intlify/shared'
+import {
+  isString,
+  isPlainObject,
+  isNumber,
+  warn,
+  inBrowser
+} from '@intlify/shared'
 
 import type {
   DirectiveBinding,
   ObjectDirective,
-  ComponentInternalInstance
+  WatchStopHandle,
+  ComponentInternalInstance,
+  VNode
 } from 'vue'
 import type { I18n, I18nInternal } from './i18n'
 import type { VueI18nInternal } from './legacy'
@@ -20,6 +29,13 @@ type VTDirectiveValue = {
   plural?: number
 }
 
+declare global {
+  interface HTMLElement {
+    __i18nWatcher?: WatchStopHandle
+    __composer?: Composer
+  }
+}
+
 function getComposer(
   i18n: I18n,
   instance: ComponentInternalInstance
@@ -73,7 +89,7 @@ function getComposer(
 export type TranslationDirective<T = HTMLElement> = ObjectDirective<T>
 
 export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
-  const bind = (
+  const register = (
     el: HTMLElement,
     { instance, value, modifiers }: DirectiveBinding
   ): void => {
@@ -88,15 +104,49 @@ export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
     }
 
     const parsedValue = parseValue(value)
-    // el.textContent = composer.t(...makeParams(parsedValue))
+    if (inBrowser && i18n.global === composer) {
+      // global scope only
+      el.__i18nWatcher = watch(composer.locale, () => {
+        instance.$forceUpdate()
+      })
+    }
+    el.__composer = composer
     el.textContent = Reflect.apply(composer.t, composer, [
       ...makeParams(parsedValue)
     ])
   }
 
+  const unregister = (el: HTMLElement): void => {
+    if (inBrowser && el.__i18nWatcher) {
+      el.__i18nWatcher()
+      el.__i18nWatcher = undefined
+      delete el.__i18nWatcher
+    }
+    if (el.__composer) {
+      el.__composer = undefined
+      delete el.__composer
+    }
+  }
+
+  const update = (el: HTMLElement, { value }: DirectiveBinding): void => {
+    if (el.__composer) {
+      const composer = el.__composer
+      const parsedValue = parseValue(value)
+      el.textContent = Reflect.apply(composer.t, composer, [
+        ...makeParams(parsedValue)
+      ])
+    }
+  }
+
   return {
-    beforeMount: bind,
-    beforeUpdate: bind
+    created: register,
+    unmounted: unregister,
+    beforeUpdate: update,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getSSRProps: (binding: DirectiveBinding, vnode: VNode) => {
+      // TODO: support SSR
+      throw new Error('v-t still is not supported in SSR fully')
+    }
   } as TranslationDirective<HTMLElement>
 }
 

packages/vue-i18n-core/test/issues.test.ts

@@ -9,7 +9,14 @@ jest.mock('@intlify/shared', () => ({
 }))
 import { warn } from '@intlify/shared'
 
-import { ref, defineComponent } from 'vue'
+import {
+  ref,
+  defineComponent,
+  h,
+  withDirectives,
+  resolveDirective,
+  nextTick
+} from 'vue'
 import {
   setDevToolsHook,
   compileToFunction,
@@ -608,3 +615,73 @@ test('issue #1055', async () => {
 
   expect(wrapper.html()).toMatchSnapshot()
 })
+
+test('issue #1083', async () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        hello_world: 'Hello World!'
+      },
+      ja: {
+        hello_world: 'こんにちは世界！'
+      }
+    }
+  })
+
+  const LanguageSelector = defineComponent({
+    setup() {
+      const { locale, availableLocales } = useI18n({
+        useScope: 'global'
+      })
+      function selectLocale(newLocale: string) {
+        locale.value = newLocale
+      }
+      return { availableLocales, selectLocale, locale }
+    },
+    template: `<div>
+  <div :id="l" v-for="l in availableLocales" @click="selectLocale(l)">
+    {{ l }}
+  </div>
+  <p id="locale">{{ locale }}</p>
+<div>`
+  })
+
+  const HelloWorld = defineComponent({
+    setup() {
+      const t = resolveDirective('t')
+      return () => {
+        return withDirectives(h('h1', { id: 'v-t' }), [
+          [t!, { path: 'hello_world' }]
+        ])
+      }
+    }
+  })
+
+  const App = defineComponent({
+    components: {
+      LanguageSelector,
+      HelloWorld
+    },
+    template: `
+  <HelloWorld />
+  <LanguageSelector />
+`
+  })
+
+  const wrapper = await mount(App, i18n)
+
+  const enEl = wrapper.rootEl.querySelector('#en')
+  const jaEl = wrapper.rootEl.querySelector('#ja')
+  const dirEl = wrapper.rootEl.querySelector('#v-t')
+  expect(dirEl!.textContent).toEqual('Hello World!')
+
+  jaEl!.dispatchEvent(new Event('click'))
+  await nextTick()
+  expect(dirEl!.textContent).toEqual('こんにちは世界！')
+
+  enEl!.dispatchEvent(new Event('click'))
+  await nextTick()
+  expect(dirEl!.textContent).toEqual('Hello World!')
+})