From 24bedf9f40f6149684940e132f57226d537680f8 Mon Sep 17 00:00:00 2001
From: rudy-xhd <xuhaodong66@foxmail.com>
Date: Sat, 31 Dec 2022 23:01:17 +0800
Subject: [PATCH 01/20] feat(types): infer attrs in `defineComponent`

---
 packages/dts-test/defineComponent.test-d.tsx  | 123 +++++++++++++++++-
 .../runtime-core/src/apiDefineComponent.ts    |  54 +++++---
 packages/runtime-core/src/apiSetupHelpers.ts  |   7 +-
 packages/runtime-core/src/component.ts        |   9 +-
 packages/runtime-core/src/componentOptions.ts |  42 +++++-
 .../src/componentPublicInstance.ts            |  25 ++--
 packages/runtime-core/src/index.ts            |   3 +-
 7 files changed, 217 insertions(+), 46 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 7466249e10f..073020af3fc 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -10,6 +10,7 @@ import {
   SetupContext,
   h,
   SlotsType,
+  AttrsType,
   Slots,
   VNode
 } from 'vue'
@@ -1043,7 +1044,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      this.foobar = 1
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1055,7 +1056,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      this.foobar = 1
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1075,7 +1076,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      this.foobar = 1
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1084,9 +1085,9 @@ describe('inject', () => {
     props: ['a', 'b'],
     created() {
       //  @ts-expect-error
-      this.foo = 1
+      expectError((this.foo = 1))
       //  @ts-expect-error
-      this.bar = 1
+      expectError((this.bar = 1))
     }
   })
 })
@@ -1188,6 +1189,118 @@ describe('async setup', () => {
   vm.a = 2
 })
 
+describe('define attrs', () => {
+  test('define attrs w/ object props', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    const MyComp = defineComponent(
+      {
+        props: {
+          foo: String
+        },
+        attrs: Object as AttrsType<CompAttrs>,
+        created() {
+          expectType<CompAttrs['bar']>(this.$attrs.bar)
+          expectType<CompAttrs['baz']>(this.$attrs.baz)
+        }
+      }
+    )
+    expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
+  })
+
+  test('define attrs w/ array props', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    const MyComp = defineComponent(
+      {
+        props: ['foo'],
+        attrs: Object as AttrsType<CompAttrs>,
+        created() {
+          expectType<CompAttrs['bar']>(this.$attrs.bar)
+          expectType<CompAttrs['baz']>(this.$attrs.baz)
+        }
+      }
+    )
+    expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
+  })
+
+  test('define attrs w/ no props', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    const MyComp = defineComponent(
+      {
+        attrs: Object as AttrsType<CompAttrs>,
+        created() {
+          expectType<CompAttrs['bar']>(this.$attrs.bar)
+          expectType<CompAttrs['baz']>(this.$attrs.baz)
+        }
+      }
+    )
+    expectType<JSX.Element>(<MyComp bar={1} />)
+  })
+
+  test('define attrs w/ function component', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    const MyComp = defineComponent(
+      (props: { foo: string }, ctx) => {
+        expectType<number>(ctx.attrs.bar)
+        expectType<CompAttrs['bar']>(ctx.attrs.bar)
+        expectType<CompAttrs['baz']>(ctx.attrs.baz)
+        return () => (
+          // return a render function (both JSX and h() works)
+          <div>
+            {props.foo}
+          </div>
+        )
+      }, {
+        attrs: Object as AttrsType<CompAttrs>
+      }
+    )
+    expectType<JSX.Element>(<MyComp foo={'1'} bar={1} />)
+  })
+
+  test('define attrs as low priority', () => {
+    type CompAttrs = {
+      foo: number
+    }
+    const MyComp = defineComponent(
+      {
+        props: {
+          foo: String
+        },
+        attrs: Object as AttrsType<CompAttrs>,
+        created() {
+          // @ts-expect-error
+          console.log(this.$attrs.foo)
+        }
+      }
+    )
+    expectType<JSX.Element>(<MyComp foo="1" />)
+  })
+
+  test('define attrs w/ default attrs such as class, style', () => {
+    const MyComp = defineComponent({
+      props: {
+        foo: String
+      },
+      created() {
+        expectType<unknown>(this.$attrs.class)
+        expectType<unknown>(this.$attrs.style)
+      }
+    })
+    expectType<JSX.Element>(<MyComp class="1" style={1} />)
+  })
+})
+
 // #5948
 describe('DefineComponent should infer correct types when assigning to Component', () => {
   let component: Component
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 272bb548751..26be3fe89be 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -8,7 +8,9 @@ import {
   RenderFunction,
   ComponentOptionsBase,
   ComponentInjectOptions,
-  ComponentOptions
+  ComponentOptions,
+  AttrsType,
+  UnwrapAttrsType
 } from './componentOptions'
 import {
   SetupContext,
@@ -54,7 +56,8 @@ export type DefineComponent<
   PP = PublicProps,
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {},
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
@@ -69,7 +72,8 @@ export type DefineComponent<
     Defaults,
     true,
     {},
-    S
+    S,
+    Attrs
   > &
     Props
 > &
@@ -86,7 +90,8 @@ export type DefineComponent<
     Defaults,
     {},
     string,
-    S
+    S,
+    Attrs
   > &
   PP
 
@@ -101,18 +106,20 @@ export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 >(
   setup: (
     props: Props,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S, Attrs>
   ) => RenderFunction | Promise<RenderFunction>,
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: (keyof Props)[]
     emits?: E | EE[]
-    slots?: S
+    slots?: S,
+    attrs?: Attrs
   }
-): (props: Props & EmitsToProps<E>) => any
+): (props: Props & EmitsToProps<E> & UnwrapAttrsType<Attrs>) => any
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
@@ -144,10 +151,11 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
+  Attrs extends AttrsType = {},
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
 >(
-  options: ComponentOptionsWithoutProps<
+  comp: ComponentOptionsWithoutProps<
     Props,
     RawBindings,
     D,
@@ -159,7 +167,8 @@ export function defineComponent<
     EE,
     I,
     II,
-    S
+    S,
+    Attrs
   >
 ): DefineComponent<
   Props,
@@ -174,7 +183,8 @@ export function defineComponent<
   PublicProps,
   ResolveProps<Props, E>,
   ExtractDefaultPropTypes<Props>,
-  S
+  S,
+  Attrs
 >
 
 // overload 3: object format with array props declaration
@@ -191,11 +201,12 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
+  Attrs extends AttrsType = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
   Props = Readonly<{ [key in PropNames]?: any }>
 >(
-  options: ComponentOptionsWithArrayProps<
+  comp: ComponentOptionsWithArrayProps<
     PropNames,
     RawBindings,
     D,
@@ -207,7 +218,8 @@ export function defineComponent<
     EE,
     I,
     II,
-    S
+    S,
+    Attrs
   >
 ): DefineComponent<
   Props,
@@ -222,7 +234,8 @@ export function defineComponent<
   PublicProps,
   ResolveProps<Props, E>,
   ExtractDefaultPropTypes<Props>,
-  S
+  S,
+  Attrs
 >
 
 // overload 4: object format with object props declaration
@@ -241,9 +254,10 @@ export function defineComponent<
   EE extends string = string,
   S extends SlotsType = {},
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
+  Attrs extends AttrsType = {}
 >(
-  options: ComponentOptionsWithObjectProps<
+  comp: ComponentOptionsWithObjectProps<
     PropsOptions,
     RawBindings,
     D,
@@ -255,7 +269,8 @@ export function defineComponent<
     EE,
     I,
     II,
-    S
+    S,
+    Attrs
   >
 ): DefineComponent<
   PropsOptions,
@@ -270,7 +285,8 @@ export function defineComponent<
   PublicProps,
   ResolveProps<PropsOptions, E>,
   ExtractDefaultPropTypes<PropsOptions>,
-  S
+  S,
+  Attrs
 >
 
 // implementation, close to no-op
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 93200667081..4256a588a7c 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -11,7 +11,8 @@ import {
   setCurrentInstance,
   SetupContext,
   createSetupContext,
-  unsetCurrentInstance
+  unsetCurrentInstance,
+  Data
 } from './component'
 import { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 import {
@@ -349,8 +350,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
 }
 
 export function useModel<T extends Record<string, any>, K extends keyof T>(
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 57a53a39b76..3096236167f 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -40,10 +40,12 @@ import { AppContext, createAppContext, AppConfig } from './apiCreateApp'
 import { Directive, validateDirectiveName } from './directives'
 import {
   applyOptions,
+  AttrsType,
   ComponentOptions,
   ComputedOptions,
   MethodOptions,
-  resolveMergedOptions
+  resolveMergedOptions,
+  UnwrapAttrsType
 } from './componentOptions'
 import {
   EmitsOptions,
@@ -184,10 +186,11 @@ type LifecycleHook<TFn = Function> = TFn[] | null
 // use `E extends any` to force evaluating type to fix #2362
 export type SetupContext<
   E = EmitsOptions,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 > = E extends any
   ? {
-      attrs: Data
+      attrs: UnwrapAttrsType<Attrs>,
       slots: UnwrapSlotsType<S>
       emit: EmitFn<E>
       expose: (exposed?: Record<string, any>) => void
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index de4d304448a..c250b857d00 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -111,7 +111,8 @@ export interface ComponentOptionsBase<
   Defaults = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 > extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II>,
     ComponentInternalOptions,
     ComponentCustomOptions {
@@ -141,6 +142,7 @@ export interface ComponentOptionsBase<
   inheritAttrs?: boolean
   emits?: (E | EE[]) & ThisType<void>
   slots?: S
+  attrs?: Attrs
   // TODO infer public instance type based on exposed keys
   expose?: string[]
   serverPrefetch?(): void | Promise<any>
@@ -224,6 +226,7 @@ export type ComponentOptionsWithoutProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
+  Attrs extends AttrsType = {},
   PE = Props & EmitsToProps<E>
 > = ComponentOptionsBase<
   PE,
@@ -238,7 +241,8 @@ export type ComponentOptionsWithoutProps<
   {},
   I,
   II,
-  S
+  S,
+  Attrs
 > & {
   props?: undefined
 } & ThisType<
@@ -255,7 +259,8 @@ export type ComponentOptionsWithoutProps<
       {},
       false,
       I,
-      S
+      S,
+      Attrs
     >
   >
 
@@ -272,6 +277,7 @@ export type ComponentOptionsWithArrayProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
+  Attrs extends AttrsType = {},
   Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>
 > = ComponentOptionsBase<
   Props,
@@ -286,7 +292,8 @@ export type ComponentOptionsWithArrayProps<
   {},
   I,
   II,
-  S
+  S,
+  Attrs
 > & {
   props: PropNames[]
 } & ThisType<
@@ -303,7 +310,8 @@ export type ComponentOptionsWithArrayProps<
       {},
       false,
       I,
-      S
+      S,
+      Attrs
     >
   >
 
@@ -320,6 +328,7 @@ export type ComponentOptionsWithObjectProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
+  Attrs extends AttrsType = {},
   Props = Prettify<Readonly<ExtractPropTypes<PropsOptions> & EmitsToProps<E>>>,
   Defaults = ExtractDefaultPropTypes<PropsOptions>
 > = ComponentOptionsBase<
@@ -335,7 +344,8 @@ export type ComponentOptionsWithObjectProps<
   Defaults,
   I,
   II,
-  S
+  S,
+  Attrs
 > & {
   props: PropsOptions & ThisType<void>
 } & ThisType<
@@ -352,7 +362,8 @@ export type ComponentOptionsWithObjectProps<
       Defaults,
       false,
       I,
-      S
+      S,
+      Attrs
     >
   >
 
@@ -406,6 +417,23 @@ export type ComponentOptionsMixin = ComponentOptionsBase<
   any
 >
 
+declare const AttrSymbol: unique symbol
+export type AttrsType<T extends Record<string, any> = Record<string, any>> = {
+  [AttrSymbol]?: T
+}
+export type UnwrapAttrsType<
+  S extends AttrsType,
+  T = NonNullable<S[typeof AttrSymbol]>
+> = [keyof S] extends [never]
+  ? Data
+  : Readonly<
+      Prettify<{
+        [K in keyof T]: NonNullable<T[K]> extends (...args: any[]) => any
+          ? T[K]
+          : T[K]
+      }>
+    >
+
 export type ComputedOptions = Record<
   string,
   ComputedGetter<any> | WritableComputedOptions<any>
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 7b552c8f92a..2643e27fb4b 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,4 +1,5 @@
 import {
+  AllowedComponentProps,
   ComponentInternalInstance,
   Data,
   getExposeProxy,
@@ -37,7 +38,9 @@ import {
   shouldCacheAccess,
   MergedComponentOptionsOverride,
   InjectToObject,
-  ComponentInjectOptions
+  ComponentInjectOptions,
+  AttrsType,
+  UnwrapAttrsType
 } from './componentOptions'
 import { EmitsOptions, EmitFn } from './componentEmits'
 import { SlotsType, UnwrapSlotsType } from './componentSlots'
@@ -149,6 +152,7 @@ export type CreateComponentPublicInstance<
   MakeDefaultsOptional extends boolean = false,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
+  Attrs extends AttrsType = {},
   PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
   PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
   PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
@@ -182,10 +186,12 @@ export type CreateComponentPublicInstance<
     Defaults,
     {},
     string,
-    S
+    S,
+    Attrs
   >,
   I,
-  S
+  S,
+  Attrs
 >
 
 // public properties exposed on the proxy, which is used as the render context
@@ -202,14 +208,17 @@ export type ComponentPublicInstance<
   MakeDefaultsOptional extends boolean = false,
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 > = {
   $: ComponentInternalInstance
   $data: D
-  $props: MakeDefaultsOptional extends true
-    ? Partial<Defaults> & Omit<Prettify<P> & PublicProps, keyof Defaults>
-    : Prettify<P> & PublicProps
-  $attrs: Data
+  $props: Prettify<
+    MakeDefaultsOptional extends true
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
+      : P & PublicProps & Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
+  >
+  $attrs: Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> & AllowedComponentProps
   $refs: Data
   $slots: UnwrapSlotsType<S>
   $root: ComponentPublicInstance | null
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 85bd92e75b0..9fae025d70e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -246,7 +246,8 @@ export type {
   MethodOptions,
   ComputedOptions,
   RuntimeCompilerOptions,
-  ComponentInjectOptions
+  ComponentInjectOptions,
+  AttrsType
 } from './componentOptions'
 export type { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 export type {

From e874c4f1a60d23cb6b21a66571a1efdd7c161c64 Mon Sep 17 00:00:00 2001
From: rudy-xhd <xuhaodong66@foxmail.com>
Date: Sun, 1 Jan 2023 12:50:12 +0800
Subject: [PATCH 02/20] feat(compiler-sfc): `useAttrs` support generic type

---
 .../__snapshots__/compileScript.spec.ts.snap  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 949c9946d9f..2465105a8cb 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1237,6 +1237,39 @@ return { get aa() { return aa }, set aa(v) { aa = v }, bb, cc, dd, get a() { ret
 }"
 `;
 
+exports[`SFC compile <script setup> > useAttrs w/ generic type 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { useAttrs, ref} from 'vue'
+      
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose }) {
+  expose();
+
+      const attrs = useAttrs<{ foo: number }>()
+      
+return { attrs, useAttrs, ref }
+}
+
+}, { attrs: {} as { foo: number }})"
+`;
+
+exports[`SFC compile <script setup> > useAttrs w/ type reference 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { useAttrs, ref} from 'vue'
+      type CompAttrs = { foo: number }
+      
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose }) {
+  expose();
+
+      const attrs = useAttrs<CompAttrs>()
+      
+return { attrs, useAttrs, ref }
+}
+
+}, { attrs: {} as { foo: number }})"
+`;
+
 exports[`SFC compile <script setup> > with TypeScript > const Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 const enum Foo { A = 123 }

From f0e653a331e3cbd2928aff60f8a3617ac590bb91 Mon Sep 17 00:00:00 2001
From: rudy-xhd <xuhaodong66@foxmail.com>
Date: Sun, 1 Jan 2023 23:21:59 +0800
Subject: [PATCH 03/20] feat(types): infer attrs in `defineCustomElement`

---
 .../dts-test/defineCustomElement.test-d.ts    | 124 +++++++++++++++++-
 packages/runtime-core/src/vnode.ts            |   9 +-
 .../__tests__/customElement.spec.ts           |  13 +-
 packages/runtime-dom/src/apiCustomElement.ts  |  21 +--
 4 files changed, 142 insertions(+), 25 deletions(-)

diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 4e7cf228372..82bb261fc3f 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -1,5 +1,9 @@
-import { defineCustomElement } from 'vue'
-import { expectType, describe } from './utils'
+import {
+  defineCustomElement,
+  expectType,
+  expectError,
+  SetupContext
+} from './index'
 
 describe('inject', () => {
   // with object inject
@@ -15,7 +19,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      this.foobar = 1
+      expectError((this.foobar = 1))
     }
   })
 
@@ -27,7 +31,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      this.foobar = 1
+      expectError((this.foobar = 1))
     }
   })
 
@@ -47,7 +51,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      this.foobar = 1
+      expectError((this.foobar = 1))
     }
   })
 
@@ -56,9 +60,115 @@ describe('inject', () => {
     props: ['a', 'b'],
     created() {
       //  @ts-expect-error
-      this.foo = 1
+      expectError((this.foo = 1))
       //  @ts-expect-error
-      this.bar = 1
+      expectError((this.bar = 1))
     }
   })
 })
+
+describe('define attrs', () => {
+  test('define attrs w/ object props', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    defineCustomElement(
+      {
+        props: {
+          foo: String
+        },
+        created() {
+          expectType<number>(this.$attrs.bar)
+          expectType<string | undefined>(this.$attrs.baz)
+        }
+      },
+      {
+        attrs: {} as CompAttrs
+      }
+    )
+  })
+
+  test('define attrs w/ array props', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    defineCustomElement(
+      {
+        props: ['foo'],
+        created() {
+          expectType<number>(this.$attrs.bar)
+          expectType<string | undefined>(this.$attrs.baz)
+        }
+      },
+      {
+        attrs: {} as CompAttrs
+      }
+    )
+  })
+
+  test('define attrs w/ no props', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    defineCustomElement(
+      {
+        created() {
+          expectType<number>(this.$attrs.bar)
+          expectType<string | undefined>(this.$attrs.baz)
+        }
+      },
+      {
+        attrs: {} as CompAttrs
+      }
+    )
+  })
+
+  test('define attrs w/ function component', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    defineCustomElement(
+      (_props: { foo: string }, ctx: SetupContext<{}, CompAttrs>) => {
+        expectType<number>(ctx.attrs.bar)
+        expectType<number>(ctx.attrs.bar)
+        expectType<string | undefined>(ctx.attrs.baz)
+      }
+    )
+  })
+
+  test('define attrs as low priority', () => {
+    type CompAttrs = {
+      foo: number
+    }
+    defineCustomElement(
+      {
+        props: {
+          foo: String
+        },
+        created() {
+          // @ts-expect-error
+          console.log(this.$attrs.foo)
+        }
+      },
+      {
+        attrs: {} as CompAttrs
+      }
+    )
+  })
+
+  test('define attrs w/ default attrs such as class, style', () => {
+    defineCustomElement({
+      props: {
+        foo: String
+      },
+      created() {
+        expectType<unknown>(this.$attrs.class)
+        expectType<unknown>(this.$attrs.style)
+      }
+    })
+  })
+})
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index f8cf6652d31..d94c2f576f3 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -18,7 +18,8 @@ import {
   ConcreteComponent,
   ClassComponent,
   Component,
-  isClassComponent
+  isClassComponent,
+  AllowedComponentProps
 } from './component'
 import { RawSlots } from './componentSlots'
 import { isProxy, Ref, toRaw, ReactiveFlags, isRef } from '@vue/reactivity'
@@ -816,7 +817,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
   vnode.shapeFlag |= type
 }
 
-export function mergeProps(...args: (Data & VNodeProps)[]) {
+export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
   const ret: Data = {}
   for (let i = 0; i < args.length; i++) {
     const toMerge = args[i]
@@ -829,7 +830,7 @@ export function mergeProps(...args: (Data & VNodeProps)[]) {
         ret.style = normalizeStyle([ret.style, toMerge.style])
       } else if (isOn(key)) {
         const existing = ret[key]
-        const incoming = toMerge[key]
+        const incoming = (toMerge as Data)[key]
         if (
           incoming &&
           existing !== incoming &&
@@ -840,7 +841,7 @@ export function mergeProps(...args: (Data & VNodeProps)[]) {
             : incoming
         }
       } else if (key !== '') {
-        ret[key] = toMerge[key]
+        ret[key] = (toMerge as Data)[key]
       }
     }
   }
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 6ccf02c4fa6..1cbbb08dbd3 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -286,11 +286,14 @@ describe('defineCustomElement', () => {
   })
 
   describe('attrs', () => {
-    const E = defineCustomElement({
-      render() {
-        return [h('div', null, this.$attrs.foo as string)]
-      }
-    })
+    const E = defineCustomElement(
+      {
+        render() {
+          return [h('div', null, this.$attrs.foo)]
+        }
+      },
+      { attrs: {} as { foo: string } }
+    )
     customElements.define('my-el-attrs', E)
 
     test('attrs via attribute', async () => {
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 5662b0b535b..9f870f49b3e 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -34,10 +34,10 @@ export type VueElementConstructor<P = {}> = {
 // so most of the following overloads should be kept in sync w/ defineComponent.
 
 // overload 1: direct setup function
-export function defineCustomElement<Props, RawBindings = object>(
+export function defineCustomElement<Props, RawBindings = object, Attrs = {}>(
   setup: (
     props: Readonly<Props>,
-    ctx: SetupContext
+    ctx: SetupContext<{}, Attrs>
   ) => RawBindings | RenderFunction
 ): VueElementConstructor<Props>
 
@@ -56,7 +56,7 @@ export function defineCustomElement<
   II extends string = string,
   S extends SlotsType = {}
 >(
-  options: ComponentOptionsWithoutProps<
+  comp: ComponentOptionsWithoutProps<
     Props,
     RawBindings,
     D,
@@ -87,7 +87,7 @@ export function defineCustomElement<
   II extends string = string,
   S extends SlotsType = {}
 >(
-  options: ComponentOptionsWithArrayProps<
+  comp: ComponentOptionsWithArrayProps<
     PropNames,
     RawBindings,
     D,
@@ -118,7 +118,7 @@ export function defineCustomElement<
   II extends string = string,
   S extends SlotsType = {}
 >(
-  options: ComponentOptionsWithObjectProps<
+  comp: ComponentOptionsWithObjectProps<
     PropsOptions,
     RawBindings,
     D,
@@ -142,14 +142,17 @@ export function defineCustomElement(options: {
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(
-  options: any,
-  hydrate?: RootHydrateFunction
+  comp: any,
+  options?: {
+    hydrate?: RootHydrateFunction
+    attrs?: any
+  }
 ): VueElementConstructor {
   const Comp = defineComponent(options) as any
   class VueCustomElement extends VueElement {
     static def = Comp
     constructor(initialProps?: Record<string, any>) {
-      super(Comp, initialProps, hydrate)
+      super(Comp, initialProps, options?.hydrate)
     }
   }
 
@@ -159,7 +162,7 @@ export function defineCustomElement(
 /*! #__NO_SIDE_EFFECTS__ */
 export const defineSSRCustomElement = ((options: any) => {
   // @ts-ignore
-  return defineCustomElement(options, hydrate)
+  return defineCustomElement(options, { hydrate })
 }) as typeof defineCustomElement
 
 const BaseClass = (

From 0ebfac759002cc1aa405d3e7a1bc708c5e6856bb Mon Sep 17 00:00:00 2001
From: rudy-xhd <xuhaodong66@foxmail.com>
Date: Tue, 3 Jan 2023 23:01:28 +0800
Subject: [PATCH 04/20] fix(types): infer `setup` attrs

---
 packages/dts-test/defineComponent.test-d.tsx  | 28 ++++++++++++++++++-
 packages/runtime-core/src/componentOptions.ts |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 073020af3fc..97b9fc691a1 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1245,7 +1245,33 @@ describe('define attrs', () => {
     expectType<JSX.Element>(<MyComp bar={1} />)
   })
 
-  test('define attrs w/ function component', () => {
+  test('define attrs w/ composition api', () => {
+    type CompAttrs = {
+      bar: number
+      baz?: string
+    }
+    const MyComp = defineComponent(
+      {
+        props: {
+          foo: {
+            type: String,
+            required: true
+          }
+        },
+        setup(props, { attrs }) {
+          expectType<string>(props.foo)
+          expectType<number>(attrs.bar)
+          expectType<string | undefined>(attrs.baz)
+        }
+      },
+      {
+        attrs: {} as CompAttrs
+      }
+    )
+    expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
+  })
+
+  test('define attrs w/ functional component', () => {
     type CompAttrs = {
       bar: number
       baz?: string
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index c250b857d00..555018cde43 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -127,7 +127,7 @@ export interface ComponentOptionsBase<
           >
         >
     >,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S, Attrs>
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
   name?: string
   template?: string | object // can be a direct DOM node

From 2011b3ad8cc0db8a62751e68f2a0bd7a41f972d2 Mon Sep 17 00:00:00 2001
From: rudy-xhd <xuhaodong66@foxmail.com>
Date: Wed, 4 Jan 2023 23:55:49 +0800
Subject: [PATCH 05/20] fix(types): attrs default type

---
 packages/dts-test/defineComponent.test-d.tsx    | 13 -------------
 packages/dts-test/defineCustomElement.test-d.ts | 12 ------------
 2 files changed, 25 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 97b9fc691a1..d31c47e6f12 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1312,19 +1312,6 @@ describe('define attrs', () => {
     )
     expectType<JSX.Element>(<MyComp foo="1" />)
   })
-
-  test('define attrs w/ default attrs such as class, style', () => {
-    const MyComp = defineComponent({
-      props: {
-        foo: String
-      },
-      created() {
-        expectType<unknown>(this.$attrs.class)
-        expectType<unknown>(this.$attrs.style)
-      }
-    })
-    expectType<JSX.Element>(<MyComp class="1" style={1} />)
-  })
 })
 
 // #5948
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 82bb261fc3f..90a6630ccbb 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -159,16 +159,4 @@ describe('define attrs', () => {
       }
     )
   })
-
-  test('define attrs w/ default attrs such as class, style', () => {
-    defineCustomElement({
-      props: {
-        foo: String
-      },
-      created() {
-        expectType<unknown>(this.$attrs.class)
-        expectType<unknown>(this.$attrs.style)
-      }
-    })
-  })
 })

From 9ab57a6f2665f8a092e5b7483b1d2acf620f7df3 Mon Sep 17 00:00:00 2001
From: rudy-xhd <xuhaodong66@foxmail.com>
Date: Thu, 5 Jan 2023 22:03:39 +0800
Subject: [PATCH 06/20] chore: improve code

---
 packages/runtime-core/src/componentPublicInstance.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 2643e27fb4b..faa12b36449 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,5 +1,4 @@
 import {
-  AllowedComponentProps,
   ComponentInternalInstance,
   Data,
   getExposeProxy,

From 091559ac720e53b2be34822a48a72ad97f3eecf1 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Wed, 30 Aug 2023 20:53:34 +0800
Subject: [PATCH 07/20] chore: improve code

---
 packages/dts-test/defineComponent.test-d.tsx  | 118 +++++++++---------
 .../dts-test/defineCustomElement.test-d.ts    |  87 ++++++-------
 .../runtime-core/src/apiDefineComponent.ts    |  19 +--
 packages/runtime-core/src/componentOptions.ts |   4 +-
 .../src/componentPublicInstance.ts            |  19 ++-
 .../__tests__/customElement.spec.ts           |  15 ++-
 packages/runtime-dom/src/apiCustomElement.ts  |  43 ++++---
 7 files changed, 156 insertions(+), 149 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index d31c47e6f12..6ee05a1b310 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -14,7 +14,7 @@ import {
   Slots,
   VNode
 } from 'vue'
-import { describe, expectType, IsUnion } from './utils'
+import { describe, expectType, IsUnion, test } from './utils'
 
 describe('with object props', () => {
   interface ExpectedProps {
@@ -1195,18 +1195,16 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    const MyComp = defineComponent(
-      {
-        props: {
-          foo: String
-        },
-        attrs: Object as AttrsType<CompAttrs>,
-        created() {
-          expectType<CompAttrs['bar']>(this.$attrs.bar)
-          expectType<CompAttrs['baz']>(this.$attrs.baz)
-        }
+    const MyComp = defineComponent({
+      props: {
+        foo: String
+      },
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        expectType<CompAttrs['bar']>(this.$attrs.bar)
+        expectType<CompAttrs['baz']>(this.$attrs.baz)
       }
-    )
+    })
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
@@ -1215,16 +1213,14 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    const MyComp = defineComponent(
-      {
-        props: ['foo'],
-        attrs: Object as AttrsType<CompAttrs>,
-        created() {
-          expectType<CompAttrs['bar']>(this.$attrs.bar)
-          expectType<CompAttrs['baz']>(this.$attrs.baz)
-        }
+    const MyComp = defineComponent({
+      props: ['foo'],
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        expectType<CompAttrs['bar']>(this.$attrs.bar)
+        expectType<CompAttrs['baz']>(this.$attrs.baz)
       }
-    )
+    })
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
@@ -1233,15 +1229,13 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    const MyComp = defineComponent(
-      {
-        attrs: Object as AttrsType<CompAttrs>,
-        created() {
-          expectType<CompAttrs['bar']>(this.$attrs.bar)
-          expectType<CompAttrs['baz']>(this.$attrs.baz)
-        }
+    const MyComp = defineComponent({
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        expectType<CompAttrs['bar']>(this.$attrs.bar)
+        expectType<CompAttrs['baz']>(this.$attrs.baz)
       }
-    )
+    })
     expectType<JSX.Element>(<MyComp bar={1} />)
   })
 
@@ -1250,24 +1244,20 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    const MyComp = defineComponent(
-      {
-        props: {
-          foo: {
-            type: String,
-            required: true
-          }
-        },
-        setup(props, { attrs }) {
-          expectType<string>(props.foo)
-          expectType<number>(attrs.bar)
-          expectType<string | undefined>(attrs.baz)
+    const MyComp = defineComponent({
+      props: {
+        foo: {
+          type: String,
+          required: true
         }
       },
-      {
-        attrs: {} as CompAttrs
+      attrs: Object as AttrsType<CompAttrs>,
+      setup(props, { attrs }) {
+        expectType<string>(props.foo)
+        expectType<number>(attrs.bar)
+        expectType<string | undefined>(attrs.baz)
       }
-    )
+    })
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
@@ -1283,11 +1273,10 @@ describe('define attrs', () => {
         expectType<CompAttrs['baz']>(ctx.attrs.baz)
         return () => (
           // return a render function (both JSX and h() works)
-          <div>
-            {props.foo}
-          </div>
+          <div>{props.foo}</div>
         )
-      }, {
+      },
+      {
         attrs: Object as AttrsType<CompAttrs>
       }
     )
@@ -1298,20 +1287,31 @@ describe('define attrs', () => {
     type CompAttrs = {
       foo: number
     }
-    const MyComp = defineComponent(
-      {
-        props: {
-          foo: String
-        },
-        attrs: Object as AttrsType<CompAttrs>,
-        created() {
-          // @ts-expect-error
-          console.log(this.$attrs.foo)
-        }
+    const MyComp = defineComponent({
+      props: {
+        foo: String
+      },
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        // @ts-expect-error
+        console.log(this.$attrs.foo)
       }
-    )
+    })
     expectType<JSX.Element>(<MyComp foo="1" />)
   })
+
+  test('define attrs w/ no attrs', () => {
+    const MyComp = defineComponent({
+      props: {
+        foo: String
+      },
+      created() {
+        expectType<unknown>(this.$attrs.bar)
+      }
+    })
+    // @ts-expect-error
+    expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
+  })
 })
 
 // #5948
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 90a6630ccbb..362deca2164 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -1,9 +1,5 @@
-import {
-  defineCustomElement,
-  expectType,
-  expectError,
-  SetupContext
-} from './index'
+import { defineCustomElement, AttrsType } from 'vue'
+import { describe, expectType, test } from './utils'
 
 describe('inject', () => {
   // with object inject
@@ -73,20 +69,16 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    defineCustomElement(
-      {
-        props: {
-          foo: String
-        },
-        created() {
-          expectType<number>(this.$attrs.bar)
-          expectType<string | undefined>(this.$attrs.baz)
-        }
+    defineCustomElement({
+      props: {
+        foo: String
       },
-      {
-        attrs: {} as CompAttrs
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        expectType<number>(this.$attrs.bar)
+        expectType<string | undefined>(this.$attrs.baz)
       }
-    )
+    })
   })
 
   test('define attrs w/ array props', () => {
@@ -94,18 +86,14 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    defineCustomElement(
-      {
-        props: ['foo'],
-        created() {
-          expectType<number>(this.$attrs.bar)
-          expectType<string | undefined>(this.$attrs.baz)
-        }
-      },
-      {
-        attrs: {} as CompAttrs
+    defineCustomElement({
+      props: ['foo'],
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        expectType<number>(this.$attrs.bar)
+        expectType<string | undefined>(this.$attrs.baz)
       }
-    )
+    })
   })
 
   test('define attrs w/ no props', () => {
@@ -113,17 +101,13 @@ describe('define attrs', () => {
       bar: number
       baz?: string
     }
-    defineCustomElement(
-      {
-        created() {
-          expectType<number>(this.$attrs.bar)
-          expectType<string | undefined>(this.$attrs.baz)
-        }
-      },
-      {
-        attrs: {} as CompAttrs
+    defineCustomElement({
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        expectType<number>(this.$attrs.bar)
+        expectType<string | undefined>(this.$attrs.baz)
       }
-    )
+    })
   })
 
   test('define attrs w/ function component', () => {
@@ -132,10 +116,13 @@ describe('define attrs', () => {
       baz?: string
     }
     defineCustomElement(
-      (_props: { foo: string }, ctx: SetupContext<{}, CompAttrs>) => {
+      (_props: { foo: string }, ctx) => {
         expectType<number>(ctx.attrs.bar)
         expectType<number>(ctx.attrs.bar)
         expectType<string | undefined>(ctx.attrs.baz)
+      },
+      {
+        attrs: Object as AttrsType<CompAttrs>
       }
     )
   })
@@ -144,19 +131,15 @@ describe('define attrs', () => {
     type CompAttrs = {
       foo: number
     }
-    defineCustomElement(
-      {
-        props: {
-          foo: String
-        },
-        created() {
-          // @ts-expect-error
-          console.log(this.$attrs.foo)
-        }
+    defineCustomElement({
+      props: {
+        foo: String
       },
-      {
-        attrs: {} as CompAttrs
+      attrs: Object as AttrsType<CompAttrs>,
+      created() {
+        // @ts-expect-error
+        console.log(this.$attrs.foo)
       }
-    )
+    })
   })
 })
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 26be3fe89be..067b6a0effa 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -15,7 +15,8 @@ import {
 import {
   SetupContext,
   AllowedComponentProps,
-  ComponentCustomProps
+  ComponentCustomProps,
+  Data
 } from './component'
 import {
   ExtractPropTypes,
@@ -28,7 +29,8 @@ import { extend, isFunction } from '@vue/shared'
 import { VNodeProps } from './vnode'
 import {
   CreateComponentPublicInstance,
-  ComponentPublicInstanceConstructor
+  ComponentPublicInstanceConstructor,
+  IsSameType
 } from './componentPublicInstance'
 import { SlotsType } from './componentSlots'
 
@@ -57,7 +59,7 @@ export type DefineComponent<
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType = {}
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
@@ -107,7 +109,10 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType = {},
+  PropsAttrs = IsSameType<Data, UnwrapAttrsType<Attrs>> extends true
+    ? {}
+    : UnwrapAttrsType<Attrs>
 >(
   setup: (
     props: Props,
@@ -116,10 +121,10 @@ export function defineComponent<
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: (keyof Props)[]
     emits?: E | EE[]
-    slots?: S,
+    slots?: S
     attrs?: Attrs
   }
-): (props: Props & EmitsToProps<E> & UnwrapAttrsType<Attrs>) => any
+): (props: Props & EmitsToProps<E> & PropsAttrs) => any
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
@@ -153,7 +158,7 @@ export function defineComponent<
   S extends SlotsType = {},
   Attrs extends AttrsType = {},
   I extends ComponentInjectOptions = {},
-  II extends string = string,
+  II extends string = string
 >(
   comp: ComponentOptionsWithoutProps<
     Props,
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 555018cde43..d64d8e12b04 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -428,9 +428,7 @@ export type UnwrapAttrsType<
   ? Data
   : Readonly<
       Prettify<{
-        [K in keyof T]: NonNullable<T[K]> extends (...args: any[]) => any
-          ? T[K]
-          : T[K]
+        [K in keyof T]: T[K]
       }>
     >
 
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index faa12b36449..2220b5feb39 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,4 +1,5 @@
 import {
+  AllowedComponentProps,
   ComponentInternalInstance,
   Data,
   getExposeProxy,
@@ -193,6 +194,12 @@ export type CreateComponentPublicInstance<
   Attrs
 >
 
+export type IsSameType<T, U> = T extends U
+  ? U extends T
+    ? true
+    : false
+  : false
+
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -208,16 +215,20 @@ export type ComponentPublicInstance<
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType = {},
+  PropsAttrs = IsSameType<UnwrapAttrsType<Attrs>, Data> extends true
+    ? {}
+    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
 > = {
   $: ComponentInternalInstance
   $data: D
   $props: Prettify<
     MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
-      : P & PublicProps & Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & PropsAttrs
+      : P & PublicProps & PropsAttrs
   >
-  $attrs: Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> & AllowedComponentProps
+  $attrs: Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
+    AllowedComponentProps
   $refs: Data
   $slots: UnwrapSlotsType<S>
   $root: ComponentPublicInstance | null
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 1cbbb08dbd3..ea1af5e594c 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1,4 +1,5 @@
 import {
+  AttrsType,
   defineAsyncComponent,
   defineComponent,
   defineCustomElement,
@@ -286,14 +287,12 @@ describe('defineCustomElement', () => {
   })
 
   describe('attrs', () => {
-    const E = defineCustomElement(
-      {
-        render() {
-          return [h('div', null, this.$attrs.foo)]
-        }
-      },
-      { attrs: {} as { foo: string } }
-    )
+    const E = defineCustomElement({
+      attrs: Object as AttrsType<{ foo: string }>,
+      render() {
+        return [h('div', null, this.$attrs.foo)]
+      }
+    })
     customElements.define('my-el-attrs', E)
 
     test('attrs via attribute', async () => {
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 9f870f49b3e..89c7ad65ca6 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -21,7 +21,8 @@ import {
   ConcreteComponent,
   ComponentOptions,
   ComponentInjectOptions,
-  SlotsType
+  SlotsType,
+  AttrsType
 } from '@vue/runtime-core'
 import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
 import { hydrate, render } from '.'
@@ -34,11 +35,18 @@ export type VueElementConstructor<P = {}> = {
 // so most of the following overloads should be kept in sync w/ defineComponent.
 
 // overload 1: direct setup function
-export function defineCustomElement<Props, RawBindings = object, Attrs = {}>(
+export function defineCustomElement<
+  Props,
+  RawBindings = object,
+  Attrs extends AttrsType = {}
+>(
   setup: (
     props: Readonly<Props>,
-    ctx: SetupContext<{}, Attrs>
-  ) => RawBindings | RenderFunction
+    ctx: SetupContext<{}, {}, Attrs>
+  ) => RawBindings | RenderFunction,
+  options?: {
+    attrs?: Attrs
+  }
 ): VueElementConstructor<Props>
 
 // overload 2: object format with no props
@@ -54,7 +62,8 @@ export function defineCustomElement<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 >(
   comp: ComponentOptionsWithoutProps<
     Props,
@@ -68,7 +77,8 @@ export function defineCustomElement<
     EE,
     I,
     II,
-    S
+    S,
+    Attrs
   > & { styles?: string[] }
 ): VueElementConstructor<Props>
 
@@ -85,7 +95,8 @@ export function defineCustomElement<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 >(
   comp: ComponentOptionsWithArrayProps<
     PropNames,
@@ -99,7 +110,8 @@ export function defineCustomElement<
     EE,
     I,
     II,
-    S
+    S,
+    Attrs
   > & { styles?: string[] }
 ): VueElementConstructor<{ [K in PropNames]: any }>
 
@@ -116,7 +128,8 @@ export function defineCustomElement<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Attrs extends AttrsType = {}
 >(
   comp: ComponentOptionsWithObjectProps<
     PropsOptions,
@@ -130,7 +143,8 @@ export function defineCustomElement<
     EE,
     I,
     II,
-    S
+    S,
+    Attrs
   > & { styles?: string[] }
 ): VueElementConstructor<ExtractPropTypes<PropsOptions>>
 
@@ -142,17 +156,14 @@ export function defineCustomElement(options: {
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(
-  comp: any,
-  options?: {
-    hydrate?: RootHydrateFunction
-    attrs?: any
-  }
+  options: any,
+  hydrate?: any
 ): VueElementConstructor {
   const Comp = defineComponent(options) as any
   class VueCustomElement extends VueElement {
     static def = Comp
     constructor(initialProps?: Record<string, any>) {
-      super(Comp, initialProps, options?.hydrate)
+      super(Comp, initialProps, hydrate)
     }
   }
 

From 008cb134896aa4a821b5262ec88eafe72506e7f3 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Wed, 30 Aug 2023 21:27:28 +0800
Subject: [PATCH 08/20] Revert "feat(compiler-sfc): `useAttrs` support generic
 type"

This reverts commit 20e2364c004ad57b31ba4f67d29f76b85d809aeb.
---
 .../__snapshots__/compileScript.spec.ts.snap  | 33 -------------------
 1 file changed, 33 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 2465105a8cb..949c9946d9f 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1237,39 +1237,6 @@ return { get aa() { return aa }, set aa(v) { aa = v }, bb, cc, dd, get a() { ret
 }"
 `;
 
-exports[`SFC compile <script setup> > useAttrs w/ generic type 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { useAttrs, ref} from 'vue'
-      
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose }) {
-  expose();
-
-      const attrs = useAttrs<{ foo: number }>()
-      
-return { attrs, useAttrs, ref }
-}
-
-}, { attrs: {} as { foo: number }})"
-`;
-
-exports[`SFC compile <script setup> > useAttrs w/ type reference 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { useAttrs, ref} from 'vue'
-      type CompAttrs = { foo: number }
-      
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose }) {
-  expose();
-
-      const attrs = useAttrs<CompAttrs>()
-      
-return { attrs, useAttrs, ref }
-}
-
-}, { attrs: {} as { foo: number }})"
-`;
-
 exports[`SFC compile <script setup> > with TypeScript > const Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 const enum Foo { A = 123 }

From 63dba9bc20dbbc57474be8d05712dc6dc931d37d Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Wed, 30 Aug 2023 21:31:38 +0800
Subject: [PATCH 09/20] chore: prettier

---
 packages/runtime-core/src/component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 3096236167f..d235bbe8ed4 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -190,7 +190,7 @@ export type SetupContext<
   Attrs extends AttrsType = {}
 > = E extends any
   ? {
-      attrs: UnwrapAttrsType<Attrs>,
+      attrs: UnwrapAttrsType<Attrs>
       slots: UnwrapSlotsType<S>
       emit: EmitFn<E>
       expose: (exposed?: Record<string, any>) => void

From 2454c27c09ff40e3052811b98e7e88a3fde6d960 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Wed, 30 Aug 2023 21:40:44 +0800
Subject: [PATCH 10/20] chore: imporve code

---
 packages/runtime-dom/src/apiCustomElement.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 89c7ad65ca6..1a47eaf9a01 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -173,7 +173,7 @@ export function defineCustomElement(
 /*! #__NO_SIDE_EFFECTS__ */
 export const defineSSRCustomElement = ((options: any) => {
   // @ts-ignore
-  return defineCustomElement(options, { hydrate })
+  return defineCustomElement(options, hydrate)
 }) as typeof defineCustomElement
 
 const BaseClass = (

From 188badf6ce5d9bae0361778d8d368a217a2ed7f0 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Fri, 1 Sep 2023 13:22:47 +0800
Subject: [PATCH 11/20] chore: improve code

---
 packages/dts-test/defineComponent.test-d.tsx  | 110 ++++++++++--------
 .../dts-test/defineCustomElement.test-d.ts    | 104 +++++++++--------
 .../runtime-core/src/apiDefineComponent.ts    |  23 ++--
 packages/runtime-core/src/apiSetupHelpers.ts  |   7 +-
 packages/runtime-core/src/component.ts        |   9 +-
 packages/runtime-core/src/componentOptions.ts |  16 +--
 .../src/componentPublicInstance.ts            |  14 ++-
 packages/runtime-core/src/vnode.ts            |   9 +-
 packages/runtime-dom/src/apiCustomElement.ts  |  27 ++---
 9 files changed, 172 insertions(+), 147 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 6ee05a1b310..6495124b311 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1044,7 +1044,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError((this.foobar = 1))
+      this.foobar = 1
     }
   })
 
@@ -1056,7 +1056,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError((this.foobar = 1))
+      this.foobar = 1
     }
   })
 
@@ -1076,7 +1076,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError((this.foobar = 1))
+      this.foobar = 1
     }
   })
 
@@ -1085,9 +1085,9 @@ describe('inject', () => {
     props: ['a', 'b'],
     created() {
       //  @ts-expect-error
-      expectError((this.foo = 1))
+      this.foo = 1
       //  @ts-expect-error
-      expectError((this.bar = 1))
+      this.bar = 1
     }
   })
 })
@@ -1191,59 +1191,46 @@ describe('async setup', () => {
 
 describe('define attrs', () => {
   test('define attrs w/ object props', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     const MyComp = defineComponent({
       props: {
         foo: String
       },
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       created() {
-        expectType<CompAttrs['bar']>(this.$attrs.bar)
-        expectType<CompAttrs['baz']>(this.$attrs.baz)
+        expectType<number | undefined>(this.$attrs.bar)
       }
     })
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
   test('define attrs w/ array props', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     const MyComp = defineComponent({
       props: ['foo'],
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       created() {
-        expectType<CompAttrs['bar']>(this.$attrs.bar)
-        expectType<CompAttrs['baz']>(this.$attrs.baz)
+        expectType<number | undefined>(this.$attrs.bar)
       }
     })
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
   test('define attrs w/ no props', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     const MyComp = defineComponent({
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       created() {
-        expectType<CompAttrs['bar']>(this.$attrs.bar)
-        expectType<CompAttrs['baz']>(this.$attrs.baz)
+        expectType<number | undefined>(this.$attrs.bar)
       }
     })
     expectType<JSX.Element>(<MyComp bar={1} />)
   })
 
   test('define attrs w/ composition api', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     const MyComp = defineComponent({
       props: {
         foo: {
@@ -1251,55 +1238,67 @@ describe('define attrs', () => {
           required: true
         }
       },
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       setup(props, { attrs }) {
         expectType<string>(props.foo)
-        expectType<number>(attrs.bar)
-        expectType<string | undefined>(attrs.baz)
+        expectType<number | undefined>(attrs.bar)
       }
     })
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
   test('define attrs w/ functional component', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     const MyComp = defineComponent(
       (props: { foo: string }, ctx) => {
-        expectType<number>(ctx.attrs.bar)
-        expectType<CompAttrs['bar']>(ctx.attrs.bar)
-        expectType<CompAttrs['baz']>(ctx.attrs.baz)
+        expectType<number | undefined>(ctx.attrs.bar)
         return () => (
           // return a render function (both JSX and h() works)
           <div>{props.foo}</div>
         )
       },
       {
-        attrs: Object as AttrsType<CompAttrs>
+        attrs: Object as AttrsType<{
+          bar?: number
+        }>
       }
     )
     expectType<JSX.Element>(<MyComp foo={'1'} bar={1} />)
   })
 
   test('define attrs as low priority', () => {
-    type CompAttrs = {
-      foo: number
-    }
     const MyComp = defineComponent({
       props: {
         foo: String
       },
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        foo?: number
+      }>,
       created() {
         // @ts-expect-error
-        console.log(this.$attrs.foo)
+        this.$attrs.foo
+
+        expectType<string | undefined>(this.foo)
       }
     })
     expectType<JSX.Element>(<MyComp foo="1" />)
   })
 
+  test('define required attrs', () => {
+    const MyComp = defineComponent({
+      attrs: Object as AttrsType<{
+        bar: number
+      }>,
+      created() {
+        expectType<number | undefined>(this.$attrs.bar)
+      }
+    })
+    expectType<JSX.Element>(<MyComp bar={1} />)
+    // @ts-expect-error
+    expectType<JSX.Element>(<MyComp />)
+  })
+
   test('define attrs w/ no attrs', () => {
     const MyComp = defineComponent({
       props: {
@@ -1312,6 +1311,25 @@ describe('define attrs', () => {
     // @ts-expect-error
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
+
+  test('default attrs like class, style', () => {
+    const MyComp = defineComponent({
+      props: {
+        foo: String
+      },
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
+      created() {
+        expectType<number | undefined>(this.$attrs.bar)
+        expectType<unknown>(this.$attrs.class)
+        expectType<unknown>(this.$attrs.style)
+      }
+    })
+    expectType<JSX.Element>(
+      <MyComp class={'str'} style={'str'} foo="1" bar={1} />
+    )
+  })
 })
 
 // #5948
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 362deca2164..5d56a65c0c8 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -15,7 +15,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError((this.foobar = 1))
+      this.foobar = 1
     }
   })
 
@@ -27,7 +27,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError((this.foobar = 1))
+      this.foobar = 1
     }
   })
 
@@ -47,7 +47,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError((this.foobar = 1))
+      this.foobar = 1
     }
   })
 
@@ -56,89 +56,101 @@ describe('inject', () => {
     props: ['a', 'b'],
     created() {
       //  @ts-expect-error
-      expectError((this.foo = 1))
+      this.foo = 1
       //  @ts-expect-error
-      expectError((this.bar = 1))
+      this.bar = 1
     }
   })
 })
 
 describe('define attrs', () => {
   test('define attrs w/ object props', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     defineCustomElement({
       props: {
         foo: String
       },
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       created() {
-        expectType<number>(this.$attrs.bar)
-        expectType<string | undefined>(this.$attrs.baz)
+        expectType<number | undefined>(this.$attrs.bar)
       }
     })
   })
 
   test('define attrs w/ array props', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     defineCustomElement({
       props: ['foo'],
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       created() {
-        expectType<number>(this.$attrs.bar)
-        expectType<string | undefined>(this.$attrs.baz)
+        expectType<number | undefined>(this.$attrs.bar)
       }
     })
   })
 
   test('define attrs w/ no props', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
     defineCustomElement({
-      attrs: Object as AttrsType<CompAttrs>,
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
       created() {
-        expectType<number>(this.$attrs.bar)
-        expectType<string | undefined>(this.$attrs.baz)
+        expectType<number | undefined>(this.$attrs.bar)
       }
     })
   })
 
-  test('define attrs w/ function component', () => {
-    type CompAttrs = {
-      bar: number
-      baz?: string
-    }
-    defineCustomElement(
-      (_props: { foo: string }, ctx) => {
-        expectType<number>(ctx.attrs.bar)
-        expectType<number>(ctx.attrs.bar)
-        expectType<string | undefined>(ctx.attrs.baz)
+  test('define attrs as low priority', () => {
+    defineCustomElement({
+      props: {
+        foo: String
       },
-      {
-        attrs: Object as AttrsType<CompAttrs>
+      attrs: Object as AttrsType<{
+        foo: number
+      }>,
+      created() {
+        // @ts-expect-error
+        this.$attrs.foo
+        expectType<string | undefined>(this.foo)
       }
-    )
+    })
   })
 
-  test('define attrs as low priority', () => {
-    type CompAttrs = {
-      foo: number
-    }
+  test('define attrs w/ no attrs', () => {
     defineCustomElement({
       props: {
         foo: String
       },
-      attrs: Object as AttrsType<CompAttrs>,
       created() {
-        // @ts-expect-error
-        console.log(this.$attrs.foo)
+        expectType<unknown>(this.$attrs.bar)
+        expectType<unknown>(this.$attrs.baz)
+      }
+    })
+  })
+
+  test('default attrs like class, style', () => {
+    defineCustomElement({
+      props: {
+        foo: String
+      },
+      created() {
+        expectType<unknown>(this.$attrs.class)
+        expectType<unknown>(this.$attrs.style)
+      }
+    })
+  })
+
+  test('define required attrs', () => {
+    defineCustomElement({
+      props: {
+        foo: String
+      },
+      attrs: Object as AttrsType<{
+        bar: number
+      }>,
+      created() {
+        expectType<number>(this.$attrs.bar)
       }
     })
   })
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 067b6a0effa..ef31745c456 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -15,8 +15,7 @@ import {
 import {
   SetupContext,
   AllowedComponentProps,
-  ComponentCustomProps,
-  Data
+  ComponentCustomProps
 } from './component'
 import {
   ExtractPropTypes,
@@ -59,7 +58,7 @@ export type DefineComponent<
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
@@ -109,10 +108,10 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
-  PropsAttrs = IsSameType<Data, UnwrapAttrsType<Attrs>> extends true
+  Attrs extends AttrsType | undefined = undefined,
+  PropsAttrs = IsSameType<undefined, Attrs> extends true
     ? {}
-    : UnwrapAttrsType<Attrs>
+    : UnwrapAttrsType<NonNullable<Attrs>>
 >(
   setup: (
     props: Props,
@@ -156,11 +155,11 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType | undefined = undefined,
   I extends ComponentInjectOptions = {},
   II extends string = string
 >(
-  comp: ComponentOptionsWithoutProps<
+  options: ComponentOptionsWithoutProps<
     Props,
     RawBindings,
     D,
@@ -206,12 +205,12 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType | undefined = undefined,
   I extends ComponentInjectOptions = {},
   II extends string = string,
   Props = Readonly<{ [key in PropNames]?: any }>
 >(
-  comp: ComponentOptionsWithArrayProps<
+  options: ComponentOptionsWithArrayProps<
     PropNames,
     RawBindings,
     D,
@@ -260,9 +259,9 @@ export function defineComponent<
   S extends SlotsType = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 >(
-  comp: ComponentOptionsWithObjectProps<
+  options: ComponentOptionsWithObjectProps<
     PropsOptions,
     RawBindings,
     D,
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 4256a588a7c..93200667081 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -11,8 +11,7 @@ import {
   setCurrentInstance,
   SetupContext,
   createSetupContext,
-  unsetCurrentInstance,
-  Data
+  unsetCurrentInstance
 } from './component'
 import { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 import {
@@ -350,8 +349,8 @@ export function useSlots(): SetupContext['slots'] {
   return getContext().slots
 }
 
-export function useAttrs<T extends Data = {}>(): SetupContext['attrs'] {
-  return getContext().attrs as T
+export function useAttrs(): SetupContext['attrs'] {
+  return getContext().attrs
 }
 
 export function useModel<T extends Record<string, any>, K extends keyof T>(
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index d235bbe8ed4..bb79234e792 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -19,7 +19,8 @@ import {
   exposeSetupStateOnRenderContext,
   ComponentPublicInstanceConstructor,
   publicPropertiesMap,
-  RuntimeCompiledPublicInstanceProxyHandlers
+  RuntimeCompiledPublicInstanceProxyHandlers,
+  IsSameType
 } from './componentPublicInstance'
 import {
   ComponentPropsOptions,
@@ -187,10 +188,12 @@ type LifecycleHook<TFn = Function> = TFn[] | null
 export type SetupContext<
   E = EmitsOptions,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 > = E extends any
   ? {
-      attrs: UnwrapAttrsType<Attrs>
+      attrs: IsSameType<Attrs, undefined> extends true
+        ? Data
+        : UnwrapAttrsType<NonNullable<Attrs>>
       slots: UnwrapSlotsType<S>
       emit: EmitFn<E>
       expose: (exposed?: Record<string, any>) => void
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index d64d8e12b04..4208e45ca2a 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -112,7 +112,7 @@ export interface ComponentOptionsBase<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 > extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II>,
     ComponentInternalOptions,
     ComponentCustomOptions {
@@ -226,7 +226,7 @@ export type ComponentOptionsWithoutProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType | undefined = undefined,
   PE = Props & EmitsToProps<E>
 > = ComponentOptionsBase<
   PE,
@@ -277,7 +277,7 @@ export type ComponentOptionsWithArrayProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType | undefined = undefined,
   Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>
 > = ComponentOptionsBase<
   Props,
@@ -328,7 +328,7 @@ export type ComponentOptionsWithObjectProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType | undefined = undefined,
   Props = Prettify<Readonly<ExtractPropTypes<PropsOptions> & EmitsToProps<E>>>,
   Defaults = ExtractDefaultPropTypes<PropsOptions>
 > = ComponentOptionsBase<
@@ -421,17 +421,17 @@ declare const AttrSymbol: unique symbol
 export type AttrsType<T extends Record<string, any> = Record<string, any>> = {
   [AttrSymbol]?: T
 }
+
 export type UnwrapAttrsType<
-  S extends AttrsType,
-  T = NonNullable<S[typeof AttrSymbol]>
-> = [keyof S] extends [never]
+  Attrs extends AttrsType,
+  T = NonNullable<Attrs[typeof AttrSymbol]>
+> = [keyof Attrs] extends [never]
   ? Data
   : Readonly<
       Prettify<{
         [K in keyof T]: T[K]
       }>
     >
-
 export type ComputedOptions = Record<
   string,
   ComputedGetter<any> | WritableComputedOptions<any>
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 2220b5feb39..0c49db662fe 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -152,7 +152,7 @@ export type CreateComponentPublicInstance<
   MakeDefaultsOptional extends boolean = false,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
+  Attrs extends AttrsType | undefined = undefined,
   PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
   PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
   PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
@@ -215,10 +215,10 @@ export type ComponentPublicInstance<
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
-  Attrs extends AttrsType = {},
-  PropsAttrs = IsSameType<UnwrapAttrsType<Attrs>, Data> extends true
+  Attrs extends AttrsType | undefined = undefined,
+  PropsAttrs = IsSameType<Attrs, undefined> extends true
     ? {}
-    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
+    : Omit<UnwrapAttrsType<NonNullable<Attrs>>, keyof (P & PublicProps)>
 > = {
   $: ComponentInternalInstance
   $data: D
@@ -227,8 +227,10 @@ export type ComponentPublicInstance<
       ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & PropsAttrs
       : P & PublicProps & PropsAttrs
   >
-  $attrs: Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
-    AllowedComponentProps
+  $attrs: IsSameType<Attrs, undefined> extends true
+    ? Data
+    : Omit<UnwrapAttrsType<NonNullable<Attrs>>, keyof (P & PublicProps)> &
+        AllowedComponentProps
   $refs: Data
   $slots: UnwrapSlotsType<S>
   $root: ComponentPublicInstance | null
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index d94c2f576f3..f8cf6652d31 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -18,8 +18,7 @@ import {
   ConcreteComponent,
   ClassComponent,
   Component,
-  isClassComponent,
-  AllowedComponentProps
+  isClassComponent
 } from './component'
 import { RawSlots } from './componentSlots'
 import { isProxy, Ref, toRaw, ReactiveFlags, isRef } from '@vue/reactivity'
@@ -817,7 +816,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
   vnode.shapeFlag |= type
 }
 
-export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
+export function mergeProps(...args: (Data & VNodeProps)[]) {
   const ret: Data = {}
   for (let i = 0; i < args.length; i++) {
     const toMerge = args[i]
@@ -830,7 +829,7 @@ export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
         ret.style = normalizeStyle([ret.style, toMerge.style])
       } else if (isOn(key)) {
         const existing = ret[key]
-        const incoming = (toMerge as Data)[key]
+        const incoming = toMerge[key]
         if (
           incoming &&
           existing !== incoming &&
@@ -841,7 +840,7 @@ export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
             : incoming
         }
       } else if (key !== '') {
-        ret[key] = (toMerge as Data)[key]
+        ret[key] = toMerge[key]
       }
     }
   }
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 1a47eaf9a01..7aaaaacb87f 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -35,18 +35,11 @@ export type VueElementConstructor<P = {}> = {
 // so most of the following overloads should be kept in sync w/ defineComponent.
 
 // overload 1: direct setup function
-export function defineCustomElement<
-  Props,
-  RawBindings = object,
-  Attrs extends AttrsType = {}
->(
+export function defineCustomElement<Props, RawBindings = object>(
   setup: (
     props: Readonly<Props>,
-    ctx: SetupContext<{}, {}, Attrs>
-  ) => RawBindings | RenderFunction,
-  options?: {
-    attrs?: Attrs
-  }
+    ctx: SetupContext
+  ) => RawBindings | RenderFunction
 ): VueElementConstructor<Props>
 
 // overload 2: object format with no props
@@ -63,9 +56,9 @@ export function defineCustomElement<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 >(
-  comp: ComponentOptionsWithoutProps<
+  options: ComponentOptionsWithoutProps<
     Props,
     RawBindings,
     D,
@@ -96,9 +89,9 @@ export function defineCustomElement<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 >(
-  comp: ComponentOptionsWithArrayProps<
+  options: ComponentOptionsWithArrayProps<
     PropNames,
     RawBindings,
     D,
@@ -129,9 +122,9 @@ export function defineCustomElement<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType = {}
+  Attrs extends AttrsType | undefined = undefined
 >(
-  comp: ComponentOptionsWithObjectProps<
+  options: ComponentOptionsWithObjectProps<
     PropsOptions,
     RawBindings,
     D,
@@ -157,7 +150,7 @@ export function defineCustomElement(options: {
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(
   options: any,
-  hydrate?: any
+  hydrate?: RootHydrateFunction
 ): VueElementConstructor {
   const Comp = defineComponent(options) as any
   class VueCustomElement extends VueElement {

From 75394bf89ff05c65b5d6d2a621c69a2f61a444e3 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Sat, 2 Sep 2023 22:28:35 +0800
Subject: [PATCH 12/20] chore: improve code according to review advice

---
 packages/dts-test/defineComponent.test-d.tsx    | 15 ++++++++++++++-
 packages/runtime-core/src/apiDefineComponent.ts | 17 ++++++++---------
 packages/runtime-core/src/component.ts          | 10 +++++-----
 packages/runtime-core/src/componentOptions.ts   |  8 ++++----
 .../runtime-core/src/componentPublicInstance.ts | 17 ++++++-----------
 packages/runtime-dom/src/apiCustomElement.ts    |  6 +++---
 packages/shared/src/typeUtils.ts                |  6 ++++++
 7 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 6495124b311..506964c239f 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1299,7 +1299,7 @@ describe('define attrs', () => {
     expectType<JSX.Element>(<MyComp />)
   })
 
-  test('define attrs w/ no attrs', () => {
+  test('define no attrs w/ object props', () => {
     const MyComp = defineComponent({
       props: {
         foo: String
@@ -1312,6 +1312,19 @@ describe('define attrs', () => {
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
+  test('define no attrs w/ functional component', () => {
+    const MyComp = defineComponent((props: { foo: string }, ctx) => {
+      expectType<unknown>(ctx.attrs.bar)
+      return () => (
+        // return a render function (both JSX and h() works)
+        <div>{props.foo}</div>
+      )
+    })
+    expectType<JSX.Element>(<MyComp foo={'1'} />)
+    // @ts-expect-error
+    expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
+  })
+
   test('default attrs like class, style', () => {
     const MyComp = defineComponent({
       props: {
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index ef31745c456..479b0f87b08 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -24,12 +24,11 @@ import {
   ComponentObjectPropsOptions
 } from './componentProps'
 import { EmitsOptions, EmitsToProps } from './componentEmits'
-import { extend, isFunction } from '@vue/shared'
+import { IsSameType, extend, isFunction } from '@vue/shared'
 import { VNodeProps } from './vnode'
 import {
   CreateComponentPublicInstance,
-  ComponentPublicInstanceConstructor,
-  IsSameType
+  ComponentPublicInstanceConstructor
 } from './componentPublicInstance'
 import { SlotsType } from './componentSlots'
 
@@ -58,7 +57,7 @@ export type DefineComponent<
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
@@ -108,8 +107,8 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
-  PropsAttrs = IsSameType<undefined, Attrs> extends true
+  Attrs extends AttrsType = Record<string, unknown>,
+  PropsAttrs = IsSameType<string, keyof Attrs> extends true
     ? {}
     : UnwrapAttrsType<NonNullable<Attrs>>
 >(
@@ -155,7 +154,7 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
+  Attrs extends AttrsType = Record<string, unknown>,
   I extends ComponentInjectOptions = {},
   II extends string = string
 >(
@@ -205,7 +204,7 @@ export function defineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
+  Attrs extends AttrsType = Record<string, unknown>,
   I extends ComponentInjectOptions = {},
   II extends string = string,
   Props = Readonly<{ [key in PropNames]?: any }>
@@ -259,7 +258,7 @@ export function defineComponent<
   S extends SlotsType = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 >(
   options: ComponentOptionsWithObjectProps<
     PropsOptions,
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index bb79234e792..bcca91568c1 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -19,8 +19,7 @@ import {
   exposeSetupStateOnRenderContext,
   ComponentPublicInstanceConstructor,
   publicPropertiesMap,
-  RuntimeCompiledPublicInstanceProxyHandlers,
-  IsSameType
+  RuntimeCompiledPublicInstanceProxyHandlers
 } from './componentPublicInstance'
 import {
   ComponentPropsOptions,
@@ -67,7 +66,8 @@ import {
   ShapeFlags,
   extend,
   getGlobalThis,
-  IfAny
+  IfAny,
+  IsSameType
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerOptions } from '@vue/compiler-core'
@@ -188,10 +188,10 @@ type LifecycleHook<TFn = Function> = TFn[] | null
 export type SetupContext<
   E = EmitsOptions,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 > = E extends any
   ? {
-      attrs: IsSameType<Attrs, undefined> extends true
+      attrs: IsSameType<keyof Attrs, string> extends true
         ? Data
         : UnwrapAttrsType<NonNullable<Attrs>>
       slots: UnwrapSlotsType<S>
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 4208e45ca2a..1b72263185c 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -112,7 +112,7 @@ export interface ComponentOptionsBase<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 > extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II>,
     ComponentInternalOptions,
     ComponentCustomOptions {
@@ -226,7 +226,7 @@ export type ComponentOptionsWithoutProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
+  Attrs extends AttrsType = Record<string, unknown>,
   PE = Props & EmitsToProps<E>
 > = ComponentOptionsBase<
   PE,
@@ -277,7 +277,7 @@ export type ComponentOptionsWithArrayProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
+  Attrs extends AttrsType = Record<string, unknown>,
   Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>
 > = ComponentOptionsBase<
   Props,
@@ -328,7 +328,7 @@ export type ComponentOptionsWithObjectProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
+  Attrs extends AttrsType = Record<string, unknown>,
   Props = Prettify<Readonly<ExtractPropTypes<PropsOptions> & EmitsToProps<E>>>,
   Defaults = ExtractDefaultPropTypes<PropsOptions>
 > = ComponentOptionsBase<
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 0c49db662fe..cc09816e3ed 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -16,7 +16,8 @@ import {
   isString,
   isFunction,
   UnionToIntersection,
-  Prettify
+  Prettify,
+  IsSameType
 } from '@vue/shared'
 import {
   toRaw,
@@ -152,7 +153,7 @@ export type CreateComponentPublicInstance<
   MakeDefaultsOptional extends boolean = false,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
+  Attrs extends AttrsType = Record<string, unknown>,
   PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
   PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
   PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
@@ -194,12 +195,6 @@ export type CreateComponentPublicInstance<
   Attrs
 >
 
-export type IsSameType<T, U> = T extends U
-  ? U extends T
-    ? true
-    : false
-  : false
-
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -215,8 +210,8 @@ export type ComponentPublicInstance<
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined,
-  PropsAttrs = IsSameType<Attrs, undefined> extends true
+  Attrs extends AttrsType = Record<string, unknown>,
+  PropsAttrs = IsSameType<keyof Attrs, string> extends true
     ? {}
     : Omit<UnwrapAttrsType<NonNullable<Attrs>>, keyof (P & PublicProps)>
 > = {
@@ -227,7 +222,7 @@ export type ComponentPublicInstance<
       ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & PropsAttrs
       : P & PublicProps & PropsAttrs
   >
-  $attrs: IsSameType<Attrs, undefined> extends true
+  $attrs: IsSameType<keyof Attrs, string> extends true
     ? Data
     : Omit<UnwrapAttrsType<NonNullable<Attrs>>, keyof (P & PublicProps)> &
         AllowedComponentProps
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 7aaaaacb87f..48be004f437 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -56,7 +56,7 @@ export function defineCustomElement<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 >(
   options: ComponentOptionsWithoutProps<
     Props,
@@ -89,7 +89,7 @@ export function defineCustomElement<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 >(
   options: ComponentOptionsWithArrayProps<
     PropNames,
@@ -122,7 +122,7 @@ export function defineCustomElement<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Attrs extends AttrsType | undefined = undefined
+  Attrs extends AttrsType = Record<string, unknown>
 >(
   options: ComponentOptionsWithObjectProps<
     PropsOptions,
diff --git a/packages/shared/src/typeUtils.ts b/packages/shared/src/typeUtils.ts
index 1deb4729125..7a3aac5f739 100644
--- a/packages/shared/src/typeUtils.ts
+++ b/packages/shared/src/typeUtils.ts
@@ -21,3 +21,9 @@ export type Awaited<T> = T extends null | undefined
     ? Awaited<V> // recursively unwrap the value
     : never // the argument to `then` was not callable
   : T // non-object or non-thenable
+
+export type IsSameType<T, U> = T extends U
+  ? U extends T
+    ? true
+    : false
+  : false

From f977e107f03b32c603492a9e4da78cd10f4e7912 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Sun, 3 Sep 2023 17:39:26 +0800
Subject: [PATCH 13/20] chore: improve code readability

---
 packages/runtime-core/src/apiDefineComponent.ts      |  7 ++++---
 packages/runtime-core/src/component.ts               |  6 +++---
 packages/runtime-core/src/componentPublicInstance.ts | 12 ++++++------
 packages/shared/src/typeUtils.ts                     | 10 +++++-----
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 479b0f87b08..35ed1bbb669 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -15,7 +15,8 @@ import {
 import {
   SetupContext,
   AllowedComponentProps,
-  ComponentCustomProps
+  ComponentCustomProps,
+  HasDefineAttrs
 } from './component'
 import {
   ExtractPropTypes,
@@ -24,7 +25,7 @@ import {
   ComponentObjectPropsOptions
 } from './componentProps'
 import { EmitsOptions, EmitsToProps } from './componentEmits'
-import { IsSameType, extend, isFunction } from '@vue/shared'
+import { extend, isFunction } from '@vue/shared'
 import { VNodeProps } from './vnode'
 import {
   CreateComponentPublicInstance,
@@ -108,7 +109,7 @@ export function defineComponent<
   EE extends string = string,
   S extends SlotsType = {},
   Attrs extends AttrsType = Record<string, unknown>,
-  PropsAttrs = IsSameType<string, keyof Attrs> extends true
+  PropsAttrs = HasDefineAttrs<Attrs> extends true
     ? {}
     : UnwrapAttrsType<NonNullable<Attrs>>
 >(
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index bcca91568c1..d4f8dda5aec 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -67,7 +67,7 @@ import {
   extend,
   getGlobalThis,
   IfAny,
-  IsSameType
+  Equal
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerOptions } from '@vue/compiler-core'
@@ -84,7 +84,7 @@ import { SchedulerJob } from './scheduler'
 import { LifecycleHooks } from './enums'
 
 export type Data = Record<string, unknown>
-
+export type HasDefineAttrs<T> = Equal<keyof T, string>
 /**
  * For extending allowed non-declared props on components in TSX
  */
@@ -191,7 +191,7 @@ export type SetupContext<
   Attrs extends AttrsType = Record<string, unknown>
 > = E extends any
   ? {
-      attrs: IsSameType<keyof Attrs, string> extends true
+      attrs: HasDefineAttrs<Attrs> extends true
         ? Data
         : UnwrapAttrsType<NonNullable<Attrs>>
       slots: UnwrapSlotsType<S>
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index cc09816e3ed..a75a1896b3a 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -2,6 +2,7 @@ import {
   AllowedComponentProps,
   ComponentInternalInstance,
   Data,
+  HasDefineAttrs,
   getExposeProxy,
   isStatefulComponent
 } from './component'
@@ -16,8 +17,7 @@ import {
   isString,
   isFunction,
   UnionToIntersection,
-  Prettify,
-  IsSameType
+  Prettify
 } from '@vue/shared'
 import {
   toRaw,
@@ -211,9 +211,9 @@ export type ComponentPublicInstance<
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
   Attrs extends AttrsType = Record<string, unknown>,
-  PropsAttrs = IsSameType<keyof Attrs, string> extends true
+  PropsAttrs = HasDefineAttrs<Attrs> extends true
     ? {}
-    : Omit<UnwrapAttrsType<NonNullable<Attrs>>, keyof (P & PublicProps)>
+    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
 > = {
   $: ComponentInternalInstance
   $data: D
@@ -222,9 +222,9 @@ export type ComponentPublicInstance<
       ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & PropsAttrs
       : P & PublicProps & PropsAttrs
   >
-  $attrs: IsSameType<keyof Attrs, string> extends true
+  $attrs: HasDefineAttrs<Attrs> extends true
     ? Data
-    : Omit<UnwrapAttrsType<NonNullable<Attrs>>, keyof (P & PublicProps)> &
+    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
         AllowedComponentProps
   $refs: Data
   $slots: UnwrapSlotsType<S>
diff --git a/packages/shared/src/typeUtils.ts b/packages/shared/src/typeUtils.ts
index 7a3aac5f739..156888428a4 100644
--- a/packages/shared/src/typeUtils.ts
+++ b/packages/shared/src/typeUtils.ts
@@ -22,8 +22,8 @@ export type Awaited<T> = T extends null | undefined
     : never // the argument to `then` was not callable
   : T // non-object or non-thenable
 
-export type IsSameType<T, U> = T extends U
-  ? U extends T
-    ? true
-    : false
-  : false
+// Conditional returns can enforce identical types.
+// See here: https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650
+// prettier-ignore
+export type Equal<Left, Right> =
+(<U>() => U extends Left ? 1 : 0) extends (<U>() => U extends Right ? 1 : 0) ? true : false;

From f8288c1f1d5043ef6947c433d5d37743d8a68659 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Wed, 6 Sep 2023 20:04:08 +0800
Subject: [PATCH 14/20] chore: add comments

---
 packages/runtime-core/src/apiDefineComponent.ts |  4 ++--
 packages/runtime-core/src/component.ts          |  5 +++--
 .../runtime-core/src/componentPublicInstance.ts | 17 +++++++++--------
 packages/shared/src/typeUtils.ts                |  8 +++++---
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 35ed1bbb669..94bbe6f474c 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -16,7 +16,7 @@ import {
   SetupContext,
   AllowedComponentProps,
   ComponentCustomProps,
-  HasDefineAttrs
+  noAttrsDefine
 } from './component'
 import {
   ExtractPropTypes,
@@ -109,7 +109,7 @@ export function defineComponent<
   EE extends string = string,
   S extends SlotsType = {},
   Attrs extends AttrsType = Record<string, unknown>,
-  PropsAttrs = HasDefineAttrs<Attrs> extends true
+  PropsAttrs = noAttrsDefine<Attrs> extends true
     ? {}
     : UnwrapAttrsType<NonNullable<Attrs>>
 >(
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index d4f8dda5aec..4eca5f13e89 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -84,7 +84,8 @@ import { SchedulerJob } from './scheduler'
 import { LifecycleHooks } from './enums'
 
 export type Data = Record<string, unknown>
-export type HasDefineAttrs<T> = Equal<keyof T, string>
+// Whether the attrs option is not defined
+export type noAttrsDefine<T> = Equal<keyof T, string>
 /**
  * For extending allowed non-declared props on components in TSX
  */
@@ -191,7 +192,7 @@ export type SetupContext<
   Attrs extends AttrsType = Record<string, unknown>
 > = E extends any
   ? {
-      attrs: HasDefineAttrs<Attrs> extends true
+      attrs: noAttrsDefine<Attrs> extends true
         ? Data
         : UnwrapAttrsType<NonNullable<Attrs>>
       slots: UnwrapSlotsType<S>
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index a75a1896b3a..6a40ce5b5ce 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -2,7 +2,7 @@ import {
   AllowedComponentProps,
   ComponentInternalInstance,
   Data,
-  HasDefineAttrs,
+  noAttrsDefine,
   getExposeProxy,
   isStatefulComponent
 } from './component'
@@ -210,19 +210,20 @@ export type ComponentPublicInstance<
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
   S extends SlotsType = {},
-  Attrs extends AttrsType = Record<string, unknown>,
-  PropsAttrs = HasDefineAttrs<Attrs> extends true
-    ? {}
-    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
+  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
 > = {
   $: ComponentInternalInstance
   $data: D
   $props: Prettify<
     MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & PropsAttrs
-      : P & PublicProps & PropsAttrs
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & AttrsProps
+      : P & PublicProps & AttrsProps
   >
-  $attrs: HasDefineAttrs<Attrs> extends true
+  $attrs: noAttrsDefine<Attrs> extends true
     ? Data
     : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
         AllowedComponentProps
diff --git a/packages/shared/src/typeUtils.ts b/packages/shared/src/typeUtils.ts
index 156888428a4..92790d9ec8f 100644
--- a/packages/shared/src/typeUtils.ts
+++ b/packages/shared/src/typeUtils.ts
@@ -24,6 +24,8 @@ export type Awaited<T> = T extends null | undefined
 
 // Conditional returns can enforce identical types.
 // See here: https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650
-// prettier-ignore
-export type Equal<Left, Right> =
-(<U>() => U extends Left ? 1 : 0) extends (<U>() => U extends Right ? 1 : 0) ? true : false;
+export type Equal<Left, Right> = (<U>() => U extends Left ? 1 : 0) extends <
+  U
+>() => U extends Right ? 1 : 0
+  ? true
+  : false

From 9c2916a4e2d9df1b80d982762943e76934886880 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Fri, 22 Sep 2023 00:58:08 +0800
Subject: [PATCH 15/20] fix: test when volar plugin is on

---
 packages/dts-test/defineComponent.test-d.tsx  | 45 ++++++++++++++-----
 .../src/componentPublicInstance.ts            |  4 +-
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 506964c239f..2b1db27b140 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -12,7 +12,9 @@ import {
   SlotsType,
   AttrsType,
   Slots,
-  VNode
+  VNode,
+  ImgHTMLAttributes,
+  StyleValue
 } from 'vue'
 import { describe, expectType, IsUnion, test } from './utils'
 
@@ -1325,22 +1327,45 @@ describe('define attrs', () => {
     expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
   })
 
-  test('default attrs like class, style', () => {
-    const MyComp = defineComponent({
+  test('wrap elements, such as img element (Keep the volar plugin open)', () => {
+    const MyImg = defineComponent({
       props: {
         foo: String
       },
-      attrs: Object as AttrsType<{
-        bar?: number
-      }>,
+      attrs: Object as AttrsType<ImgHTMLAttributes>,
       created() {
-        expectType<number | undefined>(this.$attrs.bar)
-        expectType<unknown>(this.$attrs.class)
-        expectType<unknown>(this.$attrs.style)
+        expectType<any>(this.$attrs.class)
+        expectType<StyleValue | undefined>(this.$attrs.style)
+      },
+      render() {
+        return <img {...this.$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>
+    const Child = defineComponent({
+      props: childProps,
+      render() {
+        return <div>{this.foo}</div>
+      }
+    })
+    const Comp = defineComponent({
+      props: {
+        bar: Number
+      },
+      attrs: Object as AttrsType<ChildProps>,
+      render() {
+        return <Child {...this.$attrs} />
       }
     })
     expectType<JSX.Element>(
-      <MyComp class={'str'} style={'str'} foo="1" bar={1} />
+      <Comp class={'str'} style={'str'} bar={1} foo={'str'} />
     )
   })
 })
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 6a40ce5b5ce..88fd4a02fc8 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,5 +1,4 @@
 import {
-  AllowedComponentProps,
   ComponentInternalInstance,
   Data,
   noAttrsDefine,
@@ -225,8 +224,7 @@ export type ComponentPublicInstance<
   >
   $attrs: noAttrsDefine<Attrs> extends true
     ? Data
-    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
-        AllowedComponentProps
+    : Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
   $refs: Data
   $slots: UnwrapSlotsType<S>
   $root: ComponentPublicInstance | null

From b8a08914e2e94a950ded7b601d2a80d16937184c Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Wed, 27 Sep 2023 19:37:58 +0800
Subject: [PATCH 16/20] feat: add `ExtractPropsAndEvents` util

---
 packages/dts-test/defineComponent.test-d.tsx  | 35 +++++++++++++------
 .../runtime-core/src/apiDefineComponent.ts    |  8 ++---
 packages/runtime-core/src/component.ts        | 12 ++++---
 packages/runtime-core/src/componentOptions.ts |  4 +++
 .../src/componentPublicInstance.ts            | 15 ++++----
 packages/runtime-core/src/index.ts            |  3 +-
 6 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 2b1db27b140..6e7a79cc05b 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/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)
+        }}
+      />
     )
   })
 })
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 94bbe6f474c..66f8de4b65b 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/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,
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 4eca5f13e89..491d3f9b0f8 100644
--- a/packages/runtime-core/src/component.ts
+++ b/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
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 1b72263185c..10c015e0847 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/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,
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 88fd4a02fc8..e2ff98740e8 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/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
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 9fae025d70e..beeca8958df 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -247,7 +247,8 @@ export type {
   ComputedOptions,
   RuntimeCompilerOptions,
   ComponentInjectOptions,
-  AttrsType
+  AttrsType,
+  ExtractPropsAndEvents
 } from './componentOptions'
 export type { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 export type {

From 374b8b1ed6d337c008e48fb48ad932ba28239b69 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Thu, 28 Sep 2023 21:08:29 +0800
Subject: [PATCH 17/20] fix: remove `ExtractPropsAndEvents` util

---
 packages/dts-test/defineComponent.test-d.tsx  |  5 ++---
 packages/runtime-core/src/componentOptions.ts | 11 +++++------
 packages/runtime-core/src/index.ts            |  3 +--
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 6e7a79cc05b..0e61cd46413 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -14,8 +14,7 @@ import {
   Slots,
   VNode,
   ImgHTMLAttributes,
-  StyleValue,
-  ExtractPropsAndEvents
+  StyleValue
 } from 'vue'
 import { describe, expectType, IsUnion, test } from './utils'
 
@@ -1360,7 +1359,7 @@ describe('define attrs', () => {
       props: {
         bar: Number
       },
-      attrs: Object as AttrsType<ExtractPropsAndEvents<typeof Child>>,
+      attrs: Object as AttrsType<typeof Child>,
       created() {
         expectType<unknown>(this.$attrs.class)
         expectType<unknown>(this.$attrs.style)
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 10c015e0847..ff1dd0fe02e 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -61,7 +61,8 @@ import {
   ComponentPublicInstance,
   isReservedPrefix,
   IntersectionMixin,
-  UnwrapMixinsType
+  UnwrapMixinsType,
+  ComponentPublicInstanceConstructor
 } from './componentPublicInstance'
 import { warn } from './warning'
 import { VNodeChild } from './vnode'
@@ -419,12 +420,10 @@ export type ComponentOptionsMixin = ComponentOptionsBase<
 
 declare const AttrSymbol: unique symbol
 export type AttrsType<T extends Record<string, any> = Record<string, any>> = {
-  [AttrSymbol]?: T
+  [AttrSymbol]?: T extends ComponentPublicInstanceConstructor
+    ? InstanceType<T>['$props']
+    : 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,
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index beeca8958df..9fae025d70e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -247,8 +247,7 @@ export type {
   ComputedOptions,
   RuntimeCompilerOptions,
   ComponentInjectOptions,
-  AttrsType,
-  ExtractPropsAndEvents
+  AttrsType
 } from './componentOptions'
 export type { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 export type {

From e2d4ec893e66085a303c461cbfa61d6daa290c6a Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Sun, 1 Oct 2023 11:21:51 +0800
Subject: [PATCH 18/20] fix: wrapping functional components

---
 packages/dts-test/defineComponent.test-d.tsx  | 22 +++++++++++++++++++
 packages/runtime-core/src/componentOptions.ts |  9 ++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 0e61cd46413..1de5ede80b2 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1380,6 +1380,28 @@ describe('define attrs', () => {
       />
     )
   })
+
+  test('wrap components w/ functional component', () => {
+    const Child = defineComponent((props: { foo: string }, ctx) => {
+      return () => <div>{props.foo}</div>
+    })
+    const Comp = defineComponent({
+      props: {
+        bar: Number
+      },
+      attrs: Object as AttrsType<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'} />
+    )
+  })
 })
 
 // #5948
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index ff1dd0fe02e..7a8aac206ea 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -61,8 +61,7 @@ import {
   ComponentPublicInstance,
   isReservedPrefix,
   IntersectionMixin,
-  UnwrapMixinsType,
-  ComponentPublicInstanceConstructor
+  UnwrapMixinsType
 } from './componentPublicInstance'
 import { warn } from './warning'
 import { VNodeChild } from './vnode'
@@ -420,8 +419,10 @@ export type ComponentOptionsMixin = ComponentOptionsBase<
 
 declare const AttrSymbol: unique symbol
 export type AttrsType<T extends Record<string, any> = Record<string, any>> = {
-  [AttrSymbol]?: T extends ComponentPublicInstanceConstructor
-    ? InstanceType<T>['$props']
+  [AttrSymbol]?: T extends new () => { $props: infer P }
+    ? NonNullable<P>
+    : T extends (props: infer P, ...args: any) => any
+    ? P
     : T
 }
 

From 2c16f830112c0d5543b20ddb475688ebd9b0fcc9 Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Tue, 17 Oct 2023 22:44:58 +0800
Subject: [PATCH 19/20] feat(compiler-sfc): support defineAttrs macro

---
 .../__snapshots__/defineAttrs.spec.ts.snap    | 46 +++++++++++++++++++
 .../compileScript/defineAttrs.spec.ts         | 40 ++++++++++++++++
 packages/compiler-sfc/src/compileScript.ts    |  7 ++-
 packages/compiler-sfc/src/script/context.ts   |  1 +
 .../compiler-sfc/src/script/defineAttrs.ts    | 33 +++++++++++++
 packages/runtime-core/src/apiSetupHelpers.ts  | 12 ++++-
 packages/runtime-core/src/componentOptions.ts | 11 +++++
 packages/runtime-core/src/index.ts            |  1 +
 .../types/scriptSetupHelpers.d.ts             |  2 +
 9 files changed, 150 insertions(+), 3 deletions(-)
 create mode 100644 packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineAttrs.spec.ts.snap
 create mode 100644 packages/compiler-sfc/__tests__/compileScript/defineAttrs.spec.ts
 create mode 100644 packages/compiler-sfc/src/script/defineAttrs.ts

diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineAttrs.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineAttrs.spec.ts.snap
new file mode 100644
index 00000000000..80d066e8a67
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineAttrs.spec.ts.snap
@@ -0,0 +1,46 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`defineAttrs() > basic usage 1`] = `
+"import { useAttrs as _useAttrs, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const attrs = _useAttrs()
+      
+return { attrs }
+}
+
+})"
+`;
+
+exports[`defineAttrs() > w/o generic params 1`] = `
+"import { useAttrs as _useAttrs } from 'vue'
+
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const attrs = _useAttrs()
+      
+return { attrs }
+}
+
+}"
+`;
+
+exports[`defineAttrs() > w/o return value 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+      
+return {  }
+}
+
+})"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineAttrs.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineAttrs.spec.ts
new file mode 100644
index 00000000000..e155e3c6bfd
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/compileScript/defineAttrs.spec.ts
@@ -0,0 +1,40 @@
+import { compileSFCScript as compile, assertCode } from '../utils'
+
+describe('defineAttrs()', () => {
+  test('basic usage', () => {
+    const { content } = compile(`
+      <script setup lang="ts">
+      const attrs = defineAttrs<{
+        bar?: number
+      }>()
+      </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch(`const attrs = _useAttrs()`)
+    expect(content).not.toMatch('defineAttrs')
+  })
+
+  test('w/o return value', () => {
+    const { content } = compile(`
+      <script setup lang="ts">
+      defineAttrs<{
+        bar?: number
+      }>()
+      </script>
+    `)
+    assertCode(content)
+    expect(content).not.toMatch('defineAttrs')
+    expect(content).not.toMatch(`_useAttrs`)
+  })
+
+  test('w/o generic params', () => {
+    const { content } = compile(`
+      <script setup>
+      const attrs = defineAttrs()
+      </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch(`const attrs = _useAttrs()`)
+    expect(content).not.toMatch('defineAttrs')
+  })
+})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 2a33f69936d..f5c902f3df9 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -53,6 +53,7 @@ import {
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
+import { processDefineAttrs } from './script/defineAttrs'
 
 export interface SFCScriptCompileOptions {
   /**
@@ -512,7 +513,8 @@ export function compileScript(
         processDefineProps(ctx, expr) ||
         processDefineEmits(ctx, expr) ||
         processDefineOptions(ctx, expr) ||
-        processDefineSlots(ctx, expr)
+        processDefineSlots(ctx, expr) ||
+        processDefineAttrs(ctx, expr)
       ) {
         ctx.s.remove(node.start! + startOffset, node.end! + startOffset)
       } else if (processDefineExpose(ctx, expr)) {
@@ -550,7 +552,8 @@ export function compileScript(
             !isDefineProps && processDefineEmits(ctx, init, decl.id)
           !isDefineEmits &&
             (processDefineSlots(ctx, init, decl.id) ||
-              processDefineModel(ctx, init, decl.id))
+              processDefineModel(ctx, init, decl.id) ||
+              processDefineAttrs(ctx, init, decl.id))
 
           if (
             isDefineProps &&
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index 692eab3ab9e..0d1607ab46d 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -36,6 +36,7 @@ export class ScriptCompileContext {
   hasDefineOptionsCall = false
   hasDefineSlotsCall = false
   hasDefineModelCall = false
+  hasDefineAttrsCall = false
 
   // defineProps
   propsCall: CallExpression | undefined
diff --git a/packages/compiler-sfc/src/script/defineAttrs.ts b/packages/compiler-sfc/src/script/defineAttrs.ts
new file mode 100644
index 00000000000..d2eda8d9962
--- /dev/null
+++ b/packages/compiler-sfc/src/script/defineAttrs.ts
@@ -0,0 +1,33 @@
+import { LVal, Node } from '@babel/types'
+import { isCallOf } from './utils'
+import { ScriptCompileContext } from './context'
+
+export const DEFINE_ATTRS = 'defineAttrs'
+
+export function processDefineAttrs(
+  ctx: ScriptCompileContext,
+  node: Node,
+  declId?: LVal
+): boolean {
+  if (!isCallOf(node, DEFINE_ATTRS)) {
+    return false
+  }
+  if (ctx.hasDefineAttrsCall) {
+    ctx.error(`duplicate ${DEFINE_ATTRS}() call`, node)
+  }
+  ctx.hasDefineAttrsCall = true
+
+  if (node.arguments.length > 0) {
+    ctx.error(`${DEFINE_ATTRS}() cannot accept arguments`, node)
+  }
+
+  if (declId) {
+    ctx.s.overwrite(
+      ctx.startOffset! + node.start!,
+      ctx.startOffset! + node.end!,
+      `${ctx.helper('useAttrs')}()`
+    )
+  }
+
+  return true
+}
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 93200667081..b673d20e7f8 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -18,7 +18,8 @@ import {
   ComponentOptionsMixin,
   ComponentOptionsWithoutProps,
   ComputedOptions,
-  MethodOptions
+  MethodOptions,
+  StrictUnwrapAttrsType
 } from './componentOptions'
 import {
   ComponentPropsOptions,
@@ -215,6 +216,15 @@ export function defineSlots<
   return null as any
 }
 
+export function defineAttrs<
+  Attrs extends Record<string, any> = Record<string, any>
+>(): StrictUnwrapAttrsType<Attrs> {
+  if (__DEV__) {
+    warnRuntimeUsage(`defineAttrs`)
+  }
+  return null as any
+}
+
 /**
  * (**Experimental**) Vue `<script setup>` compiler macro for declaring a
  * two-way binding prop that can be consumed via `v-model` from the parent
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 7a8aac206ea..2f8cb70e1fa 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -453,6 +453,17 @@ export type ExtractComputedReturns<T extends any> = {
     : never
 }
 
+export type StrictUnwrapAttrsType<
+  Attrs extends Record<string, unknown>,
+  T = NonNullable<Attrs>
+> = [keyof T] extends [never]
+  ? Record<string, unknown>
+  : T extends new () => { $props: infer P }
+  ? Readonly<NonNullable<P>>
+  : T extends (props: infer P, ...args: any) => any
+  ? Readonly<NonNullable<P>>
+  : Readonly<T>
+
 export type ObjectWatchOptionItem = {
   handler: WatchCallback | string
 } & WatchOptions
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 9fae025d70e..8cec27eb510 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -71,6 +71,7 @@ export {
   defineExpose,
   defineOptions,
   defineSlots,
+  defineAttrs,
   defineModel,
   withDefaults,
   useModel
diff --git a/packages/runtime-core/types/scriptSetupHelpers.d.ts b/packages/runtime-core/types/scriptSetupHelpers.d.ts
index a9ba734a53d..9224ebb9a5b 100644
--- a/packages/runtime-core/types/scriptSetupHelpers.d.ts
+++ b/packages/runtime-core/types/scriptSetupHelpers.d.ts
@@ -7,6 +7,7 @@ type _defineOptions = typeof defineOptions
 type _defineSlots = typeof defineSlots
 type _defineModel = typeof defineModel
 type _withDefaults = typeof withDefaults
+type _defineAttrs = typeof defineAttrs
 
 declare global {
   const defineProps: _defineProps
@@ -16,4 +17,5 @@ declare global {
   const defineSlots: _defineSlots
   const defineModel: _defineModel
   const withDefaults: _withDefaults
+  const defineAttrs: _defineAttrs
 }

From 6f9619b24c6d73f5a7d85e44560341ced99e419f Mon Sep 17 00:00:00 2001
From: rudyxu1102 <xuhaodong66@foxmail.com>
Date: Thu, 19 Oct 2023 23:20:14 +0800
Subject: [PATCH 20/20] test: add readonly case

---
 packages/dts-test/defineComponent.test-d.tsx  | 51 +++++++++++++++++++
 packages/runtime-core/src/componentOptions.ts |  2 +-
 .../src/componentPublicInstance.ts            | 12 ++---
 3 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 1de5ede80b2..7a9e9737785 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1402,6 +1402,57 @@ describe('define attrs', () => {
       <Comp class={'str'} style={'str'} bar={1} foo={'str'} />
     )
   })
+  test('ignore reserved props', () => {
+    defineComponent({
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
+      created() {
+        // @ts-expect-error reserved props
+        this.$attrs.key
+        // @ts-expect-error reserved props
+        this.$attrs.ref
+      }
+    })
+    defineComponent(
+      (props: { foo: string }, ctx) => {
+        // @ts-expect-error reserved props
+        ctx.attrs.key
+        // @ts-expect-error reserved props
+        ctx.attrs.ref
+        return () => <div>{props.foo}</div>
+      },
+      {
+        attrs: Object as AttrsType<{
+          bar?: number
+        }>
+      }
+    )
+  })
+
+  test('always readonly', () => {
+    defineComponent({
+      attrs: Object as AttrsType<{
+        bar?: number
+      }>,
+      created() {
+        // @ts-expect-error readonly
+        this.$attrs.class = 'test'
+      }
+    })
+    defineComponent(
+      (props: { foo: string }, ctx) => {
+        // @ts-expect-error readonly
+        ctx.attrs.bar = 1
+        return () => <div>{props.foo}</div>
+      },
+      {
+        attrs: Object as AttrsType<{
+          bar?: number
+        }>
+      }
+    )
+  })
 })
 
 // #5948
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 2f8cb70e1fa..95d7bb6ddef 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -457,7 +457,7 @@ export type StrictUnwrapAttrsType<
   Attrs extends Record<string, unknown>,
   T = NonNullable<Attrs>
 > = [keyof T] extends [never]
-  ? Record<string, unknown>
+  ? Readonly<Record<string, unknown>>
   : T extends new () => { $props: infer P }
   ? Readonly<NonNullable<P>>
   : T extends (props: infer P, ...args: any) => any
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index e2ff98740e8..16fc1ce7abb 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -218,13 +218,13 @@ export type ComponentPublicInstance<
 > = {
   $: ComponentInternalInstance
   $data: D
-  $props: Prettify<
-    MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & AttrsProps
-      : P & PublicProps & AttrsProps
-  >
+  $props: MakeDefaultsOptional extends true
+    ? Partial<Defaults> &
+        Omit<Prettify<P> & PublicProps, keyof Defaults> &
+        AttrsProps
+    : Prettify<P> & PublicProps & AttrsProps
   $attrs: HasDefinedAttrs<Attrs> extends true
-    ? AttrsProps & AllowedComponentProps
+    ? Readonly<AttrsProps & AllowedComponentProps>
     : Data
   $refs: Data
   $slots: UnwrapSlotsType<S>