fix(language-core): consistent interpolation behavior of shorthand bi…

…nding (#4975)
vuejs · Dec 20, 2024 · 34d7bfd · 34d7bfd
1 parent 9abe5d9
commit 34d7bfd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts
@@ -294,19 +294,37 @@ function* generatePropExp(
 				'(',
 				')'
 			);
-		} else {
+		}
+		else {
 			const propVariableName = camelize(exp.loc.source);
 
 			if (variableNameRegex.test(propVariableName)) {
-				if (!ctx.hasLocalVariable(propVariableName)) {
-					ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
-					yield `__VLS_ctx.`;
-				}
-				yield* generateCamelized(
+				const isDestructuredProp = options.destructuredPropNames?.has(propVariableName) ?? false;
+				const isTemplateRef = options.templateRefNames?.has(propVariableName) ?? false;
+
+				const codes = generateCamelized(
 					exp.loc.source,
 					exp.loc.start.offset,
 					features
 				);
+
+				if (ctx.hasLocalVariable(propVariableName) || isDestructuredProp) {
+					yield* codes;
+				}
+				else {
+					ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
+
+					if (isTemplateRef) {
+						yield `__VLS_unref(`;
+						yield* codes;
+						yield `)`;
+					}
+					else {
+						yield `__VLS_ctx.`;
+						yield* codes;
+					}
+				}
+
 				if (enableCodeFeatures) {
 					ctx.inlayHints.push(createVBindShorthandInlayHintInfo(prop.loc, propVariableName));
 				}

diff --git a/test-workspace/tsc/passedFixtures/vue3/#4973/comp.vue b/test-workspace/tsc/passedFixtures/vue3/#4973/comp.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+defineProps<{
+	condition: 'B'
+}>();
+</script>
diff --git a/test-workspace/tsc/passedFixtures/vue3/#4973/main.vue b/test-workspace/tsc/passedFixtures/vue3/#4973/main.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Comp from './comp.vue';
+
+let condition!: 'A' | 'B';
+</script>
+
+<template>
+	<div v-if="condition === 'A'"></div>
+	<Comp v-else :condition />
+</template>