fix(language-core): prevent circular reference of templateRef (#4768)

Author: zhiyuanzmj

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

@@ -13,28 +13,55 @@ export function* generateTemplateCtx(
 	options: ScriptCodegenOptions,
 	isClassComponent: boolean
 ): Generator<Code> {
-	const exps = [];
+	const baseExps = [];
+	const extraExps = [];
+
 	if (isClassComponent) {
-		exps.push(`this`);
+		baseExps.push(`this`);
 	}
 	else {
-		exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
+		baseExps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
 	}
 	if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) {
-		exps.push(`globalThis`);
+		extraExps.push(`globalThis`);
 	}
 	if (options.sfc.styles.some(style => style.module)) {
-		exps.push(`{} as __VLS_StyleModules`);
+		extraExps.push(`{} as __VLS_StyleModules`);
+	}
+	if (options.scriptSetupRanges?.templateRefs.length) {
+		let exp = `{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`;
+		for (const { name } of options.scriptSetupRanges.templateRefs) {
+			if (name) {
+				exp += `${name}: typeof ${name}${newLine}`;
+			}
+		}
+		exp += `}>${newLine}`;
+		extraExps.push(exp);
 	}
 
-	yield `const __VLS_ctx = `;
-	if (exps.length === 1) {
-		yield exps[0];
+	yield `const __VLS_ctxBase = `;
+	if (baseExps.length === 1) {
+		yield baseExps[0];
 		yield endOfLine;
 	}
 	else {
 		yield `{${newLine}`;
-		for (const exp of exps) {
+		for (const exp of baseExps) {
+			yield `...`;
+			yield exp;
+			yield `,${newLine}`;
+		}
+		yield `}${endOfLine}`;
+	}
+
+	yield `const __VLS_ctx = `;
+	if (extraExps.length === 0) {
+		yield `__VLS_ctxBase${endOfLine}`;
+	}
+	else {
+		yield `{${newLine}`;
+		yield `...__VLS_ctxBase,${newLine}`;
+		for (const exp of extraExps) {
 			yield `...`;
 			yield exp;
 			yield `,${newLine}`;
@@ -76,7 +103,7 @@ export function* generateTemplateComponents(options: ScriptCodegenOptions): Gene
 
 	exps.push(`{} as NonNullable<typeof __VLS_internalComponent extends { components: infer C } ? C : {}>`);
 	exps.push(`{} as __VLS_GlobalComponents`);
-	exps.push(`{} as typeof __VLS_ctx`);
+	exps.push(`__VLS_ctxBase`);
 
 	yield `const __VLS_components = {${newLine}`;
 	for (const type of exps) {

packages/language-core/lib/codegen/template/element.ts

@@ -229,15 +229,14 @@ export function* generateComponent(
 		options.templateRefNames.set(refName, [varName, offset!]);
 		ctx.usedComponentCtxVars.add(var_defineComponentCtx);
 
-		yield `// @ts-ignore${newLine}`;
+		yield `var ${varName} = {} as (Parameters<typeof ${var_defineComponentCtx}['expose']>[0] | null)`;
 		if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
 			&& node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
-			&& node.codegenNode.props.properties.find(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')
+			&& node.codegenNode.props.properties.some(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')
 		) {
-			yield `var ${varName} = [{} as Parameters<typeof ${var_defineComponentCtx}['expose']>[0]]${endOfLine}`;
-		} else {
-			yield `var ${varName} = {} as Parameters<typeof ${var_defineComponentCtx}['expose']>[0]${endOfLine}`;
+			yield `[]`;
 		}
+		yield `${endOfLine}`;
 	}
 
 	const usedComponentEventsVar = yield* generateElementEvents(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);

packages/language-core/lib/codegen/template/index.ts

@@ -65,7 +65,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 				offset,
 				ctx.codeFeatures.navigationAndCompletion
 			)
-			yield `: ${varName}!,${newLine}`;
+			yield `: ${varName},${newLine}`;
 		}
 		yield `}${endOfLine}`;
 		yield `declare var $refs: typeof __VLS_refs${endOfLine}`;

test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue

@@ -6,5 +6,5 @@ import { exactType } from '../../shared';
 <template>
 	<TemplateRef ref="templateRef" />
 
-	{{ exactType($refs.templateRef.$refs.generic.foo, {} as 1) }}
+	{{ exactType($refs.templateRef?.$refs.generic?.foo, {} as (1 | undefined)) }}
 </template>

test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue

@@ -4,7 +4,7 @@ import { exactType } from '../../shared';
 
 const comp1 = useTemplateRef('generic');
 if (comp1.value) {
-	exactType(comp1.value.foo, 1)
+	exactType(comp1.value.foo, 1);
 }
 
 const comp2 = useTemplateRef('v-for');
@@ -20,8 +20,11 @@ if (comp3.value) {
 
 <template>
 	<Generic ref="generic" :foo="1"></Generic>
-	
+	{{ exactType(comp1?.foo, {} as 1 | undefined) }}
+
 	<Generic v-for="i in 4" ref="v-for" :foo="i"></Generic>
+	{{ exactType(comp2?.[0]?.foo, {} as number | undefined) }}
 
 	<a ref="a"></a>
+	{{ exactType(comp3?.href, {} as string | undefined) }}
 </template>