vue-i18n-extract-plugin 1.0.51 → 1.0.53

package/README.md

@@ -53,6 +53,7 @@ const defaultOptions = {
   autoImportI18n: true, // 是否自动导入 i18n 模块
   autoTranslate: true, // 提取完成后是否自动翻译
   cleanTranslate: true, // 是否清理无用的翻译内容
+  keepRaw: false, // 开启后只做转换不生成hash值，即："测试" -> $t("测试"), 开启rewrite时生效
   enabled: true, // 是否启用插件
   outputJsonFileInPlugin: true, // 是否在插件中输出 JSON 文件
   outputJsonFileDebounceTimeInPlugin: 2000, // 输出 JSON 文件的防抖时间
@@ -98,6 +99,18 @@ export default {
   }),
   ...
 };
+
+// ts支持
+import { defineConfig } from "vite-i18n-extract-plugin";
+
+export default defineConfig({
+  rewrite: false,
+  translator: new YoudaoTranslator({
+    appId: "youdao appId",
+    appKey: "youdao appKey"
+  }),
+  ...
+});
 ```
 
 ## Vite plugin
@@ -145,6 +158,8 @@ import enMessages from "@/locales/en.json";
 
 const i18n = createI18n({
   legacy: false,
+  globalInjection: true,
+  allowComposition: true,
   fallbackLocale: "en",
   locale: "zh",
   messages: {
@@ -156,6 +171,9 @@ const i18n = createI18n({
 // 导出一个$t方法
 export const $t = i18n.global.t.bind(i18n.global);
 
+// 建议在全局也挂载一个$t方法做兜底
+globalThis.$t = $t;
+
 export default i18n;
 ```
 

package/lib/extract.js

@@ -30,6 +30,11 @@ const { autoTranslate, cleanTranslate, cleanI18nMap } = require("./translate");
 const { i18nImportAstTransform } = require("./import-i18n-transform");
 
 let globalI18nMap = {};
+const keepRawTextOptions = {
+  jsescOption: {
+    minimal: true // 保留原始字符串，不被转义成Unicode
+  }
+};
 
 function encodeToString(str) {
   return str.indexOf("'") === -1 ? `'${str}'` : `"${str}"`;
@@ -68,7 +73,7 @@ function unwrapTransformedCode(ast) {
   });
 
   if (extractedNode) {
-    const { code: exprCode } = generate(extractedNode);
+    const { code: exprCode } = generate(extractedNode, keepRawTextOptions);
     return exprCode;
   } else {
     console.warn("未能提取到 _expr 表达式");
@@ -118,7 +123,7 @@ function extractTCallsFromInterpolation(code, options, i18nMap) {
   traverse(program, createI18nVisitor(options, i18nMap));
 
   if (options.rewrite) {
-    return generate(ast, { compact: true }).code;
+    return generate(ast, { compact: true, ...keepRawTextOptions }).code;
   }
 
   // return ast;
@@ -252,7 +257,7 @@ function transformScript(code, options, useAst, i18nMap) {
     }
     return {
       changed: true,
-      code: generate(ast, { retainLines: true }).code
+      code: generate(ast, { retainLines: true, ...keepRawTextOptions }).code
     };
   }
 

package/lib/options.js

@@ -7,6 +7,7 @@ const defaultOptions = {
   autoImportI18n: true, // 是否自动导入 i18n 模块
   autoTranslate: true, // 提取完成后是否自动翻译
   cleanTranslate: true, // 是否清理无用的翻译内容
+  keepRaw: false, // 开启后只做转换不生成hash值，即："测试" -> $t("测试"), 开启rewrite时生效
   enabled: true, // 是否启用插件
   outputJsonFileInPlugin: true, // 是否在插件中输出 JSON 文件
   outputJsonFileDebounceTimeInPlugin: 2000, // 输出 JSON 文件的防抖时间

package/lib/visitors.js

@@ -15,16 +15,16 @@ function isTFunction(node, option) {
   );
 }
 
-function isCreateTextVNodeCall(path) {
+function isVNodeCall(path, nodeName) {
   const node = path.node;
   if (!path.isCallExpression()) return false;
 
   const callee = node.callee;
   return (
-    (t.isIdentifier(callee) && callee.name === "_createTextVNode") ||
+    (t.isIdentifier(callee) && callee.name === nodeName) ||
     (t.isMemberExpression(callee) &&
       t.isIdentifier(callee.property) &&
-      callee.property.name === "_createTextVNode")
+      callee.property.name === nodeName)
   );
 }
 
@@ -106,6 +106,13 @@ function shouldTransform(path) {
   );
 }
 
+function generateText(rawText, hashedText, options) {
+  if (options.keepRaw && options.rewrite) {
+    return rawText;
+  }
+  return hashedText;
+}
+
 function createI18nVisitor(option, i18nMap) {
   const excludedCall = [...option.excludedCall, ...EXCLUDED_CALL];
 
@@ -130,15 +137,13 @@ function createI18nVisitor(option, i18nMap) {
         return;
       }
 
-      // console.log("CallExpression", path.node.arguments);
-
       const hashed = generateId(keyText);
 
       if (i18nMap) {
         i18nMap[hashed] = keyText;
       }
 
-      const newArg = t.stringLiteral(hashed);
+      const newArg = t.stringLiteral(generateText(keyText, hashed, option));
       path.node.arguments[0] = newArg;
     },
 
@@ -182,46 +187,46 @@ function createI18nVisitor(option, i18nMap) {
         return;
       }
 
-      // console.log("StringLiteral", value);
-
       const hashed = generateId(value);
 
       if (i18nMap) {
         i18nMap[hashed] = value;
       }
 
-      let callExpression;
+      // 生成 _ctx.$t("hashed")
+      let callExpression = t.callExpression(
+        t.memberExpression(
+          t.identifier("_ctx"),
+          t.identifier(option.translateKey)
+        ),
+        [t.stringLiteral(generateText(value, hashed, option))]
+      );
 
       // 判断是否createTextVNode或MemberExpression（如 Vue.createTextVNode）
-      if (isCreateTextVNodeCall(parentPath)) {
-        // _ctx.$t("hashed")
-        callExpression = t.callExpression(
-          t.memberExpression(
-            t.identifier("_ctx"),
-            t.identifier(option.translateKey)
-          ),
-          [t.stringLiteral(hashed)]
-        );
-
+      if (isVNodeCall(parentPath, "_createTextVNode")) {
         // 如果 createTextVNode 参数只有一个，则补充第二个参数 1
         const args = parentPath.node.arguments;
         if (args.length === 1) {
           parentPath.node.arguments = [callExpression, t.numericLiteral(1)];
         }
+        // 是否 vue.createElementVNode(...)，且该 StringLiteral 是第三个参数
+      } else if (isVNodeCall(parentPath, "_createElementVNode")) {
+        const callExpr = parentPath.node;
+        const args = callExpr.arguments;
+
+        // 当前是第三个参数，且参数数量为3
+        const argIndex = args.findIndex(arg => arg === path.node);
+        if (argIndex === 2 && args.length === 3) {
+          args[2] = callExpression; // 替换第3个参数
+          args.push(t.numericLiteral(1)); // 添加第4个参数
+          return;
+        }
       } else {
         const hasCreateVNode = transformDirectiveIfNeeded(path, parentPath);
-        if (hasCreateVNode) {
-          callExpression = t.callExpression(
-            t.memberExpression(
-              t.identifier("_ctx"),
-              t.identifier(option.translateKey)
-            ),
-            [t.stringLiteral(hashed)]
-          );
-        } else {
-          // $t("hashed")
+        if (!hasCreateVNode) {
+          // 生成 $t("hashed")
           callExpression = t.callExpression(t.identifier(option.translateKey), [
-            t.stringLiteral(hashed)
+            t.stringLiteral(generateText(value, hashed, option))
           ]);
         }
       }
@@ -262,8 +267,6 @@ function createI18nVisitor(option, i18nMap) {
 
       if (option.extractFromText === false) return;
 
-      // console.log("TemplateElement", value);
-
       const hashed = generateId(value);
 
       if (i18nMap) {
@@ -271,7 +274,7 @@ function createI18nVisitor(option, i18nMap) {
       }
 
       // 替换为字符类型翻译节点
-      const tCallExpression = `${option.translateKey}('${hashed}')`;
+      const tCallExpression = `${option.translateKey}('${generateText(value, hashed, option)}')`;
       node.value.raw = node.value.cooked = `\${${tCallExpression}}`;
     },
     JSXText(path) {
@@ -285,8 +288,6 @@ function createI18nVisitor(option, i18nMap) {
         return;
       }
 
-      // console.log("JSXText", path.node.value);
-
       const hashed = generateId(text);
 
       if (i18nMap) {
@@ -297,7 +298,7 @@ function createI18nVisitor(option, i18nMap) {
       path.replaceWith(
         t.jsxExpressionContainer(
           t.callExpression(t.identifier(option.translateKey), [
-            t.stringLiteral(hashed)
+            t.stringLiteral(generateText(text, hashed, option))
           ])
         )
       );
@@ -315,8 +316,6 @@ function createI18nVisitor(option, i18nMap) {
           return;
         }
 
-        // console.log("JSXExpressionContainer", path.node.expression.expr);
-
         const hashed = generateId(value);
 
         if (i18nMap) {
@@ -326,7 +325,7 @@ function createI18nVisitor(option, i18nMap) {
         path.replaceWith(
           t.jsxExpressionContainer(
             t.callExpression(t.identifier(option.translateKey), [
-              t.stringLiteral(hashed)
+              t.stringLiteral(generateText(value, hashed, option))
             ])
           )
         );

package/package.json

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