@chaoswise/intl 1.0.0 → 1.2.0

package/bin/scripts/util/makeVisitorCollect.js

@@ -1,30 +1,179 @@
 const log = require('./log');
 const t = require('@babel/types');
+const generate = require('@babel/generator').default;
+const { getWord } = require('./getWord');
+const specialMatch = require('./specialMatch');
+const { Path: FormPath } = require('./FormPath');
 
-module.exports = function(
+const commentStr = ' @chaoswise/intl脚本替换失败 ';
+
+module.exports = function (
   {
     primaryRegx,
     i18nObject,
     i18nMethod,
+    i18nDefaultFunctionKey,
     importCode,
     ignoreLines,
     ignoreMethods,
     ignoreComponents = [],
     ignoreAttributes,
+    intlTag,
+    intlTagIdPath,
+    intlTagDefaultWordPath,
+    intlFunctionName,
+    intlFunctionIdPath,
+    intlFunctionDefaultWordPath,
+    removePkgName,
+    localWordPath,
+    removeFunctionName,
   },
-  returns
+  returns,
+  { filePath, special },
 ) {
+
+  // jsx默认 defaultMessage
+  intlTagDefaultWordPath = intlTagDefaultWordPath || 'defaultMessage';
+
   const { replaceWords, allWords, downloadIds } = returns;
   const hacked = {};
 
+  // 在没有replaceWords的情况下，不用log信息，这里统一处理
+  const properLog = {};
+  Object.keys(log).forEach(fnName => {
+    properLog[fnName] = (...args) => {
+      if (!Object.keys(replaceWords).length) return;
+      log[fnName](...args);
+    }
+  })
+
+  // 获取完整路劲。例如：path='key',返回'0.key'
+  function getFullPath (path) {
+    if (!path) return path;
+    if (typeof path !== 'string') return path;
+    if (/^[0-9]/.test(path)) {
+      return path;
+    }
+
+    let preFixPath = '0';
+    if (!/^\./.test(path)) {
+      preFixPath = '0.';
+    }
+    return preFixPath + path;
+  }
+  // 插入注释
+  function insertFailCommon(node) {
+    const comment = node?.leadingComments?.value
+    if (comment && comment.trim() === commentStr) return;
+    t.addComment(node, 'leading', commentStr);
+  }
+  // 在jsx中插入注释
+  function insertFailCommonInJsx(path) {
+    const comment = path?.node?.leadingComments?.value
+    if (comment && comment.trim() === commentStr) return;
+    path.insertBefore(
+      t.jsxExpressionContainer(
+        {
+          "type": "JSXEmptyExpression",
+          "innerComments": [
+            {
+              "type": "CommentBlock",
+              "value": commentStr
+            }
+          ]
+        }
+      )
+    )
+  }
+
+  // 获取国际化jsx标签中的id或者defaultMessage
+  function getJsxTagChaoswiseIntlValue(openingElement, intlTagValuePath) {
+    // <Tag id={{ x: ['id'] }} defaultMessage={{ x: ['中文'] }} />
+    // valueAst是{ x: ['id'] }的ast
+    let valueAst;
+    // intlTagValuePath 是 id.x.0
+    // valueKey 是 id
+    // valuePath 是 x.0
+    let valueKey = intlTagValuePath;
+    let valuePath = '';
+
+    const index = (intlTagValuePath || '').indexOf('.');
+    if (index !== -1) {
+      valueKey = intlTagValuePath.slice(0, index);
+      valuePath = intlTagValuePath.slice(index + 1);
+    }
+
+    // <Tag {...props} />不能找到对应的值
+    valueAst = openingElement.attributes.find((item) => {
+      return item?.name?.name === valueKey;
+    })?.value;
+    // intlTagValuePath配置不正确就会找不到value
+    // 比如<Tag id2='id' />  把intlTagValuePath配置为id就不行，因为这里应该是id2
+    if (!valueAst) return false;
+
+    // 如果是jsx容器，就 去掉jsx容器,拿里面的值
+    // 从{{ x: ['id'] }}  变为  { x: ['id'] }
+    if (valueAst.type === 'JSXExpressionContainer') {
+      valueAst = valueAst.expression;
+    }
+
+    // 把ast转为js， 再用FormPath.getIn来取最终的值
+    const { code: valueCode } = generate(valueAst);
+    var chaoswiseIntlValue;
+    try {
+      eval('var chaoswiseIntlValue =' + valueCode);
+      chaoswiseIntlValue = FormPath.getIn(chaoswiseIntlValue, valuePath);
+    } catch (e) {
+      // var a = 'id'; <Tag id={a} 这样会出错
+    }
+
+    if (typeof chaoswiseIntlValue !== 'string') {
+      return false;
+    }
+
+    return chaoswiseIntlValue;
+  }
+
+  // 获取函数名称 fn/object.fn/object.a.b.c/intl.get().d
+  function getFnName(node) {
+    let fnName = '';
+    while (['CallExpression', 'MemberExpression', 'Identifier'].includes(node?.type)) {
+      if (node.type === 'CallExpression') {
+        let name = getFnName(node.callee);
+        fnName = `${name}().` + fnName;
+        break;
+      } else if (node.type === 'MemberExpression') {
+        fnName = `${node.property.name}.` + fnName;
+        if (node.object.name) {
+          fnName = `${node.object.name}.` + fnName;
+        }
+        node = node.object;
+      } else if (node.type === 'Identifier') {
+        // 这里获取修饰器的函数名称
+        fnName = fnName || (node.name + '.')
+        break;
+      }
+    }
+
+    // 把最后的 点. 取消
+    fnName = fnName.slice(0, -1);
+    return fnName;
+  }
+
   // XXX: [TRICKY] 防止中文转码为 unicode
   function hackValue(value, id) {
     if (id) hacked[id] = true;
 
+    // 字符串默认是单引号，如果模板字符串中出现单引号，需要转义，把 ' 换成 \'
+    // 就算用户自定配置字符串为双引号，也没事，默认会转义双引号，但是默认不会处理单引号，所以自己手动处理
+    if (/\'/.test(id)) {
+      id = id.replace(/\'/g, '\\\'');
+    }
+
     return Object.assign(t.StringLiteral(value), {
       extra: {
         raw: `'${id}'`, // id
-        rawValue: value, // zh
+        rawValue: value, // word
       },
     });
   }
@@ -37,8 +186,12 @@ module.exports = function(
     return false;
   }
 
-  // 是否命中替换的正则
+  // 是否命中替换条件
   function isPrimary(str) {
+    if (special) {
+      // 如果匹配到了替换过的，就返回false。为了防止多次执行collect，多次嵌套替换
+      if (specialMatch(str)) return false;
+    }
     return primaryRegx.test(str);
   }
 
@@ -58,28 +211,37 @@ module.exports = function(
   function makeObjectExpression(obj) {
     if (Object.prototype.toString.call(obj) !== '[object Object]') return null;
 
-    // 存储每一项变量
-    const ObjectPropertyArr = [];
-    Object.keys(obj).forEach((k) => {
-      const node = obj[k].value;
-      // 模板字符串中，变量存在函数调用的情况下：如果当前变量为函数，那么需要处理函数的中文参数，比如：`hello ${getText('中文')}`
-      if (!shouldIgnore(node) && node?.type === 'CallExpression') {
-        node.arguments = dealArgs(node.arguments);
-      }
-      ObjectPropertyArr.push(
-        t.ObjectProperty(
+    // 模板字符串中，转换后，如果第二项参数还有中文，或者更深层级有中文，这里处理好
+    // 模板字符串转换前`${f(`aa${f('中文')}中文`)}中文`
+    /* 转换后
+    intl
+      .get('id1', {
+        slot0: f(
+          intl
+            .get('id2', { slot0: f(intl.get('id3').d('中文')) })
+            .d('aa{slot0}中文')
+        ),
+      })
+      .d('{slot0}中文');
+   */
+    const keys = Object.keys(obj);
+    const datas = dealArgs(Object.values(obj).map(item => item.value || item));
+
+    return t.ObjectExpression(
+      keys.map((k, i) => {
+        const node = datas[i];
+        return t.ObjectProperty(
           t.Identifier(k),
-          obj[k].isAstNode ? obj[k].value : t.Identifier(obj[k])
+          obj[k].isAstNode ? node : t.Identifier(obj[k])
         )
-      );
-    });
-    return t.ObjectExpression(ObjectPropertyArr);
+      })
+    );
   }
 
   // 更新allWords
-  function updateWordsInfo(zh) {
-    if (allWords.includes(zh)) return;
-    allWords.push(zh);
+  function updateWordsInfo(word) {
+    if (allWords.includes(word)) return;
+    allWords.push(word);
   }
 
   // 处理函数的argments
@@ -87,7 +249,7 @@ module.exports = function(
     if (!Array.isArray(args)) return args;
     const resArgs = []; // 参数处理完，用resArgs保存
     args.forEach(node => {
-       // 字符串变量
+      // 字符串变量
       if (node.type === 'StringLiteral' && isPrimary(node.value)) {
         resArgs.push(makeReplace(node.value));
       }
@@ -141,6 +303,11 @@ module.exports = function(
     // 将中文词条替换为国际化api:init.t(id/key)
     const id = replaceWords[value];
 
+    // 特殊文件处理
+    if (special) {
+      const str = `${i18nObject ? `${i18nObject}.` : ''}${i18nMethod}("${id}").${i18nDefaultFunctionKey}("${value}")`;
+      return hackValue(str, str,);
+    }
     // 生成新的ast节点
     const v = hackValue(value, id);
     const objExp = makeObjectExpression(variables);
@@ -157,7 +324,7 @@ module.exports = function(
             : t.identifier(i18nMethod),
           objExp ? [v, objExp] : [v]
         )
-        , t.identifier('d')
+        , t.identifier(i18nDefaultFunctionKey)
       ),
       [defaultV]
     );
@@ -230,67 +397,119 @@ module.exports = function(
     }
     return { needReplace, value };
   }
+
   // 函数表达式
   function dealCallExpressionNode(node) {
     const res = {
       needReplace: false,
       value: null,
       skip: false,
+      remove: false,
     }
     if (shouldIgnore(node)) {
       res.skip = true;
       return res;
     }
 
+    const fnName = getFnName(node.callee);
+
     // 处理 ignoreMethods
-    if (node.callee.type === 'MemberExpression') {
-      let parentNode = '';
-      if (node.callee.object.name) {
-        parentNode = node.callee.object.name;
-      } else if (node.callee.object.property) {
-        // 处理忽略类似 a.b.c 方法情况
-        parentNode = node.callee.object.property.name;
-      }
+    if ([
+      ...(ignoreMethods || []),
+      `${i18nObject}.${i18nMethod}`, // intl.get
+      `${i18nObject}.${i18nMethod}().${i18nDefaultFunctionKey}`, // intl.get().d
+    ].includes(fnName)) {
+      res.skip = true;
+      return res;
+    }
 
-      const callExpression = `${parentNode}.${node.callee.property.name}`;
+    // 需要删除的函数
+    if (removeFunctionName.includes(fnName)) {
+      // 文件需要修改
+      returns.hasTouch = true;
+      res.remove = true;
+      return res;
+    }
+
+    // 已经做过国际化的项目，替换国际化函数
+    if (fnName === intlFunctionName) {
+      res.skip = true;
 
-      if (ignoreMethods.includes(callExpression)) {
-        res.skip = true;
-        return res;
+      const argsAst = node.arguments;
+      // 把ast转为js， 再用FormPath.getIn来取最终的值
+      const { code: argsCode } = generate(t.arrayExpression(argsAst));
+      let chaoswiseIntlId
+      var chaoswiseIntlIdData
+      try {
+        eval('var chaoswiseIntlIdData =' + argsCode);
+        chaoswiseIntlId = FormPath.getIn(chaoswiseIntlIdData, getFullPath(intlFunctionIdPath));
+      } catch (e) {
+        // var a = 'id'; f(a) 这样会出错
+        // TODO
       }
-    }
 
-    if (node.callee.type === 'Identifier') {
-      if (ignoreMethods.includes(node.callee.name)) {
-        res.skip = true;
-        return res;
+      let value = getWord(chaoswiseIntlId);
+      if (!value) {
+        let defautValue = FormPath.getIn(chaoswiseIntlIdData, getFullPath(intlFunctionDefaultWordPath));
+        if (typeof defautValue === 'string') {
+          value = defautValue;
+        } else {
+          if (intlFunctionIdPath && !chaoswiseIntlId) {
+            properLog.warn(`文件:${filePath} 替换的函数名intlFunctionName:${intlFunctionName} id路径intlFunctionIdPath:${intlFunctionIdPath} 未找到非空字符串`)
+          }
+          if (localWordPath && chaoswiseIntlId && !value) {
+            properLog.warn(`中文文件localWordPath:${localWordPath} 键:${chaoswiseIntlId} 未找到非空字符串`)
+          }
+          if (intlFunctionDefaultWordPath) {
+            properLog.warn(`文件:${filePath} 替换的函数名intlFunctionName:${intlFunctionName} 默认中文路径intlFunctionDefaultWordPath:${intlFunctionDefaultWordPath} 未找到非空字符串`)
+          }
+          insertFailCommon(node);
+        }
+      }
+
+      if (value && isPrimary(value)) {
+        res.needReplace = true;
+        res.value = value;
       }
     }
 
     return res;
   }
 
+  // TODO
+  /* 
+  this.props.intl = lang === 'zh'? '中文': 'en'
+  intl.get(id).d('中文')
+  this.props.intl.lang = 'zh' ==> intl.lang = 'zh'
+  replaceName: { ['this.props.intl.lang']: () => 'intl.lang' }
+  或者replaceName: { ['this.props.intl.lang']: 'intl.lang' }
+  */
   return {
     // 导入声明，比如：import foo from "mod";
     ImportDeclaration(path) {
       // 是否已经导入过 intl 的依赖
       const m = importCode.match(/from ["'](.*)["']/);
       const pkgName = m ? m[1] : '';
-      if (path.node.source.value === pkgName) {
+      const name = path.node.source.value;
+      if (name === pkgName) {
         returns.hasImport = true;
       }
+      if (removePkgName.includes(name)) {
+        path.remove();
+        returns.hasTouch = true;
+      }
       path.skip();
     },
 
-    // 字符串模版，比如：`我的${bar}${fun('哈哈')}中文` intl.t(我的{bar}{slot1}中文,{bar:fdsafdsdf,slot1:fn()})
+    // 字符串模版，比如：`我的${bar}${fun('哈哈')}中文` intl.get(我的{bar}{slot1}中文,{bar:fdsafdsdf,slot1:fn()})
     TemplateLiteral(path) {
       const { node } = path;
 
       const { needReplace, value, variable, } = dealTemplateLiteralNode(node);
       if (needReplace) {
         path.replaceWith(makeReplace(value, Object.keys(variable).length ? variable : null));
+        path.skip();
       }
-      path.skip();
     },
 
     // 字符串变量
@@ -306,8 +525,17 @@ module.exports = function(
         }
         path.replaceWith(res);
         path.skip();
-      } else if (isPrimary(value)) {
-        log.warn('ignore 1!!!!!!', value);
+      }
+    },
+
+    // 修饰器
+    Decorator(path) {
+      const { node } = path;
+      const fnName = getFnName(node.expression);
+      if (removeFunctionName.includes(fnName)) {
+        returns.hasTouch = true;
+        path.remove();
+        path.skip();
       }
     },
 
@@ -315,13 +543,90 @@ module.exports = function(
     CallExpression(path) {
       const { node } = path;
 
-      const { needReplace, value, skip } = dealCallExpressionNode(node);
+      const { needReplace, value, skip, remove } = dealCallExpressionNode(node);
+      
+      if (remove) {
+        if (node.arguments.length === 1) {
+          // 去掉外侧的包裹组件
+          path.replaceWith(node.arguments[0]);
+        } else {
+          // f( 1, 2)
+          //  1, 2
+          // 移除函数有问题，这里不处理
+        }
+
+        return;
+      }
+
       if (needReplace) {
         path.replaceWith(makeReplace(value));
       }
       if (skip) path.skip();
     },
 
+    // jsx标签
+    JSXElement(path) {
+      const { node } = path;
+      const { openingElement } = node;
+      const jsxName = openingElement.name.name;
+
+      // 不解析jsx中的style标签
+      if (ignoreComponents.includes(jsxName)) {
+        path.skip();
+        return;
+      }
+
+      const parentNodeType = path.parentPath?.node?.type;
+
+      // 如果是配置的国际化jsx标签
+      if (!shouldIgnore(node) && intlTag && jsxName === intlTag) {
+
+        let id = getJsxTagChaoswiseIntlValue(openingElement, intlTagIdPath || 'id');
+
+        let word = getWord(id);
+
+        if (!word) {
+          // 根据id找不到中文，就找jsx标签的默认中文
+          let defaultValue = getJsxTagChaoswiseIntlValue(openingElement, intlTagDefaultWordPath);
+          if (typeof defaultValue === 'string') {
+            word = defaultValue;
+          } else {
+            if (!intlTagIdPath) {
+              properLog.warn(`intlTagIdPath未配置`);
+            } else {
+              if (!id) {
+                properLog.warn(`文件:${filePath} id路径intlTagIdPath:${intlTagIdPath} 未找到非空字符串`);
+              } else {
+                // word找不到
+                localWordPath && properLog.warn(`中文文件localWordPath:${localWordPath} 键:${id} 未找到非空字符串`);
+              }
+            }
+            if (defaultValue === false) {
+              properLog.warn(`文件:${filePath} 替换的标签intlTag:${intlTag} 默认中文路径intlTagDefaultWordPath:${intlTagDefaultWordPath} 未找到非空字符串`);
+            }
+
+            if (['JSXFragment', 'JSXElement'].includes(parentNodeType)) {
+              insertFailCommonInJsx(path);
+            } else {
+              insertFailCommon(node);
+            }
+
+          }
+        }
+        if (word && isPrimary(word)) {
+          // 替换国际化标签，<FormatMessage id='zhongwenid' defaultMessage="中文" />  换成 {intl.get(id).d('中文')}
+          let res = makeReplace(word);
+
+          // 如果节点的父节点是JSXFragment或者JSXElement，那么就包一层JSXExpressionContainer
+          if (['JSXFragment', 'JSXElement'].includes(parentNodeType)) {
+            res = t.JSXExpressionContainer(res);
+          }
+          path.replaceWith(res);
+        }
+        path.skip();
+      }
+    },
+
     // JSX文本节点
     JSXText(path) {
       const { node } = path;

package/bin/scripts/util/makeVisitorUpdate.js

@@ -1,12 +1,16 @@
 const t = require('@babel/types');
+const specialMatch = require('./specialMatch');
 
 module.exports = function f(
   {
     i18nObject,
     i18nMethod,
     importCode,
+    ignoreLines,
+    i18nDefaultFunctionKey,
   },
-  returns
+  returns,
+  { special },
 ) {
   const { replaceWords, downloadIds } = returns;
 
@@ -33,6 +37,14 @@ module.exports = function f(
     return str.trim().replace(/\s+/g, ' ');
   }
 
+  // 是否忽略
+  function shouldIgnore(node) {
+    if (node?.loc) {
+      return ignoreLines.includes(node.loc.start.line);
+    }
+    return false;
+  }
+
   // 处理模板字符串中的变量
   function makeObjectExpression(obj) {
     if (Object.prototype.toString.call(obj) !== '[object Object]') return null;
@@ -118,6 +130,31 @@ module.exports = function f(
   }
 
   return {
+    // 字符串变量  src/config/router.config.js中的id进行替换
+    StringLiteral(path) {
+      const { node } = path;
+      let { value } = node;
+
+      if (!shouldIgnore(node) && special) {
+        // intl.get('id').d(中文) 获取id和中文
+        const { id, defaultValue } = specialMatch(value) || {};
+        if (!id) return;
+
+        const finalyId = replaceWords[id];
+        if (finalyId) {
+          returns.hasTouch = true;
+          downloadIds.push(finalyId);
+
+          const str = `${i18nObject ? `${i18nObject}.` : ''}${i18nMethod}("${finalyId}").${i18nDefaultFunctionKey}("${defaultValue}")`;
+          const newStr = hackValue(str, str,);
+          path.replaceWith(newStr);
+          path.skip();
+        } else {
+          downloadIds.push(id);
+        }
+      }
+    },
+
     // 导入声明，比如：import foo from "mod";
     ImportDeclaration(path) {
       // 是否已经导入过 intl 的依赖

package/bin/scripts/util/specialMatch.js

@@ -0,0 +1,14 @@
+const getConf = require('../conf');
+
+let reg;
+
+module.exports = function (str) {
+  if (!reg) {
+    const conf = getConf();
+    const { i18nObject, i18nMethod, i18nDefaultFunctionKey } = conf;
+    reg = new RegExp(`${i18nObject? `${i18nObject}\\.`: ''}${i18nMethod}\\([\\'\\"]([^\\)]*)[\\'\\"]\\)\\.${i18nDefaultFunctionKey}\\([\\'\\"]([^\\)]*)[\\'\\"]\\)`);
+  }
+  const res = str.match(reg);
+  if (!res) return;
+  return { id: res[1], defaultValue: res[2] };
+}