@vue/language-core 2.1.6 → 2.1.10

package/lib/codegen/script/template.d.ts

@@ -3,6 +3,6 @@ import { TemplateCodegenContext } from '../template/context';
 import type { ScriptCodegenContext } from './context';
 import { type ScriptCodegenOptions } from './index';
 export declare function generateTemplateDirectives(options: ScriptCodegenOptions): Generator<Code>;
-export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, isClassComponent: boolean): Generator<Code, TemplateCodegenContext>;
+export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code, TemplateCodegenContext>;
 export declare function generateCssClassProperty(styleIndex: number, classNameWithDot: string, offset: number, propertyType: string, optional: boolean): Generator<Code>;
 export declare function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Set<string>;

package/lib/codegen/script/template.js

@@ -4,21 +4,17 @@ exports.generateTemplateDirectives = generateTemplateDirectives;
 exports.generateTemplate = generateTemplate;
 exports.generateCssClassProperty = generateCssClassProperty;
 exports.getTemplateUsageVars = getTemplateUsageVars;
+const path = require("path-browserify");
 const shared_1 = require("../../utils/shared");
 const common_1 = require("../common");
 const context_1 = require("../template/context");
 const interpolation_1 = require("../template/interpolation");
 const styleScopedClasses_1 = require("../template/styleScopedClasses");
 const index_1 = require("./index");
-function* generateTemplateCtx(options, isClassComponent) {
+function* generateTemplateCtx(options) {
     const exps = [];
-    if (isClassComponent) {
-        exps.push(`this`);
-    }
-    else {
-        exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>`);
-    }
-    if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) {
+    exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>`);
+    if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileName.endsWith(ext))) {
         exps.push(`globalThis`);
     }
     if (options.sfc.styles.some(style => style.module)) {
@@ -56,7 +52,8 @@ function* generateTemplateComponents(options) {
         nameType = options.sfc.script.content.substring(nameOption.start, nameOption.end);
     }
     else if (options.sfc.scriptSetup) {
-        nameType = `'${options.scriptSetupRanges?.options.name ?? options.fileBaseName.substring(0, options.fileBaseName.lastIndexOf('.'))}'`;
+        const baseName = path.basename(options.fileName);
+        nameType = `'${options.scriptSetupRanges?.options.name ?? baseName.substring(0, baseName.lastIndexOf('.'))}'`;
     }
     if (nameType) {
         exps.push(`{} as {
@@ -99,13 +96,13 @@ function* generateTemplateDirectives(options) {
     yield `}${common_1.endOfLine}`;
     yield `let __VLS_directives!: typeof __VLS_localDirectives & __VLS_GlobalDirectives${common_1.endOfLine}`;
 }
-function* generateTemplate(options, ctx, isClassComponent) {
+function* generateTemplate(options, ctx) {
     ctx.generatedTemplate = true;
     const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
         scriptSetupBindingNames: new Set(),
         edited: options.edited,
     });
-    yield* generateTemplateCtx(options, isClassComponent);
+    yield* generateTemplateCtx(options);
     yield* generateTemplateComponents(options);
     yield* generateTemplateDirectives(options);
     yield* generateTemplateBody(options, templateCodegenCtx);
@@ -145,13 +142,15 @@ function* generateTemplateBody(options, templateCodegenCtx) {
         if (!options.scriptSetupRanges?.slots.define) {
             yield `const __VLS_slots = {}${common_1.endOfLine}`;
         }
-        yield `const $refs = {}${common_1.endOfLine}`;
         yield `const __VLS_inheritedAttrs = {}${common_1.endOfLine}`;
+        yield `const $refs = {}${common_1.endOfLine}`;
+        yield `const $el = {} as any${common_1.endOfLine}`;
     }
     yield `return {${common_1.newLine}`;
+    yield `	attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${common_1.newLine}`;
     yield `	slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${common_1.newLine}`;
     yield `	refs: $refs,${common_1.newLine}`;
-    yield `	attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${common_1.newLine}`;
+    yield `	rootEl: $el,${common_1.newLine}`;
     yield `}${common_1.endOfLine}`;
 }
 function* generateCssClassProperty(styleIndex, classNameWithDot, offset, propertyType, optional) {
@@ -186,7 +185,7 @@ function* generateCssVars(options, ctx) {
     yield `// CSS variable injection ${common_1.newLine}`;
     for (const style of options.sfc.styles) {
         for (const cssBind of style.cssVars) {
-            for (const [segment, offset, onlyError] of (0, interpolation_1.forEachInterpolationSegment)(options.ts, undefined, ctx, cssBind.text, cssBind.offset, options.ts.createSourceFile('/a.txt', cssBind.text, 99))) {
+            for (const [segment, offset, onlyError] of (0, interpolation_1.forEachInterpolationSegment)(options.ts, undefined, undefined, ctx, cssBind.text, cssBind.offset, options.ts.createSourceFile('/a.txt', cssBind.text, 99))) {
                 if (offset === undefined) {
                     yield segment;
                 }

package/lib/codegen/template/context.d.ts

@@ -1,7 +1,7 @@
 import type * as CompilerDOM from '@vue/compiler-dom';
 import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenOptions } from './index';
-import { InlayHintInfo } from '../types';
+import { InlayHintInfo } from '../inlayHints';
 export type TemplateCodegenContext = ReturnType<typeof createTemplateCodegenContext>;
 export declare function createTemplateCodegenContext(options: Pick<TemplateCodegenOptions, 'scriptSetupBindingNames' | 'edited'>): {
     slots: {
@@ -41,7 +41,8 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodeg
     inlayHints: InlayHintInfo[];
     hasSlot: boolean;
     inheritedAttrVars: Set<unknown>;
-    templateRefs: Map<string, [string, number]>;
+    templateRefs: Map<string, [varName: string, offset: number]>;
+    singleRootElType: string | undefined;
     singleRootNode: CompilerDOM.ElementNode | undefined;
     accessExternalVariable(name: string, offset?: number): void;
     hasLocalVariable: (name: string) => boolean;

package/lib/codegen/template/context.js

@@ -110,6 +110,7 @@ function createTemplateCodegenContext(options) {
         hasSlot: false,
         inheritedAttrVars: new Set(),
         templateRefs,
+        singleRootElType: undefined,
         singleRootNode: undefined,
         accessExternalVariable(name, offset) {
             let arr = accessExternalVariables.get(name);

package/lib/codegen/template/element.d.ts

@@ -3,6 +3,6 @@ import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined): Generator<Code>;
-export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined, isVForChild: boolean): Generator<Code>;
 export declare function getCanonicalComponentName(tagText: string): string;
 export declare function getPossibleOriginalComponentNames(tagText: string, deduplicate: boolean): string[];

package/lib/codegen/template/element.js

@@ -17,6 +17,7 @@ const interpolation_1 = require("./interpolation");
 const propertyAccess_1 = require("./propertyAccess");
 const templateChild_1 = require("./templateChild");
 const objectProperty_1 = require("./objectProperty");
+const inlayHints_1 = require("../inlayHints");
 const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const colonReg = /:/g;
 function* generateComponent(options, ctx, node, currentComponent) {
@@ -39,9 +40,15 @@ function* generateComponent(options, ctx, node, currentComponent) {
     let dynamicTagInfo;
     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) {
+                if (prop.arg.loc.end.offset === prop.exp.loc.end.offset) {
+                    ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.exp.loc, 'is'));
+                }
                 dynamicTagInfo = {
-                    exp: prop.exp.loc.source,
+                    tag: prop.exp.content,
                     offsets: [prop.exp.loc.start.offset, undefined],
                     astHolder: prop.exp.loc,
                 };
@@ -53,9 +60,9 @@ function* generateComponent(options, ctx, node, currentComponent) {
     else if (node.tag.includes('.')) {
         // namespace tag
         dynamicTagInfo = {
-            exp: node.tag,
-            astHolder: node.loc,
+            tag: node.tag,
             offsets: [startTagOffset, endTagOffset],
+            astHolder: node.loc,
         };
     }
     if (matchImportName) {
@@ -86,10 +93,10 @@ function* generateComponent(options, ctx, node, currentComponent) {
     }
     else if (dynamicTagInfo) {
         yield `const ${var_originalComponent} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', ')');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.tag, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', ')');
         if (dynamicTagInfo.offsets[1] !== undefined) {
             yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], {
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.tag, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], {
                 ...ctx.codeFeatures.all,
                 completion: false,
             }, '(', ')');
@@ -151,9 +158,9 @@ function* generateComponent(options, ctx, node, currentComponent) {
         yield common_1.endOfLine;
     }
     const [refName, offset] = yield* generateVScope(options, ctx, node, props);
-    if (refName) {
+    const isRootNode = node === ctx.singleRootNode;
+    if (refName || isRootNode) {
         const varName = ctx.getInternalVariable();
-        ctx.templateRefs.set(refName, [varName, offset]);
         ctx.usedComponentCtxVars.add(var_defineComponentCtx);
         yield `var ${varName} = {} as (Parameters<NonNullable<typeof ${var_defineComponentCtx}['expose']>>[0] | null)`;
         if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
@@ -162,6 +169,12 @@ function* generateComponent(options, ctx, node, currentComponent) {
             yield `[]`;
         }
         yield `${common_1.endOfLine}`;
+        if (refName) {
+            ctx.templateRefs.set(refName, [varName, offset]);
+        }
+        if (isRootNode) {
+            ctx.singleRootElType = `NonNullable<typeof ${varName}>['$el']`;
+        }
     }
     const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
     if (usedComponentEventsVar) {
@@ -184,10 +197,10 @@ function* generateComponent(options, ctx, node, currentComponent) {
         yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, var_defineComponentCtx);
     }
     if (ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
-        yield `const ${var_defineComponentCtx} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})${common_1.endOfLine}`;
+        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${common_1.endOfLine}`;
     }
 }
-function* generateElement(options, ctx, node, currentComponent, componentCtxVar) {
+function* generateElement(options, ctx, node, currentComponent, componentCtxVar, isVForChild) {
     const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
     const endTagOffset = !node.isSelfClosing && options.template.lang === 'html'
         ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag)
@@ -208,7 +221,14 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar)
     }
     const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
     if (refName) {
-        ctx.templateRefs.set(refName, [`__VLS_nativeElements['${node.tag}']`, offset]);
+        let refValue = `__VLS_nativeElements['${node.tag}']`;
+        if (isVForChild) {
+            refValue = `[${refValue}]`;
+        }
+        ctx.templateRefs.set(refName, [refValue, offset]);
+    }
+    if (ctx.singleRootNode === node) {
+        ctx.singleRootElType = `typeof __VLS_nativeElements['${node.tag}']`;
     }
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     if (slotDir && componentCtxVar) {

package/lib/codegen/template/elementDirectives.js

@@ -7,42 +7,74 @@ const shared_2 = require("../../utils/shared");
 const common_1 = require("../common");
 const camelized_1 = require("./camelized");
 const interpolation_1 = require("./interpolation");
+const objectProperty_1 = require("./objectProperty");
+const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generateElementDirectives(options, ctx, node) {
     for (const prop of node.props) {
-        if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-            && prop.name !== 'slot'
-            && prop.name !== 'on'
-            && prop.name !== 'model'
-            && prop.name !== 'bind'
-            && prop.name !== 'scope'
-            && prop.name !== 'data') {
-            ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-            if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && !prop.arg.isStatic) {
-                yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.arg.content, prop.arg.loc, prop.arg.loc.start.offset + prop.arg.loc.source.indexOf(prop.arg.content), ctx.codeFeatures.all, '(', ')');
-                yield common_1.endOfLine;
-            }
-            yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_directiveAsFunction(__VLS_directives.`, ...(0, camelized_1.generateCamelized)('v-' + prop.name, prop.loc.start.offset, {
-                ...ctx.codeFeatures.all,
-                verification: false,
-                completion: {
-                    // fix https://github.com/vuejs/language-tools/issues/1905
-                    isAdditional: true,
-                },
-                navigation: {
-                    resolveRenameNewName: shared_1.camelize,
-                    resolveRenameEditText: getPropRenameApply(prop.name),
-                },
-            }), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...(prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-                ? [
-                    ...(0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, 'value'),
-                    ': ',
-                    ...(0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'))
-                ]
-                : [`undefined`]), `}, null!, null!)`);
-            yield common_1.endOfLine;
+        if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
+            || prop.name === 'slot'
+            || prop.name === 'on'
+            || prop.name === 'model'
+            || prop.name === 'bind'
+            || prop.name === 'scope'
+            || prop.name === 'data') {
+            continue;
         }
+        ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
+        yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), `}, null!, null!)`);
+        yield common_1.endOfLine;
     }
 }
+function* generateIdentifier(ctx, prop) {
+    const rawName = 'v-' + prop.name;
+    yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, {
+        ...ctx.codeFeatures.all,
+        verification: false,
+        completion: {
+            // fix https://github.com/vuejs/language-tools/issues/1905
+            isAdditional: true,
+        },
+        navigation: {
+            resolveRenameNewName: shared_1.camelize,
+            resolveRenameEditText: getPropRenameApply(prop.name),
+        },
+    }));
+}
+function* generateArg(options, ctx, prop) {
+    const { arg } = prop;
+    if (arg?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+        return;
+    }
+    const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
+    yield* (0, common_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, 'arg');
+    yield ': ';
+    if (arg.isStatic) {
+        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, ctx.codeFeatures.withoutHighlight);
+    }
+    else {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, arg.content, arg.loc, startOffset, ctx.codeFeatures.all, '(', ')');
+    }
+    yield ', ';
+}
+function* generateModifiers(options, ctx, prop) {
+    if (options.vueCompilerOptions.target < 3.5) {
+        return;
+    }
+    yield 'modifiers: { ';
+    for (const mod of prop.modifiers) {
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutHighlight);
+        yield ': true, ';
+    }
+    yield '}, ';
+}
+function* generateValue(options, ctx, prop) {
+    if (prop.exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+        return;
+    }
+    yield* (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, 'value');
+    yield ': ';
+    yield* (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'));
+}
 function getPropRenameApply(oldName) {
     return oldName === (0, shared_2.hyphenateAttr)(oldName) ? shared_2.hyphenateAttr : undefined;
 }

package/lib/codegen/template/elementProps.js

@@ -11,16 +11,16 @@ const camelized_1 = require("./camelized");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
+const inlayHints_1 = require("../inlayHints");
 function* generateElementProps(options, ctx, node, props, enableCodeFeatures, propsFailedExps) {
-    const isIntrinsicElement = node.tagType === CompilerDOM.ElementTypes.ELEMENT || node.tagType === CompilerDOM.ElementTypes.TEMPLATE;
-    const canCamelize = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
+    const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'on') {
             if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && !prop.arg.loc.source.startsWith('[')
                 && !prop.arg.loc.source.endsWith(']')) {
-                if (isIntrinsicElement) {
+                if (!isComponent) {
                     yield `...{ `;
                     yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg, true);
                     yield `: `;
@@ -65,11 +65,11 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                 }
                 continue;
             }
-            if (prop.modifiers.some(m => m === 'prop' || m === 'attr')) {
+            if (prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
                 propName = propName.substring(1);
             }
             const shouldSpread = propName === 'style' || propName === 'class';
-            const shouldCamelize = canCamelize
+            const shouldCamelize = isComponent
                 && (!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
                 && (0, shared_2.hyphenateAttr)(propName) === propName
                 && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
@@ -120,7 +120,7 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
-            const shouldCamelize = canCamelize
+            const shouldCamelize = isComponent
                 && (0, shared_2.hyphenateAttr)(prop.name) === prop.name
                 && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern));
             if (shouldSpread) {
@@ -205,17 +205,7 @@ function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enable
                 }
                 yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
                 if (enableCodeFeatures) {
-                    ctx.inlayHints.push({
-                        blockName: 'template',
-                        offset: prop.loc.end.offset,
-                        setting: 'vue.inlayHints.vBindShorthand',
-                        label: `="${propVariableName}"`,
-                        tooltip: [
-                            `This is a shorthand for \`${prop.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((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
                 }
             }
         }

package/lib/codegen/template/index.d.ts

@@ -10,6 +10,7 @@ export interface TemplateCodegenOptions {
     edited: boolean;
     scriptSetupBindingNames: Set<string>;
     scriptSetupImportComponentNames: Set<string>;
+    destructuredPropNames: Set<string>;
     templateRefNames: Set<string>;
     hasDefineSlots?: boolean;
     slotsAssignName?: string;

package/lib/codegen/template/index.js

@@ -18,79 +18,89 @@ function* generateTemplate(options) {
     if (options.propsAssignName) {
         ctx.addLocalVariable(options.propsAssignName);
     }
+    ctx.addLocalVariable('$el');
     ctx.addLocalVariable('$refs');
-    yield* generatePreResolveComponents();
+    yield* generatePreResolveComponents(options);
     if (options.template.ast) {
         yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined, undefined, undefined);
     }
     yield* (0, styleScopedClasses_1.generateStyleScopedClasses)(ctx);
     if (!options.hasDefineSlots) {
         yield `var __VLS_slots!:`;
-        yield* generateSlotsType();
+        yield* generateSlotsType(options, ctx);
         yield common_1.endOfLine;
     }
-    yield* generateInheritedAttrs();
     yield* ctx.generateAutoImportCompletion();
-    yield* generateRefs();
+    yield* generateInheritedAttrs(ctx);
+    yield* generateRefs(ctx);
+    yield* generateRootEl(ctx);
     return ctx;
-    function* generateRefs() {
-        yield `const __VLS_refs = {${common_1.newLine}`;
-        for (const [name, [varName, offset]] of ctx.templateRefs) {
-            yield* (0, stringLiteralKey_1.generateStringLiteralKey)(name, offset, ctx.codeFeatures.navigationAndCompletion);
-            yield `: ${varName},${common_1.newLine}`;
-        }
-        yield `}${common_1.endOfLine}`;
-        yield `var $refs!: typeof __VLS_refs${common_1.endOfLine}`;
+}
+function* generateSlotsType(options, ctx) {
+    for (const { expVar, varName } of ctx.dynamicSlots) {
+        ctx.hasSlot = true;
+        yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${common_1.newLine}`;
     }
-    function* generateSlotsType() {
-        for (const { expVar, varName } of ctx.dynamicSlots) {
-            ctx.hasSlot = true;
-            yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${common_1.newLine}`;
+    yield `{${common_1.newLine}`;
+    for (const slot of ctx.slots) {
+        ctx.hasSlot = true;
+        if (slot.name && slot.loc !== undefined) {
+            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
         }
-        yield `{${common_1.newLine}`;
-        for (const slot of ctx.slots) {
-            ctx.hasSlot = true;
-            if (slot.name && slot.loc !== undefined) {
-                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
-            }
-            else {
-                yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
-            }
-            yield `?(_: typeof ${slot.varName}): any,${common_1.newLine}`;
+        else {
+            yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
         }
-        yield `}`;
+        yield `?(_: typeof ${slot.varName}): any,${common_1.newLine}`;
     }
-    function* generateInheritedAttrs() {
-        yield 'var __VLS_inheritedAttrs!: {}';
-        for (const varName of ctx.inheritedAttrVars) {
-            yield ` & typeof ${varName}`;
-        }
-        yield common_1.endOfLine;
+    yield `}`;
+}
+function* generateInheritedAttrs(ctx) {
+    yield 'var __VLS_inheritedAttrs!: {}';
+    for (const varName of ctx.inheritedAttrVars) {
+        yield ` & typeof ${varName}`;
     }
-    function* generatePreResolveComponents() {
-        yield `let __VLS_resolvedLocalAndGlobalComponents!: Required<{}`;
-        if (options.template.ast) {
-            const components = new Set();
-            for (const node of forEachElementNode(options.template.ast)) {
-                if (node.tagType === CompilerDOM.ElementTypes.COMPONENT
-                    && node.tag.toLowerCase() !== 'component'
-                    && !node.tag.includes('.') // namespace tag 
-                ) {
-                    if (components.has(node.tag)) {
-                        continue;
-                    }
-                    components.add(node.tag);
-                    yield common_1.newLine;
-                    yield ` & __VLS_WithComponent<'${(0, element_1.getCanonicalComponentName)(node.tag)}', typeof __VLS_localComponents, `;
-                    yield (0, element_1.getPossibleOriginalComponentNames)(node.tag, false)
-                        .map(name => `"${name}"`)
-                        .join(', ');
-                    yield `>`;
+    yield common_1.endOfLine;
+}
+function* generateRefs(ctx) {
+    yield `const __VLS_refs = {${common_1.newLine}`;
+    for (const [name, [varName, offset]] of ctx.templateRefs) {
+        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(name, offset, ctx.codeFeatures.navigationAndCompletion);
+        yield `: ${varName},${common_1.newLine}`;
+    }
+    yield `}${common_1.endOfLine}`;
+    yield `var $refs!: typeof __VLS_refs${common_1.endOfLine}`;
+}
+function* generateRootEl(ctx) {
+    if (ctx.singleRootElType) {
+        yield `var $el!: ${ctx.singleRootElType}${common_1.endOfLine}`;
+    }
+    else {
+        yield `var $el!: any${common_1.endOfLine}`;
+    }
+}
+function* generatePreResolveComponents(options) {
+    yield `let __VLS_resolvedLocalAndGlobalComponents!: Required<{}`;
+    if (options.template.ast) {
+        const components = new Set();
+        for (const node of forEachElementNode(options.template.ast)) {
+            if (node.tagType === CompilerDOM.ElementTypes.COMPONENT
+                && node.tag.toLowerCase() !== 'component'
+                && !node.tag.includes('.') // namespace tag 
+            ) {
+                if (components.has(node.tag)) {
+                    continue;
                 }
+                components.add(node.tag);
+                yield common_1.newLine;
+                yield ` & __VLS_WithComponent<'${(0, element_1.getCanonicalComponentName)(node.tag)}', typeof __VLS_localComponents, `;
+                yield (0, element_1.getPossibleOriginalComponentNames)(node.tag, false)
+                    .map(name => `"${name}"`)
+                    .join(', ');
+                yield `>`;
             }
         }
-        yield `>${common_1.endOfLine}`;
     }
+    yield `>${common_1.endOfLine}`;
 }
 function* forEachElementNode(node) {
     if (node.type === CompilerDOM.NodeTypes.ROOT) {

package/lib/codegen/template/interpolation.d.ts

@@ -3,4 +3,4 @@ import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateInterpolation(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, _code: string, astHolder: any, start: number | undefined, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, prefix: string, suffix: string): Generator<Code>;
-export declare function forEachInterpolationSegment(ts: typeof import('typescript'), templateRefNames: Set<string> | undefined, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, errorMappingOnly?: boolean]>;
+export declare function forEachInterpolationSegment(ts: typeof import('typescript'), destructuredPropNames: Set<string> | undefined, templateRefNames: Set<string> | undefined, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, type?: 'errorMappingOnly' | 'startText' | 'endText']>;