feat: optimizeTranslationDirective option (#377)

* refactor: drop legacy code

* refactor: extract options resolving

* docs: add `enableSsrTranslationDirective` option

* refactor: extract resource logic as plugin

* update option name

* fix: update deps

* fix: vue3 first class

* fix: implementation

* fix: add raise error for webpack

* fix: remove unnecesary hmr codes

Author: kazupon

.gitignore

@@ -17,3 +17,4 @@ examples/**/dist
 .yarn/*
 !.yarn/releases
 !.yarn/plugins
+*.tgz

package.json

@@ -47,7 +47,7 @@
     "@types/webpack-merge": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-vue": "^1.2.5",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/compiler-sfc": "^3.2.23",
     "babel-loader": "^8.2.2",
     "chalk": "^4.1.1",
@@ -82,13 +82,13 @@
     "typescript": "^4.9.3",
     "vite": "^4.4.9",
     "vitest": "^0.29.8",
-    "vue": "^2.6.14",
+    "vue": "^3.2.25",
     "vue-i18n": "next",
     "vue-loader": "^16.3.0",
     "vue-loader15": "npm:[email protected]",
     "vue-loader17": "npm:[email protected]",
     "vue-template-compiler": "^2.6.14",
-    "vue3": "npm:vue@3.3.4",
+    "vue2": "npm:vue@^2.6.14",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

packages/rollup-plugin-vue-i18n/examples/rollup.config.js

@@ -25,7 +25,7 @@ export default [
         entries: {
           vue: path.resolve(
             __dirname,
-            '../../../node_modules/vue3/dist/vue.esm-bundler.js'
+            '../../../node_modules/vue/dist/vue.esm-bundler.js'
           )
         }
       }),

packages/unplugin-vue-i18n/README.md

@@ -374,7 +374,7 @@ Whether to tree-shake message compiler when we will be bundling.
 
 If do you will use this option, you need to enable `jitCompilation` option.
 
-> [NOTE]
+> [!NOTE]
 > After v5 or later, this option can be set with or without `jitCompilation`.
 
 > [!NOTE]
@@ -571,6 +571,18 @@ If do you will use this option, you need to enable `jitCompilation` option.
   `useVueI18nImportName` option is deprecated in v5.
   This option will be supported with vue-i18n until v9 latest version.
 
+### `optimizeTranslationDirective`
+
+- **Type**: `boolean` | `string` | `string[]`
+- **Default:** `false`
+
+  Whether to optimize `v-t` directive. If set to `true`, this plugin's transform will automatically translate to vue-i18n's translation function. If you need SSR, you must activate this option.
+
+  If you want to put it manually, you can specify the signature of the translation function as a string or a string array.
+
+  > [!WARNING]
+  About for manually signature, see the details [vue-i18n-extensions API docs](https://github.com/intlify/vue-i18n-extensions/blob/next/docs/%40intlify/vue-i18n-extensions-api.md#translationsignatures) and [usecase from vue-i18n-extensions PR](https://github.com/intlify/vue-i18n-extensions/pull/217/files#diff-3fb9543f91e011d4b0dc9beff44082fe1a99c9eab70c1afab23c3c34352b7c38R121-R200)
+
 ## 📜 Changelog
 
 Details changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/bundle-tools/blob/main/packages/unplugin-vue-i18n/CHANGELOG.md)

packages/unplugin-vue-i18n/e2e/vite.test.js

@@ -8,12 +8,14 @@ describe('vite', () => {
     await expect(page).toMatch('こんにちは、世界！')
     await expect(page).toMatch('バナナが欲しい？')
     await expect(page).toMatch('バナナ 0 個')
+    await expect(page).toMatch('やあ！')
   })
 
   test('change locale', async () => {
     await page.select('#app select', 'en')
     await expect(page).toMatch('Language')
     await expect(page).toMatch('hello, world!')
+    await expect(page).toMatch('Hi!')
   })
 
   test('change banana select', async () => {

packages/unplugin-vue-i18n/examples/vite/src/App.vue

@@ -7,6 +7,7 @@
     </select>
   </form>
   <p>{{ t('hello') }}</p>
+  <p v-t="'hi'"></p>
   <Banana />
 </template>
 
@@ -29,15 +30,17 @@ export default {
 }
 </script>
 
-<i18n>
+<i18n lang="json">
 {
   "en": {
     "language": "Language",
-    "hello": "hello, world!"
+    "hello": "hello, world!",
+    "hi": "Hi!"
   },
   "ja": {
     "language": "言語",
-    "hello": "こんにちは、世界！"
+    "hello": "こんにちは、世界！",
+    "hi": "やあ！"
   }
 }
 </i18n>

packages/unplugin-vue-i18n/examples/vite/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     alias: {
       vue: path.resolve(
         __dirname,
-        '../../../../node_modules/vue3/dist/vue.esm-bundler.js'
+        '../../../../node_modules/vue/dist/vue.esm-bundler.js'
       )
     }
   },
@@ -20,7 +20,8 @@ export default defineConfig({
   plugins: [
     vue(),
     vueI18n({
-      include: path.resolve(__dirname, './src/locales/**')
+      include: path.resolve(__dirname, './src/locales/**'),
+      optimizeTranslationDirective: true
     })
   ]
 })

packages/unplugin-vue-i18n/package.json

@@ -11,33 +11,34 @@
   },
   "peerDependencies": {
     "petite-vue-i18n": "*",
-    "vue-i18n": "*",
-    "vue-i18n-bridge": "*"
+    "vue": "^3.2.25",
+    "vue-i18n": "*"
   },
   "peerDependenciesMeta": {
     "petite-vue-i18n": {
       "optional": true
     },
     "vue-i18n": {
       "optional": true
-    },
-    "vue-i18n-bridge": {
-      "optional": true
     }
   },
   "dependencies": {
+    "@eslint-community/eslint-utils": "^4.4.0",
     "@intlify/bundle-utils": "^9.0.0-beta.0",
     "@intlify/shared": "next",
+    "@intlify/vue-i18n-extensions": "^6.2.0",
     "@rollup/pluginutils": "^5.1.0",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@typescript-eslint/scope-manager": "^7.13.0",
+    "@typescript-eslint/typescript-estree": "^7.13.0",
     "debug": "^4.3.3",
     "fast-glob": "^3.2.12",
     "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
     "pathe": "^1.0.0",
     "picocolors": "^1.0.0",
     "source-map-js": "^1.0.2",
-    "unplugin": "^1.1.0"
+    "unplugin": "^1.1.0",
+    "vue": "^3.4"
   },
   "devDependencies": {
     "unbuild": "^2.0.0"