fix(typescript-plugin): prevent highlighting native element tags with same name as components (#5253)

Author: KazariEX

packages/typescript-plugin/lib/common.ts

@@ -2,6 +2,7 @@ import { forEachElementNode, hyphenateTag, Language, VueCompilerOptions, VueVirt
 import { capitalize } from '@vue/shared';
 import type * as ts from 'typescript';
 import { _getComponentNames } from './requests/getComponentNames';
+import { _getElementNames } from './requests/getElementAttrs';
 import type { RequestContext } from './requests/types';
 
 const windowsPathReg = /\\/g;
@@ -229,6 +230,7 @@ export function getComponentSpans(
 	const { typescript: ts, languageService } = this;
 	const result: ts.TextSpan[] = [];
 	const validComponentNames = _getComponentNames(ts, languageService, vueCode);
+	const elements = new Set(_getElementNames(ts, languageService, vueCode));
 	const components = new Set([
 		...validComponentNames,
 		...validComponentNames.map(hyphenateTag),
@@ -238,7 +240,7 @@ export function getComponentSpans(
 			if (node.loc.end.offset <= spanTemplateRange.start || node.loc.start.offset >= (spanTemplateRange.start + spanTemplateRange.length)) {
 				continue;
 			}
-			if (components.has(node.tag)) {
+			if (components.has(node.tag) && !elements.has(node.tag)) {
 				let start = node.loc.start.offset;
 				if (template.lang === 'html') {
 					start += '<'.length;

packages/typescript-plugin/lib/requests/getElementAttrs.ts

@@ -1,4 +1,4 @@
-import * as vue from '@vue/language-core';
+import { VueVirtualCode } from '@vue/language-core';
 import type * as ts from 'typescript';
 import type { RequestContext } from './types';
 
@@ -9,19 +9,19 @@ export function getElementAttrs(
 ) {
 	const { typescript: ts, language, languageService, getFileId } = this;
 	const volarFile = language.scripts.get(getFileId(fileName));
-	if (!(volarFile?.generated?.root instanceof vue.VueVirtualCode)) {
+	if (!(volarFile?.generated?.root instanceof VueVirtualCode)) {
 		return;
 	}
 	const program = languageService.getProgram()!;
 
-	let tsSourceFile: ts.SourceFile | undefined;
-	if (tsSourceFile = program.getSourceFile(fileName)) {
+	const tsSourceFile = program.getSourceFile(fileName);
+	if (tsSourceFile) {
 		const checker = program.getTypeChecker();
 		const typeNode = tsSourceFile.statements
 			.filter(ts.isTypeAliasDeclaration)
 			.find(node => node.name.getText() === '__VLS_IntrinsicElementsCompletion');
 
-		if (checker && typeNode) {
+		if (typeNode) {
 			const type = checker.getTypeFromTypeNode(typeNode.type);
 			const el = type.getProperty(tagName);
 
@@ -33,3 +33,25 @@ export function getElementAttrs(
 	}
 	return [];
 }
+
+export function _getElementNames(
+	ts: typeof import('typescript'),
+	tsLs: ts.LanguageService,
+	vueCode: VueVirtualCode
+) {
+	const program = tsLs.getProgram()!;
+
+	const tsSourceFile = program.getSourceFile(vueCode.fileName);
+	if (tsSourceFile) {
+		const checker = program.getTypeChecker();
+		const typeNode = tsSourceFile.statements
+			.filter(ts.isTypeAliasDeclaration)
+			.find(node => node.name.getText() === '__VLS_IntrinsicElementsCompletion');
+
+		if (typeNode) {
+			const type = checker.getTypeFromTypeNode(typeNode.type);
+			return type.getProperties().map(c => c.name);
+		}
+	}
+	return [];
+}

packages/typescript-plugin/lib/requests/utils.ts

@@ -52,11 +52,11 @@ export function getVariableType(
 ) {
 	const program = languageService.getProgram()!;
 
-	let tsSourceFile: ts.SourceFile | undefined;
-	if (tsSourceFile = program.getSourceFile(vueCode.fileName)) {
-		const node = searchVariableDeclarationNode(ts, tsSourceFile, name);
+	const tsSourceFile = program.getSourceFile(vueCode.fileName)
+	if (tsSourceFile) {
 		const checker = program.getTypeChecker();
-		if (checker && node) {
+		const node = searchVariableDeclarationNode(ts, tsSourceFile, name);
+		if (node) {
 			return {
 				node: node,
 				type: checker.getTypeAtLocation(node),
@@ -70,16 +70,16 @@ function searchVariableDeclarationNode(
 	sourceFile: ts.SourceFile,
 	name: string
 ) {
-	let componentsNode: ts.Node | undefined;
+	let result: ts.Node | undefined;
 	walk(sourceFile);
-	return componentsNode;
+	return result;
 
 	function walk(node: ts.Node) {
-		if (componentsNode) {
+		if (result) {
 			return;
 		}
 		else if (ts.isVariableDeclaration(node) && node.name.getText() === name) {
-			componentsNode = node;
+			result = node;
 		}
 		else {
 			node.forEachChild(walk);