feat(types): infer attrs in defineComponent

Author: rudyxu1102

packages/runtime-core/src/apiDefineComponent.ts

@@ -41,6 +41,7 @@ export type DefineComponent<
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   E extends EmitsOptions = {},
   EE extends string = string,
+  Attrs = {},
   PP = PublicProps,
   Props = Readonly<
     PropsOrPropOptions extends ComponentPropsOptions
@@ -61,7 +62,9 @@ export type DefineComponent<
     E,
     PP & Props,
     Defaults,
-    true
+    true,
+    {},
+    Attrs
   > &
     Props
 > &
@@ -86,12 +89,12 @@ export type DefineComponent<
 
 // overload 1: direct setup function
 // (uses user defined props interface)
-export function defineComponent<Props, RawBindings = object>(
+export function defineComponent<Props, RawBindings = object, Attrs = {}>(
   setup: (
     props: Readonly<Props>,
-    ctx: SetupContext
+    ctx: SetupContext<{}, Attrs>
   ) => RawBindings | RenderFunction
-): DefineComponent<Props, RawBindings>
+): DefineComponent<Props, RawBindings, {}, {}, {}, {}, {}, {}, string, Attrs>
 
 // overload 2: object format with no props
 // (uses user defined props interface)
@@ -107,9 +110,10 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
+  Attrs = {}
 >(
-  options: ComponentOptionsWithoutProps<
+  comp: ComponentOptionsWithoutProps<
     Props,
     RawBindings,
     D,
@@ -120,9 +124,13 @@ export function defineComponent<
     E,
     EE,
     I,
-    II
-  >
-): DefineComponent<Props, RawBindings, D, C, M, Mixin, Extends, E, EE>
+    II,
+    Attrs
+  >,
+  options?: {
+    attrs: Attrs
+  }
+): DefineComponent<Props, RawBindings, D, C, M, Mixin, Extends, E, EE, Attrs>
 
 // overload 3: object format with array props declaration
 // props inferred as { [key in PropNames]?: any }
@@ -138,9 +146,10 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
+  Attrs = {}
 >(
-  options: ComponentOptionsWithArrayProps<
+  comp: ComponentOptionsWithArrayProps<
     PropNames,
     RawBindings,
     D,
@@ -151,8 +160,12 @@ export function defineComponent<
     E,
     EE,
     I,
-    II
-  >
+    II,
+    Attrs
+  >,
+  options?: {
+    attrs: Attrs
+  }
 ): DefineComponent<
   Readonly<{ [key in PropNames]?: any }>,
   RawBindings,
@@ -162,7 +175,8 @@ export function defineComponent<
   Mixin,
   Extends,
   E,
-  EE
+  EE,
+  Attrs
 >
 
 // overload 4: object format with object props declaration
@@ -180,9 +194,10 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
+  Attrs = {}
 >(
-  options: ComponentOptionsWithObjectProps<
+  comp: ComponentOptionsWithObjectProps<
     PropsOptions,
     RawBindings,
     D,
@@ -193,11 +208,26 @@ export function defineComponent<
     E,
     EE,
     I,
-    II
-  >
-): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
+    II,
+    Attrs
+  >,
+  options?: {
+    attrs: Attrs
+  }
+): DefineComponent<
+  PropsOptions,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  Attrs
+>
 
 // implementation, close to no-op
-export function defineComponent(options: unknown) {
-  return isFunction(options) ? { setup: options, name: options.name } : options
+export function defineComponent(comp: unknown, options?: unknown) {
+  return isFunction(comp) ? { setup: comp, name: comp.name } : comp
 }

packages/runtime-core/src/apiSetupHelpers.ts

@@ -5,7 +5,8 @@ import {
   setCurrentInstance,
   SetupContext,
   createSetupContext,
-  unsetCurrentInstance
+  unsetCurrentInstance,
+  Data
 } from './component'
 import { EmitFn, EmitsOptions } from './componentEmits'
 import { ComponentObjectPropsOptions, ExtractPropTypes } from './componentProps'
@@ -182,8 +183,8 @@ export function useSlots(): SetupContext['slots'] {
   return getContext().slots
 }
 
-export function useAttrs(): SetupContext['attrs'] {
-  return getContext().attrs
+export function useAttrs<T extends Data = {}>(): SetupContext['attrs'] {
+  return getContext().attrs as T
 }
 
 function getContext(): SetupContext {

packages/runtime-core/src/component.ts

@@ -181,9 +181,9 @@ export const enum LifecycleHooks {
 }
 
 // use `E extends any` to force evaluating type to fix #2362
-export type SetupContext<E = EmitsOptions> = E extends any
+export type SetupContext<E = EmitsOptions, Attrs = Data> = E extends any
   ? {
-      attrs: Data
+      attrs: Attrs
       slots: Slots
       emit: EmitFn<E>
       expose: (exposed?: Record<string, any>) => void

packages/runtime-core/src/componentOptions.ts

@@ -229,6 +229,7 @@ export type ComponentOptionsWithoutProps<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
+  Attrs = {},
   PE = Props & EmitsToProps<E>
 > = ComponentOptionsBase<
   PE,
@@ -258,7 +259,8 @@ export type ComponentOptionsWithoutProps<
       PE,
       {},
       false,
-      I
+      I,
+      Attrs
     >
   >
 
@@ -274,6 +276,7 @@ export type ComponentOptionsWithArrayProps<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
+  Attrs = {},
   Props = Readonly<{ [key in PropNames]?: any }> & EmitsToProps<E>
 > = ComponentOptionsBase<
   Props,
@@ -303,7 +306,8 @@ export type ComponentOptionsWithArrayProps<
       Props,
       {},
       false,
-      I
+      I,
+      Attrs
     >
   >
 
@@ -319,6 +323,7 @@ export type ComponentOptionsWithObjectProps<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
+  Attrs = {},
   Props = Readonly<ExtractPropTypes<PropsOptions>> & EmitsToProps<E>,
   Defaults = ExtractDefaultPropTypes<PropsOptions>
 > = ComponentOptionsBase<
@@ -349,7 +354,8 @@ export type ComponentOptionsWithObjectProps<
       Props,
       Defaults,
       false,
-      I
+      I,
+      Attrs
     >
   >
 

packages/runtime-core/src/componentPublicInstance.ts

@@ -1,4 +1,5 @@
 import {
+  AllowedComponentProps,
   ComponentInternalInstance,
   Data,
   getExposeProxy,
@@ -144,6 +145,7 @@ export type CreateComponentPublicInstance<
   Defaults = {},
   MakeDefaultsOptional extends boolean = false,
   I extends ComponentInjectOptions = {},
+  Attrs = {},
   PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
   PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
   PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
@@ -165,7 +167,8 @@ export type CreateComponentPublicInstance<
   PublicDefaults,
   MakeDefaultsOptional,
   ComponentOptionsBase<P, B, D, C, M, Mixin, Extends, E, string, Defaults>,
-  I
+  I,
+  Attrs
 >
 
 // public properties exposed on the proxy, which is used as the render context
@@ -181,14 +184,17 @@ export type ComponentPublicInstance<
   Defaults = {},
   MakeDefaultsOptional extends boolean = false,
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
-  I extends ComponentInjectOptions = {}
+  I extends ComponentInjectOptions = {},
+  Attrs = {}
 > = {
   $: ComponentInternalInstance
   $data: D
   $props: MakeDefaultsOptional extends true
-    ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-    : P & PublicProps
-  $attrs: Data
+    ? Partial<Defaults> &
+        Omit<P & PublicProps, keyof Defaults> &
+        Omit<Attrs, keyof (P & PublicProps)>
+    : P & PublicProps & Omit<Attrs, keyof (P & PublicProps)>
+  $attrs: Omit<Attrs, keyof (P & PublicProps)> & AllowedComponentProps
   $refs: Data
   $slots: Slots
   $root: ComponentPublicInstance | null