refactor(language-core, typescript-plugin): use inline __VLS_elements to simplify code (#5255)

Author: KazariEX

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

@@ -35,7 +35,6 @@ export function generateGlobalTypes({
 	}
 	text += `
 ; declare global {
-	const __VLS_intrinsicElements: __VLS_IntrinsicElements;
 	const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any };
 	const __VLS_unref: typeof import('${lib}').unref;
 	const __VLS_placeholder: any;

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

@@ -127,7 +127,6 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
 		yield* generateComponentSelf(options, ctx, templateCodegenCtx);
 	}
 
-	yield `type __VLS_IntrinsicElementsCompletion = __VLS_IntrinsicElements${endOfLine}`;
 	yield* ctx.localTypes.generate([...ctx.localTypes.getUsedNames()]);
 	if (options.appendGlobalTypes) {
 		yield generateGlobalTypes(options.vueCompilerOptions);

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

@@ -20,6 +20,7 @@ export function* generateTemplate(
 		scriptSetupBindingNames: new Set(),
 	});
 	yield* generateTemplateCtx(options);
+	yield* generateTemplateElements();
 	yield* generateTemplateComponents(options);
 	yield* generateTemplateDirectives(options);
 	yield* generateTemplateBody(options, templateCodegenCtx);
@@ -54,6 +55,10 @@ function* generateTemplateCtx(options: ScriptCodegenOptions): Generator<Code> {
 	}
 }
 
+function* generateTemplateElements(): Generator<Code> {
+	yield `let __VLS_elements!: __VLS_IntrinsicElements${endOfLine}`;
+}
+
 function* generateTemplateComponents(options: ScriptCodegenOptions): Generator<Code> {
 	const types: Code[] = [];
 

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

@@ -320,7 +320,7 @@ export function* generateElement(
 		: undefined;
 	const failedPropExps: FailedPropExpression[] = [];
 
-	yield `__VLS_asFunctionalElement(__VLS_intrinsicElements`;
+	yield `__VLS_asFunctionalElement(__VLS_elements`;
 	yield* generatePropertyAccess(
 		options,
 		ctx,
@@ -329,7 +329,7 @@ export function* generateElement(
 		ctx.codeFeatures.withoutHighlightAndCompletion
 	);
 	if (endTagOffset !== undefined) {
-		yield `, __VLS_intrinsicElements`;
+		yield `, __VLS_elements`;
 		yield* generatePropertyAccess(
 			options,
 			ctx,
@@ -376,7 +376,7 @@ export function* generateElement(
 	}
 
 	if (hasVBindAttrs(options, ctx, node)) {
-		ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);
+		ctx.inheritedAttrVars.add(`__VLS_elements.${node.tag}`);
 	}
 
 	collectStyleScopedClassReferences(options, ctx, node);

packages/typescript-plugin/lib/common.ts

@@ -1,8 +1,7 @@
 import { forEachElementNode, hyphenateTag, Language, VueCompilerOptions, VueVirtualCode } from '@vue/language-core';
 import { capitalize } from '@vue/shared';
 import type * as ts from 'typescript';
-import { _getComponentNames } from './requests/getComponentNames';
-import { _getElementNames } from './requests/getElementAttrs';
+import { _getComponentNames, _getElementNames } from './requests/getComponentNames';
 import type { RequestContext } from './requests/types';
 
 const windowsPathReg = /\\/g;

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

@@ -31,3 +31,15 @@ export function _getComponentNames(
 	names.push(getSelfComponentName(vueCode.fileName));
 	return names;
 }
+
+export function _getElementNames(
+	ts: typeof import('typescript'),
+	tsLs: ts.LanguageService,
+	vueCode: VueVirtualCode
+) {
+	return getVariableType(ts, tsLs, vueCode, '__VLS_elements')
+		?.type
+		?.getProperties()
+		.map(c => c.name)
+		?? [];
+}

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

@@ -1,6 +1,6 @@
 import { VueVirtualCode } from '@vue/language-core';
-import type * as ts from 'typescript';
 import type { RequestContext } from './types';
+import { getVariableType } from './utils';
 
 export function getElementAttrs(
 	this: RequestContext,
@@ -12,46 +12,20 @@ export function getElementAttrs(
 	if (!(volarFile?.generated?.root instanceof VueVirtualCode)) {
 		return;
 	}
-	const program = languageService.getProgram()!;
-
-	const tsSourceFile = program.getSourceFile(fileName);
-	if (tsSourceFile) {
-		const checker = program.getTypeChecker();
-		const typeNode = tsSourceFile.statements
-			.filter(ts.isTypeAliasDeclaration)
-			.find(node => node.name.getText() === '__VLS_IntrinsicElementsCompletion');
-
-		if (typeNode) {
-			const type = checker.getTypeFromTypeNode(typeNode.type);
-			const el = type.getProperty(tagName);
+	const vueCode = volarFile.generated.root;
 
-			if (el) {
-				const attrs = checker.getTypeOfSymbolAtLocation(el, typeNode).getProperties();
-				return attrs.map(c => c.name);
-			}
-		}
+	const program = languageService.getProgram()!;
+	const checker = program.getTypeChecker();
+	const elements = getVariableType(ts, languageService, vueCode, '__VLS_elements');
+	if (!elements) {
+		return [];
 	}
-	return [];
-}
 
-export function _getElementNames(
-	ts: typeof import('typescript'),
-	tsLs: ts.LanguageService,
-	vueCode: VueVirtualCode
-) {
-	const program = tsLs.getProgram()!;
-
-	const tsSourceFile = program.getSourceFile(vueCode.fileName);
-	if (tsSourceFile) {
-		const checker = program.getTypeChecker();
-		const typeNode = tsSourceFile.statements
-			.filter(ts.isTypeAliasDeclaration)
-			.find(node => node.name.getText() === '__VLS_IntrinsicElementsCompletion');
-
-		if (typeNode) {
-			const type = checker.getTypeFromTypeNode(typeNode.type);
-			return type.getProperties().map(c => c.name);
-		}
+	const elementType = elements.type.getProperty(tagName);
+	if (!elementType) {
+		return [];
 	}
-	return [];
+
+	const attrs = checker.getTypeOfSymbol(elementType).getProperties();
+	return attrs.map(c => c.name);
 }