feat(runtime-vapor): support functional component for defineVaporComponent (#12927)

Author: zhiyuanzmj

packages/runtime-vapor/__tests__/_utils.ts

@@ -1,4 +1,4 @@
-import { createVaporApp, defineVaporComponent } from '../src'
+import { createVaporApp } from '../src'
 import type { App } from '@vue/runtime-dom'
 import type { VaporComponent, VaporComponentInstance } from '../src/component'
 import type { RawProps } from '../src/componentProps'
@@ -36,7 +36,8 @@ export function makeRender<C = VaporComponent>(
   })
 
   function define(comp: C) {
-    const component = defineVaporComponent(comp as any)
+    const component = comp as any
+    component.__vapor = true
     let instance: VaporComponentInstance | undefined
     let app: App
 

packages/runtime-vapor/__tests__/componentProps.spec.ts

@@ -127,6 +127,27 @@ describe('component: props', () => {
     expect(props).toBe(attrs)
   })
 
+  test('functional defineVaporComponent without declaration', () => {
+    let props: any
+    let attrs: any
+
+    const { render } = define(
+      defineVaporComponent((_props: any, { attrs: _attrs }: any) => {
+        props = _props
+        attrs = _attrs
+        return []
+      }),
+    )
+
+    render({ foo: () => 1 })
+    expect(props).toEqual({})
+    expect(attrs).toEqual({ foo: 1 })
+
+    render({ bar: () => 2 })
+    expect(props).toEqual({})
+    expect(attrs).toEqual({ bar: 2 })
+  })
+
   test('boolean casting', () => {
     let props: any
     const { render } = define({

packages/runtime-vapor/src/apiDefineComponent.ts

@@ -1,7 +1,20 @@
-import type { VaporComponent } from './component'
+import type { ObjectVaporComponent, VaporComponent } from './component'
+import { extend, isFunction } from '@vue/shared'
 
 /*! #__NO_SIDE_EFFECTS__ */
-export function defineVaporComponent(comp: VaporComponent): VaporComponent {
+export function defineVaporComponent(
+  comp: VaporComponent,
+  extraOptions?: Omit<ObjectVaporComponent, 'setup'>,
+): VaporComponent {
+  if (isFunction(comp)) {
+    // #8236: extend call and options.name access are considered side-effects
+    // by Rollup, so we have to wrap it in a pure-annotated IIFE.
+    return /*@__PURE__*/ (() =>
+      extend({ name: comp.name }, extraOptions, {
+        setup: comp,
+        __vapor: true,
+      }))()
+  }
   // TODO type inference
   comp.__vapor = true
   return comp