From 3fc1bb1a2e77dc57bf897e38ae24bc223a142ff8 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sat, 30 Aug 2025 21:42:41 +0800
Subject: [PATCH 01/17] feat(vapor): implement defineVaporComponent types

---
 .../dts-test/defineComponent.test-d.tsx       |   28 +-
 .../dts-test/defineVaporComponent.test-d.tsx  | 1250 +++++++++++++++++
 .../dts-test/functionalComponent.test-d.tsx   |    4 +
 packages-private/dts-test/tsx.test-d.tsx      |   11 +-
 .../runtime-core/src/apiDefineComponent.ts    |    2 +-
 packages/runtime-core/src/component.ts        |    4 +-
 .../src/componentPublicInstance.ts            |    4 +-
 .../runtime-core/src/components/KeepAlive.ts  |    2 +-
 .../runtime-core/src/components/Suspense.ts   |    2 +-
 .../runtime-core/src/components/Teleport.ts   |    2 +-
 packages/runtime-core/src/h.ts                |    2 +-
 packages/runtime-core/src/index.ts            |    2 +
 .../src/components/TransitionGroup.ts         |    2 +-
 .../__tests__/apiSetupContext.spec.ts         |    4 +-
 .../runtime-vapor/src/apiDefineComponent.ts   |  206 ++-
 packages/runtime-vapor/src/component.ts       |  145 +-
 packages/runtime-vapor/src/componentSlots.ts  |    2 +-
 packages/vue/jsx-runtime/index.d.ts           |    8 +-
 packages/vue/jsx.d.ts                         |    9 +-
 19 files changed, 1592 insertions(+), 97 deletions(-)
 create mode 100644 packages-private/dts-test/defineVaporComponent.test-d.tsx

diff --git a/packages-private/dts-test/defineComponent.test-d.tsx b/packages-private/dts-test/defineComponent.test-d.tsx
index 1967668dceb..b7ae8b6e63e 100644
--- a/packages-private/dts-test/defineComponent.test-d.tsx
+++ b/packages-private/dts-test/defineComponent.test-d.tsx
@@ -1880,20 +1880,22 @@ interface ErrorMessageSlotProps {
  * component types generated by vue-tsc
  * relying on legacy CreateComponentPublicInstance signature
  */
+type Props = Readonly<
+  vue.ExtractPropTypes<{
+    as: {
+      type: StringConstructor
+      default: any
+    }
+    name: {
+      type: StringConstructor
+      required: true
+    }
+  }> &
+    vue.AllowedComponentProps
+>
 declare const ErrorMessage: {
-  new (...args: any[]): vue.CreateComponentPublicInstance<
-    Readonly<
-      vue.ExtractPropTypes<{
-        as: {
-          type: StringConstructor
-          default: any
-        }
-        name: {
-          type: StringConstructor
-          required: true
-        }
-      }>
-    >,
+  new (props: Props): vue.CreateComponentPublicInstance<
+    Props,
     () =>
       | VNode<
           vue.RendererNode,
diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
new file mode 100644
index 00000000000..47b4ef459ea
--- /dev/null
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -0,0 +1,1250 @@
+import {
+  type AllowedComponentProps,
+  type Block,
+  type Component,
+  type ComponentCustomProps,
+  type DefineVaporComponent,
+  type EmitsOptions,
+  type ExtractPropTypes,
+  type GenericComponentInstance,
+  type PropType,
+  type VaporComponentInstance,
+  type VaporPublicProps,
+  createApp,
+  createComponent,
+  createVaporApp,
+  defineVaporComponent,
+  reactive,
+  ref,
+} from 'vue'
+import { type IsAny, type IsUnion, describe, expectType } from './utils'
+
+describe('with object props', () => {
+  interface ExpectedProps {
+    a?: number | undefined
+    aa: number
+    aaa: number | null
+    aaaa: number | undefined
+    b: string
+    e?: Function
+    h: boolean
+    j: undefined | (() => string | undefined)
+    bb: string
+    bbb: string
+    bbbb: string | undefined
+    bbbbb: string | undefined
+    cc?: string[] | undefined
+    dd: { n: 1 }
+    ee?: () => string
+    ff?: (a: number, b: string) => { a: boolean }
+    ccc?: string[] | undefined
+    ddd: string[]
+    eee: () => { a: string }
+    fff: (a: number, b: string) => { a: boolean }
+    hhh: boolean
+    ggg: 'foo' | 'bar'
+    ffff: (a: number, b: string) => { a: boolean }
+    iii?: (() => string) | (() => number)
+    jjj: ((arg1: string) => string) | ((arg1: string, arg2: string) => string)
+    kkk?: any
+    validated?: string
+    date?: Date
+    l?: Date
+    ll?: Date | number
+    lll?: string | number
+  }
+
+  type GT = string & { __brand: unknown }
+
+  const props = {
+    a: Number,
+    aa: {
+      type: Number as PropType<number | undefined>,
+      default: 1,
+    },
+    aaa: {
+      type: Number as PropType<number | null>,
+      default: 1,
+    },
+    aaaa: {
+      type: Number as PropType<number | undefined>,
+      // `as const` prevents widening to `boolean` (keeps literal `true` type)
+      required: true as const,
+    },
+    // required should make property non-void
+    b: {
+      type: String,
+      required: true as true,
+    },
+    e: Function,
+    h: Boolean,
+    j: Function as PropType<undefined | (() => string | undefined)>,
+    // default value should infer type and make it non-void
+    bb: {
+      default: 'hello',
+    },
+    bbb: {
+      // Note: default function value requires arrow syntax + explicit
+      // annotation
+      default: (props: any) => (props.bb as string) || 'foo',
+    },
+    bbbb: {
+      type: String,
+      default: undefined,
+    },
+    bbbbb: {
+      type: String,
+      default: () => undefined,
+    },
+    // explicit type casting
+    cc: Array as PropType<string[]>,
+    // required + type casting
+    dd: {
+      type: Object as PropType<{ n: 1 }>,
+      required: true as true,
+    },
+    // return type
+    ee: Function as PropType<() => string>,
+    // arguments + object return
+    ff: Function as PropType<(a: number, b: string) => { a: boolean }>,
+    // explicit type casting with constructor
+    ccc: Array as () => string[],
+    // required + constructor type casting
+    ddd: {
+      type: Array as () => string[],
+      required: true as true,
+    },
+    // required + object return
+    eee: {
+      type: Function as PropType<() => { a: string }>,
+      required: true as true,
+    },
+    // required + arguments + object return
+    fff: {
+      type: Function as PropType<(a: number, b: string) => { a: boolean }>,
+      required: true as true,
+    },
+    hhh: {
+      type: Boolean,
+      required: true as true,
+    },
+    // default + type casting
+    ggg: {
+      type: String as PropType<'foo' | 'bar'>,
+      default: 'foo',
+    },
+    // default + function
+    ffff: {
+      type: Function as PropType<(a: number, b: string) => { a: boolean }>,
+      default: (a: number, b: string) => ({ a: a > +b }),
+    },
+    // union + function with different return types
+    iii: Function as PropType<(() => string) | (() => number)>,
+    // union + function with different args & same return type
+    jjj: {
+      type: Function as PropType<
+        ((arg1: string) => string) | ((arg1: string, arg2: string) => string)
+      >,
+      required: true as true,
+    },
+    kkk: null,
+    validated: {
+      type: String,
+      // validator requires explicit annotation
+      validator: (val: unknown) => val !== '',
+    },
+    date: Date,
+    l: [Date],
+    ll: [Date, Number],
+    lll: [String, Number],
+  }
+
+  const MyComponent = defineVaporComponent({
+    props,
+    setup(props) {
+      // type assertion. See https://github.com/SamVerschueren/tsd
+      expectType<ExpectedProps['a']>(props.a)
+      expectType<ExpectedProps['aa']>(props.aa)
+      expectType<ExpectedProps['aaa']>(props.aaa)
+
+      // @ts-expect-error should included `undefined`
+      expectType<number>(props.aaaa)
+      expectType<ExpectedProps['aaaa']>(props.aaaa)
+
+      expectType<ExpectedProps['b']>(props.b)
+      expectType<ExpectedProps['e']>(props.e)
+      expectType<ExpectedProps['h']>(props.h)
+      expectType<ExpectedProps['j']>(props.j)
+      expectType<ExpectedProps['bb']>(props.bb)
+      expectType<ExpectedProps['bbb']>(props.bbb)
+      expectType<ExpectedProps['bbbb']>(props.bbbb)
+      expectType<ExpectedProps['bbbbb']>(props.bbbbb)
+      expectType<ExpectedProps['cc']>(props.cc)
+      expectType<ExpectedProps['dd']>(props.dd)
+      expectType<ExpectedProps['ee']>(props.ee)
+      expectType<ExpectedProps['ff']>(props.ff)
+      expectType<ExpectedProps['ccc']>(props.ccc)
+      expectType<ExpectedProps['ddd']>(props.ddd)
+      expectType<ExpectedProps['eee']>(props.eee)
+      expectType<ExpectedProps['fff']>(props.fff)
+      expectType<ExpectedProps['hhh']>(props.hhh)
+      expectType<ExpectedProps['ggg']>(props.ggg)
+      expectType<ExpectedProps['ffff']>(props.ffff)
+      if (typeof props.iii !== 'function') {
+        expectType<undefined>(props.iii)
+      }
+      expectType<ExpectedProps['iii']>(props.iii)
+      expectType<IsUnion<typeof props.jjj>>(true)
+      expectType<ExpectedProps['jjj']>(props.jjj)
+      expectType<ExpectedProps['kkk']>(props.kkk)
+      expectType<ExpectedProps['validated']>(props.validated)
+      expectType<ExpectedProps['date']>(props.date)
+      expectType<ExpectedProps['l']>(props.l)
+      expectType<ExpectedProps['ll']>(props.ll)
+      expectType<ExpectedProps['lll']>(props.lll)
+
+      // @ts-expect-error props should be readonly
+      props.a = 1
+
+      // setup context
+      return {
+        c: ref(1),
+        d: {
+          e: ref('hi'),
+        },
+        f: reactive({
+          g: ref('hello' as GT),
+        }),
+      }
+    },
+    render(ctx, props) {
+      expectType<ExpectedProps['a']>(props.a)
+      expectType<ExpectedProps['aa']>(props.aa)
+      expectType<ExpectedProps['aaa']>(props.aaa)
+      expectType<ExpectedProps['b']>(props.b)
+      expectType<ExpectedProps['e']>(props.e)
+      expectType<ExpectedProps['h']>(props.h)
+      expectType<ExpectedProps['bb']>(props.bb)
+      expectType<ExpectedProps['cc']>(props.cc)
+      expectType<ExpectedProps['dd']>(props.dd)
+      expectType<ExpectedProps['ee']>(props.ee)
+      expectType<ExpectedProps['ff']>(props.ff)
+      expectType<ExpectedProps['ccc']>(props.ccc)
+      expectType<ExpectedProps['ddd']>(props.ddd)
+      expectType<ExpectedProps['eee']>(props.eee)
+      expectType<ExpectedProps['fff']>(props.fff)
+      expectType<ExpectedProps['hhh']>(props.hhh)
+      expectType<ExpectedProps['ggg']>(props.ggg)
+      if (typeof props.iii !== 'function') {
+        expectType<undefined>(props.iii)
+      }
+      expectType<ExpectedProps['iii']>(props.iii)
+      expectType<IsUnion<typeof props.jjj>>(true)
+      expectType<ExpectedProps['jjj']>(props.jjj)
+      expectType<ExpectedProps['kkk']>(props.kkk)
+
+      // @ts-expect-error props should be readonly
+      props.a = 1
+      return []
+    },
+  })
+
+  expectType<Component>(MyComponent)
+
+  // Test TSX
+  expectType<JSX.Element>(
+    <MyComponent
+      a={1}
+      aaaa={1}
+      b="b"
+      bb="bb"
+      e={() => {}}
+      cc={['cc']}
+      dd={{ n: 1 }}
+      ee={() => 'ee'}
+      ccc={['ccc']}
+      ddd={['ddd']}
+      eee={() => ({ a: 'eee' })}
+      fff={(a, b) => ({ a: a > +b })}
+      hhh={false}
+      ggg="foo"
+      jjj={() => ''}
+      // should allow class/style as attrs
+      class="bar"
+      style={{ color: 'red' }}
+      // should allow key
+      key={'foo'}
+      // should allow ref
+      ref={'foo'}
+      ref_for={true}
+    />,
+  )
+
+  expectType<Component>(
+    <MyComponent
+      aaaa={1}
+      b="b"
+      dd={{ n: 1 }}
+      ddd={['ddd']}
+      eee={() => ({ a: 'eee' })}
+      fff={(a, b) => ({ a: a > +b })}
+      hhh={false}
+      jjj={() => ''}
+    />,
+  )
+
+  // @ts-expect-error missing required props
+  let c = <MyComponent />
+  // @ts-expect-error wrong prop types
+  c = <MyComponent a={'wrong type'} b="foo" dd={{ n: 1 }} ddd={['foo']} />
+  // @ts-expect-error wrong prop types
+  c = <MyComponent ggg="baz" />
+
+  // @ts-expect-error
+  ;<MyComponent b="foo" dd={{ n: 'string' }} ddd={['foo']} />
+
+  // `this` should be void inside of prop validators and prop default factories
+  defineVaporComponent({
+    props: {
+      myProp: {
+        type: Number,
+        validator(val: unknown): boolean {
+          // @ts-expect-error
+          return val !== this.otherProp
+        },
+        default(): number {
+          // @ts-expect-error
+          return this.otherProp + 1
+        },
+      },
+      otherProp: {
+        type: Number,
+        required: true,
+      },
+    },
+  })
+})
+
+describe('type inference w/ optional props declaration', () => {
+  const MyComponent = defineVaporComponent<{ a: string[]; msg: string }>({
+    setup(props) {
+      expectType<string>(props.msg)
+      expectType<string[]>(props.a)
+      return {
+        b: 1,
+      }
+    },
+  })
+
+  expectType<JSX.Element>(<MyComponent msg="1" a={['1']} />)
+  // @ts-expect-error
+  ;<MyComponent />
+  // @ts-expect-error
+  ;<MyComponent msg="1" />
+})
+
+describe('type inference w/ direct setup function', () => {
+  const MyComponent = defineVaporComponent((_props: { msg: string }) => [])
+  expectType<JSX.Element>(<MyComponent msg="foo" />)
+  // @ts-expect-error
+  ;<MyComponent />
+  // @ts-expect-error
+  ;<MyComponent msg={1} />
+})
+
+describe('type inference w/ array props declaration', () => {
+  const MyComponent = defineVaporComponent({
+    props: ['a', 'b'],
+    setup(props) {
+      // @ts-expect-error props should be readonly
+      props.a = 1
+      expectType<any>(props.a)
+      expectType<any>(props.b)
+      return {
+        c: 1,
+      }
+    },
+    render(ctx, props) {
+      expectType<any>(props.a)
+      expectType<any>(props.b)
+      // @ts-expect-error
+      props.a = 1
+      expectType<number>(ctx.c)
+      return []
+    },
+  })
+  expectType<JSX.Element>(<MyComponent a={[1, 2]} b="b" />)
+  // @ts-expect-error
+  ;<MyComponent other="other" />
+})
+
+// #4051
+describe('type inference w/ empty prop object', () => {
+  const MyComponent = defineVaporComponent({
+    props: {},
+    setup(props) {
+      return {}
+    },
+    render() {
+      return []
+    },
+  })
+  expectType<JSX.Element>(<MyComponent />)
+  // AllowedComponentProps
+  expectType<JSX.Element>(<MyComponent class={'foo'} />)
+  // ComponentCustomProps
+  expectType<JSX.Element>(<MyComponent custom={1} />)
+  // VNodeProps
+  expectType<JSX.Element>(<MyComponent key="1" />)
+  // @ts-expect-error
+  expectError(<MyComponent other="other" />)
+})
+
+describe('compatibility w/ createComponent', () => {
+  const comp = defineVaporComponent({})
+  createComponent(comp)
+
+  const comp2 = defineVaporComponent({
+    props: { foo: String },
+  })
+  createComponent(comp2)
+
+  const comp3 = defineVaporComponent({
+    setup() {
+      return {
+        a: 1,
+      }
+    },
+  })
+  createComponent(comp3)
+
+  const comp4 = defineVaporComponent(() => [])
+  createComponent(comp4)
+})
+
+describe('compatibility w/ createApp', () => {
+  const comp = defineVaporComponent({})
+  createApp(comp).mount('#hello')
+
+  const comp2 = defineVaporComponent({
+    props: { foo: String },
+  })
+  createVaporApp(comp2).mount('#hello')
+
+  const comp3 = defineVaporComponent({
+    setup() {
+      return {
+        a: 1,
+      }
+    },
+  })
+  createVaporApp(comp3).mount('#hello')
+})
+
+describe('emits', () => {
+  // Note: for TSX inference, ideally we want to map emits to onXXX props,
+  // but that requires type-level string constant concatenation as suggested in
+  // https://github.com/Microsoft/TypeScript/issues/12754
+
+  // The workaround for TSX users is instead of using emits, declare onXXX props
+  // and call them instead. Since `v-on:click` compiles to an `onClick` prop,
+  // this would also support other users consuming the component in templates
+  // with `v-on` listeners.
+
+  // with object emits
+  defineVaporComponent({
+    emits: {
+      click: (n: number) => typeof n === 'number',
+      input: (b: string) => b.length > 1,
+      Focus: (f: boolean) => !!f,
+    },
+    setup(props, { emit }) {
+      emit('click', 1)
+      emit('input', 'foo')
+      emit('Focus', true)
+      //  @ts-expect-error
+      emit('nope')
+      //  @ts-expect-error
+      emit('click')
+      //  @ts-expect-error
+      emit('click', 'foo')
+      //  @ts-expect-error
+      emit('input')
+      //  @ts-expect-error
+      emit('input', 1)
+      //  @ts-expect-error
+      emit('focus')
+      //  @ts-expect-error
+      emit('focus', true)
+    },
+  })
+
+  // with array emits
+  defineVaporComponent({
+    emits: ['foo', 'bar'],
+    setup(props, { emit }) {
+      emit('foo')
+      emit('foo', 123)
+      emit('bar')
+      //  @ts-expect-error
+      emit('nope')
+    },
+  })
+
+  // with tsx
+  const Component = defineVaporComponent({
+    emits: {
+      click: (n: number) => typeof n === 'number',
+    },
+    setup(props, { emit }) {
+      emit('click', 1)
+      //  @ts-expect-error
+      emit('click')
+      //  @ts-expect-error
+      emit('click', 'foo')
+    },
+  })
+
+  defineVaporComponent({
+    render() {
+      return (
+        <Component
+          onClick={(n: number) => {
+            return n + 1
+          }}
+        />
+      )
+    },
+  })
+
+  // #11803 manual props annotation in setup()
+  const Hello = defineVaporComponent({
+    name: 'HelloWorld',
+    inheritAttrs: false,
+    props: { foo: String },
+    emits: {
+      customClick: (args: string) => typeof args === 'string',
+    },
+    setup(props: { foo?: string }) {},
+  })
+  ;<Hello onCustomClick={() => {}} />
+
+  // without emits
+  defineVaporComponent({
+    setup(props, { emit }) {
+      emit('test', 1)
+      emit('test')
+    },
+  })
+
+  // emit should be valid when GenericComponentInstance is used.
+  const instance = {} as GenericComponentInstance
+  instance.emit('test', 1)
+  instance.emit('test')
+
+  // `this` should be void inside of emits validators
+  defineVaporComponent({
+    props: ['bar'],
+    emits: {
+      foo(): boolean {
+        // @ts-expect-error
+        return this.bar === 3
+      },
+    },
+  })
+})
+
+describe('extract instance type', () => {
+  const CompA = defineVaporComponent({
+    props: {
+      a: {
+        type: Boolean,
+        default: false,
+      },
+      b: {
+        type: String,
+        required: true,
+      },
+      c: Number,
+    },
+  })
+
+  const compA = {} as InstanceType<typeof CompA>
+
+  expectType<boolean | undefined>(compA.props.a)
+  expectType<string>(compA.props.b)
+  expectType<number | undefined>(compA.props.c)
+
+  //  @ts-expect-error
+  compA.props.a = true
+  //  @ts-expect-error
+  compA.props.b = 'foo'
+  //  @ts-expect-error
+  compA.props.c = 1
+})
+
+describe('async setup', () => {
+  type GT = string & { __brand: unknown }
+  const Comp = defineVaporComponent({
+    async setup() {
+      // setup context
+      return {
+        a: ref(1),
+        b: {
+          c: ref('hi'),
+        },
+        d: reactive({
+          e: ref('hello' as GT),
+        }),
+      }
+    },
+    render(ctx) {
+      // assert setup context unwrapping
+      expectType<number>(ctx.a)
+      expectType<string>(ctx.b.c.value)
+      expectType<GT>(ctx.d.e)
+
+      // setup context properties should be mutable
+      ctx.a = 2
+      return []
+    },
+  })
+
+  const vm = {} as InstanceType<typeof Comp>
+  if (vm.exposeProxy) {
+    // assert setup context unwrapping
+    expectType<number>(vm.exposeProxy.a)
+    expectType<string>(vm.exposeProxy.b.c.value)
+    expectType<GT>(vm.exposeProxy.d.e)
+
+    // setup context properties should be mutable
+    vm.exposeProxy.a = 2
+  }
+})
+
+// #5948
+describe('defineVaporComponent should infer correct types when assigning to Component', () => {
+  let component: Component
+  component = defineVaporComponent({
+    setup(_, { attrs, slots }) {
+      // @ts-expect-error should not be any
+      expectType<[]>(attrs)
+      // @ts-expect-error should not be any
+      expectType<[]>(slots)
+    },
+  })
+  expectType<Component>(component)
+})
+
+// #5969
+describe('should allow to assign props', () => {
+  const Child = defineVaporComponent({
+    props: {
+      bar: String,
+    },
+  })
+
+  const Parent = defineVaporComponent({
+    props: {
+      ...Child.props,
+      foo: String,
+    },
+  })
+
+  const child = new Child()
+  expectType<JSX.Element>(<Parent {...child.props} />)
+})
+
+// #6052
+describe('prop starting with `on*` is broken', () => {
+  defineVaporComponent({
+    props: {
+      onX: {
+        type: Function as PropType<(a: 1) => void>,
+        required: true,
+      },
+    },
+    setup(props) {
+      expectType<(a: 1) => void>(props.onX)
+      props.onX(1)
+    },
+  })
+
+  defineVaporComponent({
+    props: {
+      onX: {
+        type: Function as PropType<(a: 1) => void>,
+        required: true,
+      },
+    },
+    emits: {
+      test: (a: 1) => true,
+    },
+    setup(props) {
+      expectType<(a: 1) => void>(props.onX)
+    },
+  })
+})
+
+describe('function syntax w/ generics', () => {
+  const Comp = defineVaporComponent(
+    // TODO: babel plugin to auto infer runtime props options from type
+    // similar to defineProps<{...}>()
+    <T extends string | number>(props: { msg: T; list: T[] }) => {
+      // use Composition API here like in <script setup>
+      const count = ref(0)
+
+      return (
+        <div>
+          {props.msg} {count.value}
+        </div>
+      )
+    },
+  )
+  expectType<JSX.Element>(<Comp msg="fse" list={['foo']} />)
+  expectType<JSX.Element>(<Comp msg={123} list={[123]} />)
+
+  expectType<JSX.Element>(
+    // @ts-expect-error missing prop
+    <Comp msg={123} />,
+  )
+
+  expectType<JSX.Element>(
+    // @ts-expect-error generics don't match
+    <Comp msg="fse" list={[123]} />,
+  )
+  expectType<JSX.Element>(
+    // @ts-expect-error generics don't match
+    <Comp msg={123} list={['123']} />,
+  )
+})
+
+describe('function syntax w/ emits', () => {
+  const Foo = defineVaporComponent(
+    (props: { msg: string }, ctx) => {
+      ctx.emit('foo')
+      // @ts-expect-error
+      ctx.emit('bar')
+      return []
+    },
+    {
+      emits: ['foo'],
+    },
+  )
+  expectType<JSX.Element>(<Foo msg="hi" onFoo={() => {}} />)
+  // @ts-expect-error
+  expectType<JSX.Element>(<Foo msg="hi" onBar={() => {}} />)
+
+  const Bar = defineVaporComponent(
+    (props: { msg: string }, ctx) => {
+      ctx.emit('foo', 'hi')
+      // @ts-expect-error
+      ctx.emit('foo')
+      // @ts-expect-error
+      ctx.emit('bar')
+      return []
+    },
+    {
+      emits: {
+        foo: (a: string) => true,
+      },
+    },
+  )
+  expectType<JSX.Element>(<Bar msg="hi" onFoo={(a: string) => true} />)
+  // @ts-expect-error
+  expectType<JSX.Element>(<Foo msg="hi" onBar={() => {}} />)
+})
+
+describe('function syntax w/ slots', () => {
+  // types
+  type DefaultSlot = (props: { msg: string }) => []
+  const Foo = defineVaporComponent(
+    (_props, { slots }: { slots: { default: DefaultSlot } }) => {
+      return slots.default({ msg: '' })
+    },
+  )
+  const foo = new Foo()
+  expectType<DefaultSlot>(foo.slots.default)
+
+  // runtime
+  const defaultSlot = (props: { msg: string }) => []
+  const Bar = defineVaporComponent(
+    (_props, { slots }) => {
+      return slots.default({ msg: '' })
+    },
+    {
+      slots: {
+        default: defaultSlot,
+      },
+    },
+  )
+  const bar = new Bar()
+  expectType<typeof defaultSlot>(bar.slots.default)
+})
+
+describe('function syntax w/ expose', () => {
+  // types
+  const Foo = defineVaporComponent(
+    (
+      props: { msg: string },
+      { expose }: { expose: (exposed: { msg: string }) => void },
+    ) => {
+      expose({
+        msg: props.msg,
+      })
+      return []
+    },
+  )
+  const foo = new Foo()
+  expectType<string>(foo.exposeProxy!.msg)
+
+  // runtime
+  const Bar = defineVaporComponent(
+    () => {
+      return []
+    },
+    {
+      setup: () => ({ msg: '' }),
+    },
+  )
+  const bar = new Bar()
+  expectType<string>(bar.exposeProxy!.msg)
+})
+
+describe('function syntax w/ runtime props', () => {
+  // with runtime props, the runtime props must match
+  // manual type declaration
+  defineVaporComponent(
+    (_props: { msg: string }) => {
+      return []
+    },
+    {
+      props: ['msg'],
+    },
+  )
+
+  defineVaporComponent(
+    <T extends string>(_props: { msg: T }) => {
+      return []
+    },
+    {
+      props: ['msg'],
+    },
+  )
+
+  defineVaporComponent(
+    <T extends string>(_props: { msg: T }) => {
+      return []
+    },
+    {
+      props: {
+        msg: String,
+      },
+    },
+  )
+
+  // @ts-expect-error string prop names don't match
+  defineVaporComponent(
+    (_props: { msg: string }) => {
+      return []
+    },
+    {
+      props: ['bar'],
+    },
+  )
+
+  defineVaporComponent(
+    (_props: { msg: string }) => {
+      return []
+    },
+    {
+      props: {
+        // @ts-expect-error prop type mismatch
+        msg: Number,
+      },
+    },
+  )
+
+  // @ts-expect-error prop keys don't match
+  defineVaporComponent(
+    (_props: { msg: string }, ctx) => {
+      return []
+    },
+    {
+      props: {
+        msg: String,
+        bar: String,
+      },
+    },
+  )
+})
+
+// check if defineVaporComponent can be exported
+export default {
+  // function components
+  a: defineVaporComponent(_ => []),
+  // no props
+  b: defineVaporComponent({}),
+  c: defineVaporComponent({
+    props: ['a'],
+  }),
+  d: defineVaporComponent({
+    props: {
+      a: Number,
+    },
+  }),
+}
+
+describe('slots', () => {
+  const comp1 = defineVaporComponent({
+    slots: {} as {
+      default: (scope: { foo: string; bar: number }) => Block
+      optional?: (scope: { data: string }) => Block
+      undefinedScope: (scope?: { data: string }) => Block
+      optionalUndefinedScope?: (scope?: { data: string }) => Block
+    },
+    setup(props, { slots }) {
+      expectType<(scope: { foo: string; bar: number }) => Block>(slots.default)
+      expectType<((scope: { data: string }) => Block) | undefined>(
+        slots.optional,
+      )
+
+      slots.default({ foo: 'foo', bar: 1 })
+
+      // @ts-expect-error it's optional
+      slots.optional({ data: 'foo' })
+      slots.optional?.({ data: 'foo' })
+
+      expectType<{
+        (): Block
+        (scope: undefined | { data: string }): Block
+      }>(slots.undefinedScope)
+
+      expectType<
+        { (): Block; (scope: undefined | { data: string }): Block } | undefined
+      >(slots.optionalUndefinedScope)
+
+      slots.default({ foo: 'foo', bar: 1 })
+      // @ts-expect-error it's optional
+      slots.optional({ data: 'foo' })
+      slots.optional?.({ data: 'foo' })
+      slots.undefinedScope()
+      slots.undefinedScope(undefined)
+      // @ts-expect-error
+      slots.undefinedScope('foo')
+
+      slots.optionalUndefinedScope?.()
+      slots.optionalUndefinedScope?.(undefined)
+      slots.optionalUndefinedScope?.({ data: 'foo' })
+      // @ts-expect-error
+      slots.optionalUndefinedScope()
+      // @ts-expect-error
+      slots.optionalUndefinedScope?.('foo')
+
+      expectType<typeof slots | undefined>(new comp1().slots)
+    },
+  })
+
+  const comp2 = defineVaporComponent({
+    setup(props, { slots }) {
+      // unknown slots
+      expectType<Record<string, ((...args: any[]) => Block) | undefined>>(slots)
+      expectType<((...args: any[]) => Block) | undefined>(slots.default)
+    },
+  })
+  expectType<Record<string, ((...args: any[]) => Block) | undefined>>(
+    new comp2().slots,
+  )
+
+  const comp3 = defineVaporComponent({
+    setup(
+      props,
+      { slots }: { slots: { default: (props: { foo: number }) => Block } },
+    ) {
+      expectType<(props: { foo: number }) => Block>(slots.default)
+    },
+  })
+  expectType<Record<string, (props: { foo: number }) => Block>>(
+    new comp3().slots,
+  )
+})
+
+// #5885
+describe('should work when props type is incompatible with setup returned type ', () => {
+  type SizeType = 'small' | 'big'
+  const Comp = defineVaporComponent({
+    props: {
+      size: {
+        type: String as PropType<SizeType>,
+        required: true,
+      },
+    },
+    setup(props) {
+      expectType<SizeType>(props.size)
+      return {
+        size: 1,
+      }
+    },
+  })
+  type CompInstance = InstanceType<typeof Comp>
+
+  const CompA = {} as CompInstance
+  expectType<
+    VaporComponentInstance<{ size: SizeType }, {}, {}, { size: number }>
+  >(CompA)
+  expectType<number>(CompA.exposeProxy!.size)
+  expectType<SizeType>(CompA.props.size)
+})
+
+describe('expose typing', () => {
+  // types
+  const Foo = defineVaporComponent({
+    setup(
+      props: { some?: string },
+      { expose }: { expose: (exposed: { a: number; b: string }) => void },
+    ) {
+      expose({ a: 1, b: '' })
+    },
+  })
+  const foo = new Foo()
+  // internal should still be exposed
+  foo.props
+
+  expectType<number>(foo.exposeProxy!.a)
+  expectType<string>(foo.exposeProxy!.b)
+
+  // runtime
+  const Bar = defineVaporComponent({
+    props: {
+      some: String,
+    },
+    setup() {
+      return { a: 1, b: '2', c: 1 }
+    },
+  })
+
+  const bar = new Bar()
+  // internal should still be exposed
+  bar.props
+
+  expectType<number>(bar.exposeProxy!.a)
+  expectType<string>(bar.exposeProxy!.b)
+})
+
+// code generated by tsc / vue-tsc, make sure this continues to work
+// so we don't accidentally change the args order of DefineComponent
+declare const MyButton: DefineVaporComponent<
+  {},
+  string,
+  EmitsOptions,
+  string,
+  {},
+  {},
+  {},
+  true,
+  Readonly<ExtractPropTypes<{}>>,
+  VaporPublicProps & AllowedComponentProps & ComponentCustomProps,
+  {},
+  {}
+>
+;<MyButton class="x" />
+
+describe('__typeProps backdoor for union type for conditional props', () => {
+  interface CommonProps {
+    size?: 'xl' | 'l' | 'm' | 's' | 'xs'
+  }
+
+  type ConditionalProps =
+    | {
+        color?: 'normal' | 'primary' | 'secondary'
+        appearance?: 'normal' | 'outline' | 'text'
+      }
+    | {
+        color: 'white'
+        appearance: 'outline'
+      }
+
+  type Props = CommonProps & ConditionalProps
+
+  const Comp = defineVaporComponent({
+    __typeProps: {} as Props,
+  })
+  // @ts-expect-error
+  ;<Comp color="white" />
+  // @ts-expect-error
+  ;<Comp color="white" appearance="normal" />
+  ;<Comp color="white" appearance="outline" />
+
+  const c = new Comp()
+
+  // @ts-expect-error
+  c.props = { color: 'white' }
+  // @ts-expect-error
+  c.props = { color: 'white', appearance: 'text' }
+  c.props = { color: 'white', appearance: 'outline' }
+})
+
+describe('__typeEmits backdoor, 3.3+ object syntax', () => {
+  type Emits = {
+    change: [id: number]
+    update: [value: string]
+  }
+
+  const Comp = defineVaporComponent({
+    __typeEmits: {} as Emits,
+    setup(props, { emit }) {
+      // @ts-expect-error
+      props.onChange?.('123')
+      // @ts-expect-error
+      props.onUpdate?.(123)
+
+      // @ts-expect-error
+      emit('foo')
+
+      emit('change', 123)
+      // @ts-expect-error
+      emit('change', '123')
+
+      emit('update', 'test')
+      // @ts-expect-error
+      emit('update', 123)
+    },
+  })
+
+  ;<Comp onChange={id => id.toFixed(2)} />
+  ;<Comp onUpdate={id => id.toUpperCase()} />
+  // @ts-expect-error
+  ;<Comp onChange={id => id.slice(1)} />
+  // @ts-expect-error
+  ;<Comp onUpdate={id => id.toFixed(2)} />
+
+  const c = new Comp()
+  // @ts-expect-error
+  c.emit('foo')
+
+  c.emit('change', 123)
+  // @ts-expect-error
+  c.emit('change', '123')
+
+  c.emit('update', 'test')
+  // @ts-expect-error
+  c.emit('update', 123)
+})
+
+describe('__typeEmits backdoor, call signature syntax', () => {
+  type Emits = {
+    (e: 'change', id: number): void
+    (e: 'update', value: string): void
+  }
+
+  const Comp = defineVaporComponent({
+    __typeEmits: {} as Emits,
+    setup(props, { emit }) {
+      // @ts-expect-error
+      props.onChange?.('123')
+      // @ts-expect-error
+      props.onUpdate?.(123)
+
+      // @ts-expect-error
+      emit('foo')
+
+      emit('change', 123)
+      // @ts-expect-error
+      emit('change', '123')
+
+      emit('update', 'test')
+      // @ts-expect-error
+      emit('update', 123)
+    },
+  })
+
+  ;<Comp onChange={id => id.toFixed(2)} />
+  ;<Comp onUpdate={id => id.toUpperCase()} />
+  // @ts-expect-error
+  ;<Comp onChange={id => id.slice(1)} />
+  // @ts-expect-error
+  ;<Comp onUpdate={id => id.toFixed(2)} />
+
+  const c = new Comp()
+  // @ts-expect-error
+  c.emit('foo')
+
+  c.emit('change', 123)
+  // @ts-expect-error
+  c.emit('change', '123')
+
+  c.emit('update', 'test')
+  // @ts-expect-error
+  c.emit('update', 123)
+})
+
+describe('__typeRefs backdoor, object syntax', () => {
+  type Refs = {
+    foo: number
+  }
+
+  const Parent = defineVaporComponent({
+    __typeRefs: {} as { child: InstanceType<typeof Child> },
+  })
+  const Child = defineVaporComponent({
+    __typeRefs: {} as Refs,
+  })
+  const c = new Parent()
+  const refs = c.refs
+
+  expectType<InstanceType<typeof Child>>(refs.child)
+  expectType<number>(refs.child.refs.foo)
+})
+
+defineVaporComponent({
+  props: {
+    foo: [String, null],
+  },
+  setup(props) {
+    expectType<IsAny<typeof props.foo>>(false)
+    expectType<string | null | undefined>(props.foo)
+  },
+})
+
+// #10843
+createApp({}).component(
+  'SomeComponent',
+  defineVaporComponent({
+    props: {
+      title: String,
+    },
+    setup(props) {
+      expectType<string | undefined>(props.title)
+      return {}
+    },
+  }),
+)
+
+const Comp = defineVaporComponent({
+  props: {
+    actionText: {
+      type: {} as PropType<string>,
+      default: 'Become a sponsor',
+    },
+  },
+  __typeProps: {} as {
+    actionText?: string
+  },
+})
+
+const instance = new Comp()
+function expectString(s: string) {}
+// public prop on props should be optional
+// @ts-expect-error
+expectString(instance.props.actionText)
+
+// #12122
+defineVaporComponent({
+  props: { foo: String },
+  render(ctx, props) {
+    expectType<{ readonly foo?: string }>(props)
+    // @ts-expect-error
+    expectType<string>(props)
+    return []
+  },
+})
diff --git a/packages-private/dts-test/functionalComponent.test-d.tsx b/packages-private/dts-test/functionalComponent.test-d.tsx
index 04eda68b50a..30265c7a3a3 100644
--- a/packages-private/dts-test/functionalComponent.test-d.tsx
+++ b/packages-private/dts-test/functionalComponent.test-d.tsx
@@ -9,11 +9,15 @@ import { expectType } from './utils'
 
 // simple function signature
 const Foo = (props: { foo: number }) => h(Text, null, props.foo)
+const VaporComp = (props: { foo: number }) => document.createElement('div')
 
 // TSX
 expectType<JSX.Element>(<Foo foo={1} />)
 expectType<JSX.Element>(<Foo foo={1} key="1" />)
 expectType<JSX.Element>(<Foo foo={1} ref="ref" />)
+expectType<JSX.Element>(<VaporComp foo={1} />)
+expectType<JSX.Element>(<VaporComp foo={1} key="1" />)
+expectType<JSX.Element>(<VaporComp foo={1} ref="ref" />)
 // @ts-expect-error
 ;<Foo />
 //  @ts-expect-error
diff --git a/packages-private/dts-test/tsx.test-d.tsx b/packages-private/dts-test/tsx.test-d.tsx
index 0cd380f0447..4d691e26226 100644
--- a/packages-private/dts-test/tsx.test-d.tsx
+++ b/packages-private/dts-test/tsx.test-d.tsx
@@ -1,8 +1,15 @@
 // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
-import { Fragment, KeepAlive, Suspense, Teleport, type VNode } from 'vue'
+import {
+  type Block,
+  Fragment,
+  KeepAlive,
+  Suspense,
+  Teleport,
+  type VNode,
+} from 'vue'
 import { expectType } from './utils'
 
-expectType<VNode>(<div />)
+expectType<VNode | Block>(<div />)
 expectType<JSX.Element>(<div />)
 expectType<JSX.Element>(<div id="foo" />)
 expectType<JSX.Element>(<div>hello</div>)
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 2ce870f0141..fe3e5170025 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -155,7 +155,7 @@ export function defineComponent<
   setup: (
     props: Props,
     ctx: SetupContext<E, S>,
-  ) => RenderFunction | Promise<RenderFunction>,
+  ) => RenderFunction | Promise<RenderFunction> | {},
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: (keyof Props)[]
     emits?: E | EE[]
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 67d5a1b8720..494f6230136 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -114,7 +114,9 @@ export type Data = Record<string, unknown>
  * declare const instance: ComponentInstance<typeof MyComp>
  * ```
  */
-export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
+export type ComponentInstance<T> = T extends {
+  new (...args: any[]): ComponentPublicInstance
+}
   ? InstanceType<T>
   : T extends FunctionalComponent<infer Props, infer Emits>
     ? ComponentPublicInstance<Props, {}, {}, {}, {}, ShortEmitsToObject<Emits>>
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index a43c99e2f45..39bd7325d46 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -140,7 +140,7 @@ export type ComponentPublicInstanceConstructor<
     C,
     M
   > = ComponentPublicInstance<any>,
-  Props = any,
+  Props = T['$props'] & T['props'],
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
@@ -149,7 +149,7 @@ export type ComponentPublicInstanceConstructor<
   __isFragment?: never
   __isTeleport?: never
   __isSuspense?: never
-  new (...args: any[]): T
+  new (props?: Props): T
 }
 
 /**
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index f4244f360e3..c32515c46da 100644
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/packages/runtime-core/src/components/KeepAlive.ts
@@ -407,7 +407,7 @@ export const KeepAlive = (__COMPAT__
   ? /*@__PURE__*/ decorate(KeepAliveImpl)
   : KeepAliveImpl) as any as {
   __isKeepAlive: true
-  new (): {
+  new (props?: VNodeProps & KeepAliveProps): {
     $props: VNodeProps & KeepAliveProps
     $slots: {
       default(): VNode[]
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 2539145bd00..8c9bd3222a1 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -131,7 +131,7 @@ export const Suspense = (__FEATURE_SUSPENSE__
   ? SuspenseImpl
   : null) as unknown as {
   __isSuspense: true
-  new (): {
+  new (props?: VNodeProps & SuspenseProps): {
     $props: VNodeProps & SuspenseProps
     $slots: {
       default(): VNode[]
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 7e3b132902f..b0fa18e0081 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -490,7 +490,7 @@ function hydrateTeleport(
 // Force-casted public typing for h and TSX props inference
 export const Teleport = TeleportImpl as unknown as {
   __isTeleport: true
-  new (): {
+  new (props?: VNodeProps & TeleportProps): {
     $props: VNodeProps & TeleportProps
     $slots: {
       default(): VNode[]
diff --git a/packages/runtime-core/src/h.ts b/packages/runtime-core/src/h.ts
index 93e7fd9bc88..694d4d7ccc9 100644
--- a/packages/runtime-core/src/h.ts
+++ b/packages/runtime-core/src/h.ts
@@ -72,7 +72,7 @@ interface Constructor<P = any> {
   __isFragment?: never
   __isTeleport?: never
   __isSuspense?: never
-  new (...args: any[]): { $props: P }
+  new (props?: P): { $props: P }
 }
 
 type HTMLElementEventHandler = {
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 243bde548c5..5a88f4cb770 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -295,9 +295,11 @@ export type {
   EmitsToProps,
   ShortEmitsToObject,
   EmitFn,
+  TypeEmitsToOptions,
 } from './componentEmits'
 export type {
   ComponentPublicInstance,
+  ComponentPublicInstanceConstructor,
   ComponentCustomProperties,
   CreateComponentPublicInstance,
   CreateComponentPublicInstanceWithMixins,
diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
index 72af535d385..6bb54c8edc2 100644
--- a/packages/runtime-dom/src/components/TransitionGroup.ts
+++ b/packages/runtime-dom/src/components/TransitionGroup.ts
@@ -174,7 +174,7 @@ const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({
 })
 
 export const TransitionGroup = TransitionGroupImpl as unknown as {
-  new (): {
+  new (props?: TransitionGroupProps): {
     $props: TransitionGroupProps
   }
 }
diff --git a/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts b/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
index 5e0d5d98aa0..16abbbd7a24 100644
--- a/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
+++ b/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
@@ -54,7 +54,7 @@ describe('api: setup context', () => {
         })
         const n = createTextNode()
         renderEffect(() => {
-          setText(n, props.count)
+          setText(n, props.count + '')
         })
         return n
       },
@@ -191,7 +191,7 @@ describe('api: setup context', () => {
           emit('inc', props.count + 1)
         })
         const n = createTextNode()
-        renderEffect(() => setText(n, props.count))
+        renderEffect(() => setText(n, props.count + ''))
         insert(n, n0)
         return n0
       },
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index 430f87cdd50..d4cdee11c19 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -1,11 +1,204 @@
-import type { ObjectVaporComponent, VaporComponent } from './component'
-import { extend, isFunction } from '@vue/shared'
+import type {
+  ObjectVaporComponent,
+  VaporComponent,
+  VaporComponentInstance,
+} from './component'
+import {
+  type IsKeyValues,
+  type Prettify,
+  extend,
+  isFunction,
+} from '@vue/shared'
+import type {
+  AllowedComponentProps,
+  ComponentCustomProps,
+  ComponentObjectPropsOptions,
+  ComponentPublicInstanceConstructor,
+  ComponentTypeEmits,
+  EmitFn,
+  EmitsOptions,
+  EmitsToProps,
+  ExtractDefaultPropTypes,
+  ExtractPropTypes,
+  ReservedProps,
+  SlotsType,
+  TypeEmitsToOptions,
+  VNode,
+} from '@vue/runtime-dom'
+import type { StaticSlots } from './componentSlots'
+import type { Block } from './block'
+
+export type VaporPublicProps = ReservedProps &
+  AllowedComponentProps &
+  ComponentCustomProps
+
+export type DefineVaporComponent<
+  RuntimePropsOptions = {},
+  RuntimePropsKeys extends string = string,
+  Emits extends EmitsOptions = {},
+  RuntimeEmitsKeys extends string = string,
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+  TypeRefs extends Record<string, unknown> = {},
+  MakeDefaultsOptional extends boolean = true,
+  InferredProps = string extends RuntimePropsKeys
+    ? ComponentObjectPropsOptions extends RuntimePropsOptions
+      ? {}
+      : ExtractPropTypes<RuntimePropsOptions>
+    : { [key in RuntimePropsKeys]?: any },
+  PublicProps = VaporPublicProps,
+  ResolvedProps = InferredProps & EmitsToProps<Emits>,
+  Defaults = ExtractDefaultPropTypes<RuntimePropsOptions>,
+> = ComponentPublicInstanceConstructor<
+  VaporComponentInstance<
+    MakeDefaultsOptional extends true
+      ? keyof Defaults extends never
+        ? Prettify<ResolvedProps> & PublicProps
+        : Partial<Defaults> &
+            Omit<Prettify<ResolvedProps> & PublicProps, keyof Defaults>
+      : Prettify<ResolvedProps> & PublicProps,
+    Emits,
+    Slots,
+    Exposed,
+    TypeRefs
+  >
+> &
+  ObjectVaporComponent<
+    RuntimePropsOptions | RuntimePropsKeys[],
+    Emits,
+    RuntimeEmitsKeys,
+    Slots,
+    Exposed
+  >
+
+export type DefineVaporSetupFnComponent<
+  Props extends Record<string, any> = {},
+  Emits extends EmitsOptions = {},
+  Slots extends SlotsType = SlotsType,
+  Exposed extends Record<string, any> = Record<string, any>,
+  ResolvedProps extends Record<string, any> = Props &
+    EmitsToProps<Emits> &
+    VaporPublicProps,
+> = new (
+  props?: ResolvedProps,
+) => VaporComponentInstance<ResolvedProps, Emits, Slots, Exposed>
+
+// overload 1: direct setup function
+// (uses user defined props interface)
+export function defineVaporComponent<
+  Props extends Record<string, any>,
+  Emits extends EmitsOptions = {},
+  RuntimeEmitsKeys extends string = string,
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+>(
+  setup: (
+    props: Props,
+    ctx: {
+      emit: EmitFn<Emits>
+      slots: Slots
+      attrs: Record<string, any>
+      expose: (exposed: Exposed) => void
+    },
+  ) => Block | VNode,
+  extraOptions?: ObjectVaporComponent<
+    (keyof Props)[],
+    Emits,
+    RuntimeEmitsKeys,
+    Slots,
+    Exposed
+  > &
+    ThisType<void>,
+): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed>
+export function defineVaporComponent<
+  Props extends Record<string, any>,
+  Emits extends EmitsOptions = {},
+  RuntimeEmitsKeys extends string = string,
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+>(
+  setup: (
+    props: Props,
+    ctx: {
+      emit: EmitFn<Emits>
+      slots: Slots
+      attrs: Record<string, any>
+      expose: (exposed: Exposed) => void
+    },
+  ) => Block | VNode,
+  extraOptions?: ObjectVaporComponent<
+    ComponentObjectPropsOptions<Props>,
+    Emits,
+    RuntimeEmitsKeys,
+    Slots,
+    Exposed
+  > &
+    ThisType<void>,
+): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed>
+
+// overload 2: defineVaporComponent with options object, infer props from options
+export function defineVaporComponent<
+  // props
+  TypeProps,
+  RuntimePropsOptions extends
+    ComponentObjectPropsOptions = ComponentObjectPropsOptions,
+  RuntimePropsKeys extends string = string,
+  // emits
+  TypeEmits extends ComponentTypeEmits = {},
+  RuntimeEmitsOptions extends EmitsOptions = {},
+  RuntimeEmitsKeys extends string = string,
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+  // resolved types
+  ResolvedEmits extends EmitsOptions = {} extends RuntimeEmitsOptions
+    ? TypeEmitsToOptions<TypeEmits>
+    : RuntimeEmitsOptions,
+  InferredProps = IsKeyValues<TypeProps> extends true
+    ? TypeProps
+    : string extends RuntimePropsKeys
+      ? ComponentObjectPropsOptions extends RuntimePropsOptions
+        ? {}
+        : ExtractPropTypes<RuntimePropsOptions>
+      : { [key in RuntimePropsKeys]?: any },
+  TypeRefs extends Record<string, unknown> = {},
+>(
+  options: ObjectVaporComponent<
+    RuntimePropsOptions | RuntimePropsKeys[],
+    ResolvedEmits,
+    RuntimeEmitsKeys,
+    Slots,
+    Exposed,
+    InferredProps
+  > & {
+    /**
+     * @private for language-tools use only
+     */
+    __typeProps?: TypeProps
+    /**
+     * @private for language-tools use only
+     */
+    __typeEmits?: TypeEmits
+    /**
+     * @private for language-tools use only
+     */
+    __typeRefs?: TypeRefs
+  } & ThisType<void>,
+): DefineVaporComponent<
+  RuntimePropsOptions,
+  RuntimePropsKeys,
+  ResolvedEmits,
+  RuntimeEmitsKeys,
+  Slots,
+  Exposed extends Block ? Record<string, any> : Exposed,
+  TypeRefs,
+  // MakeDefaultsOptional - if TypeProps is provided, set to false to use
+  // user props types verbatim
+  unknown extends TypeProps ? true : false,
+  InferredProps
+>
 
 /*! #__NO_SIDE_EFFECTS__ */
-export function defineVaporComponent(
-  comp: VaporComponent,
-  extraOptions?: Omit<ObjectVaporComponent, 'setup'>,
-): VaporComponent {
+export function defineVaporComponent(comp: VaporComponent, extraOptions?: any) {
   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.
@@ -15,7 +208,6 @@ export function defineVaporComponent(
         __vapor: true,
       }))()
   }
-  // TODO type inference
   comp.__vapor = true
   return comp
 }
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index da57882c49d..8dfb0cbf93e 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -1,16 +1,20 @@
 import {
   type ComponentInternalOptions,
+  type ComponentObjectPropsOptions,
   type ComponentPropsOptions,
   EffectScope,
   type EmitFn,
   type EmitsOptions,
   ErrorCodes,
+  type ExtractPropTypes,
   type GenericAppContext,
   type GenericComponentInstance,
   type LifecycleHook,
   type NormalizedPropsOptions,
   type ObjectEmitsOptions,
+  type ShallowUnwrapRef,
   type SuspenseBoundary,
+  type VNode,
   callWithErrorHandling,
   currentInstance,
   endMeasure,
@@ -63,35 +67,58 @@ import {
   insertionParent,
   resetInsertionState,
 } from './insertionState'
+import type { DefineVaporComponent } from './apiDefineComponent'
 
 export { currentInstance } from '@vue/runtime-dom'
 
-export type VaporComponent = FunctionalVaporComponent | ObjectVaporComponent
-
-export type VaporSetupFn = (
-  props: any,
-  ctx: Pick<VaporComponentInstance, 'slots' | 'attrs' | 'emit' | 'expose'>,
-) => Block | Record<string, any> | undefined
+export type VaporComponent =
+  | FunctionalVaporComponent
+  | ObjectVaporComponent
+  | DefineVaporComponent
+
+export type VaporSetupFn<
+  Props = {},
+  Emits extends EmitsOptions = {},
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+> = (
+  props: Readonly<Props>,
+  ctx: {
+    emit: EmitFn<Emits>
+    slots: Slots
+    attrs: Record<string, any>
+    expose: <T extends Record<string, any> = Exposed>(exposed: T) => void
+  },
+) => Block | Exposed | Promise<Exposed> | void
 
 export type FunctionalVaporComponent = VaporSetupFn &
   Omit<ObjectVaporComponent, 'setup'> & {
     displayName?: string
   } & SharedInternalOptions
 
-export interface ObjectVaporComponent
-  extends ComponentInternalOptions,
+export interface ObjectVaporComponent<
+  Props = ComponentPropsOptions,
+  Emits extends EmitsOptions = {},
+  RuntimeEmitsKeys extends string = string,
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+  InferredProps = ComponentObjectPropsOptions extends Props
+    ? {}
+    : ExtractPropTypes<Props>,
+> extends ComponentInternalOptions,
     SharedInternalOptions {
-  setup?: VaporSetupFn
   inheritAttrs?: boolean
-  props?: ComponentPropsOptions
-  emits?: EmitsOptions
+  props?: Props
+  emits?: Emits | RuntimeEmitsKeys[]
+  slots?: Slots
+  setup?: VaporSetupFn<InferredProps, Emits, Slots, Exposed>
   render?(
-    ctx: any,
-    props?: any,
-    emit?: EmitFn,
-    attrs?: any,
-    slots?: Record<string, VaporSlot>,
-  ): Block
+    ctx: Exposed extends Block ? undefined : ShallowUnwrapRef<Exposed>,
+    props: Readonly<InferredProps>,
+    emit: EmitFn<Emits>,
+    attrs: any,
+    slots: StaticSlots,
+  ): Block | VNode | void
 
   name?: string
   vapor?: boolean
@@ -235,14 +262,21 @@ export function createComponent(
       devRender(instance)
     }
   } else {
-    // component has a render function but no setup function
-    // (typically components with only a template and no state)
-    if (!setupFn && component.render) {
-      instance.block = callWithErrorHandling(
-        component.render,
-        instance,
-        ErrorCodes.RENDER_FUNCTION,
-      )
+    if (component.render) {
+      if (!isBlock(setupResult)) instance.setupState = setupResult
+      instance.block =
+        callWithErrorHandling(
+          component.render,
+          instance,
+          ErrorCodes.RENDER_FUNCTION,
+          [
+            instance.setupState,
+            instance.props,
+            instance.emit,
+            instance.attrs,
+            instance.slots,
+          ],
+        ) || []
     } else {
       // in prod result can only be block
       instance.block = setupResult as Block
@@ -324,7 +358,14 @@ const emptyContext: GenericAppContext = {
   provides: /*@__PURE__*/ Object.create(null),
 }
 
-export class VaporComponentInstance implements GenericComponentInstance {
+export class VaporComponentInstance<
+  Props extends Record<string, any> = {},
+  Emits extends EmitsOptions = {},
+  Slots extends StaticSlots = StaticSlots,
+  Exposed extends Record<string, any> = Record<string, any>,
+  Refs extends Record<string, any> = Record<string, any>,
+> implements GenericComponentInstance
+{
   vapor: true
   uid: number
   type: VaporComponent
@@ -338,25 +379,27 @@ export class VaporComponentInstance implements GenericComponentInstance {
   rawProps: RawProps
   rawSlots: RawSlots
 
-  props: Record<string, any>
+  props: Readonly<Props>
   attrs: Record<string, any>
   propsDefaults: Record<string, any> | null
 
-  slots: StaticSlots
+  slots: Slots
 
   // to hold vnode props / slots in vdom interop mode
   rawPropsRef?: ShallowRef<any>
   rawSlotsRef?: ShallowRef<any>
 
-  emit: EmitFn
+  emit: EmitFn<Emits>
   emitted: Record<string, boolean> | null
 
-  expose: (exposed: Record<string, any>) => void
-  exposed: Record<string, any> | null
-  exposeProxy: Record<string, any> | null
+  expose: (<T extends Record<string, any> = Exposed>(exposed: T) => void) &
+    // compatible with vdom components
+    string[]
+  exposed: Exposed | null
+  exposeProxy: ShallowUnwrapRef<Exposed> | null
 
   // for useTemplateRef()
-  refs: Record<string, any>
+  refs: Refs
   // for provide / inject
   provides: Record<string, any>
   // for useId
@@ -388,7 +431,7 @@ export class VaporComponentInstance implements GenericComponentInstance {
   sp?: LifecycleHook<() => Promise<unknown>> // LifecycleHooks.SERVER_PREFETCH
 
   // dev only
-  setupState?: Record<string, any>
+  setupState?: Exposed extends Block ? undefined : ShallowUnwrapRef<Exposed>
   devtoolsRawSetupState?: any
   hmrRerender?: () => void
   hmrReload?: (newComp: VaporComponent) => void
@@ -421,9 +464,9 @@ export class VaporComponentInstance implements GenericComponentInstance {
     this.block = null! // to be set
     this.scope = new EffectScope(true)
 
-    this.emit = emit.bind(null, this)
-    this.expose = expose.bind(null, this)
-    this.refs = EMPTY_OBJ
+    this.emit = emit.bind(null, this) as any
+    this.expose = expose.bind(null, this) as any
+    this.refs = EMPTY_OBJ as Refs
     this.emitted =
       this.exposed =
       this.exposeProxy =
@@ -442,23 +485,27 @@ export class VaporComponentInstance implements GenericComponentInstance {
     this.hasFallthrough = hasFallthroughAttrs(comp, rawProps)
     if (rawProps || comp.props) {
       const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp)
-      this.attrs = new Proxy(this, attrsHandlers)
-      this.props = comp.props
-        ? new Proxy(this, propsHandlers!)
-        : isFunction(comp)
-          ? this.attrs
-          : EMPTY_OBJ
+      this.attrs = new Proxy(this, attrsHandlers as any)
+      this.props = (
+        comp.props
+          ? new Proxy(this, propsHandlers! as any)
+          : isFunction(comp)
+            ? this.attrs
+            : EMPTY_OBJ
+      ) as Props
     } else {
-      this.props = this.attrs = EMPTY_OBJ
+      this.props = this.attrs = EMPTY_OBJ as Props
     }
 
     // init slots
     this.rawSlots = rawSlots || EMPTY_OBJ
-    this.slots = rawSlots
-      ? rawSlots.$
-        ? new Proxy(rawSlots, dynamicSlotsProxyHandlers)
-        : rawSlots
-      : EMPTY_OBJ
+    this.slots = (
+      rawSlots
+        ? rawSlots.$
+          ? new Proxy(rawSlots, dynamicSlotsProxyHandlers)
+          : rawSlots
+        : EMPTY_OBJ
+    ) as Slots
   }
 
   /**
diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 100c99cdb8a..4c05c3b2c07 100644
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -15,7 +15,7 @@ export type RawSlots = Record<string, VaporSlot> & {
   $?: DynamicSlotSource[]
 }
 
-export type StaticSlots = Record<string, VaporSlot>
+export type StaticSlots = Record<string, VaporSlot | undefined>
 
 export type VaporSlot = BlockFn
 export type DynamicSlot = { name: string; fn: VaporSlot }
diff --git a/packages/vue/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
index af5ffe2ac24..fe7b7eb24ee 100644
--- a/packages/vue/jsx-runtime/index.d.ts
+++ b/packages/vue/jsx-runtime/index.d.ts
@@ -9,13 +9,7 @@ import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
 export { h as jsx, h as jsxDEV, Fragment, h as jsxs } from '@vue/runtime-dom'
 
 export namespace JSX {
-  export interface Element extends VNode {}
-  export interface ElementClass {
-    $props: {}
-  }
-  export interface ElementAttributesProperty {
-    $props: {}
-  }
+  export type Element = VNode | Block
   export interface IntrinsicElements extends NativeElements {
     // allow arbitrary elements
     // @ts-ignore suppress ts:2374 = Duplicate string index signature.
diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
index 1fa1e326676..fc2bbd9c0dd 100644
--- a/packages/vue/jsx.d.ts
+++ b/packages/vue/jsx.d.ts
@@ -2,16 +2,11 @@
 // global JSX namespace registration
 // somehow we have to copy=pase the jsx-runtime types here to make TypeScript happy
 import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
+import type { Block } from '@vue/runtime-vapor'
 
 declare global {
   namespace JSX {
-    export interface Element extends VNode {}
-    export interface ElementClass {
-      $props: {}
-    }
-    export interface ElementAttributesProperty {
-      $props: {}
-    }
+    export type Element = VNode | Block
     export interface IntrinsicElements extends NativeElements {
       // allow arbitrary elements
       // @ts-ignore suppress ts:2374 = Duplicate string index signature.

From da57f926c01147ad75498f2ec80e4e9cf11940da Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sun, 31 Aug 2025 18:56:26 +0800
Subject: [PATCH 02/17] chore: add ArrayElement

---
 packages-private/dts-test/functionalComponent.test-d.tsx | 2 +-
 packages/vue/jsx.d.ts                                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages-private/dts-test/functionalComponent.test-d.tsx b/packages-private/dts-test/functionalComponent.test-d.tsx
index 30265c7a3a3..506985d241e 100644
--- a/packages-private/dts-test/functionalComponent.test-d.tsx
+++ b/packages-private/dts-test/functionalComponent.test-d.tsx
@@ -9,7 +9,7 @@ import { expectType } from './utils'
 
 // simple function signature
 const Foo = (props: { foo: number }) => h(Text, null, props.foo)
-const VaporComp = (props: { foo: number }) => document.createElement('div')
+const VaporComp = (props: { foo: number }) => [<div>123</div>]
 
 // TSX
 expectType<JSX.Element>(<Foo foo={1} />)
diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
index fc2bbd9c0dd..fb25f3885c1 100644
--- a/packages/vue/jsx.d.ts
+++ b/packages/vue/jsx.d.ts
@@ -6,7 +6,7 @@ import type { Block } from '@vue/runtime-vapor'
 
 declare global {
   namespace JSX {
-    export type Element = VNode | Block
+    export type Element = VNode | Block | Element[]
     export interface IntrinsicElements extends NativeElements {
       // allow arbitrary elements
       // @ts-ignore suppress ts:2374 = Duplicate string index signature.

From 7cef950570ac7c8e037e2f3f3240eb48d72fa798 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sun, 31 Aug 2025 20:58:09 +0800
Subject: [PATCH 03/17] chore: add RenderReturn

---
 packages-private/dts-test/tsx.test-d.tsx         | 4 ++--
 packages/runtime-vapor/src/apiDefineComponent.ts | 7 +++++--
 packages/runtime-vapor/src/component.ts          | 5 ++---
 packages/vue/jsx.d.ts                            | 4 ++--
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages-private/dts-test/tsx.test-d.tsx b/packages-private/dts-test/tsx.test-d.tsx
index 4d691e26226..7b9d20d7065 100644
--- a/packages-private/dts-test/tsx.test-d.tsx
+++ b/packages-private/dts-test/tsx.test-d.tsx
@@ -1,15 +1,15 @@
 // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
 import {
-  type Block,
   Fragment,
   KeepAlive,
+  type RenderReturn,
   Suspense,
   Teleport,
   type VNode,
 } from 'vue'
 import { expectType } from './utils'
 
-expectType<VNode | Block>(<div />)
+expectType<RenderReturn>(<div />)
 expectType<JSX.Element>(<div />)
 expectType<JSX.Element>(<div id="foo" />)
 expectType<JSX.Element>(<div>hello</div>)
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index d4cdee11c19..b56f2cd1ad6 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -32,6 +32,9 @@ export type VaporPublicProps = ReservedProps &
   AllowedComponentProps &
   ComponentCustomProps
 
+export type RenderReturn = VNode | Block | ArrayRenderReturn
+type ArrayRenderReturn = Array<RenderReturn>
+
 export type DefineVaporComponent<
   RuntimePropsOptions = {},
   RuntimePropsKeys extends string = string,
@@ -100,7 +103,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => Block | VNode,
+  ) => RenderReturn,
   extraOptions?: ObjectVaporComponent<
     (keyof Props)[],
     Emits,
@@ -125,7 +128,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => Block | VNode,
+  ) => RenderReturn,
   extraOptions?: ObjectVaporComponent<
     ComponentObjectPropsOptions<Props>,
     Emits,
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 8dfb0cbf93e..7f83268eb0e 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -14,7 +14,6 @@ import {
   type ObjectEmitsOptions,
   type ShallowUnwrapRef,
   type SuspenseBoundary,
-  type VNode,
   callWithErrorHandling,
   currentInstance,
   endMeasure,
@@ -67,7 +66,7 @@ import {
   insertionParent,
   resetInsertionState,
 } from './insertionState'
-import type { DefineVaporComponent } from './apiDefineComponent'
+import type { DefineVaporComponent, RenderReturn } from './apiDefineComponent'
 
 export { currentInstance } from '@vue/runtime-dom'
 
@@ -118,7 +117,7 @@ export interface ObjectVaporComponent<
     emit: EmitFn<Emits>,
     attrs: any,
     slots: StaticSlots,
-  ): Block | VNode | void
+  ): RenderReturn
 
   name?: string
   vapor?: boolean
diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
index fb25f3885c1..1783f47d8fc 100644
--- a/packages/vue/jsx.d.ts
+++ b/packages/vue/jsx.d.ts
@@ -2,11 +2,11 @@
 // global JSX namespace registration
 // somehow we have to copy=pase the jsx-runtime types here to make TypeScript happy
 import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
-import type { Block } from '@vue/runtime-vapor'
+import type { RenderReturn } from '@vue/runtime-vapor'
 
 declare global {
   namespace JSX {
-    export type Element = VNode | Block | Element[]
+    export type Element = RenderReturn
     export interface IntrinsicElements extends NativeElements {
       // allow arbitrary elements
       // @ts-ignore suppress ts:2374 = Duplicate string index signature.

From e32793e7af6c93e12fa43e6d9a86e5de10013a68 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sun, 31 Aug 2025 21:01:42 +0800
Subject: [PATCH 04/17] chore: update

---
 packages-private/dts-test/tsx.test-d.tsx         | 9 +--------
 packages/runtime-vapor/src/apiDefineComponent.ts | 3 +--
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages-private/dts-test/tsx.test-d.tsx b/packages-private/dts-test/tsx.test-d.tsx
index 7b9d20d7065..34e267d80cd 100644
--- a/packages-private/dts-test/tsx.test-d.tsx
+++ b/packages-private/dts-test/tsx.test-d.tsx
@@ -1,12 +1,5 @@
 // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
-import {
-  Fragment,
-  KeepAlive,
-  type RenderReturn,
-  Suspense,
-  Teleport,
-  type VNode,
-} from 'vue'
+import { Fragment, KeepAlive, type RenderReturn, Suspense, Teleport } from 'vue'
 import { expectType } from './utils'
 
 expectType<RenderReturn>(<div />)
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index b56f2cd1ad6..5be9791c357 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -32,8 +32,7 @@ export type VaporPublicProps = ReservedProps &
   AllowedComponentProps &
   ComponentCustomProps
 
-export type RenderReturn = VNode | Block | ArrayRenderReturn
-type ArrayRenderReturn = Array<RenderReturn>
+export type RenderReturn = VNode | Block | RenderReturn[]
 
 export type DefineVaporComponent<
   RuntimePropsOptions = {},

From 279a2eb1ff6bab715c8897be38fba06e456044a4 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Mon, 1 Sep 2025 08:45:02 +0800
Subject: [PATCH 05/17] chore: update

---
 packages/vue/jsx-runtime/index.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vue/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
index fe7b7eb24ee..b74ebd4b30e 100644
--- a/packages/vue/jsx-runtime/index.d.ts
+++ b/packages/vue/jsx-runtime/index.d.ts
@@ -7,9 +7,10 @@ import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
  * https://www.typescriptlang.org/tsconfig#jsxImportSource
  */
 export { h as jsx, h as jsxDEV, Fragment, h as jsxs } from '@vue/runtime-dom'
+import type { RenderReturn } from '@vue/runtime-vapor'
 
 export namespace JSX {
-  export type Element = VNode | Block
+  export type Element = RenderReturn
   export interface IntrinsicElements extends NativeElements {
     // allow arbitrary elements
     // @ts-ignore suppress ts:2374 = Duplicate string index signature.

From 00db3802882afe799e3c0d3eb9b3c487bdf05ca9 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Tue, 2 Sep 2025 13:49:55 +0800
Subject: [PATCH 06/17] feat: support __typeEl

---
 .../dts-test/defineVaporComponent.test-d.tsx  | 19 +++++++++++++
 .../runtime-vapor/src/apiDefineComponent.ts   | 27 ++++++++++++++-----
 packages/runtime-vapor/src/component.ts       |  6 +++--
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
index 47b4ef459ea..dc90e34e811 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -1041,6 +1041,7 @@ declare const MyButton: DefineVaporComponent<
   {},
   {},
   {},
+  Block,
   true,
   Readonly<ExtractPropTypes<{}>>,
   VaporPublicProps & AllowedComponentProps & ComponentCustomProps,
@@ -1196,6 +1197,24 @@ describe('__typeRefs backdoor, object syntax', () => {
   expectType<number>(refs.child.refs.foo)
 })
 
+describe('__typeEl backdoor', () => {
+  const Comp = defineVaporComponent({
+    __typeEl: {} as HTMLAnchorElement,
+  })
+  const c = new Comp()
+  expectType<HTMLAnchorElement>(c.block)
+
+  const Comp1 = defineVaporComponent({
+    render: () => document.createElement('a'),
+  })
+  const c1 = new Comp1()
+  expectType<HTMLAnchorElement>(c1.block)
+
+  const Comp2 = defineVaporComponent(() => document.createElement('a'))
+  const c2 = new Comp2()
+  expectType<HTMLAnchorElement>(c2.block)
+})
+
 defineVaporComponent({
   props: {
     foo: [String, null],
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index 5be9791c357..fbf36906bae 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -32,7 +32,10 @@ export type VaporPublicProps = ReservedProps &
   AllowedComponentProps &
   ComponentCustomProps
 
-export type RenderReturn = VNode | Block | RenderReturn[]
+export type RenderReturn<T extends Block = Block> =
+  | VNode
+  | T
+  | RenderReturn<T>[]
 
 export type DefineVaporComponent<
   RuntimePropsOptions = {},
@@ -42,6 +45,7 @@ export type DefineVaporComponent<
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
   TypeRefs extends Record<string, unknown> = {},
+  TypeEl extends Block = Block,
   MakeDefaultsOptional extends boolean = true,
   InferredProps = string extends RuntimePropsKeys
     ? ComponentObjectPropsOptions extends RuntimePropsOptions
@@ -62,6 +66,7 @@ export type DefineVaporComponent<
     Emits,
     Slots,
     Exposed,
+    TypeEl,
     TypeRefs
   >
 > &
@@ -78,12 +83,13 @@ export type DefineVaporSetupFnComponent<
   Emits extends EmitsOptions = {},
   Slots extends SlotsType = SlotsType,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeEl extends Block = Block,
   ResolvedProps extends Record<string, any> = Props &
     EmitsToProps<Emits> &
     VaporPublicProps,
 > = new (
   props?: ResolvedProps,
-) => VaporComponentInstance<ResolvedProps, Emits, Slots, Exposed>
+) => VaporComponentInstance<ResolvedProps, Emits, Slots, Exposed, TypeEl>
 
 // overload 1: direct setup function
 // (uses user defined props interface)
@@ -93,6 +99,7 @@ export function defineVaporComponent<
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeEl extends Block = Block,
 >(
   setup: (
     props: Props,
@@ -102,7 +109,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn,
+  ) => RenderReturn<TypeEl>,
   extraOptions?: ObjectVaporComponent<
     (keyof Props)[],
     Emits,
@@ -111,13 +118,14 @@ export function defineVaporComponent<
     Exposed
   > &
     ThisType<void>,
-): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed>
+): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeEl>
 export function defineVaporComponent<
   Props extends Record<string, any>,
   Emits extends EmitsOptions = {},
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeEl extends Block = Block,
 >(
   setup: (
     props: Props,
@@ -127,7 +135,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn,
+  ) => RenderReturn<TypeEl>,
   extraOptions?: ObjectVaporComponent<
     ComponentObjectPropsOptions<Props>,
     Emits,
@@ -136,7 +144,7 @@ export function defineVaporComponent<
     Exposed
   > &
     ThisType<void>,
-): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed>
+): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeEl>
 
 // overload 2: defineVaporComponent with options object, infer props from options
 export function defineVaporComponent<
@@ -163,6 +171,7 @@ export function defineVaporComponent<
         : ExtractPropTypes<RuntimePropsOptions>
       : { [key in RuntimePropsKeys]?: any },
   TypeRefs extends Record<string, unknown> = {},
+  TypeEl extends Block = Block,
 >(
   options: ObjectVaporComponent<
     RuntimePropsOptions | RuntimePropsKeys[],
@@ -170,6 +179,7 @@ export function defineVaporComponent<
     RuntimeEmitsKeys,
     Slots,
     Exposed,
+    TypeEl,
     InferredProps
   > & {
     /**
@@ -184,6 +194,10 @@ export function defineVaporComponent<
      * @private for language-tools use only
      */
     __typeRefs?: TypeRefs
+    /**
+     * @private for language-tools use only
+     */
+    __typeEl?: TypeEl
   } & ThisType<void>,
 ): DefineVaporComponent<
   RuntimePropsOptions,
@@ -193,6 +207,7 @@ export function defineVaporComponent<
   Slots,
   Exposed extends Block ? Record<string, any> : Exposed,
   TypeRefs,
+  TypeEl,
   // MakeDefaultsOptional - if TypeProps is provided, set to false to use
   // user props types verbatim
   unknown extends TypeProps ? true : false,
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 7f83268eb0e..b4473b190b0 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -101,6 +101,7 @@ export interface ObjectVaporComponent<
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeEl extends Block = Block,
   InferredProps = ComponentObjectPropsOptions extends Props
     ? {}
     : ExtractPropTypes<Props>,
@@ -117,7 +118,7 @@ export interface ObjectVaporComponent<
     emit: EmitFn<Emits>,
     attrs: any,
     slots: StaticSlots,
-  ): RenderReturn
+  ): RenderReturn<TypeEl>
 
   name?: string
   vapor?: boolean
@@ -362,6 +363,7 @@ export class VaporComponentInstance<
   Emits extends EmitsOptions = {},
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeEl extends Block = Block,
   Refs extends Record<string, any> = Record<string, any>,
 > implements GenericComponentInstance
 {
@@ -372,7 +374,7 @@ export class VaporComponentInstance<
   parent: GenericComponentInstance | null
   appContext: GenericAppContext
 
-  block: Block
+  block: TypeEl
   scope: EffectScope
 
   rawProps: RawProps

From 3e04d93a46a44895aecf1f26b235a73a4ecad15c Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Tue, 2 Sep 2025 16:08:30 +0800
Subject: [PATCH 07/17] refactor: use TypeEl instead of TypeBlock

---
 .../dts-test/defineVaporComponent.test-d.tsx  |  2 +-
 .../runtime-vapor/src/apiDefineComponent.ts   | 28 +++++++++----------
 packages/runtime-vapor/src/component.ts       | 10 +++----
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
index dc90e34e811..d5189bdfaf9 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -1040,8 +1040,8 @@ declare const MyButton: DefineVaporComponent<
   string,
   {},
   {},
-  {},
   Block,
+  {},
   true,
   Readonly<ExtractPropTypes<{}>>,
   VaporPublicProps & AllowedComponentProps & ComponentCustomProps,
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index fbf36906bae..d5e5ec6f3a0 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -44,8 +44,8 @@ export type DefineVaporComponent<
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeBlock extends Block = Block,
   TypeRefs extends Record<string, unknown> = {},
-  TypeEl extends Block = Block,
   MakeDefaultsOptional extends boolean = true,
   InferredProps = string extends RuntimePropsKeys
     ? ComponentObjectPropsOptions extends RuntimePropsOptions
@@ -66,7 +66,7 @@ export type DefineVaporComponent<
     Emits,
     Slots,
     Exposed,
-    TypeEl,
+    TypeBlock,
     TypeRefs
   >
 > &
@@ -83,13 +83,13 @@ export type DefineVaporSetupFnComponent<
   Emits extends EmitsOptions = {},
   Slots extends SlotsType = SlotsType,
   Exposed extends Record<string, any> = Record<string, any>,
-  TypeEl extends Block = Block,
+  TypeBlock extends Block = Block,
   ResolvedProps extends Record<string, any> = Props &
     EmitsToProps<Emits> &
     VaporPublicProps,
 > = new (
   props?: ResolvedProps,
-) => VaporComponentInstance<ResolvedProps, Emits, Slots, Exposed, TypeEl>
+) => VaporComponentInstance<ResolvedProps, Emits, Slots, Exposed, TypeBlock>
 
 // overload 1: direct setup function
 // (uses user defined props interface)
@@ -99,7 +99,7 @@ export function defineVaporComponent<
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
-  TypeEl extends Block = Block,
+  TypeBlock extends Block = Block,
 >(
   setup: (
     props: Props,
@@ -109,7 +109,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn<TypeEl>,
+  ) => RenderReturn<TypeBlock>,
   extraOptions?: ObjectVaporComponent<
     (keyof Props)[],
     Emits,
@@ -118,14 +118,14 @@ export function defineVaporComponent<
     Exposed
   > &
     ThisType<void>,
-): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeEl>
+): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeBlock>
 export function defineVaporComponent<
   Props extends Record<string, any>,
   Emits extends EmitsOptions = {},
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
-  TypeEl extends Block = Block,
+  TypeBlock extends Block = Block,
 >(
   setup: (
     props: Props,
@@ -135,7 +135,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn<TypeEl>,
+  ) => RenderReturn<TypeBlock>,
   extraOptions?: ObjectVaporComponent<
     ComponentObjectPropsOptions<Props>,
     Emits,
@@ -144,7 +144,7 @@ export function defineVaporComponent<
     Exposed
   > &
     ThisType<void>,
-): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeEl>
+): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeBlock>
 
 // overload 2: defineVaporComponent with options object, infer props from options
 export function defineVaporComponent<
@@ -171,7 +171,7 @@ export function defineVaporComponent<
         : ExtractPropTypes<RuntimePropsOptions>
       : { [key in RuntimePropsKeys]?: any },
   TypeRefs extends Record<string, unknown> = {},
-  TypeEl extends Block = Block,
+  TypeBlock extends Block = Block,
 >(
   options: ObjectVaporComponent<
     RuntimePropsOptions | RuntimePropsKeys[],
@@ -179,7 +179,7 @@ export function defineVaporComponent<
     RuntimeEmitsKeys,
     Slots,
     Exposed,
-    TypeEl,
+    TypeBlock,
     InferredProps
   > & {
     /**
@@ -197,7 +197,7 @@ export function defineVaporComponent<
     /**
      * @private for language-tools use only
      */
-    __typeEl?: TypeEl
+    __typeEl?: TypeBlock
   } & ThisType<void>,
 ): DefineVaporComponent<
   RuntimePropsOptions,
@@ -206,8 +206,8 @@ export function defineVaporComponent<
   RuntimeEmitsKeys,
   Slots,
   Exposed extends Block ? Record<string, any> : Exposed,
+  TypeBlock,
   TypeRefs,
-  TypeEl,
   // MakeDefaultsOptional - if TypeProps is provided, set to false to use
   // user props types verbatim
   unknown extends TypeProps ? true : false,
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index b4473b190b0..ab8e32f6c64 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -363,8 +363,8 @@ export class VaporComponentInstance<
   Emits extends EmitsOptions = {},
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
-  TypeEl extends Block = Block,
-  Refs extends Record<string, any> = Record<string, any>,
+  TypeBlock extends Block = Block,
+  TypeRefs extends Record<string, any> = Record<string, any>,
 > implements GenericComponentInstance
 {
   vapor: true
@@ -374,7 +374,7 @@ export class VaporComponentInstance<
   parent: GenericComponentInstance | null
   appContext: GenericAppContext
 
-  block: TypeEl
+  block: TypeBlock
   scope: EffectScope
 
   rawProps: RawProps
@@ -400,7 +400,7 @@ export class VaporComponentInstance<
   exposeProxy: ShallowUnwrapRef<Exposed> | null
 
   // for useTemplateRef()
-  refs: Refs
+  refs: TypeRefs
   // for provide / inject
   provides: Record<string, any>
   // for useId
@@ -467,7 +467,7 @@ export class VaporComponentInstance<
 
     this.emit = emit.bind(null, this) as any
     this.expose = expose.bind(null, this) as any
-    this.refs = EMPTY_OBJ as Refs
+    this.refs = EMPTY_OBJ as TypeRefs
     this.emitted =
       this.exposed =
       this.exposeProxy =

From fc91a792628c74a1a665a3217b597ba5b38df0fd Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Tue, 2 Sep 2025 16:15:38 +0800
Subject: [PATCH 08/17] chore: update

---
 packages/runtime-vapor/src/component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index ab8e32f6c64..39dbdff8c8f 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -101,7 +101,7 @@ export interface ObjectVaporComponent<
   RuntimeEmitsKeys extends string = string,
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
-  TypeEl extends Block = Block,
+  TypeBlock extends Block = Block,
   InferredProps = ComponentObjectPropsOptions extends Props
     ? {}
     : ExtractPropTypes<Props>,
@@ -118,7 +118,7 @@ export interface ObjectVaporComponent<
     emit: EmitFn<Emits>,
     attrs: any,
     slots: StaticSlots,
-  ): RenderReturn<TypeEl>
+  ): RenderReturn<TypeBlock>
 
   name?: string
   vapor?: boolean

From 2be44675d5a2b1def410239a5696222dd8d409e4 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Wed, 3 Sep 2025 00:02:42 +0800
Subject: [PATCH 09/17] feat: support setup for TypeBlock

---
 packages-private/dts-test/defineVaporComponent.test-d.tsx | 6 ++++++
 packages/runtime-vapor/src/component.ts                   | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
index d5189bdfaf9..13512764e46 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -1213,6 +1213,12 @@ describe('__typeEl backdoor', () => {
   const Comp2 = defineVaporComponent(() => document.createElement('a'))
   const c2 = new Comp2()
   expectType<HTMLAnchorElement>(c2.block)
+
+  const Comp3 = defineVaporComponent({
+    setup: () => document.createElement('a'),
+  })
+  const c3 = new Comp3()
+  expectType<HTMLAnchorElement>(c3.block)
 })
 
 defineVaporComponent({
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 39dbdff8c8f..c96bbf45f56 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -80,6 +80,7 @@ export type VaporSetupFn<
   Emits extends EmitsOptions = {},
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
+  TypeBlock extends Block = Block,
 > = (
   props: Readonly<Props>,
   ctx: {
@@ -88,7 +89,7 @@ export type VaporSetupFn<
     attrs: Record<string, any>
     expose: <T extends Record<string, any> = Exposed>(exposed: T) => void
   },
-) => Block | Exposed | Promise<Exposed> | void
+) => TypeBlock | Exposed | Promise<Exposed> | void
 
 export type FunctionalVaporComponent = VaporSetupFn &
   Omit<ObjectVaporComponent, 'setup'> & {
@@ -111,7 +112,7 @@ export interface ObjectVaporComponent<
   props?: Props
   emits?: Emits | RuntimeEmitsKeys[]
   slots?: Slots
-  setup?: VaporSetupFn<InferredProps, Emits, Slots, Exposed>
+  setup?: VaporSetupFn<InferredProps, Emits, Slots, Exposed, TypeBlock>
   render?(
     ctx: Exposed extends Block ? undefined : ShallowUnwrapRef<Exposed>,
     props: Readonly<InferredProps>,

From 31b851f029f5ca1744e027ab89eb0add010d24ad Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Thu, 4 Sep 2025 10:36:26 +0800
Subject: [PATCH 10/17] fix: typo

---
 packages/runtime-vapor/src/apiDefineComponent.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index d5e5ec6f3a0..403d0a7683c 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -21,7 +21,6 @@ import type {
   ExtractDefaultPropTypes,
   ExtractPropTypes,
   ReservedProps,
-  SlotsType,
   TypeEmitsToOptions,
   VNode,
 } from '@vue/runtime-dom'
@@ -81,7 +80,7 @@ export type DefineVaporComponent<
 export type DefineVaporSetupFnComponent<
   Props extends Record<string, any> = {},
   Emits extends EmitsOptions = {},
-  Slots extends SlotsType = SlotsType,
+  Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
   TypeBlock extends Block = Block,
   ResolvedProps extends Record<string, any> = Props &

From 902e00b601626ea9fdad01275d64a66377d71f61 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Thu, 4 Sep 2025 11:18:09 +0800
Subject: [PATCH 11/17] chore: add render test case

---
 .../dts-test/defineVaporComponent.test-d.tsx  | 23 +++++++++++++++++++
 packages/runtime-vapor/src/component.ts       |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
index 13512764e46..2ff56b67f0d 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -969,6 +969,29 @@ describe('slots', () => {
   )
 })
 
+describe('render', () => {
+  defineVaporComponent({
+    props: {
+      foo: Number,
+    },
+    emits: {
+      change: (e: number) => {},
+    },
+    slots: {} as { default: () => [] },
+    setup() {
+      return {
+        bar: '',
+      }
+    },
+    render(ctx, props, emit, attrs, slots) {
+      expectType<number | undefined>(props.foo)
+      expectType<string>(ctx.bar)
+      emit('change', 1)
+      return slots.default()
+    },
+  })
+})
+
 // #5885
 describe('should work when props type is incompatible with setup returned type ', () => {
   type SizeType = 'small' | 'big'
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index c96bbf45f56..63713afc824 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -118,7 +118,7 @@ export interface ObjectVaporComponent<
     props: Readonly<InferredProps>,
     emit: EmitFn<Emits>,
     attrs: any,
-    slots: StaticSlots,
+    slots: Slots,
   ): RenderReturn<TypeBlock>
 
   name?: string

From 6175e41bace742ec82a9e9a1e34b9d81444c9fc7 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sat, 6 Sep 2025 04:08:38 +0800
Subject: [PATCH 12/17] chore: update

---
 packages/runtime-core/src/componentPublicInstance.ts |  4 ++--
 packages/runtime-core/src/index.ts                   |  1 -
 packages/runtime-vapor/src/apiDefineComponent.ts     | 10 ++++++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index fb2e05eaaa6..3793f095aac 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -140,7 +140,7 @@ export type ComponentPublicInstanceConstructor<
     C,
     M
   > = ComponentPublicInstance<any>,
-  Props = T['$props'] & T['props'],
+  Props = any,
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
@@ -149,7 +149,7 @@ export type ComponentPublicInstanceConstructor<
   __isFragment?: never
   __isTeleport?: never
   __isSuspense?: never
-  new (props?: Props): T
+  new (props?: T['$props']): T
 }
 
 /**
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 76178a8dc42..a3a9648e2ea 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -299,7 +299,6 @@ export type {
 } from './componentEmits'
 export type {
   ComponentPublicInstance,
-  ComponentPublicInstanceConstructor,
   ComponentCustomProperties,
   CreateComponentPublicInstance,
   CreateComponentPublicInstanceWithMixins,
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index 403d0a7683c..16284c0409e 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -13,7 +13,6 @@ import type {
   AllowedComponentProps,
   ComponentCustomProps,
   ComponentObjectPropsOptions,
-  ComponentPublicInstanceConstructor,
   ComponentTypeEmits,
   EmitFn,
   EmitsOptions,
@@ -36,6 +35,13 @@ export type RenderReturn<T extends Block = Block> =
   | T
   | RenderReturn<T>[]
 
+type VaporComponentInstanceConstructor<T extends VaporComponentInstance> = {
+  __isFragment?: never
+  __isTeleport?: never
+  __isSuspense?: never
+  new (props?: T['props']): T
+}
+
 export type DefineVaporComponent<
   RuntimePropsOptions = {},
   RuntimePropsKeys extends string = string,
@@ -54,7 +60,7 @@ export type DefineVaporComponent<
   PublicProps = VaporPublicProps,
   ResolvedProps = InferredProps & EmitsToProps<Emits>,
   Defaults = ExtractDefaultPropTypes<RuntimePropsOptions>,
-> = ComponentPublicInstanceConstructor<
+> = VaporComponentInstanceConstructor<
   VaporComponentInstance<
     MakeDefaultsOptional extends true
       ? keyof Defaults extends never

From 3b7356862a515ca4bafbb50769cd4d63ab6b4170 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sat, 6 Sep 2025 17:17:45 +0800
Subject: [PATCH 13/17] chore: update

---
 .../dts-test/defineVaporComponent.test-d.tsx  | 38 +++++++++----------
 .../runtime-vapor/src/apiDefineComponent.ts   |  4 +-
 packages/runtime-vapor/src/component.ts       | 10 +++--
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
index 2ff56b67f0d..beadfd7d48e 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -611,15 +611,13 @@ describe('async setup', () => {
   })
 
   const vm = {} as InstanceType<typeof Comp>
-  if (vm.exposeProxy) {
-    // assert setup context unwrapping
-    expectType<number>(vm.exposeProxy.a)
-    expectType<string>(vm.exposeProxy.b.c.value)
-    expectType<GT>(vm.exposeProxy.d.e)
-
-    // setup context properties should be mutable
-    vm.exposeProxy.a = 2
-  }
+  // assert setup context unwrapping
+  expectType<number>(vm.exposeProxy.a)
+  expectType<string>(vm.exposeProxy.b.c.value)
+  expectType<GT>(vm.exposeProxy.d.e)
+
+  // setup context properties should be mutable
+  vm.exposeProxy.a = 2
 })
 
 // #5948
@@ -796,7 +794,7 @@ describe('function syntax w/ expose', () => {
     },
   )
   const foo = new Foo()
-  expectType<string>(foo.exposeProxy!.msg)
+  expectType<string>(foo.exposeProxy.msg)
 
   // runtime
   const Bar = defineVaporComponent(
@@ -808,7 +806,7 @@ describe('function syntax w/ expose', () => {
     },
   )
   const bar = new Bar()
-  expectType<string>(bar.exposeProxy!.msg)
+  expectType<string>(bar.exposeProxy.msg)
 })
 
 describe('function syntax w/ runtime props', () => {
@@ -1015,26 +1013,26 @@ describe('should work when props type is incompatible with setup returned type '
   expectType<
     VaporComponentInstance<{ size: SizeType }, {}, {}, { size: number }>
   >(CompA)
-  expectType<number>(CompA.exposeProxy!.size)
+  expectType<number>(CompA.exposeProxy.size)
   expectType<SizeType>(CompA.props.size)
 })
 
 describe('expose typing', () => {
   // types
-  const Foo = defineVaporComponent({
-    setup(
+  const Foo = defineVaporComponent(
+    (
       props: { some?: string },
       { expose }: { expose: (exposed: { a: number; b: string }) => void },
-    ) {
+    ) => {
       expose({ a: 1, b: '' })
     },
-  })
+  )
   const foo = new Foo()
   // internal should still be exposed
   foo.props
 
-  expectType<number>(foo.exposeProxy!.a)
-  expectType<string>(foo.exposeProxy!.b)
+  expectType<number>(foo.exposeProxy.a)
+  expectType<string>(foo.exposeProxy.b)
 
   // runtime
   const Bar = defineVaporComponent({
@@ -1050,8 +1048,8 @@ describe('expose typing', () => {
   // internal should still be exposed
   bar.props
 
-  expectType<number>(bar.exposeProxy!.a)
-  expectType<string>(bar.exposeProxy!.b)
+  expectType<number>(bar.exposeProxy.a)
+  expectType<string>(bar.exposeProxy.b)
 })
 
 // code generated by tsc / vue-tsc, make sure this continues to work
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index 16284c0409e..c719680d718 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -114,7 +114,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn<TypeBlock>,
+  ) => RenderReturn<TypeBlock> | void,
   extraOptions?: ObjectVaporComponent<
     (keyof Props)[],
     Emits,
@@ -140,7 +140,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn<TypeBlock>,
+  ) => RenderReturn<TypeBlock> | void,
   extraOptions?: ObjectVaporComponent<
     ComponentObjectPropsOptions<Props>,
     Emits,
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 63713afc824..6a47a1689d0 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -119,7 +119,7 @@ export interface ObjectVaporComponent<
     emit: EmitFn<Emits>,
     attrs: any,
     slots: Slots,
-  ): RenderReturn<TypeBlock>
+  ): RenderReturn<TypeBlock> | void
 
   name?: string
   vapor?: boolean
@@ -397,8 +397,10 @@ export class VaporComponentInstance<
   expose: (<T extends Record<string, any> = Exposed>(exposed: T) => void) &
     // compatible with vdom components
     string[]
-  exposed: Exposed | null
-  exposeProxy: ShallowUnwrapRef<Exposed> | null
+  exposed: Record<string, any> extends Exposed ? Exposed | null : Exposed
+  exposeProxy: Record<string, any> extends Exposed
+    ? Exposed | null
+    : ShallowUnwrapRef<Exposed>
 
   // for useTemplateRef()
   refs: TypeRefs
@@ -474,7 +476,7 @@ export class VaporComponentInstance<
       this.exposeProxy =
       this.propsDefaults =
       this.suspense =
-        null
+        null as any
 
     this.isMounted =
       this.isUnmounted =

From cb19c093ecc7c355193a9ffdbc252b869566aa8c Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sun, 7 Sep 2025 00:10:15 +0800
Subject: [PATCH 14/17] chore: remove any

---
 packages/runtime-vapor/src/component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 6a47a1689d0..47371e4972f 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -489,10 +489,10 @@ export class VaporComponentInstance<
     this.hasFallthrough = hasFallthroughAttrs(comp, rawProps)
     if (rawProps || comp.props) {
       const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp)
-      this.attrs = new Proxy(this, attrsHandlers as any)
+      this.attrs = new Proxy(this, attrsHandlers)
       this.props = (
         comp.props
-          ? new Proxy(this, propsHandlers! as any)
+          ? new Proxy(this, propsHandlers!)
           : isFunction(comp)
             ? this.attrs
             : EMPTY_OBJ

From bd21aeefebbbaaddf4b1b132c90b2a47d5d6b302 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Sun, 7 Sep 2025 10:27:32 +0800
Subject: [PATCH 15/17] chore: add null for exposedProxy

---
 .../dts-test/defineVaporComponent.test-d.tsx  | 30 ++++++++++---------
 packages/runtime-vapor/src/component.ts       |  8 ++---
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/defineVaporComponent.test-d.tsx
index beadfd7d48e..93993a84cda 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/defineVaporComponent.test-d.tsx
@@ -611,13 +611,15 @@ describe('async setup', () => {
   })
 
   const vm = {} as InstanceType<typeof Comp>
-  // assert setup context unwrapping
-  expectType<number>(vm.exposeProxy.a)
-  expectType<string>(vm.exposeProxy.b.c.value)
-  expectType<GT>(vm.exposeProxy.d.e)
-
-  // setup context properties should be mutable
-  vm.exposeProxy.a = 2
+  if (vm.exposed && vm.exposeProxy) {
+    // assert setup context unwrapping
+    expectType<number>(vm.exposeProxy.a)
+    expectType<string>(vm.exposeProxy.b.c.value)
+    expectType<GT>(vm.exposeProxy.d.e)
+
+    // setup context properties should be mutable
+    vm.exposed.a.value = 2
+  }
 })
 
 // #5948
@@ -794,7 +796,7 @@ describe('function syntax w/ expose', () => {
     },
   )
   const foo = new Foo()
-  expectType<string>(foo.exposeProxy.msg)
+  expectType<string>(foo.exposeProxy!.msg)
 
   // runtime
   const Bar = defineVaporComponent(
@@ -806,7 +808,7 @@ describe('function syntax w/ expose', () => {
     },
   )
   const bar = new Bar()
-  expectType<string>(bar.exposeProxy.msg)
+  expectType<string>(bar.exposeProxy!.msg)
 })
 
 describe('function syntax w/ runtime props', () => {
@@ -1013,7 +1015,7 @@ describe('should work when props type is incompatible with setup returned type '
   expectType<
     VaporComponentInstance<{ size: SizeType }, {}, {}, { size: number }>
   >(CompA)
-  expectType<number>(CompA.exposeProxy.size)
+  expectType<number>(CompA.exposeProxy!.size)
   expectType<SizeType>(CompA.props.size)
 })
 
@@ -1031,8 +1033,8 @@ describe('expose typing', () => {
   // internal should still be exposed
   foo.props
 
-  expectType<number>(foo.exposeProxy.a)
-  expectType<string>(foo.exposeProxy.b)
+  expectType<number>(foo.exposeProxy!.a)
+  expectType<string>(foo.exposeProxy!.b)
 
   // runtime
   const Bar = defineVaporComponent({
@@ -1048,8 +1050,8 @@ describe('expose typing', () => {
   // internal should still be exposed
   bar.props
 
-  expectType<number>(bar.exposeProxy.a)
-  expectType<string>(bar.exposeProxy.b)
+  expectType<number>(bar.exposeProxy!.a)
+  expectType<string>(bar.exposeProxy!.b)
 })
 
 // code generated by tsc / vue-tsc, make sure this continues to work
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 47371e4972f..8ffd564d2e4 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -397,10 +397,8 @@ export class VaporComponentInstance<
   expose: (<T extends Record<string, any> = Exposed>(exposed: T) => void) &
     // compatible with vdom components
     string[]
-  exposed: Record<string, any> extends Exposed ? Exposed | null : Exposed
-  exposeProxy: Record<string, any> extends Exposed
-    ? Exposed | null
-    : ShallowUnwrapRef<Exposed>
+  exposed: Exposed | null
+  exposeProxy: ShallowUnwrapRef<Exposed> | null
 
   // for useTemplateRef()
   refs: TypeRefs
@@ -476,7 +474,7 @@ export class VaporComponentInstance<
       this.exposeProxy =
       this.propsDefaults =
       this.suspense =
-        null as any
+        null
 
     this.isMounted =
       this.isUnmounted =

From f7d7d7a64bb6fa8a5f812b786999f7709c6e3434 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Mon, 22 Sep 2025 00:09:03 +0800
Subject: [PATCH 16/17] chore: update

---
 packages/runtime-vapor/src/component.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 8ffd564d2e4..8ccd9fe0e8d 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -37,7 +37,13 @@ import {
   setActiveSub,
   unref,
 } from '@vue/reactivity'
-import { EMPTY_OBJ, invokeArrayFns, isFunction, isString } from '@vue/shared'
+import {
+  EMPTY_OBJ,
+  type Prettify,
+  invokeArrayFns,
+  isFunction,
+  isString,
+} from '@vue/shared'
 import {
   type DynamicPropsSource,
   type RawProps,
@@ -398,7 +404,7 @@ export class VaporComponentInstance<
     // compatible with vdom components
     string[]
   exposed: Exposed | null
-  exposeProxy: ShallowUnwrapRef<Exposed> | null
+  exposeProxy: Prettify<ShallowUnwrapRef<Exposed>> | null
 
   // for useTemplateRef()
   refs: TypeRefs

From 22c7903c2e22d1aaf40d911e93febfbf31f185ac Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Wed, 22 Oct 2025 21:36:06 +0800
Subject: [PATCH 17/17] chore: revert jsx.d.ts

---
 package.json                                  |  2 +-
 .../dts-test/functionalComponent.test-d.tsx   |  4 -
 packages-private/dts-test/tsconfig.test.json  |  3 +-
 packages-private/dts-test/tsx.test-d.tsx      |  4 +-
 packages-private/dts-test/utils.d.ts          |  3 -
 .../defineVaporComponent.test-d.tsx           |  4 +-
 .../vapor/functionalComponent.test-d.tsx      | 82 +++++++++++++++++++
 packages-private/dts-test/vapor/jsx.d.ts      | 11 +++
 packages-private/dts-test/vapor/tsconfig.json | 11 +++
 .../runtime-core/src/apiDefineComponent.ts    |  2 +-
 .../__tests__/apiSetupContext.spec.ts         |  4 +-
 .../runtime-vapor/__tests__/component.spec.ts |  1 +
 .../runtime-vapor/src/apiDefineComponent.ts   | 17 ++--
 packages/runtime-vapor/src/component.ts       | 40 +++++----
 .../src/components/Transition.ts              |  2 +-
 packages/runtime-vapor/src/fragment.ts        |  6 +-
 packages/runtime-vapor/src/index.ts           | 11 ++-
 packages/vue/jsx-runtime/index.d.ts           |  9 +-
 packages/vue/jsx.d.ts                         |  9 +-
 19 files changed, 172 insertions(+), 53 deletions(-)
 rename packages-private/dts-test/{ => vapor}/defineVaporComponent.test-d.tsx (99%)
 create mode 100644 packages-private/dts-test/vapor/functionalComponent.test-d.tsx
 create mode 100644 packages-private/dts-test/vapor/jsx.d.ts
 create mode 100644 packages-private/dts-test/vapor/tsconfig.json

diff --git a/package.json b/package.json
index 42b98b10e37..50e7cb3da63 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "test-e2e-vapor": "pnpm run prepare-e2e-vapor && vitest --project e2e-vapor",
     "prepare-e2e-vapor": "node scripts/build.js -f cjs+esm-bundler+esm-bundler-runtime && pnpm run -C packages-private/vapor-e2e-test build",
     "test-dts": "run-s build-dts test-dts-only",
-    "test-dts-only": "tsc -p packages-private/dts-built-test/tsconfig.json && tsc -p ./packages-private/dts-test/tsconfig.test.json",
+    "test-dts-only": "tsc -p packages-private/dts-built-test/tsconfig.json && tsc -p ./packages-private/dts-test/tsconfig.test.json && tsc -p ./packages-private/dts-test/vapor/tsconfig.json",
     "test-coverage": "vitest run --project unit* --coverage",
     "prebench": "node scripts/build.js -pf esm-browser reactivity",
     "prebench-compare": "node scripts/build.js -pf esm-browser reactivity",
diff --git a/packages-private/dts-test/functionalComponent.test-d.tsx b/packages-private/dts-test/functionalComponent.test-d.tsx
index 506985d241e..04eda68b50a 100644
--- a/packages-private/dts-test/functionalComponent.test-d.tsx
+++ b/packages-private/dts-test/functionalComponent.test-d.tsx
@@ -9,15 +9,11 @@ import { expectType } from './utils'
 
 // simple function signature
 const Foo = (props: { foo: number }) => h(Text, null, props.foo)
-const VaporComp = (props: { foo: number }) => [<div>123</div>]
 
 // TSX
 expectType<JSX.Element>(<Foo foo={1} />)
 expectType<JSX.Element>(<Foo foo={1} key="1" />)
 expectType<JSX.Element>(<Foo foo={1} ref="ref" />)
-expectType<JSX.Element>(<VaporComp foo={1} />)
-expectType<JSX.Element>(<VaporComp foo={1} key="1" />)
-expectType<JSX.Element>(<VaporComp foo={1} ref="ref" />)
 // @ts-expect-error
 ;<Foo />
 //  @ts-expect-error
diff --git a/packages-private/dts-test/tsconfig.test.json b/packages-private/dts-test/tsconfig.test.json
index ea058b1d826..42209556c59 100644
--- a/packages-private/dts-test/tsconfig.test.json
+++ b/packages-private/dts-test/tsconfig.test.json
@@ -5,7 +5,8 @@
     "module": "esnext",
     "strict": true,
     "moduleResolution": "node",
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext", "dom"],
+    "types": ["vue/jsx"]
   },
   "include": ["./*"]
 }
diff --git a/packages-private/dts-test/tsx.test-d.tsx b/packages-private/dts-test/tsx.test-d.tsx
index 34e267d80cd..0cd380f0447 100644
--- a/packages-private/dts-test/tsx.test-d.tsx
+++ b/packages-private/dts-test/tsx.test-d.tsx
@@ -1,8 +1,8 @@
 // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
-import { Fragment, KeepAlive, type RenderReturn, Suspense, Teleport } from 'vue'
+import { Fragment, KeepAlive, Suspense, Teleport, type VNode } from 'vue'
 import { expectType } from './utils'
 
-expectType<RenderReturn>(<div />)
+expectType<VNode>(<div />)
 expectType<JSX.Element>(<div />)
 expectType<JSX.Element>(<div id="foo" />)
 expectType<JSX.Element>(<div>hello</div>)
diff --git a/packages-private/dts-test/utils.d.ts b/packages-private/dts-test/utils.d.ts
index c478b30cb6f..158ce092b1c 100644
--- a/packages-private/dts-test/utils.d.ts
+++ b/packages-private/dts-test/utils.d.ts
@@ -1,9 +1,6 @@
 // This directory contains a number of d.ts assertions
 // use \@ts-expect-error where errors are expected.
 
-// register global JSX
-import 'vue/jsx'
-
 export function describe(_name: string, _fn: () => void): void
 export function test(_name: string, _fn: () => any): void
 
diff --git a/packages-private/dts-test/defineVaporComponent.test-d.tsx b/packages-private/dts-test/vapor/defineVaporComponent.test-d.tsx
similarity index 99%
rename from packages-private/dts-test/defineVaporComponent.test-d.tsx
rename to packages-private/dts-test/vapor/defineVaporComponent.test-d.tsx
index 93993a84cda..f51c41f7204 100644
--- a/packages-private/dts-test/defineVaporComponent.test-d.tsx
+++ b/packages-private/dts-test/vapor/defineVaporComponent.test-d.tsx
@@ -17,7 +17,9 @@ import {
   reactive,
   ref,
 } from 'vue'
-import { type IsAny, type IsUnion, describe, expectType } from './utils'
+import './jsx'
+import { type IsAny, type IsUnion, describe, expectType } from '../utils'
+import '../built.test-d'
 
 describe('with object props', () => {
   interface ExpectedProps {
diff --git a/packages-private/dts-test/vapor/functionalComponent.test-d.tsx b/packages-private/dts-test/vapor/functionalComponent.test-d.tsx
new file mode 100644
index 00000000000..b2ab5764447
--- /dev/null
+++ b/packages-private/dts-test/vapor/functionalComponent.test-d.tsx
@@ -0,0 +1,82 @@
+import type { FunctionalVaporComponent } from 'vue'
+import { expectType } from '../utils'
+import type { Block } from 'vue'
+
+// simple function signature
+const VaporComp = (props: { foo: number }) => [<div>123</div>]
+
+// TSX
+expectType<JSX.Element>(<VaporComp foo={1} />)
+expectType<JSX.Element>(<VaporComp foo={1} key="1" />)
+expectType<JSX.Element>(<VaporComp foo={1} ref="ref" />)
+// @ts-expect-error
+;<Foo />
+//  @ts-expect-error
+;<Foo foo="bar" />
+//  @ts-expect-error
+;<Foo baz="bar" />
+
+// Explicit signature with props + emits
+const Bar: FunctionalVaporComponent<
+  { foo: number },
+  { update: (value: number) => void }
+> = (props, { emit }) => {
+  expectType<number>(props.foo)
+
+  emit('update', 123)
+  //  @ts-expect-error
+  emit('nope')
+  //  @ts-expect-error
+  emit('update')
+  //  @ts-expect-error
+  emit('update', 'nope')
+  return []
+}
+
+// assigning runtime options
+Bar.props = {
+  foo: Number,
+}
+//  @ts-expect-error
+Bar.props = { foo: String }
+
+Bar.emits = {
+  update: value => value > 1,
+}
+//  @ts-expect-error
+Bar.emits = { baz: () => void 0 }
+
+// TSX
+expectType<JSX.Element>(<Bar foo={1} onUpdate={() => {}} />)
+//  @ts-expect-error
+;<Foo />
+//  @ts-expect-error
+;<Bar foo="bar" />
+//  @ts-expect-error
+;<Foo baz="bar" />
+
+const Quux: FunctionalVaporComponent<
+  {},
+  {},
+  {
+    default: (props: { foo: number }) => Block
+    optional?: (props: { foo: number }) => Block
+  }
+> = (props, { emit, slots }) => {
+  expectType<{
+    default: (scope: { foo: number }) => Block
+    optional?: (scope: { foo: number }) => Block
+  }>(slots)
+
+  slots.default({ foo: 123 })
+  // @ts-expect-error
+  slots.default({ foo: 'fesf' })
+
+  slots.optional?.({ foo: 123 })
+  // @ts-expect-error
+  slots.optional?.({ foo: 'fesf' })
+  // @ts-expect-error
+  slots.optional({ foo: 123 })
+  return []
+}
+;<Quux />
diff --git a/packages-private/dts-test/vapor/jsx.d.ts b/packages-private/dts-test/vapor/jsx.d.ts
new file mode 100644
index 00000000000..671e4b70b7f
--- /dev/null
+++ b/packages-private/dts-test/vapor/jsx.d.ts
@@ -0,0 +1,11 @@
+import type { NativeElements, ReservedProps, VaporRenderResult } from 'vue'
+
+declare global {
+  namespace JSX {
+    export type Element = VaporRenderResult
+    export interface IntrinsicElements extends NativeElements {
+      [name: string]: any
+    }
+    export interface IntrinsicAttributes extends ReservedProps {}
+  }
+}
diff --git a/packages-private/dts-test/vapor/tsconfig.json b/packages-private/dts-test/vapor/tsconfig.json
new file mode 100644
index 00000000000..c6992a14d13
--- /dev/null
+++ b/packages-private/dts-test/vapor/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "strict": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["."]
+}
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 1ee45be365c..68155e831a3 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -155,7 +155,7 @@ export function defineComponent<
   setup: (
     props: Props,
     ctx: SetupContext<E, S>,
-  ) => RenderFunction | Promise<RenderFunction> | {},
+  ) => RenderFunction | Promise<RenderFunction>,
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: (keyof Props)[]
     emits?: E | EE[]
diff --git a/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts b/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
index 16abbbd7a24..26439dc7a52 100644
--- a/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
+++ b/packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
@@ -54,7 +54,7 @@ describe('api: setup context', () => {
         })
         const n = createTextNode()
         renderEffect(() => {
-          setText(n, props.count + '')
+          setText(n, String(props.count))
         })
         return n
       },
@@ -191,7 +191,7 @@ describe('api: setup context', () => {
           emit('inc', props.count + 1)
         })
         const n = createTextNode()
-        renderEffect(() => setText(n, props.count + ''))
+        renderEffect(() => setText(n, String(props.count)))
         insert(n, n0)
         return n0
       },
diff --git a/packages/runtime-vapor/__tests__/component.spec.ts b/packages/runtime-vapor/__tests__/component.spec.ts
index fa888bb68cb..39b6c1c6e45 100644
--- a/packages/runtime-vapor/__tests__/component.spec.ts
+++ b/packages/runtime-vapor/__tests__/component.spec.ts
@@ -396,6 +396,7 @@ describe('component', () => {
   })
 
   it('warn if functional vapor component not return a block', () => {
+    // @ts-expect-error
     define(() => {
       return () => {}
     }).render()
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index c719680d718..e49f7798b14 100644
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -1,8 +1,4 @@
-import type {
-  ObjectVaporComponent,
-  VaporComponent,
-  VaporComponentInstance,
-} from './component'
+import type { ObjectVaporComponent, VaporComponentInstance } from './component'
 import {
   type IsKeyValues,
   type Prettify,
@@ -30,10 +26,7 @@ export type VaporPublicProps = ReservedProps &
   AllowedComponentProps &
   ComponentCustomProps
 
-export type RenderReturn<T extends Block = Block> =
-  | VNode
-  | T
-  | RenderReturn<T>[]
+export type VaporRenderResult<T = Block> = VNode | T | VaporRenderResult<T>[]
 
 type VaporComponentInstanceConstructor<T extends VaporComponentInstance> = {
   __isFragment?: never
@@ -114,7 +107,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn<TypeBlock> | void,
+  ) => VaporRenderResult<TypeBlock> | void,
   extraOptions?: ObjectVaporComponent<
     (keyof Props)[],
     Emits,
@@ -140,7 +133,7 @@ export function defineVaporComponent<
       attrs: Record<string, any>
       expose: (exposed: Exposed) => void
     },
-  ) => RenderReturn<TypeBlock> | void,
+  ) => VaporRenderResult<TypeBlock> | void,
   extraOptions?: ObjectVaporComponent<
     ComponentObjectPropsOptions<Props>,
     Emits,
@@ -220,7 +213,7 @@ export function defineVaporComponent<
 >
 
 /*! #__NO_SIDE_EFFECTS__ */
-export function defineVaporComponent(comp: VaporComponent, extraOptions?: any) {
+export function defineVaporComponent(comp: any, extraOptions?: any) {
   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.
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 6098316c062..141d2ef9a8c 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -6,6 +6,7 @@ import {
   EffectScope,
   type EmitFn,
   type EmitsOptions,
+  type EmitsToProps,
   ErrorCodes,
   type ExtractPropTypes,
   type GenericAppContext,
@@ -97,7 +98,10 @@ import {
   isLastInsertion,
   resetInsertionState,
 } from './insertionState'
-import type { DefineVaporComponent, RenderReturn } from './apiDefineComponent'
+import type {
+  DefineVaporComponent,
+  VaporRenderResult,
+} from './apiDefineComponent'
 import { DynamicFragment } from './fragment'
 
 export { currentInstance } from '@vue/runtime-dom'
@@ -107,31 +111,27 @@ export type VaporComponent =
   | ObjectVaporComponent
   | DefineVaporComponent
 
-export type VaporSetupFn<
+export type FunctionalVaporComponent<
   Props = {},
   Emits extends EmitsOptions = {},
   Slots extends StaticSlots = StaticSlots,
   Exposed extends Record<string, any> = Record<string, any>,
-  TypeBlock extends Block = Block,
-> = (
-  props: Readonly<Props>,
+> = ((
+  props: Readonly<Props & EmitsToProps<Emits>>,
   ctx: {
     emit: EmitFn<Emits>
     slots: Slots
     attrs: Record<string, any>
     expose: <T extends Record<string, any> = Exposed>(exposed: T) => void
   },
-) => TypeBlock | Exposed | Promise<Exposed> | void
-
-export type FunctionalVaporComponent<
-  Props = {},
-  Emits extends EmitsOptions = {},
-  Slots extends StaticSlots = StaticSlots,
-  Exposed extends Record<string, any> = Record<string, any>,
-> = VaporSetupFn<Props, Emits, Slots, Exposed> &
-  Omit<ObjectVaporComponent, 'setup'> & {
+) => VaporRenderResult) &
+  Omit<
+    ObjectVaporComponent<ComponentPropsOptions<Props>, Emits, string, Slots>,
+    'setup'
+  > & {
     displayName?: string
   } & SharedInternalOptions
+
 export interface ObjectVaporComponent<
   Props = ComponentPropsOptions,
   Emits extends EmitsOptions = {},
@@ -149,14 +149,22 @@ export interface ObjectVaporComponent<
   props?: Props
   emits?: Emits | RuntimeEmitsKeys[]
   slots?: Slots
-  setup?: VaporSetupFn<InferredProps, Emits, Slots, Exposed, TypeBlock>
+  setup?: (
+    props: Readonly<InferredProps>,
+    ctx: {
+      emit: EmitFn<Emits>
+      slots: Slots
+      attrs: Record<string, any>
+      expose: <T extends Record<string, any> = Exposed>(exposed: T) => void
+    },
+  ) => TypeBlock | Exposed | Promise<Exposed> | void
   render?(
     ctx: Exposed extends Block ? undefined : ShallowUnwrapRef<Exposed>,
     props: Readonly<InferredProps>,
     emit: EmitFn<Emits>,
     attrs: any,
     slots: Slots,
-  ): RenderReturn<TypeBlock> | void
+  ): VaporRenderResult<TypeBlock> | void
 
   name?: string
   vapor?: boolean
diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts
index 71fef405800..d50b8569abd 100644
--- a/packages/runtime-vapor/src/components/Transition.ts
+++ b/packages/runtime-vapor/src/components/Transition.ts
@@ -70,7 +70,7 @@ export const VaporTransition: FunctionalVaporComponent<TransitionProps> =
     }
 
     const children = (slots.default && slots.default()) as any as Block
-    if (!children) return
+    if (!children) return []
 
     const instance = currentInstance! as VaporComponentInstance
     const { mode } = props
diff --git a/packages/runtime-vapor/src/fragment.ts b/packages/runtime-vapor/src/fragment.ts
index 07f1243e4e5..b691e827e56 100644
--- a/packages/runtime-vapor/src/fragment.ts
+++ b/packages/runtime-vapor/src/fragment.ts
@@ -107,7 +107,7 @@ export class DynamicFragment extends VaporFragment {
       const mode = transition && transition.mode
       if (mode) {
         applyTransitionLeaveHooks(this.nodes, transition, () =>
-          this.render(render, instance, transition, parent),
+          this.renderBranch(render, instance, transition, parent),
         )
         parent && remove(this.nodes, parent)
         if (mode === 'out-in') {
@@ -119,7 +119,7 @@ export class DynamicFragment extends VaporFragment {
       }
     }
 
-    this.render(render, instance, transition, parent)
+    this.renderBranch(render, instance, transition, parent)
 
     if (this.fallback) {
       // set fallback for nested fragments
@@ -149,7 +149,7 @@ export class DynamicFragment extends VaporFragment {
     if (isHydrating) this.hydrate()
   }
 
-  private render(
+  private renderBranch(
     render: BlockFn | undefined,
     instance: GenericComponentInstance,
     transition: VaporTransitionHooks | undefined,
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index a9d919f8175..a37ef71f65d 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -1,6 +1,11 @@
 // public APIs
 export { createVaporApp, createVaporSSRApp } from './apiCreateApp'
-export { defineVaporComponent } from './apiDefineComponent'
+export {
+  defineVaporComponent,
+  type DefineVaporComponent,
+  type VaporPublicProps,
+  type VaporRenderResult,
+} from './apiDefineComponent'
 export { defineVaporAsyncComponent } from './apiDefineAsyncComponent'
 export { vaporInteropPlugin } from './vdomInterop'
 export type { VaporDirective } from './directives/custom'
@@ -8,12 +13,14 @@ export { VaporTeleportImpl as VaporTeleport } from './components/Teleport'
 export { VaporKeepAliveImpl as VaporKeepAlive } from './components/KeepAlive'
 
 // compiler-use only
-export { insert, prepend, remove } from './block'
+export { insert, prepend, remove, type Block } from './block'
 export { setInsertionState } from './insertionState'
 export {
   createComponent,
   createComponentWithFallback,
   isVaporComponent,
+  type FunctionalVaporComponent,
+  type VaporComponentInstance,
 } from './component'
 export { renderEffect } from './renderEffect'
 export {
diff --git a/packages/vue/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
index b74ebd4b30e..af5ffe2ac24 100644
--- a/packages/vue/jsx-runtime/index.d.ts
+++ b/packages/vue/jsx-runtime/index.d.ts
@@ -7,10 +7,15 @@ import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
  * https://www.typescriptlang.org/tsconfig#jsxImportSource
  */
 export { h as jsx, h as jsxDEV, Fragment, h as jsxs } from '@vue/runtime-dom'
-import type { RenderReturn } from '@vue/runtime-vapor'
 
 export namespace JSX {
-  export type Element = RenderReturn
+  export interface Element extends VNode {}
+  export interface ElementClass {
+    $props: {}
+  }
+  export interface ElementAttributesProperty {
+    $props: {}
+  }
   export interface IntrinsicElements extends NativeElements {
     // allow arbitrary elements
     // @ts-ignore suppress ts:2374 = Duplicate string index signature.
diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
index 1783f47d8fc..1fa1e326676 100644
--- a/packages/vue/jsx.d.ts
+++ b/packages/vue/jsx.d.ts
@@ -2,11 +2,16 @@
 // global JSX namespace registration
 // somehow we have to copy=pase the jsx-runtime types here to make TypeScript happy
 import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
-import type { RenderReturn } from '@vue/runtime-vapor'
 
 declare global {
   namespace JSX {
-    export type Element = RenderReturn
+    export interface Element extends VNode {}
+    export interface ElementClass {
+      $props: {}
+    }
+    export interface ElementAttributesProperty {
+      $props: {}
+    }
     export interface IntrinsicElements extends NativeElements {
       // allow arbitrary elements
       // @ts-ignore suppress ts:2374 = Duplicate string index signature.