feat(language-server): Dynamically download TypeScript from CDN on Web

packages/language-server/src/browser/index.ts

@@ -28,12 +28,25 @@ export function startLanguageServer(connection: vscode.Connection, ...plugins: L
 				return { dispose: () => clearTimeout(handle) };
 			},
 		},
-		loadTypescript() {
-			return require('typescript'); // force bundle because not support load by user config in web
+		async loadTypeScript(options) {
+			const tsdkUri = options.typescript?.tsdkUrl;
+			if (!tsdkUri) {
+				return;
+			}
+			const _module = globalThis.module;
+			globalThis.module = { exports: {} } as typeof _module;
+			await import(`${tsdkUri}/lib/typescript.js`);
+			const ts = globalThis.module.exports;
+			globalThis.module = _module;
+			return ts as typeof import('typescript/lib/tsserverlibrary');
 		},
-		async loadTypescriptLocalized(tsdk, locale) {
+		async loadTypeScriptLocalized(options, locale) {
+			const tsdkUri = options.typescript?.tsdkUrl;
+			if (!tsdkUri) {
+				return;
+			}
 			try {
-				const uri = fileNameToUri(`${tsdk}/${locale}/diagnosticMessages.generated.json`);
+				const uri = fileNameToUri(`${tsdkUri}/${locale}/diagnosticMessages.generated.json`);
 				const json = await httpSchemaRequestHandler(uri);
 				if (json) {
 					return JSON.parse(json);

packages/language-server/src/common/server.ts

@@ -31,6 +31,9 @@ export function startCommonLanguageServer(connection: vscode.Connection, _plugin
 	let plugins: ReturnType<LanguageServerPlugin>[];
 	let documents: ReturnType<typeof createDocuments>;
 	let context: ServerContext;
+	let ts: typeof import('typescript/lib/tsserverlibrary') | undefined;
+	let tsLocalized: {} | undefined;
+	let cancelTokenHost: ReturnType<typeof createCancellationTokenHost>;
 
 	const didChangeWatchedFilesCallbacks = new Set<vscode.NotificationHandler<vscode.DidChangeWatchedFilesParams>>();
 
@@ -59,9 +62,12 @@ export function startCommonLanguageServer(connection: vscode.Connection, _plugin
 				},
 			},
 		};
-		plugins = context.server.plugins.map(plugin => plugin(options, {
-			typescript: options.typescript ? context.server.runtimeEnv.loadTypescript(options.typescript.tsdk) : undefined
-		}));
+		ts = await context.server.runtimeEnv.loadTypeScript(options);
+		tsLocalized = initParams.locale
+			? await context.server.runtimeEnv.loadTypeScriptLocalized(options, initParams.locale)
+			: undefined;
+		cancelTokenHost = createCancellationTokenHost(options.cancellationPipeName);
+		plugins = context.server.plugins.map(plugin => plugin(options, { typescript: ts }));
 		documents = createDocuments(context.server.runtimeEnv, connection);
 
 		if (options.l10n) {
@@ -232,10 +238,6 @@ export function startCommonLanguageServer(connection: vscode.Connection, _plugin
 
 	async function createLanguageServiceHost() {
 
-		const ts = options.typescript ? context.server.runtimeEnv.loadTypescript(options.typescript.tsdk) : undefined;
-		const tsLocalized = options.typescript && initParams.locale ? await context.server.runtimeEnv.loadTypescriptLocalized(options.typescript.tsdk, initParams.locale) : undefined;
-		const cancelTokenHost = createCancellationTokenHost(options.cancellationPipeName);
-
 		workspaces = createWorkspaces({
 			...context,
 			workspaces: {

packages/language-server/src/node/index.ts

@@ -92,7 +92,11 @@ export function startLanguageServer(connection: vscode.Connection, ...plugins: L
 				return { dispose: () => clearImmediate(handle) };
 			},
 		},
-		loadTypescript(tsdk) {
+		loadTypeScript(options) {
+			const tsdk = options.typescript?.tsdk;
+			if (!tsdk) {
+				return;
+			}
 			for (const name of ['./typescript.js', './tsserverlibrary.js']) {
 				try {
 					return require(require.resolve(name, { paths: [tsdk] }));
@@ -108,7 +112,11 @@ export function startLanguageServer(connection: vscode.Connection, ...plugins: L
 
 			throw new Error(`Can't find typescript.js or tsserverlibrary.js in ${tsdk}`);
 		},
-		async loadTypescriptLocalized(tsdk, locale) {
+		async loadTypeScriptLocalized(options, locale) {
+			const tsdk = options.typescript?.tsdk;
+			if (!tsdk) {
+				return;
+			}
 			try {
 				const path = require.resolve(`./${locale}/diagnosticMessages.generated.json`, { paths: [tsdk] });
 				return require(path);

packages/language-server/src/types.ts

@@ -14,8 +14,8 @@ export interface Timer {
 export interface RuntimeEnvironment {
 	uriToFileName(uri: string): string;
 	fileNameToUri(fileName: string): string;
-	loadTypescript(tsdk: string): typeof import('typescript/lib/tsserverlibrary');
-	loadTypescriptLocalized(tsdk: string, locale: string): Promise<{} | undefined>;
+	loadTypeScript(options: InitializationOptions): Promise<typeof import('typescript/lib/tsserverlibrary') | undefined>;
+	loadTypeScriptLocalized(options: InitializationOptions, locale: string): Promise<{} | undefined>;
 	fs: FileSystem;
 	// https://github.com/microsoft/vscode/blob/7927075f89db213bc6e2182fa684d514d69e2359/extensions/html-language-features/server/src/htmlServer.ts#L53-L56
 	timer: Timer;
@@ -53,9 +53,16 @@ export enum DiagnosticModel {
 export interface InitializationOptions {
 	typescript?: {
 		/**
-		 * Absolute path to node_modules/typescript/lib
+		 * Absolute path to node_modules/typescript/lib, available for node
 		 */
 		tsdk: string;
+		/**
+		 * URI to node_modules/typescript/lib, available for web
+		 * @example "https://cdn.jsdelivr.net/npm/typescript"
+		 * @example "https://cdn.jsdelivr.net/npm/typescript@latest"
+		 * @example "https://cdn.jsdelivr.net/npm/typescript@5.0.0"
+		 */
+		tsdkUrl: string;
 	};
 	l10n?: {
 		location: string; // uri