fix: 解决小程序上具名插槽default和默认插槽不等同的问题

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -226,12 +226,12 @@ describe('mp:compiler-extra', () => {
 
     assertCodegen(
       '<component1 v-slot>text</component1>',
-      '<component1 vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><view slot="default">text</view></component1>'
+      '<component1 vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><view>text</view></component1>'
     )
 
     assertCodegen(
       '<component1 v-slot:default>text<text>123213</text></component1>',
-      '<component1 vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><view slot="default">text<text>123213</text></view></component1>'
+      '<component1 vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}"><view>text<text>123213</text></view></component1>'
     )
     assertCodegen(
       '<component1><template v-slot:left><text></text></template><template v-slot:right><text></text></template></component1>',
@@ -676,4 +676,4 @@ describe('mp:compiler-extra', () => {
       '<video controls></video>'
     )
   })
-})
+})

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

@@ -64,11 +64,11 @@ describe('mp:compiler-mp-alipay', () => {
   it('generate scoped slot', () => {
     assertCodegen(
       '<component1 :text="\'text\'"><template v-slot="props"><view :class="{text:props.text}">{{props.text}}</view></template></component1>',
-      '<component1 vue-id="551070e6-1" text="text" onVueInit="__l"><view slot="default" slot-scope="props"><view class="{{((props.text)?\'text\':\'\')}}">{{props.text}}</view></view></component1>'
+      '<component1 vue-id="551070e6-1" text="text" onVueInit="__l"><view slot-scope="props"><view class="{{((props.text)?\'text\':\'\')}}">{{props.text}}</view></view></component1>'
     )
     assertCodegen(
       '<component1 :text="\'text\'"><template v-slot="{text}"><view :class="{text:text}">{{text}}</view></template></component1>',
-      '<component1 vue-id="551070e6-1" text="text" onVueInit="__l"><view slot="default" slot-scope="__SCOPED__"><view class="{{((__SCOPED__.text)?\'text\':\'\')}}">{{__SCOPED__.text}}</view></view></component1>'
+      '<component1 vue-id="551070e6-1" text="text" onVueInit="__l"><view slot-scope="__SCOPED__"><view class="{{((__SCOPED__.text)?\'text\':\'\')}}">{{__SCOPED__.text}}</view></view></component1>'
     )
   })
 

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

 const compiler = require('../lib')
 
 function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
-  const res = compiler.compile(template, {
+  const res = compiler.compile(template, {
     resourcePath: 'test.wxml',
     mp: Object.assign({
       minified: true,
@@ -24,11 +24,11 @@ describe('mp:compiler-mp-baidu', () => {
   it('generate scoped slot', () => {
     assertCodegen(
       '<foo><template slot-scope="bar">{{ bar.foo }}</template></foo>',
-      '<foo vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><view slot="default">{{foo}}</view></foo>'
+      '<foo vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><view>{{foo}}</view></foo>'
     )
     assertCodegen(
       '<foo><view slot-scope="bar">{{ bar.foo }}</view></foo>',
-      '<foo vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><view slot="default"><view>{{foo}}</view></view></foo>'
+      '<foo vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><view><view>{{foo}}</view></view></foo>'
     )
   })
 
@@ -46,7 +46,7 @@ describe('mp:compiler-mp-baidu', () => {
   it('generate scoped slot with multiline v-if', () => {
     assertCodegen(
       '<foo><template v-if="\nshow\n" slot-scope="bar">{{ bar.foo }}</template></foo>',
-      '<foo vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><view slot="default"><block s-if="{{show}}">{{foo}}</block><block s-else><block></block></block></view></foo>'
+      '<foo vue-id="551070e6-1" vue-slots="{{[\'default\']}}"><view><block s-if="{{show}}">{{foo}}</block><block s-else><block></block></block></view></foo>'
     )
     assertCodegen(
       '<foo><view v-if="\nshow\n" slot="foo" slot-scope="bar">{{ bar.foo }}</view></foo>',
@@ -57,54 +57,54 @@ describe('mp:compiler-mp-baidu', () => {
   it('generate scoped slot', () => {
     assertCodegen(
       '<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>',
-      '<label class="_span"><block s-if="{{$slots.default}}"><slot name="default" var-user="user"></slot></block><block s-else>{{user.lastName}}</block></label>'
+      '<label class="_span"><block s-if="{{$slots.default}}"><slot var-user="user"></slot></block><block s-else>{{user.lastName}}</block></label>'
     )
     assertCodegen(
       '<span><slot name="header" v-bind:user="user">{{ user.lastName }}</slot></span>',
       '<label class="_span"><block s-if="{{$slots.header}}"><slot name="header" var-user="user"></slot></block><block s-else>{{user.lastName}}</block></label>'
     )
-  })
-
-  it('generate vue id', () => {
-    assertCodegen(
-      '<Test/>',
-      '<test vue-id="551070e6-1"></test>'
-    )
-    assertCodegen(
-      '<Test a="a">',
-      '<test vue-id="551070e6-1" a="a"></test>'
-    )
-    assertCodegen(
-      '<view><Test v-for="item in items" :key="item"/></view>',
-      '<view><block s-for="{{items}}" s-for-item="item" s-for-index="__i0__" s-key="*this"><test vue-id="{{\'551070e6-1-\'+__i0__}}"></test></block></view>'
-    )
-    assertCodegen(
-      '<view><Test v-for="item in items" :key="item"><Test v-for="item in item.items" :key="item"></Test></Test></view>',
-      '<view><block s-for="{{items}}" s-for-item="item" s-for-index="__i0__" s-key="*this"><test vue-id="{{\'551070e6-1-\'+__i0__}}" vue-slots="{{[\'default\']}}"><block s-for="{{item.items}}" s-for-item="item" s-for-index="__i1__" s-key="*this"><test vue-id="{{(\'551070e6-2-\'+__i0__+\'-\'+__i1__)+\',\'+(\'551070e6-1-\'+__i0__)}}"></test></block></test></block></view>'
-    )
-    assertCodegen(
-      '<view><Test v-for="(item,index) in items" :key="item"><Test v-for="(item,index1) in item.items" :key="item"></Test></Test></view>',
-      '<view><block s-for="{{items}}" s-for-item="item" s-for-index="index" s-key="*this"><test vue-id="{{\'551070e6-1-\'+index}}" vue-slots="{{[\'default\']}}"><block s-for="{{item.items}}" s-for-item="item" s-for-index="index1" s-key="*this"><test vue-id="{{(\'551070e6-2-\'+index+\'-\'+index1)+\',\'+(\'551070e6-1-\'+index)}}"></test></block></test></block></view>'
-    )
-  })
-
-  it('generate text trim', () => {
-    assertCodegen(
-      '<text>\nN: {{title}}\n′</text>',
-      '<text>{{\'N: \'+title+"\\\\n′"}}</text>'
-    )
-    assertCodegen(
-      '<text>我是第一行1\n我的第二行</text>',
-      '<text>我是第一行1\n我的第二行</text>'
-    )
-    assertCodegen(
-      '<text>我是第一行2\n我的第二行1{{title}}</text>',
-      '<text>{{"我是第一行2\\\\n我的第二行1"+title}}</text>'
-    )
-    assertCodegen(
-      `<text>我是第一行3
-    我的第二行2{{title}}</text>`,
-      '<text>{{"我是第一行3\\\\n    我的第二行2"+title}}</text>'
-    )
   })
-})
+
+  it('generate vue id', () => {
+    assertCodegen(
+      '<Test/>',
+      '<test vue-id="551070e6-1"></test>'
+    )
+    assertCodegen(
+      '<Test a="a">',
+      '<test vue-id="551070e6-1" a="a"></test>'
+    )
+    assertCodegen(
+      '<view><Test v-for="item in items" :key="item"/></view>',
+      '<view><block s-for="{{items}}" s-for-item="item" s-for-index="__i0__" s-key="*this"><test vue-id="{{\'551070e6-1-\'+__i0__}}"></test></block></view>'
+    )
+    assertCodegen(
+      '<view><Test v-for="item in items" :key="item"><Test v-for="item in item.items" :key="item"></Test></Test></view>',
+      '<view><block s-for="{{items}}" s-for-item="item" s-for-index="__i0__" s-key="*this"><test vue-id="{{\'551070e6-1-\'+__i0__}}" vue-slots="{{[\'default\']}}"><block s-for="{{item.items}}" s-for-item="item" s-for-index="__i1__" s-key="*this"><test vue-id="{{(\'551070e6-2-\'+__i0__+\'-\'+__i1__)+\',\'+(\'551070e6-1-\'+__i0__)}}"></test></block></test></block></view>'
+    )
+    assertCodegen(
+      '<view><Test v-for="(item,index) in items" :key="item"><Test v-for="(item,index1) in item.items" :key="item"></Test></Test></view>',
+      '<view><block s-for="{{items}}" s-for-item="item" s-for-index="index" s-key="*this"><test vue-id="{{\'551070e6-1-\'+index}}" vue-slots="{{[\'default\']}}"><block s-for="{{item.items}}" s-for-item="item" s-for-index="index1" s-key="*this"><test vue-id="{{(\'551070e6-2-\'+index+\'-\'+index1)+\',\'+(\'551070e6-1-\'+index)}}"></test></block></test></block></view>'
+    )
+  })
+
+  it('generate text trim', () => {
+    assertCodegen(
+      '<text>\nN: {{title}}\n′</text>',
+      '<text>{{\'N: \'+title+"\\\\n′"}}</text>'
+    )
+    assertCodegen(
+      '<text>我是第一行1\n我的第二行</text>',
+      '<text>我是第一行1\n我的第二行</text>'
+    )
+    assertCodegen(
+      '<text>我是第一行2\n我的第二行1{{title}}</text>',
+      '<text>{{"我是第一行2\\\\n我的第二行1"+title}}</text>'
+    )
+    assertCodegen(
+      `<text>我是第一行3
+    我的第二行2{{title}}</text>`,
+      '<text>{{"我是第一行3\\\\n    我的第二行2"+title}}</text>'
+    )
+  })
+})

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

 const compiler = require('../lib')
 
 function assertCodegen (template, templateCode, renderCode = 'with(this){}') {
-  const res = compiler.compile(template, {
+  const res = compiler.compile(template, {
     resourcePath: 'test.wxml',
     mp: {
       minified: true,
@@ -172,6 +172,7 @@ describe('mp:compiler', () => {
 
   it('generate single slot', () => {
     assertCodegen('<view><slot></slot></view>', '<view><slot></slot></view>')
+    assertCodegen('<view><slot name="default"></slot></view>', '<view><slot></slot></view>')
   })
 
   it('generate named slot', () => {
@@ -193,6 +194,10 @@ describe('mp:compiler', () => {
       '<view slot="one">hello world</view>',
       '<view slot="one">hello world</view>'
     )
+    assertCodegen(
+      '<view slot="default">hello world</view>',
+      '<view>hello world</view>'
+    )
   })
 
   // it('generate scoped slot', () => {
@@ -486,7 +491,7 @@ describe('mp:compiler', () => {
     )
     // normal named function
     assertCodegen(
-      '<input @input="function fn () { current++ }">',
+      '<input @input="function fn () { current++ }">',
       '<input data-event-opts="{{[[\'input\',[[\'e0\',[\'$event\']]]]]}}" bindinput="__e"/>',
       'with(this){if(!_isMounted){e0=function fn(){current++}}}'
     )
@@ -665,4 +670,4 @@ describe('mp:compiler', () => {
       '<view class="_div"><block wx:if="{{ok}}"><block wx:for="{{1}}" wx:for-item="i" wx:for-index="__i0__" wx:key="*this"><foo vue-id="{{\'551070e6-1-\'+__i0__}}" bind:__l="__l"></foo></block></block></view>'
     )
   })
-})
+})

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

@@ -14,6 +14,13 @@ function processElement (ast, state, isRoot) {
     ast.type = 'view'
   }
 
+  // 由于小程序端 default 不等同于默认插槽，统一移除 default 命名
+  if (ast.type === 'slot' && hasOwn(ast.attr, 'name') && ast.attr.name === 'default') {
+    delete ast.attr.name
+  } else if (hasOwn(ast.attr, 'slot') && ast.attr.slot === 'default') {
+    delete ast.attr.slot
+  }
+
   if (hasOwn(ast.attr, 'textContent')) {
     ast.children = [ast.attr.textContent]
     delete ast.attr.textContent
@@ -145,4 +152,4 @@ module.exports = function generate (ast, state) {
   }
 
   return code
-}
+}