@intlify/unplugin-vue-i18n 0.2.1 → 0.5.0

package/CHANGELOG.md

@@ -1,4 +1,41 @@
 
+## @intlify/unplugin-vue-i18n@0.5.0 (2022-07-26)
+
+#### :star: Features
+* [#156](https://github.com/intlify/bundle-tools/pull/156) feat(unplugin-vue-i18n): support petite-vue-i18n and useVueI18nImportName option ([@kazupon](https://github.com/kazupon))
+
+#### :zap: Improvement Features
+* [#155](https://github.com/intlify/bundle-tools/pull/155) fix(unplugin-vue-i18n): improve wrong virtual module implementation ([@kazupon](https://github.com/kazupon))
+* [#154](https://github.com/intlify/bundle-tools/pull/154) fix(unplugin-vue-i18n): support unplugin v0.8 ([@kazupon](https://github.com/kazupon))
+
+#### Committers: 1
+- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
+
+
+## @intlify/unplugin-vue-i18n@0.4.0 (2022-07-07)
+
+#### :star: Features
+* [#138](https://github.com/intlify/bundle-tools/pull/138) feat(unplugin-vue-i18n): support esm options for bridge ([@kazupon](https://github.com/kazupon))
+
+#### Committers: 1
+- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
+
+
+## @intlify/unplugin-vue-i18n@0.3.0 (2022-07-07)
+
+#### :star: Features
+* [#136](https://github.com/intlify/bundle-tools/pull/136) feat(unplugin-vue-i18n): support fullinstall option ([@kazupon](https://github.com/kazupon))
+* [#135](https://github.com/intlify/bundle-tools/pull/135) feat(unplugin-vue-i18n): support composition only option ([@kazupon](https://github.com/kazupon))
+* [#134](https://github.com/intlify/bundle-tools/pull/134) feat(unplugin-vue-i18n): support runtimeOnly option ([@kazupon](https://github.com/kazupon))
+
+#### :pencil: Documentation
+* [#133](https://github.com/intlify/bundle-tools/pull/133) docs: consistent plugin name and add Nuxt ([@Atinux](https://github.com/Atinux))
+
+#### Committers: 2
+- Sébastien Chopin ([@Atinux](https://github.com/Atinux))
+- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
+
+
 ## @intlify/unplugin-vue-i18n@0.2.1 (2022-05-07)
 
 #### :bug: Bug Fixes

package/README.md

@@ -28,11 +28,11 @@ npm i @intlify/unplugin-vue-i18n
 
 ```ts
 // vite.config.ts
-import vueI18n from '@intlify/unplugin-vue-i18n/vite'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 
 export default defineConfig({
   plugins: [
-    vueI18n({ /* options */ }),
+    VueI18nPlugin({ /* options */ }),
   ],
 })
 ```
@@ -56,6 +56,32 @@ module.exports = {
 
 <br></details>
 
+<details>
+<summary>Nuxt</summary><br>
+
+```ts
+// nuxt.config.ts
+import { defineNuxtConfig } from 'nuxt'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n'
+
+export default defineNuxtConfig({
+  vite: {
+    plugins: [
+      VueI18nPlugin.vite({ /* options */ }),
+    ],
+  },
+  // When using Webpack
+  // builder: '@nuxt/webpack-builder',
+  webpack: {
+    plugins: [
+      VueI18nPlugin.webpack({ /* options */ }),
+    ]
+  }
+})
+```
+
+<br></details>
+
 ## 🚀 Usage
 
 ### i18n resources pre-compilation
@@ -199,6 +225,26 @@ If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplu
 }
 ```
 
+
+## 📦 Automatic bundling
+### For Vue I18n
+As noted [here](https://vue-i18n.intlify.dev/installation.html#explanation-of-different-builds), NPM provides many different builds of Vue I18n.
+
+This plugin will automatically select and bundle Vue I18n build according to the following behavior:
+
+- development: `vue-i18n.esm-bundler.js`
+- production: `vue-i18n.runtime.esm-bundler.js`
+
+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
 
 ### `include`
@@ -217,6 +263,42 @@ If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplu
 
   Note `json` resources matches this option, it will be handled **before the internal json plugin of bundler, and will not be processed afterwards**, else the option doesn't match, the bundler side will handle.
 
+### `runtimeOnly`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether or not to automatically use Vue I18n **runtime-only** in production build, set `vue-i18n.runtime.esm-bundler.js` in the `vue-i18n` field of bundler config, the below:
+  
+  ```
+  - vite config: `resolve.alias`
+  - webpack config: `resolve.alias`
+  ```
+
+  If `false` is specified, Vue I18n (vue-i18n) package.json `module` field will be used.
+
+  For more details, See [here](#-automatic-bundling)
+
+### `compositionOnly`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether to make vue-i18n API only composition API. **By default the legacy API is tree-shaken.**
+
+  For more details, See [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags)
+
+### `fullInstall`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether to install the full set of APIs, components, etc. provided by Vue I18n. By default, all of them will be installed.
+
+  If `false` is specified, **buld-in components and directive will not be installed in vue and will be tree-shaken.**
+
+  For more details, See [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags)
+
 ### `forceStringify`
 
 - **Type:** `boolean`
@@ -339,6 +421,13 @@ If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplu
 
   > ⚠️ Note that if you set `bridge: true`, the bundle size will increase. It is recommended to disable this mode after the migration from vue-i18n@v8.26 to vue-i18n@v9.x is completed.
 
+### `esm`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  For `bridge` option is `true`, whether to bundle locale resources with ESM. By default ESM, if you need to bundl with commonjs for especialy webpack, you need to set `false`
+
 ### `useClassComponent`
 
 - **Type:** `boolean`
@@ -346,10 +435,15 @@ If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplu
 
   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
-- [ ] Support nuxt
 
 ## 📜 Changelog
 

package/lib/index.cjs

@@ -13,6 +13,7 @@ const compilerSfc = require('@vue/compiler-sfc');
 const JSON5 = require('json5');
 const yaml = require('js-yaml');
 const fs = require('fs');
+const pc = require('picocolors');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -20,6 +21,7 @@ const createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
 const fg__default = /*#__PURE__*/_interopDefaultLegacy(fg);
 const JSON5__default = /*#__PURE__*/_interopDefaultLegacy(JSON5);
 const yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
+const pc__default = /*#__PURE__*/_interopDefaultLegacy(pc);
 
 function parseVueRequest(id) {
   const [filename, rawQuery] = id.split(`?`, 2);
@@ -81,10 +83,10 @@ function convert(source, lang) {
 }
 
 function warn(...args) {
-  console.warn(`[unplugin-vue-i18n] `, ...args);
+  console.warn(pc__default.yellow(pc__default.bold(`[unplugin-vue-i18n] `)), ...args);
 }
 function error(...args) {
-  console.error(`[unplugin-vue-i18n] `, ...args);
+  console.error(pc__default.red(pc__default.bold(`[unplugin-vue-i18n] `)), ...args);
 }
 async function getRaw(path) {
   return fs.promises.readFile(path, { encoding: "utf-8" });
@@ -95,7 +97,9 @@ function raiseError(message) {
 
 const INTLIFY_BUNDLE_IMPORT_ID = "@intlify/unplugin-vue-i18n/messages";
 const INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID = "@intlify/vite-plugin-vue-i18n/messages";
+const VIRTUAL_PREFIX = "\0";
 const debug = createDebug__default("unplugin-vue-i18n");
+const installedPkg = bundleUtils.checkInstallPackage("@intlify/unplugin-vue-i18n", debug);
 const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
   debug("plugin options:", options, meta.framework);
   if (!["vite", "webpack"].includes(meta.framework)) {
@@ -116,21 +120,58 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
   const useClassComponent = !!options.useClassComponent;
   const bridge = !!options.bridge;
   debug("bridge", bridge);
+  const runtimeOnly = shared.isBoolean(options.runtimeOnly) ? options.runtimeOnly : true;
+  debug("runtimeOnly", runtimeOnly);
+  const compositionOnly = installedPkg === "vue-i18n" ? shared.isBoolean(options.compositionOnly) ? options.compositionOnly : true : true;
+  debug("compositionOnly", compositionOnly);
+  const fullInstall = installedPkg === "vue-i18n" ? shared.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" && shared.isBoolean(useVueI18nImportName) && useVueI18nImportName ? "vue-i18n" : `${installedPkg}`;
+  const esm = shared.isBoolean(options.esm) ? options.esm : true;
+  debug("esm", esm);
   let isProduction = false;
   let sourceMap = false;
   return {
     name: "unplugin-vue-i18n",
     enforce: meta.framework === "vite" ? "pre" : "post",
-    transformInclude(id) {
-      debug("transformInclude", id);
-      if (meta.framework === "vite") {
-        return true;
-      } else {
-        const { filename } = parseVueRequest(id);
-        return filename.endsWith("vue") || filename.endsWith(INTLIFY_BUNDLE_IMPORT_ID) || filename.endsWith(INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID) ? true : /\.(json5?|ya?ml)$/.test(id) && filter(id);
-      }
-    },
     vite: {
+      config(config, { command }) {
+        normalizeConfigResolveAlias(config.resolve, meta.framework);
+        if (command === "build" && runtimeOnly) {
+          if (shared.isArray(config.resolve.alias)) {
+            config.resolve.alias.push({
+              find: getAliasName(),
+              replacement: `${installedPkg}/dist/${installedPkg}.runtime.esm-bundler.js`
+            });
+          } else if (shared.isObject(config.resolve.alias)) {
+            config.resolve.alias[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 (shared.isArray(config.resolve.alias)) {
+            config.resolve.alias.push({
+              find: "vue-i18n",
+              replacement: `petite-vue-i18n/dist/petite-vue-i18n.esm-bundler.js`
+            });
+          } else {
+            config.resolve.alias["vue-i18n"] = `petite-vue-i18n/dist/petite-vue-i18n.esm-bundler.js`;
+          }
+          debug(`alias name: ${getAliasName()}`);
+        }
+        config.define = config.define || {};
+        config.define["__VUE_I18N_LEGACY_API__"] = !compositionOnly;
+        debug(`set __VUE_I18N_LEGACY_API__ is '${config.define["__VUE_I18N_LEGACY_API__"]}'`);
+        config.define["__VUE_I18N_FULL_INSTALL__"] = fullInstall;
+        debug(`set __VUE_I18N_FULL_INSTALL__ is '${config.define["__VUE_I18N_FULL_INSTALL__"]}'`);
+        config.define["__VUE_I18N_PROD_DEVTOOLS__"] = false;
+      },
       configResolved(config) {
         isProduction = config.isProduction;
         sourceMap = config.command === "build" ? !!config.build.sourcemap : false;
@@ -156,6 +197,23 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
       isProduction = compiler.options.mode !== "development";
       sourceMap = !!compiler.options.devtool;
       debug(`webpack: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+      if (isProduction && runtimeOnly) {
+        normalizeConfigResolveAlias(compiler.options.resolve, meta.framework);
+        compiler.options.resolve.alias["vue-i18n"] = `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`;
+      }
+      loadWebpack().then((webpack) => {
+        if (webpack) {
+          compiler.options.plugins.push(new webpack.DefinePlugin({
+            __VUE_I18N_LEGACY_API__: JSON.stringify(compositionOnly),
+            __VUE_I18N_FULL_INSTALL__: JSON.stringify(fullInstall),
+            __INTLIFY_PROD_DEVTOOLS__: "false"
+          }));
+          debug(`set __VUE_I18N_LEGACY_API__ is '${compositionOnly}'`);
+          debug(`set __VUE_I18N_FULL_INSTALL__ is '${fullInstall}'`);
+        } else {
+          debug("ignore vue-i18n feature flags with webpack.DefinePlugin");
+        }
+      });
       if (compiler.options.module) {
         compiler.options.module.rules.push({
           test: /\.(json5?|ya?ml)$/,
@@ -168,16 +226,16 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
       debug("resolveId", id, importer);
       if (id === INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID) {
         warn(`deprected '${INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID}', you should switch to '${INTLIFY_BUNDLE_IMPORT_ID}'`);
-        return id;
+        return asVirtualId(id, meta.framework);
       }
       if (id === INTLIFY_BUNDLE_IMPORT_ID) {
-        return id;
+        return asVirtualId(id, meta.framework);
       }
     },
     async load(id) {
       debug("load", id);
       const { query } = parseVueRequest(id);
-      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(id) && include) {
+      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(getVirtualId(id, meta.framework)) && include) {
         let resourcePaths = [];
         const includePaths = shared.isArray(include) ? include : [include];
         for (const inc of includePaths) {
@@ -187,6 +245,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         const code = await generateBundleResources(resourcePaths, query, isProduction, {
           forceStringify,
           bridge,
+          exportESM: esm,
           useClassComponent
         });
         return {
@@ -195,6 +254,15 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         };
       }
     },
+    transformInclude(id) {
+      debug("transformInclude", id);
+      if (meta.framework === "vite") {
+        return true;
+      } else {
+        const { filename } = parseVueRequest(id);
+        return filename.endsWith("vue") || filename.endsWith(INTLIFY_BUNDLE_IMPORT_ID) || filename.endsWith(INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID) || /\.(json5?|ya?ml)$/.test(filename) && filter(filename);
+      }
+    },
     async transform(code, id) {
       const { filename, query } = parseVueRequest(id);
       debug("transform", id, JSON.stringify(query), filename);
@@ -209,6 +277,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -241,6 +310,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -259,10 +329,38 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
     }
   };
 });
+function normalizeConfigResolveAlias(resolve, framework) {
+  if (resolve && resolve.alias) {
+    return;
+  }
+  if (!resolve) {
+    if (framework === "vite") {
+      resolve = { alias: [] };
+    } else if (framework === "webpack") {
+      resolve = { alias: {} };
+    }
+  } else if (!resolve.alias) {
+    if (framework === "vite") {
+      resolve.alias = [];
+    } else if (framework === "webpack") {
+      resolve.alias = {};
+    }
+  }
+}
+async function loadWebpack() {
+  let webpack = null;
+  try {
+    webpack = await import('webpack').then((m) => m.default || m);
+  } catch (e) {
+    warn(`webpack not found, please install webpack.`);
+  }
+  return webpack;
+}
 async function generateBundleResources(resources, query, isProduction, {
   forceStringify = false,
   isGlobal = false,
   bridge = false,
+  exportESM = true,
   useClassComponent = false
 }) {
   const codes = [];
@@ -276,6 +374,7 @@ async function generateBundleResources(resources, query, isProduction, {
         isGlobal,
         useClassComponent,
         bridge,
+        exportESM,
         forceStringify
       });
       parseOptions.type = "bare";
@@ -324,6 +423,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
   forceStringify = false,
   isGlobal = false,
   bridge = false,
+  exportESM = true,
   useClassComponent = false
 }) {
   const mode = isProduction ? "production" : "development";
@@ -334,6 +434,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
     forceStringify,
     useClassComponent,
     bridge,
+    exportESM,
     env: mode,
     onWarn: (msg) => {
       warn(`${filename} ${msg}`);
@@ -355,6 +456,12 @@ function getOptions(filename, isProduction, query, sourceMap, {
     });
   }
 }
+function getVirtualId(id, framework = "vite") {
+  return framework === "vite" ? id.startsWith(VIRTUAL_PREFIX) ? id.slice(VIRTUAL_PREFIX.length) : "" : id;
+}
+function asVirtualId(id, framework = "vite") {
+  return framework === "vite" ? VIRTUAL_PREFIX + id : id;
+}
 
 exports["default"] = unplugin;
 exports.unplugin = unplugin;

package/lib/index.mjs

@@ -2,13 +2,14 @@ import { createUnplugin } from 'unplugin';
 import { normalize, parse } from 'pathe';
 import createDebug from 'debug';
 import fg from 'fast-glob';
-import { isString, isArray, isEmptyObject, isNumber, assign } from '@intlify/shared';
+import { isString, isArray, isBoolean, isObject, isEmptyObject, isNumber, assign } from '@intlify/shared';
 import { createFilter } from '@rollup/pluginutils';
-import { generateJSON, generateYAML } from '@intlify/bundle-utils';
+import { checkInstallPackage, generateJSON, generateYAML } from '@intlify/bundle-utils';
 import { parse as parse$1 } from '@vue/compiler-sfc';
 import JSON5 from 'json5';
 import yaml from 'js-yaml';
 import { promises } from 'fs';
+import pc from 'picocolors';
 
 function parseVueRequest(id) {
   const [filename, rawQuery] = id.split(`?`, 2);
@@ -70,10 +71,10 @@ function convert(source, lang) {
 }
 
 function warn(...args) {
-  console.warn(`[unplugin-vue-i18n] `, ...args);
+  console.warn(pc.yellow(pc.bold(`[unplugin-vue-i18n] `)), ...args);
 }
 function error(...args) {
-  console.error(`[unplugin-vue-i18n] `, ...args);
+  console.error(pc.red(pc.bold(`[unplugin-vue-i18n] `)), ...args);
 }
 async function getRaw(path) {
   return promises.readFile(path, { encoding: "utf-8" });
@@ -84,7 +85,9 @@ function raiseError(message) {
 
 const INTLIFY_BUNDLE_IMPORT_ID = "@intlify/unplugin-vue-i18n/messages";
 const INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID = "@intlify/vite-plugin-vue-i18n/messages";
+const VIRTUAL_PREFIX = "\0";
 const debug = createDebug("unplugin-vue-i18n");
+const installedPkg = checkInstallPackage("@intlify/unplugin-vue-i18n", debug);
 const unplugin = createUnplugin((options = {}, meta) => {
   debug("plugin options:", options, meta.framework);
   if (!["vite", "webpack"].includes(meta.framework)) {
@@ -105,21 +108,58 @@ const unplugin = createUnplugin((options = {}, meta) => {
   const useClassComponent = !!options.useClassComponent;
   const bridge = !!options.bridge;
   debug("bridge", bridge);
+  const runtimeOnly = isBoolean(options.runtimeOnly) ? options.runtimeOnly : true;
+  debug("runtimeOnly", runtimeOnly);
+  const compositionOnly = installedPkg === "vue-i18n" ? isBoolean(options.compositionOnly) ? options.compositionOnly : true : true;
+  debug("compositionOnly", compositionOnly);
+  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);
   let isProduction = false;
   let sourceMap = false;
   return {
     name: "unplugin-vue-i18n",
     enforce: meta.framework === "vite" ? "pre" : "post",
-    transformInclude(id) {
-      debug("transformInclude", id);
-      if (meta.framework === "vite") {
-        return true;
-      } else {
-        const { filename } = parseVueRequest(id);
-        return filename.endsWith("vue") || filename.endsWith(INTLIFY_BUNDLE_IMPORT_ID) || filename.endsWith(INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID) ? true : /\.(json5?|ya?ml)$/.test(id) && filter(id);
-      }
-    },
     vite: {
+      config(config, { command }) {
+        normalizeConfigResolveAlias(config.resolve, meta.framework);
+        if (command === "build" && runtimeOnly) {
+          if (isArray(config.resolve.alias)) {
+            config.resolve.alias.push({
+              find: getAliasName(),
+              replacement: `${installedPkg}/dist/${installedPkg}.runtime.esm-bundler.js`
+            });
+          } else if (isObject(config.resolve.alias)) {
+            config.resolve.alias[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 {
+            config.resolve.alias["vue-i18n"] = `petite-vue-i18n/dist/petite-vue-i18n.esm-bundler.js`;
+          }
+          debug(`alias name: ${getAliasName()}`);
+        }
+        config.define = config.define || {};
+        config.define["__VUE_I18N_LEGACY_API__"] = !compositionOnly;
+        debug(`set __VUE_I18N_LEGACY_API__ is '${config.define["__VUE_I18N_LEGACY_API__"]}'`);
+        config.define["__VUE_I18N_FULL_INSTALL__"] = fullInstall;
+        debug(`set __VUE_I18N_FULL_INSTALL__ is '${config.define["__VUE_I18N_FULL_INSTALL__"]}'`);
+        config.define["__VUE_I18N_PROD_DEVTOOLS__"] = false;
+      },
       configResolved(config) {
         isProduction = config.isProduction;
         sourceMap = config.command === "build" ? !!config.build.sourcemap : false;
@@ -145,6 +185,23 @@ const unplugin = createUnplugin((options = {}, meta) => {
       isProduction = compiler.options.mode !== "development";
       sourceMap = !!compiler.options.devtool;
       debug(`webpack: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+      if (isProduction && runtimeOnly) {
+        normalizeConfigResolveAlias(compiler.options.resolve, meta.framework);
+        compiler.options.resolve.alias["vue-i18n"] = `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`;
+      }
+      loadWebpack().then((webpack) => {
+        if (webpack) {
+          compiler.options.plugins.push(new webpack.DefinePlugin({
+            __VUE_I18N_LEGACY_API__: JSON.stringify(compositionOnly),
+            __VUE_I18N_FULL_INSTALL__: JSON.stringify(fullInstall),
+            __INTLIFY_PROD_DEVTOOLS__: "false"
+          }));
+          debug(`set __VUE_I18N_LEGACY_API__ is '${compositionOnly}'`);
+          debug(`set __VUE_I18N_FULL_INSTALL__ is '${fullInstall}'`);
+        } else {
+          debug("ignore vue-i18n feature flags with webpack.DefinePlugin");
+        }
+      });
       if (compiler.options.module) {
         compiler.options.module.rules.push({
           test: /\.(json5?|ya?ml)$/,
@@ -157,16 +214,16 @@ const unplugin = createUnplugin((options = {}, meta) => {
       debug("resolveId", id, importer);
       if (id === INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID) {
         warn(`deprected '${INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID}', you should switch to '${INTLIFY_BUNDLE_IMPORT_ID}'`);
-        return id;
+        return asVirtualId(id, meta.framework);
       }
       if (id === INTLIFY_BUNDLE_IMPORT_ID) {
-        return id;
+        return asVirtualId(id, meta.framework);
       }
     },
     async load(id) {
       debug("load", id);
       const { query } = parseVueRequest(id);
-      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(id) && include) {
+      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(getVirtualId(id, meta.framework)) && include) {
         let resourcePaths = [];
         const includePaths = isArray(include) ? include : [include];
         for (const inc of includePaths) {
@@ -176,6 +233,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
         const code = await generateBundleResources(resourcePaths, query, isProduction, {
           forceStringify,
           bridge,
+          exportESM: esm,
           useClassComponent
         });
         return {
@@ -184,6 +242,15 @@ const unplugin = createUnplugin((options = {}, meta) => {
         };
       }
     },
+    transformInclude(id) {
+      debug("transformInclude", id);
+      if (meta.framework === "vite") {
+        return true;
+      } else {
+        const { filename } = parseVueRequest(id);
+        return filename.endsWith("vue") || filename.endsWith(INTLIFY_BUNDLE_IMPORT_ID) || filename.endsWith(INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID) || /\.(json5?|ya?ml)$/.test(filename) && filter(filename);
+      }
+    },
     async transform(code, id) {
       const { filename, query } = parseVueRequest(id);
       debug("transform", id, JSON.stringify(query), filename);
@@ -198,6 +265,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -230,6 +298,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -248,10 +317,38 @@ const unplugin = createUnplugin((options = {}, meta) => {
     }
   };
 });
+function normalizeConfigResolveAlias(resolve, framework) {
+  if (resolve && resolve.alias) {
+    return;
+  }
+  if (!resolve) {
+    if (framework === "vite") {
+      resolve = { alias: [] };
+    } else if (framework === "webpack") {
+      resolve = { alias: {} };
+    }
+  } else if (!resolve.alias) {
+    if (framework === "vite") {
+      resolve.alias = [];
+    } else if (framework === "webpack") {
+      resolve.alias = {};
+    }
+  }
+}
+async function loadWebpack() {
+  let webpack = null;
+  try {
+    webpack = await import('webpack').then((m) => m.default || m);
+  } catch (e) {
+    warn(`webpack not found, please install webpack.`);
+  }
+  return webpack;
+}
 async function generateBundleResources(resources, query, isProduction, {
   forceStringify = false,
   isGlobal = false,
   bridge = false,
+  exportESM = true,
   useClassComponent = false
 }) {
   const codes = [];
@@ -265,6 +362,7 @@ async function generateBundleResources(resources, query, isProduction, {
         isGlobal,
         useClassComponent,
         bridge,
+        exportESM,
         forceStringify
       });
       parseOptions.type = "bare";
@@ -313,6 +411,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
   forceStringify = false,
   isGlobal = false,
   bridge = false,
+  exportESM = true,
   useClassComponent = false
 }) {
   const mode = isProduction ? "production" : "development";
@@ -323,6 +422,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
     forceStringify,
     useClassComponent,
     bridge,
+    exportESM,
     env: mode,
     onWarn: (msg) => {
       warn(`${filename} ${msg}`);
@@ -344,5 +444,11 @@ function getOptions(filename, isProduction, query, sourceMap, {
     });
   }
 }
+function getVirtualId(id, framework = "vite") {
+  return framework === "vite" ? id.startsWith(VIRTUAL_PREFIX) ? id.slice(VIRTUAL_PREFIX.length) : "" : id;
+}
+function asVirtualId(id, framework = "vite") {
+  return framework === "vite" ? VIRTUAL_PREFIX + id : id;
+}
 
 export { unplugin as default, unplugin };

package/lib/types.d.ts

@@ -1,11 +1,16 @@
 declare type SFCLangFormat = 'json' | 'json5' | 'yml' | 'yaml';
 interface PluginOptions {
     include?: string | string[];
+    runtimeOnly?: boolean;
+    compositionOnly?: boolean;
+    fullInstall?: boolean;
+    esm?: boolean;
     forceStringify?: boolean;
     defaultSFCLang?: SFCLangFormat;
     globalSFCScope?: boolean;
     bridge?: boolean;
     useClassComponent?: boolean;
+    useVueI18nImportName?: boolean;
 }
 
 export { PluginOptions, SFCLangFormat };

package/lib/vite.cjs

@@ -12,6 +12,7 @@ require('@vue/compiler-sfc');
 require('json5');
 require('js-yaml');
 require('fs');
+require('picocolors');
 
 const vite = index.unplugin.vite;
 

package/lib/vite.mjs

@@ -10,6 +10,7 @@ import '@vue/compiler-sfc';
 import 'json5';
 import 'js-yaml';
 import 'fs';
+import 'picocolors';
 
 const vite = unplugin.vite;
 

package/lib/webpack.cjs

@@ -12,6 +12,7 @@ require('@vue/compiler-sfc');
 require('json5');
 require('js-yaml');
 require('fs');
+require('picocolors');
 
 const webpack = index.unplugin.webpack;
 

package/lib/webpack.mjs

@@ -10,6 +10,7 @@ import '@vue/compiler-sfc';
 import 'json5';
 import 'js-yaml';
 import 'fs';
+import 'picocolors';
 
 const webpack = unplugin.webpack;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlify/unplugin-vue-i18n",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "description": "unplugin for Vue I18n",
   "author": {
     "name": "kazuya kawaguchi",
@@ -31,15 +31,16 @@
     "js-yaml": "^4.1.0",
     "json5": "^2.2.0",
     "pathe": "^0.2.0",
+    "picocolors": "^1.0.0",
     "source-map": "0.6.1",
-    "unplugin": "^0.6.2"
+    "unplugin": "^0.8.0"
   },
   "devDependencies": {
     "mlly": "^0.5.2",
     "unbuild": "^0.7.4"
   },
   "engines": {
-    "node": ">= 12"
+    "node": ">= 14.16"
   },
   "files": [
     "lib",