feat(unplugin-vue-i18n): support petite-vue-i18n and useVueI18nImportName option (#156)

Author: kazupon

packages/unplugin-vue-i18n/README.md

@@ -237,6 +237,13 @@ This plugin will automatically select and bundle Vue I18n build according to the
 
 About details, See the [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only)
 
+### For `petite-vue-i18n`
+
+This plugin will automatically select and bundle `petite-vue-i18n` build according to the following vite behavior:
+
+- vite dev: `petite-vue-i18n.esm-bundler.js`
+- vite build: `petite-vue-i18n.runtime.esm-bundler.js`
+
 
 ## 🔧 Options
 
@@ -428,9 +435,15 @@ About details, See the [here](https://vue-i18n.intlify.dev/guide/advanced/optimi
 
   This option that to use i18n custom blocks in `vue-class-component`.
 
+### `useVueI18nImportName` (Experimental)
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  Whether to use the import name of `petite-vue-i18n` with the same import name as vue-i18n (`import { xxx } from 'vue-i18n'`).
+
+  This option allows a smooth migration from `petite-vue-i18n` to `vue-i18n` and allows progressive enhacement.
 
-## ✅ TODO
-- [ ] Bundling optimizations
 
 ## 📜 Changelog
 

packages/unplugin-vue-i18n/src/index.ts

@@ -12,7 +12,11 @@ import {
   assign
 } from '@intlify/shared'
 import { createFilter } from '@rollup/pluginutils'
-import { generateJSON, generateYAML } from '@intlify/bundle-utils'
+import {
+  generateJSON,
+  generateYAML,
+  checkInstallPackage
+} from '@intlify/bundle-utils'
 import { RawSourceMap } from 'source-map'
 import { parse } from '@vue/compiler-sfc'
 import { parseVueRequest, VueQuery } from './query'
@@ -30,6 +34,8 @@ const VIRTUAL_PREFIX = '\0'
 
 const debug = createDebug('unplugin-vue-i18n')
 
+const installedPkg = checkInstallPackage('@intlify/unplugin-vue-i18n', debug)
+
 export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
   debug('plugin options:', options, meta.framework)
 
@@ -64,16 +70,35 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
     : true
   debug('runtimeOnly', runtimeOnly)
 
-  const compositionOnly = isBoolean(options.compositionOnly)
-    ? options.compositionOnly
+  // prettier-ignore
+  const compositionOnly = installedPkg === 'vue-i18n'
+    ? isBoolean(options.compositionOnly)
+      ? options.compositionOnly
+      : true
     : true
   debug('compositionOnly', compositionOnly)
 
-  const fullInstall = isBoolean(options.fullInstall)
-    ? options.fullInstall
-    : true
+  // prettier-ignore
+  const fullInstall = installedPkg === 'vue-i18n'
+    ? isBoolean(options.fullInstall)
+      ? options.fullInstall
+      : true
+    : false
   debug('fullInstall', fullInstall)
 
+  const useVueI18nImportName = options.useVueI18nImportName
+  if (useVueI18nImportName != null) {
+    warn(`'useVueI18nImportName' option is experimental`)
+  }
+  debug('useVueI18nImportName', useVueI18nImportName)
+
+  const getAliasName = () =>
+    installedPkg === 'petite-vue-i18n' &&
+    isBoolean(useVueI18nImportName) &&
+    useVueI18nImportName
+      ? 'vue-i18n'
+      : `${installedPkg}`
+
   const esm = isBoolean(options.esm) ? options.esm : true
   debug('esm', esm)
 
@@ -99,15 +124,37 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
         if (command === 'build' && runtimeOnly) {
           if (isArray(config.resolve!.alias)) {
             config.resolve!.alias.push({
-              find: 'vue-i18n',
-              replacement: `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`
+              find: getAliasName(),
+              replacement: `${installedPkg}/dist/${installedPkg}.runtime.esm-bundler.js`
             })
           } else if (isObject(config.resolve!.alias)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ;(config.resolve!.alias as any)[
+              getAliasName()
+            ] = `${installedPkg}/dist/${installedPkg}.runtime.esm-bundler.js`
+          }
+          debug(`alias name: ${getAliasName()}`)
+          debug(
+            `set ${installedPkg} runtime only: ${installedPkg}/dist/${installedPkg}.runtime.esm-bundler.js`
+          )
+        } else if (
+          command === 'serve' &&
+          installedPkg === 'petite-vue-i18n' &&
+          useVueI18nImportName
+        ) {
+          normalizeConfigResolveAlias(config.resolve, meta.framework)
+          if (isArray(config.resolve!.alias)) {
+            config.resolve!.alias.push({
+              find: 'vue-i18n',
+              replacement: `petite-vue-i18n/dist/petite-vue-i18n.esm-bundler.js`
+            })
+          } else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             ;(config.resolve!.alias as any)[
               'vue-i18n'
-            ] = `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`
+            ] = `petite-vue-i18n/dist/petite-vue-i18n.esm-bundler.js`
           }
+          debug(`alias name: ${getAliasName()}`)
         }
 
         config.define = config.define || {}

packages/unplugin-vue-i18n/src/types.ts

@@ -10,4 +10,5 @@ export interface PluginOptions {
   globalSFCScope?: boolean
   bridge?: boolean
   useClassComponent?: boolean
+  useVueI18nImportName?: boolean
 }