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

close #11116

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index a8bdec77512b39d94a16b1b9bf8dc09bec9ef555..276536c2c3149dca966aeccb59b28a60a2ca7ebc 100644 (file)
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -338,6 +338,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', () => {

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 938230277075d1db9223e506fa9ff1bacfc3d095..d3d8b5b6e7398a8f3521821ef88b7006b57c6baa 100644 (file)
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -35,10 +35,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: object format with no props
@@ -143,9 +149,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>) {
@@ -157,9 +167,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 = (