fix(language-core): validate v-model variable against model type (#5214)

Author: KazariEX

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

@@ -20,13 +20,17 @@ export function* generateElementEvents(
 	let emitVar: string | undefined;
 	let eventsVar: string | undefined;
 	let propsVar: string | undefined;
+
 	for (const prop of node.props) {
 		if (
 			prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-			&& prop.name === 'on'
-			&& prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-			&& !prop.arg.loc.source.startsWith('[')
-			&& !prop.arg.loc.source.endsWith(']')
+			&& (
+				prop.name === 'model'
+				|| prop.name === 'on'
+				&& prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+				&& !prop.arg.loc.source.startsWith('[')
+				&& !prop.arg.loc.source.endsWith(']')
+			)
 		) {
 			ctx.currentComponent!.used = true;
 			if (!emitVar) {
@@ -37,21 +41,33 @@ export function* generateElementEvents(
 				yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${endOfLine}`;
 				yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${endOfLine}`;
 			}
-			let source = prop.arg.loc.source;
-			let start = prop.arg.loc.start.offset;
-			let propPrefix = 'on';
+
+			let source = prop.arg?.loc.source ?? 'model-value';
+			let start = prop.arg?.loc.start.offset;
+			let propPrefix = 'on-';
 			let emitPrefix = '';
-			if (source.startsWith('vue:')) {
+			if (prop.name === 'model') {
+				propPrefix = 'onUpdate:';
+				emitPrefix = 'update:';
+			}
+			else if (source.startsWith('vue:')) {
 				source = source.slice('vue:'.length);
-				start = start + 'vue:'.length;
-				propPrefix = 'onVnode';
+				start = start! + 'vue:'.length;
+				propPrefix = 'onVnode-';
 				emitPrefix = 'vnode-';
 			}
-			yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${camelize(propPrefix + '-' + source)}', '${emitPrefix}${source}', '${camelize(emitPrefix + source)}'> = {${newLine}`;
-			yield* generateEventArg(ctx, source, start, propPrefix);
-			yield `: `;
-			yield* generateEventExpression(options, ctx, prop);
-			yield `}${endOfLine}`;
+
+			yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${camelize(propPrefix + source)}', '${emitPrefix + source}', '${camelize(emitPrefix + source)}'> => ({${newLine}`;
+			if (prop.name === 'on') {
+				yield* generateEventArg(ctx, source, start!, propPrefix.slice(0, -1));
+				yield `: `;
+				yield* generateEventExpression(options, ctx, prop);
+			}
+			else {
+				yield `'${camelize(propPrefix + source)}': `;
+				yield* generateModelEventExpression(options, ctx, prop);
+			}
+			yield `})${endOfLine}`;
 		}
 	}
 }
@@ -159,6 +175,29 @@ export function* generateEventExpression(
 	}
 }
 
+export function* generateModelEventExpression(
+	options: TemplateCodegenOptions,
+	ctx: TemplateCodegenContext,
+	prop: CompilerDOM.DirectiveNode
+): Generator<Code> {
+	if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+		yield `(...[$event]) => (`;
+		yield* generateInterpolation(
+			options,
+			ctx,
+			'template',
+			ctx.codeFeatures.verification,
+			prop.exp.content,
+			prop.exp.loc.start.offset,
+			prop.exp.loc
+		)
+		yield ` = $event)`;
+	}
+	else {
+		yield `() => {}`;
+	}
+}
+
 export function isCompoundExpression(ts: typeof import('typescript'), ast: ts.SourceFile) {
 	let result = true;
 	if (ast.statements.length === 0) {

test-workspace/tsc/passedFixtures/vue3/#4646/child.vue

@@ -1,13 +1,15 @@
-<template>{{ msg }}</template>
-
 <script lang="ts" setup>
+import type { PropType } from 'vue';
 import { exactType } from '../../shared';
-import {PropType} from 'vue'
 
 const msg = defineModel('msg', {
 	type: String as PropType<string | null>,
 	required: true,
-})
+});
 
-exactType(msg.value, {} as string | null)
+exactType(msg.value, {} as string | null);
 </script>
+
+<template>
+	{{ msg }}
+</template>

test-workspace/tsc/passedFixtures/vue3/#4646/child2.vue

@@ -1,5 +1,7 @@
-<template>{{ other }}</template>
-
 <script lang="ts" setup>
-const other = defineModel<string | null>('other')
+const other = defineModel<string | null>('other');
 </script>
+
+<template>
+    {{ other }}
+</template>

test-workspace/tsc/passedFixtures/vue3/#4646/parent.vue

@@ -1,15 +1,16 @@
-<template>
-  <child v-model:msg="msg" />
-  <child :msg="msg" @update:msg="v => exactType(v, {} as string|null)" />
-
-  <child2 v-model:other="other" />
-</template>
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { exactType } from '../../shared';
-import { ref } from 'vue'
-import child from './child.vue'
-import child2 from './child2.vue'
+import child from './child.vue';
+import child2 from './child2.vue';
 
-const msg = ref<string | null>('test')
-const other = ref<string | null>('test2')
+const msg = ref<string | null>('test');
+const other = ref<string | null | undefined>('test2');
 </script>
+
+<template>
+	<child v-model:msg="msg" />
+	<child :msg="msg" @update:msg="v => exactType(v, {} as string | null)" />
+
+	<child2 v-model:other="other" />
+</template>

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

@@ -11,7 +11,7 @@ export default defineComponent({
 </script>
 
 <script setup lang="ts">
-let foo!: number;
+let foo!: number | undefined;
 </script>
 
 <template>

test-workspace/tsc/passedFixtures/vue3/defineModelModifiers/main.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Comp from './comp.vue';
 
-const fooBar = 'fooBar';
+let fooBar!: string;
 </script>
 
 <template>