feat: vue-i18n-loader bridge mode (#241)

README.md

@@ -1,4 +1,4 @@
-# :globe_with_meridians: vue-cli-plugin-i18n
+# 🌏 vue-cli-plugin-i18n
 
 [![npm](https://img.shields.io/npm/v/vue-cli-plugin-i18n/next.svg)](https://www.npmjs.com/package/vue-cli-plugin-i18n)
 [![npm](https://img.shields.io/npm/v/vue-cli-plugin-i18n.svg)](https://www.npmjs.com/package/vue-cli-plugin-i18n)
@@ -7,14 +7,14 @@
 
 Vue CLI plugin to add vue-i18n to your Vue Project
 
-## :star: Features
+## 🌟 Features
 - [vue-i18n](https://github.com/kazupon/vue-i18n) basic scaffolding
 - Locale messages in Single File components with [vue-i18n-loader](https://github.com/intlify/vue-i18n-loader)
 - Locale messages missing & unused reporting (experimental)
 - Env Variables
 
 
-## :rocket: Getting Started
+## 🚀 Getting Started
 If yon don't have a project created with Vue CLI:
 
 ```sh
@@ -28,7 +28,7 @@ cd my-vue-app
 vue add i18n
 ```
 
-## :hammer: Injected Commands
+## 🔨 Injected Commands
 - **`vue-cli-service i18n:report`** (experimental)
 
   Report the missing locale message keys and unused keys.
@@ -37,7 +37,7 @@ vue add i18n
 > `vue-cli-service i18n:report` cannot detect missing and unused keys from local messages of i18n custom blocks.
 
 
-## :clipboard: Env variables
+## 📋 Env variables
 When vue-i18n code files had been scaffolded into your project, the following env variables generate into `.env`:
 
 - **`VUE_APP_I18N_LOCALE`**
@@ -51,7 +51,7 @@ When vue-i18n code files had been scaffolded into your project, the following en
 These env variables are read in `src/i18n.(js|ts)`.
 
 
-## :wrench: Configrations
+## 🔧 Configrations
 
 `vue-cli-plugin-i18n` have some plugin options in `vue.config.js`:
 
@@ -106,6 +106,14 @@ module.exports = {
 
   Wheather use legacy mode API in Vue I18n. Default `No` in prompt, for Vue 3 and Vue I18n v9 or later.
 
+### `enableBridge`
+
+- **Type:** `boolean`
+- **Default in prompt:** `false`
+- **Support project Vue version:** Vue 2 only
+
+  Whether to set up a birdge to migrate to `vue-i18n@v9.x` from `vue-i18n@v8.26`, Default `No` in prompt.
+
 ### `runtimeOnly`
 - **Type:** `boolean`
 - **Default(No Prompt):** `false`
@@ -139,21 +147,21 @@ module.exports = {
   For more details, See [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags)
 
 
-## :scroll: Changelog
+## 📜 Changelog
 Details changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/vue-cli-plugin-i18n/blob/master/CHANGELOG.md).
 
 
-## :exclamation: Issues
+## ❗ Issues
 Please make sure to read the [Issue Reporting Checklist](https://github.com/intlify/vue-cli-plugin-i18n/blob/master/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.
 
 
-## :white_check_mark: TODO
+## ✅ TODO
 Managed with [GitHub Projects](https://github.com/intlify/vue-cli-plugin-i18n/projects/1)
 
-## :muscle: Contribution
+## 💪 Contribution
 Please make sure to read the [Contributing Guide](https://github.com/intlify/vue-cli-plugin-i18n/blob/master/.github/CONTRIBUTING.md) before making a pull request.
 
 
-## :copyright: License
+## ©️ License
 
 [MIT](http://opensource.org/licenses/MIT)

generator/index.js

@@ -13,7 +13,8 @@ module.exports = (api, options, rootOptions) => {
     fallbackLocale,
     localeDir,
     enableLegacy,
-    enableInSFC
+    enableInSFC,
+    enableBridge
   } = options
   debug('options', options)
   debug('rootOptions', rootOptions)
@@ -59,11 +60,16 @@ module.exports = (api, options, rootOptions) => {
       pkg.vue.pluginOptions.i18n['compositionOnly'] = !!enableLegacy
       pkg.vue.pluginOptions.i18n['fullInstall'] = true
     } else {
-      pkg.dependencies['vue-i18n'] = '^8.26.1'
+      pkg.dependencies['vue-i18n'] = '^8.26.3'
       if (enableInSFC) {
         pkg.devDependencies['@intlify/vue-i18n-loader'] = '^1.1.0'
       }
       pkg.vue.pluginOptions.i18n['enableInSFC'] = enableInSFC
+      if (enableBridge) {
+        pkg.devDependencies['@intlify/vue-i18n-loader'] = '^3.2.0'
+        pkg.dependencies['vue-i18n-bridge'] = '^9.2.0-beta.10'
+      }
+      pkg.vue.pluginOptions.i18n['enableBridge'] = enableBridge
     }
     debug('pkg', pkg)
 

index.js

@@ -8,6 +8,7 @@ module.exports = (api, options) => {
     localeDir,
     runtimeOnly,
     enableLegacy,
+    enableBridge,
     compositionOnly,
     fullInstall
   } = options.pluginOptions.i18n
@@ -73,15 +74,44 @@ module.exports = (api, options) => {
       debug('chainWebpack called')
 
       if (enableInSFC) {
-        // prettier-ignore
-        webpackConfig.module
-          .rule('i18n')
-          .resourceQuery(/blockType=i18n/)
-          .type('javascript/auto')
-          .use('i18n')
-            .loader('@intlify/vue-i18n-loader')
+        if (!enableBridge) {
+          // prettier-ignore
+          webpackConfig.module
+            .rule('i18n')
+            .resourceQuery(/blockType=i18n/)
+            .type('javascript/auto')
+            .use('i18n')
+              .loader('@intlify/vue-i18n-loader')
+              .end()
             .end()
-          .end()
+        } else {
+          // prettier-ignore
+          webpackConfig.module
+            .rule('i18n-resource')
+            .test(/\.(json5?|ya?ml)$/)
+              .include.add(path.resolve(__dirname, '../../', `./src/${localeDir}`))
+              .end()
+            .type('javascript/auto')
+            .use('i18n-resource')
+              .loader('@intlify/vue-i18n-loader')
+              .options({ bridge: true })
+          // prettier-ignore
+          webpackConfig.module
+            .rule('i18n')
+            .resourceQuery(/blockType=i18n/)
+            .type('javascript/auto')
+            .use('i18n')
+              .loader('@intlify/vue-i18n-loader')
+              .options({ bridge: true })
+
+          if (runtimeOnly) {
+            webpackConfig.resolve.alias.set(
+              'vue-i18n-bridge',
+              'vue-i18n-bridge/dist/vue-i18n-bridge.runtime.esm-bundler.js'
+            )
+            debug('set vue-i18n-bridge runtime only')
+          }
+        }
       }
     })
   }

prompts.js

@@ -45,6 +45,13 @@ module.exports = pkg => {
       message: 'Enable locale messages in Single file components ?',
       default: false
     })
+    prompts.push({
+      type: 'confirm',
+      name: 'enableBridge',
+      message:
+        'Whether to set up a birdge to migrate to vue-i18n@v9.x from vue-i18n@v8.26',
+      default: false
+    })
   }
 
   debug('prompts', prompts)

tests/e2e/javascript.spec.js

@@ -24,6 +24,9 @@ test(`javascript project`, async () => {
     {
       useDefault: true
     },
+    {
+      useDefault: true
+    },
     {
       useDefault: true
     }

tests/e2e/typescript.spec.js

@@ -29,6 +29,9 @@ test(`typescript project`, async () => {
     },
     {
       confirm: true
+    },
+    {
+      useDefault: true
     }
   ])
   const project = await create(projectName, { plugins })

tests/unit/generator.spec.js

@@ -23,7 +23,7 @@ test('javascript', async () => {
   const locale = files['src/locales/en.json']
   expect(locale).toMatch(`{\n  "message": "hello i18n !!"\n}`)
   const pack = files['package.json']
-  expect(pack).toMatch(`"vue-i18n": "^8.26.1"`)
+  expect(pack).toMatch(`"vue-i18n": "^8.26.3"`)
   expect(pack).not.toMatch(`"@intlify/vue-i18n-loader": "^1.1.0"`)
 })
 
@@ -57,6 +57,46 @@ test('typescript', async () => {
   const sfc = files['src/components/HelloI18n.vue']
   expect(sfc).toMatch(`export default Vue.extend({`)
   const pack = files['package.json']
-  expect(pack).toMatch(`"vue-i18n": "^8.26.1"`)
+  expect(pack).toMatch(`"vue-i18n": "^8.26.3"`)
   expect(pack).toMatch(`"@intlify/vue-i18n-loader": "^1.1.0"`)
 })
+
+test('bridge', async () => {
+  const projectName = 'vue-i18n-gen-ts-bridge'
+  const { files } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: () => {},
+      options: { projectName }
+    },
+    {
+      id: '@vue/cli-plugin-typescript',
+      apply: () => {},
+      options: { projectName }
+    },
+    {
+      id: 'i18n',
+      apply: require('../../generator'),
+      options: {
+        locale: 'ja',
+        localeDir: 'loc',
+        enableInSFC: true,
+        enableBridge: true
+      }
+    }
+  ])
+
+  // check files
+  const i18n = files['src/i18n.ts']
+  expect(i18n).toMatch(
+    `const locales = require.context('./loc', true, /[A-Za-z0-9-_,\\s]+\\.json$/i)`
+  )
+  const locale = files['src/loc/ja.json']
+  expect(locale).toMatch(`{\n  "message": "hello i18n !!"\n}`)
+  const sfc = files['src/components/HelloI18n.vue']
+  expect(sfc).toMatch(`export default Vue.extend({`)
+  const pack = files['package.json']
+  expect(pack).toMatch(`"vue-i18n": "^8.26.3"`)
+  expect(pack).toMatch(`"vue-i18n-bridge": "^9.2.0-beta.10"`)
+  expect(pack).toMatch(`"@intlify/vue-i18n-loader": "^3.2.0"`)
+})