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

.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:vue-loader@15.11.1",
  "vue-loader17": "npm:vue-loader@17.4.2",
  "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"