feat: runtime-support for type unions in props

[davidmatter]

One of the last missing features regarding TypeScript support in Vue is the ability to use discriminated- and distributive union types in props with runtime validation. This PR aims to address these limitations and provides a more flexible way to define props.

Fixes

• Incorrect Union Types Suggestions in Vue + TypeScript Project #11758
• Conditional properties through discriminated unions and intersections in TypeScript #8952
• "Missing required prop" warning after mounting component with union as props #9125

Implementation

Through compiling and validating the new internal prop option union, we can skip validation for props that are not part of an active sub-union.

In the following example, a and b are in an active sub-union, c and d are not. Defining either a or b should trigger warnings for missing props for the other prop in the same sub-union.

defineProps<
  | {
      a: string
      b: number
    }
  | {
      c: string
      d: number
    }
>()

// Usage
defineProps({a: 'foo'}) // Should trigger missing required prop warning only for `b`

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12059

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12059

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12059

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12059

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12059

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12059

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12059

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12059

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12059

vue

pnpm add https://pkg.pr.new/vue@12059

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12059

commit: eae96dc

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+180 B)	38.1 kB (+63 B)	34.3 kB (+41 B)
vue.global.prod.js	160 kB (+180 B)	58.1 kB (+69 B)	51.7 kB (+184 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.2 kB (+180 B)	19 kB (+69 B)	17.3 kB (+65 B)
createApp	55.8 kB (+180 B)	21.5 kB (+71 B)	19.7 kB (+88 B)
createSSRApp	59.8 kB (+180 B)	23.2 kB (+72 B)	21.1 kB (+66 B)
defineCustomElement	60.6 kB (+180 B)	23 kB (+70 B)	21 kB (+79 B)
overall	69.5 kB (+180 B)	26.6 kB (+68 B)	24.2 kB (+46 B)