Cross-file Typescript support in vscode-web

extensions/typescript-language-features/package.json

@@ -38,6 +38,11 @@
     "jsonc-parser": "^3.2.0",
     "semver": "5.5.1",
     "vscode-tas-client": "^0.1.63",
+    "vscode-uri": "^3.0.3",
+    "@vscode/sync-api-client": "^0.7.2",
+    "@vscode/sync-api-common": "^0.7.2",
+    "@vscode/sync-api-service": "^0.7.3",
+    "typescript": "latest",
     "vscode-uri": "^3.0.3"
   },
   "devDependencies": {

extensions/typescript-language-features/src/tsServer/server.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as vscode from 'vscode';
+import { Cancellation } from '@vscode/sync-api-common/lib/common/messageCancellation';
 import type * as Proto from '../protocol';
 import { EventName } from '../protocol.const';
 import { CallbackMap } from '../tsServer/callbackMap';
@@ -64,6 +65,7 @@ export interface TsServerProcessFactory {
 		kind: TsServerProcessKind,
 		configuration: TypeScriptServiceConfiguration,
 		versionManager: TypeScriptVersionManager,
+		extensionUri: vscode.Uri,
 	): TsServerProcess;
 }
 
@@ -167,6 +169,7 @@ export class ProcessBasedTsServer extends Disposable implements ITypeScriptServe
 					throw new Error(`Unknown message type ${message.type} received`);
 			}
 		} finally {
+			// TODO: Also need to make requests cancellable that came in while handling responses, but I don't have a token
 			this.sendNextRequests();
 		}
 	}
@@ -220,6 +223,7 @@ export class ProcessBasedTsServer extends Disposable implements ITypeScriptServe
 			result = new Promise<ServerResponse.Response<Proto.Response>>((resolve, reject) => {
 				this._callbacks.add(request.seq, { onSuccess: resolve as () => ServerResponse.Response<Proto.Response> | undefined, onError: reject, queuingStartTime: Date.now(), isAsync: executeInfo.isAsync }, executeInfo.isAsync);
 
+				// TODO: Need to decide whether to old-cancel or new-cancel (although for prototype purposes, doing both might not crash)
 				if (executeInfo.token) {
 					executeInfo.token.onCancellationRequested(() => {
 						this.tryCancelRequest(request.seq, command);
@@ -246,16 +250,19 @@ export class ProcessBasedTsServer extends Disposable implements ITypeScriptServe
 		}
 
 		this._requestQueue.enqueue(requestInfo);
-		this.sendNextRequests();
+		this.sendNextRequests(executeInfo.expectsResult && executeInfo.token);
 
 		return [result];
 	}
 
-	private sendNextRequests(): void {
+	private sendNextRequests(cancelToken?: vscode.CancellationToken | false): void {
 		while (this._pendingResponses.size === 0 && this._requestQueue.length > 0) {
 			const item = this._requestQueue.dequeue();
 			if (item) {
 				this.sendRequest(item);
+				if (cancelToken) {
+					cancelToken.onCancellationRequested(Cancellation.addData(item.request));
+				}
 			}
 		}
 	}

extensions/typescript-language-features/src/tsServer/serverProcess.browser.ts

@@ -2,18 +2,16 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-
+/// <reference lib='dom' />
 import * as vscode from 'vscode';
 import type * as Proto from '../protocol';
 import { TypeScriptServiceConfiguration } from '../utils/configuration';
 import { memoize } from '../utils/memoize';
 import { TsServerProcess, TsServerProcessKind } from './server';
 import { TypeScriptVersion } from './versionProvider';
-
-
-
-declare const Worker: any;
-declare type Worker = any;
+import { ServiceConnection } from '@vscode/sync-api-common/browser';
+import { Requests, ApiService } from '@vscode/sync-api-service';
+import { TypeScriptVersionManager } from './versionManager';
 
 export class WorkerServerProcess implements TsServerProcess {
 
@@ -22,10 +20,12 @@ export class WorkerServerProcess implements TsServerProcess {
 		args: readonly string[],
 		_kind: TsServerProcessKind,
 		_configuration: TypeScriptServiceConfiguration,
+		_versionManager: TypeScriptVersionManager,
+		extensionUri: vscode.Uri,
 	) {
 		const tsServerPath = version.tsServerPath;
 		const worker = new Worker(tsServerPath);
-		return new WorkerServerProcess(worker, [
+		return new WorkerServerProcess(worker, extensionUri, [
 			...args,
 
 			// Explicitly give TS Server its path so it can
@@ -37,27 +37,72 @@ export class WorkerServerProcess implements TsServerProcess {
 	private readonly _onDataHandlers = new Set<(data: Proto.Response) => void>();
 	private readonly _onErrorHandlers = new Set<(err: Error) => void>();
 	private readonly _onExitHandlers = new Set<(code: number | null, signal: string | null) => void>();
+	/** For communicating with TS server synchronously */
+	private readonly tsserver: MessagePort;
+	/** For communicating watches asynchronously */
+	private readonly watcher: MessagePort;
+	/** For communicating with filesystem synchronously */
+	private readonly syncFs: MessagePort;
 
 	public constructor(
-		private readonly worker: Worker,
+		/** For logging and initial setup */
+		private readonly mainChannel: Worker,
+		extensionUri: vscode.Uri,
 		args: readonly string[],
 	) {
-		worker.addEventListener('message', (msg: any) => {
-			if (msg.data.type === 'log') {
-				this.output.append(msg.data.body);
+		const tsserverChannel = new MessageChannel();
+		const watcherChannel = new MessageChannel();
+		const syncChannel = new MessageChannel();
+		this.tsserver = tsserverChannel.port2;
+		this.watcher = watcherChannel.port2;
+		this.syncFs = syncChannel.port1;
+		this.tsserver.onmessage = (event) => {
+			if (event.data.type === 'log') {
+				console.error(`unexpected log message on tsserver channel: ${JSON.stringify(event)}`);
 				return;
 			}
-
 			for (const handler of this._onDataHandlers) {
-				handler(msg.data);
+				handler(event.data);
 			}
-		});
-		worker.onerror = (err: Error) => {
+		};
+		this.watcher.onmessage = (event) => {
+			console.error(`unexpected message on watcher channel: ${JSON.stringify(event)}`);
+		};
+		mainChannel.onmessage = (msg: any) => {
+			// for logging only
+			if (msg.data.type === 'log') {
+				this.output.append(msg.data.body);
+				return;
+			}
+			console.error(`unexpected message on main channel: ${JSON.stringify(msg)}`);
+			// TODO: A multi-watcher message would look something like this:
+			// if (msg.data.type === 'dispose-watcher') {
+			//	 watchers.get(msg.data.path).dispose()
+			// }
+		};
+		mainChannel.onerror = (err: ErrorEvent) => {
+			this.output.append(JSON.stringify('error! ' + JSON.stringify(err)) + '\n');
 			for (const handler of this._onErrorHandlers) {
-				handler(err);
+				// TODO: The ErrorEvent type might be wrong; previously this was typed as Error and didn't have the property access.
+				handler(err.error);
 			}
 		};
-		worker.postMessage(args);
+		// TODO: For prototyping, create one watcher ahead of time and send messages using the worker.
+		// For the real thing, it makes more sense to create a third MessageChannel and listen on it; the host
+		// can then send messages to tell the extension to create a new filesystemwatcher for each file/directory
+		const fsWatcher = vscode.workspace.createFileSystemWatcher('**/*');
+		fsWatcher.onDidChange(e => this.watcher.postMessage({ type: 'watch', event: 'change', path: e.path }));
+		fsWatcher.onDidCreate(e => this.watcher.postMessage({ type: 'watch', event: 'create', path: e.path }));
+		fsWatcher.onDidDelete(e => this.watcher.postMessage({ type: 'watch', event: 'delete', path: e.path }));
+		this.output.append('creating new MessageChannel and posting its port2 + args: ' + args.join(' '));
+		mainChannel.postMessage(
+			{ args, extensionUri: { scheme: extensionUri.scheme, authority: extensionUri.authority, path: extensionUri.path } },
+			[syncChannel.port2, tsserverChannel.port1, watcherChannel.port1]
+		);
+		const connection = new ServiceConnection<Requests>(syncChannel.port1);
+		new ApiService('vscode-wasm-typescript', connection);
+		connection.signalReady();
+		this.output.append('done constructing WorkerServerProcess\n');
 	}
 
 	@memoize
@@ -66,7 +111,7 @@ export class WorkerServerProcess implements TsServerProcess {
 	}
 
 	write(serverRequest: Proto.Request): void {
-		this.worker.postMessage(serverRequest);
+		this.tsserver.postMessage(serverRequest);
 	}
 
 	onData(handler: (response: Proto.Response) => void): void {
@@ -83,6 +128,10 @@ export class WorkerServerProcess implements TsServerProcess {
 	}
 
 	kill(): void {
-		this.worker.terminate();
+		this.mainChannel.terminate();
+		this.tsserver.close();
+		this.watcher.close();
+		this.syncFs.close();
 	}
 }
+

extensions/typescript-language-features/src/tsServer/spawner.ts

@@ -44,6 +44,7 @@ export class TypeScriptServerSpawner {
 		private readonly _telemetryReporter: TelemetryReporter,
 		private readonly _tracer: Tracer,
 		private readonly _factory: TsServerProcessFactory,
+		private readonly _extensionUri: vscode.Uri,
 	) { }
 
 	public spawn(
@@ -152,7 +153,7 @@ export class TypeScriptServerSpawner {
 		}
 
 		this._logger.info(`<${kind}> Forking...`);
-		const process = this._factory.fork(version, args, kind, configuration, this._versionManager);
+		const process = this._factory.fork(version, args, kind, configuration, this._versionManager, this._extensionUri);
 		this._logger.info(`<${kind}> Starting...`);
 
 		return new ProcessBasedTsServer(

extensions/typescript-language-features/src/typescriptServiceClient.ts

@@ -214,7 +214,7 @@ export default class TypeScriptServiceClient extends Disposable implements IType
 			return this.apiVersion.fullVersionString;
 		});
 
-		this.typescriptServerSpawner = new TypeScriptServerSpawner(this.versionProvider, this._versionManager, this.logDirectoryProvider, this.pluginPathsProvider, this.logger, this.telemetryReporter, this.tracer, this.processFactory);
+		this.typescriptServerSpawner = new TypeScriptServerSpawner(this.versionProvider, this._versionManager, this.logDirectoryProvider, this.pluginPathsProvider, this.logger, this.telemetryReporter, this.tracer, this.processFactory, context.extensionUri);
 
 		this._register(this.pluginManager.onDidUpdateConfig(update => {
 			this.configurePlugin(update.pluginId, update.config);
@@ -235,7 +235,8 @@ export default class TypeScriptServiceClient extends Disposable implements IType
 		if (isWeb()) {
 			return new ClientCapabilities(
 				ClientCapability.Syntax,
-				ClientCapability.EnhancedSyntax);
+				ClientCapability.EnhancedSyntax,
+				ClientCapability.Semantic);
 		}
 
 		if (this.apiVersion.gte(API.v400)) {
@@ -678,7 +679,7 @@ export default class TypeScriptServiceClient extends Disposable implements IType
 				}
 			default:
 				{
-					return this.inMemoryResourcePrefix
+					return (isWeb() ? '' : this.inMemoryResourcePrefix)
 						+ '/' + resource.scheme
 						+ '/' + (resource.authority || this.emptyAuthority)
 						+ (resource.path.startsWith('/') ? resource.path : '/' + resource.path)
@@ -722,9 +723,16 @@ export default class TypeScriptServiceClient extends Disposable implements IType
 	public toResource(filepath: string): vscode.Uri {
 		if (isWeb()) {
 			// On web, the stdlib paths that TS return look like: '/lib.es2015.collection.d.ts'
+			// TODO: Find out what extensionUri is when testing (should be http://localhost:8080/static/sources/extensions/typescript-language-features/)
+			// TODO:  make sure that this code path is getting hit
 			if (filepath.startsWith('/lib.') && filepath.endsWith('.d.ts')) {
 				return vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'browser', 'typescript', filepath.slice(1));
 			}
+			const parts = filepath.match(/^\/([^\/]+)\/([^\/]*)\/(.+)$/);
+			if (parts) {
+				const resource = vscode.Uri.parse(parts[1] + '://' + (parts[2] === this.emptyAuthority ? '' : parts[2]) + '/' + parts[3]);
+				return this.bufferSyncSupport.toVsCodeResource(resource);
+			}
 		}
 
 		if (filepath.startsWith(this.inMemoryResourcePrefix)) {

extensions/typescript-language-features/src/utils/fileSchemes.ts

@@ -13,12 +13,14 @@ export const vscodeNotebookCell = 'vscode-notebook-cell';
 export const memFs = 'memfs';
 export const vscodeVfs = 'vscode-vfs';
 export const officeScript = 'office-script';
+export const vscodeWeb = 'vscode-test-web'; // TODO: Should probably reuse vscodeVfs eventually, since vscode-test-web is the local test web server
 
 export const semanticSupportedSchemes = [
 	file,
 	untitled,
 	walkThroughSnippet,
 	vscodeNotebookCell,
+	vscodeWeb,
 ];
 
 /**

extensions/typescript-language-features/src/utils/platform.ts

@@ -6,6 +6,5 @@
 import * as vscode from 'vscode';
 
 export function isWeb(): boolean {
-	// @ts-expect-error
 	return typeof navigator !== 'undefined' && vscode.env.uiKind === vscode.UIKind.Web;
 }