feat: add ExtractPropsAndEvents util

Author: rudyxu1102

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

@@ -14,7 +14,8 @@ import {
   Slots,
   VNode,
   ImgHTMLAttributes,
-  StyleValue
+  StyleValue,
+  ExtractPropsAndEvents
 } from 'vue'
 import { describe, expectType, IsUnion, test } from './utils'
 
@@ -1326,8 +1327,7 @@ describe('define attrs', () => {
     // @ts-expect-error
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
-
-  test('wrap elements, such as img element (Keep the volar plugin open)', () => {
+  test('wrap elements', () => {
     const MyImg = defineComponent({
       props: {
         foo: String
@@ -1344,13 +1344,14 @@ describe('define attrs', () => {
     expectType<JSX.Element>(<MyImg class={'str'} style={'str'} src={'str'} />)
   })
 
-  test('secondary packaging of components', () => {
-    const childProps = {
-      foo: String
-    }
-    type ChildProps = ExtractPropTypes<typeof childProps>
+  test('wrap components', () => {
     const Child = defineComponent({
-      props: childProps,
+      props: {
+        foo: String
+      },
+      emits: {
+        baz: (val: number) => true
+      },
       render() {
         return <div>{this.foo}</div>
       }
@@ -1359,13 +1360,25 @@ describe('define attrs', () => {
       props: {
         bar: Number
       },
-      attrs: Object as AttrsType<ChildProps>,
+      attrs: Object as AttrsType<ExtractPropsAndEvents<typeof Child>>,
+      created() {
+        expectType<unknown>(this.$attrs.class)
+        expectType<unknown>(this.$attrs.style)
+      },
       render() {
         return <Child {...this.$attrs} />
       }
     })
     expectType<JSX.Element>(
-      <Comp class={'str'} style={'str'} bar={1} foo={'str'} />
+      <Comp
+        class={'str'}
+        style={'str'}
+        bar={1}
+        foo={'str'}
+        onBaz={val => {
+          expectType<number>(val)
+        }}
+      />
     )
   })
 })

packages/runtime-core/src/apiDefineComponent.ts

@@ -16,7 +16,7 @@ import {
   SetupContext,
   AllowedComponentProps,
   ComponentCustomProps,
-  noAttrsDefine
+  HasDefinedAttrs
 } from './component'
 import {
   ExtractPropTypes,
@@ -109,9 +109,9 @@ export function defineComponent<
   EE extends string = string,
   S extends SlotsType = {},
   Attrs extends AttrsType = Record<string, unknown>,
-  PropsAttrs = noAttrsDefine<Attrs> extends true
-    ? {}
-    : UnwrapAttrsType<NonNullable<Attrs>>
+  PropsAttrs = HasDefinedAttrs<Attrs> extends true
+    ? UnwrapAttrsType<NonNullable<Attrs>>
+    : {}
 >(
   setup: (
     props: Props,

packages/runtime-core/src/component.ts

@@ -84,8 +84,10 @@ import { SchedulerJob } from './scheduler'
 import { LifecycleHooks } from './enums'
 
 export type Data = Record<string, unknown>
-// Whether the attrs option is not defined
-export type noAttrsDefine<T> = Equal<keyof T, string>
+// Whether the attrs option is defined
+export type HasDefinedAttrs<T> = Equal<keyof T, string> extends true
+  ? false
+  : true
 /**
  * For extending allowed non-declared props on components in TSX
  */
@@ -192,9 +194,9 @@ export type SetupContext<
   Attrs extends AttrsType = Record<string, unknown>
 > = E extends any
   ? {
-      attrs: noAttrsDefine<Attrs> extends true
-        ? Data
-        : UnwrapAttrsType<NonNullable<Attrs>>
+      attrs: HasDefinedAttrs<Attrs> extends true
+        ? UnwrapAttrsType<NonNullable<Attrs>>
+        : Data
       slots: UnwrapSlotsType<S>
       emit: EmitFn<E>
       expose: (exposed?: Record<string, any>) => void

packages/runtime-core/src/componentOptions.ts

@@ -421,6 +421,10 @@ declare const AttrSymbol: unique symbol
 export type AttrsType<T extends Record<string, any> = Record<string, any>> = {
   [AttrSymbol]?: T
 }
+// extract props and event types from components
+export type ExtractPropsAndEvents<
+  T extends abstract new (...args: any) => any
+> = InstanceType<T>['$props']
 
 export type UnwrapAttrsType<
   Attrs extends AttrsType,

packages/runtime-core/src/componentPublicInstance.ts

@@ -1,7 +1,8 @@
 import {
+  AllowedComponentProps,
   ComponentInternalInstance,
   Data,
-  noAttrsDefine,
+  HasDefinedAttrs,
   getExposeProxy,
   isStatefulComponent
 } from './component'
@@ -211,9 +212,9 @@ export type ComponentPublicInstance<
   S extends SlotsType = {},
   Attrs extends AttrsType = Record<string, unknown>, // Attrs type extracted from attrs option
   // AttrsProps type used for JSX validation of attrs
-  AttrsProps = noAttrsDefine<Attrs> extends true // if attrs is not defined
-    ? {} // no JSX validation of attrs
-    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> // exclude props from attrs, for JSX validation
+  AttrsProps = HasDefinedAttrs<Attrs> extends true // if attrs is defined
+    ? Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> // exclude props from attrs, for JSX validation
+    : {} // no JSX validation of attrs
 > = {
   $: ComponentInternalInstance
   $data: D
@@ -222,9 +223,9 @@ export type ComponentPublicInstance<
       ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & AttrsProps
       : P & PublicProps & AttrsProps
   >
-  $attrs: noAttrsDefine<Attrs> extends true
-    ? Data
-    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
+  $attrs: HasDefinedAttrs<Attrs> extends true
+    ? AttrsProps & AllowedComponentProps
+    : Data
   $refs: Data
   $slots: UnwrapSlotsType<S>
   $root: ComponentPublicInstance | null

packages/runtime-core/src/index.ts

@@ -231,7 +231,8 @@ export type {
   ComputedOptions,
   RuntimeCompilerOptions,
   ComponentInjectOptions,
-  AttrsType
+  AttrsType,
+  ExtractPropsAndEvents
 } from './componentOptions'
 export type { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 export type {