ztxkutils 10.0.8 → 20.0.1

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

@@ -0,0 +1,272 @@
+const lex = require('pug-lexer');
+const parse = require('pug-parser');
+const genSource = require('pug-source-gen');
+const mustache = require('mustache');
+const prettier = require('prettier');
+const transformJs = require('./transformJs');
+const getIgnoreLines = require('../utils/getIgnoreLines');
+
+/* eslint-disable */
+// override to avoid unneeded escape: pug-source-gen/lib/code-generator.js
+genSource.CodeGenerator.prototype.attrs = function (attrs) {
+  var regularAttrs = [];
+  var classes = '';
+  var id;
+  attrs.forEach(
+    function (attr) {
+      var constVal = '';
+      try {
+        constVal = constantinople.toConstant(attr.val);
+      } catch (ex) {}
+
+      if (
+        attr.name === 'class' &&
+        !attr.escaped &&
+        constVal &&
+        /^\-?[_a-z][_a-z0-9\-]*$/i.test(constVal)
+      ) {
+        classes += '.' + constVal;
+      } else if (
+        attr.name === 'id' &&
+        !id &&
+        !attr.escaped &&
+        constVal &&
+        /^[\w-]+$/.test(constVal)
+      ) {
+        id = constVal;
+      } else {
+        var attrOut = '';
+
+        // name
+        if (/^\w[^()[\]=!,`'"\s]*$/.test(attr.name)) {
+          attrOut += attr.name;
+        } else {
+          var name = attr.name.replace(/\\/g, '\\\\');
+          attrOut += name;
+        }
+
+        if (!(typeof constVal === 'boolean' && constVal === true)) {
+          // operator
+          attrOut += '=';
+
+          // value
+          attrOut += attr.val;
+        }
+
+        regularAttrs.push(attrOut);
+      }
+    }.bind(this)
+  );
+
+  var out = '';
+  if (id) out += '#' + id;
+  out += classes;
+  if (regularAttrs.length) out += '(' + regularAttrs.join(' ') + ')';
+
+  return out;
+};
+/* eslint-enable */
+
+function traversePug(ast, { primaryRegx, i18nMethod, ignoreLines }, returns) {
+  // returesallTranslatedWord, updatedTranslatedWord, keysInUse, ignores) {
+  const { allTranslated, allUpdated, allUsedKeys } = returns;
+  const existValues = Object.keys(allTranslated);
+
+  function shouldIgnore(node) {
+    return node.line && ignoreLines.includes(node.line);
+  }
+
+  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 } = transformJs(
+      source,
+      {
+        allTranslated,
+        allUpdated,
+        allUsedKeys,
+      },
+      {
+        primaryRegx,
+        i18nObject: '',
+        i18nMethod,
+        importCode: '',
+      }
+    );
+
+    let code = prettier.format(source1, {
+      parser: 'babel',
+      singleQuote: true,
+      semi: false,
+    });
+
+    code = code.trim().replace(/\s+/g, ' ');
+
+    // 去掉开头的分号
+    if (code[0] === ';') code = code.slice(1);
+
+    return code;
+  }
+
+  function traverse(node) {
+    if (node.type === 'Tag' && node.block) {
+      traverse(node.block);
+    }
+
+    if (node.type === 'Block' && node.nodes) {
+      node.nodes.forEach((nd) => traverse(nd));
+    }
+
+    // 处理属性
+    if (!shouldIgnore(node) && node.attrs) {
+      node.attrs.forEach((attr) => {
+        const { name, val } = attr;
+
+        // 非主语言，跳过
+        if (!isPrimary(val)) return;
+
+        if (
+          name.startsWith('v-') ||
+          name.startsWith(':') ||
+          name.startsWith('@')
+        ) {
+          // vue 指令
+          let value = val;
+          if (['"', "'"].includes(val.charAt(0))) {
+            value = val.substring(1, val.length - 1);
+          }
+
+          // 引号里是 js 表达式，直接调用 transformJs 来转换
+          const source = transformJsExpression(value);
+
+          if (`"${source}"` !== val) {
+            attr.val = `"${source}"`;
+            returns.hasTouch = true;
+          }
+        } else {
+          // 普通属性（应该不会有人在模板里写 onclick 等事件吧，故不考虑事件）
+          let key = formatValue(val);
+
+          if (allUpdated.hasOwnProperty(key)) {
+            key = allUpdated[key];
+          }
+
+          attr.val = `"${i18nMethod}('${key}')"`;
+          attr.name = `:${name}`;
+          returns.hasTouch = true;
+        }
+      });
+    }
+
+    // 处理 innerText
+    if (!shouldIgnore(node) && node.type === 'Text') {
+      if (!isPrimary(node.val)) return;
+
+      let value = '';
+      const tokens = mustache.parse(node.val);
+
+      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') {
+            const source = transformJsExpression(token[1]);
+            value += `{{${source}}}`;
+          }
+        }
+      }
+
+      if (node.val !== value) {
+        node.val = value;
+        returns.hasTouch = true;
+      }
+    }
+  }
+
+  // 执行遍历
+  traverse(ast);
+}
+
+module.exports = function transformPug(source, localeInfo = {}, options = {}) {
+  const { allTranslated = {}, allUpdated = {}, allUsedKeys = [] } = localeInfo;
+
+  const {
+    primaryRegx = /[\u4e00-\u9fa5]/,
+    i18nMethod = '$t',
+
+    /* 以下暂时不需要
+    i18nObject = '',
+    importCode = '',
+    babelPresets = [],
+    babelPlugins = [],
+    ignoreComponents = [],
+    ignoreMethods = [],
+    以上暂时不需要 */
+  } = options;
+
+  const opts = {
+    primaryRegx,
+    i18nMethod,
+    ignoreLines: [],
+  };
+
+  const r = {
+    allTranslated,
+    allUpdated,
+    allUsedKeys,
+    hasTouch: false,
+  };
+
+  opts.ignoreLines = getIgnoreLines(source);
+  const tokens = lex(source.trim());
+
+  const ast = parse(tokens);
+  traversePug(ast, opts, r);
+
+  let code = source;
+  if (r.hasTouch) {
+    const genCode = genSource(ast);
+    code = prettier
+      .format(genCode, {
+        filepath: 'xxx.pug',
+        pugAttributeSeparator: 'none',
+      })
+      .trim();
+  }
+
+  return { source: code, hasTouch: r.hasTouch };
+};

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

@@ -0,0 +1,96 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const prettier = require('prettier');
+const babel = require('@babel/core');
+const pluginSyntaxJSX = require('@babel/plugin-syntax-jsx');
+const pluginSyntaxProposalOptionalChaining = require('@babel/plugin-proposal-optional-chaining');
+const pluginSyntaxClassProperties = require('@babel/plugin-syntax-class-properties');
+const pluginSyntaxDecorators = require('@babel/plugin-syntax-decorators');
+const pluginSyntaxObjectRestSpread = require('@babel/plugin-syntax-object-rest-spread');
+const pluginSyntaxAsyncGenerators = require('@babel/plugin-syntax-async-generators');
+const pluginSyntaxDoExpressions = require('@babel/plugin-syntax-do-expressions');
+const pluginSyntaxDynamicImport = require('@babel/plugin-syntax-dynamic-import');
+const pluginSyntaxFunctionBind = require('@babel/plugin-syntax-function-bind');
+const reactIntlToReactIntlUniversal = require('../plugin/reactIntlToReactIntlUniversal');
+const log = require('../utils/log');
+
+function getSourceFiles({ path, exclude }) {
+  return glob.sync(`${path}/**/*.{js,jsx}`, {
+    ignore: exclude || [],
+  });
+}
+
+function getLocaleFiles({ path, exclude }) {
+  return glob.sync(`${path}/**/zh-CN.{js,json}`, {
+    ignore: exclude || [],
+  });
+}
+
+/**
+ * 代码转换为使用 react-intl-universal 版本
+ * @param {object} option 命令行或者配置文件中传入的参数信息
+ */
+module.exports = function transformReactIntlToReactIntlUniversal(option) {
+  const { entry, localeConf, exclude, importCode } = option;
+
+  const targetFiles = getSourceFiles({ path: entry, exclude });
+  const targetLocales = getLocaleFiles({ path: localeConf.folder, exclude });
+
+  let zhData = {};
+
+  targetLocales.forEach((element) => {
+    if (path.extname(element) === '.json') {
+      const json = fs.readFileSync(element, {
+        encoding: 'utf-8',
+      });
+      zhData = JSON.parse(json);
+    } else if (path.extname(element) === '.js') {
+      zhData = require(path.resolve(path.resolve(), element));
+    }
+  });
+
+  function transformFile(filePath) {
+    let outObj = {
+      hasReactIntlUniversal: false,
+      needRewrite: false,
+    };
+
+    const transformOptions = {
+      babelrc: false,
+      sourceType: 'module',
+      plugins: [
+        pluginSyntaxJSX,
+        pluginSyntaxProposalOptionalChaining,
+        pluginSyntaxClassProperties,
+        [pluginSyntaxDecorators, { legacy: true }],
+        pluginSyntaxObjectRestSpread,
+        pluginSyntaxAsyncGenerators,
+        pluginSyntaxDoExpressions,
+        pluginSyntaxDynamicImport,
+        pluginSyntaxFunctionBind,
+        reactIntlToReactIntlUniversal(zhData, outObj),
+      ],
+      generatorOpts: {},
+    };
+
+    const bableObj = babel.transformFileSync(filePath, transformOptions);
+    let { code } = bableObj;
+
+    if (outObj.needRewrite) {
+      if (!outObj.hasReactIntlUniversal) {
+        code = importCode + '\n' + code;
+      }
+
+      code = prettier.format(code, option.prettier);
+
+      fs.writeFileSync(filePath, code, { encoding: 'utf-8' });
+    }
+  }
+
+  targetFiles.forEach((element) => {
+    log.info(`start: ${element}`);
+    transformFile(element);
+    log.success(`done: ${element}`);
+  });
+};

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

@@ -0,0 +1,90 @@
+const glob = require('glob');
+const fs = require('fs');
+const prettier = require('prettier');
+const babel = require('@babel/core');
+const pluginSyntaxJSX = require('@babel/plugin-syntax-jsx');
+const pluginSyntaxProposalOptionalChaining = require('@babel/plugin-proposal-optional-chaining');
+const pluginSyntaxClassProperties = require('@babel/plugin-syntax-class-properties');
+const pluginSyntaxDecorators = require('@babel/plugin-syntax-decorators');
+const pluginSyntaxObjectRestSpread = require('@babel/plugin-syntax-object-rest-spread');
+const pluginSyntaxAsyncGenerators = require('@babel/plugin-syntax-async-generators');
+const pluginSyntaxDoExpressions = require('@babel/plugin-syntax-do-expressions');
+const pluginSyntaxDynamicImport = require('@babel/plugin-syntax-dynamic-import');
+const pluginSyntaxFunctionBind = require('@babel/plugin-syntax-function-bind');
+const getConvert2Plugin = require('../plugin/reactIntlUniversalToDi18n');
+const log = require('../utils/log');
+
+function getSourceFiles({ entry, exclude }) {
+  return glob.sync(`${entry}/**/*.{js,jsx}`, {
+    ignore: exclude || [],
+  });
+}
+
+function translate(codeFileInfo, allConverted, option) {
+  const { filePath, currentEntry, currentOutput } = codeFileInfo;
+  const { intlAlias } = option;
+
+  const sourceCode = fs.readFileSync(filePath, 'utf8');
+
+  let outObj = {
+    translateWordsNum: 0,
+  };
+
+  const transformOptions = {
+    sourceType: 'module',
+    plugins: [
+      pluginSyntaxJSX,
+      pluginSyntaxProposalOptionalChaining,
+      pluginSyntaxClassProperties,
+      [pluginSyntaxDecorators, { legacy: true }],
+      pluginSyntaxObjectRestSpread,
+      pluginSyntaxAsyncGenerators,
+      pluginSyntaxDoExpressions,
+      pluginSyntaxDynamicImport,
+      pluginSyntaxFunctionBind,
+      getConvert2Plugin(outObj, allConverted, intlAlias),
+    ],
+    generatorOpts: {},
+  };
+
+  const bableObj = babel.transform(sourceCode, transformOptions);
+  let { code } = bableObj;
+
+  if (outObj.translateWordsNum > 0) {
+    code = prettier.format(code, option.prettier);
+
+    const target = currentOutput
+      ? filePath.replace(currentEntry, currentOutput)
+      : filePath;
+    fs.writeFileSync(target, code, { encoding: 'utf-8' });
+    log.success(`done: ${outObj.translateWordsNum} words collected`);
+  }
+}
+
+module.exports = function transformReactIntlUniveralToDi18n(option) {
+  const { entry, output, exclude } = option;
+
+  if (!Array.isArray(entry) && typeof entry !== 'string') {
+    log.error('entry must be a string or array');
+    process.exit(2);
+  }
+
+  const allConverted = {};
+
+  const outputs = output ? [].concat(output) : [];
+  const targetFiles = [].concat(entry).reduce((prev, cur, index) => {
+    const files = getSourceFiles({ entry: cur, exclude }).map((file) => ({
+      filePath: file,
+      currentEntry: cur,
+      currentOutput: outputs[index],
+    }));
+    return prev.concat(files);
+  }, []);
+
+  targetFiles.forEach((codeFileInfo) => {
+    translate(codeFileInfo, allConverted, option);
+    log.success(`done: ${codeFileInfo.filePath}`);
+  });
+
+  return allConverted;
+};

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

@@ -0,0 +1,22 @@
+const transformTs = require('./transformTs');
+const transformJs = require('./transformJs');
+const transformVue = require('./transformVue');
+const { REACT_JS, REACT_TS, VUE } = require('../utils/constants');
+
+module.exports = function transformDi18n(
+  source,
+  sourceType,
+  localeInfo,
+  options
+) {
+  switch (sourceType) {
+    case REACT_JS:
+      return transformJs(source, localeInfo, options);
+    case REACT_TS:
+      return transformTs(source, localeInfo, options);
+    case VUE:
+      return transformVue(source, localeInfo, options);
+    default:
+      throw new Error(`Unsupport sourceType: ${sourceType}`);
+  }
+};

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

@@ -0,0 +1,41 @@
+const presetTypescript = require('@babel/preset-typescript').default;
+const transformJs = require('./transformJs');
+
+module.exports = function transformTs(code, localeInfo = {}, options = {}) {
+  const { allTranslated = {}, allUpdated = {}, allUsedKeys = [] } = localeInfo;
+
+  const {
+    primaryRegx = /[\u4e00-\u9fa5]/,
+    i18nObject = 'intl',
+    i18nMethod = 't',
+    importCode = "import { intl } from 'di18n-react';",
+    babelPresets = [],
+    babelPlugins = [],
+    ignoreComponents = [],
+    ignoreMethods = [],
+    ignoreAttributes = ['style', 'className'],
+  } = options;
+
+  return transformJs(
+    code,
+    {
+      allTranslated,
+      allUpdated,
+      allUsedKeys,
+    },
+    {
+      primaryRegx,
+      i18nObject,
+      i18nMethod,
+      importCode,
+      babelPresets: [
+        ...babelPresets,
+        [presetTypescript, { isTSX: true, allExtensions: true }],
+      ],
+      babelPlugins,
+      ignoreComponents,
+      ignoreMethods,
+      ignoreAttributes,
+    }
+  );
+};

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

@@ -0,0 +1,126 @@
+const compiler = require('vue-template-compiler');
+const transformJs = require('./transformJs');
+const transformPug = require('./transformPug');
+const transformHtml = require('./transformHtml');
+
+function openTag(sfcBlock) {
+  const { type, lang, src, scoped, module, attrs } = sfcBlock;
+
+  let tag = `<${type}`;
+  if (lang) tag += ` lang="${lang}"`;
+  if (src) tag += ` src="${src}"`;
+  if (scoped) tag += ' scoped';
+  if (module) {
+    if (typeof module === 'string') tag += ` module="${module}"`;
+    else tag += ' module';
+  }
+  for (let k in attrs) {
+    if (!['type', 'lang', 'src', 'scoped', 'module'].includes(k)) {
+      tag += ` ${k}="${attrs[k]}"`;
+    }
+  }
+  tag += '>';
+
+  return tag;
+}
+
+function closeTag(sfcBlock) {
+  return '</' + sfcBlock.type + '>';
+}
+
+function combineVue(template, script, sytles, customBlocks) {
+  return [template, script, ...sytles, ...customBlocks]
+    .map((sfc) =>
+      sfc ? `${openTag(sfc)}\n${sfc.content.trim()}\n${closeTag(sfc)}\n` : ''
+    )
+    .join('\n');
+}
+
+module.exports = function transformVue(source, localeInfo = {}, options = {}) {
+  const { allTranslated = {}, allUpdated = {}, allUsedKeys = [] } = localeInfo;
+
+  const {
+    primaryRegx = /[\u4e00-\u9fa5]/,
+    i18nObject = 'intl',
+    i18nMethod = '$t',
+    importCode = "import { intl } from 'di18n-vue';",
+    babelPresets = [],
+    babelPlugins = [],
+    ignoreComponents = [],
+    ignoreMethods = [],
+    pkMap = {},
+  } = options;
+
+  const sfc = compiler.parseComponent(source, {
+    pad: 'space',
+    deindent: false,
+  });
+
+  const { template, script, styles, customBlocks } = sfc;
+  let hasTouch = false;
+
+  if (template) {
+    const templateType = (template.lang || 'html').toLowerCase();
+
+    // transform template
+    if (['html', 'pug'].includes(templateType)) {
+      const transform = templateType === 'html' ? transformHtml : transformPug;
+
+      const ret = transform(
+        template.content,
+        {
+          allTranslated,
+          allUpdated,
+          allUsedKeys,
+        },
+        {
+          primaryRegx,
+          i18nObject: '',
+          i18nMethod,
+          importCode: '',
+          babelPresets,
+          babelPlugins,
+          ignoreComponents,
+          ignoreMethods,
+          pkMap,
+        }
+      );
+
+      template.content = ret.source;
+      hasTouch = ret.hasTouch;
+    } else {
+      console.warn(
+        `Unsupport type: ${templateType}, so the template is ignored`
+      );
+    }
+  }
+
+  // transform script
+  if (script) {
+    const ret = transformJs(
+      script.content,
+      {
+        allTranslated,
+        allUpdated,
+        allUsedKeys,
+      },
+      {
+        primaryRegx,
+        i18nObject,
+        i18nMethod,
+        importCode,
+        babelPresets,
+        babelPlugins,
+        ignoreComponents,
+        ignoreMethods,
+      }
+    );
+
+    script.content = ret.source;
+    hasTouch = hasTouch || ret.hasTouch;
+  }
+
+  const code = combineVue(template, script, styles, customBlocks);
+
+  return { source: code, hasTouch };
+};