Vuetify Vue 3 + TSX

[webistomin]

Hey! I noticed that you started using JSX for the next version. Can you tell me in more detail what problem you encountered, that you decided to change the stack?

[KaelWD]

Render functions with lots of children are hard to read, which encourages splitting them up into a bunch of spaghetti genSomething methods. We've considered tsx for ages but it only really became viable with Vue 3. You also get some of the same compiler optimisations as templates now which is nice.

[webistomin]

Thanks.

[Maxim-Mazurok]

I didn't understand it at first, so here's my explanation:

In v2 Vuetify was using .ts and had to have render functions with many methods like genContent() that would create elements fairly manually, see https://github.com/vuetifyjs/vuetify/blob/v2.7.2/packages/vuetify/src/components/VBtn/VBtn.ts#L188

In v3 *.tsx is used, so now the same code is put right in the render function, without a need to create get* methods for each child, see https://github1s.com/vuetifyjs/vuetify/blob/v3.6.14/packages/vuetify/src/components/VBtn/VBtn.tsx#L242-L261