feat(vue-jsx): allow esbuild to perform ts transformation

[madeofsun]

Description

• Adds feature plugin-vue-jsx: Allow esbuild to perform typescript transformation #556
• Adds documentation about babelPlugins and tsPluginOptions options

Additional context

In the original issue description the proposed new option tsTransform had values 'esbuild' and 'babel'. In the PR the 'esbuild' value was renamed to 'built-in' because it describes semantics more clearly and vite is planning to integrate rolldown as esbuild replacement.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/plugin-vue@621

npm i https://pkg.pr.new/@vitejs/plugin-vue-jsx@621

commit: e4e9dda

[sapphi-red]

The implementation looks good to me. Would you

• resolve the conflicts?
• fix the lint error?

By the way, do you have any performance numbers for each transform? I'm wondering if the plugin should use tsTransform: 'built-in' in the future as that would align to how plugin-react works.

[madeofsun]

Would you ...

No problem - done.

By the way, do you have any performance numbers ...

Simple comparisons of vite build output

For a "naive" approach in playground

Old
values: 1.90s 1.83s 1.80s 1.79s 1.81s 1.79s 1.79s 1.80s 1.81s 1.80s 1.81s 1.82s 1.89s 1.85s 1.81s 1.82s 1.92s 1.90s 1.81s 1.85s 1.82s 1.80s 1.84s 1.82s 1.79s
min: 1.79s
max: 1.92s
mid: 1.81s
avg: 1.827s

New
values: 1.80s 1.77s 1.77s 1.74s 1.74s 1.73s 1.75s 1.85s 1.74s 1.74s 1.85s 1.84s 1.80s 1.76s 1.80s 1.80s 1.85s 1.91s 1.83s 1.75s 1.83s 1.75s 1.78s 1.72s 1.82s
min: 1.72s
max: 1.91s
mid: 1.78s
avg: 1.789s

Old -> New -2%

For a real medium Nuxt project I have

• 148 tsx files
• 8928 modules total

Old
values: 14.3s 14.0s 14.1s 13.8s 14.0s
min: 13.8s
max: 14.3s
mid: 14.0s
avg: 14.04s

New
values: 13.7s 13.5s 13.6s 13.8s 13.6s
min: 13.5s
max: 13.8s
mid: 13.6s
avg: 13.64s

Old -> New -2.8%

For a real very large Nuxt project I have

• 1287 tsx files
• 13221 modules total

Old
values: 68s 65s 57s 65s 57s 68s 64s 62s
min: 57s
max: 68s
mid: 64.5s
avg: 63.25s

New
values: 74s 66s 69s 68s 65s 66s 66s 64s
min: 64s
max: 74s
mid: 66s
avg: 67.25

Old -> New +6.3%

[sapphi-red]

Thanks for the perf numbers. It sounds like it's good enough to switch to it in the future to me.

[madeofsun]

Thanks!