feat(types): infer slots type from SetupContext in defineComponent

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

@@ -1175,6 +1175,77 @@ describe('componentOptions setup should be `SetupContext`', () => {
   )
 })
 
+describe('infer slots from `SetupContext`', () => {
+  // options
+  const Foo = defineComponent({
+    setup(
+      _props,
+      _ctx: SetupContext<
+        EmitsOptions,
+        {
+          default: (props: { foo: number }) => any
+        }
+      >,
+    ) {},
+    render() {
+      this.$slots.default({ foo: 1 })
+    },
+  })
+  const foo = {} as InstanceType<typeof Foo>
+  expectType<IsAny<typeof foo.$slots.default>>(false)
+  foo.$slots.default({ foo: 1 })
+
+  const Bar = defineComponent({
+    setup(
+      _props,
+      _ctx: SetupContext<
+        EmitsOptions,
+        {
+          default: (props: { foo: number }) => any
+        }
+      >,
+    ) {},
+    render() {
+      this.$slots.default({ foo: 1 })
+    },
+  })
+  const bar = {} as InstanceType<typeof Bar>
+  expectType<IsAny<typeof bar.$slots.default>>(false)
+  bar.$slots.default({ foo: 1 })
+
+  // functional
+  const Baz = defineComponent(
+    <T,>(
+      _props: { foo: T },
+      _ctx: {
+        slots: {
+          default: (props: { foo: T }) => any
+        }
+      },
+    ) =>
+      () => [],
+  )
+  const baz = new Baz({ foo: 1 })
+  expectType<IsAny<typeof baz.$slots.default>>(false)
+  baz.$slots.default?.({ foo: 1 })
+
+  const Qux = defineComponent(
+    <T,>(
+      _props: { foo: T },
+      _ctx: SetupContext<
+        EmitsOptions,
+        {
+          default: (props: { foo: T }) => any
+        }
+      >,
+    ) =>
+      () => [],
+  )
+  const qux = new Qux({ foo: 1 })
+  expectType<IsAny<typeof qux.$slots.default>>(false)
+  qux.$slots.default?.({ foo: 1 })
+})
+
 describe('extract instance type', () => {
   const Base = defineComponent({
     props: {

packages/runtime-core/src/apiDefineComponent.ts

@@ -33,7 +33,7 @@ import type {
   ComponentPublicInstanceConstructor,
   CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
-import type { SlotsType } from './componentSlots'
+import type { Slots, SlotsType } from './componentSlots'
 import type { Directive } from './directives'
 import type { ComponentTypeEmits } from './apiSetupHelpers'
 
@@ -150,7 +150,7 @@ export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {},
+  S extends SlotsType | Slots = {},
 >(
   setup: (
     props: Props,
@@ -166,7 +166,7 @@ export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {},
+  S extends SlotsType | Slots = {},
 >(
   setup: (
     props: Props,
@@ -199,7 +199,7 @@ export function defineComponent<
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   InjectOptions extends ComponentInjectOptions = {},
   InjectKeys extends string = string,
-  Slots extends SlotsType = {},
+  TypeSlots extends SlotsType | Slots = {},
   LocalComponents extends Record<string, Component> = {},
   Directives extends Record<string, Directive> = {},
   Exposed extends string = string,
@@ -249,7 +249,7 @@ export function defineComponent<
     {}, // Defaults
     InjectOptions,
     InjectKeys,
-    Slots,
+    TypeSlots,
     LocalComponents,
     Directives,
     Exposed,
@@ -269,7 +269,7 @@ export function defineComponent<
         {},
         false,
         InjectOptions,
-        Slots,
+        TypeSlots,
         LocalComponents,
         Directives,
         string
@@ -288,7 +288,7 @@ export function defineComponent<
   PublicProps,
   ToResolvedProps<InferredProps, ResolvedEmits>,
   ExtractDefaultPropTypes<RuntimePropsOptions>,
-  Slots,
+  TypeSlots,
   LocalComponents,
   Directives,
   Exposed,

packages/runtime-core/src/component.ts

@@ -287,11 +287,11 @@ export type LifecycleHook<TFn = Function> = (TFn & SchedulerJob)[] | null
 // use `E extends any` to force evaluating type to fix #2362
 export type SetupContext<
   E = EmitsOptions,
-  S extends SlotsType = {},
+  S extends SlotsType | Slots = {},
 > = E extends any
   ? {
       attrs: Attrs
-      slots: UnwrapSlotsType<S>
+      slots: S extends SlotsType ? UnwrapSlotsType<S> : Readonly<S>
       emit: EmitFn<E>
       expose: <Exposed extends Record<string, any> = Record<string, any>>(
         exposed?: Exposed,

packages/runtime-core/src/componentPublicInstance.ts

@@ -50,7 +50,7 @@ import {
   shouldCacheAccess,
 } from './componentOptions'
 import type { EmitFn, EmitsOptions } from './componentEmits'
-import type { SlotsType, UnwrapSlotsType } from './componentSlots'
+import type { Slots, SlotsType, UnwrapSlotsType } from './componentSlots'
 import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
 import { warn } from './warning'
@@ -224,7 +224,7 @@ export type CreateComponentPublicInstanceWithMixins<
   Defaults = {},
   MakeDefaultsOptional extends boolean = false,
   I extends ComponentInjectOptions = {},
-  S extends SlotsType = {},
+  S extends SlotsType | Slots = {},
   LC extends Record<string, Component> = {},
   Directives extends Record<string, Directive> = {},
   Exposed extends string = string,
@@ -272,7 +272,7 @@ export type CreateComponentPublicInstanceWithMixins<
     Provide
   >,
   I,
-  S,
+  S extends SlotsType ? S : SlotsType<S>,
   Exposed,
   TypeRefs,
   TypeEl