fix: make generics with runtime props in defineComponent work (fix #11374)

[danyadev]

fixes #11374
relates to #12761 (comment), #7963 (comment)

Problem

In #7963 was introduced support for generics in defineComponent, but it doesn't work as everyone wants it to work. Specifically, if the props option passed, the generic type disappears and all the prop types become any

In other words, even the simplest component with generics like shown below is impossible to make without losing types

type Props<T> = {
  selected: T
  onChange: (option: T) => void
}

const Select= defineComponent(<T extends string>(props: Props<T>) => {
  return () => <div>selected: {props.selected}</div>
}, {
  props: ['selected', 'onChange']
})

Why doesn't it work? Let's look at one of the overloads of defineComponent:

export function defineComponent<
  Props extends Record<string, any>,
  E extends EmitsOptions = {},
  EE extends string = string,
  S extends SlotsType = {},
>(
  setup: (
    props: Props,
    ctx: SetupContext<E, S>,
  ) => RenderFunction | Promise<RenderFunction>,
  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
    props?: (keyof Props)[]
    emits?: E | EE[]
    slots?: S
  },
): DefineSetupFnComponent<Props, E, S>

Here we can see the Props generic type, the setup argument using Props and the options argument also using Props

I guess when we add a generic type to the setup function, it makes the function less "pure / straightforward" to infer the Props type, and typescript chooses Props from the options.props instead. But because it only contains names of the props, all values are preserved as any from Props extends

Solution

We need to tell typescript not to infer Props from the options.props field, so we can use a native utility type NoInfer:

props?: (keyof NoInfer<Props>)[]

Initially I've come up with another solution which doesn't rely on that new typescript NoInfer type.

It works by separating Props into two generics — original Props and DeclaredProps — and using them differently.
Type DeclaredProps extends (keyof Props)[] can have less keys than in Props, but not more

export function defineComponent<
  Props extends Record<string, any>,
  ...,
  DeclaredProps extends (keyof Props)[] = (keyof Props)[],
>(
  setup: (props: Props, ...) => ...,
  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
    props?: DeclaredProps
    ...
  },
): DefineSetupFnComponent<Props, E, S>

Another format for passing props

Array of prop names isn't the only way to tell what props we want to use, there is also a format with objects and validations, which unfortunately I couldn't beat:

props: {
  selected: String,
  onSelect: Function
}

Objects are much harder than arrays, you can't describe an object with no more fields than in another object using extends as easy as an array. Ok, maybe you can, but then you'll run into another problem: it's not easy (if even possible) to check if an object with primitive types matches another object with generic types

I tried some variants, but ended up with an idea that it just doesn't worth it and there's no reason to use this format with generics. So this format works as before: no generics and any instead of passed types

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	38.1 kB	34.3 kB
vue.global.prod.js	158 kB	58.2 kB	51.8 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB	18.1 kB	16.6 kB
createApp	54.4 kB	21.2 kB	19.4 kB
createSSRApp	58.6 kB	22.9 kB	20.9 kB
defineCustomElement	59.2 kB	22.7 kB	20.7 kB
overall	68.5 kB	26.3 kB	24 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-ssr

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

@vue/compiler-sfc

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: cf9276c

[jh-leong]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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