@intlify/unplugin-vue-i18n 0.1.2 → 0.3.0

package/CHANGELOG.md

@@ -1,4 +1,37 @@
 
+## @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
+* [#118](https://github.com/intlify/bundle-tools/pull/118) fix(unplugin-vue-i18n): code transforming strictly ([@kazupon](https://github.com/kazupon))
+
+#### Committers: 1
+- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
+
+
+## @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

package/README.md

@@ -28,11 +28,11 @@ npm i @intlify/unplugin-vue-i18n
 
 ```ts
 // vite.config.ts
-import vueI18n from 'unplugin-vue-i18n/vite'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 
 export default defineConfig({
   plugins: [
-    vueI18n({ /* options */ }),
+    VueI18nPlugin({ /* options */ }),
   ],
 })
 ```
@@ -43,7 +43,7 @@ export default defineConfig({
 <summary>Webpack</summary><br>
 
 ```ts
-const VueI18nPlugin = require('unplugin-vue-i18n/webpack')
+const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')
 
 // webpack.config.js
 module.exports = {
@@ -56,6 +56,187 @@ 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
+
+Since `vue-i18n@v9.x`, the locale messages are handled with message compiler, which converts them to javascript functions after compiling. After compiling, message compiler converts them into javascript functions, which can improve the performance of the application.
+
+However, with the message compiler, the javascript function conversion will not work in some environments (e.g. CSP). For this reason, `vue-i18n@v9.x` and later offer a full version that includes compiler and runtime, and a runtime only version.
+
+If you are using the runtime version, you will need to compile before importing locale messages by managing them in a file such as `.json`.
+
+
+### i18n custom block
+
+The below example that `examples/vite/src/App.vue` have `i18n` custom block:
+
+```vue
+<template>
+  <form>
+    <label>{{ t('language') }}</label>
+    <select v-model="locale">
+      <option value="en">en</option>
+      <option value="ja">ja</option>
+    </select>
+  </form>
+  <p>{{ t('hello') }}</p>
+  <Banana />
+</template>
+
+<script>
+import { useI18n } from 'vue-i18n'
+import Banana from './Banana.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Banana
+  },
+  setup() {
+    const { t, locale } = useI18n({
+      inheritLocale: true,
+      useScope: 'local'
+    })
+    return { t, locale }
+  }
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "language": "Language",
+    "hello": "hello, world!"
+  },
+  "ja": {
+    "language": "言語",
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+```
+
+### Locale Messages formatting
+
+You can be used by specifying the following format in the `lang` attribute:
+
+- json (default)
+- yaml
+- yml
+- json5
+
+example `yaml` format:
+
+```vue
+<i18n lang="yaml">
+en:
+  hello: 'Hello World!'
+ja:
+  hello: 'こんにちは、世界！'
+</i18n>
+```
+
+### Static bundle importing
+
+unplugin-vue-i18n allows you to statically bundle i18n resources such as `json` or `yaml` specified by the [`include` option](#include) of the plugin described below as locale messages with the `import` syntax.
+
+In this case, only one i18n resource can be statically bundled at a time with `import` syntax, so the these code will be redundant for multiple locales.
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+/*
+ * The i18n resources in the path specified in the plugin `include` option can be read
+ * as vue-i18n optimized locale messages using the import syntax
+ */
+import en from './src/locales/en.json'
+import ja from './src/locales/ja.yaml'
+import fr from './src/locales/fr.json5'
+
+const i18n = createI18n({
+  locale: 'en',
+  messages: {
+    en,
+    ja,
+    fr
+  }
+})
+
+const app = createApp()
+app.use(i18n).mount('#app')
+```
+
+unplugin-vue-i18n can use the bundler virtual mechanism to import all locales at once, using the special identifier `@intlify/unplugin-vue-i18n/messages`, as the bellow:
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+/*
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages'
+
+const i18n = createI18n({
+  locale: 'en',
+  messages
+})
+
+const app = createApp()
+app.use(i18n).mount('#app')
+```
+
+### Types
+
+If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplugin-vue-i18n/messages` to `compilerOptions.types` of your tsconfig:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@intlify/unplugin-vue-i18n/messages"]
+  }
+}
+```
+
+
+## 📦 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
 
@@ -73,7 +254,43 @@ module.exports = {
   - yml
   ```
 
-  Note `json` resources matches this option, it will be handled **before the internal json plugin of Vite, and will not be processed afterwards**, else the option doesn't match, the Vite side will handle.
+  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`
 
@@ -206,10 +423,7 @@ module.exports = {
 
 
 ## ✅ TODO
-- [ ] Virtual resource importing 
 - [ ] Bundling optimizations
-- [ ] i18n custom block birdge mode (for vite)
-- [ ] Support nuxt
 
 ## 📜 Changelog
 

package/lib/index.cjs

@@ -116,12 +116,46 @@ 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 {
     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 +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)$/,
@@ -189,7 +240,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) {
@@ -251,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,12 +105,46 @@ 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 {
     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 +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)$/,
@@ -178,7 +229,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) {
@@ -240,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/messages.d.ts

@@ -0,0 +1,5 @@
+declare module '@intlify/unplugin-vue-i18n/messages' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const messages: any
+  export default messages
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlify/unplugin-vue-i18n",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "unplugin for Vue I18n",
   "author": {
     "name": "kazuya kawaguchi",
@@ -79,6 +79,9 @@
     "./types": {
       "types": "./types.d.ts"
     },
+    "./messages": {
+      "types": "./messages.d.ts"
+    },
     "./lib/*": "./lib/*",
     "./package.json": "./package.json"
   },