Controlling esbuild options while transpiling script tags

[segevfiner]

Related plugins

• plugin-vue

• plugin-vue-jsx

Description

I want to be able to control the esbuild options used when transpiling SFC script tags. Vite itself provides the esbuild options key but this isn't used with vite-plugin-vue and I don't seem to have a way to make it apply to plain JS files as well unlike I can with the esbuild key. The reason is that I wanted to try and use the esbuild, supported option to get it to transpile async-await as async generators so that it works with zone.js which haven't bothered implementing a different solution for this. (They add the babel plugin which does this transform or otherwise do it themselves in project templates which need it AFAIK)

Suggested solution

Provide a way to control the esbuild option used when transpiling script tags, as well as allowing to apply esbuild to plain JS files.

Alternative

Add a plugin which does the necessary transfom or transpilation after vite-plugin-vue. But that will require an extra transpilation step which will be slower and is harder to code. The vanilla esbuild plugin of Vite doesn't work to transpile the output of plugin-vue as it doesn't know to correctly map the vue file extension of the already transpiled script to the esbuild js loader so it just errors with an unknown loader. Another option is making the builtin esbuild it know that it should load vue files as js, assuming they were output by vite-plugin-vue

Additional context

Zone.js doesn't support native async/await angular/angular#31730, and the current badly documented workaround they implemented is to set esbuild to transpile/downlevel async-await, and when async generators are used, they also use babel to transpile them as well https://github.com/angular/angular-cli/blob/25eaaa24b51af400262b97b4d4be2391ebd4a82d/packages/angular_devkit/build_angular/src/babel/presets/application.ts#L232-L233 as esbuild doesn't support that. Due to this, even if support is added for this, we will still need the additional transformation.

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.

[sapphi-red]

This is implemented by #444