fix(language-core): hoist the variables that may cause TS4081 (#5192)

vuejs · Feb 17, 2025 · b9ae179 · b9ae179
1 parent 50d3a8e
commit b9ae179
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 37 deletions.
diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts
@@ -43,6 +43,7 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		return features;
 	}
 
+	const hoistVars = new Map<string, string>();
 	const localVars = new Map<string, number>();
 	const specialVars = new Set<string>();
 	const accessExternalVariables = new Map<string, Set<number>>();
@@ -67,7 +68,10 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 	const inlayHints: InlayHintInfo[] = [];
 	const bindingAttrLocs: CompilerDOM.SourceLocation[] = [];
 	const inheritedAttrVars = new Set<string>();
-	const templateRefs = new Map<string, [varName: string, offset: number]>();
+	const templateRefs = new Map<string, {
+		varName: string;
+		offset: number;
+	}>();
 
 	return {
 		codeFeatures: new Proxy(codeFeatures, {
@@ -116,6 +120,19 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		getInternalVariable: () => {
 			return `__VLS_${variableId++}`;
 		},
+		getHoistVariable: (originalVar: string) => {
+			let name = hoistVars.get(originalVar);
+			if (name === undefined) {
+				hoistVars.set(originalVar, name = `__VLS_${variableId++}`);
+			}
+			return name;
+		},
+		generateHoistVariables: function* () {
+			// trick to avoid TS 4081 (#5186)
+			for (const [originalVar, hoistVar] of hoistVars) {
+				yield `var ${hoistVar} = ${originalVar}${endOfLine}`;
+			}
+		},
 		ignoreError: function* (): Generator<Code> {
 			if (!ignoredError) {
 				ignoredError = true;

diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
@@ -272,7 +272,10 @@ export function* generateComponent(
 		yield `${endOfLine}`;
 
 		if (refName) {
-			ctx.templateRefs.set(refName, [varName, offset!]);
+			ctx.templateRefs.set(refName, {
+				varName: ctx.getHoistVariable(varName),
+				offset: offset!
+			});
 		}
 		if (isRootNode) {
 			ctx.singleRootElType = `NonNullable<typeof ${varName}>['$el']`;
@@ -358,11 +361,14 @@ export function* generateElement(
 
 	const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
 	if (refName) {
-		let refValue = `__VLS_nativeElements['${node.tag}']`;
+		let element = `__VLS_nativeElements['${node.tag}']`;
 		if (isVForChild) {
-			refValue = `[${refValue}]`;
+			element = `[${element}]`;
 		}
-		ctx.templateRefs.set(refName, [refValue, offset!]);
+		ctx.templateRefs.set(refName, {
+			varName: element,
+			offset: offset!
+		});
 	}
 	if (ctx.singleRootNode === node) {
 		ctx.singleRootElType = `typeof __VLS_nativeElements['${node.tag}']`;

diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
@@ -45,6 +45,9 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	}
 
 	yield* generateStyleScopedClassReferences(ctx);
+	yield* ctx.generateAutoImportCompletion();
+	yield* ctx.generateHoistVariables();
+
 	const speicalTypes = [
 		[slotsPropertyName, yield* generateSlots(options, ctx)],
 		['$attrs', yield* generateInheritedAttrs(options, ctx)],
@@ -58,7 +61,6 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	}
 	yield `} & { [K in keyof import('${options.vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${endOfLine}`;
 
-	yield* ctx.generateAutoImportCompletion();
 	return ctx;
 }
 
@@ -67,20 +69,6 @@ function* generateSlots(
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
 	if (!options.hasDefineSlots) {
-		const hoistVars = new Map<string, string>();
-
-		// trick to avoid TS 4081 (#5186)
-		for (const slot of ctx.dynamicSlots) {
-			hoistVars.set(slot.expVar, slot.expVar = ctx.getInternalVariable());
-			hoistVars.set(slot.propsVar, slot.propsVar = ctx.getInternalVariable());
-		}
-		for (const slot of ctx.slots) {
-			hoistVars.set(slot.propsVar, slot.propsVar = ctx.getInternalVariable());
-		}
-		for (const [originalVar, hoistVar] of hoistVars) {
-			yield `var ${hoistVar} = ${originalVar}${endOfLine}`;
-		}
-
 		const name = getSlotsPropertyName(options.vueCompilerOptions.target);
 		yield `type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.${name}>`;
 		for (const { expVar, propsVar } of ctx.dynamicSlots) {
@@ -145,7 +133,7 @@ function* generateTemplateRefs(
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
 	yield `type __VLS_TemplateRefs = {${newLine}`;
-	for (const [name, [varName, offset]] of ctx.templateRefs) {
+	for (const [name, { varName, offset }] of ctx.templateRefs) {
 		yield* generateObjectProperty(
 			options,
 			ctx,

diff --git a/packages/language-core/lib/codegen/template/slotOutlet.ts b/packages/language-core/lib/codegen/template/slotOutlet.ts
@@ -131,7 +131,7 @@ export function* generateSlotOutlet(
 				offset: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
 				tagRange: [startTagOffset, startTagOffset + node.tag.length],
 				nodeLoc: node.loc,
-				propsVar,
+				propsVar: ctx.getHoistVariable(propsVar),
 			});
 		}
 		else if (
@@ -155,16 +155,16 @@ export function* generateSlotOutlet(
 			);
 			yield `)${endOfLine}`;
 			ctx.dynamicSlots.push({
-				expVar,
-				propsVar,
+				expVar: ctx.getHoistVariable(expVar),
+				propsVar: ctx.getHoistVariable(propsVar),
 			});
 		}
 		else {
 			ctx.slots.push({
 				name: 'default',
 				tagRange: [startTagOffset, startTagEndOffset],
 				nodeLoc: node.loc,
-				propsVar,
+				propsVar: ctx.getHoistVariable(propsVar),
 			});
 		}
 	}

diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -587,23 +587,23 @@ export {};
 
 exports[`vue-tsc-dts > Input: template-slots/component.vue, Output: template-slots/component.vue.d.ts 1`] = `
 "declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_4: {};
-declare var __VLS_5: {
+declare var __VLS_1: {};
+declare var __VLS_3: {
     num: number;
 };
-declare var __VLS_6: {
+declare var __VLS_5: {
     str: string;
 };
 declare var __VLS_7: {
     num: number;
     str: string;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    'no-bind'?: (props: typeof __VLS_4) => any;
+    'no-bind'?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_3) => any;
 } & {
-    'named-slot'?: (props: typeof __VLS_6) => any;
+    'named-slot'?: (props: typeof __VLS_5) => any;
 } & {
     vbind?: (props: typeof __VLS_7) => any;
 }>;
@@ -664,23 +664,23 @@ type __VLS_WithSlots<T, S> = T & {
 
 exports[`vue-tsc-dts > Input: template-slots/component-no-script.vue, Output: template-slots/component-no-script.vue.d.ts 1`] = `
 "declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_4: {};
-declare var __VLS_5: {
+declare var __VLS_1: {};
+declare var __VLS_3: {
     num: number;
 };
-declare var __VLS_6: {
+declare var __VLS_5: {
     str: string;
 };
 declare var __VLS_7: {
     num: number;
     str: string;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    'no-bind'?: (props: typeof __VLS_4) => any;
+    'no-bind'?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_3) => any;
 } & {
-    'named-slot'?: (props: typeof __VLS_6) => any;
+    'named-slot'?: (props: typeof __VLS_5) => any;
 } & {
     vbind?: (props: typeof __VLS_7) => any;
 }>;