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

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

@@ -8,6 +8,7 @@ import { generateStyleScopedClasses } from '../template/styleScopedClasses';
 import type { ScriptCodegenContext } from './context';
 import { codeFeatures, type ScriptCodegenOptions } from './index';
 import { generateInternalComponent } from './internalComponent';
+import { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 
 export function* generateTemplateCtx(
 	options: ScriptCodegenOptions,
@@ -26,6 +27,9 @@ export function* generateTemplateCtx(
 	if (options.sfc.styles.some(style => style.module)) {
 		exps.push(`{} as __VLS_StyleModules`);
 	}
+	if (options.scriptSetupRanges?.templateRefs.length) {
+		exps.push(getRefsType(options, options.scriptSetupRanges));
+	}
 
 	yield `const __VLS_ctx = `;
 	if (exps.length === 1) {
@@ -76,7 +80,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(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
 
 	yield `const __VLS_components = {${newLine}`;
 	for (const type of exps) {
@@ -257,3 +261,15 @@ export function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptC
 
 	return usageVars;
 }
+
+function getRefsType(options: ScriptCodegenOptions, scriptSetupRanges: ScriptSetupRanges) {
+	let result = '';
+	result += (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`);
+	for (const { name } of scriptSetupRanges.templateRefs) {
+		if (name) {
+			result += (`${name}: typeof ${name}${newLine}`);
+		}
+	}
+	result += (`}>${newLine}`);
+	return result;
+}

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

@@ -229,15 +229,14 @@ export function* generateComponent(
 		options.templateRefNames.set(refName, varName);
 		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

@@ -59,7 +59,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	function* generateRefs(): Generator<Code> {
 		yield `const __VLS_refs = {${newLine}`;
 		for (const [name, varName] of options.templateRefNames) {
-			yield `'${name}': ${varName}!,${newLine}`;
+			yield `'${name}': ${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

@@ -1,27 +1,30 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue';
-import { exactType } from '../../shared';
+import { useTemplateRef } from "vue";
+import { exactType } from "../../shared";
 
-const comp1 = useTemplateRef('generic');
+const comp1 = useTemplateRef("generic");
 if (comp1.value) {
-	exactType(comp1.value.foo, 1)
+  exactType(comp1.value.foo, 1);
 }
 
-const comp2 = useTemplateRef('v-for');
+const comp2 = useTemplateRef("v-for");
 if (comp2.value) {
-	exactType(comp2.value[0]?.foo, {} as number | undefined);
+  exactType(comp2.value[0]?.foo, {} as number | undefined);
 }
 
-const comp3 = useTemplateRef('a');
+const comp3 = useTemplateRef("a");
 if (comp3.value) {
-	exactType(comp3.value.href, {} as string | undefined);
+  exactType(comp3.value.href, {} as string | undefined);
 }
 </script>
 
 <template>
-	<Generic ref="generic" :foo="1"></Generic>
-
-	<Generic v-for="i in 4" ref="v-for" :foo="i"></Generic>
+  <Generic ref="generic" :foo="1"></Generic>
+  {{ exactType(comp1?.foo, {} as 1 | undefined) }}
 
-	<a ref="a"></a>
+  <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>