@vue/language-core 2.1.4 → 2.1.6-patch.1

package/lib/codegen/script/scriptSetup.js

@@ -5,6 +5,7 @@ exports.generateScriptSetup = generateScriptSetup;
 const common_1 = require("../common");
 const component_1 = require("./component");
 const index_1 = require("./index");
+const componentSelf_1 = require("./componentSelf");
 const template_1 = require("./template");
 function* generateScriptSetupImports(scriptSetup, scriptSetupRanges) {
     yield [
@@ -57,7 +58,7 @@ function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
             + `			props: ${ctx.localTypes.PrettifyLocal}<typeof __VLS_functionalComponentProps & __VLS_PublicProps> & __VLS_BuiltInPublicProps,${common_1.newLine}`
             + `			expose(exposed: import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<${scriptSetupRanges.expose.define ? 'typeof __VLS_exposed' : '{}'}>): void,${common_1.newLine}`
             + `			attrs: any,${common_1.newLine}`
-            + `			slots: __VLS_Slots,${common_1.newLine}`
+            + `			slots: __VLS_TemplateResult['slots'],${common_1.newLine}`
             + `			emit: ${emitTypes.length ? emitTypes.join(' & ') : `{}`},${common_1.newLine}`
             + `		}${common_1.endOfLine}`;
         yield `	})(),${common_1.newLine}`; // __VLS_setup = (async () => {
@@ -223,9 +224,9 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
         if (define?.arg) {
             setupCodeModifies.push([
                 [
-                    `<__VLS_Refs[`,
+                    `<__VLS_TemplateResult['refs'][`,
                     (0, common_1.generateSfcBlockSection)(scriptSetup, define.arg.start, define.arg.end, index_1.codeFeatures.navigation),
-                    `], keyof __VLS_Refs>`
+                    `], keyof __VLS_TemplateResult['refs']>`
                 ],
                 define.arg.start - 1,
                 define.arg.start - 1
@@ -260,17 +261,18 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
     }
     yield* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, definePropMirrors);
     yield* generateModelEmits(options, scriptSetup, scriptSetupRanges);
-    yield* generateStyleModules(options, ctx);
-    yield* (0, template_1.generateTemplate)(options, ctx, false);
-    yield `type __VLS_Refs = typeof __VLS_templateResult['refs']${common_1.endOfLine}`;
-    yield `type __VLS_Slots = typeof __VLS_templateResult['slots']${common_1.endOfLine}`;
+    yield `function __VLS_template() {${common_1.newLine}`;
+    const templateCodegenCtx = yield* (0, template_1.generateTemplate)(options, ctx, false);
+    yield `}${common_1.endOfLine}`;
+    yield* (0, componentSelf_1.generateComponentSelf)(options, ctx, templateCodegenCtx);
+    yield `type __VLS_TemplateResult = ReturnType<typeof __VLS_template>${common_1.endOfLine}`;
     if (syntax) {
         if (!options.vueCompilerOptions.skipTemplateCodegen && (options.templateCodegen?.hasSlot || scriptSetupRanges?.slots.define)) {
             yield `const __VLS_component = `;
             yield* (0, component_1.generateComponent)(options, ctx, scriptSetup, scriptSetupRanges);
             yield common_1.endOfLine;
             yield `${syntax} `;
-            yield `{} as ${ctx.localTypes.WithTemplateSlots}<typeof __VLS_component, __VLS_Slots>${common_1.endOfLine}`;
+            yield `{} as ${ctx.localTypes.WithTemplateSlots}<typeof __VLS_component, __VLS_TemplateResult['slots']>${common_1.endOfLine}`;
         }
         else {
             yield `${syntax} `;
@@ -403,35 +405,6 @@ function* generateModelEmits(options, scriptSetup, scriptSetupRanges) {
         }
     }
 }
-function* generateStyleModules(options, ctx) {
-    const styles = options.sfc.styles.filter(style => style.module);
-    if (!styles.length) {
-        return;
-    }
-    yield `type __VLS_StyleModules = {${common_1.newLine}`;
-    for (let i = 0; i < styles.length; i++) {
-        const style = styles[i];
-        const { name, offset } = style.module;
-        if (offset) {
-            yield [
-                name,
-                'main',
-                offset + 1,
-                index_1.codeFeatures.all
-            ];
-        }
-        else {
-            yield name;
-        }
-        yield `: Record<string, string> & ${ctx.localTypes.PrettifyLocal}<{}`;
-        for (const className of style.classNames) {
-            yield* (0, template_1.generateCssClassProperty)(i, className.text, className.offset, 'string', false);
-        }
-        yield `>${common_1.endOfLine}`;
-    }
-    yield `}`;
-    yield common_1.endOfLine;
-}
 function* generateDefinePropType(scriptSetup, propName, localName, defineProp) {
     if (defineProp.type) {
         // Infer from defineProp<T>

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

@@ -0,0 +1,4 @@
+import type { Code } from '../../types';
+import type { ScriptCodegenContext } from './context';
+import { ScriptCodegenOptions } from './index';
+export declare function generateStyleModulesType(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code>;

package/lib/codegen/script/styleModulesType.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyleModulesType = generateStyleModulesType;
+const index_1 = require("./index");
+const template_1 = require("./template");
+const common_1 = require("../common");
+function* generateStyleModulesType(options, ctx) {
+    const styles = options.sfc.styles.filter(style => style.module);
+    if (!styles.length) {
+        return;
+    }
+    yield `type __VLS_StyleModules = {${common_1.newLine}`;
+    for (let i = 0; i < styles.length; i++) {
+        const style = styles[i];
+        const { name, offset } = style.module;
+        if (offset) {
+            yield [
+                name,
+                'main',
+                offset + 1,
+                index_1.codeFeatures.all
+            ];
+        }
+        else {
+            yield name;
+        }
+        yield `: Record<string, string> & ${ctx.localTypes.PrettifyLocal}<{}`;
+        for (const className of style.classNames) {
+            yield* (0, template_1.generateCssClassProperty)(i, className.text, className.offset, 'string', false);
+        }
+        yield `>${common_1.endOfLine}`;
+    }
+    yield `}`;
+    yield common_1.endOfLine;
+}
+//# sourceMappingURL=styleModulesType.js.map

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

@@ -1,8 +1,8 @@
 import type { Code } from '../../types';
+import { TemplateCodegenContext } from '../template/context';
 import type { ScriptCodegenContext } from './context';
 import { type ScriptCodegenOptions } from './index';
-export declare function generateTemplateCtx(options: ScriptCodegenOptions, isClassComponent: boolean): Generator<Code>;
-export declare function generateTemplateComponents(options: ScriptCodegenOptions): Generator<Code>;
-export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, isClassComponent: boolean): Generator<Code>;
+export declare function generateTemplateDirectives(options: ScriptCodegenOptions): Generator<Code>;
+export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, isClassComponent: boolean): 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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateTemplateCtx = generateTemplateCtx;
-exports.generateTemplateComponents = generateTemplateComponents;
+exports.generateTemplateDirectives = generateTemplateDirectives;
 exports.generateTemplate = generateTemplate;
 exports.generateCssClassProperty = generateCssClassProperty;
 exports.getTemplateUsageVars = getTemplateUsageVars;
@@ -11,54 +10,28 @@ const context_1 = require("../template/context");
 const interpolation_1 = require("../template/interpolation");
 const styleScopedClasses_1 = require("../template/styleScopedClasses");
 const index_1 = require("./index");
-const internalComponent_1 = require("./internalComponent");
 function* generateTemplateCtx(options, isClassComponent) {
-    const baseExps = [];
-    const extraExps = [];
+    const exps = [];
     if (isClassComponent) {
-        baseExps.push(`this`);
+        exps.push(`this`);
     }
     else {
-        baseExps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
+        exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>`);
     }
     if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) {
-        extraExps.push(`globalThis`);
+        exps.push(`globalThis`);
     }
     if (options.sfc.styles.some(style => style.module)) {
-        extraExps.push(`{} as __VLS_StyleModules`);
-    }
-    if (options.scriptSetupRanges?.templateRefs.length) {
-        let exp = `{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${common_1.newLine}`;
-        for (const { name } of options.scriptSetupRanges.templateRefs) {
-            if (name) {
-                exp += `${name}: typeof ${name}${common_1.newLine}`;
-            }
-        }
-        exp += `}>${common_1.newLine}`;
-        extraExps.push(exp);
-    }
-    yield `const __VLS_ctxBase = `;
-    if (baseExps.length === 1) {
-        yield baseExps[0];
-        yield common_1.endOfLine;
-    }
-    else {
-        yield `{${common_1.newLine}`;
-        for (const exp of baseExps) {
-            yield `...`;
-            yield exp;
-            yield `,${common_1.newLine}`;
-        }
-        yield `}${common_1.endOfLine}`;
+        exps.push(`{} as __VLS_StyleModules`);
     }
     yield `const __VLS_ctx = `;
-    if (extraExps.length === 0) {
-        yield `__VLS_ctxBase${common_1.endOfLine}`;
+    if (exps.length === 1) {
+        yield exps[0];
+        yield `${common_1.endOfLine}`;
     }
     else {
         yield `{${common_1.newLine}`;
-        yield `...__VLS_ctxBase,${common_1.newLine}`;
-        for (const exp of extraExps) {
+        for (const exp of exps) {
             yield `...`;
             yield exp;
             yield `,${common_1.newLine}`;
@@ -83,19 +56,18 @@ function* generateTemplateComponents(options) {
         nameType = options.sfc.script.content.substring(nameOption.start, nameOption.end);
     }
     else if (options.sfc.scriptSetup) {
-        yield `let __VLS_name!: '${options.scriptSetupRanges?.options.name ?? options.fileBaseName.substring(0, options.fileBaseName.lastIndexOf('.'))}'${common_1.endOfLine}`;
-        nameType = 'typeof __VLS_name';
+        nameType = `'${options.scriptSetupRanges?.options.name ?? options.fileBaseName.substring(0, options.fileBaseName.lastIndexOf('.'))}'`;
     }
     if (nameType) {
         exps.push(`{} as {
-			[K in ${nameType}]: typeof __VLS_internalComponent
+			[K in ${nameType}]: typeof __VLS_self
 				& (new () => {
 					${(0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target)}: typeof ${options.scriptSetupRanges?.slots?.name ?? '__VLS_slots'}
 				})
 		}`);
     }
-    exps.push(`{} as NonNullable<typeof __VLS_internalComponent extends { components: infer C } ? C : {}>`);
-    exps.push(`__VLS_ctxBase`);
+    exps.push(`{} as NonNullable<typeof __VLS_self extends { components: infer C } ? C : {}>`);
+    exps.push(`__VLS_ctx`);
     yield `const __VLS_localComponents = {${common_1.newLine}`;
     for (const type of exps) {
         yield `...`;
@@ -103,26 +75,41 @@ function* generateTemplateComponents(options) {
         yield `,${common_1.newLine}`;
     }
     yield `}${common_1.endOfLine}`;
-    yield `let __VLS_components: typeof __VLS_localComponents & __VLS_GlobalComponents${common_1.endOfLine}`;
+    yield `let __VLS_components!: typeof __VLS_localComponents & __VLS_GlobalComponents${common_1.endOfLine}`;
 }
-function* generateTemplate(options, ctx, isClassComponent) {
-    ctx.generatedTemplate = true;
-    if (!options.vueCompilerOptions.skipTemplateCodegen) {
-        const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
-            scriptSetupBindingNames: new Set(),
-            edited: options.edited,
-        });
-        yield* generateTemplateCtx(options, isClassComponent);
-        yield* generateTemplateComponents(options);
-        yield* generateTemplateBody(options, templateCodegenCtx);
-        yield* (0, internalComponent_1.generateInternalComponent)(options, ctx, templateCodegenCtx);
+function* generateTemplateDirectives(options) {
+    const exps = [];
+    if (options.sfc.script && options.scriptRanges?.exportDefault?.directivesOption) {
+        const { directivesOption } = options.scriptRanges.exportDefault;
+        exps.push([
+            options.sfc.script.content.substring(directivesOption.start, directivesOption.end),
+            'script',
+            directivesOption.start,
+            index_1.codeFeatures.navigation,
+        ]);
     }
-    else {
-        const templateUsageVars = [...getTemplateUsageVars(options, ctx)];
-        yield `// @ts-ignore${common_1.newLine}`;
-        yield `[${templateUsageVars.join(', ')}]${common_1.newLine}`;
-        yield `const __VLS_templateResult { slots: {}, refs: {}, attrs: {} }${common_1.endOfLine}`;
+    exps.push(`{} as NonNullable<typeof __VLS_self extends { directives: infer D } ? D : {}>`);
+    exps.push(`__VLS_ctx`);
+    yield `const __VLS_localDirectives = {${common_1.newLine}`;
+    for (const type of exps) {
+        yield `...`;
+        yield type;
+        yield `,${common_1.newLine}`;
     }
+    yield `}${common_1.endOfLine}`;
+    yield `let __VLS_directives!: typeof __VLS_localDirectives & __VLS_GlobalDirectives${common_1.endOfLine}`;
+}
+function* generateTemplate(options, ctx, isClassComponent) {
+    ctx.generatedTemplate = true;
+    const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
+        scriptSetupBindingNames: new Set(),
+        edited: options.edited,
+    });
+    yield* generateTemplateCtx(options, isClassComponent);
+    yield* generateTemplateComponents(options);
+    yield* generateTemplateDirectives(options);
+    yield* generateTemplateBody(options, templateCodegenCtx);
+    return templateCodegenCtx;
 }
 function* generateTemplateBody(options, templateCodegenCtx) {
     const firstClasses = new Set();
@@ -157,14 +144,16 @@ function* generateTemplateBody(options, templateCodegenCtx) {
         yield `// no template${common_1.newLine}`;
         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 __VLS_templateResult = {`;
-    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 `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 `	rootEl: $el,${common_1.newLine}`;
     yield `}${common_1.endOfLine}`;
 }
 function* generateCssClassProperty(styleIndex, classNameWithDot, offset, propertyType, optional) {
@@ -199,7 +188,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, 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

@@ -41,6 +41,8 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodeg
     inlayHints: InlayHintInfo[];
     hasSlot: boolean;
     inheritedAttrVars: Set<unknown>;
+    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

@@ -95,6 +95,7 @@ function createTemplateCodegenContext(options) {
     const scopedClasses = [];
     const emptyClassOffsets = [];
     const inlayHints = [];
+    const templateRefs = new Map();
     return {
         slots,
         dynamicSlots,
@@ -108,6 +109,8 @@ function createTemplateCodegenContext(options) {
         inlayHints,
         hasSlot: false,
         inheritedAttrVars: new Set(),
+        templateRefs,
+        singleRootElType: undefined,
         singleRootNode: undefined,
         accessExternalVariable(name, offset) {
             let arr = accessExternalVariables.get(name);

package/lib/codegen/template/element.js

@@ -151,17 +151,23 @@ 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();
-        options.templateRefNames.set(refName, [varName, offset]);
         ctx.usedComponentCtxVars.add(var_defineComponentCtx);
-        yield `var ${varName} = {} as (Parameters<typeof ${var_defineComponentCtx}['expose']>[0] | null)`;
+        yield `var ${varName} = {} as (Parameters<NonNullable<typeof ${var_defineComponentCtx}['expose']>>[0] | null)`;
         if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
             && node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
             && node.codegenNode.props.properties.some(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')) {
             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,7 +190,7 @@ 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) {
@@ -208,7 +214,10 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar)
     }
     const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
     if (refName) {
-        options.templateRefNames.set(refName, [`__VLS_intrinsicElements['${node.tag}']`, offset]);
+        ctx.templateRefs.set(refName, [`__VLS_nativeElements['${node.tag}']`, 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) {
@@ -360,7 +369,7 @@ function* generateReferencesForElements(options, ctx, node) {
             && prop.name === 'ref'
             && prop.value) {
             const [content, startOffset] = normalizeAttributeValue(prop.value);
-            yield `// @ts-ignore${common_1.newLine}`;
+            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${common_1.newLine}`;
             yield `__VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
             yield common_1.endOfLine;

package/lib/codegen/template/elementDirectives.js

@@ -21,7 +21,7 @@ function* generateElementDirectives(options, ctx, node) {
                 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_ctx.`, ...(0, camelized_1.generateCamelized)('v-' + prop.name, prop.loc.start.offset, {
+            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: {

package/lib/codegen/template/elementEvents.js

@@ -136,7 +136,10 @@ function* generateEventExpression(options, ctx, prop) {
 }
 function isCompoundExpression(ts, ast) {
     let result = true;
-    if (ast.statements.length === 1) {
+    if (ast.statements.length === 0) {
+        result = false;
+    }
+    else if (ast.statements.length === 1) {
         ts.forEachChild(ast, child_1 => {
             if (ts.isExpressionStatement(child_1)) {
                 ts.forEachChild(child_1, child_2 => {

package/lib/codegen/template/elementProps.js

@@ -65,7 +65,7 @@ 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';
@@ -99,7 +99,7 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                         }
                         : false,
                 }, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize)
-                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...genereatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
+                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
             if (!enableCodeFeatures) {
                 yield (0, muggle_string_1.toString)([...codes]);
             }
@@ -126,22 +126,9 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, shouldCamelize
+            const codeInfo = shouldCamelize
                 ? {
-                    ...codeInfo,
-                    verification: options.vueCompilerOptions.strictTemplates
-                        ? codeInfo.verification
-                        : {
-                            shouldReport(_source, code) {
-                                if (String(code) === '2353' || String(code) === '2561') {
-                                    return false;
-                                }
-                                return typeof codeInfo.verification === 'object'
-                                    ? codeInfo.verification.shouldReport?.(_source, code) ?? true
-                                    : true;
-                            },
-                        },
+                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
                     navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
                         ? {
                             resolveRenameNewName: shared_1.camelize,
@@ -149,7 +136,23 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                         }
                         : false,
                 }
-                : ctx.codeFeatures.withoutHighlightAndCompletion, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
+                : {
+                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+                };
+            if (!options.vueCompilerOptions.strictTemplates) {
+                const verification = codeInfo.verification;
+                codeInfo.verification = {
+                    shouldReport(_source, code) {
+                        if (String(code) === '2353' || String(code) === '2561') {
+                            return false;
+                        }
+                        return typeof verification === 'object'
+                            ? verification.shouldReport?.(_source, code) ?? true
+                            : true;
+                    },
+                };
+            }
+            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
                 ? generateAttrValue(prop.value, ctx.codeFeatures.all)
                 : [`true`]), `)`);
             if (!enableCodeFeatures) {
@@ -182,7 +185,13 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
         }
     }
 }
-function* genereatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
+function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
+    if (isShorthand && features.completion) {
+        features = {
+            ...features,
+            completion: undefined,
+        };
+    }
     if (exp && exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) { // style='z-index: 2' will compile to {'z-index':'2'}
         if (!isShorthand) { // vue 3.4+
             yield* (0, interpolation_1.generateInterpolation)(options, ctx, exp.loc.source, exp.loc, exp.loc.start.offset, features, '(', ')');

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

@@ -7,10 +7,11 @@ export interface TemplateCodegenOptions {
     compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
+    edited: boolean;
     scriptSetupBindingNames: Set<string>;
     scriptSetupImportComponentNames: Set<string>;
-    edited: boolean;
-    templateRefNames: Map<string, [varName: string, offset: number]>;
+    destructuredPropNames: Set<string>;
+    templateRefNames: Set<string>;
     hasDefineSlots?: boolean;
     slotsAssignName?: string;
     propsAssignName?: string;