fix(language-core): should try casting dynamic slot name into constant (#4669)

Author: kermanx

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

@@ -100,6 +100,7 @@ declare global {
 		: false;
 
 	function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
+	function __VLS_tryAsConstant<const T>(t: T): T;
 
 	/**
 	 * emit

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

@@ -444,7 +444,9 @@ function* generateComponentSlot(
 			slotDir.arg.loc.source,
 			slotDir.arg.loc.start.offset,
 			slotDir.arg.isStatic ? ctx.codeFeatures.withoutHighlight : ctx.codeFeatures.all,
-			slotDir.arg.loc
+			slotDir.arg.loc,
+			false,
+			true,
 		);
 		yield ': __VLS_thisSlot';
 	}

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

@@ -14,10 +14,25 @@ export function* generateObjectProperty(
 	offset: number,
 	features: VueCodeInformation,
 	astHolder?: any,
-	shouldCamelize = false
+	shouldCamelize = false,
+	shouldBeConstant = false
 ): Generator<Code> {
 	if (code.startsWith('[') && code.endsWith(']') && astHolder) {
-		yield* generateInterpolation(options, ctx, code, astHolder, offset, features, '', '');
+		if (shouldBeConstant) {
+			yield* generateInterpolation(
+				options,
+				ctx,
+				code.slice(1, -1),
+				astHolder,
+				offset + 1,
+				features,
+				'[__VLS_tryAsConstant(',
+				')]',
+			);
+		}
+		else {
+			yield* generateInterpolation(options, ctx, code, astHolder, offset, features, '', '');
+		}
 	}
 	else if (shouldCamelize) {
 		if (variableNameRegex.test(camelize(code))) {

test-workspace/tsc/vue3/#4668/child.vue

@@ -0,0 +1,8 @@
+<template></template>
+
+<script lang="ts" setup>
+defineSlots<{
+  action1: (props: { a: string }) => void
+  action2: (props: { a: string }) => void
+}>()
+</script>

test-workspace/tsc/vue3/#4668/main.vue

@@ -0,0 +1,16 @@
+<template>
+  <Child>
+    <template #[`action${n}`]="data">
+      {{ exactType(data.a, {} as string) }}
+    </template>
+    <template #action2="data">
+      {{ exactType(data.a, {} as string) }}
+    </template>
+  </Child>
+</template>
+<script lang="ts" setup>
+import { exactType } from 'tsc/shared'
+import Child from './child.vue'
+
+const n = 1 as const
+</script>