@tarojs/taroize 3.6.18 → 3.6.19

package/lib/src/wxml.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseContent = exports.removEmptyTextAndComment = exports.parseWXML = exports.createWxmlVistor = exports.wxTemplateCommand = exports.WX_ELSE = exports.WX_KEY = exports.WX_FOR_INDEX = exports.WX_FOR_ITEM = exports.WX_FOR = exports.WX_ELSE_IF = exports.WX_IF = exports.NodeType = void 0;
+exports.parseStyle = exports.parseContent = exports.removEmptyTextAndComment = exports.parseWXML = exports.createWxmlVistor = exports.getWxsImports = exports.createPreWxmlVistor = exports.convertStyleUnit = exports.wxTemplateCommand = exports.WX_SHOW = exports.WX_ELSE = exports.WX_KEY = exports.WX_FOR_INDEX = exports.WX_FOR_ITEM = exports.WX_FOR = exports.WX_ELSE_IF = exports.WX_IF = exports.NodeType = void 0;
 /* eslint-disable camelcase */
-const babel_traverse_1 = require("babel-traverse");
-const t = require("babel-types");
-const babylon_1 = require("babylon");
+const parser_1 = require("@babel/parser");
+const traverse_1 = require("@babel/traverse");
+const t = require("@babel/types");
+const helper_1 = require("@tarojs/helper");
+const shared_1 = require("@tarojs/shared");
 const himalaya_wxml_1 = require("himalaya-wxml");
 const lodash_1 = require("lodash");
 const cache_1 = require("./cache");
@@ -14,6 +16,7 @@ const global_1 = require("./global");
 const template_1 = require("./template");
 const utils_1 = require("./utils");
 const { prettyPrint } = require('html');
+const pathTool = require('path');
 const allCamelCase = (str) => str.charAt(0).toUpperCase() + (0, lodash_1.camelCase)(str.substr(1));
 function buildSlotName(slotName) {
     return `render${slotName[0].toUpperCase() + slotName.replace('-', '').slice(1)}`;
@@ -31,37 +34,183 @@ exports.WX_FOR_ITEM = 'wx:for-item';
 exports.WX_FOR_INDEX = 'wx:for-index';
 exports.WX_KEY = 'wx:key';
 exports.WX_ELSE = 'wx:else';
-exports.wxTemplateCommand = [
-    exports.WX_IF,
-    exports.WX_ELSE_IF,
-    exports.WX_FOR,
-    exports.WX_FOR_ITEM,
-    exports.WX_FOR_INDEX,
-    exports.WX_KEY,
-    'wx:else'
-];
+exports.WX_SHOW = 'wx:show';
+exports.wxTemplateCommand = [exports.WX_IF, exports.WX_ELSE_IF, exports.WX_FOR, exports.WX_FOR_ITEM, exports.WX_FOR_INDEX, exports.WX_KEY, 'wx:else'];
 function buildElement(name, children = [], attributes = []) {
     return {
         tagName: name,
         type: NodeType.Element,
         attributes,
-        children
+        children,
     };
 }
-const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) => {
+// 将 style 属性中属性名转小驼峰格式 并且将 {{}} 转为 ${}格式生成对应ast节点
+function convertStyleAttrs(styleAttrsMap) {
+    styleAttrsMap.forEach((attr) => {
+        attr.attrName = (0, shared_1.toCamelCase)(attr.attrName.trim());
+        // 匹配 {{}} 内部以及左右两边值
+        const attrValueReg = /([^{}]*)\{\{([^{}]*)\}\}([^{}]*)/;
+        const matchs = attrValueReg.exec(attr.value);
+        if (matchs !== null) {
+            const tempLeftValue = matchs[1] || '';
+            const tempMidValue = matchs[2] || '';
+            const tempRightValue = matchs[3] || '';
+            // 将模版中的内容转换为 ast 节点
+            const tempMidValueAst = (0, parser_1.parse)(tempMidValue).program.body[0];
+            attr.value = t.templateLiteral([t.templateElement({ raw: tempLeftValue }), t.templateElement({ raw: tempRightValue }, true)], [tempMidValueAst.expression]);
+        }
+        else {
+            attr.value = t.stringLiteral(attr.value.trim());
+        }
+    });
+}
+/**
+ * 对 style 中单个属性值进行解析
+ *
+ * @param { any[] } styleAttrsMap 元素为单个属性值的数组
+ * @param { any[] } attrKeyValueMap 属性解析为 {attrName: attrValue} 形式的数组
+ */
+function parseStyleAttrs(styleAttrsMap, attrKeyValueMap) {
+    styleAttrsMap.forEach((attr) => {
+        if (attr) {
+            // 对含三元运算符的写法 style="width:{{ xx ? xx : xx }}" 匹配第一个 : 避免匹配三元表达式中的 : 运算符
+            const reg = /([^:]+):\s*([^;]+)/;
+            const matchs = attr.match(reg);
+            const attrName = matchs[1];
+            const value = matchs[2];
+            if (attrName) {
+                attrKeyValueMap.push({ attrName, value });
+            }
+        }
+    });
+}
+function convertStyleUnit(value) {
+    let tempValue = value;
+    // 尺寸单位转换 都转为rem : 1rpx 转为 1/40rem,,1px 转为 1/20rem
+    if (tempValue.indexOf('px') !== -1) {
+        // 把 xxx="...[数字]rpx/px" 的尺寸单位都转为 rem, 转换方法类似postcss-taro-unit-transform
+        try {
+            tempValue = tempValue
+                .replace(/\s*-?([0-9.]+)(px)\b/gi, function (match, size, unit) {
+                if (Number(size) === 0) {
+                    return match.replace(size, '0').replace(unit, 'rem');
+                }
+                // 绝对值<1的非零值转十进制会被转为0, 这种情况直接把值认为是1
+                if (parseInt(size, 10) === 0) {
+                    return match.replace(size, '1').replace(unit, 'rem');
+                }
+                return match.replace(size, parseInt(size, 10) / 20 + '').replace(unit, 'rem');
+            })
+                .replace(/\s*-?([0-9.]+)(rpx)\b/gi, function (match, size, unit) {
+                if (Number(size) === 0) {
+                    return match.replace(size, '0').replace(unit, 'rem');
+                }
+                if (parseInt(size, 10) === 0) {
+                    return match.replace(size, '1').replace(unit, 'rem');
+                }
+                return match.replace(size, parseInt(size, 10) / 40 + '').replace(unit, 'rem');
+            });
+            // 把 xx="...{{参数}}rpx/px"的尺寸单位都转为rem,比如"{{参数}}rpx" -> "{{参数/40}}rem"
+            tempValue = tempValue
+                .replace(/\{\{([^{}]*)\}\}(px)/gi, function (match, size, unit) {
+                // 判断{{}}是否包含加减乘除算式和三元表达式, 是的话得加括号
+                if (match.match(/[+\-*/?]/g)) {
+                    return match.replace(size, '(' + size + ')/20').replace(unit, 'rem');
+                }
+                return match.replace(size, size + '/20').replace(unit, 'rem');
+            })
+                .replace(/\{\{([^{}]*)\}\}(rpx)/gi, function (match, size, unit) {
+                if (match.match(/[+\-*/?]/g)) {
+                    return match.replace(size, '(' + size + ')/40').replace(unit, 'rem');
+                }
+                return match.replace(size, size + '/40').replace(unit, 'rem');
+            });
+        }
+        catch (error) {
+            (0, helper_1.printLog)("error" /* processTypeEnum.ERROR */, `wxml内px/rpx单位转换失败: ${error}`);
+        }
+    }
+    return tempValue;
+}
+exports.convertStyleUnit = convertStyleUnit;
+/**
+ * 预解析，收集wxml所有的模板信息
+ *
+ * @param { any[] } templates wxml页面下的模板信息
+ * @returns Visitor
+ */
+const createPreWxmlVistor = (templates) => {
+    // const Applys = new Map<string, string[]>()
+    return {
+        JSXElement: {
+            enter(path) {
+                const openingElement = path.get('openingElement');
+                const jsxName = openingElement.get('name');
+                if (!jsxName.isJSXIdentifier()) {
+                    return;
+                }
+                const tagName = jsxName.node.name;
+                if (tagName !== 'Template') {
+                    return;
+                }
+                const templateInfo = (0, template_1.preParseTemplate)(path);
+                if (templateInfo) {
+                    templates.set(templateInfo.name, {
+                        funcs: templateInfo.funcs,
+                        applyTemplates: templateInfo.applys,
+                    });
+                }
+            }
+        }
+    };
+};
+exports.createPreWxmlVistor = createPreWxmlVistor;
+/**
+ * 根据template中使用的wxs组装需要导入的wxs语句
+ * 如： import xxx from '../xxx.wxs.js'
+ *
+ * @param templateFileName template模版文件名
+ * @param usedWxses template中使用的变量是wxs模块的集合
+ * @param dirPath 当前解析文件的路径
+ * @returns 需要导入的wxs语句集合
+ */
+function getWxsImports(templateFileName, usedWxses, dirPath) {
+    const templatePath = pathTool.join(global_1.globals.rootPath, 'imports', `${templateFileName}.js`);
+    const wxsImports = [];
+    for (const usedWxs of usedWxses) {
+        const wxsAbsPath = pathTool.resolve(dirPath, `${usedWxs.src}.js`);
+        const wxsRelPath = pathTool.relative(pathTool.dirname(templatePath), wxsAbsPath);
+        wxsImports.push((0, utils_1.buildImportStatement)((0, utils_1.normalizePath)(wxsRelPath), [], usedWxs.module));
+    }
+    return wxsImports;
+}
+exports.getWxsImports = getWxsImports;
+const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = [], templates) => {
     const jsxAttrVisitor = (path) => {
         const name = path.node.name;
-        const jsx = path.findParent(p => p.isJSXElement());
+        const jsx = path.findParent((p) => p.isJSXElement());
         // 把 hidden 转换为 wxif
         if (name.name === 'hidden') {
             const value = path.get('value');
-            if (t.isJSXExpressionContainer(value)) {
+            if (t.isJSXExpressionContainer(value) && !t.isJSXEmptyExpression(value.node.expression)) {
                 const exclamation = t.unaryExpression('!', value.node.expression);
                 path.set('value', t.jSXExpressionContainer(exclamation));
                 path.set('name', t.jSXIdentifier(exports.WX_IF));
             }
         }
+        // 当设置图片mode="",则改为默认值(且taro不支持mode空值)
+        if (name.name === 'mode' && path.node.value === null) {
+            path.set('value', t.stringLiteral('scaleToFill'));
+        }
+        // 当设置 style 属性但未赋值则删除该属性
+        if (name.name === 'style' && !path.node.value) {
+            path.remove();
+            return;
+        }
         const valueCopy = (0, lodash_1.cloneDeep)(path.get('value').node);
+        if (typeof valueCopy === 'undefined' || t.isJSXFragment(valueCopy)) {
+            return;
+        }
         transformIf(name.name, path, jsx, valueCopy);
         const loopItem = transformLoop(name.name, path, jsx, valueCopy);
         if (loopItem) {
@@ -76,10 +225,12 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
     const renameJSXKey = (path) => {
         const nodeName = path.node.name;
         if (path.parentPath.isJSXAttribute()) {
-            if (nodeName === exports.WX_KEY) {
-                path.replaceWith(t.jSXIdentifier('key'));
+            if (nodeName === exports.WX_SHOW) {
+                path.replaceWith(t.jSXIdentifier(exports.WX_IF)); // wx:show转换后不支持，不频繁切换的话wx:if可替代
+                // eslint-disable-next-line no-console
+                console.log(`属性  ${nodeName}不能编译,会被替换为wx:if`);
             }
-            if (nodeName.startsWith('wx:') && !exports.wxTemplateCommand.includes(nodeName)) {
+            else if (nodeName.startsWith('wx:') && !exports.wxTemplateCommand.includes(nodeName)) {
                 // eslint-disable-next-line no-console
                 console.log(`未知 wx 作用域属性： ${nodeName}，该属性会被移除掉。`);
                 path.parentPath.remove();
@@ -89,8 +240,23 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
     return {
         JSXAttribute: jsxAttrVisitor,
         JSXIdentifier: renameJSXKey,
+        Identifier: {
+            enter(path) {
+                if (!path.isReferencedIdentifier()) {
+                    return;
+                }
+                const jsxExprContainer = path.findParent((p) => p.isJSXExpressionContainer());
+                if (!jsxExprContainer || !jsxExprContainer.isJSXExpressionContainer()) {
+                    return;
+                }
+                if ((0, utils_1.isValidVarName)(path.node.name)) {
+                    refIds.add(path.node.name);
+                }
+            }
+        },
         JSXElement: {
             enter(path) {
+                var _a;
                 const openingElement = path.get('openingElement');
                 const jsxName = openingElement.get('name');
                 const attrs = openingElement.get('attributes');
@@ -98,31 +264,22 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
                     return;
                 }
                 path.traverse({
-                    Identifier(p) {
-                        if (!p.isReferencedIdentifier()) {
-                            return;
-                        }
-                        const jsxExprContainer = p.findParent(p => p.isJSXExpressionContainer());
-                        if (!jsxExprContainer || !jsxExprContainer.isJSXExpressionContainer()) {
-                            return;
-                        }
-                        if ((0, utils_1.isValidVarName)(p.node.name)) {
-                            refIds.add(p.node.name);
-                        }
-                    },
                     JSXAttribute: jsxAttrVisitor,
-                    JSXIdentifier: renameJSXKey
+                    JSXIdentifier: renameJSXKey,
                 });
-                const slotAttr = attrs.find(a => { var _a; return ((_a = a.node) === null || _a === void 0 ? void 0 : _a.name.name) === 'slot'; });
-                if (slotAttr) {
+                const slotAttr = attrs.find((a) => { var _a; return t.isJSXAttribute(a.node) && ((_a = a.node) === null || _a === void 0 ? void 0 : _a.name.name) === 'slot'; });
+                if (slotAttr && t.isJSXAttribute(slotAttr.node)) {
                     const slotValue = slotAttr.node.value;
+                    let slotName = '';
                     if (slotValue && t.isStringLiteral(slotValue)) {
-                        const slotName = slotValue.value;
-                        const parentComponent = path.findParent(p => p.isJSXElement() && t.isJSXIdentifier(p.node.openingElement.name) && !utils_1.DEFAULT_Component_SET.has(p.node.openingElement.name.name));
+                        slotName = slotValue.value;
+                        const parentComponent = path.findParent((p) => p.isJSXElement() &&
+                            t.isJSXIdentifier(p.node.openingElement.name) &&
+                            !utils_1.DEFAULT_Component_SET.has(p.node.openingElement.name.name));
                         if (parentComponent && parentComponent.isJSXElement()) {
                             slotAttr.remove();
                             path.traverse({
-                                JSXAttribute: jsxAttrVisitor
+                                JSXAttribute: jsxAttrVisitor,
                             });
                             const block = (0, utils_1.buildBlockElement)();
                             block.children = [(0, lodash_1.cloneDeep)(path.node)];
@@ -131,14 +288,15 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
                         }
                     }
                     else {
-                        throw (0, utils_1.codeFrameError)(slotValue, 'slot 的值必须是一个字符串');
+                        // 当元素设置slot标签且值为空串时，移除slot属性
+                        slotAttr.remove();
                     }
                 }
                 const tagName = jsxName.node.name;
                 if (tagName === 'Slot') {
-                    const nameAttr = attrs.find(a => a.node.name.name === 'name');
+                    const nameAttr = attrs.find((a) => t.isJSXAttribute(a.node) && a.node.name.name === 'name');
                     let slotName = '';
-                    if (nameAttr) {
+                    if (nameAttr && t.isJSXAttribute(nameAttr.node)) {
                         if (nameAttr.node.value && t.isStringLiteral(nameAttr.node.value)) {
                             slotName = nameAttr.node.value.value;
                         }
@@ -155,46 +313,115 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
                     }
                 }
                 if (tagName === 'Wxs') {
-                    wxses.push(getWXS(attrs.map(a => a.node), path, imports));
+                    wxses.push(getWXS(attrs.map((a) => a.node), path, imports));
                 }
                 if (tagName === 'Template') {
-                    // path.traverse({
-                    //   JSXAttribute: jsxAttrVisitor
-                    // })
-                    const template = (0, template_1.parseTemplate)(path, dirPath);
+                    const template = (0, template_1.parseTemplate)(path, dirPath, wxses);
                     if (template) {
-                        const { ast: classDecl, name } = template;
-                        const taroComponentsImport = (0, utils_1.buildImportStatement)('@tarojs/components', [
-                            ...global_1.usedComponents
-                        ]);
+                        let funcs = new Set();
+                        const { ast: classDecl, name, tmplName, usedWxses } = template;
+                        const wxsImports = getWxsImports(name, usedWxses, dirPath);
+                        const taroComponentsImport = (0, utils_1.buildImportStatement)('@tarojs/components', [...global_1.usedComponents]);
                         const taroImport = (0, utils_1.buildImportStatement)('@tarojs/taro', [], 'Taro');
                         const reactImport = (0, utils_1.buildImportStatement)('react', [], 'React');
-                        // const withWeappImport = buildImportStatement(
-                        //   '@tarojs/with-weapp',
-                        //   [],
-                        //   'withWeapp'
-                        // )
+                        // 引入 @tarojs/with-weapp
+                        const withWeappImport = (0, utils_1.buildImportStatement)('@tarojs/with-weapp', [], 'withWeapp');
                         const ast = t.file(t.program([]));
-                        ast.program.body.unshift(taroComponentsImport, reactImport, taroImport, 
-                        // withWeappImport,
-                        t.exportDefaultDeclaration(classDecl));
+                        ast.program.body.unshift(taroComponentsImport, reactImport, taroImport, withWeappImport, ...wxsImports, classDecl, t.exportDefaultDeclaration(t.identifier(name)));
                         const usedTemplate = new Set();
-                        (0, babel_traverse_1.default)(ast, {
+                        // funcs的值首先来源于预解析结果
+                        if (templates) {
+                            const applyFuncs = (_a = templates.get(name)) === null || _a === void 0 ? void 0 : _a.funcs;
+                            if (applyFuncs) {
+                                funcs = applyFuncs;
+                            }
+                        }
+                        (0, traverse_1.default)(ast, {
                             JSXIdentifier(path) {
                                 const node = path.node;
                                 if (node.name.endsWith('Tmpl') && node.name.length > 4 && path.parentPath.isJSXOpeningElement()) {
                                     usedTemplate.add(node.name);
+                                    // 传递的方法有两处来源
+                                    const templateImport = imports.find((tmplImport) => tmplImport.name === `${node.name}`);
+                                    const templateInfo = templates === null || templates === void 0 ? void 0 : templates.get(node.name);
+                                    let templateFuncs = templateImport === null || templateImport === void 0 ? void 0 : templateImport.funcs;
+                                    if (templateInfo === null || templateInfo === void 0 ? void 0 : templateInfo.funcs) {
+                                        if (templateFuncs) {
+                                            templateFuncs = new Set([...templateFuncs, ...templateInfo.funcs]);
+                                        }
+                                        else {
+                                            templateFuncs = templateInfo.funcs;
+                                        }
+                                    }
+                                    if (templateFuncs && templateFuncs.size > 0) {
+                                        const openingElement = path.parentPath.node;
+                                        const attributes = openingElement.attributes;
+                                        templateFuncs.forEach((templateFunc) => {
+                                            const value = t.jsxExpressionContainer(t.identifier(templateFunc));
+                                            const name = t.jsxIdentifier(templateFunc);
+                                            // 传递的方法插入到Tmpl标签属性中
+                                            attributes.push(t.jsxAttribute(name, value));
+                                            if (!funcs.has(templateFunc)) {
+                                                funcs.add(templateFunc);
+                                            }
+                                        });
+                                    }
                                 }
-                            }
+                            },
+                            JSXAttribute(path) {
+                                // 识别template使用到的处理事件的func
+                                const node = path.node;
+                                if (t.isJSXExpressionContainer(node.value) &&
+                                    t.isMemberExpression(node.value.expression) &&
+                                    t.isThisExpression(node.value.expression.object) &&
+                                    t.isIdentifier(node.value.expression.property)) {
+                                    const funcName = node.value.expression.property.name;
+                                    // func的调用形式 this.func --> func
+                                    path.replaceWith(t.jsxAttribute(node.name, t.jsxExpressionContainer(t.identifier(funcName))));
+                                }
+                            },
+                        });
+                        (0, traverse_1.default)(ast, {
+                            // 将使用到的处理事件的func写入到props
+                            BlockStatement(path) {
+                                if (funcs.size > 0) {
+                                    const body = path.node.body;
+                                    if (t.isVariableDeclaration(body[0])) {
+                                        // 如果已经定义了props
+                                        const declarator = body[0].declarations[0];
+                                        if (t.isObjectPattern(declarator.id)) {
+                                            const properties = declarator.id.properties;
+                                            funcs.forEach((func) => {
+                                                properties.push(t.objectProperty(t.identifier(func), t.identifier(func), false, true));
+                                            });
+                                        }
+                                    }
+                                    else {
+                                        // 没有定义，则插入 const {xxx} = this.props
+                                        const properties = [];
+                                        funcs.forEach((func) => {
+                                            properties.push(t.objectProperty(t.identifier(func), t.identifier(func), false, true));
+                                        });
+                                        const id = t.objectPattern(properties);
+                                        const init = t.memberExpression(t.thisExpression(), t.identifier('props'));
+                                        const declarator = t.variableDeclarator(id, init);
+                                        const declaration = t.variableDeclaration('const', [declarator]);
+                                        body.splice(0, 0, declaration);
+                                    }
+                                }
+                                path.stop();
+                            },
                         });
-                        usedTemplate.forEach(componentName => {
+                        usedTemplate.forEach((componentName) => {
                             if (componentName !== classDecl.id.name) {
                                 ast.program.body.unshift((0, utils_1.buildImportStatement)(`./${componentName}`, [], componentName));
                             }
                         });
                         imports.push({
                             ast,
-                            name
+                            name,
+                            funcs,
+                            tmplName,
                         });
                     }
                 }
@@ -217,7 +444,9 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
                 const children = path.node.children;
                 if (children.length === 1) {
                     const caller = children[0];
-                    if (t.isJSXExpressionContainer(caller) && t.isCallExpression(caller.expression) && !path.parentPath.isExpressionStatement()) {
+                    if (t.isJSXExpressionContainer(caller) &&
+                        t.isCallExpression(caller.expression) &&
+                        !path.parentPath.isExpressionStatement()) {
                         try {
                             path.replaceWith(caller);
                         }
@@ -226,11 +455,61 @@ const createWxmlVistor = (loopIds, refIds, dirPath, wxses = [], imports = []) =>
                         }
                     }
                 }
-            }
-        }
+            },
+        },
     };
 };
 exports.createWxmlVistor = createWxmlVistor;
+/**
+ * @description 根据模板信息中的直接调用，遍历获取完整的调用
+ * @param templates 模板信息
+ */
+function templateBfs(templates) {
+    var _a;
+    const names = [];
+    const applys = new Map();
+    for (const key of templates.keys()) {
+        names.push(key);
+        const templateInfo = templates.get(key);
+        if (templateInfo) {
+            applys.set(key, templateInfo.applyTemplates);
+        }
+    }
+    for (const name of names) {
+        const templateInfo = templates.get(name);
+        if (!templateInfo || templateInfo.applyTemplates.size === 0) {
+            continue;
+        }
+        const visited = new Set();
+        const queue = [name];
+        while (queue.length > 0) {
+            const template = queue.shift();
+            if (visited.has(template)) {
+                continue;
+            }
+            visited.add(template);
+            const templateApplys = applys.get(template);
+            if (!templateApplys || templateApplys.size === 0) {
+                continue;
+            }
+            templateApplys.forEach((item) => {
+                if (names.includes(item)) {
+                    queue.push(item);
+                }
+            });
+        }
+        visited.delete(name);
+        templateInfo.applyTemplates = visited;
+        for (const item of visited) {
+            const applyFuncs = (_a = templates.get(item)) === null || _a === void 0 ? void 0 : _a.funcs;
+            if (applyFuncs) {
+                const funcs = templateInfo.funcs;
+                templateInfo.funcs = new Set([...funcs, ...applyFuncs]);
+            }
+        }
+        templates.set(name, templateInfo);
+    }
+}
 function parseWXML(dirPath, wxml, parseImport) {
     let parseResult = (0, cache_1.getCacheWxml)(dirPath);
     if (parseResult) {
@@ -240,7 +519,7 @@ function parseWXML(dirPath, wxml, parseImport) {
         wxml = prettyPrint(wxml, {
             max_char: 0,
             indent_char: 0,
-            unformatted: ['text', 'wxs']
+            unformatted: ['text', 'wxs'],
         });
     }
     catch (error) {
@@ -255,21 +534,30 @@ function parseWXML(dirPath, wxml, parseImport) {
     const imports = [];
     const refIds = new Set();
     const loopIds = new Set();
+    // 模板信息
+    const templates = new Map();
     if (!wxml) {
         return {
             wxses,
             imports,
             refIds,
-            wxml: t.nullLiteral()
+            wxml: t.nullLiteral(),
         };
     }
     const nodes = removEmptyTextAndComment((0, himalaya_wxml_1.parse)(wxml.trim()));
-    const ast = t.file(t.program([
-        t.expressionStatement(parseNode(buildElement('block', nodes)))
-    ], []));
-    (0, babel_traverse_1.default)(ast, (0, exports.createWxmlVistor)(loopIds, refIds, dirPath, wxses, imports));
-    refIds.forEach(id => {
-        if (loopIds.has(id) || imports.filter(i => i.wxs).map(i => i.name).includes(id)) {
+    const ast = t.file(t.program([t.expressionStatement(parseNode(buildElement('block', nodes)))], []));
+    // 在解析wxml页面前，先进行预解析
+    // 当前预解析主要为了抽取页面下的模板信息
+    (0, traverse_1.default)(ast, (0, exports.createPreWxmlVistor)(templates));
+    // 获取template调用后，需要通过遍历，获取某个模板完整的调用关系
+    templateBfs(templates);
+    (0, traverse_1.default)(ast, (0, exports.createWxmlVistor)(loopIds, refIds, dirPath, wxses, imports, templates));
+    refIds.forEach((id) => {
+        if (loopIds.has(id) ||
+            imports
+                .filter((i) => i.wxs)
+                .map((i) => i.name)
+                .includes(id)) {
             refIds.delete(id);
         }
     });
@@ -277,7 +565,7 @@ function parseWXML(dirPath, wxml, parseImport) {
         wxses,
         imports,
         wxml: hydrate(ast),
-        refIds
+        refIds,
     };
     (0, cache_1.saveCacheWxml)(dirPath, parseResult);
     return parseResult;
@@ -297,8 +585,7 @@ function getWXS(attrs, path, imports) {
             if (t.isStringLiteral(attrValue)) {
                 value = attrValue.value;
             }
-            else if (t.isJSXExpressionContainer(attrValue) &&
-                t.isStringLiteral(attrValue.expression)) {
+            else if (t.isJSXExpressionContainer(attrValue) && t.isStringLiteral(attrValue.expression)) {
                 value = attrValue.expression.value;
             }
             if (attrName === 'module') {
@@ -310,23 +597,64 @@ function getWXS(attrs, path, imports) {
         }
     }
     if (!src) {
-        const { children: [script] } = path.node;
+        const { children: [script], } = path.node;
         if (!t.isJSXText(script)) {
             throw new Error('wxs 如果没有 src 属性，标签内部必须有 wxs 代码。');
         }
         src = './wxs__' + moduleName;
         const ast = (0, utils_1.parseCode)(script.value);
-        (0, babel_traverse_1.default)(ast, {
+        (0, traverse_1.default)(ast, {
             CallExpression(path) {
+                var _a, _b, _c;
+                // wxs标签中getRegExp转换为new RegExp
                 if (t.isIdentifier(path.node.callee, { name: 'getRegExp' })) {
-                    console.warn((0, utils_1.codeFrameError)(path.node, '请使用 JavaScript 标准正则表达式把这个 getRegExp 函数重构。'));
+                    // 根据正则表达式是否定义了正则匹配修饰符，有则不变，没有就用默认
+                    if (path.node.arguments.length > 1) {
+                        const regex = path.node.arguments[0];
+                        const modifier = path.node.arguments[1];
+                        if (t.isStringLiteral(regex) && t.isStringLiteral(modifier)) {
+                            const regexStr = (_a = regex.extra) === null || _a === void 0 ? void 0 : _a.raw;
+                            const regexModifier = (_b = modifier.extra) === null || _b === void 0 ? void 0 : _b.rawValue;
+                            const regexWithoutQuotes = regexStr.replace(/^['"](.*)['"]$/, '$1');
+                            const newExpr = t.newExpression(t.identifier('RegExp'), [
+                                t.stringLiteral(regexWithoutQuotes),
+                                t.stringLiteral(regexModifier),
+                            ]);
+                            path.replaceWith(newExpr);
+                        }
+                        else if (t.isIdentifier(regex) || t.isIdentifier(modifier)) {
+                            throw new Error('getRegExp 函数暂不支持传入变量类型的参数');
+                        }
+                        else {
+                            throw new Error('getRegExp 函数暂不支持传入非字符串类型的参数');
+                        }
+                    }
+                    else if (path.node.arguments.length === 1) {
+                        const regex = path.node.arguments[0];
+                        if (t.isStringLiteral(regex)) {
+                            const regexStr = (_c = regex.extra) === null || _c === void 0 ? void 0 : _c.raw;
+                            const regexWithoutQuotes = regexStr.replace(/^['"](.*)['"]$/, '$1');
+                            const newExpr = t.newExpression(t.identifier('RegExp'), [t.stringLiteral(regexWithoutQuotes)]);
+                            path.replaceWith(newExpr);
+                        }
+                        else if (t.isIdentifier(regex)) {
+                            throw new Error('getRegExp 函数暂不支持传入变量类型的参数');
+                        }
+                        else {
+                            throw new Error('getRegExp 函数暂不支持传入非字符串类型的参数');
+                        }
+                    }
+                    else {
+                        const newExpr = t.newExpression(t.identifier('RegExp'), []);
+                        path.replaceWith(newExpr);
+                    }
                 }
-            }
+            },
         });
         imports.push({
             ast,
             name: moduleName,
-            wxs: true
+            wxs: true,
         });
     }
     if (!moduleName || !src) {
@@ -335,7 +663,7 @@ function getWXS(attrs, path, imports) {
     path.remove();
     return {
         module: moduleName,
-        src
+        src,
     };
 }
 function hydrate(file) {
@@ -344,9 +672,7 @@ function hydrate(file) {
         const jsx = ast.expression;
         if (jsx.children.length === 1) {
             const children = jsx.children[0];
-            return t.isJSXExpressionContainer(children)
-                ? children.expression
-                : children;
+            return t.isJSXExpressionContainer(children) ? children.expression : children;
         }
         else {
             return jsx;
@@ -358,9 +684,9 @@ function transformLoop(name, attr, jsx, value) {
     if (!jsxElement.node) {
         return;
     }
-    const attrs = jsxElement.get('attributes').map(a => a.node);
-    const wxForItem = attrs.find(a => a.name.name === exports.WX_FOR_ITEM);
-    const hasSinglewxForItem = wxForItem && wxForItem.value && t.isJSXExpressionContainer(wxForItem.value);
+    const attrs = jsxElement.get('attributes').map((a) => a.node);
+    const wxForItem = attrs.find((a) => t.isJSXAttribute(a) && a.name.name === exports.WX_FOR_ITEM);
+    const hasSinglewxForItem = wxForItem && t.isJSXAttribute(wxForItem) && wxForItem.value && t.isJSXExpressionContainer(wxForItem.value);
     if (hasSinglewxForItem || name === exports.WX_FOR || name === 'wx:for-items') {
         if (!value || !t.isJSXExpressionContainer(value)) {
             throw new Error('wx:for 的值必须使用 "{{}}"  包裹');
@@ -371,7 +697,7 @@ function transformLoop(name, attr, jsx, value) {
         jsx
             .get('openingElement')
             .get('attributes')
-            .forEach(p => {
+            .forEach((p) => {
             const node = p.node;
             if (node.name.name === exports.WX_FOR_ITEM) {
                 if (!node.value || !t.isStringLiteral(node.value)) {
@@ -391,19 +717,49 @@ function transformLoop(name, attr, jsx, value) {
         jsx
             .get('openingElement')
             .get('attributes')
-            .forEach(p => {
+            .forEach((p) => {
             const node = p.node;
-            if (node.name.name === exports.WX_KEY && t.isStringLiteral(node.value)) {
-                if (node.value.value === '*this') {
-                    node.value = t.jSXExpressionContainer(t.identifier(item.value));
+            if (node.name.name === exports.WX_KEY) {
+                node.name = t.jSXIdentifier('key');
+                if (t.isStringLiteral(node.value)) {
+                    if (node.value.value === '*this') {
+                        node.value = t.jSXExpressionContainer(t.identifier(item.value));
+                    }
+                    else if (node.value.value === 'index') {
+                        // index表示item在数组里的下标, 并不是item的某个property, 单独抽出来处理
+                        node.value = t.jSXExpressionContainer(t.identifier(node.value.value));
+                    }
+                    else {
+                        node.value = t.jSXExpressionContainer(t.memberExpression(t.identifier(item.value), t.identifier(node.value.value)));
+                    }
                 }
-                else {
-                    node.value = t.jSXExpressionContainer(t.memberExpression(t.identifier(item.value), t.identifier(node.value.value)));
+            }
+        });
+        jsx
+            .get('openingElement')
+            .get('attributes')
+            .forEach((p) => {
+            const node = p.node;
+            if (node.name.name === exports.WX_IF) {
+                // 如果同时使用了 wx:if，分离
+                const ifBlock = (0, utils_1.buildBlockElement)();
+                ifBlock.children = [(0, lodash_1.cloneDeep)(jsx.node)];
+                try {
+                    jsx.replaceWith(ifBlock);
+                }
+                catch (error) {
+                    // jsx外层是wx:if的转换，替换（replaceWith）时会抛出异常
+                    // catch异常后，正常替换
                 }
+                p.remove();
             }
         });
+        if (t.isJSXEmptyExpression(value.expression)) {
+            (0, helper_1.printLog)("warning" /* processTypeEnum.WARNING */, 'value.expression', 'wxml.ts -> t.isJSXEmptyExpression(value.expression)');
+            return;
+        }
         const replacement = t.jSXExpressionContainer(t.callExpression(t.memberExpression(value.expression, t.identifier('map')), [
-            t.arrowFunctionExpression([t.identifier(item.value), t.identifier(index.value)], t.blockStatement([t.returnStatement(jsx.node)]))
+            t.arrowFunctionExpression([t.identifier(item.value), t.identifier(index.value)], t.blockStatement([t.returnStatement(jsx.node)])),
         ]));
         const block = (0, utils_1.buildBlockElement)();
         block.children = [replacement];
@@ -415,7 +771,7 @@ function transformLoop(name, attr, jsx, value) {
         }
         return {
             item: item.value,
-            index: index.value
+            index: index.value,
         };
     }
 }
@@ -423,13 +779,19 @@ function transformIf(name, attr, jsx, value) {
     if (name !== exports.WX_IF) {
         return;
     }
-    if (jsx.node.openingElement.attributes.some(a => a.name.name === 'slot')) {
+    if (jsx.node.openingElement.attributes.some((a) => t.isJSXAttribute(a) && a.name.name === 'slot')) {
+        return;
+    }
+    // 考虑到wx:if和wx:for的优先级，如果同时使用，先解析wx:for
+    if (jsx.node.openingElement.attributes.some((a) => t.isJSXAttribute(a) && (a.name.name === 'wx:for' || a.name.name === 'wx:for-items'))) {
         return;
     }
     const conditions = [];
     let siblings = [];
     try {
-        siblings = jsx.getAllNextSiblings().filter(s => !(s.isJSXExpressionContainer() && s.get('expression').isJSXEmptyExpression()));
+        siblings = jsx
+            .getAllNextSiblings()
+            .filter((s) => !(s.isJSXExpressionContainer() && t.isJSXEmptyExpression(s.get('expression'))));
     }
     catch (error) {
         return;
@@ -443,7 +805,7 @@ function transformIf(name, attr, jsx, value) {
     conditions.push({
         condition: exports.WX_IF,
         path: jsx,
-        tester: value
+        tester: value,
     });
     attr.remove();
     for (let index = 0; index < siblings.length; index++) {
@@ -457,7 +819,7 @@ function transformIf(name, attr, jsx, value) {
         conditions.push({
             condition: currMatches.reg.input,
             path: sibling,
-            tester: currMatches.tester
+            tester: currMatches.tester,
         });
         if (nextMatches === null) {
             break;
@@ -468,11 +830,13 @@ function transformIf(name, attr, jsx, value) {
 function handleConditions(conditions) {
     if (conditions.length === 1) {
         const ct = conditions[0];
-        try {
-            ct.path.replaceWith(t.jSXExpressionContainer(t.logicalExpression('&&', ct.tester.expression, (0, lodash_1.cloneDeep)(ct.path.node))));
-        }
-        catch (error) {
-            //
+        if (!t.isJSXEmptyExpression(ct.tester.expression)) {
+            try {
+                ct.path.replaceWith(t.jSXExpressionContainer(t.logicalExpression('&&', ct.tester.expression, (0, lodash_1.cloneDeep)(ct.path.node))));
+            }
+            catch (error) {
+                //
+            }
         }
     }
     if (conditions.length > 1) {
@@ -480,16 +844,20 @@ function handleConditions(conditions) {
         const lastCon = conditions[lastLength];
         let lastAlternate = (0, lodash_1.cloneDeep)(lastCon.path.node);
         try {
-            if (lastCon.condition === exports.WX_ELSE_IF) {
+            if (lastCon.condition === exports.WX_ELSE_IF && !t.isJSXEmptyExpression(lastCon.tester.expression)) {
                 lastAlternate = t.logicalExpression('&&', lastCon.tester.expression, lastAlternate);
             }
-            const node = conditions
-                .slice(0, lastLength)
-                .reduceRight((acc, condition) => {
+            const node = conditions.slice(0, lastLength).reduceRight((acc, condition) => {
+                if (t.isJSXEmptyExpression(condition.tester.expression)) {
+                    (0, helper_1.printLog)("warning" /* processTypeEnum.WARNING */, 'condition.tester.expression', 't.isJSXEmptyExpression(condition.tester.expression)');
+                    return null;
+                }
                 return t.conditionalExpression(condition.tester.expression, (0, lodash_1.cloneDeep)(condition.path.node), acc);
             }, lastAlternate);
-            conditions[0].path.replaceWith(t.jSXExpressionContainer(node));
-            conditions.slice(1).forEach(c => c.path.remove());
+            if (node != null) {
+                conditions[0].path.replaceWith(t.jSXExpressionContainer(node));
+                conditions.slice(1).forEach((c) => c.path.remove());
+            }
         }
         catch (error) {
             console.error('wx:elif 的值需要用双括号 `{{}}` 包裹它的值');
@@ -503,9 +871,9 @@ function findWXIfProps(jsx) {
         jsx
             .get('openingElement')
             .get('attributes')
-            .some(path => {
+            .some((path) => {
             const attr = path.node;
-            if (t.isJSXIdentifier(attr.name)) {
+            if (t.isJSXIdentifier(attr.name) && attr != null) {
                 const name = attr.name.name;
                 if (name === exports.WX_IF) {
                     return true;
@@ -515,7 +883,7 @@ function findWXIfProps(jsx) {
                     path.remove();
                     matches = {
                         reg: match,
-                        tester: attr.value
+                        tester: attr.value,
                     };
                     return true;
                 }
@@ -530,10 +898,12 @@ function parseNode(node, tagName) {
     }
     else if (node.type === NodeType.Comment) {
         const emptyStatement = t.jSXEmptyExpression();
-        emptyStatement.innerComments = [{
+        emptyStatement.innerComments = [
+            {
                 type: 'CommentBlock',
-                value: ' ' + node.content + ' '
-            }];
+                value: ' ' + node.content + ' ',
+            },
+        ];
         return t.jSXExpressionContainer(emptyStatement);
     }
     return parseElement(node);
@@ -546,7 +916,7 @@ function parseElement(element) {
     let attributes = element.attributes;
     if (tagName.name === 'Template') {
         let isSpread = false;
-        attributes = attributes.map(attr => {
+        attributes = attributes.map((attr) => {
             if (attr.key === 'data') {
                 const value = attr.value || '';
                 const content = parseContent(value);
@@ -562,7 +932,7 @@ function parseElement(element) {
                             // (...a) => {{a}}
                             attr.value = `{{${str.slice(4, strLastIndex)}}}`;
                         }
-                        else if (/^\(([A-Za-z]+)\)$/.test(str)) {
+                        else if (/^\(([A-Za-z,]+)\)$/.test(str)) {
                             // (a) => {{a:a}}
                             attr.value = `{{${str.replace(/^\(([A-Za-z]+)\)$/, '$1:$1')}}}`;
                         }
@@ -581,18 +951,20 @@ function parseElement(element) {
         if (isSpread) {
             attributes.push({
                 key: 'spread',
-                value: null
+                value: null,
             });
         }
     }
     return t.jSXElement(t.jSXOpeningElement(tagName, attributes.map(parseAttribute)), t.jSXClosingElement(tagName), removEmptyTextAndComment(element.children).map((el) => parseNode(el, element.tagName)), false);
 }
 function removEmptyTextAndComment(nodes) {
-    return nodes.filter(node => {
-        return node.type === NodeType.Element ||
+    return nodes
+        .filter((node) => {
+        return (node.type === NodeType.Element ||
             (node.type === NodeType.Text && node.content.trim().length !== 0) ||
-            node.type === NodeType.Comment;
-    }).filter((node, index) => !(index === 0 && node.type === NodeType.Comment));
+            node.type === NodeType.Comment);
+    })
+        .filter((node, index) => !(index === 0 && node.type === NodeType.Comment));
 }
 exports.removEmptyTextAndComment = removEmptyTextAndComment;
 function parseText(node, tagName) {
@@ -606,6 +978,7 @@ function parseText(node, tagName) {
     }
     return t.jSXExpressionContainer((0, utils_1.buildTemplate)(content));
 }
+// 匹配{{content}}
 const handlebarsRE = /\{\{((?:.|\n)+?)\}\}/g;
 function singleQuote(s) {
     return `'${s}'`;
@@ -615,7 +988,7 @@ function parseContent(content, single = false) {
     if (!handlebarsRE.test(content)) {
         return {
             type: 'raw',
-            content
+            content,
         };
     }
     const tokens = [];
@@ -641,22 +1014,81 @@ function parseContent(content, single = false) {
     }
     return {
         type: 'expression',
-        content: tokens.join('+')
+        content: tokens.join('+'),
     };
 }
 exports.parseContent = parseContent;
+/**
+ * 判断 style 中的属性是否都是 attrName: attrValue 格式
+ *
+ * @param styleAttrsMap
+ */
+function isAllKeyValueFormat(styleAttrsMap) {
+    // 匹配 attrName: attrValue 格式
+    const isKeyValueFormat = /^(([A-Za-z-]+)\s*):(\s*).*/;
+    const filterStyleAttrs = styleAttrsMap.filter((attr) => attr.trim() !== '');
+    const isStringAttr = filterStyleAttrs.every((attr) => isKeyValueFormat.test(attr.trim()));
+    return isStringAttr;
+}
+/**
+ * 解析内联style属性
+ *
+ * @param key 内联属性的类型
+ * @param value 内联属性的值
+ * @returns
+ */
+function parseStyle(key, value) {
+    const styleAttrs = value.trim().split(';');
+    // 针对attrName: attrValue 格式做转换处理, 其他类型采用'+'连接符
+    if (isAllKeyValueFormat(styleAttrs)) {
+        const attrKeyValueMap = [];
+        parseStyleAttrs(styleAttrs, attrKeyValueMap);
+        convertStyleAttrs(attrKeyValueMap);
+        const objectLiteral = t.objectExpression(attrKeyValueMap.map((attr) => t.objectProperty(t.identifier(attr.attrName), attr.value)));
+        return t.jSXAttribute(t.jSXIdentifier(key), t.jsxExpressionContainer(objectLiteral));
+    }
+    else {
+        return parseContent(value);
+    }
+}
+exports.parseStyle = parseStyle;
 function parseAttribute(attr) {
     let { key, value } = attr;
     let jsxValue = null;
+    let type = '';
+    let content = '';
     if (value) {
         if (key === 'class' && value.startsWith('[') && value.endsWith(']')) {
             value = value.slice(1, value.length - 1).replace(',', '');
             // eslint-disable-next-line no-console
             console.log((0, utils_1.codeFrameError)(attr, 'Taro/React 不支持 class 传入数组，此写法可能无法得到正确的 class'));
         }
-        const { type, content } = parseContent(value);
+        value = convertStyleUnit(value);
+        // 判断属性是否为style属性
+        if (key === 'style' && value) {
+            try {
+                const styleParseReslut = parseStyle(key, value);
+                if (t.isJSXAttribute(styleParseReslut)) {
+                    return styleParseReslut;
+                }
+                else {
+                    content = styleParseReslut.content;
+                    type = styleParseReslut.type;
+                }
+            }
+            catch (error) {
+                const errorMsg = `当前属性: style="${value}" 解析失败，失败原因：${error}`;
+                (0, helper_1.printLog)("error" /* processTypeEnum.ERROR */, errorMsg);
+                throw new Error(errorMsg);
+            }
+        }
+        else {
+            const parseContentResult = parseContent(value);
+            content = parseContentResult.content;
+            type = parseContentResult.type;
+        }
         if (type === 'raw') {
-            jsxValue = t.stringLiteral(content.replace(/"/g, '\''));
+            jsxValue = t.stringLiteral(content.replace(/"/g, "'"));
         }
         else {
             let expr;
@@ -674,8 +1106,10 @@ function parseAttribute(attr) {
                         throw new Error(err);
                     }
                 }
-                else if (content.includes(':') || (content.includes('...') && content.includes(','))) {
-                    const file = (0, babylon_1.parse)(`var a = ${attr.value.slice(1, attr.value.length - 1)}`, { plugins: ['objectRestSpread'] });
+                else if (content.includes(':') || content.includes('...')) {
+                    const file = (0, parser_1.parse)(`var a = ${attr.value.slice(1, attr.value.length - 1)}`, {
+                        plugins: ['objectRestSpread'],
+                    });
                     expr = file.program.body[0].declarations[0].init;
                 }
                 else {
@@ -690,8 +1124,8 @@ function parseAttribute(attr) {
             jsxValue = t.jSXExpressionContainer(expr);
         }
     }
-    const jsxKey = handleAttrKey(key);
-    if (/^on[A-Z]/.test(jsxKey) && !(/^catch/.test(key)) && jsxValue && t.isStringLiteral(jsxValue)) {
+    let jsxKey = handleAttrKey(key);
+    if (/^on[A-Z]/.test(jsxKey) && !/^catch/.test(key) && jsxValue && t.isStringLiteral(jsxValue)) {
         jsxValue = t.jSXExpressionContainer(t.memberExpression(t.thisExpression(), t.identifier(jsxValue.value)));
     }
     if (key.startsWith('catch') && value) {
@@ -700,15 +1134,20 @@ function parseAttribute(attr) {
             global_1.globals.hasCatchTrue = true;
         }
         else if (t.isStringLiteral(jsxValue)) {
-            jsxValue = t.jSXExpressionContainer(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('privateStopNoop')), t.identifier('bind')), [t.thisExpression(), t.memberExpression(t.thisExpression(), t.identifier(jsxValue.value))]));
+            jsxValue = t.jSXExpressionContainer(t.memberExpression(t.thisExpression(), t.identifier(jsxValue.value)));
+        }
+    }
+    // 如果data-xxx自定义属性名xxx不是以-分隔的写法就要转成全小写属性名
+    if (value && jsxKey.startsWith('data-')) {
+        const realKey = jsxKey.replace(/^data-/, '');
+        if (realKey.indexOf('-') === -1) {
+            jsxKey = `data-${realKey.toLowerCase()}`;
         }
     }
     return t.jSXAttribute(t.jSXIdentifier(jsxKey), jsxValue);
 }
 function handleAttrKey(key) {
-    if (key.startsWith('wx:') ||
-        key.startsWith('wx-') ||
-        key.startsWith('data-')) {
+    if (key.startsWith('wx:') || key.startsWith('wx-') || key.startsWith('data-')) {
         return key;
     }
     else if (key === 'class') {