refactor(typescript-plugin): move reactivity analysis logic to a seperate typescript plugin (#5672)

KazariEX · johnsoncodehk · web-flow · commit 9066601e9ff1 · 2025-09-28T05:59:46.000-07:00
Co-authored-by: Johnson Chu &lt;johnsoncodehk@gmail.com&gt;
diff --git a/extensions/vscode/index.ts b/extensions/vscode/index.ts
@@ -240,6 +240,10 @@ function patchTypeScriptExtension() {
 			configNamespace: 'typescript',
 			languages: config.server.includeLanguages,
 		},
+		{
+			name: 'vue-reactivity-analysis-plugin-pack',
+			enableForWorkspaceTypeScriptVersions: true,
+		},
 	];
 
 	fs.readFileSync = (...args: any[]) => {
diff --git a/extensions/vscode/lib/reactivityVisualization.ts b/extensions/vscode/lib/reactivityVisualization.ts
@@ -1,4 +1,4 @@
-import type { getReactiveReferences } from '@vue/typescript-plugin/lib/requests/getReactiveReferences';
+import type { Analyzer } from 'laplacenoma';
 import type * as ts from 'typescript';
 import * as vscode from 'vscode';
 import { config } from './config';
@@ -85,11 +85,11 @@ export function activate(
 		try {
 			const result = await vscode.commands.executeCommand<
 				{
-					body?: ReturnType<typeof getReactiveReferences>;
+					body?: ReturnType<Analyzer['analyze']> | undefined;
 				} | undefined
 			>(
 				'typescript.tsserverRequest',
-				'_vue:getReactiveReferences',
+				'_vue:getReactivityAnalysis',
 				[
 					document.uri.fsPath.replace(/\\/g, '/'),
 					document.offsetAt(editor.selection.active),
diff --git a/extensions/vscode/package.json b/extensions/vscode/package.json
@@ -461,11 +461,14 @@
 		"@types/node": "^22.10.4",
 		"@types/semver": "^7.5.3",
 		"@types/vscode": "1.88.0",
+		"@volar/typescript": "2.4.23",
 		"@volar/vscode": "2.4.23",
 		"@vscode/vsce": "^3.2.1",
 		"@vue/compiler-sfc": "^3.5.0",
+		"@vue/language-core": "3.0.8",
 		"@vue/language-server": "3.0.8",
 		"@vue/typescript-plugin": "3.0.8",
+		"laplacenoma": "^0.0.3",
 		"reactive-vscode": "^0.2.9",
 		"rolldown": "1.0.0-beta.8",
 		"semver": "^7.5.4",
diff --git a/extensions/vscode/reactivityAnalysis/plugin.ts b/extensions/vscode/reactivityAnalysis/plugin.ts
@@ -1,38 +1,72 @@
 import { createProxyLanguageService, decorateLanguageServiceHost } from '@volar/typescript';
-import type { Language, SourceScript } from '@vue/language-core';
+import type { Language } from '@vue/language-core';
 import { createAnalyzer } from 'laplacenoma';
-import * as rulesVue from 'laplacenoma/rules/vue';
+// @ts-expect-error
+import rulesVue from 'laplacenoma/rules/vue';
 import type * as ts from 'typescript';
 
-const analyzer = createAnalyzer({
-	rules: rulesVue,
-});
-
 let currentVersion = -1;
 let currentFileName = '';
 let currentSnapshot: ts.IScriptSnapshot | undefined;
 let languageService: ts.LanguageService | undefined;
 
-export function getReactiveReferences(
+const analyzer = createAnalyzer({ rules: rulesVue });
+const plugin: ts.server.PluginModuleFactory = ({ typescript: ts }) => {
+	return {
+		create(info) {
+			if (info.session && !(info.session as any).handlers.has('_vue:getReactivityAnalysis')) {
+				info.session.addProtocolHandler('_vue:getReactivityAnalysis', request => {
+					const [fileName, position]: [string, number] = request.arguments;
+					return {
+						response: getReactivityAnalysis(ts, info.session!, fileName, position),
+						responseRequired: true,
+					};
+				});
+			}
+
+			return info.languageService;
+		},
+	};
+};
+
+export = plugin;
+
+function getReactivityAnalysis(
 	ts: typeof import('typescript'),
-	language: Language<string>,
-	sourceScript: SourceScript<string>,
+	session: ts.server.Session,
+	fileName: string,
 	position: number,
-	leadingOffset: number = 0,
 ) {
+	const { project } = session['getFileAndProject']({
+		file: fileName,
+		projectFileName: undefined,
+	}) as {
+		file: ts.server.NormalizedPath;
+		project: ts.server.Project;
+	};
+
+	const language: Language<string> | undefined = project['program']?.__vue__?.language;
+	if (!language) {
+		return;
+	}
+
+	const sourceScript = language.scripts.get(fileName);
+	if (!sourceScript) {
+		return;
+	}
+
 	if (currentSnapshot !== sourceScript.snapshot || currentFileName !== sourceScript.id) {
 		currentSnapshot = sourceScript.snapshot;
 		currentFileName = sourceScript.id;
 		currentVersion++;
 	}
 	if (!languageService) {
-		const compilerOptions: ts.CompilerOptions = { allowJs: true, allowNonTsExtensions: true };
 		const languageServiceHost: ts.LanguageServiceHost = {
 			getProjectVersion: () => currentVersion.toString(),
 			getScriptVersion: () => currentVersion.toString(),
 			getScriptFileNames: () => [currentFileName],
 			getScriptSnapshot: fileName => fileName === currentFileName ? currentSnapshot : undefined,
-			getCompilationSettings: () => compilerOptions,
+			getCompilationSettings: () => ({ allowJs: true, allowNonTsExtensions: true }),
 			getCurrentDirectory: () => '',
 			getDefaultLibFileName: () => '',
 			readFile: () => undefined,
@@ -49,6 +83,7 @@ export function getReactiveReferences(
 		sourceScript.generated.root,
 	);
 	const map = serviceScript ? language.maps.get(serviceScript.code, sourceScript) : undefined;
+	const leadingOffset = sourceScript.generated ? sourceScript.snapshot.getLength() : 0;
 	const toSourceRange = map
 		? (pos: number, end: number) => {
 			for (const [mappedStart, mappedEnd] of map.toSourceRange(pos - leadingOffset, end - leadingOffset, false)) {
diff --git a/extensions/vscode/rolldown.config.ts b/extensions/vscode/rolldown.config.ts
@@ -8,6 +8,7 @@ const resolve = (...paths: string[]) => path.resolve(__dirname, ...paths);
 const config: RolldownOptions = {
 	input: {
 		'extension': './index.ts',
+		'reactivity-analysis': './reactivityAnalysis/plugin.ts',
 	},
 	output: {
 		format: 'cjs',
@@ -33,6 +34,12 @@ const config: RolldownOptions = {
 					`module.exports = require('../../dist/typescript-plugin.js');`,
 				);
 
+				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');`,
+				);
+
 				if (isDev) {
 					fs.mkdirSync(resolve('./dist'), { recursive: true });
 					fs.writeFileSync(
diff --git a/extensions/vscode/tsconfig.json b/extensions/vscode/tsconfig.json
@@ -5,5 +5,5 @@
 		"module": "CommonJS",
 		"moduleResolution": "Node"
 	},
-	"include": ["*", "lib/**/*"]
+	"include": ["*", "lib/**/*", "reactivityAnalysis/**/*"]
 }
diff --git a/packages/language-server/index.ts b/packages/language-server/index.ts
@@ -122,9 +122,6 @@ connection.onInitialize(params => {
 			getImportPathForFile(...args) {
 				return sendTsServerRequest('_vue:getImportPathForFile', args);
 			},
-			getReactiveReferences(...args) {
-				return sendTsServerRequest('_vue:getReactiveReferences', args);
-			},
 			isRefAtPosition(...args) {
 				return sendTsServerRequest('_vue:isRefAtPosition', args);
 			},
diff --git a/packages/typescript-plugin/index.ts b/packages/typescript-plugin/index.ts
@@ -12,7 +12,6 @@ import { getComponentSlots } from './lib/requests/getComponentSlots';
 import { getElementAttrs } from './lib/requests/getElementAttrs';
 import { getElementNames } from './lib/requests/getElementNames';
 import { getImportPathForFile } from './lib/requests/getImportPathForFile';
-import { getReactiveReferences } from './lib/requests/getReactiveReferences';
 import { isRefAtPosition } from './lib/requests/isRefAtPosition';
 
 const windowsPathReg = /\\/g;
@@ -187,20 +186,6 @@ export = createLanguageServicePlugin(
 				const { languageService } = getLanguageService(fileName);
 				return createResponse(getElementNames(ts, languageService.getProgram()!, fileName));
 			});
-			session.addProtocolHandler('_vue:getReactiveReferences', request => {
-				const [fileName, position]: Parameters<Requests['getReactiveReferences']> = request.arguments;
-				const { language } = getLanguageService(fileName);
-				const sourceScript = language.scripts.get(fileName)!;
-				return createResponse(
-					getReactiveReferences(
-						ts,
-						language,
-						sourceScript,
-						position,
-						sourceScript.generated ? sourceScript.snapshot.getLength() : 0,
-					),
-				);
-			});
 
 			projectService.logger.info('Vue specific commands are successfully added.');
 
@@ -229,8 +214,7 @@ export = createLanguageServicePlugin(
 			}
 
 			function getLanguageService(fileName: string) {
-				// @ts-expect-error
-				const { project } = session.getFileAndProject({
+				const { project } = session['getFileAndProject']({
 					file: fileName,
 					projectFileName: undefined,
 				}) as {
diff --git a/packages/typescript-plugin/lib/requests/index.ts b/packages/typescript-plugin/lib/requests/index.ts
@@ -40,10 +40,6 @@ export interface Requests {
 	getElementNames(
 		fileName: string,
 	): Response<ReturnType<typeof import('./getElementNames.js')['getElementNames']>>;
-	getReactiveReferences(
-		fileName: string,
-		position: number,
-	): Response<ReturnType<typeof import('./getReactiveReferences.js')['getReactiveReferences']>>;
 	getDocumentHighlights(
 		fileName: string,
 		position: number,
diff --git a/packages/typescript-plugin/package.json b/packages/typescript-plugin/package.json
@@ -16,7 +16,6 @@
 		"@volar/typescript": "2.4.23",
 		"@vue/language-core": "3.0.8",
 		"@vue/shared": "^3.5.0",
-		"laplacenoma": "^0.0.3",
 		"path-browserify": "^1.0.1"
 	},
 	"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@`
`5`	`5`	`"module": "CommonJS",`
`6`	`6`	`"moduleResolution": "Node"`
`7`	`7`	`},`
`8`		`- "include": ["", "lib//"]`
	`8`	`+ "include": ["", "lib//", "reactivityAnalysis/*/"]`
`9`	`9`	`}`