@intlify/unplugin-vue-i18n 0.0.0 → 0.1.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+
+## @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.

package/README.md

@@ -1,8 +1,215 @@
-# @intlify/unpluing-vue-i18n
+# @intlify/unplugin-vue-i18n
+
+[![Lint](https://github.com/intlify/bundle-tools/actions/workflows/lint.yml/badge.svg)](https://github.com/intlify/bundle-tools/actions/workflows/lint.yml)
+[![Test](https://github.com/intlify/bundle-tools/actions/workflows/test.yml/badge.svg)](https://github.com/intlify/bundle-tools/actions/workflows/test.yml)
+[![npm](https://img.shields.io/npm/v/@intlify/unplugin-vue-i18n.svg?color=yellow)](https://www.npmjs.com/package/@intlify/unplugin-vue-i18n)
+
 
 unplugin for Vue I18n
 
-WIP:
+## 🌟 Features
+- i18n resource pre-compilation
+- i18n custom block
+  - i18n resource definition
+  - i18n resource importing
+  - Locale of i18n resource definition
+  - Locale of i18n resource definition for global scope
+  - i18n resource formatting
+
+
+## 💿 Installation
+
+```sh
+npm i @intlify/unplugin-vue-i18n
+```
+
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import vueI18n from 'unplugin-vue-i18n/vite'
+
+export default defineConfig({
+  plugins: [
+    vueI18n({ /* options */ }),
+  ],
+})
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+const VueI18nPlugin = require('unplugin-vue-i18n/webpack')
+
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    VueI18nPlugin({ /* options */ })
+  ]
+}
+```
+
+<br></details>
+
+
+## 🔧 Options
+
+### `include`
+
+- **Type:** `string | string[] | undefined`
+- **Default:** `undefined`
+
+  A [minimatch](https://github.com/isaacs/minimatch) pattern, or array of patterns, you can specify a path to pre-compile i18n resources files. The extensions of i18n resources to be precompiled are as follows:
+
+  ```
+  - json
+  - json5
+  - yaml
+  - 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.
+
+### `forceStringify`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  Whether pre-compile number and boolean values as message functions that return the string value.
+
+  For example, the following json resources:
+
+  ```json
+  {
+    "trueValue": true,
+    "falseValue": false,
+    "nullValue": null,
+    "numberValue": 1
+  }
+  ```
+
+  after pre-compiled (development):
+
+  ```js
+  export default {
+    "trueValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["true"])};fn.source="true";return fn;})(),
+    "falseValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["false"])};fn.source="false";return fn;})(),
+    "nullValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["null"])};fn.source="null";return fn;})(),
+    "numberValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["1"])};fn.source="1";return fn;})()
+  }
+  ```
+
+### `defaultSFCLang`
+
+- **Type:** `string`
+- **Default:** `'json'`
+
+  Specify the content for all your inlined `i18n` custom blocks on your `SFC`.
+
+  `defaultSFCLang` must have one of the following values:
+
+  ```
+  - json
+  - json5
+  - yaml
+  - yml
+  ```
+
+  On inlined `i18n` custom blocks that have specified the `lang` attribute, the `defaultSFCLang` is not applied.
+
+  For example, with `defaultSFCLang: "yaml"` or `defaultSFCLang: "yml"`, this custom block:
+  ```html
+  <i18n lang="yaml">
+  en:
+    hello: Hello
+  es:
+    hello: Hola
+  </i18n>
+  ```
+
+  and this another one, are equivalent:
+  ```html
+  <i18n>
+  en:
+    hello: Hello
+  es:
+    hello: Hola
+  </i18n>
+  ```
+
+### `globalSFCScope`
+
+- **Type:** `boolean`
+- **Default:** `undefined`
+
+  Whether to include all `i18n` custom blocks on your `SFC` on `global` scope.
+
+  If `true`, it will be applied to all inlined `i18n` or `imported` custom blocks.
+
+  **Warning**: beware enabling `globalSFCScope: true`, all `i18n` custom blocks in all your `SFC` will be on `global` scope.
+
+  For example, with `globalSFCScope: true`, this custom block:
+
+  ```html
+  <i18n lang="yaml" global>
+  en:
+    hello: Hello
+  es:
+    hello: Hola
+  </i18n>
+  ```
+
+  and this another one, are equivalent:
+
+  ```html
+  <i18n lang="yaml">
+  en:
+    hello: Hello
+  es:
+    hello: Hola
+  </i18n>
+  ```
+
+  You can also use `defaultSFCLang: "yaml"`, following with previous example, this another is also equivalent to previous ones:
+
+  ```html
+  <i18n>
+  en:
+    hello: Hello
+  es:
+    hello: Hola
+  </i18n>
+  ```
+
+### `bridge`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  The mode to birdge the i18n custom block to work in both vue-i18n@v8.x and vue-i18n@v9.x environments.
+
+  To support in a smooth transition from vue-i18n@v8.x to vue-i18n@v9.x, we provide a mode that bundles the i18n custom block to be available in either version.
+
+  > ⚠️ 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.
+
+### `useClassComponent`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  This option that to use i18n custom blocks in `vue-class-component`.
+
+
+## ✅ TODO
+- [ ] Virtual resource importing 
+- [ ] Bundling optimizations
+- [ ] i18n custom block birdge mode (for vite)
+- [ ] Support nuxt
 
 ## 📜 Changelog
 

package/lib/index.cjs

@@ -0,0 +1,352 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const unplugin$1 = require('unplugin');
+const pathe = require('pathe');
+const createDebug = require('debug');
+const fg = require('fast-glob');
+const shared = require('@intlify/shared');
+const pluginutils = require('@rollup/pluginutils');
+const bundleUtils = require('@intlify/bundle-utils');
+const compilerSfc = require('@vue/compiler-sfc');
+const JSON5 = require('json5');
+const yaml = require('js-yaml');
+const fs = require('fs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+const createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
+const fg__default = /*#__PURE__*/_interopDefaultLegacy(fg);
+const JSON5__default = /*#__PURE__*/_interopDefaultLegacy(JSON5);
+const yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
+
+function parseVueRequest(id) {
+  const [filename, rawQuery] = id.split(`?`, 2);
+  const params = new URLSearchParams(rawQuery);
+  const ret = {};
+  const langPart = Object.keys(Object.fromEntries(params)).find((key) => /lang\./i.test(key));
+  ret.vue = params.has("vue");
+  ret.global = params.has("global");
+  ret.src = params.has("src");
+  ret.raw = params.has("raw");
+  if (params.has("type")) {
+    ret.type = params.get("type");
+  }
+  if (params.has("blockType")) {
+    ret.blockType = params.get("blockType");
+  }
+  if (params.has("index")) {
+    ret.index = Number(params.get("index"));
+  }
+  if (params.has("locale")) {
+    ret.locale = params.get("locale");
+  }
+  if (langPart) {
+    const [, lang] = langPart.split(".");
+    ret.lang = lang;
+  } else if (params.has("lang")) {
+    ret.lang = params.get("lang");
+  }
+  if (params.has("issuerPath")) {
+    ret.issuerPath = params.get("issuerPath");
+  }
+  return {
+    filename,
+    query: ret
+  };
+}
+
+function createBridgeCodeGenerator(source, query) {
+  return () => {
+    const data = convert(source, query.lang);
+    let value = JSON.parse(data);
+    if (shared.isString(query.locale)) {
+      value = Object.assign({}, { [query.locale]: value });
+    }
+    return JSON.stringify(value).replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029").replace(/\\/g, "\\\\").replace(/\u0027/g, "\\u0027");
+  };
+}
+function convert(source, lang) {
+  switch (lang) {
+    case "yaml":
+    case "yml":
+      const data = yaml__default.load(source);
+      return JSON.stringify(data, void 0, "	");
+    case "json5":
+      return JSON.stringify(JSON5__default.parse(source));
+    default:
+      return source;
+  }
+}
+
+function warn(...args) {
+  console.warn(`[unplugin-vue-i18n] `, ...args);
+}
+function error(...args) {
+  console.error(`[unplugin-vue-i18n] `, ...args);
+}
+async function getRaw(path) {
+  return fs.promises.readFile(path, { encoding: "utf-8" });
+}
+function raiseError(message) {
+  throw new Error(`[unplugin-vue-i18n] ${message}`);
+}
+
+const INTLIFY_BUNDLE_IMPORT_ID = "@intlify/unplugin-vue-i18n/messages";
+const INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID = "@intlify/vite-plugin-vue-i18n/messages";
+const debug = createDebug__default("unplugin-vue-i18n");
+const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
+  debug("plugin options:", options, meta.framework);
+  if (!["vite", "webpack"].includes(meta.framework)) {
+    raiseError(`This plugin is supported 'vite' and 'webpack' only`);
+  }
+  let include = options.include;
+  if (include) {
+    if (shared.isArray(include)) {
+      include = include.map((item) => pathe.normalize(item));
+    } else if (shared.isString(include)) {
+      include = pathe.normalize(include);
+    }
+  }
+  const filter = pluginutils.createFilter(include);
+  const forceStringify = !!options.forceStringify;
+  const defaultSFCLang = shared.isString(options.defaultSFCLang) ? options.defaultSFCLang : "json";
+  const globalSFCScope = !!options.globalSFCScope;
+  const useClassComponent = !!options.useClassComponent;
+  const bridge = !!options.bridge;
+  debug("bridge", bridge);
+  let isProduction = false;
+  let sourceMap = false;
+  return {
+    name: "unplugin-vue-i18n",
+    enforce: meta.framework === "vite" ? "pre" : "post",
+    vite: {
+      configResolved(config) {
+        isProduction = config.isProduction;
+        sourceMap = config.command === "build" ? !!config.build.sourcemap : false;
+        debug(`configResolved: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+        const jsonPlugin = config.plugins.find((p) => p.name === "vite:json");
+        if (jsonPlugin) {
+          const orgTransform = jsonPlugin.transform;
+          jsonPlugin.transform = async function(code, id) {
+            if (!/\.json$/.test(id) || filter(id)) {
+              return;
+            }
+            const { query } = parseVueRequest(id);
+            if (query.vue) {
+              return;
+            }
+            debug("org json plugin");
+            return orgTransform.apply(this, [code, id]);
+          };
+        }
+      }
+    },
+    webpack(compiler) {
+      isProduction = compiler.options.mode !== "development";
+      sourceMap = !!compiler.options.devtool;
+      debug(`webpack: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+      if (compiler.options.module) {
+        compiler.options.module.rules.push({
+          test: /\.(json5?|ya?ml)$/,
+          type: "javascript/auto",
+          exclude: include
+        });
+      }
+    },
+    resolveId(id, importer) {
+      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;
+      }
+      if (id === INTLIFY_BUNDLE_IMPORT_ID) {
+        return id;
+      }
+    },
+    async load(id) {
+      debug("load", id);
+      const { query } = parseVueRequest(id);
+      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(id) && include) {
+        let resourcePaths = [];
+        const includePaths = shared.isArray(include) ? include : [include];
+        for (const inc of includePaths) {
+          resourcePaths = [...resourcePaths, ...await fg__default(inc)];
+        }
+        resourcePaths = resourcePaths.filter((el, pos) => resourcePaths.indexOf(el) === pos);
+        const code = await generateBundleResources(resourcePaths, query, isProduction, {
+          forceStringify,
+          bridge,
+          useClassComponent
+        });
+        return {
+          code,
+          map: { mappings: "" }
+        };
+      }
+    },
+    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) {
+        if (/\.(json5?|ya?ml)$/.test(id) && filter(id)) {
+          langInfo = pathe.parse(filename).ext;
+          const generate = /\.?json5?/.test(langInfo) ? bundleUtils.generateJSON : bundleUtils.generateYAML;
+          const parseOptions = getOptions(filename, isProduction, query, sourceMap, {
+            inSourceMap,
+            isGlobal: globalSFCScope,
+            useClassComponent,
+            bridge,
+            forceStringify
+          });
+          debug("parseOptions", parseOptions);
+          const { code: generatedCode, map } = generate(code, parseOptions, bridge ? createBridgeCodeGenerator(code, query) : void 0);
+          debug("generated code", generatedCode);
+          debug("sourcemap", map, sourceMap);
+          if (code === generatedCode)
+            return;
+          return {
+            code: generatedCode,
+            map: sourceMap ? map : { mappings: "" }
+          };
+        } else {
+          return {
+            code,
+            map: { mappings: "", version: "3", sources: [] }
+          };
+        }
+      } else {
+        if (isCustomBlock(query)) {
+          if (shared.isString(query.lang)) {
+            langInfo = query.src ? query.lang === "i18n" ? "json" : query.lang : query.lang;
+          } else if (defaultSFCLang) {
+            langInfo = defaultSFCLang;
+          }
+          debug("langInfo", langInfo);
+          const generate = /\.?json5?/.test(langInfo) ? bundleUtils.generateJSON : bundleUtils.generateYAML;
+          const parseOptions = getOptions(filename, isProduction, query, sourceMap, {
+            inSourceMap,
+            isGlobal: globalSFCScope,
+            useClassComponent,
+            bridge,
+            forceStringify
+          });
+          debug("parseOptions", parseOptions);
+          const source = await getCode(code, filename, sourceMap, query, meta.framework);
+          const { code: generatedCode, map } = generate(source, parseOptions, bridge ? createBridgeCodeGenerator(source, query) : void 0);
+          debug("generated code", generatedCode);
+          debug("sourcemap", map, sourceMap);
+          if (code === generatedCode)
+            return;
+          return {
+            code: generatedCode,
+            map: sourceMap ? map : { mappings: "" }
+          };
+        }
+      }
+    }
+  };
+});
+async function generateBundleResources(resources, query, isProduction, {
+  forceStringify = false,
+  isGlobal = false,
+  bridge = false,
+  useClassComponent = false
+}) {
+  const codes = [];
+  for (const res of resources) {
+    debug(`${res} bundle loading ...`);
+    if (/\.(json5?|ya?ml)$/.test(res)) {
+      const { ext, name } = pathe.parse(res);
+      const source = await getRaw(res);
+      const generate = /json5?/.test(ext) ? bundleUtils.generateJSON : bundleUtils.generateYAML;
+      const parseOptions = getOptions(res, isProduction, {}, false, {
+        isGlobal,
+        useClassComponent,
+        bridge,
+        forceStringify
+      });
+      parseOptions.type = "bare";
+      const { code } = generate(source, parseOptions, bridge ? createBridgeCodeGenerator(source, query) : void 0);
+      debug("generated code", code);
+      codes.push(`${JSON.stringify(name)}: ${code}`);
+    }
+  }
+  return `export default {
+  ${codes.join(`,
+`)}
+}`;
+}
+async function getCode(source, filename, sourceMap, query, framework = "vite") {
+  const { index, issuerPath } = query;
+  if (!shared.isNumber(index)) {
+    raiseError(`unexpected index: ${index}`);
+  }
+  if (framework === "webpack") {
+    if (issuerPath) {
+      debug(`getCode (webpack) ${index} via issuerPath`, issuerPath);
+      return await getRaw(filename);
+    } else {
+      const result = compilerSfc.parse(await getRaw(filename), {
+        sourceMap,
+        filename
+      });
+      const block = result.descriptor.customBlocks[index];
+      if (block) {
+        const code = block.src ? await getRaw(block.src) : block.content;
+        debug(`getCode (webpack) ${index} from SFC`, code);
+        return code;
+      } else {
+        return source;
+      }
+    }
+  } else {
+    return source;
+  }
+}
+function isCustomBlock(query) {
+  return !shared.isEmptyObject(query) && "vue" in query && (query["type"] === "custom" || query["type"] === "i18n" || query["blockType"] === "i18n");
+}
+function getOptions(filename, isProduction, query, sourceMap, {
+  inSourceMap = void 0,
+  forceStringify = false,
+  isGlobal = false,
+  bridge = false,
+  useClassComponent = false
+}) {
+  const mode = isProduction ? "production" : "development";
+  const baseOptions = {
+    filename,
+    sourceMap,
+    inSourceMap,
+    forceStringify,
+    useClassComponent,
+    bridge,
+    env: mode,
+    onWarn: (msg) => {
+      warn(`${filename} ${msg}`);
+    },
+    onError: (msg) => {
+      error(`${filename} ${msg}`);
+    }
+  };
+  if (isCustomBlock(query)) {
+    return shared.assign(baseOptions, {
+      type: "sfc",
+      locale: shared.isString(query.locale) ? query.locale : "",
+      isGlobal: isGlobal || !!query.global
+    });
+  } else {
+    return shared.assign(baseOptions, {
+      type: "plain",
+      isGlobal: false
+    });
+  }
+}
+
+exports["default"] = unplugin;
+exports.unplugin = unplugin;

package/lib/index.d.ts

@@ -1,3 +1,7 @@
-import type { PluginOptions } from './types';
-export declare const unplugin: import("unplugin").UnpluginInstance<PluginOptions>;
-export default unplugin;
+import * as _unplugin from 'unplugin';
+import { PluginOptions } from './types.js';
+export { PluginOptions, SFCLangFormat } from './types.js';
+
+declare const unplugin: _unplugin.UnpluginInstance<PluginOptions>;
+
+export { unplugin as default, unplugin };

package/lib/index.mjs

@@ -0,0 +1,340 @@
+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 { createFilter } from '@rollup/pluginutils';
+import { 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';
+
+function parseVueRequest(id) {
+  const [filename, rawQuery] = id.split(`?`, 2);
+  const params = new URLSearchParams(rawQuery);
+  const ret = {};
+  const langPart = Object.keys(Object.fromEntries(params)).find((key) => /lang\./i.test(key));
+  ret.vue = params.has("vue");
+  ret.global = params.has("global");
+  ret.src = params.has("src");
+  ret.raw = params.has("raw");
+  if (params.has("type")) {
+    ret.type = params.get("type");
+  }
+  if (params.has("blockType")) {
+    ret.blockType = params.get("blockType");
+  }
+  if (params.has("index")) {
+    ret.index = Number(params.get("index"));
+  }
+  if (params.has("locale")) {
+    ret.locale = params.get("locale");
+  }
+  if (langPart) {
+    const [, lang] = langPart.split(".");
+    ret.lang = lang;
+  } else if (params.has("lang")) {
+    ret.lang = params.get("lang");
+  }
+  if (params.has("issuerPath")) {
+    ret.issuerPath = params.get("issuerPath");
+  }
+  return {
+    filename,
+    query: ret
+  };
+}
+
+function createBridgeCodeGenerator(source, query) {
+  return () => {
+    const data = convert(source, query.lang);
+    let value = JSON.parse(data);
+    if (isString(query.locale)) {
+      value = Object.assign({}, { [query.locale]: value });
+    }
+    return JSON.stringify(value).replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029").replace(/\\/g, "\\\\").replace(/\u0027/g, "\\u0027");
+  };
+}
+function convert(source, lang) {
+  switch (lang) {
+    case "yaml":
+    case "yml":
+      const data = yaml.load(source);
+      return JSON.stringify(data, void 0, "	");
+    case "json5":
+      return JSON.stringify(JSON5.parse(source));
+    default:
+      return source;
+  }
+}
+
+function warn(...args) {
+  console.warn(`[unplugin-vue-i18n] `, ...args);
+}
+function error(...args) {
+  console.error(`[unplugin-vue-i18n] `, ...args);
+}
+async function getRaw(path) {
+  return promises.readFile(path, { encoding: "utf-8" });
+}
+function raiseError(message) {
+  throw new Error(`[unplugin-vue-i18n] ${message}`);
+}
+
+const INTLIFY_BUNDLE_IMPORT_ID = "@intlify/unplugin-vue-i18n/messages";
+const INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID = "@intlify/vite-plugin-vue-i18n/messages";
+const debug = createDebug("unplugin-vue-i18n");
+const unplugin = createUnplugin((options = {}, meta) => {
+  debug("plugin options:", options, meta.framework);
+  if (!["vite", "webpack"].includes(meta.framework)) {
+    raiseError(`This plugin is supported 'vite' and 'webpack' only`);
+  }
+  let include = options.include;
+  if (include) {
+    if (isArray(include)) {
+      include = include.map((item) => normalize(item));
+    } else if (isString(include)) {
+      include = normalize(include);
+    }
+  }
+  const filter = createFilter(include);
+  const forceStringify = !!options.forceStringify;
+  const defaultSFCLang = isString(options.defaultSFCLang) ? options.defaultSFCLang : "json";
+  const globalSFCScope = !!options.globalSFCScope;
+  const useClassComponent = !!options.useClassComponent;
+  const bridge = !!options.bridge;
+  debug("bridge", bridge);
+  let isProduction = false;
+  let sourceMap = false;
+  return {
+    name: "unplugin-vue-i18n",
+    enforce: meta.framework === "vite" ? "pre" : "post",
+    vite: {
+      configResolved(config) {
+        isProduction = config.isProduction;
+        sourceMap = config.command === "build" ? !!config.build.sourcemap : false;
+        debug(`configResolved: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+        const jsonPlugin = config.plugins.find((p) => p.name === "vite:json");
+        if (jsonPlugin) {
+          const orgTransform = jsonPlugin.transform;
+          jsonPlugin.transform = async function(code, id) {
+            if (!/\.json$/.test(id) || filter(id)) {
+              return;
+            }
+            const { query } = parseVueRequest(id);
+            if (query.vue) {
+              return;
+            }
+            debug("org json plugin");
+            return orgTransform.apply(this, [code, id]);
+          };
+        }
+      }
+    },
+    webpack(compiler) {
+      isProduction = compiler.options.mode !== "development";
+      sourceMap = !!compiler.options.devtool;
+      debug(`webpack: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+      if (compiler.options.module) {
+        compiler.options.module.rules.push({
+          test: /\.(json5?|ya?ml)$/,
+          type: "javascript/auto",
+          exclude: include
+        });
+      }
+    },
+    resolveId(id, importer) {
+      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;
+      }
+      if (id === INTLIFY_BUNDLE_IMPORT_ID) {
+        return id;
+      }
+    },
+    async load(id) {
+      debug("load", id);
+      const { query } = parseVueRequest(id);
+      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(id) && include) {
+        let resourcePaths = [];
+        const includePaths = isArray(include) ? include : [include];
+        for (const inc of includePaths) {
+          resourcePaths = [...resourcePaths, ...await fg(inc)];
+        }
+        resourcePaths = resourcePaths.filter((el, pos) => resourcePaths.indexOf(el) === pos);
+        const code = await generateBundleResources(resourcePaths, query, isProduction, {
+          forceStringify,
+          bridge,
+          useClassComponent
+        });
+        return {
+          code,
+          map: { mappings: "" }
+        };
+      }
+    },
+    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) {
+        if (/\.(json5?|ya?ml)$/.test(id) && filter(id)) {
+          langInfo = parse(filename).ext;
+          const generate = /\.?json5?/.test(langInfo) ? generateJSON : generateYAML;
+          const parseOptions = getOptions(filename, isProduction, query, sourceMap, {
+            inSourceMap,
+            isGlobal: globalSFCScope,
+            useClassComponent,
+            bridge,
+            forceStringify
+          });
+          debug("parseOptions", parseOptions);
+          const { code: generatedCode, map } = generate(code, parseOptions, bridge ? createBridgeCodeGenerator(code, query) : void 0);
+          debug("generated code", generatedCode);
+          debug("sourcemap", map, sourceMap);
+          if (code === generatedCode)
+            return;
+          return {
+            code: generatedCode,
+            map: sourceMap ? map : { mappings: "" }
+          };
+        } else {
+          return {
+            code,
+            map: { mappings: "", version: "3", sources: [] }
+          };
+        }
+      } else {
+        if (isCustomBlock(query)) {
+          if (isString(query.lang)) {
+            langInfo = query.src ? query.lang === "i18n" ? "json" : query.lang : query.lang;
+          } else if (defaultSFCLang) {
+            langInfo = defaultSFCLang;
+          }
+          debug("langInfo", langInfo);
+          const generate = /\.?json5?/.test(langInfo) ? generateJSON : generateYAML;
+          const parseOptions = getOptions(filename, isProduction, query, sourceMap, {
+            inSourceMap,
+            isGlobal: globalSFCScope,
+            useClassComponent,
+            bridge,
+            forceStringify
+          });
+          debug("parseOptions", parseOptions);
+          const source = await getCode(code, filename, sourceMap, query, meta.framework);
+          const { code: generatedCode, map } = generate(source, parseOptions, bridge ? createBridgeCodeGenerator(source, query) : void 0);
+          debug("generated code", generatedCode);
+          debug("sourcemap", map, sourceMap);
+          if (code === generatedCode)
+            return;
+          return {
+            code: generatedCode,
+            map: sourceMap ? map : { mappings: "" }
+          };
+        }
+      }
+    }
+  };
+});
+async function generateBundleResources(resources, query, isProduction, {
+  forceStringify = false,
+  isGlobal = false,
+  bridge = false,
+  useClassComponent = false
+}) {
+  const codes = [];
+  for (const res of resources) {
+    debug(`${res} bundle loading ...`);
+    if (/\.(json5?|ya?ml)$/.test(res)) {
+      const { ext, name } = parse(res);
+      const source = await getRaw(res);
+      const generate = /json5?/.test(ext) ? generateJSON : generateYAML;
+      const parseOptions = getOptions(res, isProduction, {}, false, {
+        isGlobal,
+        useClassComponent,
+        bridge,
+        forceStringify
+      });
+      parseOptions.type = "bare";
+      const { code } = generate(source, parseOptions, bridge ? createBridgeCodeGenerator(source, query) : void 0);
+      debug("generated code", code);
+      codes.push(`${JSON.stringify(name)}: ${code}`);
+    }
+  }
+  return `export default {
+  ${codes.join(`,
+`)}
+}`;
+}
+async function getCode(source, filename, sourceMap, query, framework = "vite") {
+  const { index, issuerPath } = query;
+  if (!isNumber(index)) {
+    raiseError(`unexpected index: ${index}`);
+  }
+  if (framework === "webpack") {
+    if (issuerPath) {
+      debug(`getCode (webpack) ${index} via issuerPath`, issuerPath);
+      return await getRaw(filename);
+    } else {
+      const result = parse$1(await getRaw(filename), {
+        sourceMap,
+        filename
+      });
+      const block = result.descriptor.customBlocks[index];
+      if (block) {
+        const code = block.src ? await getRaw(block.src) : block.content;
+        debug(`getCode (webpack) ${index} from SFC`, code);
+        return code;
+      } else {
+        return source;
+      }
+    }
+  } else {
+    return source;
+  }
+}
+function isCustomBlock(query) {
+  return !isEmptyObject(query) && "vue" in query && (query["type"] === "custom" || query["type"] === "i18n" || query["blockType"] === "i18n");
+}
+function getOptions(filename, isProduction, query, sourceMap, {
+  inSourceMap = void 0,
+  forceStringify = false,
+  isGlobal = false,
+  bridge = false,
+  useClassComponent = false
+}) {
+  const mode = isProduction ? "production" : "development";
+  const baseOptions = {
+    filename,
+    sourceMap,
+    inSourceMap,
+    forceStringify,
+    useClassComponent,
+    bridge,
+    env: mode,
+    onWarn: (msg) => {
+      warn(`${filename} ${msg}`);
+    },
+    onError: (msg) => {
+      error(`${filename} ${msg}`);
+    }
+  };
+  if (isCustomBlock(query)) {
+    return assign(baseOptions, {
+      type: "sfc",
+      locale: isString(query.locale) ? query.locale : "",
+      isGlobal: isGlobal || !!query.global
+    });
+  } else {
+    return assign(baseOptions, {
+      type: "plain",
+      isGlobal: false
+    });
+  }
+}
+
+export { unplugin as default, unplugin };

package/lib/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/types.d.ts

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

package/lib/types.mjs

@@ -0,0 +1 @@
+

package/lib/vite.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('unplugin');
+require('pathe');
+require('debug');
+require('fast-glob');
+require('@intlify/shared');
+require('@rollup/pluginutils');
+require('@intlify/bundle-utils');
+require('@vue/compiler-sfc');
+require('json5');
+require('js-yaml');
+require('fs');
+
+const vite = index.unplugin.vite;
+
+module.exports = vite;

package/lib/vite.d.ts

@@ -0,0 +1,6 @@
+import * as vite from 'vite';
+import { PluginOptions } from './types.js';
+
+declare const _default: (options?: PluginOptions | undefined) => vite.Plugin;
+
+export { _default as default };

package/lib/vite.mjs

@@ -0,0 +1,16 @@
+import { unplugin } from './index.mjs';
+import 'unplugin';
+import 'pathe';
+import 'debug';
+import 'fast-glob';
+import '@intlify/shared';
+import '@rollup/pluginutils';
+import '@intlify/bundle-utils';
+import '@vue/compiler-sfc';
+import 'json5';
+import 'js-yaml';
+import 'fs';
+
+const vite = unplugin.vite;
+
+export { vite as default };

package/lib/webpack.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('unplugin');
+require('pathe');
+require('debug');
+require('fast-glob');
+require('@intlify/shared');
+require('@rollup/pluginutils');
+require('@intlify/bundle-utils');
+require('@vue/compiler-sfc');
+require('json5');
+require('js-yaml');
+require('fs');
+
+const webpack = index.unplugin.webpack;
+
+module.exports = webpack;

package/lib/webpack.d.ts

@@ -0,0 +1,6 @@
+import * as webpack from 'webpack';
+import { PluginOptions } from './types.js';
+
+declare const _default: (options?: PluginOptions | undefined) => webpack.WebpackPluginInstance;
+
+export { _default as default };

package/lib/webpack.mjs

@@ -0,0 +1,16 @@
+import { unplugin } from './index.mjs';
+import 'unplugin';
+import 'pathe';
+import 'debug';
+import 'fast-glob';
+import '@intlify/shared';
+import '@rollup/pluginutils';
+import '@intlify/bundle-utils';
+import '@vue/compiler-sfc';
+import 'json5';
+import 'js-yaml';
+import 'fs';
+
+const webpack = unplugin.webpack;
+
+export { webpack as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlify/unplugin-vue-i18n",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "unplugin for Vue I18n",
   "author": {
     "name": "kazuya kawaguchi",
@@ -24,38 +24,59 @@
   "dependencies": {
     "@intlify/bundle-utils": "next",
     "@intlify/shared": "next",
+    "@rollup/pluginutils": "^4.2.0",
+    "@vue/compiler-sfc": "^3.2.23",
     "debug": "^4.3.1",
     "fast-glob": "^3.2.5",
+    "js-yaml": "^4.1.0",
+    "json5": "^2.2.0",
+    "pathe": "^0.2.0",
     "source-map": "0.6.1",
     "unplugin": "^0.6.2"
   },
+  "devDependencies": {
+    "mlly": "^0.5.2",
+    "unbuild": "^0.7.4"
+  },
   "engines": {
     "node": ">= 12"
   },
   "files": [
-    "lib",
-    "index.mjs"
+    "lib"
   ],
   "homepage": "https://github.com/intlify/bundle-tools/blob/main/packages/unplugin-vue-i18n/README.md",
   "keywords": [
     "i18n",
     "plugin",
     "unplugin",
-    "unjs",
+    "transform",
+    "webpack",
+    "vite",
     "vue",
     "vue-i18n"
   ],
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "./index.mjs",
+  "main": "lib/index.cjs",
+  "module": "./lib/index.mjs",
   "types": "lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./lib/index.js"
+      "require": "./lib/index.cjs",
+      "import": "./lib/index.mjs"
+    },
+    "./vite": {
+      "require": "./lib/vite.cjs",
+      "import": "./lib/vite.mjs"
+    },
+    "./webpack": {
+      "require": "./lib/webpack.cjs",
+      "import": "./lib/webpack.mjs"
+    },
+    "./types": {
+      "require": "./lib/types.cjs",
+      "import": "./lib/types.mjs"
     },
     "./lib/*": "./lib/*",
-    "./index.mjs": "./index.mjs",
     "./package.json": "./package.json"
   },
   "repository": {
@@ -64,10 +85,16 @@
     "directory": "packages/unplugin-vue-i18n"
   },
   "scripts": {
-    "build": "tsc -p .",
+    "dev:vite": "vite examples/vite --config ./examples/vite/vite.config.ts",
+    "dev:webpack": "yarn build && webpack-dev-server --config ./examples/webpack/webpack.config.js --inline --hot",
+    "build": "unbuild",
+    "build:example": "npm-run-all \"build:example:*\"",
+    "build:example:vite": "vite build --config ./examples/vite/vite.config.ts --outDir ./examples/vite/dist",
+    "build:example:webpack": "yarn build && webpack --config ./examples/webpack/webpack.config.js",
     "clean": "npm-run-all \"clean:*\"",
     "clean:lib": "rm -rf ./lib",
-    "watch": "tsc -p . --watch",
+    "test": "yarn test:e2e",
+    "test:e2e": "jest --runInBand --config ./jest.e2e.config.js",
     "changelog": "jiti ../../scripts/changelog.ts",
     "release": "jiti ../../scripts/release.ts"
   }

package/index.mjs

@@ -1 +0,0 @@
-export * from './lib/index.js'

package/lib/index.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.unplugin = void 0;
-const unplugin_1 = require("unplugin");
-exports.unplugin = (0, unplugin_1.createUnplugin)((options = {}) => {
-    console.log("I've borned in the world!");
-    return {
-        name: 'unplugin-vue-i18n'
-    };
-});
-exports.default = exports.unplugin;

package/lib/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });