@intlify/unplugin-vue-i18n 0.2.0 → 0.4.0

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`
@@ -339,6 +414,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`
@@ -349,7 +431,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,12 +116,48 @@ 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);
+  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: "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;
@@ -147,6 +183,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)$/,
@@ -178,6 +231,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         const code = await generateBundleResources(resourcePaths, query, isProduction, {
           forceStringify,
           bridge,
+          exportESM: esm,
           useClassComponent
         });
         return {
@@ -189,7 +243,6 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
     async transform(code, id) {
       const { filename, query } = parseVueRequest(id);
       debug("transform", id, JSON.stringify(query), filename);
-      debug("transform (code)", code);
       let langInfo = defaultSFCLang;
       let inSourceMap;
       if (!query.vue) {
@@ -201,6 +254,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -233,6 +287,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -251,10 +306,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) {
+    console.warn(`[@intlify/unplugin-vue-i18n] 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 = [];
@@ -268,6 +351,7 @@ async function generateBundleResources(resources, query, isProduction, {
         isGlobal,
         useClassComponent,
         bridge,
+        exportESM,
         forceStringify
       });
       parseOptions.type = "bare";
@@ -316,6 +400,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
   forceStringify = false,
   isGlobal = false,
   bridge = false,
+  exportESM = true,
   useClassComponent = false
 }) {
   const mode = isProduction ? "production" : "development";
@@ -326,6 +411,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
     forceStringify,
     useClassComponent,
     bridge,
+    exportESM,
     env: mode,
     onWarn: (msg) => {
       warn(`${filename} ${msg}`);

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,12 +105,48 @@ 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);
+  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: "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;
@@ -136,6 +172,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)$/,
@@ -167,6 +220,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
         const code = await generateBundleResources(resourcePaths, query, isProduction, {
           forceStringify,
           bridge,
+          exportESM: esm,
           useClassComponent
         });
         return {
@@ -178,7 +232,6 @@ const unplugin = createUnplugin((options = {}, meta) => {
     async transform(code, id) {
       const { filename, query } = parseVueRequest(id);
       debug("transform", id, JSON.stringify(query), filename);
-      debug("transform (code)", code);
       let langInfo = defaultSFCLang;
       let inSourceMap;
       if (!query.vue) {
@@ -190,6 +243,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -222,6 +276,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
             isGlobal: globalSFCScope,
             useClassComponent,
             bridge,
+            exportESM: esm,
             forceStringify
           });
           debug("parseOptions", parseOptions);
@@ -240,10 +295,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) {
+    console.warn(`[@intlify/unplugin-vue-i18n] 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 = [];
@@ -257,6 +340,7 @@ async function generateBundleResources(resources, query, isProduction, {
         isGlobal,
         useClassComponent,
         bridge,
+        exportESM,
         forceStringify
       });
       parseOptions.type = "bare";
@@ -305,6 +389,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
   forceStringify = false,
   isGlobal = false,
   bridge = false,
+  exportESM = true,
   useClassComponent = false
 }) {
   const mode = isProduction ? "production" : "development";
@@ -315,6 +400,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
     forceStringify,
     useClassComponent,
     bridge,
+    exportESM,
     env: mode,
     onWarn: (msg) => {
       warn(`${filename} ${msg}`);

package/lib/types.d.ts

@@ -1,6 +1,10 @@
 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;

package/package.json

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

package/CHANGELOG.md

@@ -1,39 +0,0 @@
-
-## @intlify/unplugin-vue-i18n@0.2.0 (2022-05-06)
-
-#### :star: Features
-* [#117](https://github.com/intlify/bundle-tools/pull/117) feat: support virtual resource importing ([@kazupon](https://github.com/kazupon))
-
-#### Committers: 1
-- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
-
-
-## @intlify/unplugin-vue-i18n@0.1.2 (2022-05-06)
-
-#### :bug: Bug Fixes
-* [#115](https://github.com/intlify/bundle-tools/pull/115) fix(unplugin-vue-i18n): export d.ts files ([@kazupon](https://github.com/kazupon))
-
-#### Committers: 1
-- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
-
-
-## @intlify/unplugin-vue-i18n@0.1.1 (2022-05-06)
-
-#### :bug: Bug Fixes
-* [#114](https://github.com/intlify/bundle-tools/pull/114) fix(unplugin-vue-i18n): export types ([@kazupon](https://github.com/kazupon))
-
-#### Committers: 1
-- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
-
-
-## @intlify/unplugin-vue-i18n@0.1.0 (2022-05-06)
-
-#### :star: Features
-* [#113](https://github.com/intlify/bundle-tools/pull/113) feat: unplugin basic implementation for vue-i18n ([@kazupon](https://github.com/kazupon))
-
-#### Committers: 1
-- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
-
-## @intlify/unplugin-vue-i18n@0.0.0 (2022-05-02)
-
-:tada: Initial release.