From 175e95a1727c77bbecab823207b548208d52ed96 Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Fri, 28 Apr 2023 01:26:42 +0800 Subject: [PATCH] fix: class is not assignable to generic components close #2744 --- CHANGELOG.md | 1 + .../src/generators/script.ts | 29 +++++++++++-------- .../vue-test-workspace/vue-tsc/#2744/comp.vue | 5 ++++ .../vue-test-workspace/vue-tsc/#2744/main.vue | 7 +++++ .../vue-tsc/components/main.vue | 2 +- .../vue-tsc/defineProp_B/main.vue | 2 +- 6 files changed, 32 insertions(+), 14 deletions(-) create mode 100644 packages/vue-test-workspace/vue-tsc/#2744/comp.vue create mode 100644 packages/vue-test-workspace/vue-tsc/#2744/main.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 95a5a5639..67bc135f3 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/packages/vue-language-core/src/generators/script.ts b/packages/vue-language-core/src/generators/script.ts index 9188fe389..ce2220d54 100644 --- a/packages/vue-language-core/src/generators/script.ts +++ b/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,\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(name: string, options: { required: true } & Record): import('vue').ComputedRef; -declare function defineProp(name: string, options: { default: any } & Record): import('vue').ComputedRef; -declare function defineProp(name?: string, options?: any): import('vue').ComputedRef; +declare function defineProp(name: string, options: { required: true } & Record): import('${vueLibName}').ComputedRef; +declare function defineProp(name: string, options: { default: any } & Record): import('${vueLibName}').ComputedRef; +declare function defineProp(name?: string, options?: any): import('${vueLibName}').ComputedRef; `.trim() + '\n'); } if (definePropProposalB) { codes.push(` -declare function defineProp(value: T | (() => T), required?: boolean, rest?: any): import('vue').ComputedRef; -declare function defineProp(value: T | (() => T) | undefined, required: true, rest?: any): import('vue').ComputedRef; -declare function defineProp(value?: T | (() => T), required?: boolean, rest?: any): import('vue').ComputedRef; +declare function defineProp(value: T | (() => T), required?: boolean, rest?: any): import('${vueLibName}').ComputedRef; +declare function defineProp(value: T | (() => T) | undefined, required: true, rest?: any): import('${vueLibName}').ComputedRef; +declare function defineProp(value?: T | (() => T), required?: boolean, rest?: any): import('${vueLibName}').ComputedRef; `.trim() + '\n'); } @@ -547,10 +552,10 @@ declare function defineProp(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`); diff --git a/packages/vue-test-workspace/vue-tsc/#2744/comp.vue b/packages/vue-test-workspace/vue-tsc/#2744/comp.vue new file mode 100644 index 000000000..e3d5d32c8 --- /dev/null +++ b/packages/vue-test-workspace/vue-tsc/#2744/comp.vue @@ -0,0 +1,5 @@ + diff --git a/packages/vue-test-workspace/vue-tsc/#2744/main.vue b/packages/vue-test-workspace/vue-tsc/#2744/main.vue new file mode 100644 index 000000000..01ad0ceb2 --- /dev/null +++ b/packages/vue-test-workspace/vue-tsc/#2744/main.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/vue-test-workspace/vue-tsc/components/main.vue b/packages/vue-test-workspace/vue-tsc/components/main.vue index 8ac609500..2dc1c376e 100644 --- a/packages/vue-test-workspace/vue-tsc/components/main.vue +++ b/packages/vue-test-workspace/vue-tsc/components/main.vue @@ -64,7 +64,7 @@ const ScriptSetupDefaultPropsExact = defineComponent({ }); // vue 3.3 generic declare const ScriptSetupGenericExact: ( - _props: import('vue').VNodeProps & NonNullable['props'], + _props: NonNullable['props'] & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, _ctx?: Pick, 'attrs' | 'emit' | 'slots'>, _setup?: { props: { foo: T } & { [K in keyof JSX.ElementChildrenAttribute]?: { default(data: T): any } }, diff --git a/packages/vue-test-workspace/vue-tsc/defineProp_B/main.vue b/packages/vue-test-workspace/vue-tsc/defineProp_B/main.vue index 09729bc47..7acb42c8c 100644 --- a/packages/vue-test-workspace/vue-tsc/defineProp_B/main.vue +++ b/packages/vue-test-workspace/vue-tsc/defineProp_B/main.vue @@ -19,7 +19,7 @@ const ScriptSetupExact = defineComponent({ }, }); declare const ScriptSetupGenericExact: ( - _props: import('vue').VNodeProps & NonNullable['props'], + _props: NonNullable['props'] & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, _ctx?: Pick, 'attrs' | 'emit' | 'slots'>, _setup?: { props: {