feat(types): infer attrs in defineCustomElement

Author: rudyxu1102

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)
+      }
+    })
+  })
+})

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]
       }
     }
   }

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 () => {

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 = (