fix(language-core): correct type inference of multiple template refs with same name (#5271)

Author: KazariEX

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

@@ -175,7 +175,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 const templateRefs = new Map<string, {
 typeExp: string;
 offset: number;
-}>();
+}[]>();
 
 return {
 codeFeatures: new Proxy(codeFeatures, {
@@ -203,6 +203,13 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 } | undefined,
 singleRootElTypes: [] as string[],
 singleRootNodes: new Set<CompilerDOM.ElementNode | null>(),
+addTemplateRef: (name: string, typeExp: string, offset: number) => {
+let refs = templateRefs.get(name);
+if (!refs) {
+templateRefs.set(name, refs = []);
+}
+refs.push({ typeExp, offset });
+},
 accessExternalVariable(name: string, offset?: number) {
 let arr = accessExternalVariables.get(name);
 if (!arr) {

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

@@ -264,10 +264,7 @@ export function* generateComponent(
 yield `${endOfLine}`;
 
 if (refName && offset) {
-ctx.templateRefs.set(refName, {
-typeExp: `typeof ${ctx.getHoistVariable(componentInstanceVar)}`,
-offset
-});
+ctx.addTemplateRef(refName, `typeof ${ctx.getHoistVariable(componentInstanceVar)}`, offset);
 }
 if (isRootNode) {
 ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
@@ -355,10 +352,7 @@ export function* generateElement(
 if (isVForChild) {
 typeExp += `[]`;
 }
-ctx.templateRefs.set(refName, {
-typeExp,
-offset
-});
+ctx.addTemplateRef(refName, typeExp, offset);
 }
 if (ctx.singleRootNodes.has(node)) {
 ctx.singleRootElTypes.push(`__VLS_NativeElements['${node.tag}']`);

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

@@ -140,18 +140,32 @@ function* generateTemplateRefs(
 options: TemplateCodegenOptions,
 ctx: TemplateCodegenContext
 ): Generator<Code> {
-yield `type __VLS_TemplateRefs = {${newLine}`;
-for (const [name, { typeExp, offset }] of ctx.templateRefs) {
-yield* generateObjectProperty(
-options,
-ctx,
-name,
-offset,
-ctx.codeFeatures.navigationAndCompletion
-);
-yield `: ${typeExp},${newLine}`;
-}
-yield `}${endOfLine}`;
+yield `type __VLS_TemplateRefs = {}`;
+for (const [name, refs] of ctx.templateRefs) {
+yield `${newLine}& `;
+if (refs.length >= 2) {
+yield `(`;
+}
+for (let i = 0; i < refs.length; i++) {
+const { typeExp, offset } = refs[i];
+if (i) {
+yield ` | `;
+}
+yield `{ `;
+yield* generateObjectProperty(
+options,
+ctx,
+name,
+offset,
+ctx.codeFeatures.navigation
+);
+yield `: ${typeExp} }`;
+}
+if (refs.length >= 2) {
+yield `)`;
+}
+}
+yield endOfLine;
 return `__VLS_TemplateRefs`;
 }
 

test-workspace/tsc/passedFixtures/vue3/templateRef/template-refs.vue

@@ -25,6 +25,11 @@ if (comp4.value) {
 exactType(comp4.value, {} as HTMLAnchorElement[]);
 }
 
+const comp5 = useTemplateRef('multiple');
+if (comp5.value) {
+exactType(comp5.value, {} as HTMLAnchorElement | HTMLDivElement);
+}
+
 // @ts-expect-error
 useTemplateRef('unknown');
 </script>
@@ -41,4 +46,8 @@ useTemplateRef('unknown');
 
 <a v-for="i in 3" ref="v-for-native" :key="i"></a>
 {{ exactType(comp4?.[0]?.href, {} as string | undefined) }}
+
+<a ref="multiple"></a>
+<div ref="multiple"></div>
+{{ exactType(comp5, {} as HTMLAnchorElement | HTMLDivElement | null) }}
 </template>