feat(language-service): drag and drop import respects tsconfig path aliases

packages/language-service/index.ts

@@ -30,6 +30,7 @@ import { create as createVueVisualizeHiddenCallbackParamPlugin } from './lib/plu
 import { decorateLanguageServiceForVue } from '@vue/typescript-plugin/lib/common';
 import { collectExtractProps } from '@vue/typescript-plugin/lib/requests/collectExtractProps';
 import { getComponentEvents, getComponentNames, getComponentProps, getElementAttrs, getTemplateContextProps } from '@vue/typescript-plugin/lib/requests/componentInfos';
+import { getImportPathForFile } from '@vue/typescript-plugin/lib/requests/getImportPathForFile';
 import { getPropertiesAtLocation } from '@vue/typescript-plugin/lib/requests/getPropertiesAtLocation';
 import { getQuickInfoAtPosition } from '@vue/typescript-plugin/lib/requests/getQuickInfoAtPosition';
 
@@ -78,7 +79,7 @@ export function createVueServicePlugins(
 		createVueSfcPlugin(),
 		createVueTwoslashQueriesPlugin(ts, getTsPluginClient),
 		createVueReferencesCodeLensPlugin(),
-		createVueDocumentDropPlugin(ts),
+		createVueDocumentDropPlugin(ts, getTsPluginClient),
 		createVueAutoDotValuePlugin(ts, getTsPluginClient),
 		createVueAutoWrapParenthesesPlugin(ts),
 		createVueAutoAddSpacePlugin(),
@@ -107,6 +108,7 @@ export function createDefaultGetTsPluginClient(
 			typescript: ts,
 			language: context.language,
 			languageService,
+			languageServiceHost: context.language.typescript.languageServiceHost,
 			vueOptions: getVueOptions(context.env),
 			isTsPlugin: false,
 			getFileId: context.env.typescript!.fileNameToUri,
@@ -118,6 +120,9 @@ export function createDefaultGetTsPluginClient(
 			async getPropertiesAtLocation(...args) {
 				return await getPropertiesAtLocation.apply(requestContext, args);
 			},
+			async getImportPathForFile(...args) {
+				return await getImportPathForFile.apply(requestContext, args);
+			},
 			async getComponentEvents(...args) {
 				return await getComponentEvents.apply(requestContext, args);
 			},

packages/language-service/lib/plugins/vue-document-drop.ts

@@ -3,15 +3,21 @@ import { camelize, capitalize, hyphenate } from '@vue/shared';
 import * as path from 'path-browserify';
 import type * as vscode from 'vscode-languageserver-protocol';
 import { createAddComponentToOptionEdit, getLastImportNode } from '../plugins/vue-extract-file';
-import { LanguageServicePlugin, LanguageServicePluginInstance, TagNameCasing } from '../types';
+import { LanguageServicePlugin, LanguageServicePluginInstance, ServiceContext, TagNameCasing } from '../types';
+import { getUserPreferences } from 'volar-service-typescript/lib/configs/getUserPreferences';
 
-export function create(ts: typeof import('typescript')): LanguageServicePlugin {
+export function create(
+	ts: typeof import('typescript'),
+	getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined,
+): LanguageServicePlugin {
 	return {
 		name: 'vue-document-drop',
 		create(context): LanguageServicePluginInstance {
 
 			let casing: TagNameCasing = TagNameCasing.Pascal; // TODO
 
+			const tsPluginClient = getTsPluginClient?.(context);
+
 			return {
 				async provideDocumentDropEdits(document, _position, dataTransfer) {
 
@@ -51,12 +57,25 @@ export function create(ts: typeof import('typescript')): LanguageServicePlugin {
 					const additionalEdit: vscode.WorkspaceEdit = {};
 					const code = [...forEachEmbeddedCode(vueVirtualCode)].find(code => code.id === (sfc.scriptSetup ? 'scriptSetupFormat' : 'scriptFormat'))!;
 					const lastImportNode = getLastImportNode(ts, script.ast);
+					const importFileName = context.env.typescript!.uriToFileName(importUri);
+
+					let importPath: string | undefined;
+
+					if (tsPluginClient) {
+						const preferences = await getUserPreferences(context, document);
+						const importPathRequest = await tsPluginClient.getImportPathForFile(vueVirtualCode.fileName, importFileName, preferences);
+						if (importPathRequest) {
+							importPath = importPathRequest;
+						}
+					}
 
-					let importPath = path.relative(path.dirname(document.uri), importUri)
-						|| importUri.substring(importUri.lastIndexOf('/') + 1);
+					if (!importPath) {
+						importPath = path.relative(path.dirname(vueVirtualCode.fileName), importFileName)
+							|| importUri.substring(importUri.lastIndexOf('/') + 1);
 
-					if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
-						importPath = './' + importPath;
+						if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
+							importPath = './' + importPath;
+						}
 					}
 
 					additionalEdit.changes ??= {};

packages/language-service/package.json

@@ -31,7 +31,7 @@
 		"volar-service-json": "0.0.37",
 		"volar-service-pug": "0.0.37",
 		"volar-service-pug-beautify": "0.0.37",
-		"volar-service-typescript": "0.0.37",
+		"volar-service-typescript": "0.0.37-patch.1",
 		"volar-service-typescript-twoslash-queries": "0.0.37",
 		"vscode-html-languageservice": "^5.1.0",
 		"vscode-languageserver-textdocument": "^1.0.11",

packages/typescript-plugin/lib/client.ts

@@ -10,6 +10,15 @@ export function collectExtractProps(
 	});
 }
 
+export async function getImportPathForFile(
+	...args: Parameters<typeof import('./requests/getImportPathForFile.js')['getImportPathForFile']>
+) {
+	return await sendRequest<ReturnType<typeof import('./requests/getImportPathForFile')['getImportPathForFile']>>({
+		type: 'getImportPathForFile',
+		args,
+	});
+}
+
 export async function getPropertiesAtLocation(
 	...args: Parameters<typeof import('./requests/getPropertiesAtLocation.js')['getPropertiesAtLocation']>
 ) {

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

@@ -0,0 +1,66 @@
+import type * as ts from 'typescript';
+
+const enum ExportKind {
+	Named,
+	Default,
+	ExportEquals,
+	UMD,
+}
+
+interface SymbolExportInfo {
+	readonly symbol: Symbol;
+	readonly moduleSymbol: Symbol;
+	/** Set if `moduleSymbol` is an external module, not an ambient module */
+	moduleFileName: string | undefined;
+	exportKind: ExportKind;
+	targetFlags: ts.SymbolFlags;
+	/** True if export was only found via the package.json AutoImportProvider (for telemetry). */
+	isFromPackageJson: boolean;
+}
+
+export function getImportPathForFile(
+	this: {
+		typescript: typeof import('typescript');
+		languageService: ts.LanguageService;
+		languageServiceHost: ts.LanguageServiceHost;
+	},
+	fileName: string,
+	incomingFileName: string,
+	preferences: ts.UserPreferences,
+) {
+	const { typescript: ts, languageService, languageServiceHost } = this;
+	const { createImportSpecifierResolver }: {
+		createImportSpecifierResolver(
+			importingFile: ts.SourceFile,
+			program: ts.Program,
+			host: ts.LanguageServiceHost,
+			preferences: ts.UserPreferences
+		): {
+			getModuleSpecifierForBestExportInfo(
+				exportInfo: readonly SymbolExportInfo[],
+				symbolName: string,
+				position: number,
+				isValidTypeOnlyUseSite: boolean,
+				fromCacheOnly?: boolean
+			): { exportInfo?: SymbolExportInfo, moduleSpecifier: string, computedWithoutCacheCount: number; } | undefined;
+		};
+	} = (ts as any).codefix;
+	const program = languageService.getProgram();
+	const sourceFile = program?.getSourceFile(fileName);
+	const incomingFile = program?.getSourceFile(incomingFileName);
+	if (!program || !sourceFile || !incomingFile) {
+		return;
+	}
+	const importSpecifierResolver = createImportSpecifierResolver(sourceFile, program, languageServiceHost, preferences);
+	const info = importSpecifierResolver.getModuleSpecifierForBestExportInfo([{
+		// @ts-expect-error
+		symbol: incomingFile.symbol,
+		// @ts-expect-error
+		moduleSymbol: incomingFile.symbol,
+		moduleFileName: incomingFileName,
+		exportKind: ExportKind.Default,
+		isFromPackageJson: false,
+		targetFlags: 0,
+	}], 'default', 0, false);
+	return info?.moduleSpecifier;
+}

packages/typescript-plugin/lib/server.ts

@@ -3,6 +3,7 @@ import * as net from 'net';
 import type * as ts from 'typescript';
 import { collectExtractProps } from './requests/collectExtractProps';
 import { getComponentEvents, getComponentNames, getComponentProps, getElementAttrs, getTemplateContextProps } from './requests/componentInfos';
+import { getImportPathForFile } from './requests/getImportPathForFile';
 import { getPropertiesAtLocation } from './requests/getPropertiesAtLocation';
 import { getQuickInfoAtPosition } from './requests/getQuickInfoAtPosition';
 import { NamedPipeServer, connect, readPipeTable, updatePipeTable } from './utils';
@@ -11,6 +12,7 @@ import type { Language, VueCompilerOptions } from '@vue/language-core';
 export interface Request {
 	type: 'containsFile'
 	| 'collectExtractProps'
+	| 'getImportPathForFile'
 	| 'getPropertiesAtLocation'
 	| 'getQuickInfoAtPosition'
 	// Component Infos
@@ -50,6 +52,7 @@ export function startNamedPipeServer(
 				const requestContext = {
 					typescript: ts,
 					languageService: project.info.languageService,
+					languageServiceHost: project.info.languageServiceHost,
 					language: project.language,
 					vueOptions: project.vueOptions,
 					isTsPlugin: true,
@@ -59,6 +62,10 @@ export function startNamedPipeServer(
 					const result = collectExtractProps.apply(requestContext, request.args as any);
 					connection.write(JSON.stringify(result ?? null));
 				}
+				else if (request.type === 'getImportPathForFile') {
+					const result = getImportPathForFile.apply(requestContext, request.args as any);
+					connection.write(JSON.stringify(result ?? null));
+				}
 				else if (request.type === 'getPropertiesAtLocation') {
 					const result = getPropertiesAtLocation.apply(requestContext, request.args as any);
 					connection.write(JSON.stringify(result ?? null));