@intlify/unplugin-vue-i18n 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## @intlify/unplugin-vue-i18n@0.6.0 (2022-09-19)
+
+#### :bug: Bug Fixes
+* [#180](https://github.com/intlify/bundle-tools/pull/180) fix(unplugin-vue-i18n): improve compilation error handling ([@kazupon](https://github.com/kazupon))
+
+#### Committers: 1
+- kazuya kawaguchi ([@kazupon](https://github.com/kazupon))
+
+
 ## @intlify/unplugin-vue-i18n@0.5.0 (2022-07-26)
 
 #### :star: Features

package/lib/index.cjs

@@ -27,7 +27,9 @@ 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));
+  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");
@@ -152,7 +154,9 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             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`);
+          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)) {
@@ -167,15 +171,21 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         }
         config.define = config.define || {};
         config.define["__VUE_I18N_LEGACY_API__"] = !compositionOnly;
-        debug(`set __VUE_I18N_LEGACY_API__ is '${config.define["__VUE_I18N_LEGACY_API__"]}'`);
+        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__"]}'`);
+        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;
-        debug(`configResolved: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+        debug(
+          `configResolved: isProduction = ${isProduction}, sourceMap = ${sourceMap}`
+        );
         const jsonPlugin = config.plugins.find((p) => p.name === "vite:json");
         if (jsonPlugin) {
           const orgTransform = jsonPlugin.transform;
@@ -203,11 +213,13 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
       }
       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"
-          }));
+          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 {
@@ -225,7 +237,9 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
     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}'`);
+        warn(
+          `deprected '${INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID}', you should switch to '${INTLIFY_BUNDLE_IMPORT_ID}'`
+        );
         return asVirtualId(id, meta.framework);
       }
       if (id === INTLIFY_BUNDLE_IMPORT_ID) {
@@ -235,19 +249,28 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
     async load(id) {
       debug("load", id);
       const { query } = parseVueRequest(id);
-      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(getVirtualId(id, meta.framework)) && 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) {
           resourcePaths = [...resourcePaths, ...await fg__default(inc)];
         }
-        resourcePaths = resourcePaths.filter((el, pos) => resourcePaths.indexOf(el) === pos);
-        const code = await generateBundleResources(resourcePaths, query, isProduction, {
-          forceStringify,
-          bridge,
-          exportESM: esm,
-          useClassComponent
-        });
+        resourcePaths = resourcePaths.filter(
+          (el, pos) => resourcePaths.indexOf(el) === pos
+        );
+        const code = await generateBundleResources(
+          resourcePaths,
+          query,
+          isProduction,
+          {
+            forceStringify,
+            bridge,
+            exportESM: esm,
+            useClassComponent
+          }
+        );
         return {
           code,
           map: { mappings: "" }
@@ -272,16 +295,26 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         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,
-            exportESM: esm,
-            forceStringify
-          });
+          const parseOptions = getOptions(
+            filename,
+            isProduction,
+            query,
+            sourceMap,
+            {
+              inSourceMap,
+              isGlobal: globalSFCScope,
+              useClassComponent,
+              bridge,
+              exportESM: esm,
+              forceStringify
+            }
+          );
           debug("parseOptions", parseOptions);
-          const { code: generatedCode, map } = generate(code, parseOptions, bridge ? createBridgeCodeGenerator(code, query) : void 0);
+          const { code: generatedCode, map } = generate(
+            code,
+            parseOptions,
+            bridge ? createBridgeCodeGenerator(code, query) : void 0
+          );
           debug("generated code", generatedCode);
           debug("sourcemap", map, sourceMap);
           if (code === generatedCode)
@@ -305,17 +338,33 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
           }
           debug("langInfo", langInfo);
           const generate = /\.?json5?/.test(langInfo) ? bundleUtils.generateJSON : bundleUtils.generateYAML;
-          const parseOptions = getOptions(filename, isProduction, query, sourceMap, {
-            inSourceMap,
-            isGlobal: globalSFCScope,
-            useClassComponent,
-            bridge,
-            exportESM: esm,
-            forceStringify
-          });
+          const parseOptions = getOptions(
+            filename,
+            isProduction,
+            query,
+            sourceMap,
+            {
+              inSourceMap,
+              isGlobal: globalSFCScope,
+              useClassComponent,
+              bridge,
+              exportESM: esm,
+              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);
+          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)
@@ -378,7 +427,11 @@ async function generateBundleResources(resources, query, isProduction, {
         forceStringify
       });
       parseOptions.type = "bare";
-      const { code } = generate(source, parseOptions, bridge ? createBridgeCodeGenerator(source, query) : void 0);
+      const { code } = generate(
+        source,
+        parseOptions,
+        bridge ? createBridgeCodeGenerator(source, query) : void 0
+      );
       debug("generated code", code);
       codes.push(`${JSON.stringify(name)}: ${code}`);
     }
@@ -439,8 +492,20 @@ function getOptions(filename, isProduction, query, sourceMap, {
     onWarn: (msg) => {
       warn(`${filename} ${msg}`);
     },
-    onError: (msg) => {
-      error(`${filename} ${msg}`);
+    onError: (msg, extra) => {
+      const codeFrame = shared.generateCodeFrame(
+        extra?.source || extra?.location?.source || "",
+        extra?.location?.start.column,
+        extra?.location?.end.column
+      );
+      const errMssage = `${msg} (error code: ${extra?.code}) in ${filename}
+  target message: ${extra?.source}
+  target message path: ${extra?.path}
+
+  ${codeFrame}
+`;
+      error(errMssage);
+      throw new Error(errMssage);
     }
   };
   if (isCustomBlock(query)) {

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, isBoolean, isObject, isEmptyObject, isNumber, assign } from '@intlify/shared';
+import { isString, isArray, isBoolean, isObject, isNumber, isEmptyObject, assign, generateCodeFrame } from '@intlify/shared';
 import { createFilter } from '@rollup/pluginutils';
 import { checkInstallPackage, generateJSON, generateYAML } from '@intlify/bundle-utils';
 import { parse as parse$1 } from '@vue/compiler-sfc';
@@ -15,7 +15,9 @@ 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));
+  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");
@@ -140,7 +142,9 @@ const unplugin = createUnplugin((options = {}, meta) => {
             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`);
+          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)) {
@@ -155,15 +159,21 @@ const unplugin = createUnplugin((options = {}, meta) => {
         }
         config.define = config.define || {};
         config.define["__VUE_I18N_LEGACY_API__"] = !compositionOnly;
-        debug(`set __VUE_I18N_LEGACY_API__ is '${config.define["__VUE_I18N_LEGACY_API__"]}'`);
+        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__"]}'`);
+        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;
-        debug(`configResolved: isProduction = ${isProduction}, sourceMap = ${sourceMap}`);
+        debug(
+          `configResolved: isProduction = ${isProduction}, sourceMap = ${sourceMap}`
+        );
         const jsonPlugin = config.plugins.find((p) => p.name === "vite:json");
         if (jsonPlugin) {
           const orgTransform = jsonPlugin.transform;
@@ -191,11 +201,13 @@ const unplugin = createUnplugin((options = {}, meta) => {
       }
       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"
-          }));
+          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 {
@@ -213,7 +225,9 @@ const unplugin = createUnplugin((options = {}, meta) => {
     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}'`);
+        warn(
+          `deprected '${INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID}', you should switch to '${INTLIFY_BUNDLE_IMPORT_ID}'`
+        );
         return asVirtualId(id, meta.framework);
       }
       if (id === INTLIFY_BUNDLE_IMPORT_ID) {
@@ -223,19 +237,28 @@ const unplugin = createUnplugin((options = {}, meta) => {
     async load(id) {
       debug("load", id);
       const { query } = parseVueRequest(id);
-      if ([INTLIFY_BUNDLE_IMPORT_DEPRECTED_ID, INTLIFY_BUNDLE_IMPORT_ID].includes(getVirtualId(id, meta.framework)) && 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) {
           resourcePaths = [...resourcePaths, ...await fg(inc)];
         }
-        resourcePaths = resourcePaths.filter((el, pos) => resourcePaths.indexOf(el) === pos);
-        const code = await generateBundleResources(resourcePaths, query, isProduction, {
-          forceStringify,
-          bridge,
-          exportESM: esm,
-          useClassComponent
-        });
+        resourcePaths = resourcePaths.filter(
+          (el, pos) => resourcePaths.indexOf(el) === pos
+        );
+        const code = await generateBundleResources(
+          resourcePaths,
+          query,
+          isProduction,
+          {
+            forceStringify,
+            bridge,
+            exportESM: esm,
+            useClassComponent
+          }
+        );
         return {
           code,
           map: { mappings: "" }
@@ -260,16 +283,26 @@ const unplugin = createUnplugin((options = {}, meta) => {
         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,
-            exportESM: esm,
-            forceStringify
-          });
+          const parseOptions = getOptions(
+            filename,
+            isProduction,
+            query,
+            sourceMap,
+            {
+              inSourceMap,
+              isGlobal: globalSFCScope,
+              useClassComponent,
+              bridge,
+              exportESM: esm,
+              forceStringify
+            }
+          );
           debug("parseOptions", parseOptions);
-          const { code: generatedCode, map } = generate(code, parseOptions, bridge ? createBridgeCodeGenerator(code, query) : void 0);
+          const { code: generatedCode, map } = generate(
+            code,
+            parseOptions,
+            bridge ? createBridgeCodeGenerator(code, query) : void 0
+          );
           debug("generated code", generatedCode);
           debug("sourcemap", map, sourceMap);
           if (code === generatedCode)
@@ -293,17 +326,33 @@ const unplugin = createUnplugin((options = {}, meta) => {
           }
           debug("langInfo", langInfo);
           const generate = /\.?json5?/.test(langInfo) ? generateJSON : generateYAML;
-          const parseOptions = getOptions(filename, isProduction, query, sourceMap, {
-            inSourceMap,
-            isGlobal: globalSFCScope,
-            useClassComponent,
-            bridge,
-            exportESM: esm,
-            forceStringify
-          });
+          const parseOptions = getOptions(
+            filename,
+            isProduction,
+            query,
+            sourceMap,
+            {
+              inSourceMap,
+              isGlobal: globalSFCScope,
+              useClassComponent,
+              bridge,
+              exportESM: esm,
+              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);
+          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)
@@ -366,7 +415,11 @@ async function generateBundleResources(resources, query, isProduction, {
         forceStringify
       });
       parseOptions.type = "bare";
-      const { code } = generate(source, parseOptions, bridge ? createBridgeCodeGenerator(source, query) : void 0);
+      const { code } = generate(
+        source,
+        parseOptions,
+        bridge ? createBridgeCodeGenerator(source, query) : void 0
+      );
       debug("generated code", code);
       codes.push(`${JSON.stringify(name)}: ${code}`);
     }
@@ -427,8 +480,20 @@ function getOptions(filename, isProduction, query, sourceMap, {
     onWarn: (msg) => {
       warn(`${filename} ${msg}`);
     },
-    onError: (msg) => {
-      error(`${filename} ${msg}`);
+    onError: (msg, extra) => {
+      const codeFrame = generateCodeFrame(
+        extra?.source || extra?.location?.source || "",
+        extra?.location?.start.column,
+        extra?.location?.end.column
+      );
+      const errMssage = `${msg} (error code: ${extra?.code}) in ${filename}
+  target message: ${extra?.source}
+  target message path: ${extra?.path}
+
+  ${codeFrame}
+`;
+      error(errMssage);
+      throw new Error(errMssage);
     }
   };
   if (isCustomBlock(query)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlify/unplugin-vue-i18n",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "unplugin for Vue I18n",
   "author": {
     "name": "kazuya kawaguchi",
@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@intlify/bundle-utils": "next",
+    "@intlify/bundle-utils": "^3.1.2",
     "@intlify/shared": "next",
     "@rollup/pluginutils": "^4.2.0",
     "@vue/compiler-sfc": "^3.2.23",
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "mlly": "^0.5.2",
-    "unbuild": "^0.7.4"
+    "unbuild": "^0.8.11"
   },
   "engines": {
     "node": ">= 14.16"