feat(runtime-vapor): implement defineVaporComponent types

[zhiyuanzmj]

1. defineVaporComponent types.

• Functional defineVaporComponent

import { computed, type ComputedRef, type Block } from 'vue'

const Comp = defineVaporComponent(
    <T extends number>(
      props: { foo: T },
      {
        expose,
        slots,
      }: {
        slots: { default?: (props: { foo: T }) => Block }
        expose: (exposed: { double: ComputedRef<T> }) => void
      },
    ) => {
      const double = computed(() => (props.foo * 2) as T)
      expose({ double })
      return slots.default!({ foo: props.foo })
    },
)

const comp = new Comp<1>({ foo: 1 })
comp.props.foo === ({} as 1)
comp.exposeProxy?.double === ({} as 1)
comp.slots === ({} as { default?: (props: { foo: 1 }) => Block })

• Options defineVaporComponent

const Comp = defineVaporComponent({
  props: {
    foo: {
      type: Number,
      required: true,
    }
  },
  slots: {} as { default?: (props: { foo: number }) => Block }
  setup(props){
    const double = computed(() => props.foo * 2)
    return {
      double
    }
  },
  render(ctx, props, emit, attrs, slots){
    return slots.default?.({ foo: props.foo })
  }
})

const comp = new Comp({ foo: 1 })
comp.props.foo === {} as number
comp.exposeProxy?.double === {} as number
comp.slots === ({} as { default?: (props: { foo: number }) => Block })

2. Remove JSX.ElementAttributesProperty and JSX.ElementClass to support Vapor and VDom co-usage.

// jsx.d.ts
declare global {
  namespace JSX {
    export type Element = VNode | Block
  }
}

Using the constructor's first parameter as JSX props instead.

interface Constructor<P = any> {
  new (props?: P): { $props: P }
  //   ^^^^^^^^^
}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	85.2 kB	29.9 kB	26.4 kB
runtime-dom.global.prod.js	108 kB	40.5 kB	36.5 kB
vue.global.prod.js	166 kB	60.5 kB	53.9 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.8 kB	17.2 kB
createApp	57.2 kB	22 kB	20.1 kB
createApp + vaporInteropPlugin	96 kB (+30 B)	35.4 kB (-4 B)	31.9 kB (-71 B)
createVaporApp	42 kB (+22 B)	15.5 kB (-8 B)	14.1 kB (+2 B)
createSSRApp	61.6 kB	23.8 kB	21.7 kB
defineCustomElement	63.3 kB	23.8 kB	21.7 kB
overall	71.9 kB	27.2 kB	24.8 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13831

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13831

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13831

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13831

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@13831

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13831

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13831

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13831

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@13831

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13831

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13831

vue

npm i https://pkg.pr.new/vue@13831

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13831

commit: 8b56f2d

[netlify]

❌ Deploy Preview for vue-sfc-playground failed. Why did it fail? →

Name	Link
🔨 Latest commit	f7d7d7a
🔍 Latest deploy log	https://app.netlify.com/projects/vue-sfc-playground/deploys/68d02335be19150008d67045

[Copilot]

Pull request overview

This PR implements comprehensive TypeScript type definitions for defineVaporComponent with support for both functional and object-based component definitions. It adds strong typing for props, emits, slots, and expose mechanisms, while also enabling co-usage of Vapor and VDom by adjusting JSX type definitions.

• Enhanced type inference: Added DefineVaporComponent and related types with full generic support for props, emits, slots, and exposed values
• Improved component signatures: Updated VaporComponentInstance, FunctionalVaporComponent, and ObjectVaporComponent with proper generic parameters
• JSX compatibility: Modified constructor signatures to use new (props?: P) pattern, enabling Vapor and VDom co-usage in JSX

Reviewed changes

Copilot reviewed 26 out of 28 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/runtime-vapor/src/apiDefineComponent.ts	Adds comprehensive type overloads and exports for defineVaporComponent
packages/runtime-vapor/src/component.ts	Updates component types with generic parameters for props, emits, slots, and exposed values
packages/runtime-vapor/src/index.ts	Exports new type definitions for public API
packages/runtime-vapor/src/fragment.ts	Renames internal render method to renderBranch for clarity
packages/runtime-vapor/src/components/Transition.ts	Updates function signature and return type consistency
packages/runtime-core/src/h.ts	Updates constructor signature to new (props?: P) pattern
packages/runtime-core/src/components/*.ts	Updates constructor signatures for Teleport, Suspense, KeepAlive
packages-private/dts-test/vapor/*.tsx	Adds comprehensive type tests for new Vapor component types
packages-private/dts-test/tsconfig.test.json	Configures JSX types for testing
test files	Adds String() conversions and type assertions where needed for stricter types

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The value assigned to c here is unused.

[zhiyuanzmj]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
router	❌ failure	❌ failure
radix-vue	✅ success	✅ success
nuxt	❌ failure	✅ success
test-utils	❌ failure	✅ success
pinia	✅ success	✅ success
quasar	✅ success	✅ success
primevue	✅ success	✅ success
language-tools	✅ success	✅ success
vitepress	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vue-i18n	✅ success	❌ failure
vuetify	❌ failure	❌ failure
vant	❌ failure	✅ success
vue-macros	❌ failure	❌ failure
vueuse	❌ failure	✅ success