vue-i18n-extract-plugin 1.0.63 → 1.0.65

package/README.md

@@ -48,7 +48,8 @@ extractI18n(options)
 ```javascript
 const defaultOptions = {
   translateKey: "$t", // 提取的函数的名称
-  JSXElement: "Trans", // 提取的函数的 JSX 元素名称 默认为 Trans, 如：<Trans id="aaa" defaultMsg="xxx" />
+  JSXElement: "Trans", // 提取的函数的 JSX 元素名称 默认为 Trans, 如：<Trans id="aaa" msg="xxx" />
+  jsx: false, // 是否启用 JSX 语法转换，开启后JSX里纯文件将转换为 <Trans id="aaa" msg="xxx" />而不是 $t("aaa")
   rewrite: false, // 是否将提取到的内容转换为id后重写入源文件
   extractFromText: true, // 是否允许从纯文本节点中提取翻译内容
   autoImportI18n: true, // 是否自动导入 i18n 模块
@@ -64,11 +65,11 @@ const defaultOptions = {
   includePath: ['src/'], // 包含路径的数组
   excludedPath: [], // 排除路径的数组 refer to https://github.com/mrmlnc/fast-glob?tab=readme-ov-file#how-to-exclude-directory-from-reading
   allowedExtensions: [".vue", ".tsx", ".ts", ".jsx", ".js"], // 允许提取的文件扩展名
-  generateId: null, // 自定义生成 key 的函数
   fromLang: 'zh-cn', // 源语言, 目前支持提取的语言有：zh-cn(zh-tw), en, ja, ko, ru
   translateLangKeys: ["zh-tw", "en"], // 需要翻译为的语言键
   i18nPkgImportPath: "@/i18n", // i18n语言包导入路径
   outputPath: "src/i18n", // 提取的语言包输出文件路径
+  generateId: null, // 自定义生成 key 的函数
   customGenLangFileName: langKey => langKey, // 自定义生成语言文件名
   // 翻译后的文本处理函数，方便对翻译后的文本进行二次加工，如每个单词首字母大写, params: text: 翻译后的文本, toLang: 翻译后的目标语言，translateLangKeys的枚举成员
   customTranslatedText: (text, toLang) => text,

package/lib/babel-plugin-i18n.js

@@ -2,8 +2,7 @@ const { declare } = require("@babel/helper-plugin-utils");
 const { createI18nPlugin } = require("./visitors");
 const { defaultOptions } = require("./options");
 
-module.exports = declare((api, options) => {
-  api.assertVersion(7);
+module.exports = declare((_, options) => {
   options = { ...defaultOptions, ...options };
 
   if (!options.enabled) {

package/lib/babel-plugin-import-i18n.js

@@ -1,4 +1,4 @@
-const t = require("@babel/types");
+const { i18nImportAstTransform } = require("./import-i18n-transform");
 const { defaultOptions } = require("./options");
 
 module.exports = function () {
@@ -7,8 +7,10 @@ module.exports = function () {
     visitor: {
       Program(path, state) {
         const {
-          translateKey: _importName,
+          translateKey: importName,
           i18nPkgImportPath: importPath,
+          JSXElement,
+          jsx,
           enabled
         } = {
           ...defaultOptions,
@@ -17,132 +19,11 @@ module.exports = function () {
 
         if (!enabled) return;
 
-        let importName = _importName;
+        const ast = path.parentPath?.node || path.node;
+        const importNames = jsx ? [importName, JSXElement] : [importName];
 
-        if (importName.includes(".")) {
-          importName = importName.split(".")[0];
-        }
-
-        const localName = importName;
-        let hasI18nImport = false;
-        let lastImportPath = null;
-        let conflictTDefined = false;
-
-        path.traverse({
-          // ImportDeclaration(path) {
-          //   lastImportPath = path;
-          //   if (
-          //     path.node.source.value === importPath &&
-          //     path.node.specifiers.some(
-          //       spec =>
-          //         t.isImportSpecifier(spec) && spec.imported.name === importName
-          //     )
-          //   ) {
-          //     hasI18nImport = true;
-          //   }
-          // },
-          ImportDeclaration(path) {
-            lastImportPath = path;
-
-            const sourcePath = path.node.source.value;
-
-            // 判断是否是其它路径导入了 $t
-            const importedTElsewhere = path.node.specifiers.some(spec => {
-              return (
-                (t.isImportSpecifier(spec) ||
-                  t.isImportDefaultSpecifier(spec)) &&
-                spec.local.name === importName &&
-                sourcePath !== importPath
-              );
-            });
-
-            if (importedTElsewhere) {
-              conflictTDefined = true;
-              path.stop();
-              return;
-            }
-
-            // 检查是否已经导入目标路径
-            if (sourcePath === importPath) {
-              hasI18nImport = true;
-
-              // 情况1：已有 import { $t } from '@/i18n'
-              const existingImport = path.node.specifiers.find(
-                spec =>
-                  t.isImportSpecifier(spec) && spec.imported.name === importName
-              );
-
-              if (existingImport) return;
-
-              // if (
-              //   existingImport &&
-              //   !t.isImportSpecifier(existingImport, {
-              //     local: { name: localName }
-              //   })
-              // ) {
-              //   // 将 $t 改为 _$t
-              //   existingImport.local = t.identifier(localName);
-              // } else
-              // 情况2：已有 import i18n from '@/i18n'
-
-              // 添加 $t 到已有的 import
-              path.node.specifiers.push(
-                t.importSpecifier(
-                  t.identifier(localName),
-                  t.identifier(importName)
-                )
-              );
-            }
-          },
-          VariableDeclarator(path) {
-            if (
-              t.isIdentifier(path.node.id) &&
-              path.node.id.name === importName
-            ) {
-              conflictTDefined = true;
-              path.stop();
-            }
-          },
-
-          FunctionDeclaration(path) {
-            if (
-              t.isIdentifier(path.node.id) &&
-              path.node.id.name === importName
-            ) {
-              conflictTDefined = true;
-              path.stop();
-            }
-          }
-        });
-
-        // 跳过导入语句的生成
-        if (conflictTDefined) {
-          return {
-            ast,
-            needTransform: false
-          };
-        }
-
-        // 情况4：完全没有导入 @/i18n
-        if (!hasI18nImport) {
-          const importNode = t.importDeclaration(
-            [
-              // t.importDefaultSpecifier(t.identifier("i18n")),
-              t.importSpecifier(
-                t.identifier(localName),
-                t.identifier(importName)
-              )
-            ],
-            t.stringLiteral(importPath)
-          );
-
-          if (lastImportPath) {
-            // 插入到最后一个 import 之后
-            lastImportPath.insertAfter(importNode);
-          } else {
-            // 插入到文件顶部
-            path.unshiftContainer("body", importNode);
-          }
+        for (const importName of importNames) {
+          i18nImportAstTransform(ast, importName, importPath);
         }
       }
     }

package/lib/extract.js

@@ -170,7 +170,13 @@ function createDirectiveFromProp(prop, content) {
 }
 
 function addI18nImportIfNeeded(ast, options, generateCode) {
-  i18nImportAstTransform(ast, options.translateKey, options.i18nPkgImportPath);
+  const importNames = options.jsx
+    ? [options.translateKey, options.JSXElement]
+    : [options.translateKey];
+
+  for (const importName of importNames) {
+    i18nImportAstTransform(ast, importName, options.i18nPkgImportPath);
+  }
 
   if (generateCode) {
     return generate(ast);

package/lib/import-i18n-transform.js

@@ -7,7 +7,7 @@ function i18nImportAstTransform(ast, importName, importPath) {
   let hasI18nImport = false;
   let lastImportNode = null;
   let needTransform = false;
-  let conflictTDefined = false;
+  let conflictDefined = false;
 
   if (importName.includes(".")) {
     importName = importName.split(".")[0];
@@ -19,63 +19,50 @@ function i18nImportAstTransform(ast, importName, importPath) {
 
       const sourcePath = path.node.source.value;
 
-      // 判断是否是其它路径导入了 $t
-      const importedTElsewhere = path.node.specifiers.some(spec => {
+      const importedElsewhere = path.node.specifiers.some(spec => {
         return (
           (t.isImportSpecifier(spec) || t.isImportDefaultSpecifier(spec)) &&
-          spec.local.name === importName &&
-          sourcePath !== importPath
+          spec.local.name === importName
         );
       });
 
-      if (importedTElsewhere) {
-        conflictTDefined = true;
+      if (importedElsewhere) {
+        conflictDefined = true;
         path.stop();
         return;
       }
 
-      // 检查是否已经导入目标路径
       if (sourcePath === importPath) {
-        hasI18nImport = true;
-
-        // 情况1：已有 import { $t } from '@/i18n'
-        const existImport = path.node.specifiers.some(
-          spec => t.isImportSpecifier(spec) && spec.imported.name === importName
-        );
-
-        if (existImport) return;
-
-        // 添加 $t 到已有的 import
         path.node.specifiers.push(
           t.importSpecifier(t.identifier(importName), t.identifier(importName))
         );
+
+        hasI18nImport = true;
         needTransform = true;
       }
     },
     VariableDeclarator(path) {
       if (t.isIdentifier(path.node.id) && path.node.id.name === importName) {
-        conflictTDefined = true;
+        conflictDefined = true;
         path.stop();
       }
     },
 
     FunctionDeclaration(path) {
       if (t.isIdentifier(path.node.id) && path.node.id.name === importName) {
-        conflictTDefined = true;
+        conflictDefined = true;
         path.stop();
       }
     }
   });
 
-  // 跳过导入语句的生成
-  if (conflictTDefined) {
+  if (conflictDefined) {
     return {
       ast,
       needTransform: false
     };
   }
 
-  // 情况4：完全没有导入 @/i18n
   if (!hasI18nImport) {
     const importNode = t.importDeclaration(
       [
@@ -94,7 +81,6 @@ function i18nImportAstTransform(ast, importName, importPath) {
     } else {
       ast.program.body.unshift(importNode);
     }
-    needTransform = true;
   }
 
   return {
@@ -103,7 +89,7 @@ function i18nImportAstTransform(ast, importName, importPath) {
   };
 }
 
-async function i18nImportTransform(code, path, importName, importPath) {
+async function i18nImportTransform(code, path, importNames, importPath) {
   const scriptContent = extractScriptContent(code, path);
   if (!scriptContent) return code;
 
@@ -117,14 +103,19 @@ async function i18nImportTransform(code, path, importName, importPath) {
       ].filter(Boolean)
     });
 
-    const { needTransform } = i18nImportAstTransform(
-      ast,
-      importName,
-      importPath
-    );
+    let transformNeeded = false;
+
+    for (const importName of importNames) {
+      const { needTransform } = i18nImportAstTransform(
+        ast,
+        importName,
+        importPath
+      );
+      transformNeeded = transformNeeded || needTransform;
+    }
 
     // 只有当需要修改时才重新生成代码
-    if (needTransform) {
+    if (transformNeeded) {
       const { code: newScript } = generate(ast);
       return path.endsWith(".vue")
         ? code.replace(scriptContent, newScript)

package/lib/options.js

@@ -2,7 +2,8 @@ const { GoogleTranslator } = require("./translators");
 
 const defaultOptions = {
   translateKey: "$t", // 提取的函数的名称
-  JSXElement: "Trans", // 提取的函数的 JSX 元素名称 默认为 Trans, 如：<Trans id="aaa" defaultMsg="xxx" />
+  JSXElement: "Trans", // 提取的函数的 JSX 元素名称 默认为 Trans, 如：<Trans id="aaa" msg="xxx" />
+  jsx: false, // 是否启用 JSX 语法转换，开启后JSX里纯文件将转换为 <Trans id="aaa" msg="xxx" />而不是 $t("aaa")
   rewrite: false, // 是否将提取到的内容转换为id后重写入源文件
   extractFromText: true, // 是否允许从纯文本节点中提取翻译内容
   autoImportI18n: true, // 是否自动导入 i18n 模块
@@ -18,11 +19,11 @@ const defaultOptions = {
   includePath: ["src/"], // 包含路径的数组
   excludedPath: [], // 排除路径的数组
   allowedExtensions: [".vue", ".tsx", ".ts", ".jsx", ".js"], // 允许提取的文件扩展名
-  generateId: null, // 自定义生成 key 的函数
   fromLang: "zh-cn", // 源语言, 目前支持提取的语言有：zh-cn(zh-tw), en, ja, ko, ru
   translateLangKeys: ["zh-tw", "en"], // 需要翻译为的语言键
   i18nPkgImportPath: "@/i18n", // i18n语言包导入路径
   outputPath: "src/i18n", // 提取的语言包输出文件路径
+  generateId: null, // 自定义生成 key 的函数
   customGenLangFileName: langKey => langKey, // 自定义生成语言文件名
   // 翻译后的文本处理函数，方便对翻译后的文本进行二次加工，如每个单词首字母大写, params: text: 翻译后的文本, toLang: 翻译后的目标语言，translateLangKeys的枚举成员
   customTranslatedText: (text, toLang) => text,

package/lib/visitors.js

@@ -138,6 +138,20 @@ function generateId(rawText, options) {
   return _generateId(rawText);
 }
 
+function generateJSXElement(name, id, msg) {
+  // 生成 <Trans id="hashed" msg="xxxx" />
+  const openingElement = t.jsxOpeningElement(
+    t.jsxIdentifier(name),
+    [
+      t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral(id)),
+      msg ? t.jsxAttribute(t.jsxIdentifier("msg"), t.stringLiteral(msg)) : null
+    ].filter(Boolean),
+    true // self-closing
+  );
+
+  return t.jsxElement(openingElement, null, [], true);
+}
+
 function createI18nVisitor(option, i18nMap) {
   const excludedCall = [...option.excludedCall, ...EXCLUDED_CALL];
 
@@ -338,6 +352,16 @@ function createI18nVisitor(option, i18nMap) {
         i18nMap[hashed] = text;
       }
 
+      if (option.jsx) {
+        const jsxElement = generateJSXElement(
+          option.JSXElement,
+          hashed,
+          option.keepDefaultMsg ? text : null
+        );
+        path.replaceWith(jsxElement);
+        return;
+      }
+
       // 替换为表达式 {$t("hashed")}
       path.replaceWith(
         t.jsxExpressionContainer(
@@ -370,6 +394,19 @@ function createI18nVisitor(option, i18nMap) {
           i18nMap[hashed] = value;
         }
 
+        if (
+          option.jsx &&
+          (path.parentPath.isJSXElement() || path.parentPath.isJSXFragment())
+        ) {
+          const jsxElement = generateJSXElement(
+            option.JSXElement,
+            hashed,
+            option.keepDefaultMsg ? value : null
+          );
+          path.replaceWith(jsxElement);
+          return;
+        }
+
         path.replaceWith(
           t.jsxExpressionContainer(
             t.callExpression(

package/lib/vite-plugin-import-i18n.js

@@ -16,7 +16,9 @@ function vitePluginImportI18n(option) {
       return i18nImportTransform(
         code,
         path,
-        option.translateKey,
+        option.jsx
+          ? [option.translateKey, option.JSXElement]
+          : [option.translateKey],
         option.i18nPkgImportPath
       );
     }

package/lib/webpack-import-i18n-loader.js

@@ -9,6 +9,8 @@ module.exports = function (source) {
     includePath,
     excludedPath,
     translateKey: importName,
+    JSXElement,
+    jsx,
     i18nPkgImportPath: importPath
   } = { ...defaultOptions, ...global.getOptions() };
 
@@ -42,7 +44,7 @@ module.exports = function (source) {
   return i18nImportTransform(
     source,
     global.resourcePath,
-    importName,
+    jsx ? [importName, JSXElement] : [importName],
     importPath
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-i18n-extract-plugin",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
   "bin": {

package/types/import-i18n-transform.d.ts

@@ -14,7 +14,7 @@ export function i18nImportAstTransform(
 export function i18nImportTransform(
   code: string,
   path: string,
-  importName: string,
+  importNames: string[],
   importPath: string
 ): Promise<string>;
 

package/types/options.d.ts

@@ -1,12 +1,18 @@
+import { Translator } from './translators';
+
 export type LangKey = "zh-cn" | 'zh-tw' | 'en' | 'ja' | 'ko' | 'ru' | string
 
 export interface I18nOptions {
   translateKey: string
+  JSXElement: string
+  jsx: boolean
   rewrite: boolean
   extractFromText: boolean
   autoImportI18n: boolean
   autoTranslate: boolean
   cleanTranslate: boolean
+  keepRaw: boolean
+  keepDefaultMsg: boolean
   enabled: boolean
   outputJsonFileInPlugin: boolean
   outputJsonFileDebounceTimeInPlugin: number
@@ -22,13 +28,5 @@ export interface I18nOptions {
   generateId: ((text: string) => string) | null | undefined
   customGenLangFileName: (langKey: LangKey) => LangKey
   customTranslatedText: (text: string, toLang: LangKey) => string,
-//   translator: new GoogleTranslator({
-//     // proxyOption: {
-//     //     port: 7890,
-//     //     host: '127.0.0.1',
-//     //     headers: {
-//     //         'User-Agent': 'Node'
-//     //     }
-//     // }
-//   })
+  translator: Translator
 };

package/types/translators/index.d.ts

@@ -26,6 +26,7 @@ interface TranslatorOption {
      */
     onError?: (err: unknown, defaultErrorHandler: (error: unknown) => void) => void;
 }
+
 declare class Translator {
     option: Required<TranslatorOption>;
     constructor(option: TranslatorOption);