fix(mp): 优化插槽节点深度，保留 if 属性

packages/uni-template-compiler/__tests__/compiler-mp-alipay.spec.js

@@ -116,7 +116,7 @@ describe('mp:compiler-mp-alipay', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="{item}">{{getValue(item)}}<template></my-component>',
-      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" onVueInit="__l"><block><block a:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" onVueInit="__l"><block a:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default","item")):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'auto'
@@ -124,7 +124,7 @@ describe('mp:compiler-mp-alipay', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="item">{{getValue(item.text)}}<template></my-component>',
-      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" onVueInit="__l"><block><block a:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" onVueInit="__l"><block a:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default").text):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'auto'

packages/uni-template-compiler/__tests__/compiler-mp-baidu.spec.js

@@ -87,14 +87,14 @@ describe('mp:compiler-mp-baidu', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="{item}">{{getValue(item)}}<template></my-component>',
-      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><block><block s-if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><block s-if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default","item")):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}', {
         scopedSlotsCompiler: 'auto'
       }
     )
     assertCodegen(
       '<my-component><template v-slot="item">{{getValue(item.text)}}<template></my-component>',
-      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><block><block s-if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><block s-if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default").text):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}', {
         scopedSlotsCompiler: 'auto'
       }

packages/uni-template-compiler/__tests__/compiler-mp-weixin.spec.js

@@ -144,7 +144,7 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="{item}">{{getValue(item)}}<template></my-component>',
-      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default","item")):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'auto'
@@ -152,7 +152,7 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="item">{{getValue(item.text)}}<template></my-component>',
-      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default").text):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'auto'
@@ -219,7 +219,7 @@ describe('mp:compiler-mp-weixin', () => {
   it('generate scoped slot with scopedSlotsCompiler: augmented', () => {
     assertCodegen(
       '<my-component><template v-slot="{item}">{{getValue(item)}}<template></my-component>',
-      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default","item")):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'augmented'
@@ -227,7 +227,7 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="{item}">{{item}}<template></my-component>',
-      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?$getScopedSlotsParams("551070e6-1","default","item"):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'augmented'
@@ -235,7 +235,7 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen(
       '<my-component><template v-slot="item">{{getValue(item.text)}}<template></my-component>',
-      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
+      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}</block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default").text):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'augmented'
@@ -243,7 +243,7 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen(
       '<my-component1><my-component2><template v-slot="{item}">{{getValue(item)}}<template></my-component2></my-component1>',
-      '<my-component1 vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><my-component2 vue-id="{{(\'551070e6-2\')+\',\'+(\'551070e6-1\')}}" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component2></my-component1>',
+      '<my-component1 vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><my-component2 vue-id="{{(\'551070e6-2\')+\',\'+(\'551070e6-1\')}}" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}</block></my-component2></my-component1>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-2");var m1=m0?getValue($getScopedSlotsParams("551070e6-2","default","item")):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
       {
         scopedSlotsCompiler: 'augmented'
@@ -274,8 +274,8 @@ describe('mp:compiler-mp-weixin', () => {
       }
     )
     assertCodegen(
-      '<my-component><template v-slot="{item}">{{item}}<my-component><template v-slot="{item}">{{item}}<template></my-component><template></my-component>',
-      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m0}}">{{$root.m1}}<my-component vue-id="{{(\'551070e6-2\')+\',\'+(\'551070e6-1\')}}" bind:__l="__l" vue-slots="{{[\'default\']}}"><block><block wx:if="{{$root.m2}}">{{$root.m3}}</block></block></my-component></block></block></my-component>',
+      '<my-component><template v-slot="{item}">{{item}}<my-component><template v-slot="{item}">{{item}}</template></my-component></template></my-component>',
+      '<my-component vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m0}}">{{$root.m1}}<my-component vue-id="{{(\'551070e6-2\')+\',\'+(\'551070e6-1\')}}" bind:__l="__l" vue-slots="{{[\'default\']}}"><block wx:if="{{$root.m2}}">{{$root.m3}}</block></my-component></block></my-component>',
       'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?$getScopedSlotsParams("551070e6-1","default","item"):null;var m2=$hasScopedSlotsParams("551070e6-2");var m3=m2?$getScopedSlotsParams("551070e6-2","default","item"):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1,m2:m2,m3:m3}})}',
       {
         scopedSlotsCompiler: 'augmented'

packages/uni-template-compiler/lib/template/traverse.js

@@ -340,19 +340,34 @@ function traverseRenderSlot (callExprNode, state) {
 
 function traverseResolveScopedSlots (callExprNode, state) {
   const options = state.options
-  function single (children, slotName, ignore) {
-    if (Array.isArray(children) && children.length === 1) {
-      const child = children[0]
-      if (!child.type) {
-        return
-      }
-      if (ignore.includes(child.type)) {
-        return single(child.children, slotName, ignore)
+  const vIfAttrName = options.platform.directive + 'if'
+  function single (node, slotName, ignore) {
+    let last = node
+    const vIfs = []
+    function find (children) {
+      if (Array.isArray(children) && children.length === 1) {
+        const child = children[0]
+        if (!child.type) {
+          return
+        }
+        last = child
+        if (child.attr && child.attr[vIfAttrName]) {
+          vIfs.push(child.attr[vIfAttrName])
+          delete child.attr[vIfAttrName]
+        }
+        if (ignore.includes(child.type) && !(child.attr && Object.keys(child.attr).length)) {
+          find(child.children, ignore)
+        }
       }
-      child.attr = child.attr || {}
-      child.attr.slot = slotName
-      return true
     }
+    find(node.children)
+    last.attr = last.attr || {}
+    last.attr.slot = slotName
+    if (vIfs.length) {
+      // 简易合并
+      last.attr[vIfAttrName] = vIfs.length > 1 ? `{{${vIfs.map(str => str.replace(/^\{\{(.+)\}\}$/, '($1)')).join('&&')}}}` : vIfs[0]
+    }
+    return last
   }
   return callExprNode.arguments[0].elements.map(slotNode => {
     let keyProperty = false
@@ -403,18 +418,11 @@ function traverseResolveScopedSlots (callExprNode, state) {
     if (options.scopedSlotsCompiler === 'auto' && slotNode.scopedSlotsCompiler === 'augmented') {
       parentNode.attr['scoped-slots-compiler'] = 'augmented'
     }
-    const children = normalizeChildren(traverseExpr(returnExprNodes, state))
     // 除百度、字节外其他小程序仅默认插槽可以支持多个节点
-    if (single(children, slotName, ['template', 'block'])) {
-      return children[0]
-    }
-    return {
+    return single({
       type: 'block',
-      attr: {
-        slot: slotName
-      },
-      children
-    }
+      children: normalizeChildren(traverseExpr(returnExprNodes, state))
+    }, slotName, ['template', 'block'])
   })
 }