fix(mp): default slot (#3094)

packages/uni-cli-shared/src/vue/utils.ts

@@ -85,7 +85,7 @@ export function addStaticClass(node: ElementNode, clazz: string) {
 export function createDirectiveNode(
   name: string,
   arg: string,
-  exp: string | ExpressionNode
+  exp?: string | ExpressionNode
 ): DirectiveNode {
   return {
     type: NodeTypes.DIRECTIVE,

packages/uni-mp-alipay/__tests__/vSlot.spec.ts

@@ -4,14 +4,14 @@ describe('mp-alipay: transform v-slot', () => {
   test('default slot', () => {
     assert(
       `<custom><template v-slot/></custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" onVI="__l"><view/></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" onVI="__l"><view slot="d"/></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`
     )
     assert(
       `<custom>test</custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" onVI="__l">test</custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" onVI="__l"><view slot="d">test</view></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`

packages/uni-mp-baidu/__tests__/vSlot.spec.ts

@@ -4,14 +4,14 @@ describe('compiler: transform v-slot', () => {
   test('default slot', () => {
     assert(
       `<custom><template v-slot/></custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view/></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view slot="d"/></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`
     )
     assert(
       `<custom>test</custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0">test</custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view slot="d">test</view></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`
@@ -27,7 +27,7 @@ describe('compiler: transform v-slot', () => {
     )
     assert(
       `<unicloud-db v-slot:default="{data, loading, error, options}"><view v-if="error">{{error.message}}</view><view v-else></view></unicloud-db>`,
-      `<unicloud-db u-s="{{['d']}}" slot="d" u-i="2a9ec0b0-0"><block s-for="v0 in a trackBy v0.a"><view s-if="{{v0.b}}">{{v0.c}}</view><view s-else></view></block></unicloud-db>`,
+      `<unicloud-db u-s="{{['d']}}" slot="d" u-i="2a9ec0b0-0"><view slot="d"><block s-for="v0 in a trackBy v0.a"><view s-if="{{v0.b}}">{{v0.c}}</view><view s-else></view></block></view></unicloud-db>`,
       `(_ctx, _cache) => {
   return { a: _w(({ data, loading, error, options }, s0, i0) => { return _e({ a: i0, b: error }, error ? { c: _t(error.message) } : {}); }, { name: 'd', path: 'a', vueId: '2a9ec0b0-0' }) }
 }`

packages/uni-mp-compiler/__tests__/component.spec.ts

@@ -10,7 +10,7 @@ describe('compiler: transform component', () => {
   test('component + component', () => {
     assert(
       `<custom><custom1/></custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" bind:__l="__l"><custom1 u-i="2a9ec0b0-1,2a9ec0b0-0" bind:__l="__l"/></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" bind:__l="__l"><custom1 u-s="{{['d']}}" slot="d" u-i="2a9ec0b0-1,2a9ec0b0-0" bind:__l="__l"/></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`,
@@ -22,7 +22,7 @@ describe('compiler: transform component', () => {
   test('component + component + component', () => {
     assert(
       `<custom><custom1><custom2/><custom2/></custom1></custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" bind:__l="__l"><custom1 u-s="{{['d']}}" u-i="2a9ec0b0-1,2a9ec0b0-0" bind:__l="__l"><custom2 u-i="2a9ec0b0-2,2a9ec0b0-1" bind:__l="__l"/><custom2 u-i="2a9ec0b0-3,2a9ec0b0-1" bind:__l="__l"/></custom1></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" bind:__l="__l"><custom1 u-s="{{['d']}}" slot="d" u-i="2a9ec0b0-1,2a9ec0b0-0" bind:__l="__l"><view slot="d"><custom2 u-i="2a9ec0b0-2,2a9ec0b0-1" bind:__l="__l"/><custom2 u-i="2a9ec0b0-3,2a9ec0b0-1" bind:__l="__l"/></view></custom1></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`,
@@ -56,7 +56,7 @@ describe('compiler: transform component', () => {
   test('component + component with v-for', () => {
     assert(
       `<custom><custom1 v-for="item in items"/></custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" bind:__l="__l"><custom1 wx:for="{{a}}" wx:for-item="item" u-i="{{item.a}}" bind:__l="__l"/></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0" bind:__l="__l"><view slot="d"><custom1 wx:for="{{a}}" wx:for-item="item" u-i="{{item.a}}" bind:__l="__l"/></view></custom>`,
       `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return { a: '2a9ec0b0-1' + '-' + i0 + ',' + '2a9ec0b0-0' }; }) }
 }`,
@@ -68,7 +68,7 @@ describe('compiler: transform component', () => {
   test('component with v-for + component', () => {
     assert(
       `<custom v-for="item in items"><custom1/></custom>`,
-      `<custom wx:for="{{a}}" wx:for-item="item" u-s="{{['d']}}" u-i="{{item.b}}" bind:__l="__l"><custom1 u-i="{{item.a}}" bind:__l="__l"/></custom>`,
+      `<custom wx:for="{{a}}" wx:for-item="item" u-s="{{['d']}}" u-i="{{item.b}}" bind:__l="__l"><custom1 u-s="{{['d']}}" slot="d" u-i="{{item.a}}" bind:__l="__l"/></custom>`,
       `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return { a: '2a9ec0b0-1' + '-' + i0 + ',' + ('2a9ec0b0-0' + '-' + i0), b: '2a9ec0b0-0' + '-' + i0 }; }) }
 }`,
@@ -80,7 +80,7 @@ describe('compiler: transform component', () => {
   test('component with v-for + component with v-for', () => {
     assert(
       `<custom v-for="item in items"><custom1 v-for="item1 in item.items"/></custom>`,
-      `<custom wx:for="{{a}}" wx:for-item="item" u-s="{{['d']}}" u-i="{{item.b}}" bind:__l="__l"><custom1 wx:for="{{item.a}}" wx:for-item="item1" u-i="{{item1.a}}" bind:__l="__l"/></custom>`,
+      `<custom wx:for="{{a}}" wx:for-item="item" u-s="{{['d']}}" u-i="{{item.b}}" bind:__l="__l"><view slot="d"><custom1 wx:for="{{item.a}}" wx:for-item="item1" u-i="{{item1.a}}" bind:__l="__l"/></view></custom>`,
       `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return { a: _f(item.items, (item1, k1, i1) => { return { a: '2a9ec0b0-1' + '-' + i0 + '-' + i1 + ',' + ('2a9ec0b0-0' + '-' + i0) }; }), b: '2a9ec0b0-0' + '-' + i0 }; }) }
 }`,

packages/uni-mp-compiler/__tests__/slot.spec.ts

@@ -4,7 +4,7 @@ describe('compiler: transform slot', () => {
   test('basic', () => {
     assert(
       `<button><slot/></button>`,
-      `<button><slot/></button>`,
+      `<button><slot name="d"/></button>`,
       `(_ctx, _cache) => {
   return {}
 }`
@@ -29,7 +29,7 @@ describe('compiler: transform slot', () => {
   test('fallback content', () => {
     assert(
       `<button><slot>Submit</slot></button>`,
-      `<button><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else>Submit</block></button>`,
+      `<button><block wx:if="{{$slots.d}}"><slot name="d"></slot></block><block wx:else>Submit</block></button>`,
       `(_ctx, _cache) => {
   return {}
 }`
@@ -75,6 +75,13 @@ describe('compiler: transform slot', () => {
       `<slot wx:for="{{a}}" wx:for-item="item" name="{{item.a}}"></slot>`,
       `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, index, i0) => { return { a: "d-" + i0, b: _r("d", { key: index }, i0) }; }) }
+}`
+    )
+    assert(
+      `<slot v-for="(item,index) in items" :key="index" name="test"></slot>`,
+      `<slot wx:for="{{a}}" wx:for-item="item" name="{{item.a}}"></slot>`,
+      `(_ctx, _cache) => {
+  return { a: _f(_ctx.items, (item, index, i0) => { return { a: "test-" + i0, b: _r("test", { key: index }, i0) }; }) }
 }`
     )
   })

packages/uni-mp-compiler/__tests__/vFor.spec.ts

@@ -158,7 +158,7 @@ describe(`compiler: v-for`, () => {
     test(`template v-for w/ <slot/>`, () => {
       assert(
         `<template v-for="item in items"><slot/></template>`,
-        `<block wx:for="{{a}}" wx:for-item="item"><slot/></block>`,
+        `<block wx:for="{{a}}" wx:for-item="item"><slot name="d"/></block>`,
         `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return {}; }) }
 }`
@@ -177,7 +177,7 @@ describe(`compiler: v-for`, () => {
     test(`v-for on <slot/>`, () => {
       assert(
         `<slot v-for="item in items"></slot>`,
-        `<slot wx:for="{{a}}" wx:for-item="item"></slot>`,
+        `<slot wx:for="{{a}}" wx:for-item="item" name="d"></slot>`,
         `(_ctx, _cache) => {
   return { a: _f(_ctx.items, (item, k0, i0) => { return {}; }) }
 }`

packages/uni-mp-compiler/__tests__/vIf.spec.ts

@@ -50,7 +50,7 @@ describe(`compiler: v-if`, () => {
     test(`template v-if w/ single <slot/> child`, () => {
       assert(
         `<template v-if="ok"><slot/></template>`,
-        `<block wx:if="{{a}}"><slot/></block>`,
+        `<block wx:if="{{a}}"><slot name="d"/></block>`,
         `(_ctx, _cache) => {
   return _e({ a: _ctx.ok }, _ctx.ok ? {} : {})
 }`
@@ -59,7 +59,7 @@ describe(`compiler: v-if`, () => {
     test(`v-if on <slot/>`, () => {
       assert(
         `<slot v-if="ok"/>`,
-        `<slot wx:if="{{a}}"/>`,
+        `<slot wx:if="{{a}}" name="d"/>`,
         `(_ctx, _cache) => {
   return _e({ a: _ctx.ok }, _ctx.ok ? {} : {})
 }`

packages/uni-mp-compiler/__tests__/vSlot.spec.ts

@@ -4,14 +4,21 @@ describe('compiler: transform v-slot', () => {
   test('default slot', () => {
     assert(
       `<custom><template v-slot/></custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view/></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view slot="d"/></custom>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<custom><template #default/></custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view slot="d"/></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`
     )
     assert(
       `<custom>test</custom>`,
-      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0">test</custom>`,
+      `<custom u-s="{{['d']}}" u-i="2a9ec0b0-0"><view slot="d">test</view></custom>`,
       `(_ctx, _cache) => {
   return {}
 }`

packages/uni-mp-compiler/src/transforms/transformSlot.ts

@@ -31,6 +31,10 @@ export function rewriteSlot(node: SlotOutletNode, context: TransformContext) {
   let hasOtherDir = false
   const nonNameProps: (AttributeNode | DirectiveNode)[] = []
   const { props } = node
+  // 默认插槽强制设置name
+  if (!findProp(node, 'name')) {
+    props.unshift(createAttributeNode('name', 'default'))
+  }
   for (let i = 0; i < props.length; i++) {
     const p = props[i]
     if (p.type === NodeTypes.ATTRIBUTE) {
@@ -119,24 +123,24 @@ function transformScopedSlotName(
   if (!context.miniProgram.slot.dynamicSlotNames) {
     return
   }
-  const { props } = node
   const slotKey = parseScopedSlotKey(context)
+  if (!slotKey) {
+    return
+  }
   const nameProps = findProp(node, 'name')
-  if (!nameProps) {
-    // 生成默认的 default 插槽名
-    if (slotKey) {
-      props.push(
-        createBindDirectiveNode(
-          'name',
-          rewriteExpression(
-            createSimpleExpression(`"${SLOT_DEFAULT_NAME}-"+` + slotKey),
-            context
-          ).content
-        )
+  if (nameProps && nameProps.type === NodeTypes.ATTRIBUTE && nameProps.value) {
+    const { props } = node
+    props.splice(
+      props.indexOf(nameProps),
+      1,
+      createBindDirectiveNode(
+        'name',
+        rewriteExpression(
+          createSimpleExpression(`"${nameProps.value.content}-"+` + slotKey),
+          context
+        ).content
       )
-    } else {
-      props.push(createAttributeNode('name', SLOT_DEFAULT_NAME))
-    }
+    )
   }
 }
 

packages/uni-mp-compiler/src/transforms/vSlot.ts

@@ -15,6 +15,7 @@ import {
   createCompoundExpression,
   createSimpleExpression,
   DirectiveNode,
+  ElementNode,
   ElementTypes,
   ErrorCodes,
   ExpressionNode,
@@ -30,6 +31,7 @@ import {
 import { dynamicSlotName, SLOT_DEFAULT_NAME } from '@dcloudio/uni-shared'
 import {
   createBindDirectiveNode,
+  createDirectiveNode,
   isUserComponent,
 } from '@dcloudio/uni-cli-shared'
 import { WITH_SCOPED_SLOT } from '../runtimeHelpers'
@@ -45,7 +47,7 @@ import {
   SCOPED_SLOT_IDENTIFIER,
 } from './utils'
 import { createVForArrowFunctionExpression } from './vFor'
-import { DYNAMIC_SLOT } from '..'
+import { DYNAMIC_SLOT } from '../runtimeHelpers'
 
 export const transformSlot: NodeTransform = (node, context) => {
   if (!isUserComponent(node, context as any)) {
@@ -78,6 +80,10 @@ export const transformSlot: NodeTransform = (node, context) => {
       )
       break
     }
+    if (!slotDir.arg) {
+      // v-slot => v-slot:default
+      slotDir.arg = createSimpleExpression('default', true)
+    }
     const slotName = transformTemplateSlotElement(
       slotDir,
       slotElement,
@@ -97,19 +103,47 @@ export const transformSlot: NodeTransform = (node, context) => {
       slots.add(slotName)
     }
   }
+
+  if (isMiniProgramComponent) {
+    return
+  }
+
   if (implicitDefaultChildren.length) {
     slots.add(SLOT_DEFAULT_NAME)
   }
+
   if (onComponentSlot) {
     // <unicloud-db v-slot:default="{data, loading, error, options}"/>
-    // => <unicloud-db  collection=""><template v-slot:default="{data, loading, error, options}"/></unicloud-db>
+    // => <unicloud-db collection=""><template v-slot:default="{data, loading, error, options}"/></unicloud-db>
     slots.add(SLOT_DEFAULT_NAME)
     const templateNode = createTemplateNode(
       onComponentSlot,
       implicitDefaultChildren
     )
     transformTemplateSlotElement(onComponentSlot, templateNode, node, context)
-    node.children = templateNode.children
+    node.children = [templateNode]
+  } else {
+    if (implicitDefaultChildren.length) {
+      // <custom>test</custom> => <custom><template #default>test</template></custom>
+      const vSlotDir = createDirectiveNode('slot', 'default')
+      const child = implicitDefaultChildren[0] as ElementNode
+      const isSingleElementNode =
+        implicitDefaultChildren.length === 1 &&
+        child.type === NodeTypes.ELEMENT &&
+        !findDir(child, 'for')
+      if (isSingleElementNode) {
+        child.props.unshift(vSlotDir)
+      } else {
+        const templateNode = createTemplateNode(
+          vSlotDir,
+          implicitDefaultChildren
+        )
+        implicitDefaultChildren.forEach((child) => {
+          node.children.splice(node.children.indexOf(child), 1)
+        })
+        node.children.unshift(templateNode)
+      }
+    }
   }
   // 不支持 $slots, 则自动补充 props
   if (slots.size && !context.miniProgram.slot.$slots) {