fix(language-service): correct HTMLDocument structure

close #5745

Co-Authored-By: 山吹色御守 <[email protected]>

Author: johnsoncodehk

packages/language-core/index.ts

@@ -6,6 +6,7 @@ export * from './lib/parsers/scriptSetupRanges';
 export * from './lib/plugins';
 export * from './lib/types';
 export * from './lib/utils/collectBindings';
+export * from './lib/utils/forEachTemplateNode';
 export * from './lib/utils/parseSfc';
 export * from './lib/utils/shared';
 export * from './lib/virtualFile/vueFile';

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

@@ -1,4 +1,3 @@
-import * as CompilerDOM from '@vue/compiler-dom';
 import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
 import { codeFeatures } from '../codeFeatures';
@@ -7,7 +6,7 @@ import { wrapWith } from '../utils/wrapWith';
 import { createTemplateCodegenContext, type TemplateCodegenContext } from './context';
 import { generateObjectProperty } from './objectProperty';
 import { generateStyleScopedClassReferences } from './styleScopedClasses';
-import { generateTemplateChild, getVForNode } from './templateChild';
+import { generateTemplateChild } from './templateChild';
 
 export interface TemplateCodegenOptions {
 	ts: typeof ts;
@@ -203,39 +202,3 @@ function* generateRootEl(
 	yield endOfLine;
 	return `__VLS_RootEl`;
 }
-
-export function* forEachElementNode(
-	node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode,
-): Generator<CompilerDOM.ElementNode> {
-	if (node.type === CompilerDOM.NodeTypes.ROOT) {
-		for (const child of node.children) {
-			yield* forEachElementNode(child);
-		}
-	}
-	else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
-		const patchForNode = getVForNode(node);
-		if (patchForNode) {
-			yield* forEachElementNode(patchForNode);
-		}
-		else {
-			yield node;
-			for (const child of node.children) {
-				yield* forEachElementNode(child);
-			}
-		}
-	}
-	else if (node.type === CompilerDOM.NodeTypes.IF) {
-		// v-if / v-else-if / v-else
-		for (const branch of node.branches) {
-			for (const childNode of branch.children) {
-				yield* forEachElementNode(childNode);
-			}
-		}
-	}
-	else if (node.type === CompilerDOM.NodeTypes.FOR) {
-		// v-for
-		for (const child of node.children) {
-			yield* forEachElementNode(child);
-		}
-	}
-}

packages/language-core/lib/plugins/vue-template-inline-css.ts

@@ -1,6 +1,6 @@
 import * as CompilerDOM from '@vue/compiler-dom';
-import { forEachElementNode } from '../codegen/template';
 import type { Code, VueLanguagePlugin } from '../types';
+import { forEachElementNode } from '../utils/forEachTemplateNode';
 import { allCodeFeatures } from './shared';
 
 const codeFeatures = {

packages/language-core/lib/utils/forEachTemplateNode.ts

@@ -0,0 +1,69 @@
+import * as CompilerDOM from '@vue/compiler-dom';
+
+export function* forEachElementNode(
+	node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode,
+): Generator<CompilerDOM.ElementNode> {
+	if (node.type === CompilerDOM.NodeTypes.ROOT) {
+		for (const child of node.children) {
+			yield* forEachElementNode(child);
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+		yield node;
+		for (const child of node.children) {
+			yield* forEachElementNode(child);
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.IF) {
+		for (const branch of node.branches) {
+			for (const childNode of branch.children) {
+				yield* forEachElementNode(childNode);
+			}
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.FOR) {
+		for (const child of node.children) {
+			yield* forEachElementNode(child);
+		}
+	}
+}
+
+export function* forEachInterpolationNode(
+	node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode,
+): Generator<CompilerDOM.InterpolationNode> {
+	if (node.type === CompilerDOM.NodeTypes.ROOT) {
+		for (const child of node.children) {
+			yield* forEachInterpolationNode(child);
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+		for (const child of node.children) {
+			yield* forEachInterpolationNode(child);
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.TEXT_CALL) {
+		yield* forEachInterpolationNode(node.content);
+	}
+	else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
+		for (const child of node.children) {
+			if (typeof child === 'object') {
+				yield* forEachInterpolationNode(child);
+			}
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.INTERPOLATION) {
+		yield node;
+	}
+	else if (node.type === CompilerDOM.NodeTypes.IF) {
+		for (const branch of node.branches) {
+			for (const childNode of branch.children) {
+				yield* forEachInterpolationNode(childNode);
+			}
+		}
+	}
+	else if (node.type === CompilerDOM.NodeTypes.FOR) {
+		for (const child of node.children) {
+			yield* forEachInterpolationNode(child);
+		}
+	}
+}

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

@@ -6,7 +6,13 @@ import type {
 	LanguageServicePlugin,
 	TextDocument,
 } from '@volar/language-service';
-import { hyphenateAttr, hyphenateTag, tsCodegen, type VueVirtualCode } from '@vue/language-core';
+import {
+	forEachInterpolationNode,
+	hyphenateAttr,
+	hyphenateTag,
+	tsCodegen,
+	type VueVirtualCode,
+} from '@vue/language-core';
 import { camelize, capitalize } from '@vue/shared';
 import type { ComponentPropInfo } from '@vue/typescript-plugin/lib/requests/getComponentProps';
 import { create as createHtmlService } from 'volar-service-html';
@@ -97,6 +103,31 @@ export function create(
 		create(context) {
 			const baseServiceInstance = baseService.create(context);
 
+			if (baseServiceInstance.provide['html/languageService']) {
+				const htmlService: html.LanguageService = baseServiceInstance.provide['html/languageService']();
+				const parseHTMLDocument = htmlService.parseHTMLDocument.bind(htmlService);
+
+				htmlService.parseHTMLDocument = document => {
+					const info = resolveEmbeddedCode(context, document.uri);
+					if (info?.code.id === 'template') {
+						const templateAst = info.root.sfc.template?.ast;
+						if (templateAst) {
+							let text = document.getText();
+							for (const node of forEachInterpolationNode(templateAst)) {
+								text = text.substring(0, node.loc.start.offset)
+									+ ' '.repeat(node.loc.end.offset - node.loc.start.offset)
+									+ text.substring(node.loc.end.offset);
+							}
+							return parseHTMLDocument({
+								...document,
+								getText: () => text,
+							});
+						}
+					}
+					return parseHTMLDocument(document);
+				};
+			}
+
 			builtInData ??= loadTemplateData(context.env.locale ?? 'en');
 			modelData ??= loadModelModifiersData(context.env.locale ?? 'en');
 
@@ -314,22 +345,6 @@ export function create(
 					}
 				},
 
-				async provideAutoInsertSnippet(document, selection, lastChange, token) {
-					if (document.languageId !== languageId) {
-						return;
-					}
-					const info = resolveEmbeddedCode(context, document.uri);
-					if (info?.code.id !== 'template') {
-						return;
-					}
-
-					const snippet = await baseServiceInstance.provideAutoInsertSnippet?.(document, selection, lastChange, token);
-					if (shouldSkipClosingTagFromInterpolation(document, selection, lastChange, snippet)) {
-						return;
-					}
-					return snippet;
-				},
-
 				provideHover(document, position, token) {
 					if (document.languageId !== languageId) {
 						return;
@@ -764,85 +779,3 @@ function getPropName(
 	}
 	return { isEvent, propName: name };
 }
-
-function shouldSkipClosingTagFromInterpolation(
-	doc: TextDocument,
-	selection: html.Position,
-	lastChange: { text: string } | undefined,
-	snippet: string | null | undefined,
-) {
-	if (!snippet || !lastChange || (lastChange.text !== '/' && lastChange.text !== '>')) {
-		return false;
-	}
-	const tagName = /^\$0<\/([^\s>/]+)>$/.exec(snippet)?.[1] ?? /^([^\s>/]+)>$/.exec(snippet)?.[1];
-	if (!tagName) {
-		return false;
-	}
-
-	// check if the open tag inside bracket
-	const textUpToSelection = doc.getText({
-		start: { line: 0, character: 0 },
-		end: selection,
-	});
-
-	const lowerText = textUpToSelection.toLowerCase();
-	const targetTag = `<${tagName.toLowerCase()}`;
-	let searchIndex = lowerText.lastIndexOf(targetTag);
-	let foundInsideInterpolation = false;
-
-	while (searchIndex !== -1) {
-		const nextChar = lowerText.charAt(searchIndex + targetTag.length);
-
-		// if the next character continues the tag name, skip this occurrence
-		const isNameContinuation = nextChar && /[0-9a-z:_-]/.test(nextChar);
-		if (isNameContinuation) {
-			searchIndex = lowerText.lastIndexOf(targetTag, searchIndex - 1);
-			continue;
-		}
-
-		const tagPosition = doc.positionAt(searchIndex);
-		if (!isInsideBracketExpression(doc, tagPosition)) {
-			return false;
-		}
-
-		foundInsideInterpolation = true;
-		searchIndex = lowerText.lastIndexOf(targetTag, searchIndex - 1);
-	}
-
-	return foundInsideInterpolation;
-}
-
-function isInsideBracketExpression(doc: TextDocument, selection: html.Position) {
-	const text = doc.getText({
-		start: { line: 0, character: 0 },
-		end: selection,
-	});
-	const tokenMatcher = /<!--|-->|{{|}}/g;
-	let match: RegExpExecArray | null;
-	let inComment = false;
-	let lastOpen = -1;
-	let lastClose = -1;
-
-	while ((match = tokenMatcher.exec(text)) !== null) {
-		switch (match[0]) {
-			case '<!--':
-				inComment = true;
-				break;
-			case '-->':
-				inComment = false;
-				break;
-			case '{{':
-				if (!inComment) {
-					lastOpen = match.index;
-				}
-				break;
-			case '}}':
-				if (!inComment) {
-					lastClose = match.index;
-				}
-				break;
-		}
-	}
-
-	return lastOpen !== -1 && lastClose < lastOpen;
-}