feat(language-service): support tsconfig path alias resolution for document links (#5562)

Author: KazariEX

packages/language-server/lib/server.ts

@@ -126,6 +126,9 @@ export function startServer(ts: typeof import('typescript')) {
 				isRefAtPosition(...args) {
 					return sendTsServerRequest('_vue:isRefAtPosition', args);
 				},
+				resolveModuleName(...args) {
+					return sendTsServerRequest('_vue:resolveModuleName', args);
+				},
 				getDocumentHighlights(fileName, position) {
 					return sendTsServerRequest(
 						'_vue:documentHighlights-full',

packages/language-service/index.ts

@@ -41,7 +41,6 @@ export function createVueLanguageServicePlugins(
 	}),
 ) {
 	return [
-		createCssPlugin(),
 		createJsonPlugin(),
 		createPugFormatPlugin(),
 		createVueAutoSpacePlugin(),
@@ -65,6 +64,7 @@ export function createVueLanguageServicePlugins(
 		createVueInlayHintsPlugin(ts),
 
 		// type aware plugins
+		createCssPlugin(client),
 		createTypescriptSemanticTokensPlugin(client),
 		createVueAutoDotValuePlugin(ts, client),
 		createVueComponentSemanticTokensPlugin(client),

packages/language-service/lib/plugins/css.ts

@@ -1,24 +1,33 @@
 import type { LanguageServicePlugin, TextDocument, VirtualCode } from '@volar/language-service';
 import { isRenameEnabled } from '@vue/language-core';
-import { create as baseCreate, type Provide } from 'volar-service-css';
+import { create as baseCreate, type Provide, resolveReference } from 'volar-service-css';
 import type * as css from 'vscode-css-languageservice';
-import { resolveEmbeddedCode } from '../utils';
+import { createReferenceResolver, resolveEmbeddedCode } from '../utils';
 
-export function create(): LanguageServicePlugin {
-	const base = baseCreate({ scssDocumentSelector: ['scss', 'postcss'] });
+export function create(
+	{ resolveModuleName }: import('@vue/typescript-plugin/lib/requests').Requests,
+): LanguageServicePlugin {
+	const baseService = baseCreate({
+		getDocumentContext(context) {
+			return {
+				resolveReference: createReferenceResolver(context, resolveReference, resolveModuleName) as any,
+			};
+		},
+		scssDocumentSelector: ['scss', 'postcss'],
+	});
 	return {
-		...base,
+		...baseService,
 		create(context) {
-			const baseInstance = base.create(context);
+			const baseServiceInstance = baseService.create(context);
 			const {
 				'css/languageService': getCssLs,
 				'css/stylesheet': getStylesheet,
-			} = baseInstance.provide as Provide;
+			} = baseServiceInstance.provide as Provide;
 
 			return {
-				...baseInstance,
+				...baseServiceInstance,
 				async provideDiagnostics(document, token) {
-					let diagnostics = await baseInstance.provideDiagnostics?.(document, token) ?? [];
+					let diagnostics = await baseServiceInstance.provideDiagnostics?.(document, token) ?? [];
 					if (document.languageId === 'postcss') {
 						diagnostics = diagnostics.filter(diag =>
 							diag.code !== 'css-semicolonexpected'

packages/language-service/lib/plugins/vue-template.ts

@@ -13,15 +13,15 @@ import {
 	tsCodegen,
 	type VueVirtualCode,
 } from '@vue/language-core';
-import { camelize, capitalize } from '@vue/shared';
+import { camelize, capitalize, isPromise } from '@vue/shared';
 import type { ComponentPropInfo } from '@vue/typescript-plugin/lib/requests/getComponentProps';
-import { create as createHtmlService } from 'volar-service-html';
+import { create as createHtmlService, resolveReference } from 'volar-service-html';
 import { create as createPugService } from 'volar-service-pug';
 import * as html from 'vscode-html-languageservice';
 import { URI, Utils } from 'vscode-uri';
 import { loadModelModifiersData, loadTemplateData } from '../data';
 import { AttrNameCasing, checkCasing, TagNameCasing } from '../nameCasing';
-import { resolveEmbeddedCode } from '../utils';
+import { createReferenceResolver, resolveEmbeddedCode } from '../utils';
 
 const specialTags = new Set([
 	'slot',
@@ -45,11 +45,12 @@ export function create(
 	languageId: 'html' | 'jade',
 	{
 		getComponentNames,
-		getElementAttrs,
 		getComponentProps,
 		getComponentEvents,
 		getComponentDirectives,
 		getComponentSlots,
+		getElementAttrs,
+		resolveModuleName,
 	}: import('@vue/typescript-plugin/lib/requests').Requests,
 ): LanguageServicePlugin {
 	let customData: html.IHTMLDataProvider[] = [];
@@ -78,6 +79,11 @@ export function create(
 		: createHtmlService({
 			documentSelector: ['html', 'markdown'],
 			useDefaultDataProvider: false,
+			getDocumentContext(context) {
+				return {
+					resolveReference: createReferenceResolver(context, resolveReference, resolveModuleName) as any,
+				};
+			},
 			getCustomData() {
 				return [
 					...customData,
@@ -362,6 +368,25 @@ export function create(
 
 					return baseServiceInstance.provideHover?.(document, position, token);
 				},
+
+				async provideDocumentLinks(document, token) {
+					if (document.languageId !== languageId) {
+						return;
+					}
+					const info = resolveEmbeddedCode(context, document.uri);
+					if (info?.code.id !== 'template') {
+						return;
+					}
+
+					const documentLinks = await baseServiceInstance.provideDocumentLinks?.(document, token) ?? [];
+					for (const link of documentLinks) {
+						if (link.target && isPromise(link.target)) {
+							link.target = await link.target;
+						}
+					}
+
+					return documentLinks;
+				},
 			};
 
 			async function runWithVueData<T>(sourceDocumentUri: URI, root: VueVirtualCode, fn: () => T) {

packages/language-service/lib/utils.ts

@@ -19,3 +19,23 @@ export function resolveEmbeddedCode(
 		root: sourceScript.generated!.root as VueVirtualCode,
 	};
 }
+
+export function createReferenceResolver(
+	context: LanguageServiceContext,
+	resolveReference: typeof import('volar-service-html').resolveReference,
+	resolveModuleName: import('@vue/typescript-plugin/lib/requests').Requests['resolveModuleName'],
+) {
+	return async (ref: string, base: string) => {
+		let uri = URI.parse(base);
+		const decoded = context.decodeEmbeddedDocumentUri(uri);
+		if (decoded) {
+			uri = decoded[0];
+		}
+
+		let moduleName: string | null | undefined;
+		if (!ref.startsWith('./') && !ref.startsWith('../')) {
+			moduleName = await resolveModuleName(uri.fsPath, ref);
+		}
+		return moduleName ?? resolveReference(ref, uri, context.env.workspaceFolders);
+	};
+}

packages/typescript-plugin/index.ts

@@ -13,6 +13,7 @@ import { getElementAttrs } from './lib/requests/getElementAttrs';
 import { getElementNames } from './lib/requests/getElementNames';
 import { getImportPathForFile } from './lib/requests/getImportPathForFile';
 import { isRefAtPosition } from './lib/requests/isRefAtPosition';
+import { resolveModuleName } from './lib/requests/resolveModuleName';
 
 export = createLanguageServicePlugin(
 	(ts, info) => {
@@ -170,6 +171,10 @@ export = createLanguageServicePlugin(
 				const { project } = getProject(fileName);
 				return createResponse(getElementNames(ts, project.getLanguageService().getProgram()!));
 			});
+			session.addProtocolHandler('_vue:resolveModuleName', request => {
+				const [fileName, moduleName]: Parameters<Requests['resolveModuleName']> = request.arguments;
+				return createResponse(resolveModuleName(ts, info.languageServiceHost, fileName, moduleName));
+			});
 
 			projectService.logger.info('Vue specific commands are successfully added.');
 

packages/typescript-plugin/lib/requests/index.ts

@@ -40,6 +40,10 @@ export interface Requests {
 	getElementNames(
 		fileName: string,
 	): Response<ReturnType<typeof import('./getElementNames.js')['getElementNames']>>;
+	resolveModuleName(
+		fileName: string,
+		moduleName: string,
+	): Response<ReturnType<typeof import('./resolveModuleName.js')['resolveModuleName']>>;
 	getDocumentHighlights(
 		fileName: string,
 		position: number,

packages/typescript-plugin/lib/requests/resolveModuleName.ts

@@ -0,0 +1,38 @@
+import type * as ts from 'typescript';
+
+export function resolveModuleName(
+	ts: typeof import('typescript'),
+	languageServiceHost: ts.LanguageServiceHost,
+	fileName: string,
+	moduleName: string,
+): string | undefined {
+	const compilerOptions = languageServiceHost.getCompilationSettings();
+
+	const ext = moduleName.split('.').pop();
+	const result = ts.resolveModuleName(
+		moduleName,
+		fileName,
+		{
+			...compilerOptions,
+			allowArbitraryExtensions: true,
+		},
+		{
+			fileExists(fileName) {
+				fileName = transformFileName(fileName, ext);
+				return languageServiceHost.fileExists(fileName);
+			},
+		} as ts.ModuleResolutionHost,
+	);
+
+	const resolveFileName = result.resolvedModule?.resolvedFileName;
+	if (resolveFileName) {
+		return transformFileName(resolveFileName, ext);
+	}
+}
+
+function transformFileName(fileName: string, ext: string | undefined) {
+	if (ext && fileName.endsWith(`.d.${ext}.ts`)) {
+		return fileName.slice(0, -`.d.${ext}.ts`.length) + `.${ext}`;
+	}
+	return fileName;
+}