plugin-vue-jsx: Allow esbuild to perform typescript transformation

[madeofsun]

Related plugins

• plugin-vue

• plugin-vue-jsx

Description

In the current implementation of plugin-vue-jsx typescript transformation for ".tsx" files is done by the babel plugin instead of esbuild.

The main problem with such approach is that the same non-jsx code in "ts" and "tsx" may behave differently since transformation by '@babel/plugin-transform-typescript' does not take into account tsconfig options like esbuild does.
Moreover the transformation may require additional babelPlugins like babel-plugin-proposal-decorators or babel-plugin-transform-class-properties and they are not fully equivalent to what is expected in typescript (example).

As I see it, the proper behaviour is that plugin-vue-jsx transforms only the jsx syntax and all other typescript syntax is handled by esbuild.

Suggested solution

Proposed solution:

• The changes are enabled by a new tsTransform: 'esbuild' | 'babel' option with value 'esbuild'. By default 'babel' is used to prevent breakage.
• '@babel/plugin-syntax-typescript' should be used instead of '@babel/plugin-transform-typescript' - it does not perform any transformations.
• esbuild.include should not be overriden in the "config" hook
• "transform" hook should have an order: 'pre' to run before esbuild transformation
• If plugin-vue-jsx consumers would like to enable support for decorators or other opt-in syntax, they should pass corresponding "syntax" (that affect parser only) plugins to babelPlugins

If the concept of solution is OK, I can try to implement it (if you are OK with it).

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.