feat: support SSR for v-t (#1087)

Author: kazupon

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

@@ -13,8 +13,7 @@ import type {
   DirectiveBinding,
   ObjectDirective,
   WatchStopHandle,
-  ComponentInternalInstance,
-  VNode
+  ComponentInternalInstance
 } from 'vue'
 import type { I18n, I18nInternal } from './i18n'
 import type { VueI18nInternal } from './legacy'
@@ -89,10 +88,8 @@ function getComposer(
 export type TranslationDirective<T = HTMLElement> = ObjectDirective<T>
 
 export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
-  const register = (
-    el: HTMLElement,
-    { instance, value, modifiers }: DirectiveBinding
-  ): void => {
+  function process(binding: DirectiveBinding): [string, Composer] {
+    const { instance, modifiers, value } = binding
     /* istanbul ignore if */
     if (!instance || !instance.$) {
       throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
@@ -104,16 +101,22 @@ export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
     }
 
     const parsedValue = parseValue(value)
+    return [
+      Reflect.apply(composer.t, composer, [...makeParams(parsedValue)]),
+      composer
+    ]
+  }
+
+  const register = (el: HTMLElement, binding: DirectiveBinding): void => {
+    const [textContent, composer] = process(binding)
     if (inBrowser && i18n.global === composer) {
       // global scope only
       el.__i18nWatcher = watch(composer.locale, () => {
-        instance.$forceUpdate()
+        binding.instance && binding.instance.$forceUpdate()
       })
     }
     el.__composer = composer
-    el.textContent = Reflect.apply(composer.t, composer, [
-      ...makeParams(parsedValue)
-    ])
+    el.textContent = textContent
   }
 
   const unregister = (el: HTMLElement): void => {
@@ -142,10 +145,9 @@ export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
     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')
+    getSSRProps: (binding: DirectiveBinding) => {
+      const [textContent] = process(binding)
+      return { textContent }
     }
   } as TranslationDirective<HTMLElement>
 }

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

@@ -1,4 +1,12 @@
-import { h, defineComponent, resolveComponent, createSSRApp } from 'vue'
+import {
+  h,
+  ref,
+  defineComponent,
+  resolveComponent,
+  resolveDirective,
+  withDirectives,
+  createSSRApp
+} from 'vue'
 import { renderToString } from '@vue/server-renderer'
 import {
   compileToFunction,
@@ -85,3 +93,113 @@ test('component: i18n-t', async () => {
 
   expect(await renderToString(app)).toMatch(`<p>こんにちは！</p>`)
 })
+
+describe('custom directive: v-t', () => {
+  test('basic', async () => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: {
+        en: {
+          hello: 'hello!'
+        }
+      }
+    })
+
+    const App = defineComponent({
+      setup() {
+        // <p v-t="'hello'"></p>
+        const t = resolveDirective('t')
+        return () => {
+          return withDirectives(h('p'), [[t!, 'hello']])
+        }
+      }
+    })
+    const app = createSSRApp(App)
+    app.use(i18n)
+
+    expect(await renderToString(app)).toEqual('<p>hello!</p>')
+  })
+
+  test('binding', async () => {
+    const i18n = createI18n({
+      locale: 'en',
+      messages: {
+        en: {
+          hello: 'hello!'
+        }
+      }
+    })
+
+    const App = defineComponent({
+      setup() {
+        // <p v-t="msg"></p>
+        const msg = ref('hello')
+        const t = resolveDirective('t')
+        return () => {
+          return withDirectives(h('p'), [[t!, msg.value]])
+        }
+      }
+    })
+    const app = createSSRApp(App)
+    app.use(i18n)
+
+    expect(await renderToString(app)).toEqual('<p>hello!</p>')
+  })
+
+  test('object literal', async () => {
+    const i18n = createI18n({
+      locale: 'en',
+      messages: {
+        en: {
+          hello: 'hello, {name}!'
+        },
+        ja: {
+          hello: 'こんにちは、{name}！'
+        }
+      }
+    })
+
+    const App = defineComponent({
+      setup() {
+        // <p v-t="{ path: 'hello', locale: 'ja', args: { name: name.value } }"></p>
+        const name = ref('kazupon')
+        const t = resolveDirective('t')
+        return () => {
+          return withDirectives(h('p'), [
+            [t!, { path: 'hello', locale: 'ja', args: { name: name.value } }]
+          ])
+        }
+      }
+    })
+    const app = createSSRApp(App)
+    app.use(i18n)
+
+    expect(await renderToString(app)).toEqual('<p>こんにちは、kazupon！</p>')
+  })
+
+  test('plural', async () => {
+    const i18n = createI18n({
+      locale: 'en',
+      messages: {
+        en: {
+          banana: 'no bananas | {n} banana | {n} bananas'
+        }
+      }
+    })
+
+    const App = defineComponent({
+      setup() {
+        // <p v-t="{ path: 'banana', choice: 2 }"></p>
+        const t = resolveDirective('t')
+        return () => {
+          return withDirectives(h('p'), [[t!, { path: 'banana', choice: 2 }]])
+        }
+      }
+    })
+    const app = createSSRApp(App)
+    app.use(i18n)
+
+    expect(await renderToString(app)).toEqual('<p>2 bananas</p>')
+  })
+})