@vue/language-core 3.0.0-alpha.0 → 3.0.0-alpha.10

package/lib/codegen/template/context.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTemplateCodegenContext = createTemplateCodegenContext;
+const CompilerDOM = require("@vue/compiler-dom");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const wrapWith_1 = require("../utils/wrapWith");
+const commentDirectiveRegex = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)-->$/;
 /**
  * Creates and returns a Context object used for generating type-checkable TS code
  * from the template section of a .vue file.
@@ -102,13 +104,11 @@ const wrapWith_1 = require("../utils/wrapWith");
  * and additionally how we use that to determine whether to propagate diagnostics back upward.
  */
 function createTemplateCodegenContext(options) {
-    let ignoredError = false;
-    let expectErrorToken;
-    let lastGenericComment;
     let variableId = 0;
     function resolveCodeFeatures(features) {
-        if (features.verification) {
-            if (ignoredError) {
+        if (features.verification && stack.length) {
+            const data = stack[stack.length - 1];
+            if (data.ignoreError) {
                 // We are currently in a region of code covered by a @vue-ignore directive, so don't
                 // even bother performing any type-checking: set verification to false.
                 return {
@@ -116,17 +116,16 @@ function createTemplateCodegenContext(options) {
                     verification: false,
                 };
             }
-            if (expectErrorToken) {
+            if (data.expectError !== undefined) {
                 // We are currently in a region of code covered by a @vue-expect-error directive. We need to
                 // keep track of the number of errors encountered within this region so that we can know whether
                 // we will need to propagate an "unused ts-expect-error" diagnostic back to the original
                 // .vue file or not.
-                const token = expectErrorToken;
                 return {
                     ...features,
                     verification: {
                         shouldReport: () => {
-                            token.errors++;
+                            data.expectError.token++;
                             return false;
                         },
                     },
@@ -148,7 +147,12 @@ function createTemplateCodegenContext(options) {
     const bindingAttrLocs = [];
     const inheritedAttrVars = new Set();
     const templateRefs = new Map();
+    const stack = [];
+    const commentBuffer = [];
     return {
+        get currentInfo() {
+            return stack[stack.length - 1];
+        },
         codeFeatures: new Proxy(codeFeatures_1.codeFeatures, {
             get(target, key) {
                 const data = target[key];
@@ -156,11 +160,11 @@ function createTemplateCodegenContext(options) {
             },
         }),
         resolveCodeFeatures,
+        inVFor: false,
         slots,
         dynamicSlots,
         dollarVars,
         accessExternalVariables,
-        lastGenericComment,
         blockConditions,
         scopedClasses,
         emptyClassOffsets,
@@ -171,6 +175,13 @@ function createTemplateCodegenContext(options) {
         currentComponent: undefined,
         singleRootElTypes: [],
         singleRootNodes: new Set(),
+        addTemplateRef(name, typeExp, offset) {
+            let refs = templateRefs.get(name);
+            if (!refs) {
+                templateRefs.set(name, refs = []);
+            }
+            refs.push({ typeExp, offset });
+        },
         accessExternalVariable(name, offset) {
             let arr = accessExternalVariables.get(name);
             if (!arr) {
@@ -180,26 +191,26 @@ function createTemplateCodegenContext(options) {
                 arr.add(offset);
             }
         },
-        hasLocalVariable: (name) => {
+        hasLocalVariable(name) {
             return !!localVars.get(name);
         },
-        addLocalVariable: (name) => {
+        addLocalVariable(name) {
             localVars.set(name, (localVars.get(name) ?? 0) + 1);
         },
-        removeLocalVariable: (name) => {
+        removeLocalVariable(name) {
             localVars.set(name, localVars.get(name) - 1);
         },
-        getInternalVariable: () => {
+        getInternalVariable() {
             return `__VLS_${variableId++}`;
         },
-        getHoistVariable: (originalVar) => {
+        getHoistVariable(originalVar) {
             let name = hoistVars.get(originalVar);
             if (name === undefined) {
                 hoistVars.set(originalVar, name = `__VLS_${variableId++}`);
             }
             return name;
         },
-        generateHoistVariables: function* () {
+        *generateHoistVariables() {
             // trick to avoid TS 4081 (#5186)
             if (hoistVars.size) {
                 yield `// @ts-ignore${utils_1.newLine}`;
@@ -210,47 +221,12 @@ function createTemplateCodegenContext(options) {
                 yield utils_1.endOfLine;
             }
         },
-        generateConditionGuards: function* () {
+        *generateConditionGuards() {
             for (const condition of blockConditions) {
                 yield `if (!${condition}) return${utils_1.endOfLine}`;
             }
         },
-        ignoreError: function* () {
-            if (!ignoredError) {
-                ignoredError = true;
-                yield `// @vue-ignore start${utils_1.newLine}`;
-            }
-        },
-        expectError: function* (prevNode) {
-            if (!expectErrorToken) {
-                expectErrorToken = {
-                    errors: 0,
-                    node: prevNode,
-                };
-                yield `// @vue-expect-error start${utils_1.newLine}`;
-            }
-        },
-        resetDirectiveComments: function* (endStr) {
-            if (expectErrorToken) {
-                const token = expectErrorToken;
-                yield* (0, wrapWith_1.wrapWith)(expectErrorToken.node.loc.start.offset, expectErrorToken.node.loc.end.offset, {
-                    verification: {
-                        // If no errors/warnings/diagnostics were reported within the region of code covered
-                        // by the @vue-expect-error directive, then we should allow any `unused @ts-expect-error`
-                        // diagnostics to be reported upward.
-                        shouldReport: () => token.errors === 0,
-                    },
-                }, `// @ts-expect-error __VLS_TS_EXPECT_ERROR`);
-                yield `${utils_1.newLine}${utils_1.endOfLine}`;
-                expectErrorToken = undefined;
-                yield `// @vue-expect-error ${endStr}${utils_1.newLine}`;
-            }
-            if (ignoredError) {
-                ignoredError = false;
-                yield `// @vue-ignore ${endStr}${utils_1.newLine}`;
-            }
-        },
-        generateAutoImportCompletion: function* () {
+        *generateAutoImportCompletion() {
             const all = [...accessExternalVariables.entries()];
             if (!all.some(([_, offsets]) => offsets.size)) {
                 return;
@@ -284,7 +260,65 @@ function createTemplateCodegenContext(options) {
                 offsets.clear();
             }
             yield `]${utils_1.endOfLine}`;
-        }
+        },
+        enter(node) {
+            if (node.type === CompilerDOM.NodeTypes.COMMENT) {
+                commentBuffer.push(node);
+                return false;
+            }
+            const data = {};
+            const comments = [...commentBuffer];
+            commentBuffer.length = 0;
+            for (const comment of comments) {
+                const match = comment.loc.source.match(commentDirectiveRegex);
+                if (match) {
+                    const { name, content } = match.groups;
+                    switch (name) {
+                        case 'skip': {
+                            return false;
+                        }
+                        case 'ignore': {
+                            data.ignoreError = true;
+                            break;
+                        }
+                        case 'expect-error': {
+                            data.expectError = {
+                                token: 0,
+                                node: comment,
+                            };
+                            break;
+                        }
+                        case 'generic': {
+                            const text = content.trim();
+                            if (text.startsWith('{') && text.endsWith('}')) {
+                                data.generic = {
+                                    content: text.slice(1, -1),
+                                    offset: comment.loc.start.offset + comment.loc.source.indexOf('{') + 1,
+                                };
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+            stack.push(data);
+            return true;
+        },
+        *exit() {
+            const data = stack.pop();
+            commentBuffer.length = 0;
+            if (data.expectError !== undefined) {
+                yield* (0, wrapWith_1.wrapWith)(data.expectError.node.loc.start.offset, data.expectError.node.loc.end.offset, {
+                    verification: {
+                        // If no errors/warnings/diagnostics were reported within the region of code covered
+                        // by the @vue-expect-error directive, then we should allow any `unused @ts-expect-error`
+                        // diagnostics to be reported upward.
+                        shouldReport: () => data.expectError.token === 0,
+                    },
+                }, `// @ts-expect-error`);
+                yield `${utils_1.newLine}${utils_1.endOfLine}`;
+            }
+        },
     };
 }
 //# sourceMappingURL=context.js.map

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

@@ -2,5 +2,5 @@ import * as CompilerDOM from '@vue/compiler-dom';
 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, isVForChild: boolean): Generator<Code>;
-export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, isVForChild: boolean): Generator<Code>;
+export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;

package/lib/codegen/template/element.js

@@ -19,7 +19,7 @@ const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
 const vSlot_1 = require("./vSlot");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node, isVForChild) {
+function* generateComponent(options, ctx, node) {
     const tagOffsets = [node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag)];
     if (!node.isSelfClosing && options.template.lang === 'html') {
         const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
@@ -35,9 +35,11 @@ function* generateComponent(options, ctx, node, isVForChild) {
     const componentVNodeVar = ctx.getInternalVariable();
     const componentCtxVar = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
+    ctx.currentComponent?.childTypes.push(`typeof ${componentVNodeVar}`);
     ctx.currentComponent = {
         ctxVar: componentCtxVar,
-        used: false
+        childTypes: [],
+        used: false,
     };
     let props = node.props;
     let dynamicTagInfo;
@@ -101,9 +103,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
     else if (!isComponentTag) {
         yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
         if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
-            yield `typeof __VLS_self & (new () => { `
-                + (0, shared_2.getSlotsPropertyName)(options.vueCompilerOptions.target)
-                + `: __VLS_Slots }), `;
+            yield `typeof __VLS_self & (new () => { $slots: __VLS_Slots }), `;
         }
         else {
             yield `void, `;
@@ -159,7 +159,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
     yield* (0, wrapWith_1.wrapWith)(tagOffsets[0], tagOffsets[0] + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
     yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
-    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar);
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     const [refName, offset] = yield* generateElementReference(options, ctx, node);
     const tag = (0, shared_2.hyphenateTag)(node.tag);
@@ -168,15 +168,12 @@ function* generateComponent(options, ctx, node, isVForChild) {
         const componentInstanceVar = ctx.getInternalVariable();
         ctx.currentComponent.used = true;
         yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
-        if (isVForChild) {
+        if (ctx.inVFor) {
             yield `[]`;
         }
         yield `${utils_1.endOfLine}`;
         if (refName && offset) {
-            ctx.templateRefs.set(refName, {
-                typeExp: `typeof ${ctx.getHoistVariable(componentInstanceVar)}`,
-                offset
-            });
+            ctx.addTemplateRef(refName, `typeof ${ctx.getHoistVariable(componentInstanceVar)}`, offset);
         }
         if (isRootNode) {
             ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
@@ -189,24 +186,18 @@ function* generateComponent(options, ctx, node, isVForChild) {
     }
     (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    if (slotDir) {
-        yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
-    }
-    else {
-        // #932: reference for default slot
-        yield* (0, vSlot_1.generateImplicitDefaultSlot)(ctx, node);
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
-    }
+    yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
     if (ctx.currentComponent.used) {
-        yield `var ${componentCtxVar}!: __VLS_PickFunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+        yield `var ${componentCtxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
     }
 }
-function* generateElement(options, ctx, node, isVForChild) {
+function* generateElement(options, ctx, node) {
     const startTagOffset = node.loc.start.offset + options.template.content.slice(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)
         : undefined;
     const failedPropExps = [];
+    ctx.currentComponent?.childTypes.push(`__VLS_NativeElements['${node.tag}']`);
     yield `__VLS_asFunctionalElement(__VLS_elements`;
     yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     if (endTagOffset !== undefined) {
@@ -221,13 +212,10 @@ function* generateElement(options, ctx, node, isVForChild) {
     const [refName, offset] = yield* generateElementReference(options, ctx, node);
     if (refName && offset) {
         let typeExp = `__VLS_NativeElements['${node.tag}']`;
-        if (isVForChild) {
+        if (ctx.inVFor) {
             typeExp += `[]`;
         }
-        ctx.templateRefs.set(refName, {
-            typeExp,
-            offset
-        });
+        ctx.addTemplateRef(refName, typeExp, offset);
     }
     if (ctx.singleRootNodes.has(node)) {
         ctx.singleRootElTypes.push(`__VLS_NativeElements['${node.tag}']`);
@@ -236,7 +224,10 @@ function* generateElement(options, ctx, node, isVForChild) {
         ctx.inheritedAttrVars.add(`__VLS_elements.${node.tag}`);
     }
     (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
+    const { currentComponent } = ctx;
+    ctx.currentComponent = undefined;
+    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
+    ctx.currentComponent = currentComponent;
 }
 function* generateFailedPropExps(options, ctx, failedPropExps) {
     for (const failedExp of failedPropExps) {
@@ -271,8 +262,8 @@ function* generateCanonicalComponentName(tagText, offset, features) {
     }
 }
 function* generateComponentGeneric(ctx) {
-    if (ctx.lastGenericComment) {
-        const { content, offset } = ctx.lastGenericComment;
+    if (ctx.currentInfo.generic) {
+        const { content, offset } = ctx.currentInfo.generic;
         yield* (0, wrapWith_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
             content,
             'template',
@@ -280,7 +271,6 @@ function* generateComponentGeneric(ctx) {
             ctx.codeFeatures.all
         ], `>`);
     }
-    ctx.lastGenericComment = undefined;
 }
 function* generateElementReference(options, ctx, node) {
     for (const prop of node.props) {

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

@@ -1,5 +1,5 @@
-import * as CompilerDOM from '@vue/compiler-dom';
+import type * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, children: (CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode)[], enterNode?: boolean): Generator<Code>;

package/lib/codegen/template/elementChildren.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementChildren = generateElementChildren;
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node) {
-    yield* ctx.resetDirectiveComments('end of element children start');
-    let prev;
-    for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
-        prev = childNode;
+function* generateElementChildren(options, ctx, children, enterNode = true) {
+    yield* ctx.generateAutoImportCompletion();
+    for (const childNode of children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, enterNode);
     }
     yield* ctx.generateAutoImportCompletion();
 }

package/lib/codegen/template/elementDirectives.js

@@ -26,9 +26,7 @@ function* generateElementDirectives(options, ctx, node) {
             || prop.name === 'slot'
             || prop.name === 'on'
             || prop.name === 'model'
-            || prop.name === 'bind'
-            || prop.name === 'scope'
-            || prop.name === 'data') {
+            || prop.name === 'bind') {
             continue;
         }
         ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
@@ -39,9 +37,7 @@ function* generateElementDirectives(options, ctx, node) {
 function* generateIdentifier(options, ctx, prop) {
     const rawName = 'v-' + prop.name;
     yield* (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, ctx.resolveCodeFeatures({
-        ...codeFeatures_1.codeFeatures.withoutHighlight,
-        // fix https://github.com/vuejs/language-tools/issues/1905
-        ...codeFeatures_1.codeFeatures.additionalCompletion,
+        ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
         verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
     })));
 }
@@ -83,6 +79,6 @@ function* generateValue(options, ctx, prop) {
     }
     yield* (0, wrapWith_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, `value`);
     yield `: `;
-    yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp, ctx.codeFeatures.all);
+    yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp);
 }
 //# sourceMappingURL=elementDirectives.js.map

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

@@ -1,10 +1,10 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type * as ts from 'typescript';
-import type { Code } from '../../types';
+import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentFunctionalVar: string, componentVNodeVar: string, componentCtxVar: string): Generator<Code>;
-export declare function generateEventArg(ctx: TemplateCodegenContext, name: string, start: number, directive?: string): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string, componentFunctionalVar: string, componentVNodeVar: string, componentCtxVar: string): Generator<Code>;
+export declare function generateEventArg(ctx: TemplateCodegenContext, name: string, start: number, directive?: string, features?: VueCodeInformation): Generator<Code>;
 export declare function generateEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function generateModelEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function isCompoundExpression(ts: typeof import('typescript'), ast: ts.SourceFile): boolean;

package/lib/codegen/template/elementEvents.js

@@ -11,9 +11,8 @@ const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const wrapWith_1 = require("../utils/wrapWith");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
-    let emitVar;
-    let eventsVar;
+function* generateElementEvents(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
+    let emitsVar;
     let propsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -23,12 +22,10 @@ function* generateElementEvents(options, ctx, node, componentFunctionalVar, comp
                     && prop.name === 'model'
                     && (!prop.arg || prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))) {
             ctx.currentComponent.used = true;
-            if (!emitVar) {
-                emitVar = ctx.getInternalVariable();
-                eventsVar = ctx.getInternalVariable();
+            if (!emitsVar) {
+                emitsVar = ctx.getInternalVariable();
                 propsVar = ctx.getInternalVariable();
-                yield `let ${emitVar}!: typeof ${componentCtxVar}.emit${utils_1.endOfLine}`;
-                yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${utils_1.endOfLine}`;
+                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${componentCtxVar}.emit>${utils_1.endOfLine}`;
                 yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
             }
             let source = prop.arg?.loc.source ?? 'model-value';
@@ -45,32 +42,43 @@ function* generateElementEvents(options, ctx, node, componentFunctionalVar, comp
                 propPrefix = 'onVnode-';
                 emitPrefix = 'vnode-';
             }
-            yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${(0, shared_1.camelize)(propPrefix + source)}', '${emitPrefix + source}', '${(0, shared_1.camelize)(emitPrefix + source)}'> => ({${utils_1.newLine}`;
+            const propName = (0, shared_1.camelize)(propPrefix + source);
+            const emitName = emitPrefix + source;
+            const camelizedEmitName = (0, shared_1.camelize)(emitName);
+            yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> => (${utils_1.newLine}`;
+            if (prop.name === 'on') {
+                yield `{ `;
+                yield* generateEventArg(ctx, source, start, emitPrefix.slice(0, -1), ctx.codeFeatures.navigation);
+                yield `: {} as any } as typeof ${emitsVar},${utils_1.newLine}`;
+            }
+            yield `{ `;
             if (prop.name === 'on') {
                 yield* generateEventArg(ctx, source, start, propPrefix.slice(0, -1));
                 yield `: `;
                 yield* generateEventExpression(options, ctx, prop);
             }
             else {
-                yield `'${(0, shared_1.camelize)(propPrefix + source)}': `;
+                yield `'${propName}': `;
                 yield* generateModelEventExpression(options, ctx, prop);
             }
             yield `})${utils_1.endOfLine}`;
         }
     }
 }
-function* generateEventArg(ctx, name, start, directive = 'on') {
-    const features = {
-        ...ctx.codeFeatures.withoutHighlightAndCompletion,
-        ...ctx.codeFeatures.navigationWithoutRename,
-    };
+function* generateEventArg(ctx, name, start, directive = 'on', features = {
+    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+    ...ctx.codeFeatures.navigationWithoutRename,
+}) {
+    if (directive.length) {
+        name = (0, shared_1.capitalize)(name);
+    }
     if (utils_1.identifierRegex.test((0, shared_1.camelize)(name))) {
         yield ['', 'template', start, features];
         yield directive;
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping);
+        yield* (0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping);
     }
     else {
-        yield* (0, wrapWith_1.wrapWith)(start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping), `'`);
+        yield* (0, wrapWith_1.wrapWith)(start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping), `'`);
     }
 }
 function* generateEventExpression(options, ctx, prop) {
@@ -108,7 +116,6 @@ function* generateEventExpression(options, ctx, prop) {
         if (_isCompoundExpression) {
             ctx.removeLocalVariable('$event');
             yield utils_1.endOfLine;
-            yield* ctx.generateAutoImportCompletion();
             yield `}`;
         }
     }

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

@@ -1,5 +1,5 @@
 import * as CompilerDOM from '@vue/compiler-dom';
-import type { Code, VueCodeInformation } from '../../types';
+import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export interface FailedPropExpression {
@@ -8,4 +8,4 @@ export interface FailedPropExpression {
     suffix: string;
 }
 export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, enableCodeFeatures: boolean, failedPropExps?: FailedPropExpression[]): Generator<Code>;
-export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined, features: VueCodeInformation, enableCodeFeatures?: boolean): Generator<Code>;
+export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined, enableCodeFeatures?: boolean): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -83,7 +83,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
             const codes = [...(0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(prop.arg
                     ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, codeInfo, prop.loc.name_2 ??= {}, shouldCamelize)
-                    : (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.withoutHighlightAndCompletion, propName)), `: `, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures))];
+                    : (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.withoutHighlightAndCompletion, propName)), `: `, ...(0, wrapWith_1.wrapWith)(prop.arg?.loc.start.offset ?? prop.loc.start.offset, prop.arg?.loc.end.offset ?? prop.loc.end.offset, ctx.codeFeatures.verification, ...generatePropExp(options, ctx, prop, prop.exp, enableCodeFeatures)))];
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -111,11 +111,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
         }
         else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
-            if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))
-                // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom` always adds it (#3881)
-                || (options.vueCompilerOptions.target < 3
-                    && prop.name === 'persisted'
-                    && node.tag.toLowerCase() === 'transition')) {
+            if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))) {
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
@@ -148,7 +144,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                 }
             }
             else {
-                const codes = [...(0, wrapWith_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures))];
+                const codes = [...(0, wrapWith_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, enableCodeFeatures))];
                 if (enableCodeFeatures) {
                     yield* codes;
                 }
@@ -160,14 +156,11 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
         }
     }
 }
-function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures = true) {
+function* generatePropExp(options, ctx, prop, exp, enableCodeFeatures = true) {
     const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
-    if (isShorthand && features.completion) {
-        features = {
-            ...features,
-            completion: undefined,
-        };
-    }
+    const features = isShorthand
+        ? ctx.codeFeatures.withoutHighlightAndCompletion
+        : ctx.codeFeatures.all;
     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, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, `(`, `)`);
@@ -275,6 +268,6 @@ function getModelPropName(node, vueCompilerOptions) {
             }
         }
     }
-    return vueCompilerOptions.target < 3 ? 'value' : 'modelValue';
+    return 'modelValue';
 }
 //# sourceMappingURL=elementProps.js.map

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

@@ -1,7 +1,7 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
-import { TemplateCodegenContext } from './context';
+import { type TemplateCodegenContext } from './context';
 export interface TemplateCodegenOptions {
     ts: typeof ts;
     compilerOptions: ts.CompilerOptions;