Difference between similar packages.

[mesqueeb]

I'm currently using this package in a project:
wonderful-panda/vue-tsx-support

But it doesn't support the composition-api yet. In fact somewhere it says to use this (babel-preset-vca-jsx) to support composition-api.

I'm still new to TSX and JSX and have all my life written vue files. However some clients want 100% type safety in templates, and TSX is the only way this is possible to my research.

My question is, how can I understand a bit more about what all these similar packages do?

• Some packages are webpack plugins to "compile" or "transform" source code into something else.
• Some packages are babel plugins to also "compile" or "transform" source code.

Could you try to explain to me the difference between this package and vue-tsx-support?

In my package.json I also find a bunch of other related packages:

• @babel/plugin-syntax-jsx
• @vue/babel-helper-vue-jsx-merge-props
• @vue/babel-preset-jsx
• ts-loader
• vue-jsx-hot-loader

I could look at each of these repo's to try and understand what each of them do and how they work together, and how they were set up in the project I'm working on. But before I do that, is there any advice you can give me about generally how this all works? Or could you give me a link to some articles explaining the general workings of this? Because right now, the more I read, the more confused I'm getting... 😅

[luwanquan]

Actually I am also studying.

For now, if you want to support both composition-api and 100% type safety.
There are still many issues that need to be addressed, which is why Vue3 uses Typescript refactoring.
Let's wait for Vue3 to be perfect. If tsx and 100% type safety are urgently needed, it is recommended to use react.

About the difference between this project and vue-tsx-support
I have never used vue-tsx-support, so I can’t provide more explanations, I ’m really sorry.
On the basis of supporting composition-api, the current project only solves or optimizes some problems as much as possible. If you do not choose to use setup functional component, other functional points are not much related to type safety.

About Learn More
Community 3.0 is working hard to develop towards Typescript. There are many experimental or deprecated projects on Vue2. For this reason, it is recommended to refer to the source code.

I'm really sorry for not being able to help.

[fxxjdedd]

@mesqueeb
You need to distinguish between jsx and tsx. All libs with jsx are about how to convert jsx to vue's render function, such as:

• @babel/plugin-syntax-jsx
• @vue/babel-helper-vue-jsx-merge-props
• @vue/babel-preset-jsx

But these vue2 era libs do not support vue3's composition-api, so there is the babel-preset-vca-jsx.

And for the vue-tsx-support, it's completely another thing. We know that vue2's support for tsx is not good, and there is a big gap with react. The problem here is that there is no perfect tsx definition in vue2. In order to make vue write tsx as comfortable and natural as react, so there is vue-tsx-support, which supplements more tsx definition for vue2.

In other words, if you don't use vue-tsx-support, when writing tsx in vue, you can hardly get any type check

https://www.typescriptlang.org/docs/handbook/jsx.html