refactor(vscode): use more reactive api

Author: KazariEX

extensions/vscode/index.ts

@@ -117,9 +117,9 @@ export = defineExtension(() => {
 		activateAutoInsertion(selectors, client);
 		activateDocumentDropEdit(selectors, client);
 
-		focusMode.activate(context, selectors);
-		interpolationDecorators.activate(context, selectors);
-		reactivityVisualization.activate(context, selectors);
+		focusMode.activate(selectors);
+		interpolationDecorators.activate(selectors);
+		reactivityVisualization.activate(selectors);
 		welcome.activate(context);
 	}, { immediate: true });
 

extensions/vscode/lib/focusMode.ts

@@ -1,3 +1,10 @@
+import {
+	useActiveTextEditor,
+	useDocumentText,
+	useTextEditorSelection,
+	useVisibleTextEditors,
+	watch,
+} from 'reactive-vscode';
 import * as vscode from 'vscode';
 import { config } from './config';
 
@@ -8,12 +15,7 @@ const tagUnfocusDecorations = Array.from({ length: 8 }).map((_, i) =>
 	})
 );
 
-export function activate(
-	context: vscode.ExtensionContext,
-	selector: vscode.DocumentSelector,
-) {
-	let timeout: ReturnType<typeof setTimeout> | undefined;
-
+export function activate(selector: vscode.DocumentSelector) {
 	const editor2Decorations = new Map<vscode.TextEditor, {
 		currentTagDecIndex: number;
 		targetTagDecIndex: number;
@@ -48,32 +50,40 @@ export function activate(
 		}
 	}, 24);
 
-	context.subscriptions.push(
-		vscode.window.onDidChangeVisibleTextEditors(editors => {
-			for (const [editor, info] of editor2Decorations) {
-				if (!editors.includes(editor)) {
-					info.targetTagDecIndex = 0;
-				}
-			}
-		}),
-		vscode.window.onDidChangeTextEditorSelection(editor => {
-			updateDecorations(editor.textEditor);
-		}),
-		vscode.workspace.onDidChangeTextDocument(() => {
-			const editor = vscode.window.activeTextEditor;
-			if (editor) {
-				clearTimeout(timeout);
-				timeout = setTimeout(() => updateDecorations(editor), 100);
+	const visibleTextEditors = useVisibleTextEditors();
+	const activeTextEditor = useActiveTextEditor();
+	const activeSelection = useTextEditorSelection(activeTextEditor);
+	const activeText = useDocumentText(() => activeTextEditor.value?.document);
+
+	watch(visibleTextEditors, editors => {
+		for (const [editor, info] of editor2Decorations) {
+			if (!editors.includes(editor)) {
+				info.targetTagDecIndex = 0;
 			}
-		}),
-		vscode.workspace.onDidChangeConfiguration(e => {
-			if (e.affectsConfiguration('vue.editor.focusMode')) {
-				for (const editor of vscode.window.visibleTextEditors) {
-					updateDecorations(editor);
-				}
+		}
+	});
+
+	watch(activeSelection, () => {
+		if (activeTextEditor.value) {
+			updateDecorations(activeTextEditor.value);
+		}
+	});
+
+	let timeout: NodeJS.Timeout | undefined;
+	watch(activeText, () => {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			if (activeTextEditor.value) {
+				updateDecorations(activeTextEditor.value);
 			}
-		}),
-	);
+		}, 100);
+	});
+
+	watch(() => config.editor.focusMode, () => {
+		for (const editor of visibleTextEditors.value) {
+			updateDecorations(editor);
+		}
+	});
 
 	async function updateDecorations(editor: vscode.TextEditor) {
 		if (!vscode.languages.match(selector, editor.document)) {

extensions/vscode/lib/interpolationDecorators.ts

@@ -1,3 +1,4 @@
+import { useActiveTextEditor, useDocumentText, useVisibleTextEditors, watch } from 'reactive-vscode';
 import * as vscode from 'vscode';
 import { config } from './config';
 
@@ -9,37 +10,36 @@ const decorationType = vscode.window.createTextEditorDecorationType({
 	borderRadius: '4px',
 });
 
-export function activate(
-	context: vscode.ExtensionContext,
-	selector: vscode.DocumentSelector,
-) {
+export function activate(selector: vscode.DocumentSelector) {
 	let timeout: ReturnType<typeof setTimeout> | undefined;
 
-	for (const editor of vscode.window.visibleTextEditors) {
+	const visibleTextEditors = useVisibleTextEditors();
+	const activeTextEditor = useActiveTextEditor();
+	const activeText = useDocumentText(() => activeTextEditor.value?.document);
+
+	for (const editor of visibleTextEditors.value) {
 		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);
-				}
-			}
-		}),
-	);
+	watch(activeTextEditor, editor => {
+		if (editor) {
+			updateDecorations(editor);
+		}
+	});
+
+	watch(activeText, () => {
+		const editor = activeTextEditor.value;
+		if (editor) {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => updateDecorations(editor), 100);
+		}
+	});
+
+	watch(() => config.editor.templateInterpolationDecorators, () => {
+		for (const editor of visibleTextEditors.value) {
+			updateDecorations(editor);
+		}
+	});
 
 	function updateDecorations(editor: vscode.TextEditor) {
 		if (!vscode.languages.match(selector, editor.document)) {

extensions/vscode/lib/reactivityVisualization.ts

@@ -1,4 +1,5 @@
 import type { Analyzer } from 'laplacenoma';
+import { useActiveTextEditor, useTextEditorSelection, useVisibleTextEditors, watch } from 'reactive-vscode';
 import type * as ts from 'typescript';
 import * as vscode from 'vscode';
 import { config } from './config';
@@ -23,35 +24,35 @@ const dependentDecorations = vscode.window.createTextEditorDecorationType({
 	borderWidth: '0 0 0 3px',
 });
 
-export function activate(
-	context: vscode.ExtensionContext,
-	selector: vscode.DocumentSelector,
-) {
+export function activate(selector: vscode.DocumentSelector) {
 	const documentUpdateVersions = new WeakMap<vscode.TextDocument, number>();
 
 	let timeout: ReturnType<typeof setTimeout> | undefined;
 
-	for (const editor of vscode.window.visibleTextEditors) {
+	const visibleTextEditors = useVisibleTextEditors();
+	const activeTextEditor = useActiveTextEditor();
+	const activeSelection = useTextEditorSelection(activeTextEditor);
+
+	for (const editor of visibleTextEditors.value) {
 		updateDecorations(editor);
 	}
 
-	context.subscriptions.push(
-		vscode.window.onDidChangeActiveTextEditor(editor => {
-			if (editor) {
-				updateDecorations(editor);
-			}
-		}),
-		vscode.window.onDidChangeTextEditorSelection(() => {
-			const editor = vscode.window.activeTextEditor;
-			if (editor) {
-				clearTimeout(timeout);
-				timeout = setTimeout(
-					() => updateDecorations(editor),
-					getUpdateInterval(editor.document),
-				);
-			}
-		}),
-	);
+	watch(activeTextEditor, editor => {
+		if (editor) {
+			updateDecorations(editor);
+		}
+	});
+
+	watch(activeSelection, () => {
+		const editor = activeTextEditor.value;
+		if (editor) {
+			clearTimeout(timeout);
+			timeout = setTimeout(
+				() => updateDecorations(editor),
+				getUpdateInterval(editor.document),
+			);
+		}
+	});
 
 	function getUpdateInterval(document: vscode.TextDocument) {
 		const prevVersion = documentUpdateVersions.get(document);