fix: class is not assignable to generic components

close #2744

CHANGELOG.md

@@ -7,6 +7,7 @@
 - fix: error using custom directive: `Expected 2 arguments, but got 1.` ([#2730](https://github.com/johnsoncodehk/volar/issues/2730))
 - fix: namespaced tag not working without script setup
 - fix: component intellisense not working in template if TS version < 5.0 ([#2742](https://github.com/johnsoncodehk/volar/issues/2742))
+- fix: class is not assignable to generic components ([#2744](https://github.com/johnsoncodehk/volar/issues/2744))
 
 ## 1.6.0 (2023/4/27)
 

packages/vue-language-core/src/generators/script.ts

@@ -315,7 +315,12 @@ export function generate(
 			}
 			codes.push(`>`);
 			codes.push('(\n');
-			codes.push(`__VLS_props: typeof __VLS_setup['props'] & import('vue').VNodeProps,\n`);
+			codes.push(
+				`__VLS_props: typeof __VLS_setup['props']`,
+				`& import('${vueLibName}').VNodeProps`,
+				`& import('${vueLibName}').AllowedComponentProps`,
+				`& import('${vueLibName}').ComponentCustomProps,\n`,
+			);
 			codes.push(`__VLS_ctx?: Pick<typeof __VLS_setup, 'attrs' | 'emit' | 'slots'>,\n`);
 			codes.push('__VLS_setup = (() => {\n');
 			scriptSetupGeneratedOffset = generateSetupFunction(true, 'none', definePropMirrors);
@@ -415,7 +420,7 @@ export function generate(
 				codes.push(';\n');
 			}
 			else if (scriptSetupRanges.emitsRuntimeArg) {
-				codes.push(`(await import('vue')).defineEmits(`);
+				codes.push(`defineEmits(`);
 				addExtraReferenceVirtualCode('scriptSetup', scriptSetupRanges.emitsRuntimeArg.start, scriptSetupRanges.emitsRuntimeArg.end);
 				codes.push(');\n');
 			}
@@ -432,7 +437,7 @@ export function generate(
 			codes.push('emit: typeof __VLS_emit');
 			codes.push('};\n');
 			codes.push('})(),\n');
-			codes.push(') => ({} as import("vue").VNode & { __ctx?: typeof __VLS_setup }))');
+			codes.push(`) => ({} as import('${vueLibName}').VNode & { __ctx?: typeof __VLS_setup }))`);
 		}
 		else if (!sfc.script) {
 			// no script block, generate script setup code at root
@@ -479,20 +484,20 @@ export function generate(
 		const definePropProposalB = sfc.scriptSetup.content.trimStart().startsWith('// @experimentalDefinePropProposal=johnsonEdition') || vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition';
 
 		if (vueCompilerOptions.target >= 3.3) {
-			codes.push(`const { defineProps, defineEmits, defineExpose, defineOptions, defineSlots, defineModel, withDefaults } = await import('vue');\n`);
+			codes.push(`const { defineProps, defineEmits, defineExpose, defineOptions, defineSlots, defineModel, withDefaults } = await import('${vueLibName}');\n`);
 		}
 		if (definePropProposalA) {
 			codes.push(`
-declare function defineProp<T>(name: string, options: { required: true } & Record<string, unknown>): import('vue').ComputedRef<T>;
-declare function defineProp<T>(name: string, options: { default: any } & Record<string, unknown>): import('vue').ComputedRef<T>;
-declare function defineProp<T>(name?: string, options?: any): import('vue').ComputedRef<T | undefined>;
+declare function defineProp<T>(name: string, options: { required: true } & Record<string, unknown>): import('${vueLibName}').ComputedRef<T>;
+declare function defineProp<T>(name: string, options: { default: any } & Record<string, unknown>): import('${vueLibName}').ComputedRef<T>;
+declare function defineProp<T>(name?: string, options?: any): import('${vueLibName}').ComputedRef<T | undefined>;
 `.trim() + '\n');
 		}
 		if (definePropProposalB) {
 			codes.push(`
-declare function defineProp<T>(value: T | (() => T), required?: boolean, rest?: any): import('vue').ComputedRef<T>;
-declare function defineProp<T>(value: T | (() => T) | undefined, required: true, rest?: any): import('vue').ComputedRef<T>;
-declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?: any): import('vue').ComputedRef<T | undefined>;
+declare function defineProp<T>(value: T | (() => T), required?: boolean, rest?: any): import('${vueLibName}').ComputedRef<T>;
+declare function defineProp<T>(value: T | (() => T) | undefined, required: true, rest?: any): import('${vueLibName}').ComputedRef<T>;
+declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?: any): import('${vueLibName}').ComputedRef<T | undefined>;
 `.trim() + '\n');
 		}
 
@@ -547,10 +552,10 @@ declare function defineProp<T>(value?: T | (() => T), required?: boolean, rest?:
 				}
 
 				if (defineProp.required) {
-					codes.push(`{ required: true, type: import('vue').PropType<${type}> },\n`);
+					codes.push(`{ required: true, type: import('${vueLibName}').PropType<${type}> },\n`);
 				}
 				else {
-					codes.push(`import('vue').PropType<${type}>,\n`);
+					codes.push(`import('${vueLibName}').PropType<${type}>,\n`);
 				}
 			}
 			codes.push(`},\n`);

packages/vue-test-workspace/vue-tsc/#2744/comp.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts" generic="T extends string">
+defineProps<{
+	foo?: T;
+}>();
+</script>

packages/vue-test-workspace/vue-tsc/#2744/main.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import WelcomeItem from './comp.vue'
+</script>
+
+<template>
+  <WelcomeItem class="row"></WelcomeItem>
+</template>

packages/vue-test-workspace/vue-tsc/components/main.vue

@@ -64,7 +64,7 @@ const ScriptSetupDefaultPropsExact = defineComponent({
 });
 // vue 3.3 generic
 declare const ScriptSetupGenericExact: <T, >(
-	_props: import('vue').VNodeProps & NonNullable<typeof _setup>['props'],
+	_props: NonNullable<typeof _setup>['props'] & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
 	_ctx?: Pick<NonNullable<typeof _setup>, 'attrs' | 'emit' | 'slots'>,
 	_setup?: {
 		props: { foo: T } & { [K in keyof JSX.ElementChildrenAttribute]?: { default(data: T): any } },

packages/vue-test-workspace/vue-tsc/defineProp_B/main.vue

@@ -19,7 +19,7 @@ const ScriptSetupExact = defineComponent({
 	},
 });
 declare const ScriptSetupGenericExact: <T, >(
-	_props: import('vue').VNodeProps & NonNullable<typeof _setup>['props'],
+	_props: NonNullable<typeof _setup>['props'] & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
 	_ctx?: Pick<NonNullable<typeof _setup>, 'attrs' | 'emit' | 'slots'>,
 	_setup?: {
 		props: {