fix(language-core): resolve components with various name cases correc…

…tly (vuejs#5067)
Hawthorne001 · Dec 21, 2024 · e4ec4ea · e4ec4ea
1 parent 8cf123f
commit e4ec4ea
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 38 deletions.
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
@@ -95,8 +95,9 @@ export function* generateComponent(
 				];
 			}
 			else {
+				const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
 				yield* generateCamelized(
-					capitalize(node.tag),
+					shouldCapitalize ? capitalize(node.tag) : node.tag,
 					tagOffset,
 					{
 						...ctx.codeFeatures.withoutHighlightAndCompletion,
@@ -144,15 +145,15 @@ export function* generateComponent(
 		yield `)${endOfLine}`;
 	}
 	else if (!isComponentTag) {
-		yield `const ${var_originalComponent} = __VLS_resolvedLocalAndGlobalComponents.`;
+		yield `const ${var_originalComponent} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
+		yield getPossibleOriginalComponentNames(node.tag, false)
+			.map(name => `'${name}'`)
+			.join(`, `);
+		yield `>).`;
 		yield* generateCanonicalComponentName(
 			node.tag,
 			startTagOffset,
-			{
-				// with hover support
-				...ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation,
-				...ctx.codeFeatures.verification,
-			}
+			ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation
 		);
 		yield `${endOfLine}`;
 
@@ -413,13 +414,13 @@ function* generateVScope(
 	return [refName, offset];
 }
 
-export function getCanonicalComponentName(tagText: string) {
+function getCanonicalComponentName(tagText: string) {
 	return variableNameRegex.test(tagText)
 		? tagText
 		: capitalize(camelize(tagText.replace(colonReg, '-')));
 }
 
-export function getPossibleOriginalComponentNames(tagText: string, deduplicate: boolean) {
+function getPossibleOriginalComponentNames(tagText: string, deduplicate: boolean) {
 	const name1 = capitalize(camelize(tagText));
 	const name2 = camelize(tagText);
 	const name3 = tagText;

diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
@@ -5,7 +5,6 @@ import { getSlotsPropertyName } from '../../utils/shared';
 import { endOfLine, newLine, wrapWith } from '../utils';
 import { generateStringLiteralKey } from '../utils/stringLiteralKey';
 import { TemplateCodegenContext, createTemplateCodegenContext } from './context';
-import { getCanonicalComponentName, getPossibleOriginalComponentNames } from './element';
 import { generateObjectProperty } from './objectProperty';
 import { generateStyleScopedClassReferences } from './styleScopedClasses';
 import { generateTemplateChild, getVForNode } from './templateChild';
@@ -40,8 +39,6 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	ctx.addLocalVariable('$refs');
 	ctx.addLocalVariable('$el');
 
-	yield* generatePreResolveComponents(options);
-
 	if (options.template.ast) {
 		yield* generateTemplateChild(options, ctx, options.template.ast, undefined, undefined, undefined);
 	}
@@ -138,32 +135,6 @@ function* generateRootEl(ctx: TemplateCodegenContext): Generator<Code> {
 	}
 }
 
-function* generatePreResolveComponents(options: TemplateCodegenOptions): Generator<Code> {
-	yield `let __VLS_resolvedLocalAndGlobalComponents!: Required<{}`;
-	if (options.template.ast) {
-		const components = new Set<string>();
-		for (const node of forEachElementNode(options.template.ast)) {
-			if (
-				node.tagType === CompilerDOM.ElementTypes.COMPONENT
-				&& node.tag.toLowerCase() !== 'component'
-				&& !node.tag.includes('.') // namespace tag 
-			) {
-				if (components.has(node.tag)) {
-					continue;
-				}
-				components.add(node.tag);
-				yield newLine;
-				yield ` & __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
-				yield getPossibleOriginalComponentNames(node.tag, false)
-					.map(name => `'${name}'`)
-					.join(', ');
-				yield `>`;
-			}
-		}
-	}
-	yield `>${endOfLine}`;
-}
-
 export function* forEachElementNode(node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode): Generator<CompilerDOM.ElementNode> {
 	if (node.type === CompilerDOM.NodeTypes.ROOT) {
 		for (const child of node.children) {

diff --git a/test-workspace/tsc/passedFixtures/vue3_strictTemplate/#5067/comp.vue b/test-workspace/tsc/passedFixtures/vue3_strictTemplate/#5067/comp.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts" generic="T">
+defineProps<{
+    foo?: T;
+}>();
+defineEmits<{
+    foo: [value: T]
+}>();
+</script>
diff --git a/test-workspace/tsc/passedFixtures/vue3_strictTemplate/#5067/main.vue b/test-workspace/tsc/passedFixtures/vue3_strictTemplate/#5067/main.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { exactType } from '../../shared';
+import {
+	default as isComp1,
+	default as IsComp2
+} from './comp.vue';
+
+const isComp3 = isComp1;
+const IsComp4 = isComp3;
+</script>
+
+<template>
+	<is-comp1 foo="" @foo="v => exactType(v, {} as string)" />
+	<isComp1 foo="" @foo="v => exactType(v, {} as string)" />
+	<!-- @vue-expect-error -->
+	<IsComp1 />
+
+	<is-comp2 foo="" @foo="v => exactType(v, {} as string)" />
+	<isComp2 foo="" @foo="v => exactType(v, {} as string)" />
+	<IsComp2 foo="" @foo="v => exactType(v, {} as string)" />
+
+	<is-comp3 foo="" @foo="v => exactType(v, {} as string)" />
+	<isComp3 foo="" @foo="v => exactType(v, {} as string)" />
+	<!-- @vue-expect-error -->
+	<IsComp3 />
+
+	<is-comp4 foo="" @foo="v => exactType(v, {} as string)" />
+	<isComp4 foo="" @foo="v => exactType(v, {} as string)" />
+	<IsComp4 foo="" @foo="v => exactType(v, {} as string)" /> 
+</template>