fix: ts expression should work well in the pug template

[Jevon617]

Description

Fix #18

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.

[sid-6581]

Any chance we can get this merged? This bug is affecting me quite a bit.

[or2e]

bump

[juzser]

+1

[vladfaust]

Almost always it is possible to extract Typescript to the <script lang="ts"> tag and only use Javascript in <template lang="pug">. Yet the life would be much easier if this PR got merged. Thank you, @Jevon617.

[dasantonym]

2024 bump!

[lansi951]

This issue makes can't use Pug with Typescript.
It's a pretty big problem for Pug users.
Can you please merge this pull request?

[Dylancyclone]

Applying these changes to version 6.0.0 works without any edits beside resolving the simple conflicts, it would be great to have it merged in!

[pipe01]

I'm using the following pnpm patch to cherry pick these changes into the latest Vite 8.0.0-beta.0:

diff --git a/dist/index.mjs b/dist/index.mjs
index 83717e6565c721494c24b34c2e2c056ec9a1bea1..da29046c72b65f452524a5b8161dc8016a794cd0 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -169,15 +169,35 @@ function createRollupError(id, error) {
 //#endregion
 //#region src/template.ts
 async function transformTemplateAsModule(code, filename, descriptor, options, pluginContext, ssr, customElement) {
-	const result = compile(code, filename, descriptor, options, pluginContext, ssr, customElement);
-	let returnCode = result.code;
+	let { code: returnCode, map: returnMap } = compile(code, filename, descriptor, options, pluginContext, ssr, customElement);
 	if (options.devServer && options.devServer.config.server.hmr !== false && !ssr && !options.isProduction) returnCode += `\nimport.meta.hot.accept(({ render }) => {
       __VUE_HMR_RUNTIME__.rerender(${JSON.stringify(descriptor.id)}, render)
     })`;
-	return {
-		code: returnCode,
-		map: result.map
-	};
+  	const lang = descriptor.scriptSetup?.lang || descriptor.script?.lang
+
+  	if (
+      lang &&
+      /tsx?$/.test(lang) &&
+      !descriptor.script?.src // only normal script can have src
+    ) {
+      const { transformWithOxc } = await import("vite");
+      const { code, map } = await transformWithOxc(
+          returnCode,
+          descriptor.filename,
+          {
+              lang: 'ts',
+              sourcemap: options.sourceMap,
+          },
+          returnMap,
+      )
+      returnCode = code
+      returnMap = returnMap ? map : returnMap
+    }
+
+    return {
+    	code: returnCode,
+    	map: returnMap
+    };
 }
 /**
 * transform the template directly in the main SFC module