ztxkutils 10.0.9 → 20.0.1

package/zti18n-core/src/plugin/reactIntlToReactIntlUniversal.js

@@ -0,0 +1,224 @@
+const t = require('@babel/types');
+const log = require('../utils/log');
+
+const isChinese = function (text) {
+  return /[\u4e00-\u9fa5]/.test(text);
+};
+
+/**
+ * 替换为 intl.get('xxxxxxxx').d('基本信息')
+ */
+function makeReplace({ value, variableObj, id }) {
+  let key = id;
+
+  // 用于防止中文转码为 unicode
+  const v = Object.assign(t.StringLiteral(value), {
+    extra: {
+      raw: `'${value}'`,
+      rawValue: value,
+    },
+  });
+
+  return t.CallExpression(
+    t.MemberExpression(
+      t.CallExpression(
+        t.MemberExpression(t.Identifier('intl'), t.Identifier('get')),
+        variableObj
+          ? [typeof key === 'string' ? t.StringLiteral(key) : key, variableObj]
+          : [typeof key === 'string' ? t.StringLiteral(key) : key]
+      ),
+      t.Identifier('d')
+    ),
+    [v]
+  );
+}
+
+/**
+ * 获取代码转换的插件
+ * @param {object} zhData 中文文案资源
+ * @param {object} outObj 传出的参数对象
+ */
+function getPlugin(zhData, outObj) {
+  const cache = {};
+
+  // 防止中文转码为 unicode
+  function handleChinese(value, key) {
+    cache[key] = true;
+    return Object.assign(t.StringLiteral(value), {
+      extra: {
+        raw: `'${value}'`,
+        rawValue: value,
+      },
+    });
+  }
+
+  const plugin = function ({ types: t }) {
+    return {
+      visitor: {
+        ImportDeclaration(path) {
+          const { node } = path;
+          if (node.source.value === 'di18n-react') {
+            outObj.hasReactIntlUniversal = true;
+          }
+
+          if (node.source.value === 'react-intl') {
+            outObj.needRewrite = true;
+            log.info('remove: injectIntl');
+            path.remove();
+          }
+        },
+        Decorator(path) {
+          const { node } = path;
+          if (node.expression.name === 'injectIntl') {
+            outObj.needRewrite = true;
+            log.info('remove: injectIntl decorator');
+            path.remove();
+          }
+        },
+        BinaryExpression(path) {
+          const { node } = path;
+
+          // 替换类似 this.props.intl.locale === 'en' 为 intl.options.currentLocale === 'en-US'
+          if (
+            node.operator === '===' &&
+            node.right.type === 'StringLiteral' &&
+            node.right.value === 'en' &&
+            node.left.type === 'MemberExpression' &&
+            node.left.property.name === 'locale'
+          ) {
+            outObj.needRewrite = true;
+            log.info("replace intl.locale === 'en'");
+
+            node.left = t.MemberExpression(
+              t.MemberExpression(t.Identifier('intl'), t.Identifier('options')),
+              t.Identifier('currentLocale')
+            );
+            node.right = t.StringLiteral('en-US');
+          }
+        },
+        ObjectPattern(path) {
+          const { node } = path;
+
+          const parent = path.parent;
+          if (!parent.init) {
+            return;
+          }
+
+          if (
+            (parent.init.type === 'Identifier' &&
+              parent.init.name === 'props') ||
+            (parent.init.type === 'MemberExpression' &&
+              parent.init.property.name === 'props')
+          ) {
+            // 处理掉 let { params, intl } = this.props; 中的 intl
+            log.info('remove: this.props.intl');
+            node.properties = node.properties.filter(
+              (p) => !p.value || p.value.name !== 'intl'
+            );
+          }
+        },
+        JSXElement(path) {
+          const { node } = path;
+          const { openingElement } = node;
+          if (openingElement.name.name === 'FormattedMessage') {
+            outObj.needRewrite = true;
+
+            const idNode = openingElement.attributes.find(
+              (atr) => atr.name.name === 'id'
+            );
+
+            const id = idNode.value.value
+              ? idNode.value.value
+              : idNode.value.expression;
+
+            const valuesNode = openingElement.attributes.find(
+              (atr) => atr.name.name === 'values'
+            );
+            let callExpression;
+
+            if (valuesNode) {
+              callExpression = makeReplace({
+                value: zhData[id] || 'TBD',
+                id: id,
+                variableObj: valuesNode.value.expression,
+              });
+            } else {
+              callExpression = makeReplace({
+                value: zhData[id] || 'TBD',
+                id: id,
+              });
+            }
+
+            if (path.parent.type === 'JSXExpressionContainer') {
+              path.replaceWith(callExpression);
+            } else if (path.parent.type === 'JSXElement') {
+              path.replaceWith(t.JSXExpressionContainer(callExpression));
+            } else {
+              path.replaceWith(callExpression);
+            }
+          }
+        },
+        StringLiteral(path) {
+          const { node } = path;
+          const { value } = node;
+          const key = value + node.start + node.end;
+          if (isChinese(value) && !cache[key]) {
+            if (path.parent.type === 'JSXAttribute') {
+              path.replaceWith(handleChinese(value, key));
+            }
+          }
+        },
+        CallExpression(path) {
+          const { node } = path;
+
+          const handleFormatMessageMethod = () => {
+            const id = node.arguments[0].properties.find(
+              (prop) => prop.key.name === 'id'
+            ).value.value;
+            outObj.needRewrite = true;
+
+            log.info(`replace: ${id}`);
+
+            if (node.arguments.length === 1) {
+              path.replaceWith(
+                makeReplace({ value: zhData[id] || 'TBD', id: id })
+              );
+            } else {
+              path.replaceWith(
+                makeReplace({
+                  value: zhData[id] || 'TBD',
+                  id: id,
+                  variableObj: node.arguments[1],
+                })
+              );
+            }
+          };
+
+          if (node.callee.type === 'MemberExpression') {
+            if (node.callee.property.name === 'formatMessage') {
+              if (
+                (node.callee.object.property &&
+                  node.callee.object.property.name === 'intl') ||
+                (node.callee.object.type === 'Identifier' &&
+                  node.callee.object.name === 'intl')
+              ) {
+                handleFormatMessageMethod();
+              }
+            }
+          } else {
+            if (node.callee.name === 'formatMessage') {
+              handleFormatMessageMethod();
+            } else if (node.callee.name === 'injectIntl') {
+              outObj.needRewrite = true;
+              path.replaceWith(node.arguments[0]);
+            }
+          }
+        },
+      },
+    };
+  };
+
+  return plugin;
+}
+
+module.exports = getPlugin;

package/zti18n-core/src/plugin/reactIntlUniversalToDi18n.js

@@ -0,0 +1,64 @@
+const t = require('@babel/types');
+
+const replaceLineBreak = function (value) {
+  if (typeof value !== 'string') return value;
+  return value.replace(/\n/g, ' ');
+};
+
+/**
+ * 获取代码转换的插件
+ */
+function getPlugin(outObj, allConverted, intlAlias = 'intl') {
+  function makeReplace({ orignKey, value, variableObj }) {
+    outObj.translateWordsNum++;
+
+    const value2 = replaceLineBreak(value);
+
+    // 用于防止中文转码为 unicode
+    const v = Object.assign(t.StringLiteral(value2), {
+      extra: {
+        raw: `'${value2}'`,
+        rawValue: value2,
+      },
+    });
+
+    allConverted[orignKey] = value;
+
+    return t.CallExpression(
+      t.MemberExpression(t.Identifier(intlAlias), t.Identifier('t')),
+      variableObj ? [v, variableObj] : [v]
+    );
+  }
+
+  const plugin = function () {
+    return {
+      visitor: {
+        CallExpression(path) {
+          const { node } = path;
+
+          if (node.callee.type === 'MemberExpression') {
+            if (
+              path.node.callee.object.name === intlAlias &&
+              path.node.callee.property.name === 'get'
+            ) {
+              const args = path.node.arguments;
+
+              const orignKey = args[0].value;
+              const variableObj = args[1] ? args[1] : null;
+
+              const value = path.parentPath.parent.arguments[0].value;
+
+              path.parentPath.parentPath.replaceWith(
+                makeReplace({ orignKey, value, variableObj })
+              );
+            }
+          }
+        },
+      },
+    };
+  };
+
+  return plugin;
+}
+
+module.exports = getPlugin;

package/zti18n-core/src/transform/defaultPkMap.js

@@ -0,0 +1,79 @@
+// 当使用 HTML 模板时，由于大小写不敏感，为了避免转换中丢失大小写，需要提供组件的 Pascal 到 kebab 形式映射
+// 默认的如下（iview: https://github.com/iview/iview-loader/blob/master/src/tag-map.js）
+module.exports = {
+  Switch: 'i-switch',
+  Circle: 'i-circle',
+  Affix: 'i-affix',
+  Alert: 'i-alert',
+  AnchorLink: 'i-anchor-link',
+  Anchor: 'i-anchor',
+  AutoComplete: 'i-auto-complete',
+  Avatar: 'i-avatar',
+  BackTop: 'i-back-top',
+  Badge: 'i-badge',
+  BreadcrumbItem: 'i-breadcrumb-item',
+  Breadcrumb: 'i-breadcrumb',
+  ButtonGroup: 'i-button-group',
+  Button: 'i-button',
+  Card: 'i-card',
+  CarouselItem: 'i-carousel-item',
+  Carousel: 'i-carousel',
+  Cascader: 'i-cascader',
+  CellGroup: 'i-cell-group',
+  Cell: 'i-cell',
+  CheckboxGroup: 'i-checkbox-group',
+  Checkbox: 'i-checkbox',
+  Col: 'i-col',
+  Collapse: 'i-collapse',
+  ColorPicker: 'i-color-picker',
+  Content: 'i-content',
+  DatePicker: 'i-date-picker',
+  Divider: 'i-divider',
+  Drawer: 'i-drawer',
+  DropdownItem: 'i-dropdown-item',
+  DropdownMenu: 'i-dropdown-menu',
+  Dropdown: 'i-dropdown',
+  Footer: 'i-footer',
+  FormItem: 'i-form-item',
+  Form: 'i-form',
+  Header: 'i-header',
+  Icon: 'i-icon',
+  InputNumber: 'i-input-number',
+  Input: 'i-input',
+  Layout: 'i-layout',
+  Menu: 'i-menu',
+  MenuGroup: 'i-menu-group',
+  MenuItem: 'i-menu-item',
+  Sider: 'i-sider',
+  Submenu: 'i-submenu',
+  Modal: 'i-modal',
+  OptionGroup: 'i-option-group',
+  Option: 'i-option',
+  Page: 'i-page',
+  Panel: 'i-panel',
+  Poptip: 'i-poptip',
+  Progress: 'i-progress',
+  RadioGroup: 'i-radio-group',
+  Radio: 'i-radio',
+  Rate: 'i-rate',
+  Row: 'i-row',
+  Scroll: 'i-scroll',
+  Select: 'i-select',
+  Slider: 'i-slider',
+  Spin: 'i-spin',
+  Split: 'i-split',
+  Step: 'i-step',
+  Steps: 'i-steps',
+  Table: 'i-table',
+  Tabs: 'i-tabs',
+  TabPane: 'i-tab-pane',
+  Tag: 'i-tag',
+  TimelineItem: 'i-timeline-item',
+  Timeline: 'i-timeline',
+  TimePicker: 'i-time-picker',
+  Time: 'i-time',
+  Tooltip: 'i-tooltip',
+  Transfer: 'i-transfer',
+  Tree: 'i-tree',
+  Upload: 'i-upload',
+};

package/zti18n-core/src/transform/transformHtml.js

@@ -0,0 +1,271 @@
+const parse5 = require('parse5');
+const Serializer = require('parse5/lib/serializer');
+const { NAMESPACES: NS } = require('parse5/lib/common/html');
+const prettier = require('prettier');
+const mustache = require('mustache');
+const transformJs = require('./transformJs');
+const getIgnoreLines = require('../utils/getIgnoreLines');
+const defaultPkMap = require('./defaultPkMap');
+
+class MySerializer extends Serializer {
+  _serializeAttributes(node) {
+    const attrs = this.treeAdapter.getAttrList(node);
+
+    for (let i = 0, attrsLength = attrs.length; i < attrsLength; i++) {
+      const attr = attrs[i];
+      const value = Serializer.escapeString(attr.value, true);
+
+      this.html += ' ';
+
+      if (!attr.namespace) {
+        this.html += attr.name;
+      } else if (attr.namespace === NS.XML) {
+        this.html += 'xml:' + attr.name;
+      } else if (attr.namespace === NS.XMLNS) {
+        if (attr.name !== 'xmlns') {
+          this.html += 'xmlns:';
+        }
+
+        this.html += attr.name;
+      } else if (attr.namespace === NS.XLINK) {
+        this.html += 'xlink:' + attr.name;
+      } else {
+        this.html += attr.prefix + ':' + attr.name;
+      }
+
+      // 避免出现 <p v-else="">xxx</p> 的情况
+      if (value) {
+        this.html += '="' + value + '"';
+      }
+    }
+  }
+}
+
+function parse5Serialize(node, options) {
+  const serializer = new MySerializer(node, options);
+
+  return serializer.serialize();
+}
+
+function toKebab(tpl, pkMap = {}) {
+  pkMap = { ...defaultPkMap, ...pkMap };
+
+  Object.keys(pkMap).forEach((i) => {
+    tpl = tpl
+      .replace(new RegExp(`<${i}(?![a-zA-Z0-9-])`, 'g'), `<${pkMap[i]}`)
+      .replace(new RegExp(`</${i}>`, 'g'), `</${pkMap[i]}>`);
+  });
+  return tpl;
+}
+
+function toPascal(tpl, pkMap = {}) {
+  pkMap = { ...defaultPkMap, ...pkMap };
+
+  Object.keys(pkMap).forEach((i) => {
+    tpl = tpl
+      .replace(new RegExp(`<${pkMap[i]}(?![a-zA-Z0-9-])`, 'g'), `<${i}`)
+      .replace(new RegExp(`</${pkMap[i]}>`, 'g'), `</${i}>`);
+  });
+  return tpl;
+}
+
+function traverseHtml(ast, { primaryRegx, i18nMethod, ignoreLines }, returns) {
+  const { allTranslated, allUpdated, allUsedKeys } = returns;
+  const existValues = Object.keys(allTranslated);
+
+  function shouldIgnore(node) {
+    return (
+      node.sourceCodeLocation &&
+      ignoreLines.includes(node.sourceCodeLocation.startLine)
+    );
+  }
+
+  function isPrimary(str) {
+    return primaryRegx.test(str);
+  }
+
+  function formatValue(value) {
+    // 去掉首尾空白字符，中间的连续空白字符替换成一个空格
+    value = value.trim().replace(/\s+/g, ' ');
+
+    // 去掉首尾引号
+    if (['"', "'"].includes(value.charAt(0))) {
+      value = value.substring(1, value.length - 1);
+    }
+
+    return value;
+  }
+
+  // 更新2个 `all*` 数组
+  function updateLocaleInfo(key, value) {
+    if (!Array.isArray(allTranslated[value])) {
+      // 如果该文字没有存在于已翻译列表
+      allTranslated[value] = [key];
+      existValues.push(key);
+    }
+
+    if (!allUsedKeys.includes(key)) {
+      allUsedKeys.push(key);
+    }
+  }
+
+  function transformJsExpression(source) {
+    const { source: source1, hasTouch } = transformJs(
+      source,
+      {
+        allTranslated,
+        allUpdated,
+        allUsedKeys,
+      },
+      {
+        primaryRegx,
+        i18nObject: '',
+        i18nMethod,
+        importCode: '',
+      }
+    );
+
+    if (!hasTouch) return source;
+
+    return prettier
+      .format(source1, {
+        parser: 'babel',
+        singleQuote: true,
+        semi: false,
+      })
+      .trim();
+  }
+
+  function traverse(node) {
+    if (node.childNodes) {
+      node.childNodes.forEach((childNode) => traverse(childNode));
+    }
+
+    // 处理属性
+    if (!shouldIgnore(node) && node.attrs) {
+      node.attrs.forEach((attr) => {
+        const { name, value } = attr;
+
+        // 非主语言或空，跳过
+        if (!isPrimary(value) || !value) return;
+
+        if (
+          name.startsWith('v-') ||
+          name.startsWith(':') ||
+          name.startsWith('@')
+        ) {
+          // vue 指令
+          // 引号里是 js 表达式，直接调用 transformJs 来转换
+          const source = transformJsExpression(value);
+
+          if (value !== source) {
+            attr.value = source;
+            returns.hasTouch = true;
+          }
+        } else {
+          // 普通属性（不考虑事件）
+          let key = formatValue(value);
+
+          if (allUpdated.hasOwnProperty(key)) {
+            key = allUpdated[key];
+          }
+
+          attr.value = `${i18nMethod}('${key}')`;
+          attr.name = `:${name}`;
+          returns.hasTouch = true;
+
+          updateLocaleInfo(key, key);
+        }
+      });
+    }
+
+    // 处理 innerText
+    if (!shouldIgnore(node) && node.nodeName === '#text') {
+      if (!isPrimary(node.value)) return;
+
+      let value = '';
+      const tokens = mustache.parse(node.value);
+
+      for (const token of tokens) {
+        // token 结构：[类型(text|name), 值, 起始位置(包含), 终止位置(不包含)]
+        if (!isPrimary(token[1])) {
+          if (token[0] === 'text') value += token[1];
+          else if (token[0] === 'name') value += `{{${token[1]}}}`;
+        } else {
+          if (token[0] === 'text') {
+            const key = token[1].trim();
+            value += `{{${i18nMethod}('${key}')}}`;
+
+            updateLocaleInfo(key, key);
+          } else if (token[0] === 'name') {
+            value += `{{${transformJsExpression(token[1])}}}`;
+          }
+        }
+      }
+
+      if (node.value !== value) {
+        node.value = value;
+        returns.hasTouch = true;
+      }
+    }
+  }
+
+  // 可能有 #comment 节点，需要找到 html 节点
+  const html = ast.childNodes.find((nd) => nd.nodeName === 'html');
+
+  if (html) {
+    // 再找 body 节点
+    const body = html.childNodes.find((nd) => nd.nodeName === 'body');
+
+    // 遍历
+    if (body) traverse(body);
+  }
+}
+
+module.exports = function transformHtml(source, localeInfo = {}, options = {}) {
+  const { allTranslated = {}, allUpdated = {}, allUsedKeys = [] } = localeInfo;
+
+  const {
+    primaryRegx = /[\u4e00-\u9fa5]/,
+    i18nMethod = '$t',
+    pkMap = {},
+
+    /* 以下暂时不需要
+    i18nObject = '',
+    importCode = '',
+    babelPresets = [],
+    babelPlugins = [],
+    ignoreComponents = [],
+    ignoreMethods = [],
+    以上暂时不需要 */
+  } = options;
+
+  const opts = {
+    primaryRegx,
+    i18nMethod,
+    ignoreLines: [],
+  };
+
+  const r = {
+    allTranslated,
+    allUpdated,
+    allUsedKeys,
+    hasTouch: false,
+  };
+
+  opts.ignoreLines = getIgnoreLines(source);
+
+  const ast = parse5.parse(toKebab(source, pkMap), {
+    sourceCodeLocationInfo: true,
+  });
+  traverseHtml(ast, opts, r);
+
+  let code = toPascal(parse5Serialize(ast), pkMap);
+
+  // 只需要 body 内的
+  code = code.split('<body>')[1].split('</body>')[0];
+
+  code = r.hasTouch ? code : source;
+
+  return { source: code, hasTouch: r.hasTouch };
+};