fix(language-core): inject generics of useTemplateRef into correct location (#4829)

Co-authored-by: Johnson Chu <[email protected]>

Author: KazariEX

packages/language-core/lib/codegen/script/scriptSetup.ts

@@ -193,7 +193,7 @@ function* generateSetupFunction(
 		}
 	}
 	if (scriptSetupRanges.cssModules.length) {
-		for (const { exp, arg } of scriptSetupRanges.cssModules) {
+		for (const { define: { arg, exp } } of scriptSetupRanges.cssModules) {
 			setupCodeModifies.push([
 				arg ? [
 					` as Omit<__VLS_StyleModules, '$style'>[`,
@@ -219,8 +219,8 @@ function* generateSetupFunction(
 					generateSfcBlockSection(scriptSetup, define.arg.start, define.arg.end, codeFeatures.navigation),
 					`], keyof __VLS_TemplateResult['refs']>`
 				],
-				define.arg.start - 1,
-				define.arg.start - 1
+				define.exp.end,
+				define.exp.end
 			]);
 		}
 	}
@@ -273,8 +273,8 @@ function* generateDefineWithType(
 	scriptSetup: NonNullable<Sfc['scriptSetup']>,
 	name: string | undefined,
 	define: {
-		statement: TextRange,
-		typeArg?: TextRange
+		statement: TextRange;
+		typeArg?: TextRange;
 	},
 	expression: TextRange,
 	defaultName: string,

packages/language-core/lib/parsers/scriptSetupRanges.ts

@@ -45,12 +45,11 @@ export function parseScriptSetupRanges(
 		inheritAttrs?: string;
 	} = {};
 	const cssModules: {
-		exp: TextRange;
-		arg?: TextRange;
+		define: ReturnType<typeof parseDefineFunction>;
 	}[] = [];
 	const templateRefs: {
 		name?: string;
-		define?: ReturnType<typeof parseDefineFunction>;
+		define: ReturnType<typeof parseDefineFunction>;
 	}[] = [];
 	const definePropProposalA = vueCompilerOptions.experimentalDefinePropProposal === 'kevinEdition' || ast.text.trimStart().startsWith('// @experimentalDefinePropProposal=kevinEdition');
 	const definePropProposalB = vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition' || ast.text.trimStart().startsWith('// @experimentalDefinePropProposal=johnsonEdition');
@@ -130,11 +129,13 @@ export function parseScriptSetupRanges(
 	}
 
 	function parseDefineFunction(node: ts.CallExpression): TextRange & {
+		exp: TextRange;
 		arg?: TextRange;
 		typeArg?: TextRange;
 	} {
 		return {
 			..._getStartEnd(node),
+			exp: _getStartEnd(node.expression),
 			arg: node.arguments.length ? _getStartEnd(node.arguments[0]) : undefined,
 			typeArg: node.typeArguments?.length ? _getStartEnd(node.typeArguments[0]) : undefined,
 		};
@@ -371,7 +372,6 @@ export function parseScriptSetupRanges(
 				}
 			} else if (vueCompilerOptions.composibles.useTemplateRef.includes(callText) && node.arguments.length && !node.typeArguments?.length) {
 				const define = parseDefineFunction(node);
-				define.arg = _getStartEnd(node.arguments[0]);
 				let name;
 				if (ts.isVariableDeclaration(parent)) {
 					name = getNodeText(ts, parent.name, ast);
@@ -382,13 +382,10 @@ export function parseScriptSetupRanges(
 				});
 			}
 			else if (vueCompilerOptions.composibles.useCssModule.includes(callText)) {
-				const module: (typeof cssModules)[number] = {
-					exp: _getStartEnd(node)
-				};
-				if (node.arguments.length) {
-					module.arg = _getStartEnd(node.arguments[0]);
-				}
-				cssModules.push(module);
+				const define = parseDefineFunction(node);
+				cssModules.push({
+					define
+				});
 			}
 		}
 		ts.forEachChild(node, child => {

test-workspace/tsc/passedFixtures/vue2/tsconfig.json

@@ -27,6 +27,7 @@
 		"../vue3/#4777",
 		"../vue3/#4820",
 		"../vue3/#4822",
+		"../vue3/#4828",
 		"../vue3/components",
 		"../vue3/defineEmits",
 		"../vue3/defineModel",

test-workspace/tsc/passedFixtures/vue3.4/tsconfig.json

@@ -12,6 +12,7 @@
 		"../vue3/#3820",
 		"../vue3/#4777",
 		"../vue3/#4820",
+		"../vue3/#4828",
 		"../vue3/rootEl",
 		"../vue3/templateRef",
 		"../vue3/templateRef_native",

test-workspace/tsc/passedFixtures/vue3/#4828/main.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { exactType } from '../../shared';
+import { useTemplateRef } from 'vue';
+
+const ref1 = useTemplateRef('input');
+const ref2 = useTemplateRef( 'input');
+
+exactType(ref1.value!, {} as HTMLInputElement);
+exactType(ref2.value!, {} as HTMLInputElement);
+</script>
+
+<template>
+	<input ref="input">
+</template>