fix(custom-element): support same direct setup function signature in defineCustomElement

close #11116

Author: yyx990803

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -342,6 +342,23 @@ describe('defineCustomElement', () => {
       expect(el.maxAge).toBe(50)
       expect(el.shadowRoot.innerHTML).toBe('max age: 50/type: number')
     })
+
+    test('support direct setup function syntax with extra options', () => {
+      const E = defineCustomElement(
+        props => {
+          return () => props.text
+        },
+        {
+          props: {
+            text: String,
+          },
+        },
+      )
+      customElements.define('my-el-setup-with-props', E)
+      container.innerHTML = `<my-el-setup-with-props text="hello"></my-el-setup-with-props>`
+      const e = container.childNodes[0] as VueElement
+      expect(e.shadowRoot!.innerHTML).toBe('hello')
+    })
   })
 
   describe('attrs', () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -38,10 +38,16 @@ export type VueElementConstructor<P = {}> = {
 
 // overload 1: direct setup function
 export function defineCustomElement<Props, RawBindings = object>(
-  setup: (
-    props: Readonly<Props>,
-    ctx: SetupContext,
-  ) => RawBindings | RenderFunction,
+  setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
+    props?: (keyof Props)[]
+  },
+): VueElementConstructor<Props>
+export function defineCustomElement<Props, RawBindings = object>(
+  setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
+    props?: ComponentObjectPropsOptions<Props>
+  },
 ): VueElementConstructor<Props>
 
 // overload 2: defineCustomElement with options object, infer props from options
@@ -127,9 +133,13 @@ export function defineCustomElement<P>(
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(
   options: any,
+  extraOptions?: ComponentOptions,
+  /**
+   * @internal
+   */
   hydrate?: RootHydrateFunction,
 ): VueElementConstructor {
-  const Comp = defineComponent(options) as any
+  const Comp = defineComponent(options, extraOptions) as any
   class VueCustomElement extends VueElement {
     static def = Comp
     constructor(initialProps?: Record<string, any>) {
@@ -141,9 +151,12 @@ export function defineCustomElement(
 }
 
 /*! #__NO_SIDE_EFFECTS__ */
-export const defineSSRCustomElement = ((options: any) => {
+export const defineSSRCustomElement = ((
+  options: any,
+  extraOptions?: ComponentOptions,
+) => {
   // @ts-expect-error
-  return defineCustomElement(options, hydrate)
+  return defineCustomElement(options, extraOptions, hydrate)
 }) as typeof defineCustomElement
 
 const BaseClass = (