fix(vscode): analyze interpolation highlight ranges based on AST

extensions/vscode/lib/interpolationDecorators.ts

@@ -41,24 +41,37 @@ export function activate(selector: vscode.DocumentSelector) {
 		}
 	});
 
-	function updateDecorations(editor: vscode.TextEditor) {
+	async function updateDecorations(editor: vscode.TextEditor) {
 		if (!vscode.languages.match(selector, editor.document)) {
 			return;
 		}
 		if (!config.editor.templateInterpolationDecorators) {
 			editor.setDecorations(decorationType, []);
 			return;
 		}
-		editor.setDecorations(
-			decorationType,
-			[...editor.document.getText().matchAll(/{{[\s\S]*?}}/g)].map(match => {
-				const start = match.index + 2;
-				const end = match.index + match[0].length - 2;
-				return new vscode.Range(
-					editor.document.positionAt(start),
-					editor.document.positionAt(end),
-				);
-			}),
-		);
+		try {
+			const result = await vscode.commands.executeCommand<
+				{
+					body?: [number, number][];
+				} | undefined
+			>(
+				'typescript.tsserverRequest',
+				'_vue:getInterpolationRanges',
+				[editor.document.uri.fsPath.replace(/\\/g, '/')],
+				{ isAsync: true, lowPriority: true },
+			);
+			editor.setDecorations(
+				decorationType,
+				(result?.body ?? []).map(range =>
+					new vscode.Range(
+						editor.document.positionAt(range[0]),
+						editor.document.positionAt(range[1]),
+					)
+				),
+			);
+		}
+		catch {
+			editor.setDecorations(decorationType, []);
+		}
 	}
 }

extensions/vscode/reactivityAnalysis/plugin.ts → extensions/vscode/lib/reactivityAnalysisPlugin.ts

@@ -1,5 +1,5 @@
 import { createProxyLanguageService, decorateLanguageServiceHost } from '@volar/typescript';
-import type { Language } from '@vue/language-core';
+import { forEachEmbeddedCode, type Language } from '@vue/language-core';
 import { createAnalyzer } from 'laplacenoma';
 // @ts-expect-error
 import rulesVue from 'laplacenoma/rules/vue';
@@ -22,6 +22,13 @@ const plugin: ts.server.PluginModuleFactory = ({ typescript: ts }) => {
 						responseRequired: true,
 					};
 				});
+				info.session.addProtocolHandler('_vue:getInterpolationRanges', request => {
+					const [fileName]: [string] = request.arguments;
+					return {
+						response: getInterpolationRanges(info.session!, fileName),
+						responseRequired: true,
+					};
+				});
 			}
 
 			return info.languageService;
@@ -98,3 +105,49 @@ function getReactivityAnalysis(
 		toSourceRange,
 	});
 }
+
+function getInterpolationRanges(
+	session: ts.server.Session,
+	fileName: string,
+) {
+	const { project } = session['getFileAndProject']({
+		file: fileName,
+		projectFileName: undefined,
+	}) as {
+		file: ts.server.NormalizedPath;
+		project: ts.server.Project;
+	};
+
+	const language: Language<string> | undefined = (project as any).__vue__?.language;
+	if (!language) {
+		return;
+	}
+
+	const sourceScript = language.scripts.get(fileName);
+	if (!sourceScript?.generated) {
+		return;
+	}
+
+	const ranges: [number, number][] = [];
+	for (const code of forEachEmbeddedCode(sourceScript.generated.root)) {
+		const codeText = code.snapshot.getText(0, code.snapshot.getLength());
+		if (
+			(
+				code.id.startsWith('template_inline_ts_')
+				&& codeText.startsWith('0 +')
+				&& codeText.endsWith('+ 0;')
+			)
+			|| (code.id.startsWith('style_') && code.id.endsWith('_inline_ts'))
+		) {
+			for (const mapping of code.mappings) {
+				for (let i = 0; i < mapping.sourceOffsets.length; i++) {
+					ranges.push([
+						mapping.sourceOffsets[i]!,
+						mapping.sourceOffsets[i]! + mapping.lengths[i]!,
+					]);
+				}
+			}
+		}
+	}
+	return ranges;
+}

extensions/vscode/rolldown.config.ts

@@ -8,7 +8,7 @@ const resolve = (...paths: string[]) => path.resolve(__dirname, ...paths);
 const config: RolldownOptions = {
 	input: {
 		'extension': './index.ts',
-		'reactivity-analysis': './reactivityAnalysis/plugin.ts',
+		'reactivity-analysis-plugin': './lib/reactivityAnalysisPlugin.ts',
 	},
 	output: {
 		format: 'cjs',
@@ -37,7 +37,7 @@ const config: RolldownOptions = {
 				fs.mkdirSync(resolve('./node_modules/vue-reactivity-analysis-plugin-pack'), { recursive: true });
 				fs.writeFileSync(
 					resolve('./node_modules/vue-reactivity-analysis-plugin-pack/index.js'),
-					`module.exports = require('../../dist/reactivity-analysis.js');`,
+					`module.exports = require('../../dist/reactivity-analysis-plugin.js');`,
 				);
 
 				if (isDev) {