fix(build): 修复 ast 节点 component 信息收集问题 (#96)

* fix(build): 修复components检查时遇到的v-if/v-else 节点信息缺失问题

packages/mars-build/src/compiler/template/mark-component.js

@@ -31,57 +31,38 @@ function isInFor(el) {
     return isInFor(el.parent);
 }
 
-// 判断租先节点是否含有 template-mars target非当前环境，如果含有，则收集ast tag
-function checkExtraEnvComponent(ast, target) {
+// 判断租先节点是否含有 template-mars target当前环境，如果含有，则收集ast tag
+function checkCurrentEnvComponent(ast, target) {
     let parent = ast.parent;
     if (parent) {
         if (parent.tag === customTemplate && parent.attrsMap && parent.attrsMap.target !== target) {
-            return true;
+            return false;
         }
         else {
-            return checkExtraEnvComponent(parent, target);
+            return checkCurrentEnvComponent(parent, target);
         }
     }
-    return false;
+    return true;
 }
 
-// 找出在在当前环境中使用的组件
-function findUsefulComponent(ast, target, componentsInUsed) {
-    const tag = ast.tag;
-    const children = ast.children;
-    if (componentsInUsed[tag]) {
-        componentsInUsed[tag].using = true;
-    }
-    if (children) {
-        children.forEach(child => {
-            if (child.tag === customTemplate && child.attrsMap.target !== target) {
-                return;
-            }
-            else {
-                findUsefulComponent(child, target, componentsInUsed);
-            }
-        });
-    }
-}
-
-function updateComponents(ast, components, target, componentsInUsed) {
-    findUsefulComponent(ast, target, componentsInUsed);
+function updateComponents(components, componentsInUsed) {
     Object.keys(componentsInUsed).forEach(comp => {
         if (!componentsInUsed[comp].using) {
             delete components[comp];
         }
     });
 }
+
 function getMarkNode(options, componentsInUsed = {}) {
     let {components, target} = options;
     let compIdCounter = 0;
     return function markNode(el, options) {
         const tag = el.tag;
         const isComp = components && components[tag];
         el.isComp = isComp;
-        // 找出 template-mars 其他target下的组件，进行标记
-        if (checkExtraEnvComponent(el, target || process.env.MARS_ENV_TARGET) && components[tag]) {
-            componentsInUsed[tag].using = false;
+
+        if (isComp && checkCurrentEnvComponent(el, target || process.env.MARS_ENV_TARGET)) {
+            componentsInUsed[tag].using = true;
         }
 
         if (el.attrsMap['v-for'] && !el.iterator1) {
@@ -213,8 +194,7 @@ function getPostTrans(options) {
 
 module.exports = function mark(source, options) {
     const {
-        components,
-        target
+        components
     } = options;
 
     let componentsInUsed = {};
@@ -242,7 +222,8 @@ module.exports = function mark(source, options) {
             }
         ]
     });
-    updateComponents(ast, components, target, componentsInUsed);
+
+    updateComponents(components, componentsInUsed);
     let code = `({ render: function() { ${render} }, staticRenderFns: [\
 ${staticRenderFns.map(fn => `function() { ${fn} },)}`)}\
 ] })`;

packages/mars-build/src/gulp-mars-h5.js

@@ -51,24 +51,6 @@ Vinyl.prototype.writeFileSync = function () {
     fs.writeFileSync(this.path, this.contents.toString());
 };
 
-// 找出在在当前环境中使用的组件
-function findUsefulComponent(ast, componentsInUsed) {
-    const tag = ast.tag;
-    const children = ast.children;
-    if (componentsInUsed[tag]) {
-        componentsInUsed[tag].using = true;
-    }
-    if (children) {
-        children.forEach(child => {
-            if (child.tag === customTemplate && child.attrsMap.target !== 'h5') {
-                return;
-            }
-            else {
-                findUsefulComponent(child, componentsInUsed);
-            }
-        });
-    }
-}
 
 async function compile(file, opt) {
     const rPath = path.relative(file.base, file.path);
@@ -121,26 +103,26 @@ async function compile(file, opt) {
             modules: [{
                 preTransformNode(el, options) {
                     let basicCompMap = {};
-                    delToVueTag(el, basicCompMap);
+                    delToVueTag(el, {
+                        basicCompMap,
+                        componentsInUsed
+                    });
                     if (!el.parent) {
                         el.attrsMap.style = `backgroundColor: ${config.backgroundColor || null};`;
                     }
-
                     componentSet = Object.assign(componentSet, basicCompMap);
                 }
             }]
         });
         templateCode = generate(templateRet.ast, {
             target: process.env.MARS_ENV_TARGET || 'h5'
         });
-        findUsefulComponent(templateRet.ast, componentsInUsed);
     }
 
     templateFile = new Vinyl({
         path: `${fPath}.vue`,
         contents: new Buffer(templateCode || '')
     });
-
     // 处理非H5的引用
     scriptRet.content = postCompileScript(scriptRet.content, {
         componentsInUsed

packages/mars-build/src/h5/transform/tag.js

@@ -49,11 +49,22 @@ function checkScopedTemplateIsH5(ast) {
     return true;
 }
 
-module.exports = function (ast, compMap) {
+module.exports = function (ast, options) {
+    const {
+        basicCompMap,
+        componentsInUsed
+    } = options;
     let tag = ast.tag;
+
+    const isH5Component = checkScopedTemplateIsH5(ast);
+    if (componentsInUsed[tag] && isH5Component) {
+        componentsInUsed[tag].using = true;
+    }
+
     if (!tag) {
         return ast;
     }
+
     if (
         tag === customTemplate
         && ast.attrsMap.target === (process.env.MARS_ENV_TARGET || 'h5')
@@ -78,11 +89,11 @@ module.exports = function (ast, compMap) {
     ast.tag = tagMap[tag] || tag;
     if (
         tagMap[tag]
-        && !compMap[tagMap[tag]]
+        && !basicCompMap[tagMap[tag]]
         && tagMap[tag] !== 'template'
-        && checkScopedTemplateIsH5(ast)
+        && isH5Component
     ) {
-        compMap[`${tagMap[tag]}`] = toCamel(tagMap[tag]);
+        basicCompMap[`${tagMap[tag]}`] = toCamel(tagMap[tag]);
     }
     return ast;
 };