fix(language-service): replace interpolations with spaces during provideAutoInsertSnippet

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,14 @@ import type {
 	LanguageServicePlugin,
 	TextDocument,
 } from '@volar/language-service';
-import { hyphenateAttr, hyphenateTag, tsCodegen, type VueVirtualCode } from '@vue/language-core';
+import type * as CompilerDOM from '@vue/compiler-dom';
+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';
@@ -157,6 +164,43 @@ export function create(
 					disposable?.dispose();
 				},
 
+				provideAutoInsertSnippet(document, position, autoInsertContext, token) {
+					if (document.languageId !== languageId) {
+						return;
+					}
+					const info = resolveEmbeddedCode(context, document.uri);
+					if (info?.code.id !== 'template') {
+						return;
+					}
+
+					return baseServiceInstance.provideAutoInsertSnippet?.(
+						{
+							...document,
+							getText: () => {
+								if (info.root.sfc.template?.ast) {
+									const locs: CompilerDOM.SourceLocation[] = [];
+									for (const node of forEachInterpolationNode(info.root.sfc.template.ast)) {
+										locs.push(node.loc);
+									}
+									let text = '';
+									let offset = 0;
+									for (const loc of locs) {
+										text += info.root.sfc.template.content.slice(offset, loc.start.offset + 2);
+										text += ' '.repeat(loc.source.length - 4);
+										offset = loc.end.offset - 2;
+									}
+									text += info.root.sfc.template.content.slice(offset);
+									return text;
+								}
+								return document.getText();
+							},
+						},
+						position,
+						autoInsertContext,
+						token,
+					);
+				},
+
 				async provideCompletionItems(document, position, completionContext, token) {
 					if (document.languageId !== languageId) {
 						return;