feat(language-service): support global directives completion

packages/language-core/lib/codegen/globalTypes.ts

@@ -83,6 +83,9 @@ export function generateGlobalTypes(lib: string, target: number, strictTemplates
 		>
 	>;
 	type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
+	type __VLS_PickDirectives<T> = {
+		[K in keyof T as K extends \`v\${infer N}\` ? N extends Capitalize<N> ? K : never : never]: T[K];
+	};
 	type __VLS_PickFunctionalComponentCtx<T, K> = NonNullable<__VLS_PickNotAny<
 		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
 		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any

packages/language-core/lib/codegen/script/template.ts

@@ -94,7 +94,7 @@ export function* generateTemplateDirectives(options: ScriptCodegenOptions): Gene
 	}
 
 	exps.push(`{} as NonNullable<typeof __VLS_self extends { directives: infer D } ? D : {}>`);
-	exps.push(`__VLS_ctx`);
+	exps.push(`{} as __VLS_PickDirectives<typeof __VLS_ctx>`);
 
 	yield `const __VLS_localDirectives = {${newLine}`;
 	for (const type of exps) {

packages/language-service/index.ts

@@ -31,7 +31,7 @@ import { create as createVueTwoslashQueriesPlugin } from './lib/plugins/vue-twos
 import { parse, VueCompilerOptions } from '@vue/language-core';
 import { proxyLanguageServiceForVue } 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 { getComponentDirectives, 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 type { RequestContext } from '@vue/typescript-plugin/lib/requests/types';
@@ -118,6 +118,9 @@ export function getFullLanguageServicePlugins(
 			async getComponentEvents(...args) {
 				return await getComponentEvents.apply(requestContext, args);
 			},
+			async getComponentDirectives(...args) {
+				return await getComponentDirectives.apply(requestContext, args);
+			},
 			async getComponentNames(...args) {
 				return await getComponentNames.apply(requestContext, args);
 			},

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

@@ -1,5 +1,5 @@
 import type { Disposable, LanguageServiceContext, LanguageServicePluginInstance } from '@volar/language-service';
-import { VueCompilerOptions, VueVirtualCode, hyphenateAttr, hyphenateTag, parseScriptSetupRanges, tsCodegen } from '@vue/language-core';
+import { VueCompilerOptions, VueVirtualCode, hyphenateAttr, hyphenateTag, parseScriptSetupRanges } from '@vue/language-core';
 import { camelize, capitalize } from '@vue/shared';
 import { getComponentSpans } from '@vue/typescript-plugin/lib/common';
 import { create as createHtmlService } from 'volar-service-html';
@@ -471,11 +471,11 @@ export function create(
 					attrs: string[];
 					propsInfo: { name: string, commentMarkdown: string; }[];
 					events: string[];
+					directives: string[];
 				}>();
 
 				let version = 0;
 				let components: string[] | undefined;
-				let templateContextProps: string[] | undefined;
 
 				tsDocumentations.clear();
 
@@ -542,46 +542,25 @@ export function create(
 									const attrs = await tsPluginClient?.getElementAttrs(vueCode.fileName, tag) ?? [];
 									const propsInfo = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
 									const events = await tsPluginClient?.getComponentEvents(vueCode.fileName, tag) ?? [];
+									const directives = await tsPluginClient?.getComponentDirectives(vueCode.fileName) ?? [];
 									tagInfos.set(tag, {
 										attrs,
 										propsInfo: propsInfo.filter(prop =>
 											!prop.name.startsWith('ref_')
 										),
 										events,
+										directives: directives.filter(name =>
+											!['vBind', 'vIf', 'vOn', 'VOnce', 'vShow', 'VSlot'].includes(name)
+										),
 									});
 									version++;
 								})());
 								return [];
 							}
 
-							const { attrs, propsInfo, events } = tagInfo;
+							const { attrs, propsInfo, events, directives } = tagInfo;
 							const props = propsInfo.map(prop => prop.name);
 							const attributes: html.IAttributeData[] = [];
-							const _tsCodegen = tsCodegen.get(vueCode._sfc);
-
-							if (_tsCodegen) {
-								if (!templateContextProps) {
-									promises.push((async () => {
-										templateContextProps = await tsPluginClient?.getTemplateContextProps(vueCode.fileName) ?? [];
-										version++;
-									})());
-									return [];
-								}
-								let ctxVars = [
-									..._tsCodegen.scriptRanges.get()?.bindings.map(binding => vueCode._sfc.script!.content.slice(binding.start, binding.end)) ?? [],
-									..._tsCodegen.scriptSetupRanges.get()?.bindings.map(binding => vueCode._sfc.scriptSetup!.content.slice(binding.start, binding.end)) ?? [],
-									...templateContextProps,
-								];
-								ctxVars = [...new Set(ctxVars)];
-								const dirs = ctxVars.map(hyphenateAttr).filter(v => v.startsWith('v-'));
-								for (const dir of dirs) {
-									attributes.push(
-										{
-											name: dir,
-										}
-									);
-								}
-							}
 
 							const propsSet = new Set(props);
 
@@ -657,6 +636,13 @@ export function create(
 								);
 							}
 
+							for (const directive of directives) {
+								const name = hyphenateAttr(directive);
+								attributes.push({
+									name
+								});
+							}
+
 							const models: [boolean, string][] = [];
 
 							for (const prop of [...props, ...attrs]) {

packages/typescript-plugin/lib/client.ts

@@ -57,6 +57,15 @@ export function getComponentEvents(
 	});
 }
 
+export function getComponentDirectives(
+	...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentDirectives']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/componentInfos')['getComponentDirectives']>>({
+		type: 'getComponentDirectives',
+		args,
+	});
+}
+
 export function getTemplateContextProps(
 	...args: Parameters<typeof import('./requests/componentInfos.js')['getTemplateContextProps']>
 ) {

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

@@ -160,6 +160,24 @@ export function getComponentEvents(
 	return [...result];
 }
 
+export function getComponentDirectives(
+	this: RequestContext,
+	fileName: string
+) {
+	const { typescript: ts, language, languageService, getFileId } = this;
+	const volarFile = language.scripts.get(getFileId(fileName));
+	if (!(volarFile?.generated?.root instanceof vue.VueVirtualCode)) {
+		return;
+	}
+	const vueCode = volarFile.generated.root;
+	const directives = getVariableType(ts, languageService, vueCode, '__VLS_directives');
+	if (!directives) {
+		return [];
+	}
+
+	return directives.type.getProperties().map(({ name }) => name);
+}
+
 export function getTemplateContextProps(
 	this: RequestContext,
 	fileName: string
@@ -225,7 +243,9 @@ export function getElementAttrs(
 
 	if (tsSourceFile = program.getSourceFile(fileName)) {
 
-		const typeNode = tsSourceFile.statements.find((node): node is ts.TypeAliasDeclaration => ts.isTypeAliasDeclaration(node) && node.name.getText() === '__VLS_IntrinsicElementsCompletion');
+		const typeNode = tsSourceFile.statements
+			.filter(ts.isTypeAliasDeclaration)
+			.find(node => node.name.getText() === '__VLS_IntrinsicElementsCompletion');
 		const checker = program.getTypeChecker();
 
 		if (checker && typeNode) {

packages/typescript-plugin/lib/server.ts

@@ -3,7 +3,7 @@ import * as fs from 'node:fs';
 import * as net from 'node:net';
 import type * as ts from 'typescript';
 import { collectExtractProps } from './requests/collectExtractProps';
-import { getComponentEvents, getComponentNames, getComponentProps, getElementAttrs, getTemplateContextProps } from './requests/componentInfos';
+import { getComponentDirectives, getComponentEvents, getComponentNames, getComponentProps, getElementAttrs, getTemplateContextProps } from './requests/componentInfos';
 import { getImportPathForFile } from './requests/getImportPathForFile';
 import { getPropertiesAtLocation } from './requests/getPropertiesAtLocation';
 import { getQuickInfoAtPosition } from './requests/getQuickInfoAtPosition';
@@ -20,6 +20,7 @@ export interface Request {
 	// Component Infos
 	| 'getComponentProps'
 	| 'getComponentEvents'
+	| 'getComponentDirectives'
 	| 'getTemplateContextProps'
 	| 'getComponentNames'
 	| 'getElementAttrs';
@@ -92,6 +93,10 @@ export async function startNamedPipeServer(
 				const result = getComponentEvents.apply(requestContext, request.args as any);
 				sendResponse(result);
 			}
+			else if (request.type === 'getComponentDirectives') {
+				const result = getComponentDirectives.apply(requestContext, request.args as any);
+				sendResponse(result);
+			}
 			else if (request.type === 'getTemplateContextProps') {
 				const result = getTemplateContextProps.apply(requestContext, request.args as any);
 				sendResponse(result);