refactor: create @volar/vscode-language-client package (#2181)

* refactor: separate out `@volar/vscode-language-client`

* fix: ts version cannot show on web

examples/vscode-svelte/package.json

@@ -44,6 +44,7 @@
 	},
 	"dependencies": {
 		"@volar-examples/svelte-language-server": "1.0.11",
+		"@volar/vscode-language-client": "1.0.11",
 		"typesafe-path": "^0.2.2",
 		"vscode-languageclient": "^8.0.2"
 	}

examples/vscode-svelte/src/client.ts

@@ -2,7 +2,7 @@ import { LanguageServerInitializationOptions } from '@volar/language-server';
 import * as path from 'typesafe-path';
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient/node';
-import * as virtualFiles from '../../../extensions/vscode-vue-language-features/out/features/virtualFiles';
+import { registerShowVirtualFiles } from '@volar/vscode-language-client';
 
 let client: lsp.BaseLanguageClient;
 
@@ -61,7 +61,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	);
 	await client.start();
 
-	virtualFiles.register(context, client);
+	registerShowVirtualFiles('volar.action.showVirtualFiles', context, client)
 }
 
 export function deactivate(): Thenable<any> | undefined {

examples/vscode-svelte/tsconfig.build.json

@@ -14,6 +14,9 @@
 		".vscode-test"
 	],
 	"references": [
+		{
+			"path": "../../packages/vscode-language-client/tsconfig.build.json"
+		},
 		{
 			"path": "../svelte-language-server/tsconfig.build.json"
 		}

extensions/vscode-vue-language-features/package.json

@@ -785,6 +785,7 @@
 		"@volar/preview": "1.0.11",
 		"@volar/shared": "1.0.11",
 		"@volar/source-map": "1.0.11",
+		"@volar/vscode-language-client": "1.0.11",
 		"@volar/vue-language-core": "1.0.11",
 		"@volar/vue-language-server": "1.0.11",
 		"esbuild": "latest",

extensions/vscode-vue-language-features/scripts/build-browser.js

@@ -24,14 +24,6 @@ require('esbuild').build({
 					const path = require.resolve('../node_modules/path-browserify', { paths: [__dirname] })
 					return { path: path }
 				})
-				build.onResolve({ filter: /\/tsVersion$/ }, args => {
-					const path = require.resolve(args.path.replace('/tsVersion', '/empty'), { paths: [args.resolveDir] })
-					return { path: path }
-				})
-				build.onResolve({ filter: /\/preview$/ }, args => {
-					const path = require.resolve(args.path.replace('/preview', '/empty'), { paths: [args.resolveDir] })
-					return { path: path }
-				})
 			},
 		},
 		require('esbuild-plugin-copy').copy({

extensions/vscode-vue-language-features/src/common.ts

@@ -1,21 +1,24 @@
+import {
+	registerAutoInsertion,
+	registerShowVirtualFiles,
+	registerWriteVirtualFiles,
+	registerFileReferences,
+	registerReloadProjects,
+	registerServerStats,
+	registerVerifyAll,
+	registerTsConfig,
+	registerShowReferences,
+	registerServerSys,
+	registerTsVersion,
+	getTsdk,
+} from '@volar/vscode-language-client';
+import { DiagnosticModel, ServerMode, VueServerInitializationOptions } from '@volar/vue-language-server';
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient';
-import * as nameCasing from './features/nameCasing';
-import * as preview from './features/preview';
-import * as showReferences from './features/showReferences';
-import * as splitEditors from './features/splitEditors';
-import * as autoInsertion from './features/autoInsertion';
-import * as tsVersion from './features/tsVersion';
-import * as verifyAll from './features/verifyAll';
-import * as virtualFiles from './features/virtualFiles';
-import * as serverStatus from './features/serverStatus';
 import * as componentMeta from './features/componentMeta';
-import * as tsconfig from './features/tsconfig';
 import * as doctor from './features/doctor';
-import * as fileReferences from './features/fileReferences';
-import * as reloadProject from './features/reloadProject';
-import * as serverSys from './features/serverSys';
-import { DiagnosticModel, ServerMode, VueServerInitializationOptions } from '@volar/vue-language-server';
+import * as nameCasing from './features/nameCasing';
+import * as splitEditors from './features/splitEditors';
 
 enum LanguageFeaturesKind {
 	Semantic,
@@ -71,21 +74,15 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 			'vue-semantic-server',
 			'Vue Semantic Server',
 			getDocumentSelector(ServerMode.Semantic),
-			getInitializationOptions(
-				ServerMode.Semantic,
-				context,
-			),
+			getInitializationOptions(ServerMode.Semantic, context),
 			getFillInitializeParams([LanguageFeaturesKind.Semantic]),
 			6009,
 		),
 		createLc(
 			'vue-syntactic-server',
 			'Vue Syntactic Server',
 			getDocumentSelector(ServerMode.Syntactic),
-			getInitializationOptions(
-				ServerMode.Syntactic,
-				context,
-			),
+			getInitializationOptions(ServerMode.Syntactic, context),
 			getFillInitializeParams([LanguageFeaturesKind.Syntactic]),
 			6011,
 		),
@@ -97,19 +94,44 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	registerClientRequests();
 
 	splitEditors.register(context, syntacticClient);
-	preview.register(context, syntacticClient);
 	doctor.register(context, semanticClient);
-	tsVersion.register('volar.selectTypeScriptVersion', context, semanticClient);
-	reloadProject.register('volar.action.reloadProject', context, semanticClient);
+	componentMeta.register(context, semanticClient);
+
+	registerAutoInsertion(context, [syntacticClient, semanticClient]);
+	registerShowVirtualFiles('volar.action.showVirtualFiles', context, semanticClient);
+	registerWriteVirtualFiles('volar.action.writeVirtualFiles', context, semanticClient);
+	registerFileReferences('volar.vue.findAllFileReferences', context, semanticClient);
+	registerTsConfig('volar.openTsconfig', context, semanticClient,
+		document => {
+			return document.languageId === 'vue'
+				|| (processMd() && document.languageId === 'markdown')
+				|| (processHtml() && document.languageId === 'html')
+				|| (
+					takeOverModeEnabled()
+					&& ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'].includes(document.languageId)
+				);
+		},
+	);
+	registerReloadProjects('volar.action.reloadProject', context, [semanticClient]);
+	registerServerStats('volar.action.serverStats', context, [semanticClient]);
+	registerVerifyAll('volar.action.verifyAllScripts', context, [semanticClient]);
+	registerTsVersion('volar.selectTypeScriptVersion', context, semanticClient,
+		document => {
+			return document.languageId === 'vue'
+				|| (processMd() && document.languageId === 'markdown')
+				|| (processHtml() && document.languageId === 'html')
+				|| (
+					takeOverModeEnabled()
+					&& ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'].includes(document.languageId)
+				);
+		},
+		() => takeOverModeEnabled(),
+		() => noProjectReferences(),
+	);
 
-	if (semanticClient) {
-		tsconfig.register('volar.openTsconfig', context, semanticClient);
-		fileReferences.register('volar.vue.findAllFileReferences', semanticClient);
-		verifyAll.register(context, semanticClient);
-		autoInsertion.register(context, syntacticClient, semanticClient);
-		virtualFiles.register(context, semanticClient);
-		serverStatus.register(context, semanticClient);
-		componentMeta.register(context, semanticClient);
+	for (const client of clients) {
+		registerShowReferences(context, client);
+		registerServerSys(context, client);
 	}
 
 	async function requestReloadVscode() {
@@ -121,7 +143,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 		vscode.commands.executeCommand('workbench.action.reloadWindow');
 	}
 	function registerServerMaxOldSpaceSizeChange() {
-		vscode.workspace.onDidChangeConfiguration(async (e) => {
+		vscode.workspace.onDidChangeConfiguration((e) => {
 			if (
 				e.affectsConfiguration('volar.vueserver.maxOldSpaceSize')
 				|| e.affectsConfiguration('volar.vueserver.diagnosticModel')
@@ -132,7 +154,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 				|| e.affectsConfiguration('volar.vueserver.vitePress.processMdFile')
 				|| e.affectsConfiguration('volar.vueserver.additionalExtensions')
 			) {
-				return requestReloadVscode();
+				requestReloadVscode();
 			}
 		});
 	}
@@ -144,15 +166,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 		}));
 	}
 	function registerClientRequests() {
-
-		for (const client of clients) {
-			showReferences.activate(context, client);
-			serverSys.activate(context, client);
-		}
-
-		if (semanticClient) {
-			nameCasing.activate(context, semanticClient);
-		}
+		nameCasing.activate(context, semanticClient);
 	}
 }
 
@@ -274,6 +288,7 @@ function getInitializationOptions(
 ) {
 	const textDocumentSync = vscode.workspace.getConfiguration('volar').get<'incremental' | 'full' | 'none'>('vueserver.textDocumentSync');
 	const initializationOptions: VueServerInitializationOptions = {
+		// volar
 		respectClientCapabilities: true,
 		serverMode,
 		diagnosticModel: diagnosticModel() === 'pull' ? DiagnosticModel.Pull : DiagnosticModel.Push,
@@ -282,7 +297,11 @@ function getInitializationOptions(
 			full: lsp.TextDocumentSyncKind.Full,
 			none: lsp.TextDocumentSyncKind.None,
 		}[textDocumentSync] : lsp.TextDocumentSyncKind.Incremental,
-		typescript: typeof navigator === undefined? tsVersion.getCurrentTsdk(context): { tsdk: 'tsserver.web.js' },
+		typescript: { tsdk: getTsdk(context).tsdk },
+		noProjectReferences: noProjectReferences(),
+		reverseConfigFilePriority: reverseConfigFilePriority(),
+		disableFileWatcher: disableFileWatcher(),
+		// vue
 		petiteVue: {
 			processHtmlFile: processHtml(),
 		},
@@ -292,10 +311,7 @@ function getInitializationOptions(
 		json: {
 			customBlockSchemaUrls: vscode.workspace.getConfiguration('volar').get<Record<string, string>>('vueserver.json.customBlockSchemaUrls')
 		},
-		noProjectReferences: noProjectReferences(),
-		reverseConfigFilePriority: reverseConfigFilePriority(),
-		disableFileWatcher: disableFileWatcher(),
-		additionalExtensions: additionalExtensions()
+		additionalExtensions: additionalExtensions(),
 	};
 	return initializationOptions;
 }

extensions/vscode-vue-language-features/src/features/nameCasing.ts

@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import { quickPick } from './splitEditors';
+import { quickPick } from '@volar/vscode-language-client/out/common';
 import { BaseLanguageClient, State } from 'vscode-languageclient';
 import { AttrNameCasing, TagNameCasing, DetectNameCasingRequest, GetConvertAttrCasingEditsRequest, GetConvertTagCasingEditsRequest } from '@volar/vue-language-server';
 import { processHtml, processMd } from '../common';

extensions/vscode-vue-language-features/src/features/preview.ts

@@ -2,7 +2,7 @@ import * as vscode from 'vscode';
 import * as path from 'typesafe-path';
 import * as fs from '../utils/fs';
 import * as shared from '@volar/shared';
-import { quickPick } from './splitEditors';
+import { quickPick } from '@volar/vscode-language-client/out/common';
 import * as preview from '@volar/preview';
 import { getLocalHostAvailablePort } from '../utils/http';
 import { BaseLanguageClient } from 'vscode-languageclient';

extensions/vscode-vue-language-features/src/features/splitEditors.ts

@@ -105,44 +105,3 @@ export function register(context: vscode.ExtensionContext, client: BaseLanguageC
 		}
 	}
 }
-
-export function quickPick<T extends { [K: string]: vscode.QuickPickItem | undefined; }>(groups: T | T[], placeholder?: string) {
-	return new Promise<keyof T | undefined>(resolve => {
-		const quickPick = vscode.window.createQuickPick();
-		const items: vscode.QuickPickItem[] = [];
-		for (const group of Array.isArray(groups) ? groups : [groups]) {
-			const groupItems = Object.values(group);
-			if (groupItems.length) {
-				if (items.length) {
-					items.push({ label: '', kind: vscode.QuickPickItemKind.Separator });
-				}
-				for (const item of groupItems) {
-					if (item) {
-						items.push(item);
-					}
-				}
-			}
-		}
-		quickPick.items = items;
-		quickPick.placeholder = placeholder;
-		quickPick.onDidChangeSelection(selection => {
-			if (selection[0]) {
-				for (const options of Array.isArray(groups) ? groups : [groups]) {
-					for (let key in options) {
-						const option = options[key];
-						if (selection[0] === option) {
-							resolve(key);
-							quickPick.hide();
-							break;
-						}
-					}
-				}
-			}
-		});
-		quickPick.onDidHide(() => {
-			quickPick.dispose();
-			resolve(undefined);
-		});
-		quickPick.show();
-	});
-}