perf(language-core): cache and reuse inline ts asts during full updates (#5435)

Author: KazariEX

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

@@ -7,7 +7,6 @@ const raw = {
 		semantic: true,
 		navigation: true,
 	},
-	none: {},
 	verification: {
 		verification: true,
 	},
@@ -45,6 +44,9 @@ const raw = {
 		completion: true,
 		semantic: true,
 	},
+	semanticWithoutHighlight: {
+		semantic: { shouldHighlight: () => false },
+	},
 	withoutHighlight: {
 		semantic: { shouldHighlight: () => false },
 		verification: true,

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

@@ -124,7 +124,6 @@ function* generateTemplateBody(
 		yield* options.templateCodegen.codes;
 	}
 	else {
-		yield `// no template${newLine}`;
 		if (!options.scriptSetupRanges?.defineSlots) {
 			yield `type __VLS_Slots = {}${endOfLine}`;
 		}

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

@@ -281,7 +281,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 							offset,
 							{
 								...codeFeatures.additionalCompletion,
-								...codeFeatures.withoutHighlightAndCompletionAndNavigation,
+								...codeFeatures.semanticWithoutHighlight,
 							},
 						];
 					}

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

@@ -52,7 +52,6 @@ export function* generateComponent(
 	let dynamicTagInfo: {
 		tag: string;
 		offsets: number[];
-		astHolder: CompilerDOM.SourceLocation;
 	} | undefined;
 
 	if (isComponentTag) {
@@ -69,7 +68,6 @@ export function* generateComponent(
 				dynamicTagInfo = {
 					tag: prop.exp.content,
 					offsets: [prop.exp.loc.start.offset],
-					astHolder: prop.exp.loc,
 				};
 				props = props.filter(p => p !== prop);
 				break;
@@ -81,7 +79,6 @@ export function* generateComponent(
 		dynamicTagInfo = {
 			tag: node.tag,
 			offsets: tagOffsets,
-			astHolder: node.loc,
 		};
 	}
 
@@ -120,7 +117,6 @@ export function* generateComponent(
 			ctx.codeFeatures.all,
 			dynamicTagInfo.tag,
 			dynamicTagInfo.offsets[0],
-			dynamicTagInfo.astHolder,
 			`(`,
 			`)`,
 		);
@@ -133,7 +129,6 @@ export function* generateComponent(
 				ctx.codeFeatures.withoutCompletion,
 				dynamicTagInfo.tag,
 				dynamicTagInfo.offsets[1],
-				dynamicTagInfo.astHolder,
 				`(`,
 				`)`,
 			);
@@ -376,7 +371,6 @@ function* generateFailedPropExps(
 			ctx.codeFeatures.all,
 			failedExp.node.loc.source,
 			failedExp.node.loc.start.offset,
-			failedExp.node.loc,
 			failedExp.prefix,
 			failedExp.suffix,
 		);
@@ -460,7 +454,6 @@ function* generateElementReference(
 				content,
 				startOffset,
 				ctx.codeFeatures.navigation,
-				prop.value.loc,
 			);
 			yield `} */${endOfLine}`;
 

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

@@ -111,7 +111,6 @@ function* generateArg(
 			ctx.codeFeatures.all,
 			arg.content,
 			startOffset,
-			arg.loc,
 			`(`,
 			`)`,
 		);

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

@@ -120,7 +120,7 @@ export function* generateEventExpression(
 		let suffix = `)`;
 		let isFirstMapping = true;
 
-		const ast = createTsAst(options.ts, prop.exp, prop.exp.content);
+		const ast = createTsAst(options.ts, options.template.ast, prop.exp.content);
 		const isCompound = isCompoundExpression(options.ts, ast);
 
 		if (isCompound) {
@@ -156,7 +156,6 @@ export function* generateEventExpression(
 			},
 			prop.exp.content,
 			prop.exp.loc.start.offset,
-			prop.exp.loc,
 			prefix,
 			suffix,
 		);
@@ -189,7 +188,6 @@ export function* generateModelEventExpression(
 			ctx.codeFeatures.verification,
 			prop.exp.content,
 			prop.exp.loc.start.offset,
-			prop.exp.loc,
 		);
 		yield ` = $event${endOfLine}`;
 		yield `}`;

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

@@ -130,7 +130,6 @@ export function* generateElementProps(
 							propName,
 							prop.arg.loc.start.offset,
 							codeInfo,
-							(prop.loc as any).name_2 ??= {},
 							shouldCamelize,
 						)
 						: wrapWith(
@@ -208,7 +207,6 @@ export function* generateElementProps(
 					prop.name,
 					prop.loc.start.offset,
 					codeInfo,
-					(prop.loc as any).name_1 ??= {},
 					shouldCamelize,
 				),
 				`: `,
@@ -287,7 +285,6 @@ export function* generatePropExp(
 				features,
 				exp.loc.source,
 				exp.loc.start.offset,
-				exp.loc,
 				`(`,
 				`)`,
 			);

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

@@ -88,7 +88,6 @@ function* generateSlots(
 					slot.name,
 					slot.offset,
 					ctx.codeFeatures.withoutHighlightAndCompletion,
-					slot.nodeLoc,
 				);
 			}
 			else {

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

@@ -1,36 +1,40 @@
 import { isGloballyAllowed, makeMap } from '@vue/shared';
 import type * as ts from 'typescript';
-import type { Code, VueCodeInformation } from '../../types';
+import type { Code, Sfc, VueCodeInformation } from '../../types';
 import { getNodeText, getStartEnd } from '../../utils/shared';
+import type { ScriptCodegenOptions } from '../script';
 import { collectVars, createTsAst, identifierRegex } from '../utils';
 import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
 
 // https://github.com/vuejs/core/blob/fb0c3ca519f1fccf52049cd6b8db3a67a669afe9/packages/compiler-core/src/transforms/transformExpression.ts#L47
 const isLiteralWhitelisted = /*@__PURE__*/ makeMap('true,false,null,this');
 
 export function* generateInterpolation(
-	options: {
-		ts: typeof ts,
-		destructuredPropNames: Set<string> | undefined,
-		templateRefNames: Set<string> | undefined;
-	},
+	options: TemplateCodegenOptions | ScriptCodegenOptions,
 	ctx: TemplateCodegenContext,
 	source: string,
 	data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined,
 	code: string,
 	start: number | undefined,
-	astHolder: any = {},
 	prefix: string = '',
 	suffix: string = '',
 ): Generator<Code> {
+	const {
+		ts,
+		destructuredPropNames,
+		templateRefNames,
+	} = options;
+	const template = 'template' in options ? options.template : options.sfc.template;
+
 	for (let [section, offset, type] of forEachInterpolationSegment(
-		options.ts,
-		options.destructuredPropNames,
-		options.templateRefNames,
+		ts,
+		template,
+		destructuredPropNames,
+		templateRefNames,
 		ctx,
 		code,
 		start,
-		astHolder,
 		prefix,
 		suffix,
 	)) {
@@ -88,12 +92,12 @@ type Segment = [
 
 function* forEachInterpolationSegment(
 	ts: typeof import('typescript'),
+	template: Sfc['template'],
 	destructuredPropNames: Set<string> | undefined,
 	templateRefNames: Set<string> | undefined,
 	ctx: TemplateCodegenContext,
 	originalCode: string,
 	start: number | undefined,
-	astHolder: any,
 	prefix: string,
 	suffix: string,
 ): Generator<Segment> {
@@ -108,7 +112,7 @@ function* forEachInterpolationSegment(
 		});
 	}
 	else {
-		const ast = createTsAst(ts, astHolder, code);
+		const ast = createTsAst(ts, template?.ast, code);
 		const varCb = (id: ts.Identifier, isShorthand: boolean) => {
 			const text = getNodeText(ts, id, ast);
 			if (!shouldIdentifierSkipped(ctx, text, destructuredPropNames)) {

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

@@ -14,11 +14,10 @@ export function* generateObjectProperty(
 	code: string,
 	offset: number,
 	features: VueCodeInformation,
-	astHolder?: any,
 	shouldCamelize = false,
 	shouldBeConstant = false,
 ): Generator<Code> {
-	if (code.startsWith('[') && code.endsWith(']') && astHolder) {
+	if (code.startsWith('[') && code.endsWith(']')) {
 		if (shouldBeConstant) {
 			yield* generateInterpolation(
 				options,
@@ -27,7 +26,6 @@ export function* generateObjectProperty(
 				features,
 				code.slice(1, -1),
 				offset + 1,
-				astHolder,
 				`[__VLS_tryAsConstant(`,
 				`)]`,
 			);
@@ -40,7 +38,6 @@ export function* generateObjectProperty(
 				features,
 				code,
 				offset,
-				astHolder,
 			);
 		}
 	}

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

@@ -11,7 +11,6 @@ export function* generatePropertyAccess(
 	code: string,
 	offset?: number,
 	features?: VueCodeInformation,
-	astHolder?: any,
 ): Generator<Code> {
 	if (!options.compilerOptions.noPropertyAccessFromIndexSignature && identifierRegex.test(code)) {
 		yield `.`;
@@ -27,7 +26,6 @@ export function* generatePropertyAccess(
 			features,
 			code,
 			offset,
-			astHolder,
 		);
 	}
 	else {

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

@@ -150,7 +150,6 @@ export function* generateSlotOutlet(
 				ctx.codeFeatures.all,
 				nameProp.exp.content,
 				nameProp.exp.loc.start.offset,
-				nameProp.exp,
 			);
 			yield `)${endOfLine}`;
 			ctx.dynamicSlots.push({

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

@@ -101,7 +101,6 @@ export function* generateTemplateChild(
 			ctx.codeFeatures.all,
 			content,
 			start,
-			node.content.loc,
 			`(`,
 			`)${endOfLine}`,
 		);

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

@@ -17,7 +17,7 @@ export function* generateVFor(
 
 	yield `for (const [`;
 	if (leftExpressionRange && leftExpressionText) {
-		const collectAst = createTsAst(options.ts, node.parseResult, `const [${leftExpressionText}]`);
+		const collectAst = createTsAst(options.ts, options.template.ast, `const [${leftExpressionText}]`);
 		collectVars(options.ts, collectAst, collectAst, forBlockVars);
 		yield [
 			leftExpressionText,
@@ -36,7 +36,6 @@ export function* generateVFor(
 			ctx.codeFeatures.all,
 			source.content,
 			source.loc.start.offset,
-			source.loc,
 			`(`,
 			`)`,
 		);
@@ -74,7 +73,6 @@ export function* generateVFor(
 						ctx.codeFeatures.all,
 						prop.value.content,
 						prop.value.loc.start.offset,
-						prop.value.loc,
 						`(`,
 						`)`,
 					);

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

@@ -39,7 +39,6 @@ export function* generateVIf(
 				ctx.codeFeatures.all,
 				branch.condition.content,
 				branch.condition.loc.start.offset,
-				branch.condition.loc,
 				`(`,
 				`)`,
 			)];

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

@@ -37,7 +37,6 @@ export function* generateVSlot(
 					slotDir.arg.loc.source,
 					slotDir.arg.loc.start.offset,
 					slotDir.arg.isStatic ? ctx.codeFeatures.withoutHighlight : ctx.codeFeatures.all,
-					slotDir.arg.loc,
 					false,
 					true,
 				);
@@ -65,7 +64,7 @@ export function* generateVSlot(
 	}
 
 	if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-		const slotAst = createTsAst(options.ts, slotDir, `(${slotDir.exp.content}) => {}`);
+		const slotAst = createTsAst(options.ts, options.template.ast, `(${slotDir.exp.content}) => {}`);
 		collectVars(options.ts, slotAst, slotAst, slotBlockVars);
 		yield* generateSlotParameters(options, ctx, slotAst, slotDir.exp, slotVar);
 	}

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

@@ -66,12 +66,19 @@ export function normalizeAttributeValue(node: CompilerDOM.TextNode): [string, nu
 	return [content, offset];
 }
 
-export function createTsAst(ts: typeof import('typescript'), astHolder: any, text: string) {
-	if (astHolder.__volar_ast_text !== text) {
-		astHolder.__volar_ast_text = text;
-		astHolder.__volar_ast = ts.createSourceFile('/a.ts', text, 99 satisfies ts.ScriptTarget.ESNext);
+export function createTsAst(
+	ts: typeof import('typescript'),
+	templateAst: CompilerDOM.RootNode | undefined,
+	text: string,
+) {
+	const inlineTsAsts = (templateAst as any)?.__volar_inlineTsAsts;
+	let ast = inlineTsAsts?.get(text);
+	if (!ast) {
+		ast = ts.createSourceFile('/a.ts', text, 99 satisfies ts.ScriptTarget.ESNext);
+		inlineTsAsts?.set(text, ast);
 	}
-	return astHolder.__volar_ast as ts.SourceFile;
+	ast.__volar_used = true;
+	return ast as ts.SourceFile;
 }
 
 export function generateSfcBlockSection(block: SfcBlock, start: number, end: number, features: VueCodeInformation): Code {

packages/language-core/lib/plugins/vue-template-inline-ts.ts

@@ -107,7 +107,7 @@ const plugin: VueLanguagePlugin = ctx => {
 						&& prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY // style='z-index: 2' will compile to {'z-index':'2'}
 					) {
 						if (prop.name === 'on' && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-							const ast = createTsAst(ctx.modules.typescript, prop.exp, prop.exp.content);
+							const ast = createTsAst(ctx.modules.typescript, sfc.template!.ast, prop.exp.content);
 							if (isCompoundExpression(ctx.modules.typescript, ast)) {
 								addFormatCodes(
 									prop.exp.loc.source,