Support JSX in .vue Single File Components

[jonaskuske]

JSX currently only works in .(j|t)sx files, but not in corresponding <script> blocks of Single File Components. Writing JSX inside a SFC currently throws an error from esbuild (Unexpected "<") during the scan phase when you npm run dev.

A quick way to fix that is to change this:

if (lang === 'ts' || lang === 'tsx') {
  loader = lang
}

to this:

if (lang === 'ts' || lang === 'tsx' || lang === 'jsx') {
  loader = lang
}

in optimizer/scan.ts#L187 and use the correct lang attribute on your script block, e.g. <script lang="jsx">.

This way both the dev server and the build (that one works either way) can be used, however even then HMR isn't working, while it does work for .jsx files.

JSX in Single File Components would be nice, both because even with JSX it is nice to have your scoped styles right next to your other code, and it's also handy to define smaller local (non-exported) components alongside your main one that has a <template>.