fix(language-service): ignore intrinsic elements when detect tag name casing

packages/language-service/lib/nameCasing.ts

@@ -1,87 +1,89 @@
 import type { LanguageServiceContext, VirtualCode } from '@volar/language-service';
 import type { NodeTypes } from '@vue/compiler-dom';
+import type * as CompilerDOM from '@vue/compiler-dom';
 import { forEachElementNode, hyphenateTag, VueVirtualCode } from '@vue/language-core';
 import type { URI } from 'vscode-uri';
 
-export enum TagNameCasing {
+type CollectResult = Map<string, [tagType: CompilerDOM.ElementTypes, attrs: string[]]>;
+
+const collectCache = new WeakMap<VirtualCode, CollectResult>();
+
+export const enum TagNameCasing {
 	Kebab,
 	Pascal,
 }
 
-export enum AttrNameCasing {
+export const enum AttrNameCasing {
 	Kebab,
 	Camel,
 }
 
-export async function checkCasing(context: LanguageServiceContext, uri: URI) {
-	const detected = detect(context, uri);
-	const [attr, tag] = await Promise.all([
-		context.env.getConfiguration<'preferKebabCase' | 'preferCamelCase' | 'alwaysKebabCase' | 'alwaysCamelCase'>?.(
-			'vue.suggest.propNameCasing',
-			uri.toString(),
-		),
-		context.env.getConfiguration<'preferKebabCase' | 'preferPascalCase' | 'alwaysKebabCase' | 'alwaysPascalCase'>?.(
-			'vue.suggest.componentNameCasing',
-			uri.toString(),
-		),
-	]);
-	const tagNameCasing = detected.tag.length === 1 && (tag === 'preferPascalCase' || tag === 'preferKebabCase')
-		? detected.tag[0]
-		: (tag === 'preferKebabCase' || tag === 'alwaysKebabCase')
-		? TagNameCasing.Kebab
-		: TagNameCasing.Pascal;
-	const attrNameCasing = detected.attr.length === 1 && (attr === 'preferCamelCase' || attr === 'preferKebabCase')
-		? detected.attr[0]
-		: (attr === 'preferCamelCase' || attr === 'alwaysCamelCase')
-		? AttrNameCasing.Camel
-		: AttrNameCasing.Kebab;
-	return {
-		tag: tagNameCasing,
-		attr: attrNameCasing,
-	};
-}
-
-type Tags = Map<string, string[]>;
+export async function getTagNameCasing(context: LanguageServiceContext, uri: URI) {
+	const config = await context.env.getConfiguration<
+		'preferKebabCase' | 'preferPascalCase' | 'alwaysKebabCase' | 'alwaysPascalCase'
+	>?.('vue.suggest.componentNameCasing', uri.toString());
 
-const cache = new WeakMap<VirtualCode, Tags | undefined>();
+	if (config === 'alwaysKebabCase') {
+		return TagNameCasing.Kebab;
+	}
+	if (config === 'alwaysPascalCase') {
+		return TagNameCasing.Pascal;
+	}
 
-function detect(
-	context: LanguageServiceContext,
-	uri: URI,
-): {
-	tag: TagNameCasing[];
-	attr: AttrNameCasing[];
-} {
 	const root = context.language.scripts.get(uri)?.generated?.root;
-	if (!(root instanceof VueVirtualCode)) {
-		return { tag: [], attr: [] };
+
+	if (root instanceof VueVirtualCode) {
+		const detectedCasings = detectTagCasing(root);
+		if (detectedCasings.length === 1) {
+			return detectedCasings[0];
+		}
+	}
+	if (config === 'preferKebabCase') {
+		return TagNameCasing.Kebab;
 	}
-	return {
-		tag: detectTagCasing(root),
-		attr: detectAttrCasing(root),
-	};
+
+	return TagNameCasing.Pascal;
 }
 
-function detectAttrCasing(code: VirtualCode) {
-	let tags: Tags | undefined;
-	if (cache.has(code)) {
-		tags = cache.get(code);
+export async function getAttrNameCasing(context: LanguageServiceContext, uri: URI) {
+	const config = await context.env.getConfiguration<
+		'preferKebabCase' | 'preferCamelCase' | 'alwaysKebabCase' | 'alwaysCamelCase'
+	>?.('vue.suggest.propNameCasing', uri.toString());
+
+	if (config === 'alwaysKebabCase') {
+		return AttrNameCasing.Kebab;
+	}
+	if (config === 'alwaysCamelCase') {
+		return AttrNameCasing.Camel;
+	}
+
+	const root = context.language.scripts.get(uri)?.generated?.root;
+
+	if (root instanceof VueVirtualCode) {
+		const detectedCasings = detectAttrCasing(root);
+		if (detectedCasings.length === 1) {
+			return detectedCasings[0];
+		}
 	}
-	else {
-		cache.set(code, tags = collectTags(code));
+	if (config === 'preferKebabCase') {
+		return AttrNameCasing.Kebab;
 	}
+
+	return AttrNameCasing.Camel;
+}
+
+function detectAttrCasing(code: VueVirtualCode) {
+	const tags = collectTagsWithCache(code);
 	const result = new Set<AttrNameCasing>();
 
-	for (const [, attrs] of tags ?? []) {
+	for (const [, [_, attrs]] of tags) {
 		for (const attr of attrs) {
-			// attrName
 			if (attr !== hyphenateTag(attr)) {
 				result.add(AttrNameCasing.Camel);
 				break;
 			}
 		}
 		for (const attr of attrs) {
-			// attr-name
 			if (attr.includes('-')) {
 				result.add(AttrNameCasing.Kebab);
 				break;
@@ -92,41 +94,43 @@ function detectAttrCasing(code: VirtualCode) {
 }
 
 function detectTagCasing(code: VueVirtualCode): TagNameCasing[] {
-	let tags: Tags | undefined;
-	if (cache.has(code)) {
-		tags = cache.get(code);
-	}
-	else {
-		cache.set(code, tags = collectTags(code));
-	}
+	const tags = collectTagsWithCache(code);
 	const result = new Set<TagNameCasing>();
 
-	for (const [tag] of tags ?? []) {
+	for (const [tag, [tagType]] of tags) {
+		if (
+			tagType === 0 satisfies CompilerDOM.ElementTypes.ELEMENT
+			|| tagType === 3 satisfies CompilerDOM.ElementTypes.TEMPLATE
+		) {
+			continue;
+		}
 		if (tag !== hyphenateTag(tag)) {
-			// TagName
 			result.add(TagNameCasing.Pascal);
 		}
 		else {
-			// tag-name
 			result.add(TagNameCasing.Kebab);
 		}
 	}
 	return [...result];
 }
 
-function collectTags(root: VirtualCode) {
-	if (!(root instanceof VueVirtualCode)) {
-		return undefined;
+function collectTagsWithCache(code: VueVirtualCode) {
+	let cache = collectCache.get(code);
+	if (!cache) {
+		const ast = code.sfc.template?.ast;
+		cache = ast ? collectTags(ast) : new Map();
+		collectCache.set(code, cache);
 	}
-	const ast = root.sfc.template?.ast;
-	if (!ast) {
-		return undefined;
-	}
-	const tags: Tags = new Map();
+	return cache;
+}
+
+function collectTags(ast: CompilerDOM.RootNode) {
+	const tags: CollectResult = new Map();
+
 	for (const node of forEachElementNode(ast)) {
 		let tag = tags.get(node.tag);
 		if (!tag) {
-			tags.set(node.tag, tag = []);
+			tags.set(node.tag, tag = [node.tagType, []]);
 		}
 		for (const prop of node.props) {
 			let name: string | undefined;
@@ -143,9 +147,10 @@ function collectTags(root: VirtualCode) {
 				name = prop.name;
 			}
 			if (name !== undefined) {
-				tag.push(name);
+				tag[1].push(name);
 			}
 		}
 	}
+
 	return tags;
 }

packages/language-service/lib/plugins/vue-document-drop.ts

@@ -4,7 +4,7 @@ import { camelize, capitalize, hyphenate } from '@vue/shared';
 import { posix as path } from 'path-browserify';
 import { getUserPreferences } from 'volar-service-typescript/lib/configs/getUserPreferences';
 import { URI } from 'vscode-uri';
-import { checkCasing, TagNameCasing } from '../nameCasing';
+import { getTagNameCasing, TagNameCasing } from '../nameCasing';
 import { createAddComponentToOptionEdit, getLastImportNode } from '../plugins/vue-extract-file';
 import { resolveEmbeddedCode } from '../utils';
 
@@ -44,7 +44,7 @@ export function create(
 						return;
 					}
 
-					const casing = await checkCasing(context, info.script.id);
+					const tagNameCasing = await getTagNameCasing(context, info.script.id);
 					const baseName = path.basename(importUri);
 					const newName = capitalize(camelize(baseName.slice(0, baseName.lastIndexOf('.'))));
 
@@ -114,7 +114,7 @@ export function create(
 					}
 
 					return {
-						insertText: `<${casing.tag === TagNameCasing.Kebab ? hyphenate(newName) : newName}$0 />`,
+						insertText: `<${tagNameCasing === TagNameCasing.Kebab ? hyphenate(newName) : newName}$0 />`,
 						insertTextFormat: 2 satisfies typeof InsertTextFormat.Snippet,
 						additionalEdit,
 					};

packages/language-service/lib/plugins/vue-missing-props-hints.ts

@@ -7,7 +7,7 @@ import type {
 } from '@volar/language-service';
 import { hyphenateAttr, hyphenateTag } from '@vue/language-core';
 import * as html from 'vscode-html-languageservice';
-import { AttrNameCasing, checkCasing } from '../nameCasing';
+import { AttrNameCasing, getAttrNameCasing } from '../nameCasing';
 import { resolveEmbeddedCode } from '../utils';
 
 export function create(
@@ -39,7 +39,7 @@ export function create(
 					}
 
 					const result: InlayHint[] = [];
-					const casing = await checkCasing(context, info.script.id);
+					const attrNameCasing = await getAttrNameCasing(context, info.script.id);
 					const components = await getComponentNames(info.root.fileName) ?? [];
 					const componentProps = new Map<string, string[]>();
 
@@ -141,7 +141,7 @@ export function create(
 												end: document.positionAt(current.labelOffset),
 											},
 											newText: ` :${
-												casing.attr === AttrNameCasing.Kebab ? hyphenateAttr(requiredProp) : requiredProp
+												attrNameCasing === AttrNameCasing.Kebab ? hyphenateAttr(requiredProp) : requiredProp
 											}=`,
 										}],
 									});

packages/language-service/lib/plugins/vue-template.ts

@@ -20,7 +20,7 @@ import { create as createPugService } from 'volar-service-pug';
 import * as html from 'vscode-html-languageservice';
 import { URI, Utils } from 'vscode-uri';
 import { loadModelModifiersData, loadTemplateData } from '../data';
-import { AttrNameCasing, checkCasing, TagNameCasing } from '../nameCasing';
+import { AttrNameCasing, getAttrNameCasing, getTagNameCasing, TagNameCasing } from '../nameCasing';
 import { createReferenceResolver, resolveEmbeddedCode } from '../utils';
 
 const specialTags = new Set([
@@ -38,6 +38,14 @@ const specialProps = new Set([
 	'style',
 ]);
 
+const builtInComponents = new Set([
+	'Transition',
+	'TransitionGroup',
+	'KeepAlive',
+	'Suspense',
+	'Teleport',
+]);
+
 let builtInData: html.HTMLDataV1 | undefined;
 let modelData: html.HTMLDataV1 | undefined;
 
@@ -405,13 +413,14 @@ export function create(
 			async function provideHtmlData(sourceDocumentUri: URI, root: VueVirtualCode) {
 				await (initializing ??= initialize());
 
-				const casing = await checkCasing(context, sourceDocumentUri);
+				const tagNameCasing = await getTagNameCasing(context, sourceDocumentUri);
+				const attrNameCasing = await getAttrNameCasing(context, sourceDocumentUri);
 
 				for (const tag of builtInData!.tags ?? []) {
 					if (specialTags.has(tag.name)) {
 						continue;
 					}
-					if (casing.tag === TagNameCasing.Kebab) {
+					if (tagNameCasing === TagNameCasing.Kebab) {
 						tag.name = hyphenateTag(tag.name);
 					}
 					else {
@@ -472,13 +481,7 @@ export function create(
 								components = [];
 								tasks.push((async () => {
 									components = (await getComponentNames(root.fileName) ?? [])
-										.filter(name =>
-											name !== 'Transition'
-											&& name !== 'TransitionGroup'
-											&& name !== 'KeepAlive'
-											&& name !== 'Suspense'
-											&& name !== 'Teleport'
-										);
+										.filter(name => !builtInComponents.has(name));
 									version++;
 								})());
 							}
@@ -487,7 +490,7 @@ export function create(
 							const tags: html.ITagData[] = [];
 
 							for (const tag of components) {
-								if (casing.tag === TagNameCasing.Kebab) {
+								if (tagNameCasing === TagNameCasing.Kebab) {
 									names.add(hyphenateTag(tag));
 								}
 								else {
@@ -497,7 +500,7 @@ export function create(
 
 							for (const binding of scriptSetupRanges?.bindings ?? []) {
 								const name = root.sfc.scriptSetup!.content.slice(binding.range.start, binding.range.end);
-								if (casing.tag === TagNameCasing.Kebab) {
+								if (tagNameCasing === TagNameCasing.Kebab) {
 									names.add(hyphenateTag(name));
 								}
 								else {
@@ -559,11 +562,11 @@ export function create(
 								]
 							) {
 								const isGlobal = prop.isAttribute || !propNameSet.has(prop.name);
-								const propName = casing.attr === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
+								const propName = attrNameCasing === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
 								const isEvent = hyphenateAttr(propName).startsWith('on-');
 
 								if (isEvent) {
-									const eventName = casing.attr === AttrNameCasing.Camel
+									const eventName = attrNameCasing === AttrNameCasing.Camel
 										? propName['on'.length]!.toLowerCase() + propName.slice('onX'.length)
 										: propName.slice('on-'.length);
 
@@ -584,7 +587,7 @@ export function create(
 								}
 								else {
 									const propInfo = propInfos.find(prop => {
-										const name = casing.attr === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
+										const name = attrNameCasing === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
 										return name === propName;
 									});
 
@@ -610,7 +613,7 @@ export function create(
 							}
 
 							for (const event of events) {
-								const eventName = casing.attr === AttrNameCasing.Camel ? event : hyphenateAttr(event);
+								const eventName = attrNameCasing === AttrNameCasing.Camel ? event : hyphenateAttr(event);
 
 								for (
 									const name of [
@@ -652,7 +655,7 @@ export function create(
 							}
 
 							for (const model of models) {
-								const name = casing.attr === AttrNameCasing.Camel ? model : hyphenateAttr(model);
+								const name = attrNameCasing === AttrNameCasing.Camel ? model : hyphenateAttr(model);
 
 								attributes.push({ name: 'v-model:' + name });
 								propMap.set('v-model:' + name, {