fix(slots): handle nullish v-bind slot props (#15177)

Author: viazovskyi585

packages/runtime-core/__tests__/helpers/renderSlot.spec.ts

@@ -115,6 +115,50 @@ describe('renderSlot', () => {
     expect(slot.key).toBe('user')
   })
 
+  it('should handle nullish props', () => {
+    for (const props of [null, undefined]) {
+      let receivedProps: any
+      const vnode = renderSlot(
+        {
+          default: props => {
+            receivedProps = props
+            return [h('div')]
+          },
+        },
+        'default',
+        props,
+      )
+      expect(receivedProps).toEqual({})
+      expect(vnode.key).toBe('_default')
+    }
+  })
+
+  it('should handle nullish props with a compiler-injected slot key', () => {
+    for (const props of [null, undefined]) {
+      const vnode = renderSlot(
+        { default: () => [h('div')] },
+        'default',
+        props,
+        undefined,
+        undefined,
+        'branch',
+      )
+      expect(vnode.key).toBe('branch')
+    }
+  })
+
+  it('should handle nullish props in custom element mode', () => {
+    setCurrentRenderingInstance({ type: {}, ce: {} } as any)
+
+    for (const props of [null, undefined]) {
+      const vnode = renderSlot({}, 'foo', props, undefined, undefined, 'branch')
+      const slot = (vnode.children as any[])[0]
+      expect(slot.type).toBe('slot')
+      expect(slot.key).toBe('branch')
+      expect(slot.props.name).toBe('foo')
+    }
+  })
+
   it('should render slot fallback', () => {
     const vnode = renderSlot({}, 'default', { key: 'foo' }, () => ['fallback'])
     expect(vnode.children).toEqual(['fallback'])

packages/runtime-core/src/helpers/renderSlot.ts

@@ -27,13 +27,20 @@ import { isAsyncWrapper } from '../apiAsyncComponent'
 export function renderSlot(
   slots: Slots,
   name: string,
-  props: Data = {},
+  // can be nullish: `v-bind` on a `<slot>` compiles to
+  // `normalizeProps(guardReactiveProps(exp))`, and both helpers preserve
+  // nullish values by design
+  props?: Data | null,
   // this is not a user-facing function, so the fallback is always generated by
   // the compiler and guaranteed to be a function returning an array
   fallback?: () => VNodeArrayChildren,
   noSlotted?: boolean,
   branchKey?: PropertyKey,
 ): VNode {
+  // normalize once so that the key lookups below and the slot function itself
+  // always see an object. fresh object rather than EMPTY_OBJ because the
+  // custom element branch mutates it
+  if (props == null) props = {}
   if (
     currentRenderingInstance!.ce ||
     (currentRenderingInstance!.parent &&

packages/server-renderer/__tests__/ssrSlot.spec.ts

@@ -110,6 +110,33 @@ describe('ssr: slot', () => {
     )
   })
 
+  test('nullish slot props', async () => {
+    const nullishBind = {
+      one: {
+        props: ['value'],
+        template: `<div><slot v-bind="value" name="foo">fallback</slot></div>`,
+      },
+    }
+
+    expect(
+      await renderToString(
+        createApp({
+          components: nullishBind,
+          template: `<one :value="null"/>`,
+        }),
+      ),
+    ).toBe(`<div><!--[-->fallback<!--]--></div>`)
+
+    expect(
+      await renderToString(
+        createApp({
+          components: nullishBind,
+          template: `<one :value="null"><template #foo="{ label }">{{ label || 'none' }}</template></one>`,
+        }),
+      ),
+    ).toBe(`<div><!--[-->none<!--]--></div>`)
+  })
+
   test('transition slot', async () => {
     const ReusableTransition = {
       template: `<transition><slot/></transition>`,

packages/server-renderer/src/helpers/ssrRenderSlot.ts

@@ -24,7 +24,8 @@ export type SSRSlot = (
 export function ssrRenderSlot(
   slots: Slots | SSRSlots,
   slotName: string,
-  slotProps: Props,
+  // can be nullish when `v-bind` on the `<slot>` evaluates to nullish
+  slotProps: Props | null | undefined,
   fallbackRenderFn: (() => void) | null,
   push: PushFn,
   parentComponent: ComponentInternalInstance,
@@ -47,7 +48,7 @@ export function ssrRenderSlot(
 export function ssrRenderSlotInner(
   slots: Slots | SSRSlots,
   slotName: string,
-  slotProps: Props,
+  slotProps: Props | null | undefined,
   fallbackRenderFn: (() => void) | null,
   push: PushFn,
   parentComponent: ComponentInternalInstance,
@@ -61,7 +62,9 @@ export function ssrRenderSlotInner(
       slotBuffer.push(item)
     }
     const ret = slotFn(
-      slotProps,
+      // keep the slot function's contract in sync with `renderSlot`, which also
+      // normalizes nullish props before invoking the slot
+      slotProps || {},
       bufferedPush,
       parentComponent,
       slotScopeId ? ' ' + slotScopeId : '',

packages/vue/__tests__/index.spec.ts

@@ -293,6 +293,42 @@ describe('compiler + runtime integration', () => {
     expect(container.innerHTML).toBe(`<div>2<div>1</div></div>`)
   })
 
+  test('nullish v-bind on <slot>', async () => {
+    const Child = {
+      props: ['error', 'value'],
+      template:
+        `<div>` +
+        `<template v-if="error">{{ error }}</template>` +
+        `<template v-else><slot v-bind="value" name="scoped">fallback</slot></template>` +
+        `</div>`,
+    }
+
+    const fallbackContainer = document.createElement('div')
+    createApp({
+      components: { Child },
+      template: `<Child :error="null" :value="null"/>`,
+    }).mount(fallbackContainer)
+    expect(fallbackContainer.innerHTML).toBe(`<div>fallback</div>`)
+
+    const value = ref<{ label: string } | null>(null)
+    const container = document.createElement('div')
+    createApp({
+      components: { Child },
+      setup() {
+        return { value }
+      },
+      template:
+        `<Child :error="null" :value="value">` +
+        `<template #scoped="{ label }">{{ label || 'none' }}</template>` +
+        `</Child>`,
+    }).mount(container)
+    expect(container.innerHTML).toBe(`<div>none</div>`)
+
+    value.value = { label: 'foo' }
+    await nextTick()
+    expect(container.innerHTML).toBe(`<div>foo</div>`)
+  })
+
   // #2413
   it('EMPTY_ARR should not change', () => {
     const App = {