feat: optional slots

Author: sxzz

packages/dts-test/defineComponent.test-d.tsx

@@ -10,7 +10,8 @@ import {
   SetupContext,
   h,
   SlotsType,
-  Slots
+  Slots,
+  VNode
 } from 'vue'
 import { describe, expectType, IsUnion } from './utils'
 
@@ -1409,26 +1410,37 @@ export default {
 }
 
 describe('slots', () => {
-  defineComponent({
+  const comp1 = defineComponent({
     slots: Object as SlotsType<{
       default: { foo: string; bar: number }
-      item: { data: number }
+      optional?: { data: string }
     }>,
     setup(props, { slots }) {
-      expectType<undefined | ((scope: { foo: string; bar: number }) => any)>(
+      expectType<(scope: { foo: string; bar: number }) => VNode[]>(
         slots.default
       )
-      expectType<undefined | ((scope: { data: number }) => any)>(slots.item)
+      expectType<((scope: { data: string }) => VNode[]) | undefined>(
+        slots.optional
+      )
+
+      slots.default({ foo: 'foo', bar: 1 })
+
+      // @ts-expect-error it's optional
+      slots.optional({ data: 'foo' })
+      slots.optional?.({ data: 'foo' })
+
+      expectType<typeof slots | undefined>(new comp1().$slots)
     }
   })
 
-  defineComponent({
+  const comp2 = defineComponent({
     setup(props, { slots }) {
       // unknown slots
       expectType<Slots>(slots)
-      expectType<((...args: any[]) => any) | undefined>(slots.default)
+      expectType<((...args: any[]) => VNode[]) | undefined>(slots.default)
     }
   })
+  expectType<Slots | undefined>(new comp2().$slots)
 })
 
 import {

packages/dts-test/setupHelpers.test-d.ts

@@ -184,8 +184,10 @@ describe('defineEmits w/ runtime declaration', () => {
 describe('defineSlots', () => {
   const slots = defineSlots<{
     default: { foo: string; bar: number }
+    optional?: string
   }>()
   expectType<(scope: { foo: string; bar: number }) => VNode[]>(slots.default)
+  expectType<undefined | ((scope: string) => VNode[])>(slots.optional)
 
   const slotsUntype = defineSlots()
   expectType<Slots>(slotsUntype)

packages/runtime-core/src/apiSetupHelpers.ts

@@ -25,7 +25,7 @@ import {
   ExtractPropTypes
 } from './componentProps'
 import { warn } from './warning'
-import { Slot } from './componentSlots'
+import { SlotsType, TypedSlots } from './componentSlots'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
@@ -190,11 +190,9 @@ export function defineOptions<
 }
 
 export function defineSlots<
-  T extends Record<string, any> = Record<string, any>
+  S extends Record<string, any> = Record<string, any>
 >(): // @ts-expect-error
-Readonly<{
-  [K in keyof T]: Slot<[T[K]]>
-}> {
+TypedSlots<SlotsType<S>> {
   if (__DEV__) {
     warnRuntimeUsage(`defineSlots`)
   }

packages/runtime-core/src/component.ts

@@ -30,6 +30,7 @@ import {
 import {
   initSlots,
   InternalSlots,
+  Slots,
   SlotsType,
   TypedSlots
 } from './componentSlots'
@@ -62,7 +63,8 @@ import {
   isPromise,
   ShapeFlags,
   extend,
-  getGlobalThis
+  getGlobalThis,
+  IfAny
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerOptions } from '@vue/compiler-core'
@@ -125,13 +127,16 @@ export interface ComponentInternalOptions {
 export interface FunctionalComponent<
   P = {},
   E extends EmitsOptions = {},
-  S extends Record<string, any> = Record<string, any>
+  S extends Record<string, any> = any
 > extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
-  (props: P, ctx: Omit<SetupContext<E, SlotsType<S>>, 'expose'>): any
+  (
+    props: P,
+    ctx: Omit<SetupContext<E, IfAny<S, {}, SlotsType<S>>>, 'expose'>
+  ): any
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
-  slots?: SlotsType<S>
+  slots?: IfAny<S, Slots, SlotsType<S>>
   inheritAttrs?: boolean
   displayName?: string
   compatConfig?: CompatConfig

packages/runtime-core/src/componentRenderUtils.ts

@@ -102,7 +102,7 @@ export function renderComponentRoot(
                       markAttrsAccessed()
                       return attrs
                     },
-                    slots,
+                    slots: slots,
                     emit
                   }
                 : { attrs, slots, emit }

packages/runtime-core/src/componentSlots.ts

@@ -14,7 +14,8 @@ import {
   extend,
   def,
   SlotFlags,
-  Prettify
+  Prettify,
+  IfAny
 } from '@vue/shared'
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
@@ -23,8 +24,8 @@ import { isHmrUpdating } from './hmr'
 import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
 import { toRaw } from '@vue/reactivity'
 
-export type Slot<T extends any[] = any[]> = (
-  ...args: T extends [any] ? any[] : T
+export type Slot<T extends any = any> = (
+  ...args: IfAny<T, any[], [T]>
 ) => VNode[]
 
 export type InternalSlots = {
@@ -42,9 +43,9 @@ export type TypedSlots<S extends SlotsType> = [keyof S] extends [never]
   ? Slots
   : Readonly<
       Prettify<{
-        [K in keyof NonNullable<S[typeof SlotSymbol]>]:
-          | Slot<[NonNullable<S[typeof SlotSymbol]>[K]]>
-          | undefined
+        [K in keyof NonNullable<S[typeof SlotSymbol]>]: Slot<
+          NonNullable<NonNullable<S[typeof SlotSymbol]>[K]>
+        >
       }>
     >