feat: add browser dev env

#612

.gitignore

@@ -2,3 +2,4 @@ out
 node_modules
 *.tsbuildinfo
 *.vsix
+.vscode-test-web

extensions/vscode-vue-language-features/.vscodeignore

@@ -90,6 +90,7 @@ node_modules/**/*.js
 !node_modules/@volar/client/out/features/*.js
 !node_modules/@volar/code-gen/out/*.js
 !node_modules/@volar/html2pug/out/*.js
+!node_modules/@volar/server/*.js
 !node_modules/@volar/server/out/*.js
 !node_modules/@volar/server/out/features/*.js
 !node_modules/@volar/server/out/registers/*.js

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

@@ -31,7 +31,8 @@
 		"onLanguage:typescriptreact",
 		"onWebviewPanel:preview"
 	],
-	"main": "node_modules/@volar/client/out/extension.js",
+	"main": "node_modules/@volar/client/out/nodeClientMain",
+	"browser": "node_modules/@volar/client/out/browserClientMain",
 	"capabilities": {
 		"untrustedWorkspaces": {
 			"supported": "limited",

package.json

@@ -11,10 +11,12 @@
 		"release:vue-language-features": "cd extensions/vscode-vue-language-features && npm run release",
 		"release:typescript-vue-plugin": "cd extensions/vscode-typescript-vue-plugin && npm run release",
 		"pretest": "cd packages/vscode-vue-languageservice/testCases && yarn",
-		"test": "jest"
+		"test": "jest",
+		"chrome": "npm run build && vscode-test-web --browserType=chromium --extensionDevelopmentPath=./extensions/vscode-vue-language-features ../volar-starter"
 	},
 	"devDependencies": {
 		"@types/jest": "latest",
+		"@vscode/test-web": "latest",
 		"jest": "latest",
 		"lerna": "latest",
 		"ts-jest": "latest",

packages/client/src/browserClientMain.ts

@@ -0,0 +1,38 @@
+// import * as vscode from 'vscode';
+// import * as lsp from 'vscode-languageclient/browser';
+// import { activate as commonActivate, deactivate as commonDeactivate } from './common';
+
+// export function activate(context: vscode.ExtensionContext) {
+// 	return commonActivate(context, (
+// 		id,
+// 		name,
+// 		documentSelector,
+// 		initOptions,
+// 	) => {
+
+// 		const serverMain = vscode.Uri.joinPath(context.extensionUri, 'node_modules', '@volar', 'server', 'browser');
+// 		const worker = new Worker(serverMain.toString());
+// 		const clientOptions: lsp.LanguageClientOptions = {
+// 			documentSelector,
+// 			initializationOptions: initOptions,
+// 			synchronize: {
+// 				fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.vue,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}')
+// 			}
+// 		};
+// 		const client = new lsp.LanguageClient(
+// 			id,
+// 			name,
+// 			clientOptions,
+// 			worker,
+// 		);
+// 		context.subscriptions.push(client.start());
+
+// 		return client;
+// 	});
+// }
+
+// export function deactivate(): Thenable<any> | undefined {
+// 	return commonDeactivate();
+// }
+
+console.log('Language features is not support yet.')

packages/client/src/extension.ts → packages/client/src/common.ts

@@ -1,7 +1,6 @@
 import * as shared from '@volar/shared';
-import * as path from 'upath';
 import * as vscode from 'vscode';
-import * as lsp from 'vscode-languageclient/node';
+import * as lsp from 'vscode-languageclient';
 import * as activeSelection from './features/activeSelection';
 import * as attrNameCase from './features/attrNameCase';
 import * as callGraph from './features/callGraph';
@@ -20,12 +19,19 @@ import * as virtualFiles from './features/virtualFiles';
 import * as whitelist from './features/whitelist';
 import * as tsconfig from './features/tsconfig';
 
-let apiClient: lsp.LanguageClient;
-let docClient: lsp.LanguageClient | undefined;
-let htmlClient: lsp.LanguageClient;
-let lowPowerMode = false;
+let apiClient: lsp.CommonLanguageClient;
+let docClient: lsp.CommonLanguageClient | undefined;
+let htmlClient: lsp.CommonLanguageClient;
 
-export async function activate(context: vscode.ExtensionContext) {
+type CreateLanguageClient = (
+	id: string,
+	name: string,
+	documentSelector: lsp.DocumentSelector,
+	initOptions: shared.ServerInitializationOptions,
+	port: number,
+) => lsp.CommonLanguageClient;
+
+export async function activate(context: vscode.ExtensionContext, createLc: CreateLanguageClient) {
 
 	const stopCheck = vscode.window.onDidChangeActiveTextEditor(tryActivate);
 	tryActivate();
@@ -34,28 +40,28 @@ export async function activate(context: vscode.ExtensionContext) {
 
 		if (!vscode.window.activeTextEditor) {
 			// onWebviewPanel:preview
-			doActivate(context);
+			doActivate(context, createLc);
 			stopCheck.dispose();
 			return;
 		}
 
 		const currentlangId = vscode.window.activeTextEditor.document.languageId;
 		if (currentlangId === 'vue') {
-			doActivate(context);
+			doActivate(context, createLc);
 			stopCheck.dispose();
 		}
 
 		const takeOverMode = takeOverModeEnabled();
 		if (takeOverMode && ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'].includes(currentlangId)) {
-			doActivate(context);
+			doActivate(context, createLc);
 			stopCheck.dispose();
 		}
 	}
 }
 
-async function doActivate(context: vscode.ExtensionContext) {
+async function doActivate(context: vscode.ExtensionContext, createLc: CreateLanguageClient) {
 
-	lowPowerMode = lowPowerModeEnabled();
+	const lowPowerMode = lowPowerModeEnabled();
 	if (lowPowerMode) {
 		vscode.window
 			.showInformationMessage('Low Power Mode Enabled.', 'Disable')
@@ -99,32 +105,26 @@ async function doActivate(context: vscode.ExtensionContext) {
 			{ language: 'vue' },
 		];
 
-	apiClient = createLanguageService(
-		context,
-		'api',
+	apiClient = createLc(
 		'volar-api',
 		'Volar - API',
-		6009,
 		languageFeaturesDocumentSelector,
-		undefined,
+		getInitializationOptions(context, 'api', undefined, lowPowerMode),
+		6009,
 	);
-	docClient = !lowPowerMode ? createLanguageService(
-		context,
-		'doc',
+	docClient = !lowPowerMode ? createLc(
 		'volar-document',
 		'Volar - Document',
-		6010,
 		languageFeaturesDocumentSelector,
-		undefined,
+		getInitializationOptions(context, 'doc', undefined, lowPowerMode),
+		6010,
 	) : undefined;
-	htmlClient = createLanguageService(
-		context,
-		'html',
+	htmlClient = createLc(
 		'volar-html',
 		'Volar - HTML',
-		6011,
 		documentFeaturesDocumentSelector,
-		undefined,
+		getInitializationOptions(context, 'html', undefined, lowPowerMode),
+		6011,
 	);
 
 	const clients = [apiClient, docClient, htmlClient].filter(shared.notEmpty);
@@ -206,26 +206,12 @@ function lowPowerModeEnabled() {
 	return !!vscode.workspace.getConfiguration('volar').get<boolean>('lowPowerMode');
 }
 
-function createLanguageService(
+function getInitializationOptions(
 	context: vscode.ExtensionContext,
 	mode: 'api' | 'doc' | 'html',
-	id: string,
-	name: string,
-	port: number,
-	documentSelector: lsp.DocumentSelector,
 	initMessage: string | undefined,
+	lowPowerMode: boolean,
 ) {
-
-	const serverModule = context.asAbsolutePath(path.join('node_modules', '@volar', 'server', 'out', 'index.js'));
-	const debugOptions = { execArgv: ['--nolazy', '--inspect=' + port] };
-	const serverOptions: lsp.ServerOptions = {
-		run: { module: serverModule, transport: lsp.TransportKind.ipc },
-		debug: {
-			module: serverModule,
-			transport: lsp.TransportKind.ipc,
-			options: debugOptions
-		},
-	};
 	const initializationOptions: shared.ServerInitializationOptions = {
 		typescript: tsVersion.getCurrentTsPaths(context),
 		languageFeatures: (mode === 'api' || mode === 'doc') ? {
@@ -270,20 +256,5 @@ function createLanguageService(
 		} : undefined,
 		initializationMessage: initMessage,
 	};
-	const clientOptions: lsp.LanguageClientOptions = {
-		documentSelector,
-		initializationOptions,
-		synchronize: {
-			fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.vue,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}')
-		}
-	};
-	const client = new lsp.LanguageClient(
-		id,
-		name,
-		serverOptions,
-		clientOptions,
-	);
-	context.subscriptions.push(client.start());
-
-	return client;
+	return initializationOptions;
 }

packages/client/src/features/activeSelection.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(languageClient.onRequest(shared.GetEditorSelectionRequest.type, () => {
 		const editor = vscode.window.activeTextEditor;

packages/client/src/features/attrNameCase.ts

@@ -1,9 +1,9 @@
 import * as vscode from 'vscode';
 import { userPick } from './splitEditors';
-import { LanguageClient, State } from 'vscode-languageclient/node';
+import { CommonLanguageClient, State } from 'vscode-languageclient';
 import * as shared from '@volar/shared';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 
 	await languageClient.onReady();
 	await languageClient.sendRequest(shared.InitDoneRequest.type);

packages/client/src/features/callGraph.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(vscode.commands.registerCommand('volar.action.showCallGraph', async () => {
 		const document = vscode.window.activeTextEditor?.document;

packages/client/src/features/documentContent.ts

@@ -1,12 +1,12 @@
 import * as vscode from 'vscode';
 import { ResponseError } from 'vscode-languageclient';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 import * as nls from 'vscode-nls';
 
 const localize = nls.loadMessageBundle();
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 
 	await languageClient.onReady();
 	const schemaDocuments: { [uri: string]: boolean } = {};

packages/client/src/features/documentPrintWidth.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(languageClient.onRequest(shared.GetDocumentPrintWidthRequest.type, handler => {
 		const configs = vscode.workspace.getConfiguration('volar');

packages/client/src/features/documentVersion.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(languageClient.onRequest(shared.GetDocumentVersionRequest.type, handler => {
 		const doc = vscode.workspace.textDocuments.find(doc => doc.uri.toString() === handler.uri);

packages/client/src/features/showReferences.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(languageClient.onNotification(shared.ShowReferencesNotification.type, handler => {
 		const uri = handler.textDocument.uri;

packages/client/src/features/tagClosing.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, htmlClient: LanguageClient, tsClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, htmlClient: CommonLanguageClient, tsClient: CommonLanguageClient) {
 	await htmlClient.onReady();
 	context.subscriptions.push(activateTagClosing(
 		(document, position) => {

packages/client/src/features/tagNameCase.ts

@@ -1,9 +1,9 @@
 import * as vscode from 'vscode';
 import { userPick } from './splitEditors';
-import { LanguageClient, State } from 'vscode-languageclient/node';
+import { CommonLanguageClient, State } from 'vscode-languageclient';
 import * as shared from '@volar/shared';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 
 	await languageClient.onReady();
 	await languageClient.sendRequest(shared.InitDoneRequest.type);

packages/client/src/features/tsVersion.ts

@@ -1,11 +1,11 @@
 import * as vscode from 'vscode';
-import { LanguageClient } from 'vscode-languageclient/node';
+import { CommonLanguageClient } from 'vscode-languageclient';
 import * as shared from '@volar/shared';
 import { userPick } from './splitEditors';
 
 const defaultTsdk = 'node_modules/typescript/lib';
 
-export async function activate(context: vscode.ExtensionContext, clients: LanguageClient[]) {
+export async function activate(context: vscode.ExtensionContext, clients: CommonLanguageClient[]) {
 
 	const statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
 	statusBar.command = 'volar.selectTypeScriptVersion';

packages/client/src/features/tsconfig.ts

@@ -1,9 +1,9 @@
 import * as vscode from 'vscode';
-import { LanguageClient } from 'vscode-languageclient/node';
+import { CommonLanguageClient } from 'vscode-languageclient';
 import * as shared from '@volar/shared';
 import * as path from 'upath';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 
 	await languageClient.onReady();
 	await languageClient.sendRequest(shared.InitDoneRequest.type);

packages/client/src/features/verifyAll.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(vscode.commands.registerCommand('volar.action.verifyAllScripts', () => {
 		languageClient.sendNotification(shared.VerifyAllScriptsNotification.type);

packages/client/src/features/virtualFiles.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as shared from '@volar/shared';
-import type { LanguageClient } from 'vscode-languageclient/node';
+import type { CommonLanguageClient } from 'vscode-languageclient';
 
-export async function activate(context: vscode.ExtensionContext, languageClient: LanguageClient) {
+export async function activate(context: vscode.ExtensionContext, languageClient: CommonLanguageClient) {
 	await languageClient.onReady();
 	context.subscriptions.push(vscode.commands.registerCommand('volar.action.writeTemplateLsVirtualFiles', () => {
 		languageClient.sendNotification(shared.WriteVirtualFilesNotification.type, { lsType: 'template' });