refactor(language-server): parsing interpolations in extension client (#5633)

Author: johnsoncodehk

extensions/vscode/index.ts

@@ -16,6 +16,7 @@ import {
 } from 'reactive-vscode';
 import * as vscode from 'vscode';
 import { config } from './lib/config';
+import * as interpolationDecorators from './lib/interpolationDecorators';
 import * as reactivityVisualization from './lib/reactivityVisualization';
 import * as welcome from './lib/welcome';
 
@@ -100,6 +101,7 @@ export = defineExtension(() => {
 		activateAutoInsertion(selectors, client);
 		activateDocumentDropEdit(selectors, client);
 
+		interpolationDecorators.activate(context, selectors, client);
 		reactivityVisualization.activate(context, selectors);
 		welcome.activate(context);
 	}, { immediate: true });

extensions/vscode/lib/interpolationDecorators.ts

@@ -0,0 +1,68 @@
+import type { BaseLanguageClient } from '@volar/vscode';
+import * as vscode from 'vscode';
+import { config } from './config';
+
+const decorationType = vscode.window.createTextEditorDecorationType({
+	borderWidth: '1px',
+	borderStyle: 'solid',
+	borderColor: 'rgba(128, 128, 128, 0.5)',
+	backgroundColor: 'rgba(200, 200, 200, 0.1)',
+	borderRadius: '4px',
+});
+
+export async function activate(
+	context: vscode.ExtensionContext,
+	selector: vscode.DocumentSelector,
+	client: BaseLanguageClient,
+) {
+	await client.start();
+
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+
+	for (const editor of vscode.window.visibleTextEditors) {
+		updateDecorations(editor);
+	}
+
+	context.subscriptions.push(
+		vscode.window.onDidChangeActiveTextEditor(editor => {
+			if (editor) {
+				updateDecorations(editor);
+			}
+		}),
+		vscode.workspace.onDidChangeTextDocument(() => {
+			const editor = vscode.window.activeTextEditor;
+			if (editor) {
+				clearTimeout(timeout);
+				timeout = setTimeout(() => updateDecorations(editor), 100);
+			}
+		}),
+		vscode.workspace.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration('vue.editor.templateInterpolationDecorators')) {
+				for (const editor of vscode.window.visibleTextEditors) {
+					updateDecorations(editor);
+				}
+			}
+		}),
+	);
+
+	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),
+				);
+			}),
+		);
+	}
+}

packages/language-server/index.ts

@@ -1,12 +1,11 @@
-import type { LanguageServer, TextDocumentIdentifier } from '@volar/language-server';
+import type { LanguageServer } from '@volar/language-server';
 import { createLanguageServiceEnvironment } from '@volar/language-server/lib/project/simpleProject';
 import { createConnection, createServer } from '@volar/language-server/node';
 import {
 	createLanguage,
 	createParsedCommandLine,
 	createParsedCommandLineByJson,
 	createVueLanguagePlugin,
-	forEachEmbeddedCode,
 } from '@vue/language-core';
 import {
 	createLanguageService,
@@ -210,36 +209,3 @@ connection.onInitialize(params => {
 connection.onInitialized(server.initialized);
 
 connection.onShutdown(server.shutdown);
-
-connection.onRequest('vue/interpolationRanges', async (params: {
-	textDocument: TextDocumentIdentifier;
-}): Promise<[number, number][]> => {
-	const uri = URI.parse(params.textDocument.uri);
-	const languageService = await server.project.getLanguageService(uri);
-	const sourceFile = languageService.context.language.scripts.get(uri);
-	if (sourceFile?.generated) {
-		const ranges: [number, number][] = [];
-		for (const code of forEachEmbeddedCode(sourceFile.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;
-	}
-	return [];
-});