vue-i18n-extract-plugin 1.0.78 → 1.0.80

package/.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "cSpell.words": []
+}

package/README.md

@@ -48,7 +48,9 @@ extractI18n(options)
 ```javascript
 const defaultOptions = {
   translateKey: "$t", // 提取的函数的名称
+  useTranslationIdentifier: "useTranslation", // 注入到组件的hook名称, 会注入const { $t } = useTranslation()
   JSXElement: "Trans", // 提取的函数的 JSX 元素名称 默认为 Trans, 如：<Trans id="aaa" msg="xxx" />
+  injectUseTranslation: true, // 是否自动注入 useTranslation
   jsx: false, // 是否启用 JSX 语法转换，开启后JSX里纯文件将转换为 <Trans id="aaa" msg="xxx" />而不是 $t("aaa")
   rewrite: false, // 是否将提取到的内容转换为id后重写入源文件
   extractFromText: true, // 是否允许从纯文本节点中提取翻译内容
@@ -70,6 +72,7 @@ const defaultOptions = {
   i18nPkgImportPath: "@/i18n", // i18n语言包导入路径
   outputPath: "src/i18n", // 提取的语言包输出文件路径
   generateId: null, // 自定义生成 key 的函数
+  shouldExtract: null, // 自定义是否提取文件的函数
   customGenLangFileName: langKey => langKey, // 自定义生成语言文件名
   // 翻译后的文本处理函数，方便对翻译后的文本进行二次加工，如每个单词首字母大写, params: text: 翻译后的文本, toLang: 翻译后的目标语言，translateLangKeys的枚举成员
   customTranslatedText: (text, toLang) => text,

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

@@ -12,7 +12,9 @@ module.exports = function () {
           JSXElement,
           jsx,
           enabled,
-          autoImportI18n
+          autoImportI18n,
+          injectUseTranslation,
+          useTranslationIdentifier
         } = {
           ...defaultOptions,
           ...state.opts
@@ -21,7 +23,11 @@ module.exports = function () {
         if (!enabled || !autoImportI18n) return;
 
         const ast = path.parentPath?.node || path.node;
-        const importNames = jsx ? [importName, JSXElement] : [importName];
+        const importNames = jsx
+          ? [importName, JSXElement]
+          : injectUseTranslation
+            ? [importName, useTranslationIdentifier]
+            : [importName];
 
         for (const importName of importNames) {
           i18nImportAstTransform(ast, importName, importPath);

package/lib/extract.js

@@ -173,7 +173,9 @@ function createDirectiveFromProp(prop, content) {
 function addI18nImportIfNeeded(ast, options, generateCode) {
   const importNames = options.jsx
     ? [options.translateKey, options.JSXElement]
-    : [options.translateKey];
+    : options.injectUseTranslation
+      ? [options.translateKey, options.useTranslationIdentifier]
+      : [options.translateKey];
 
   for (const importName of importNames) {
     i18nImportAstTransform(ast, importName, options.i18nPkgImportPath);
@@ -274,6 +276,10 @@ function transformScript(code, options, useAst, i18nMap) {
   };
 }
 
+function _shouldExtract(text, options) {
+  return (options.shouldExtract || shouldExtract)(text, options.fromLang);
+}
+
 function transformTemplate(templateContent, options) {
   const innerI18nMap = {};
   let magicString;
@@ -363,7 +369,7 @@ function transformTemplate(templateContent, options) {
               if (
                 text &&
                 typeof text === "string" &&
-                shouldExtract(text, options.fromLang)
+                _shouldExtract(text, options)
               ) {
                 try {
                   const newValue = transformScriptExpression(
@@ -400,7 +406,7 @@ function transformTemplate(templateContent, options) {
               if (
                 text &&
                 typeof text === "string" &&
-                shouldExtract(text, options.fromLang)
+                _shouldExtract(text, options)
               ) {
                 try {
                   const newValue = extractTCallsFromInterpolation(

package/lib/options.js

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

package/lib/translate.js

@@ -256,7 +256,8 @@ async function translateChunks(transLangObj, toTranslateLang, option) {
         translationChunks[i],
         option.fromLang,
         toTranslateLang,
-        SEPARATOR
+        SEPARATOR,
+        option.generateId
       )
     );
   }

package/lib/translators/translator/Translator.js

@@ -46,10 +46,16 @@ class Translator {
     }
   }
 
-  async translate(text, fromKey, toKey, separator) {
+  async translate(text, fromKey, toKey, separator, customGenerateId) {
     let result = "";
     try {
-      result = await this.option.fetchMethod(text, fromKey, toKey, separator);
+      result = await this.option.fetchMethod(
+        text,
+        fromKey,
+        toKey,
+        separator,
+        customGenerateId
+      );
     } catch (error) {
       this.option.onError(error, this.defaultErrorHandler);
     }

package/lib/translators/volcengine.js

@@ -1,6 +1,6 @@
 // 代码灵感来自https://github.com/dadidi9900/auto-plugins-json-translate/blob/main/src/services/translationService.ts
 const axios = require("axios");
-const { generateId } = require("../utils");
+const { generateId: _generateId } = require("../utils");
 const { Translator } = require("./translator");
 
 /**
@@ -25,9 +25,23 @@ class VolcEngineTranslator extends Translator {
   constructor(option = {}) {
     super({
       name: "火山引擎ai翻译",
-      fetchMethod: async (text, fromKey, toKey, separator) => {
+      fetchMethod: async (
+        text,
+        fromKey,
+        toKey,
+        separator,
+        customGenerateId
+      ) => {
         let salt = new Date().getTime();
         const textArr = text.split(separator);
+
+        const generateId = text => {
+          if (typeof customGenerateId === "function") {
+            return customGenerateId(text, _generateId);
+          }
+          return _generateId(text);
+        };
+
         const sourceMap = Object.fromEntries(
           textArr.map(text => [generateId(text), text])
         );

package/lib/visitors.js

@@ -3,7 +3,7 @@ const {
   generateId: _generateId,
   extractFunctionName,
   EXCLUDED_CALL,
-  shouldExtract
+  shouldExtract: _shouldExtract
 } = require("./utils");
 
 function isTFunction(node, option) {
@@ -18,10 +18,8 @@ function isTFunction(node, option) {
 }
 
 function isVNodeCall(path, nodeName) {
-  const node = path.node;
   if (!path.isCallExpression()) return false;
-
-  const callee = node.callee;
+  const callee = path.node.callee;
   return (
     (t.isIdentifier(callee) && callee.name === nodeName) ||
     (t.isMemberExpression(callee) &&
@@ -56,7 +54,23 @@ function getPropKey(propNode) {
   return null;
 }
 
-// 将静态属性转换为动态属性，如 <div title="xxx" /> => <div :title="$t('hashed')" />
+/**
+ * 向 hoisted dynamicProps 数组中追加 propKey（若不存在）
+ * @returns 是否真的发生了修改
+ */
+function pushDynamicPropsIfMissing(arr, propKey) {
+  const hasKey = arr.elements.some(
+    el => t.isStringLiteral(el) && el.value === propKey
+  );
+
+  if (!hasKey) {
+    arr.elements.push(t.stringLiteral(propKey));
+  }
+
+  return !hasKey;
+}
+
+// 自动补齐动态属性，如 createVNode(c, {message: dynamicValue}) => createVNode(c, {message: dynamicValue}, null, 8, ['message'])
 function transformDirectiveIfNeeded(path, parentPath) {
   let hasCreateVNode = false;
   // 属性值情况，如 title: "xxx"
@@ -67,10 +81,7 @@ function transformDirectiveIfNeeded(path, parentPath) {
 
     const vNodeCall = path.findParent(
       p =>
-        p.isCallExpression() &&
-        (t.isIdentifier(p.node.callee, { name: "_createVNode" }) ||
-          (t.isMemberExpression(p.node.callee) &&
-            t.isIdentifier(p.node.callee.property, { name: "_createVNode" })))
+        isVNodeCall(p, "_createVNode") || isVNodeCall(p, "_createElementVNode")
     );
 
     if (vNodeCall) {
@@ -91,13 +102,23 @@ function transformDirectiveIfNeeded(path, parentPath) {
       }
 
       // 设置 patchFlag = 8
-      args[patchFlagIndex] = t.numericLiteral(8);
+      if (!args[patchFlagIndex]) {
+        args[patchFlagIndex] = t.numericLiteral(8);
+      }
 
       // 设置 dynamicProps = ["propKey"]
       const existingDynamicProps = args[dynamicPropsIndex];
-      if (!existingDynamicProps || !t.isArrayExpression(existingDynamicProps)) {
+
+      if (t.isIdentifier(existingDynamicProps)) {
+        const arr = hoistedMap.get(existingDynamicProps.name);
+        if (arr) {
+          pushDynamicPropsIfMissing(arr, propKey);
+        }
+      }
+
+      if (!existingDynamicProps) {
         args[dynamicPropsIndex] = t.arrayExpression([t.stringLiteral(propKey)]);
-      } else {
+      } else if (t.isArrayExpression(existingDynamicProps)) {
         const existingKeys = new Set(
           existingDynamicProps.elements
             .filter(el => t.isStringLiteral(el))
@@ -134,7 +155,7 @@ function generateText(rawText, hashedText, options) {
 
 function generateId(rawText, options) {
   if (typeof options.generateId === "function") {
-    return options.generateId(rawText);
+    return options.generateId(rawText, _generateId);
   }
   return _generateId(rawText);
 }
@@ -284,10 +305,95 @@ function isAnyVNodeCall(path) {
   return false;
 }
 
+function markComponentUsesI18n(path) {
+  const fnPath = path.findParent(
+    p =>
+      p.isFunctionDeclaration() ||
+      p.isFunctionExpression() ||
+      p.isArrowFunctionExpression()
+  );
+
+  if (!fnPath) return;
+
+  fnPath.node.__usesI18n = true;
+}
+
+function createUseTranslationDeclaration(options) {
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.objectPattern([
+        t.objectProperty(
+          t.identifier(options.translateKey),
+          t.identifier(options.translateKey),
+          false,
+          true
+        )
+      ]),
+      t.callExpression(t.identifier(options.useTranslationIdentifier), [])
+    )
+  ]);
+}
+
+function injectUseTranslation(fnPath, options) {
+  const body = fnPath.get("body");
+
+  if (!body.isBlockStatement()) {
+    // ArrowFunctionExpression 简写：() => <div />
+    body.replaceWith(
+      t.blockStatement([
+        createUseTranslationDeclaration(options),
+        t.returnStatement(body.node)
+      ])
+    );
+    return;
+  }
+
+  const statements = body.get("body");
+
+  // 已经存在 useTranslationss
+  if (
+    statements.some(
+      s =>
+        s.isVariableDeclaration() &&
+        s.node.declarations.some(
+          d =>
+            t.isCallExpression(d.init) &&
+            t.isIdentifier(d.init.callee, {
+              name: options.useTranslationIdentifier
+            })
+        )
+    )
+  ) {
+    return;
+  }
+
+  body.unshiftContainer("body", createUseTranslationDeclaration(options));
+}
+
+function shouldExtract(text, options) {
+  return (options.shouldExtract || _shouldExtract)(text, options.fromLang);
+}
+
+const hoistedMap = new Map();
+
 function createI18nVisitor(option, i18nMap) {
   const excludedCall = [...option.excludedCall, ...EXCLUDED_CALL];
 
   return {
+    Program(path) {
+      path.traverse({
+        VariableDeclarator(p) {
+          const { id, init } = p.node;
+          if (
+            t.isIdentifier(id) &&
+            t.isArrayExpression(init) &&
+            id.name.startsWith("_hoisted_")
+          ) {
+            hoistedMap.set(id.name, init);
+          }
+        }
+      });
+    },
     CallExpression(path) {
       if (!isTFunction(path.node, option)) {
         if (isVNodeCall(path, "_createTextVNode")) {
@@ -315,7 +421,7 @@ function createI18nVisitor(option, i18nMap) {
 
       if (!keyText) return;
 
-      if (!shouldExtract(keyText, option.fromLang)) {
+      if (!shouldExtract(keyText, option)) {
         return;
       }
 
@@ -373,7 +479,7 @@ function createI18nVisitor(option, i18nMap) {
       //   return;
       // }
 
-      if (!value || !shouldExtract(value, option.fromLang)) {
+      if (!value || !shouldExtract(value, option)) {
         return;
       }
 
@@ -463,7 +569,7 @@ function createI18nVisitor(option, i18nMap) {
         return;
       }
 
-      if (!shouldExtract(value, option.fromLang)) {
+      if (!shouldExtract(value, option)) {
         return;
       }
 
@@ -489,7 +595,7 @@ function createI18nVisitor(option, i18nMap) {
       const text = path.node.value.trim();
       if (!text) return; // 空白或换行等，跳过
 
-      if (!shouldExtract(text, option.fromLang)) {
+      if (!shouldExtract(text, option)) {
         return;
       }
 
@@ -499,6 +605,10 @@ function createI18nVisitor(option, i18nMap) {
         i18nMap[hashed] = text;
       }
 
+      if (option.injectUseTranslation) {
+        markComponentUsesI18n(path);
+      }
+
       if (option.jsx) {
         const jsxElement = generateJSXElement(
           option.JSXElement,
@@ -531,7 +641,7 @@ function createI18nVisitor(option, i18nMap) {
         const value = expr.value.trim();
 
         if (!value) return;
-        if (!shouldExtract(value, option.fromLang)) {
+        if (!shouldExtract(value, option)) {
           return;
         }
 
@@ -541,6 +651,10 @@ function createI18nVisitor(option, i18nMap) {
           i18nMap[hashed] = value;
         }
 
+        if (option.injectUseTranslation) {
+          markComponentUsesI18n(path);
+        }
+
         if (
           option.jsx &&
           (path.parentPath.isJSXElement() || path.parentPath.isJSXFragment())
@@ -637,6 +751,19 @@ function createI18nVisitor(option, i18nMap) {
             )
         );
       }
+    },
+    // visitor：Function / ArrowFunction
+    Function: {
+      exit(path) {
+        if (!option.injectUseTranslation) return;
+        if (!path.node.__usesI18n) return;
+
+        // 防止重复注入
+        if (path.node.__i18nInjected) return;
+        path.node.__i18nInjected = true;
+
+        injectUseTranslation(path, option);
+      }
     }
   };
 }

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

@@ -11,8 +11,8 @@ function vitePluginImportI18n(option) {
     name: "vite-plugin-import-i18n",
     enforce: "pre",
     async transform(code, path) {
-      path = path.split('?')[0];
-      
+      path = path.split("?")[0];
+
       if (!option.enabled || !option.autoImportI18n || !filter(path)) return;
 
       return i18nImportTransform(
@@ -20,7 +20,9 @@ function vitePluginImportI18n(option) {
         path,
         option.jsx
           ? [option.translateKey, option.JSXElement]
-          : [option.translateKey],
+          : option.injectUseTranslation
+            ? [option.translateKey, option.useTranslationIdentifier]
+            : [option.translateKey],
         option.i18nPkgImportPath
       );
     }

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

@@ -11,7 +11,9 @@ module.exports = function (source) {
     translateKey: importName,
     JSXElement,
     jsx,
-    i18nPkgImportPath: importPath
+    i18nPkgImportPath: importPath,
+    injectUseTranslation,
+    useTranslationIdentifier
   } = { ...defaultOptions, ...global.getOptions() };
 
   // // webpack 4.0
@@ -44,7 +46,11 @@ module.exports = function (source) {
   return i18nImportTransform(
     source,
     global.resourcePath,
-    jsx ? [importName, JSXElement] : [importName],
+    jsx
+      ? [importName, JSXElement]
+      : injectUseTranslation
+        ? [importName, useTranslationIdentifier]
+        : [importName],
     importPath
   );
 };

package/package.json

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

package/types/options.d.ts

@@ -1,32 +1,38 @@
-import { Translator } from './translators';
+import { Translator } from "./translators";
 
-export type LangKey = "zh-cn" | 'zh-tw' | 'en' | 'ja' | 'ko' | 'ru' | string;
+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
-  translateInterval: number
-  excludedCall: string[]
-  includePath: string[] | string
-  excludedPath: string[] | string
-  allowedExtensions: string[]
-  fromLang: LangKey
-  translateLangKeys: LangKey[]
-  i18nPkgImportPath: string
-  outputPath: string
-  generateId: ((text: string) => string) | null | undefined
-  customGenLangFileName: (langKey: LangKey) => LangKey
-  customTranslatedText: (text: string, toLang: LangKey) => string,
-  translator: Translator
-};
+  translateKey: string;
+  useTranslationIdentifier: string;
+  JSXElement: string;
+  injectUseTranslation: boolean;
+  jsx: boolean;
+  rewrite: boolean;
+  extractFromText: boolean;
+  autoImportI18n: boolean;
+  autoTranslate: boolean;
+  cleanTranslate: boolean;
+  keepRaw: boolean;
+  keepDefaultMsg: boolean;
+  enabled: boolean;
+  outputJsonFileInPlugin: boolean;
+  outputJsonFileDebounceTimeInPlugin: number;
+  translateInterval: number;
+  excludedCall: string[];
+  includePath: string[] | string;
+  excludedPath: string[] | string;
+  allowedExtensions: string[];
+  fromLang: LangKey;
+  translateLangKeys: LangKey[];
+  i18nPkgImportPath: string;
+  outputPath: string;
+  generateId:
+    | ((text: string, rawGenerateIdFn?: (text: string) => string) => string)
+    | null
+    | undefined;
+  shouldExtract: (text: string, langKey: LangKey) => boolean;
+  customGenLangFileName: (langKey: LangKey) => LangKey;
+  customTranslatedText: (text: string, toLang: LangKey) => string;
+  translator: Translator;
+}