fix(language-core): generate condition guards for model events (#5225)

Author: KazariEX

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

@@ -242,6 +242,11 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 yield endOfLine;
 }
 },
+generateConditionGuards: function* () {
+for (const condition of blockConditions) {
+yield `if (!${condition}) return${endOfLine}`;
+}
+},
 ignoreError: function* (): Generator<Code> {
 if (!ignoredError) {
 ignoredError = true;

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

@@ -109,12 +109,9 @@ export function* generateEventExpression(
 if (_isCompoundExpression) {
 yield `(...[$event]) => {${newLine}`;
 ctx.addLocalVariable('$event');
-
+yield* ctx.generateConditionGuards();
 prefix = ``;
 suffix = ``;
-for (const blockCondition of ctx.blockConditions) {
-prefix += `if (!${blockCondition}) return${endOfLine}`;
-}
 }
 
 yield* generateInterpolation(

test-workspace/tsc/passedFixtures/vue2/tsconfig.json

@@ -29,6 +29,7 @@
 "../vue3/#4822",
 "../vue3/#4826",
 "../vue3/#4828",
+"../vue3/#5225",
 "../vue3/attrs",
 "../vue3/components",
 "../vue3/defineEmits",

test-workspace/tsc/passedFixtures/vue3/#5225/comp.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts">
+defineModel<number>({ required: true });
+</script>

test-workspace/tsc/passedFixtures/vue3/#5225/main.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import Comp from './comp.vue';
+
+let foo!: {
+ bar?: number;
+};
+</script>
+
+<template>
+ <!-- @vue-expect-error -->
+ <Comp v-model="foo.bar" />
+ <Comp v-if="foo.bar" v-model="foo.bar" />
+</template>