vue-i18n-extract-plugin 1.0.62 → 1.0.64

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 模块

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 () {
@@ -9,6 +9,8 @@ module.exports = function () {
         const {
           translateKey: importName,
           i18nPkgImportPath: importPath,
+          JSXElement,
+          jsx,
           enabled
         } = {
           ...defaultOptions,
@@ -17,126 +19,11 @@ module.exports = function () {
 
         if (!enabled) return;
 
-        const localName = importName;
-        let hasI18nImport = false;
-        let lastImportPath = null;
-        let conflictTDefined = false;
+        const ast = path.parentPath?.node || path.node;
+        const importNames = jsx ? [importName, JSXElement] : [importName];
 
-        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,11 @@ 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];
+  }
 
   traverse(ast, {
     ImportDeclaration(path) {
@@ -15,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(
       [
@@ -90,7 +81,6 @@ function i18nImportAstTransform(ast, importName, importPath) {
     } else {
       ast.program.body.unshift(importNode);
     }
-    needTransform = true;
   }
 
   return {
@@ -99,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;
 
@@ -113,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 模块

package/lib/visitors.js

@@ -11,7 +11,9 @@ function isTFunction(node, option) {
     t.isCallExpression(node) &&
     (t.isIdentifier(node.callee, { name: option.translateKey }) || // $t(...)
       (t.isMemberExpression(node.callee) &&
-        t.isIdentifier(node.callee.property, { name: option.translateKey }))) // xxx.$t(...)
+        t.isIdentifier(node.callee.property, {
+          name: option.translateKey.split(".").pop()
+        }))) // xxx.$t(...)
   );
 }
 
@@ -136,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];
 
@@ -336,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(
@@ -368,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.62",
+  "version": "1.0.64",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
   "bin": {