From 0ef6d8b31a5e052a3326de3054e017d175af8b90 Mon Sep 17 00:00:00 2001
From: kazuya kawaguchi <kawakazu80@gmail.com>
Date: Thu, 4 Jul 2024 12:27:38 +0900
Subject: [PATCH] feat: v-t directive SSR fully (#3014)

---
 specs/basic_usage.spec.ts                        | 12 ++++++++++++
 specs/fixtures/basic_usage/config/i18n.config.ts |  6 ++++--
 specs/fixtures/basic_usage/pages/index.vue       |  4 ++++
 src/bundler.ts                                   |  2 ++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/specs/basic_usage.spec.ts b/specs/basic_usage.spec.ts
index 16f169dfc..5f266a097 100644
--- a/specs/basic_usage.spec.ts
+++ b/specs/basic_usage.spec.ts
@@ -75,6 +75,18 @@ describe('basic usage', async () => {
     expect(await page.url()).include('/user/profile?foo=1')
   })
 
+  test('`v-t` directive SSR', async () => {
+    const pageHTML = await $fetch('/')
+    const pageDOM = getDom(pageHTML)
+    expect(pageDOM.querySelector('#t-directive #t-directive-path')?.textContent).toEqual('Welcome')
+    expect(pageDOM.querySelector('#t-directive #t-directive-argument')?.textContent).toEqual('Hello directive!')
+
+    const pageHTMLFrench = await $fetch('/fr')
+    const pageDOMFrench = getDom(pageHTMLFrench)
+    expect(pageDOMFrench.querySelector('#t-directive #t-directive-path')?.textContent).toEqual('Bienvenue')
+    expect(pageDOMFrench.querySelector('#t-directive #t-directive-argument')?.textContent).toEqual('Bonjour directive!')
+  })
+
   test('nuxt context extension', async () => {
     const { page } = await renderPage('/nuxt-context-extension')
 
diff --git a/specs/fixtures/basic_usage/config/i18n.config.ts b/specs/fixtures/basic_usage/config/i18n.config.ts
index a792d4239..084f049e1 100644
--- a/specs/fixtures/basic_usage/config/i18n.config.ts
+++ b/specs/fixtures/basic_usage/config/i18n.config.ts
@@ -16,7 +16,8 @@ export default defineI18nConfig(() => {
         snakeCaseText: "@.snakeCase:{'aboutSite'}",
         pascalCaseText: "@.pascalCase:{'aboutSite'}",
         hello: 'Bonjour le monde!',
-        modifier: "@.snakeCase:{'hello'}"
+        modifier: "@.snakeCase:{'hello'}",
+        helloMessage: 'Bonjour {name}!'
       },
       en: {
         home: 'Homepage',
@@ -28,7 +29,8 @@ export default defineI18nConfig(() => {
         hello: 'Hello world!',
         modifier: "@.snakeCase:{'hello'}",
         fallbackMessage: 'This is the fallback message!',
-        runtimeKey: config.public.runtimeValue
+        runtimeKey: config.public.runtimeValue,
+        helloMessage: 'Hello {name}!'
       },
       nl: {
         aboutSite: 'Over deze site',
diff --git a/specs/fixtures/basic_usage/pages/index.vue b/specs/fixtures/basic_usage/pages/index.vue
index 2798104db..2bee42e1b 100644
--- a/specs/fixtures/basic_usage/pages/index.vue
+++ b/specs/fixtures/basic_usage/pages/index.vue
@@ -98,6 +98,10 @@ useHead({
       >:
       <code id="home-use-locale-head">{{ i18nHead }}</code>
     </section>
+    <section id="t-directive">
+      <p id="t-directive-path" v-t="'welcome'"></p>
+      <p id="t-directive-argument" v-t="{ path: 'helloMessage', args: { name: 'directive' } }"></p>
+    </section>
     <section id="locale-path-usages">
       <h3>localePath</h3>
       <ul>
diff --git a/src/bundler.ts b/src/bundler.ts
index f70db9a5c..c8b1f779f 100644
--- a/src/bundler.ts
+++ b/src/bundler.ts
@@ -57,6 +57,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
       compositionOnly: nuxtOptions.bundle.compositionOnly,
       onlyLocales: nuxtOptions.bundle.onlyLocales,
       dropMessageCompiler: nuxtOptions.bundle.dropMessageCompiler,
+      optimizeTranslationDirective: true,
       strictMessage: nuxtOptions.compilation.strictMessage,
       escapeHtml: nuxtOptions.compilation.escapeHtml
     }
@@ -104,6 +105,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
     fullInstall: nuxtOptions.bundle.fullInstall,
     onlyLocales: nuxtOptions.bundle.onlyLocales,
     dropMessageCompiler: nuxtOptions.bundle.dropMessageCompiler,
+    optimizeTranslationDirective: true,
     strictMessage: nuxtOptions.compilation.strictMessage,
     escapeHtml: nuxtOptions.compilation.escapeHtml,
     defaultSFCLang: nuxtOptions.customBlocks.defaultSFCLang,