fix(language-core): defineModel for generic component types (#5748)

Author: serkodev

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

@@ -32,7 +32,7 @@ export function generateGlobalTypes(options: VueCompilerOptions) {
 			? `import('${lib}/jsx-runtime').JSX.IntrinsicElements`
 			: `globalThis.JSX.IntrinsicElements`
 	};
-
+	var __VLS_CheckUnknownProps: ${checkUnknownProps ? '{}' : 'Record<string, unknown>'};
 	type __VLS_Elements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>;
 	type __VLS_GlobalComponents = ${
 		target >= 3.5

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

@@ -97,7 +97,8 @@ export function* generateScriptSetup(
 						+ ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
 						+ ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
 					: `globalThis.JSX.IntrinsicAttributes`
-			}${endOfLine}`
+			}${newLine}`
+			+ ` & (typeof globalThis extends { __VLS_CheckUnknownProps: infer P } ? P : {})${endOfLine}`
 			+ `	expose: (exposed: ${
 				scriptSetupRanges.defineExpose
 					? `import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<typeof __VLS_exposed>`

packages/tsc/tests/__snapshots__/dts.spec.ts.snap

@@ -63,7 +63,9 @@ exports[`vue-tsc-dts > Input: generic/component.vue, Output: generic/component.v
     }) & {
         "onUpdate:title"?: (value: string) => any;
         onBar?: (data: number) => any;
-    }> & import("vue").PublicProps;
+    }> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_CheckUnknownProps: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         baz: number;
     }>) => void;
@@ -94,7 +96,9 @@ exports[`vue-tsc-dts > Input: generic/custom-extension-component.cext, Output: g
     }) & {
         "onUpdate:title"?: (value: string) => any;
         onBar?: (data: number) => any;
-    }> & import("vue").PublicProps;
+    }> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_CheckUnknownProps: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         baz: number;
     }>) => void;

test-workspace/tsc/passedFixtures/vue3.4/components/main.vue

@@ -64,7 +64,7 @@ declare const ScriptSetupGenericExact: <T, >(
 		props: {
 			onBar?: ((data: T) => any) | undefined;
 			foo: T;
-		} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+		} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Record<string, unknown>,
 		attrs: any,
 		slots: { default?: (props: T) => any; },
 		emit: { (e: 'bar', data: T): void; },

test-workspace/tsc/passedFixtures/vue3/#4972/GenericComp.vue

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

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

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import GenericComp from './GenericComp.vue';
+const n = ref(0)
+</script>
+
+<template>
+	<GenericComp v-model="n" />
+	<!-- @vue-expect-error -->
+	<GenericComp />
+	<!-- @vue-expect-error -->
+	<GenericComp whatever="''" />"
+</template>

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

@@ -59,7 +59,7 @@ declare const ScriptSetupGenericExact: <T, >(
 		props: {
 			onBar?: ((data: T) => any) | undefined;
 			foo: T;
-		} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+		} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Record<string, unknown>,
 		attrs: any,
 		slots: { default?: (props: T) => any; },
 		emit: { (e: 'bar', data: T): void; },