From 4101231037b09e328bc5cb33982dd7c18d3002e0 Mon Sep 17 00:00:00 2001 From: KazariEX <1364035137@qq.com> Date: Wed, 7 Aug 2024 20:40:16 +0800 Subject: [PATCH 1/8] feat: pure virtual code support within interpolation --- .../lib/codegen/template/interpolation.ts | 56 ++++++++++++------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/packages/language-core/lib/codegen/template/interpolation.ts b/packages/language-core/lib/codegen/template/interpolation.ts index 3e2760f576..3e23eebe64 100644 --- a/packages/language-core/lib/codegen/template/interpolation.ts +++ b/packages/language-core/lib/codegen/template/interpolation.ts @@ -14,15 +14,11 @@ export function* generateInterpolation( start: number | undefined, data: VueCodeInformation | (() => VueCodeInformation) | undefined, prefix: string, - suffix: string + suffix: string, + inlayHints: [Code, number][] = [] ): Generator { const code = prefix + _code + suffix; const ast = createTsAst(options.ts, astHolder, code); - const vars: { - text: string, - isShorthand: boolean, - offset: number, - }[] = []; for (let [section, offset, onlyError] of forEachInterpolationSegment( options.ts, ctx, @@ -47,14 +43,41 @@ export function* generateInterpolation( offset = 0; } if (start !== undefined && data !== undefined) { - yield [ - section, - 'template', - start + offset, - onlyError - ? ctx.codeFeatures.verification - : typeof data === 'function' ? data() : data, - ]; + const startOffset = start + offset; + const endOffset = startOffset + section.length; + + const filtered = inlayHints.filter( + ([, pos]) => pos > startOffset && pos <= endOffset + ); + + if (filtered.length) { + yield generateSection(section, startOffset, startOffset, filtered[0][1]); + while (filtered.length) { + const [inlayHint, pos] = filtered.shift()!; + yield inlayHint; + if (filtered.length) { + const nextStart = filtered[0][1]; + yield generateSection(section, startOffset, pos, nextStart); + } + else { + yield generateSection(section, startOffset, pos, endOffset); + } + } + } + else { + yield generateSection(section, startOffset, startOffset, endOffset); + } + + function generateSection(text: string, startOffset: number, from: number, to: number) { + return [ + text.slice(from - startOffset, to - startOffset), + 'template', + from, + onlyError + ? ctx.codeFeatures.verification + : typeof data === 'function' ? data() : data, + ] as Code; + } } else { yield section; @@ -62,11 +85,6 @@ export function* generateInterpolation( yield addSuffix; } } - if (start !== undefined) { - for (const v of vars) { - v.offset = start + v.offset - prefix.length; - } - } } export function* forEachInterpolationSegment( From 05f4d58bfeff5d87cbef603cc1605fbb1ffaaf7b Mon Sep 17 00:00:00 2001 From: KazariEX <1364035137@qq.com> Date: Wed, 7 Aug 2024 20:40:34 +0800 Subject: [PATCH 2/8] fix: inlay hints for `` and `` Co-authored-by: so1ve --- .../lib/codegen/template/element.ts | 30 +++++++++++++------ .../lib/codegen/template/elementProps.ts | 18 ++--------- .../lib/codegen/template/slotOutlet.ts | 8 ++++- .../lib/codegen/template/vBindShorthand.ts | 21 +++++++++++++ packages/language-service/tests/inlayHint.ts | 4 +-- .../tests/utils/createTester.ts | 1 + .../inlay-hint/v-bind-shorthand/entry.vue | 16 ++++++++++ 7 files changed, 70 insertions(+), 28 deletions(-) create mode 100644 packages/language-core/lib/codegen/template/vBindShorthand.ts create mode 100644 test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index e7e7e5e450..a387330810 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -14,6 +14,7 @@ import { generateInterpolation } from './interpolation'; import { generatePropertyAccess } from './propertyAccess'; import { generateTemplateChild } from './templateChild'; import { generateObjectProperty } from './objectProperty'; +import { generateVBindShorthandInlayHint } from './vBindShorthand'; const colonReg = /:/g; @@ -46,18 +47,25 @@ export function* generateComponent( let props = node.props; let dynamicTagInfo: { - exp: string; + exp: CompilerDOM.ElementNode | CompilerDOM.ExpressionNode; + tag: string; offset: number; - astHolder: any; + isComponentIsShorthand?: boolean; } | undefined; if (isComponentTag) { for (const prop of node.props) { - if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.arg?.loc.source === 'is' && prop.exp) { + if ( + prop.type === CompilerDOM.NodeTypes.DIRECTIVE + && prop.name === 'bind' + && prop.arg?.loc.source === 'is' + && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION + ) { dynamicTagInfo = { - exp: prop.exp.loc.source, + exp: prop.exp, + tag: prop.exp.content, offset: prop.exp.loc.start.offset, - astHolder: prop.exp.loc, + isComponentIsShorthand: prop.arg.loc.end.offset === prop.exp.loc.end.offset }; props = props.filter(p => p !== prop); break; @@ -67,8 +75,8 @@ export function* generateComponent( else if (node.tag.includes('.')) { // namespace tag dynamicTagInfo = { - exp: node.tag, - astHolder: node.loc, + exp: node, + tag: node.tag, offset: startTagOffset, }; } @@ -108,12 +116,16 @@ export function* generateComponent( yield* generateInterpolation( options, ctx, + dynamicTagInfo.tag, dynamicTagInfo.exp, - dynamicTagInfo.astHolder, dynamicTagInfo.offset, ctx.codeFeatures.all, '(', - ')' + ')', + dynamicTagInfo.isComponentIsShorthand ? [[ + generateVBindShorthandInlayHint(dynamicTagInfo.exp.loc, 'is'), + dynamicTagInfo.exp.loc.end.offset + ]] : undefined ); yield endOfLine; } diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts index 7bbb49dbcc..8cb220941f 100644 --- a/packages/language-core/lib/codegen/template/elementProps.ts +++ b/packages/language-core/lib/codegen/template/elementProps.ts @@ -11,6 +11,7 @@ import { generateEventArg, generateEventExpression } from './elementEvents'; import type { TemplateCodegenOptions } from './index'; import { generateInterpolation } from './interpolation'; import { generateObjectProperty } from './objectProperty'; +import { generateVBindShorthandInlayHint } from './vBindShorthand'; export function* generateElementProps( options: TemplateCodegenOptions, @@ -297,22 +298,7 @@ function* genereatePropExp( features ); if (inlayHints) { - yield [ - '', - 'template', - exp.loc.end.offset, - { - __hint: { - setting: 'vue.inlayHints.vBindShorthand', - label: `="${propVariableName}"`, - tooltip: [ - `This is a shorthand for \`${exp.loc.source}="${propVariableName}"\`.`, - 'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.', - '[More info](https://github.com/vuejs/core/pull/9451)', - ].join('\n\n'), - }, - } as VueCodeInformation, - ]; + yield generateVBindShorthandInlayHint(exp.loc, propVariableName); } } } diff --git a/packages/language-core/lib/codegen/template/slotOutlet.ts b/packages/language-core/lib/codegen/template/slotOutlet.ts index c42a086074..42a1c5e159 100644 --- a/packages/language-core/lib/codegen/template/slotOutlet.ts +++ b/packages/language-core/lib/codegen/template/slotOutlet.ts @@ -6,6 +6,7 @@ import { generateElementChildren } from './elementChildren'; import { generateElementProps } from './elementProps'; import type { TemplateCodegenOptions } from './index'; import { generateInterpolation } from './interpolation'; +import { generateVBindShorthandInlayHint } from './vBindShorthand'; export function* generateSlotOutlet( options: TemplateCodegenOptions, @@ -80,6 +81,7 @@ export function* generateSlotOutlet( nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION ) { + const isShortHand = nameProp.arg?.loc.start.offset === nameProp.exp.loc.start.offset; const slotExpVar = ctx.getInternalVariable(); yield `var ${slotExpVar} = `; yield* generateInterpolation( @@ -90,7 +92,11 @@ export function* generateSlotOutlet( nameProp.exp.loc.start.offset, ctx.codeFeatures.all, '(', - ')' + ')', + isShortHand ? [[ + generateVBindShorthandInlayHint(nameProp.exp.loc, 'name'), + nameProp.exp.loc.end.offset + ]] : undefined ); yield ` as const${endOfLine}`; ctx.dynamicSlots.push({ diff --git a/packages/language-core/lib/codegen/template/vBindShorthand.ts b/packages/language-core/lib/codegen/template/vBindShorthand.ts new file mode 100644 index 0000000000..04e5dda0b1 --- /dev/null +++ b/packages/language-core/lib/codegen/template/vBindShorthand.ts @@ -0,0 +1,21 @@ +import type * as CompilerDOM from '@vue/compiler-dom'; +import type { Code } from "../../types"; + +export function generateVBindShorthandInlayHint(loc: CompilerDOM.SourceLocation, variableName: string): Code { + return [ + '', + 'template', + loc.end.offset, + { + __hint: { + setting: 'vue.inlayHints.vBindShorthand', + label: `="${variableName}"`, + tooltip: [ + `This is a shorthand for \`${loc.source}="${variableName}"\`.`, + 'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.', + '[More info](https://github.com/vuejs/core/pull/9451)', + ].join('\n\n'), + }, + }, + ]; +}; \ No newline at end of file diff --git a/packages/language-service/tests/inlayHint.ts b/packages/language-service/tests/inlayHint.ts index f95e8b3470..29e189ed4e 100644 --- a/packages/language-service/tests/inlayHint.ts +++ b/packages/language-service/tests/inlayHint.ts @@ -63,14 +63,14 @@ function readFiles(dir: string) { return filesText; } -const inlayHintReg = /(\^*)inlayHint:\s*"(.+)"/g; +const inlayHintReg = /(\^*)inlayHint:\s*(['"])(.+)\2/g; function findActions(text: string) { return [...text.matchAll(inlayHintReg)].map(flag => { const offset = flag.index!; - const label = flag[2]; + const label = flag[3]; return { offset, diff --git a/packages/language-service/tests/utils/createTester.ts b/packages/language-service/tests/utils/createTester.ts index 10f6c7d77d..9d20090feb 100644 --- a/packages/language-service/tests/utils/createTester.ts +++ b/packages/language-service/tests/utils/createTester.ts @@ -42,6 +42,7 @@ function createTester(rootUri: URI) { 'vue.inlayHints.missingProps': true, 'vue.inlayHints.optionsWrapper': true, 'vue.inlayHints.inlineHandlerLeading': true, + 'vue.inlayHints.vBindShorthand': true, }; let currentVSCodeSettings: any; const language = createLanguage( diff --git a/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue b/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue new file mode 100644 index 0000000000..03778852f2 --- /dev/null +++ b/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue @@ -0,0 +1,16 @@ + + + \ No newline at end of file From a279ac0081dadba7db3e5b5e671cf2f4ffab51b5 Mon Sep 17 00:00:00 2001 From: KazariEX <1364035137@qq.com> Date: Wed, 7 Aug 2024 20:52:37 +0800 Subject: [PATCH 3/8] chore: merge --- packages/language-core/lib/codegen/template/element.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index 7683cf473b..76e7a2466c 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -49,7 +49,7 @@ export function* generateComponent( let dynamicTagInfo: { exp: CompilerDOM.ElementNode | CompilerDOM.ExpressionNode; tag: string; - offset: number; + offsets: [number, number | undefined]; isComponentIsShorthand?: boolean; } | undefined; @@ -64,7 +64,7 @@ export function* generateComponent( dynamicTagInfo = { exp: prop.exp, tag: prop.exp.content, - offset: prop.exp.loc.start.offset, + offsets: [prop.exp.loc.start.offset, undefined], isComponentIsShorthand: prop.arg.loc.end.offset === prop.exp.loc.end.offset }; props = props.filter(p => p !== prop); @@ -77,7 +77,7 @@ export function* generateComponent( dynamicTagInfo = { exp: node, tag: node.tag, - offset: startTagOffset, + offsets: [startTagOffset, endTagOffset], }; } @@ -118,7 +118,7 @@ export function* generateComponent( ctx, dynamicTagInfo.tag, dynamicTagInfo.exp, - dynamicTagInfo.offset, + dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', ')', @@ -132,8 +132,8 @@ export function* generateComponent( yield* generateInterpolation( options, ctx, + dynamicTagInfo.tag, dynamicTagInfo.exp, - dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], { ...ctx.codeFeatures.all, From 3e7dc6e4673802c7263063dcb63668b082cb150a Mon Sep 17 00:00:00 2001 From: KazariEX <1364035137@qq.com> Date: Sun, 11 Aug 2024 18:29:04 +0800 Subject: [PATCH 4/8] refactor: use `ctx.inlayHints` --- .../lib/codegen/template/element.ts | 9 +++--- .../lib/codegen/template/elementProps.ts | 12 +------ .../lib/codegen/template/interpolation.ts | 3 +- .../lib/codegen/template/slotOutlet.ts | 9 +++--- .../lib/codegen/template/vBindShorthand.ts | 31 ++++++++----------- 5 files changed, 23 insertions(+), 41 deletions(-) diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index 51ee7cc240..3afe1a8aa9 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -112,6 +112,9 @@ export function* generateComponent( yield `]${endOfLine}`; } else if (dynamicTagInfo) { + if (dynamicTagInfo.isComponentIsShorthand) { + ctx.inlayHints.push(generateVBindShorthandInlayHint(dynamicTagInfo.exp.loc, 'is')); + } yield `const ${var_originalComponent} = (`; yield* generateInterpolation( options, @@ -121,11 +124,7 @@ export function* generateComponent( dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', - ')', - dynamicTagInfo.isComponentIsShorthand ? [[ - generateVBindShorthandInlayHint(dynamicTagInfo.exp.loc, 'is'), - dynamicTagInfo.exp.loc.end.offset - ]] : undefined + ')' ); if (dynamicTagInfo.offsets[1] !== undefined) { yield `,`; diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts index a06bf9e546..dc201d40ef 100644 --- a/packages/language-core/lib/codegen/template/elementProps.ts +++ b/packages/language-core/lib/codegen/template/elementProps.ts @@ -298,17 +298,7 @@ function* genereatePropExp( features ); if (enableCodeFeatures) { - ctx.inlayHints.push({ - blockName: 'template', - offset: exp.loc.end.offset, - setting: 'vue.inlayHints.vBindShorthand', - label: `="${propVariableName}"`, - tooltip: [ - `This is a shorthand for \`${exp.loc.source}="${propVariableName}"\`.`, - 'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.', - '[More info](https://github.com/vuejs/core/pull/9451)', - ].join('\n\n'), - }); + ctx.inlayHints.push(generateVBindShorthandInlayHint(exp.loc, propVariableName)); } } } diff --git a/packages/language-core/lib/codegen/template/interpolation.ts b/packages/language-core/lib/codegen/template/interpolation.ts index 9f149973cb..fc19e5cde8 100644 --- a/packages/language-core/lib/codegen/template/interpolation.ts +++ b/packages/language-core/lib/codegen/template/interpolation.ts @@ -14,8 +14,7 @@ export function* generateInterpolation( start: number | undefined, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, prefix: string, - suffix: string, - inlayHints: [Code, number][] = [] + suffix: string ): Generator { const code = prefix + _code + suffix; const ast = createTsAst(options.ts, astHolder, code); diff --git a/packages/language-core/lib/codegen/template/slotOutlet.ts b/packages/language-core/lib/codegen/template/slotOutlet.ts index 42a1c5e159..3f5fe7bb08 100644 --- a/packages/language-core/lib/codegen/template/slotOutlet.ts +++ b/packages/language-core/lib/codegen/template/slotOutlet.ts @@ -82,6 +82,9 @@ export function* generateSlotOutlet( && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION ) { const isShortHand = nameProp.arg?.loc.start.offset === nameProp.exp.loc.start.offset; + if (isShortHand) { + ctx.inlayHints.push(generateVBindShorthandInlayHint(nameProp.exp.loc, 'name')); + } const slotExpVar = ctx.getInternalVariable(); yield `var ${slotExpVar} = `; yield* generateInterpolation( @@ -92,11 +95,7 @@ export function* generateSlotOutlet( nameProp.exp.loc.start.offset, ctx.codeFeatures.all, '(', - ')', - isShortHand ? [[ - generateVBindShorthandInlayHint(nameProp.exp.loc, 'name'), - nameProp.exp.loc.end.offset - ]] : undefined + ')' ); yield ` as const${endOfLine}`; ctx.dynamicSlots.push({ diff --git a/packages/language-core/lib/codegen/template/vBindShorthand.ts b/packages/language-core/lib/codegen/template/vBindShorthand.ts index 04e5dda0b1..4ec23cefe4 100644 --- a/packages/language-core/lib/codegen/template/vBindShorthand.ts +++ b/packages/language-core/lib/codegen/template/vBindShorthand.ts @@ -1,21 +1,16 @@ import type * as CompilerDOM from '@vue/compiler-dom'; -import type { Code } from "../../types"; +import type { InlayHintInfo } from "../types"; -export function generateVBindShorthandInlayHint(loc: CompilerDOM.SourceLocation, variableName: string): Code { - return [ - '', - 'template', - loc.end.offset, - { - __hint: { - setting: 'vue.inlayHints.vBindShorthand', - label: `="${variableName}"`, - tooltip: [ - `This is a shorthand for \`${loc.source}="${variableName}"\`.`, - 'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.', - '[More info](https://github.com/vuejs/core/pull/9451)', - ].join('\n\n'), - }, - }, - ]; +export function generateVBindShorthandInlayHint(loc: CompilerDOM.SourceLocation, variableName: string): InlayHintInfo { + return { + blockName: 'template', + offset: loc.end.offset, + setting: 'vue.inlayHints.vBindShorthand', + label: `="${variableName}"`, + tooltip: [ + `This is a shorthand for \`${loc.source}="${variableName}"\`.`, + 'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.', + '[More info](https://github.com/vuejs/core/pull/9451)', + ].join('\n\n'), + }; }; \ No newline at end of file From 96d34ee06f9d0b50ac1e02ef09ce81f568385d41 Mon Sep 17 00:00:00 2001 From: KazariEX <1364035137@qq.com> Date: Mon, 26 Aug 2024 11:58:34 +0800 Subject: [PATCH 5/8] test: remove outdated case --- .../inlay-hint/v-bind-shorthand/entry.vue | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue diff --git a/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue b/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue deleted file mode 100644 index 03778852f2..0000000000 --- a/test-workspace/language-service/inlay-hint/v-bind-shorthand/entry.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - \ No newline at end of file From 1e84ae7125236d81f9469d7622b78d4378b5fbfc Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Wed, 23 Oct 2024 06:02:18 +0800 Subject: [PATCH 6/8] combine vBindShorthand.ts and types.ts --- .../{template/vBindShorthand.ts => inlayHints.ts} | 15 ++++++++++++--- .../language-core/lib/codegen/script/context.ts | 2 +- .../language-core/lib/codegen/template/context.ts | 2 +- .../language-core/lib/codegen/template/element.ts | 4 ++-- .../lib/codegen/template/elementProps.ts | 4 ++-- .../lib/codegen/template/slotOutlet.ts | 4 ++-- packages/language-core/lib/codegen/types.ts | 9 --------- 7 files changed, 20 insertions(+), 20 deletions(-) rename packages/language-core/lib/codegen/{template/vBindShorthand.ts => inlayHints.ts} (59%) delete mode 100644 packages/language-core/lib/codegen/types.ts diff --git a/packages/language-core/lib/codegen/template/vBindShorthand.ts b/packages/language-core/lib/codegen/inlayHints.ts similarity index 59% rename from packages/language-core/lib/codegen/template/vBindShorthand.ts rename to packages/language-core/lib/codegen/inlayHints.ts index 4ec23cefe4..10b0946753 100644 --- a/packages/language-core/lib/codegen/template/vBindShorthand.ts +++ b/packages/language-core/lib/codegen/inlayHints.ts @@ -1,7 +1,16 @@ import type * as CompilerDOM from '@vue/compiler-dom'; -import type { InlayHintInfo } from "../types"; -export function generateVBindShorthandInlayHint(loc: CompilerDOM.SourceLocation, variableName: string): InlayHintInfo { +export interface InlayHintInfo { + blockName: string; + offset: number; + setting: string; + label: string; + tooltip?: string; + paddingRight?: boolean; + paddingLeft?: boolean; +} + +export function createVBindShorthandInlayHintInfo(loc: CompilerDOM.SourceLocation, variableName: string): InlayHintInfo { return { blockName: 'template', offset: loc.end.offset, @@ -13,4 +22,4 @@ export function generateVBindShorthandInlayHint(loc: CompilerDOM.SourceLocation, '[More info](https://github.com/vuejs/core/pull/9451)', ].join('\n\n'), }; -}; \ No newline at end of file +} diff --git a/packages/language-core/lib/codegen/script/context.ts b/packages/language-core/lib/codegen/script/context.ts index 60d30f82ce..a67d018de2 100644 --- a/packages/language-core/lib/codegen/script/context.ts +++ b/packages/language-core/lib/codegen/script/context.ts @@ -1,4 +1,4 @@ -import { InlayHintInfo } from '../types'; +import { InlayHintInfo } from '../inlayHints'; import { getLocalTypesGenerator } from '../localTypes'; import type { ScriptCodegenOptions } from './index'; diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts index b4da54a6e8..c5abab54e1 100644 --- a/packages/language-core/lib/codegen/template/context.ts +++ b/packages/language-core/lib/codegen/template/context.ts @@ -2,7 +2,7 @@ import type * as CompilerDOM from '@vue/compiler-dom'; import type { Code, VueCodeInformation } from '../../types'; import { endOfLine, newLine, wrapWith } from '../common'; import type { TemplateCodegenOptions } from './index'; -import { InlayHintInfo } from '../types'; +import { InlayHintInfo } from '../inlayHints'; const _codeFeatures = { all: { diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index 387e3d242a..0af3253cee 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -15,7 +15,7 @@ import { generateInterpolation } from './interpolation'; import { generatePropertyAccess } from './propertyAccess'; import { generateTemplateChild } from './templateChild'; import { generateObjectProperty } from './objectProperty'; -import { generateVBindShorthandInlayHint } from './vBindShorthand'; +import { createVBindShorthandInlayHintInfo } from '../inlayHints'; import { getNodeText } from '../../parsers/scriptSetupRanges'; const colonReg = /:/g; @@ -115,7 +115,7 @@ export function* generateComponent( } else if (dynamicTagInfo) { if (dynamicTagInfo.isComponentIsShorthand) { - ctx.inlayHints.push(generateVBindShorthandInlayHint(dynamicTagInfo.exp.loc, 'is')); + ctx.inlayHints.push(createVBindShorthandInlayHintInfo(dynamicTagInfo.exp.loc, 'is')); } yield `const ${var_originalComponent} = (`; yield* generateInterpolation( diff --git a/packages/language-core/lib/codegen/template/elementProps.ts b/packages/language-core/lib/codegen/template/elementProps.ts index d4372cdee7..dfaf3cbac2 100644 --- a/packages/language-core/lib/codegen/template/elementProps.ts +++ b/packages/language-core/lib/codegen/template/elementProps.ts @@ -11,7 +11,7 @@ import { generateEventArg, generateEventExpression } from './elementEvents'; import type { TemplateCodegenOptions } from './index'; import { generateInterpolation } from './interpolation'; import { generateObjectProperty } from './objectProperty'; -import { generateVBindShorthandInlayHint } from './vBindShorthand'; +import { createVBindShorthandInlayHintInfo } from '../inlayHints'; export function* generateElementProps( options: TemplateCodegenOptions, @@ -335,7 +335,7 @@ function* generatePropExp( features ); if (enableCodeFeatures) { - ctx.inlayHints.push(generateVBindShorthandInlayHint(prop.loc, propVariableName)); + ctx.inlayHints.push(createVBindShorthandInlayHintInfo(prop.loc, propVariableName)); } } } diff --git a/packages/language-core/lib/codegen/template/slotOutlet.ts b/packages/language-core/lib/codegen/template/slotOutlet.ts index 3f5fe7bb08..021d51faf7 100644 --- a/packages/language-core/lib/codegen/template/slotOutlet.ts +++ b/packages/language-core/lib/codegen/template/slotOutlet.ts @@ -6,7 +6,7 @@ import { generateElementChildren } from './elementChildren'; import { generateElementProps } from './elementProps'; import type { TemplateCodegenOptions } from './index'; import { generateInterpolation } from './interpolation'; -import { generateVBindShorthandInlayHint } from './vBindShorthand'; +import { createVBindShorthandInlayHintInfo } from '../inlayHints'; export function* generateSlotOutlet( options: TemplateCodegenOptions, @@ -83,7 +83,7 @@ export function* generateSlotOutlet( ) { const isShortHand = nameProp.arg?.loc.start.offset === nameProp.exp.loc.start.offset; if (isShortHand) { - ctx.inlayHints.push(generateVBindShorthandInlayHint(nameProp.exp.loc, 'name')); + ctx.inlayHints.push(createVBindShorthandInlayHintInfo(nameProp.exp.loc, 'name')); } const slotExpVar = ctx.getInternalVariable(); yield `var ${slotExpVar} = `; diff --git a/packages/language-core/lib/codegen/types.ts b/packages/language-core/lib/codegen/types.ts deleted file mode 100644 index 964bb46076..0000000000 --- a/packages/language-core/lib/codegen/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface InlayHintInfo { - blockName: string; - offset: number; - setting: string; - label: string; - tooltip?: string; - paddingRight?: boolean; - paddingLeft?: boolean; -} From c75b33babc4c601c7c9746b1bf1807484bdcce06 Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Wed, 23 Oct 2024 14:45:01 +0800 Subject: [PATCH 7/8] Update element.ts --- packages/language-core/lib/codegen/template/element.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index 0af3253cee..633d54be37 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -52,7 +52,6 @@ export function* generateComponent( exp: CompilerDOM.ElementNode | CompilerDOM.ExpressionNode; tag: string; offsets: [number, number | undefined]; - isComponentIsShorthand?: boolean; } | undefined; if (isComponentTag) { @@ -63,11 +62,13 @@ export function* generateComponent( && prop.arg?.loc.source === 'is' && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION ) { + if (prop.arg.loc.end.offset === prop.exp.loc.end.offset) { + ctx.inlayHints.push(createVBindShorthandInlayHintInfo(prop.exp.loc, 'is')); + } dynamicTagInfo = { exp: prop.exp, tag: prop.exp.content, offsets: [prop.exp.loc.start.offset, undefined], - isComponentIsShorthand: prop.arg.loc.end.offset === prop.exp.loc.end.offset }; props = props.filter(p => p !== prop); break; @@ -114,9 +115,6 @@ export function* generateComponent( yield `]${endOfLine}`; } else if (dynamicTagInfo) { - if (dynamicTagInfo.isComponentIsShorthand) { - ctx.inlayHints.push(createVBindShorthandInlayHintInfo(dynamicTagInfo.exp.loc, 'is')); - } yield `const ${var_originalComponent} = (`; yield* generateInterpolation( options, From 4c7c7c829af329eb6b5c21f2b6a79f266666c783 Mon Sep 17 00:00:00 2001 From: Johnson Chu Date: Wed, 23 Oct 2024 14:51:15 +0800 Subject: [PATCH 8/8] Update element.ts --- packages/language-core/lib/codegen/template/element.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts index 633d54be37..ec8721835e 100644 --- a/packages/language-core/lib/codegen/template/element.ts +++ b/packages/language-core/lib/codegen/template/element.ts @@ -49,9 +49,9 @@ export function* generateComponent( let props = node.props; let dynamicTagInfo: { - exp: CompilerDOM.ElementNode | CompilerDOM.ExpressionNode; tag: string; offsets: [number, number | undefined]; + astHolder: CompilerDOM.SourceLocation; } | undefined; if (isComponentTag) { @@ -66,9 +66,9 @@ export function* generateComponent( ctx.inlayHints.push(createVBindShorthandInlayHintInfo(prop.exp.loc, 'is')); } dynamicTagInfo = { - exp: prop.exp, tag: prop.exp.content, offsets: [prop.exp.loc.start.offset, undefined], + astHolder: prop.exp.loc, }; props = props.filter(p => p !== prop); break; @@ -78,9 +78,9 @@ export function* generateComponent( else if (node.tag.includes('.')) { // namespace tag dynamicTagInfo = { - exp: node, tag: node.tag, offsets: [startTagOffset, endTagOffset], + astHolder: node.loc, }; } @@ -120,7 +120,7 @@ export function* generateComponent( options, ctx, dynamicTagInfo.tag, - dynamicTagInfo.exp, + dynamicTagInfo.astHolder, dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', @@ -132,7 +132,7 @@ export function* generateComponent( options, ctx, dynamicTagInfo.tag, - dynamicTagInfo.exp, + dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], { ...ctx.codeFeatures.all,