From ec83d68a6fe09d18e7c332ff544da749c35d43fa Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Sat, 31 Aug 2024 10:31:15 +0800 Subject: [PATCH 1/6] fix(language-core): fix circular reference for templateRef --- .../lib/codegen/script/template.ts | 18 ++++++++++++- .../lib/codegen/template/element.ts | 9 +++---- .../lib/codegen/template/index.ts | 2 +- .../vue3.5/templateRef/main.vue | 2 +- .../vue3.5/templateRef/template-ref.vue | 27 ++++++++++--------- 5 files changed, 38 insertions(+), 20 deletions(-) diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts index 7c5d85d6ec..f7d06f2626 100644 --- a/packages/language-core/lib/codegen/script/template.ts +++ b/packages/language-core/lib/codegen/script/template.ts @@ -8,6 +8,7 @@ import { generateStyleScopedClasses } from '../template/styleScopedClasses'; import type { ScriptCodegenContext } from './context'; import { codeFeatures, type ScriptCodegenOptions } from './index'; import { generateInternalComponent } from './internalComponent'; +import { ScriptSetupRanges } from '../../parsers/scriptSetupRanges'; export function* generateTemplateCtx( options: ScriptCodegenOptions, @@ -26,6 +27,9 @@ export function* generateTemplateCtx( if (options.sfc.styles.some(style => style.module)) { exps.push(`{} as __VLS_StyleModules`); } + if (options.scriptSetupRanges?.templateRefs.length) { + exps.push(getRefsType(options, options.scriptSetupRanges)); + } yield `const __VLS_ctx = `; if (exps.length === 1) { @@ -76,7 +80,7 @@ export function* generateTemplateComponents(options: ScriptCodegenOptions): Gene exps.push(`{} as NonNullable`); exps.push(`{} as __VLS_GlobalComponents`); - exps.push(`{} as typeof __VLS_ctx`); + exps.push(`{} as InstanceType<__VLS_PickNotAny {}>>`); yield `const __VLS_components = {${newLine}`; for (const type of exps) { @@ -257,3 +261,15 @@ export function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptC return usageVars; } + +function getRefsType(options: ScriptCodegenOptions, scriptSetupRanges: ScriptSetupRanges) { + let result = ''; + result += (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); + for (const { name } of scriptSetupRanges.templateRefs) { + if (name) { + result += (`${name}: typeof ${name}${newLine}`); + } + } + result += (`}>${newLine}`); + return result; +} \ No newline at end of file diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index 9670cbf4c6..5e9b2a0c61 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -229,15 +229,14 @@ export function* generateComponent( options.templateRefNames.set(refName, varName); ctx.usedComponentCtxVars.add(var_defineComponentCtx); - yield `// @ts-ignore${newLine}`; + yield `var ${varName} = {} as (Parameters[0] | null)`; if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL && node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION - && node.codegenNode.props.properties.find(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for') + && node.codegenNode.props.properties.some(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for') ) { - yield `var ${varName} = [{} as Parameters[0]]${endOfLine}`; - } else { - yield `var ${varName} = {} as Parameters[0]${endOfLine}`; + yield `[]`; } + yield `${endOfLine}`; } const usedComponentEventsVar = yield* generateElementEvents(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents); diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts index 643136d385..9e49256588 100644 --- a/packages/language-core/lib/codegen/template/index.ts +++ b/packages/language-core/lib/codegen/template/index.ts @@ -59,7 +59,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator { yield `const __VLS_refs = {${newLine}`; for (const [name, varName] of options.templateRefNames) { - yield `'${name}': ${varName}!,${newLine}`; + yield `'${name}': ${varName},${newLine}`; } yield `}${endOfLine}`; yield `declare var $refs: typeof __VLS_refs${endOfLine}`; diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue index 0eb980af65..71237e3276 100644 --- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue +++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue @@ -6,5 +6,5 @@ import { exactType } from '../../shared'; diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue index 6547d70c37..6944f17c6a 100644 --- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue +++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue @@ -1,27 +1,30 @@ From 153c9c50979deadc771a3551689d94bf4e373db2 Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Sat, 31 Aug 2024 17:51:16 +0800 Subject: [PATCH 2/6] chore: lint --- packages/language-core/lib/codegen/script/template.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts index f7d06f2626..78cc912aab 100644 --- a/packages/language-core/lib/codegen/script/template.ts +++ b/packages/language-core/lib/codegen/script/template.ts @@ -263,8 +263,7 @@ export function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptC } function getRefsType(options: ScriptCodegenOptions, scriptSetupRanges: ScriptSetupRanges) { - let result = ''; - result += (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); + let result = (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); for (const { name } of scriptSetupRanges.templateRefs) { if (name) { result += (`${name}: typeof ${name}${newLine}`); From 46988ec9c56686a94f9d8a93fb43da91a5db099f Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Sat, 31 Aug 2024 19:45:35 +0800 Subject: [PATCH 3/6] format --- .../vue3.5/templateRef/template-ref.vue | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue index 6944f17c6a..f9a9bfee32 100644 --- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue +++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue @@ -1,30 +1,30 @@ From 22c4623ec8cb07e724daedf9d44aac5dcd10b87a Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Sat, 31 Aug 2024 19:55:45 +0800 Subject: [PATCH 4/6] refactor --- .../lib/codegen/script/template.ts | 58 +++++++++++-------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts index 78cc912aab..5e6ceee6b4 100644 --- a/packages/language-core/lib/codegen/script/template.ts +++ b/packages/language-core/lib/codegen/script/template.ts @@ -8,37 +8,60 @@ import { generateStyleScopedClasses } from '../template/styleScopedClasses'; import type { ScriptCodegenContext } from './context'; import { codeFeatures, type ScriptCodegenOptions } from './index'; import { generateInternalComponent } from './internalComponent'; -import { ScriptSetupRanges } from '../../parsers/scriptSetupRanges'; export function* generateTemplateCtx( options: ScriptCodegenOptions, isClassComponent: boolean ): Generator { - const exps = []; + const baseExps = []; + const extraExps = []; + if (isClassComponent) { - exps.push(`this`); + baseExps.push(`this`); } else { - exps.push(`{} as InstanceType<__VLS_PickNotAny {}>>`); + baseExps.push(`{} as InstanceType<__VLS_PickNotAny {}>>`); } if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) { - exps.push(`globalThis`); + baseExps.push(`globalThis`); } if (options.sfc.styles.some(style => style.module)) { - exps.push(`{} as __VLS_StyleModules`); + baseExps.push(`{} as __VLS_StyleModules`); } if (options.scriptSetupRanges?.templateRefs.length) { - exps.push(getRefsType(options, options.scriptSetupRanges)); + let exp = (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); + for (const { name } of options.scriptSetupRanges.templateRefs) { + if (name) { + exp += (`${name}: typeof ${name}${newLine}`); + } + } + exp += (`}>${newLine}`); + extraExps.push(exp); } - yield `const __VLS_ctx = `; - if (exps.length === 1) { - yield exps[0]; + yield `const __VLS_ctxBase = `; + if (baseExps.length === 1) { + yield baseExps[0]; yield endOfLine; } else { yield `{${newLine}`; - for (const exp of exps) { + for (const exp of baseExps) { + yield `...`; + yield exp; + yield `,${newLine}`; + } + yield `}${endOfLine}`; + } + + yield `const __VLS_ctx = `; + if (extraExps.length === 0) { + yield `__VLS_ctxBase${endOfLine}`; + } + else { + yield `{${newLine}`; + yield `...__VLS_ctxBase,${newLine}`; + for (const exp of extraExps) { yield `...`; yield exp; yield `,${newLine}`; @@ -80,7 +103,7 @@ export function* generateTemplateComponents(options: ScriptCodegenOptions): Gene exps.push(`{} as NonNullable`); exps.push(`{} as __VLS_GlobalComponents`); - exps.push(`{} as InstanceType<__VLS_PickNotAny {}>>`); + exps.push(`__VLS_ctxBase`); yield `const __VLS_components = {${newLine}`; for (const type of exps) { @@ -261,14 +284,3 @@ export function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptC return usageVars; } - -function getRefsType(options: ScriptCodegenOptions, scriptSetupRanges: ScriptSetupRanges) { - let result = (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); - for (const { name } of scriptSetupRanges.templateRefs) { - if (name) { - result += (`${name}: typeof ${name}${newLine}`); - } - } - result += (`}>${newLine}`); - return result; -} \ No newline at end of file From e7cea68e7581657cd2bbabf285688f8e59b38d4b Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Sat, 31 Aug 2024 20:00:02 +0800 Subject: [PATCH 5/6] Update template.ts --- packages/language-core/lib/codegen/script/template.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts index 5e6ceee6b4..5fd4cdd34c 100644 --- a/packages/language-core/lib/codegen/script/template.ts +++ b/packages/language-core/lib/codegen/script/template.ts @@ -23,10 +23,10 @@ export function* generateTemplateCtx( baseExps.push(`{} as InstanceType<__VLS_PickNotAny {}>>`); } if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) { - baseExps.push(`globalThis`); + extraExps.push(`globalThis`); } if (options.sfc.styles.some(style => style.module)) { - baseExps.push(`{} as __VLS_StyleModules`); + extraExps.push(`{} as __VLS_StyleModules`); } if (options.scriptSetupRanges?.templateRefs.length) { let exp = (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); From 7228a12957fde9f332a0e7ced19c2bf82ccafd27 Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Sat, 31 Aug 2024 20:02:30 +0800 Subject: [PATCH 6/6] [skip ci] --- packages/language-core/lib/codegen/script/template.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts index 5fd4cdd34c..851a18c1b1 100644 --- a/packages/language-core/lib/codegen/script/template.ts +++ b/packages/language-core/lib/codegen/script/template.ts @@ -29,13 +29,13 @@ export function* generateTemplateCtx( extraExps.push(`{} as __VLS_StyleModules`); } if (options.scriptSetupRanges?.templateRefs.length) { - let exp = (`{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`); + let exp = `{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`; for (const { name } of options.scriptSetupRanges.templateRefs) { if (name) { - exp += (`${name}: typeof ${name}${newLine}`); + exp += `${name}: typeof ${name}${newLine}`; } } - exp += (`}>${newLine}`); + exp += `}>${newLine}`; extraExps.push(exp); }