Better JSX Types

[ScottAwesome]

I know one of the main appeals of Vue is the single file component structure, and no doubt that is the biggest selling point I hear from others who have came from React, Angular etc., that they really love Single File Components, however, they do have a few drawbacks that have been observed, namely:

• There are valid ergonomic reasons for using JSX over a single file component, such as rendering "logicless" components in a design system, its often less verbose to use functional components over single file components.
• Easier transition for teams coming from other Frameworks. This is really targeted at those mostly familiar with React and React like frameworks, which is a non insignificant amount of people.
• If you are using CSS-In-JS, single file components aren't the most ergonomic option. There is more reasons than scoped styles for using CSS-In-JS solutions.
• Flexibility of dropping into using more JavaScript features and less template ones. I love that Vue has a ton of cool helpers and things, sometimes though, its worth taking a slightly more verbose approach for maintainability sake. This tends to be in areas where one needs to do hyper optimizations on hot paths. Data heavy UIs come to mind for me in particular.

Right now, JSX typing is not a first class experience. I think React has really shown that it can be a very first class experience. We already have an official JSX transformer that brings a lot of the same optimizations from single file components to JSX. I believe the general adoption of being able to use JSX in a more ergonomic manner is that Vue lacks the same robust types that say, React does for JSX.

This is to propose that we have types that align with JSX being at parity with SFCs, while I believe the JSX transform plugin for Vue 3 produces the same efficient transforms that single file components, do, Vue has much inferior, especially compared to react, support for JSX with TypeScript.

This is to open up a discussion about prioritizing more robust types for Vue JSX so its on parity level with those of React, for instance.