@intlify/unplugin-vue-i18n 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,4 +1,19 @@
 
+## @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,19 @@ 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)
+
+
 ## 🔧 Options
 
 ### `include`
@@ -217,6 +256,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`
@@ -349,7 +424,6 @@ If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplu
 
 ## ✅ TODO
 - [ ] Bundling optimizations
-- [ ] Support nuxt
 
 ## 📜 Changelog
 

package/lib/index.cjs

@@ -116,6 +116,12 @@ 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 = shared.isBoolean(options.compositionOnly) ? options.compositionOnly : true;
+  debug("compositionOnly", compositionOnly);
+  const fullInstall = shared.isBoolean(options.fullInstall) ? options.fullInstall : true;
+  debug("fullInstall", fullInstall);
   let isProduction = false;
   let sourceMap = false;
   return {
@@ -131,6 +137,25 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
       }
     },
     vite: {
+      config(config, { command }) {
+        normalizeConfigResolveAlias(config.resolve, meta.framework);
+        if (command === "build" && runtimeOnly) {
+          if (shared.isArray(config.resolve.alias)) {
+            config.resolve.alias.push({
+              find: "vue-i18n",
+              replacement: `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`
+            });
+          } else if (shared.isObject(config.resolve.alias)) {
+            config.resolve.alias["vue-i18n"] = `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`;
+          }
+        }
+        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 +181,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)$/,
@@ -259,6 +301,33 @@ 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) {
+    console.warn(`[@intlify/unplugin-vue-i18n] webpack not found, please install webpack.`);
+  }
+  return webpack;
+}
 async function generateBundleResources(resources, query, isProduction, {
   forceStringify = false,
   isGlobal = false,

package/lib/index.mjs

@@ -2,7 +2,7 @@ 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 { parse as parse$1 } from '@vue/compiler-sfc';
@@ -105,6 +105,12 @@ 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 = isBoolean(options.compositionOnly) ? options.compositionOnly : true;
+  debug("compositionOnly", compositionOnly);
+  const fullInstall = isBoolean(options.fullInstall) ? options.fullInstall : true;
+  debug("fullInstall", fullInstall);
   let isProduction = false;
   let sourceMap = false;
   return {
@@ -120,6 +126,25 @@ const unplugin = createUnplugin((options = {}, meta) => {
       }
     },
     vite: {
+      config(config, { command }) {
+        normalizeConfigResolveAlias(config.resolve, meta.framework);
+        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`
+            });
+          } else if (isObject(config.resolve.alias)) {
+            config.resolve.alias["vue-i18n"] = `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js`;
+          }
+        }
+        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 +170,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)$/,
@@ -248,6 +290,33 @@ 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) {
+    console.warn(`[@intlify/unplugin-vue-i18n] webpack not found, please install webpack.`);
+  }
+  return webpack;
+}
 async function generateBundleResources(resources, query, isProduction, {
   forceStringify = false,
   isGlobal = false,

package/lib/types.d.ts

@@ -1,6 +1,9 @@
 declare type SFCLangFormat = 'json' | 'json5' | 'yml' | 'yaml';
 interface PluginOptions {
     include?: string | string[];
+    runtimeOnly?: boolean;
+    compositionOnly?: boolean;
+    fullInstall?: boolean;
     forceStringify?: boolean;
     defaultSFCLang?: SFCLangFormat;
     globalSFCScope?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlify/unplugin-vue-i18n",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "unplugin for Vue I18n",
   "author": {
     "name": "kazuya kawaguchi",