Make runtime Props validation optional

[rdhelms]

What problem does this feature solve?

Now that Vue is embracing TS, I think there’s much less value in validating component props via JS prototypes at runtime. It can still be a useful feature for a pure JS setup, but if someone has a TS setup where Volar is able to see the types without a runtime definition, they really don’t need the type to be validated at runtime.

Validating component props at runtime feels like trying to validate function params at runtime. It seems better to just let TS handle it.

What does the proposed API look like?

The goal would be for the app not to throw a runtime error for a setup such as in vuejs/core#7832, and instead allow the prop to pass through to the child component.

Perhaps this could be controlled with a validateRuntimeProps boolean option in vite.config.

[rdhelms]

@sxzz I'm honored by the 👍! 🙏 I'm curious if you have any other context or info to add here? Additional use cases or thoughts on the potential value? I'd love to get some traction here because we're looking to migrate hundreds of components to Vue 3 and this feature would impact how we decide to do that.

[sxzz]

I like this proposal! It's worth mentioning that runtime type validation is on dev only. I also think now we're using TypeScript in development, the runtime type validation seems to be unnecessary. So there should be an option to disable this feature, just like Options API.

However, Vue still needs some type (like Boolean or Function), which will affect the runtime behavior. For example, if the prop has Boolean type, Vue will convert undefined to false in runtime.

[rdhelms]

@sxzz When you say "just like the Options API", do you mean that there's currently a way to opt out of props validation using the Options API?

[sxzz]

I mean we can add a bundler build feature flag, to disable props validation, just like __VUE_OPTIONS_API__ for Options API.

https://github.com/vuejs/core/blob/main/packages/vue/README.md#bundler-build-feature-flags

[GrantGryczan]

I need this because otherwise I can't use complex TypeScript types for my props (such as an intersection with a base component's exported prop interface), due to Vue being unable to convert them to runtime validators. Which is a pointless limitation when I don't even need runtime validators.

In fact, personally I would disable runtime prop validation by default when using the TypeScript form of defineProps. I might even make a separate issue for that suggestion since it could be accepted independently of this.

Edit: #547

[mattmess1221]

I have a very complex component which renders hundreds of child components, each with nearly unique props. Having runtime validation for each of these components really degrades performance. It takes several seconds for each render, hydration, and HMR update. Luckily it's only during dev, but it still ruins my developer experience.