fix(language-core): use trick to avoid TS4081 error on slots (#5189)

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

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -298,7 +298,14 @@ function* generateSetupFunction(
 	yield* generateComponentSelf(options, ctx, templateCodegenCtx);
 
 	if (syntax) {
-		if (!options.vueCompilerOptions.skipTemplateCodegen && (options.templateCodegen?.hasSlot || scriptSetupRanges.defineSlots)) {
+		if (
+			!options.vueCompilerOptions.skipTemplateCodegen
+			&& (
+				scriptSetupRanges.defineSlots
+				|| options.templateCodegen?.slots.length
+				|| options.templateCodegen?.dynamicSlots.length
+			)
+		) {
 			yield `const __VLS_component = `;
 			yield* generateComponent(options, ctx, scriptSetup, scriptSetupRanges);
 			yield endOfLine;

diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts
@@ -86,7 +86,6 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 		scopedClasses,
 		emptyClassOffsets,
 		inlayHints,
-		hasSlot: false,
 		bindingAttrLocs,
 		inheritedAttrVars,
 		templateRefs,

diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
@@ -67,15 +67,27 @@ 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) {
-			ctx.hasSlot = true;
 			yield `${newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
 		}
 		for (const slot of ctx.slots) {
 			yield `${newLine}& { `;
-			ctx.hasSlot = true;
 			if (slot.name && slot.offset !== undefined) {
 				yield* generateObjectProperty(
 					options,

diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -587,25 +587,25 @@ 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_0: {};
-declare var __VLS_1: {
+declare var __VLS_4: {};
+declare var __VLS_5: {
     num: number;
 };
-declare var __VLS_2: {
+declare var __VLS_6: {
     str: string;
 };
-declare var __VLS_3: {
+declare var __VLS_7: {
     num: number;
     str: string;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    'no-bind'?: (props: typeof __VLS_0) => any;
+    'no-bind'?: (props: typeof __VLS_4) => any;
 } & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_5) => any;
 } & {
-    'named-slot'?: (props: typeof __VLS_2) => any;
+    'named-slot'?: (props: typeof __VLS_6) => any;
 } & {
-    vbind?: (props: typeof __VLS_3) => any;
+    vbind?: (props: typeof __VLS_7) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -664,25 +664,25 @@ 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_0: {};
-declare var __VLS_1: {
+declare var __VLS_4: {};
+declare var __VLS_5: {
     num: number;
 };
-declare var __VLS_2: {
+declare var __VLS_6: {
     str: string;
 };
-declare var __VLS_3: {
+declare var __VLS_7: {
     num: number;
     str: string;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    'no-bind'?: (props: typeof __VLS_0) => any;
+    'no-bind'?: (props: typeof __VLS_4) => any;
 } & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_5) => any;
 } & {
-    'named-slot'?: (props: typeof __VLS_2) => any;
+    'named-slot'?: (props: typeof __VLS_6) => any;
 } & {
-    vbind?: (props: typeof __VLS_3) => any;
+    vbind?: (props: typeof __VLS_7) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;