fix(plugin-vue): enable ts in template when using tsx in dev mode

[LiZhequ]

Description

TS is not supported in template when lang is tsx in dev mode. It is supported in prod mode.

transformWithEsbuild should be called when lang is tsx

Additional context

---

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 Commit 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.

[ydcjeff]

Isn't it already supported by plugin-vue-jsx? plugin-vue only supports .vue files.

[LiZhequ]

Isn't it already supported by plugin-vue-jsx? plugin-vue only supports .vue files.

It's not about plugin-vue-jsx。
For example

<template>
  {{ a as any }}
</template>
<script lang="tsx" setup>
const a = 1
</script>

In dev mode, browser will throw a error, because it was compiled to

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _toDisplayString($setup.a as any)
}

TS grammar is not converted.
If lang=ts, it was compiled to

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _toDisplayString($setup.a);
}

TS grammar is converted.

The key code is

vite/packages/plugin-vue/src/main.ts

Lines 214 to 233 in 43b7b78

	// handle TS transpilation
	let resolvedCode = output.join('\n')
	if (
	(descriptor.script?.lang === 'ts' ||
	descriptor.scriptSetup?.lang === 'ts') &&
	!descriptor.script?.src // only normal script can have src
	) {
	const { code, map } = await transformWithEsbuild(
	resolvedCode,
	filename,
	{
	loader: 'ts',
	target: 'esnext',
	sourcemap: options.sourceMap
	},
	resolvedMap
	)
	resolvedCode = code
	resolvedMap = resolvedMap ? (map as any) : resolvedMap
	}

It lacks tsx's judgment

[LiZhequ]

Can you please review this PR，there is still no reviewer @antfu

[patak-dev]

@LiZhequ this isn't valid for Vue. You need to use ts as the lang

[LiZhequ]

@patak-dev
Vue SFC Playground only support lang="ts"，but when you use vite, you can use @vite/plugin-vue-jsx to support tsx.
And the @vite/plugin-vue has some code to support it, such as

vite/packages/plugin-vue/src/template.ts

Lines 157 to 163 in c4489ea

	// if using TS, support TS syntax in template expressions
	const expressionPlugins: CompilerOptions['expressionPlugins'] =
	options.template?.compilerOptions?.expressionPlugins || []
	const lang = descriptor.scriptSetup?.lang || descriptor.script?.lang
	if (lang && /tsx?$/.test(lang) && !expressionPlugins.includes('typescript')) {
	expressionPlugins.push('typescript')
	}

@vite/plugin-vue-jsx tranform jsx syntactic，but the template is still handled by @vite/plugin-vue. And as I said above, it lacks tsx's judgment in

vite/packages/plugin-vue/src/main.ts

Lines 214 to 233 in 43b7b78

	// handle TS transpilation
	let resolvedCode = output.join('\n')
	if (
	(descriptor.script?.lang === 'ts' ||
	descriptor.scriptSetup?.lang === 'ts') &&
	!descriptor.script?.src // only normal script can have src
	) {
	const { code, map } = await transformWithEsbuild(
	resolvedCode,
	filename,
	{
	loader: 'ts',
	target: 'esnext',
	sourcemap: options.sourceMap
	},
	resolvedMap
	)
	resolvedCode = code
	resolvedMap = resolvedMap ? (map as any) : resolvedMap
	}