@vue/language-core 2.0.14 → 2.0.15

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

@@ -6,4 +6,4 @@ import { ScriptCodegenOptions } from './index';
 export declare function generateComponent(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;
 export declare function generateComponentSetupReturns(scriptSetupRanges: ScriptSetupRanges): Generator<Code>;
 export declare function generateScriptOptions(script: NonNullable<Sfc['script']>, scriptRanges: ScriptRanges): Generator<Code>;
-export declare function generateScriptSetupOptions(ctx: ScriptCodegenContext, scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;
+export declare function generateScriptSetupOptions(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;

package/lib/codegen/script/component.js

@@ -23,7 +23,7 @@ function* generateComponent(options, ctx, scriptSetup, scriptSetupRanges) {
     yield `}${common_1.endOfLine}`;
     yield `},${common_1.newLine}`;
     if (!ctx.bypassDefineComponent) {
-        yield* generateScriptSetupOptions(ctx, scriptSetup, scriptSetupRanges);
+        yield* generateScriptSetupOptions(options, ctx, scriptSetup, scriptSetupRanges);
     }
     if (options.sfc.script && options.scriptRanges) {
         yield* generateScriptOptions(options.sfc.script, options.scriptRanges);
@@ -50,7 +50,7 @@ function* generateScriptOptions(script, scriptRanges) {
     }
 }
 exports.generateScriptOptions = generateScriptOptions;
-function* generateScriptSetupOptions(ctx, scriptSetup, scriptSetupRanges) {
+function* generateScriptSetupOptions(options, ctx, scriptSetup, scriptSetupRanges) {
     const propsCodegens = [];
     if (ctx.generatedPropsType) {
         propsCodegens.push(function* () {
@@ -59,8 +59,7 @@ function* generateScriptSetupOptions(ctx, scriptSetup, scriptSetupRanges) {
                 yield `${ctx.helperTypes.WithDefaults.name}<`;
             }
             yield `${ctx.helperTypes.TypePropsToOption.name}<`;
-            yield `typeof __VLS_componentProps`;
-            yield `>`;
+            yield `__VLS_PublicProps>`;
             if (scriptSetupRanges.props.withDefaults?.arg) {
                 yield `, typeof __VLS_withDefaultsArg>`;
             }
@@ -96,6 +95,15 @@ function* generateScriptSetupOptions(ctx, scriptSetup, scriptSetupRanges) {
         }
         yield `>),${common_1.newLine}`;
     }
+    if (options.vueCompilerOptions.target >= 3.5) {
+        // https://github.com/vuejs/core/pull/10801
+        if (scriptSetupRanges.props.define?.typeArg) {
+            yield `__typeProps: typeof __VLS_typeProps,${common_1.newLine}`;
+        }
+        if (scriptSetupRanges.emits.define?.typeArg) {
+            yield `__typeEmits: typeof ${scriptSetupRanges.emits.name ?? '__VLS_emit'},${common_1.newLine}`;
+        }
+    }
 }
 exports.generateScriptSetupOptions = generateScriptSetupOptions;
 //# sourceMappingURL=component.js.map

package/lib/codegen/script/globalTypes.js

@@ -80,7 +80,7 @@ declare global {
 		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
 		: T extends (...args: any) => any ? T
 		: (_: {}${vueCompilerOptions.strictTemplates ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {}${vueCompilerOptions.strictTemplates ? '' : ' & Record<string, unknown>'} } };
-	function __VLS_elementAsFunctionalComponent<T>(t: T): (_: T${vueCompilerOptions.strictTemplates ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: T${vueCompilerOptions.strictTemplates ? '' : ' & Record<string, unknown>'} } };
+	function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T${vueCompilerOptions.strictTemplates ? '' : ' & Record<string, unknown>'}) => void;
 	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): Parameters<T>['length'] extends 2 ? [any] : [];
 	function __VLS_pickEvent<E1, E2>(emitEvent: E1, propEvent: E2): __VLS_FillingEventArg<
 		__VLS_PickNotAny<

package/lib/codegen/script/internalComponent.js

@@ -40,7 +40,7 @@ function* generateInternalComponent(options, ctx, templateCodegenCtx) {
         yield `}${common_1.endOfLine}`; // return {
         yield `},${common_1.newLine}`; // setup() {
         if (options.sfc.scriptSetup && options.scriptSetupRanges && !ctx.bypassDefineComponent) {
-            yield* (0, component_1.generateScriptSetupOptions)(ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
+            yield* (0, component_1.generateScriptSetupOptions)(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
         }
         if (options.sfc.script && options.scriptRanges) {
             yield* (0, component_1.generateScriptOptions)(options.sfc.script, options.scriptRanges);

package/lib/codegen/script/scriptSetup.js

@@ -37,7 +37,7 @@ function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
             + `	__VLS_setup = (async () => {${common_1.newLine}`;
         yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, undefined, definePropMirrors);
         yield `		return {} as {${common_1.newLine}`
-            + `			props: ${ctx.helperTypes.Prettify.name}<typeof __VLS_functionalComponentProps & typeof __VLS_componentProps> & typeof __VLS_publicProps,${common_1.newLine}`
+            + `			props: ${ctx.helperTypes.Prettify.name}<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: ReturnType<typeof __VLS_template>,${common_1.newLine}`
@@ -101,24 +101,57 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
     }
     ctx.scriptSetupGeneratedOffset = options.getGeneratedLength() - scriptSetupRanges.importSectionEndOffset;
     let setupCodeModifies = [];
-    if (scriptSetupRanges.props.define && !scriptSetupRanges.props.name) {
-        const range = scriptSetupRanges.props.withDefaults ?? scriptSetupRanges.props.define;
+    const propsRange = scriptSetupRanges.props.withDefaults ?? scriptSetupRanges.props.define;
+    if (propsRange && scriptSetupRanges.props.define) {
         const statement = scriptSetupRanges.props.define.statement;
-        if (statement.start === range.start && statement.end === range.end) {
-            setupCodeModifies.push([[`const __VLS_props = `], range.start, range.start]);
-        }
-        else {
+        if (scriptSetupRanges.props.define.typeArg) {
             setupCodeModifies.push([[
-                    `const __VLS_props = `,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, range.start, range.end, index_1.codeFeatures.all),
-                    `${common_1.endOfLine}`,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, statement.start, range.start, index_1.codeFeatures.all),
-                    `__VLS_props`,
-                ], statement.start, range.end]);
+                    `let __VLS_typeProps!: `,
+                    (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.props.define.typeArg.start, scriptSetupRanges.props.define.typeArg.end, index_1.codeFeatures.all),
+                    common_1.endOfLine,
+                ], statement.start, statement.start]);
+            setupCodeModifies.push([[`typeof __VLS_typeProps`], scriptSetupRanges.props.define.typeArg.start, scriptSetupRanges.props.define.typeArg.end]);
+        }
+        if (!scriptSetupRanges.props.name) {
+            if (statement.start === propsRange.start && statement.end === propsRange.end) {
+                setupCodeModifies.push([[`const __VLS_props = `], propsRange.start, propsRange.start]);
+            }
+            else {
+                if (scriptSetupRanges.props.define.typeArg) {
+                    setupCodeModifies.push([[
+                            `const __VLS_props = `,
+                            (0, common_1.generateSfcBlockSection)(scriptSetup, propsRange.start, scriptSetupRanges.props.define.typeArg.start, index_1.codeFeatures.all),
+                        ], statement.start, scriptSetupRanges.props.define.typeArg.start]);
+                    setupCodeModifies.push([[
+                            (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.props.define.typeArg.end, propsRange.end, index_1.codeFeatures.all),
+                            `${common_1.endOfLine}`,
+                            (0, common_1.generateSfcBlockSection)(scriptSetup, statement.start, propsRange.start, index_1.codeFeatures.all),
+                            `__VLS_props`,
+                        ], scriptSetupRanges.props.define.typeArg.end, propsRange.end]);
+                }
+                else {
+                    setupCodeModifies.push([[
+                            `const __VLS_props = `,
+                            (0, common_1.generateSfcBlockSection)(scriptSetup, propsRange.start, propsRange.end, index_1.codeFeatures.all),
+                            `${common_1.endOfLine}`,
+                            (0, common_1.generateSfcBlockSection)(scriptSetup, statement.start, propsRange.start, index_1.codeFeatures.all),
+                            `__VLS_props`,
+                        ], statement.start, propsRange.end]);
+                }
+            }
         }
     }
-    if (scriptSetupRanges.slots.define && !scriptSetupRanges.slots.name) {
-        setupCodeModifies.push([[`const __VLS_slots = `], scriptSetupRanges.slots.define.start, scriptSetupRanges.slots.define.start]);
+    if (scriptSetupRanges.slots.define) {
+        if (!scriptSetupRanges.slots.name) {
+            setupCodeModifies.push([[`const __VLS_slots = `], scriptSetupRanges.slots.define.start, scriptSetupRanges.slots.define.start]);
+        }
+        else if (scriptSetupRanges.slots.isObjectBindingPattern) {
+            setupCodeModifies.push([
+                [`__VLS_slots;\nconst __VLS_slots = `],
+                scriptSetupRanges.slots.define.start,
+                scriptSetupRanges.slots.define.start,
+            ]);
+        }
     }
     if (scriptSetupRanges.emits.define && !scriptSetupRanges.emits.name) {
         setupCodeModifies.push([[`const __VLS_emit = `], scriptSetupRanges.emits.define.start, scriptSetupRanges.emits.define.start]);
@@ -214,13 +247,13 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, d
         }
         yield `})${common_1.endOfLine}`;
         yield `let __VLS_functionalComponentProps!: `;
-        yield `${ctx.helperTypes.OmitKeepDiscriminatedUnion.name}<InstanceType<typeof __VLS_fnComponent>['$props'], keyof typeof __VLS_publicProps>`;
+        yield `${ctx.helperTypes.OmitKeepDiscriminatedUnion.name}<InstanceType<typeof __VLS_fnComponent>['$props'], keyof __VLS_BuiltInPublicProps>`;
         yield common_1.endOfLine;
     }
     else {
         yield `let __VLS_functionalComponentProps!: {}${common_1.endOfLine}`;
     }
-    yield `let __VLS_publicProps!:${common_1.newLine}`
+    yield `type __VLS_BuiltInPublicProps =${common_1.newLine}`
         + `	import('${options.vueCompilerOptions.lib}').VNodeProps${common_1.newLine}`
         + `	& import('${options.vueCompilerOptions.lib}').AllowedComponentProps${common_1.newLine}`
         + `	& import('${options.vueCompilerOptions.lib}').ComponentCustomProps${common_1.endOfLine}`;
@@ -241,7 +274,7 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, d
         }
         yield `}${common_1.endOfLine}`;
     }
-    yield `let __VLS_componentProps!: `;
+    yield `type __VLS_PublicProps = `;
     if (scriptSetupRanges.slots.define && options.vueCompilerOptions.jsxSlots) {
         if (ctx.generatedPropsType) {
             yield ` & `;
@@ -302,7 +335,7 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, d
             yield ` & `;
         }
         ctx.generatedPropsType = true;
-        yield (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.props.define.typeArg.start, scriptSetupRanges.props.define.typeArg.end, index_1.codeFeatures.all);
+        yield `typeof __VLS_typeProps`;
     }
     if (!ctx.generatedPropsType) {
         yield `{}`;

package/lib/codegen/script/template.js

@@ -97,9 +97,7 @@ function* generateTemplateContext(options, ctx, templateCodegenCtx) {
     }
     yield common_1.endOfLine;
     yield `let __VLS_styleScopedClasses!: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[]${common_1.endOfLine}`;
-    yield `/* CSS variable injection */${common_1.newLine}`;
     yield* generateCssVars(options, templateCodegenCtx);
-    yield `/* CSS variable injection end */${common_1.newLine}`;
     if (options.templateCodegen) {
         for (const code of options.templateCodegen.tsCodes) {
             yield code;
@@ -147,6 +145,10 @@ function* generateCssClassProperty(styleIndex, classNameWithDot, offset, propert
     yield ` }`;
 }
 function* generateCssVars(options, ctx) {
+    if (!options.sfc.styles.length) {
+        return;
+    }
+    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, options.vueCompilerOptions, ctx, cssBind.text, cssBind.offset, options.ts.createSourceFile('/a.txt', cssBind.text, 99))) {
@@ -167,6 +169,7 @@ function* generateCssVars(options, ctx) {
             yield common_1.endOfLine;
         }
     }
+    yield `// CSS variable injection end ${common_1.newLine}`;
 }
 function getTemplateUsageVars(options, ctx) {
     const usageVars = new Set();

package/lib/codegen/template/context.js

@@ -146,7 +146,6 @@ function createTemplateCodegenContext() {
         generateAutoImportCompletion: function* () {
             const all = [...accessGlobalVariables.entries()];
             if (!all.some(([_, offsets]) => offsets.size)) {
-                yield `// no auto imports${common_1.endOfLine}`;
                 return;
             }
             yield `// @ts-ignore${common_1.newLine}`; // #2304

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

@@ -2,6 +2,7 @@ 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 generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentElement: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateComponent(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): Generator<Code>;
 export declare function getCanonicalComponentName(tagText: string): string;
 export declare function getPossibleOriginalComponentNames(tagText: string, deduplicate: boolean): string[];

package/lib/codegen/template/element.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPossibleOriginalComponentNames = exports.getCanonicalComponentName = exports.generateElement = void 0;
+exports.getPossibleOriginalComponentNames = exports.getCanonicalComponentName = exports.generateElement = exports.generateComponent = void 0;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
+const shared_2 = require("../../utils/shared");
 const common_1 = require("../common");
 const camelized_1 = require("./camelized");
 const elementChildren_1 = require("./elementChildren");
@@ -11,18 +12,15 @@ const elementEvents_1 = require("./elementEvents");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const propertyAccess_1 = require("./propertyAccess");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 const templateChild_1 = require("./templateChild");
 const colonReg = /:/g;
-function* generateElement(options, ctx, node, currentElement, componentCtxVar) {
+function* generateComponent(options, ctx, node, currentComponent, componentCtxVar) {
     const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
     const propsFailedExps = [];
     const var_originalComponent = ctx.getInternalVariable();
     const var_functionalComponent = ctx.getInternalVariable();
     const var_componentInstance = ctx.getInternalVariable();
     const var_componentEvents = ctx.getInternalVariable();
-    const isIntrinsicElement = node.tagType === CompilerDOM.ElementTypes.ELEMENT
-        || node.tagType === CompilerDOM.ElementTypes.TEMPLATE;
     const isComponentTag = node.tag.toLowerCase() === 'component';
     let endTagOffset = !node.isSelfClosing && options.template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
     let tag = node.tag;
@@ -54,12 +52,7 @@ function* generateElement(options, ctx, node, currentElement, componentCtxVar) {
             offset: startTagOffset,
         };
     }
-    if (isIntrinsicElement) {
-        yield `const ${var_originalComponent} = __VLS_intrinsicElements[`;
-        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(tag, startTagOffset, ctx.codeFeatures.verification);
-        yield `]${common_1.endOfLine}`;
-    }
-    else if (dynamicTagInfo) {
+    if (dynamicTagInfo) {
         yield `const ${var_originalComponent} = `;
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offset, ctx.codeFeatures.all, '(', ')');
         yield common_1.endOfLine;
@@ -78,22 +71,48 @@ function* generateElement(options, ctx, node, currentElement, componentCtxVar) {
     else {
         yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
     }
-    if (isIntrinsicElement) {
-        yield `const ${var_functionalComponent} = __VLS_elementAsFunctionalComponent(${var_originalComponent})${common_1.endOfLine}`;
-    }
-    else {
-        yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
-        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
-        yield `}))${common_1.endOfLine}`;
-    }
+    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
+    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
+    yield `}))${common_1.endOfLine}`;
     if (!dynamicTagInfo
-        && !isIntrinsicElement
         && !isComponentTag) {
+        // hover support
         for (const offset of tagOffsets) {
             yield `({} as { ${getCanonicalComponentName(tag)}: typeof ${var_originalComponent} }).`;
             yield* generateCanonicalComponentName(tag, offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
             yield common_1.endOfLine;
         }
+        const camelizedTag = (0, shared_1.camelize)(node.tag);
+        if (common_1.variableNameRegex.test(camelizedTag)) {
+            // renaming / find references support
+            for (const tagOffset of tagOffsets) {
+                for (const shouldCapitalize of (node.tag[0] === node.tag[0].toUpperCase() ? [false] : [true, false])) {
+                    const expectName = shouldCapitalize ? (0, shared_1.capitalize)(camelizedTag) : camelizedTag;
+                    yield `__VLS_components.`;
+                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
+                        navigation: {
+                            resolveRenameNewName: node.tag !== expectName ? camelizeComponentName : undefined,
+                            resolveRenameEditText: getTagRenameApply(node.tag),
+                        },
+                    });
+                    yield `;`;
+                }
+            }
+            yield `${common_1.newLine}`;
+            // auto import support
+            yield `// @ts-ignore${common_1.newLine}`; // #2304
+            yield `[`;
+            for (const tagOffset of tagOffsets) {
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffset, {
+                    completion: {
+                        isAdditional: true,
+                        onlyImport: true,
+                    },
+                });
+                yield `,`;
+            }
+            yield `]${common_1.endOfLine}`;
+        }
     }
     if (options.vueCompilerOptions.strictTemplates) {
         // with strictTemplates, generate once for props type-checking + instance type
@@ -111,16 +130,63 @@ function* generateElement(options, ctx, node, currentElement, componentCtxVar) {
         yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
         yield `)${common_1.endOfLine}`;
     }
-    if (node.tagType !== CompilerDOM.ElementTypes.TEMPLATE) {
-        defineComponentCtxVar = ctx.getInternalVariable();
-        componentCtxVar = defineComponentCtxVar;
-        currentElement = node;
+    defineComponentCtxVar = ctx.getInternalVariable();
+    componentCtxVar = defineComponentCtxVar;
+    currentComponent = node;
+    for (const failedExp of propsFailedExps) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.loc.source, failedExp.loc, failedExp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
+        yield common_1.endOfLine;
+    }
+    yield* generateVScope(options, ctx, node, props);
+    if (componentCtxVar) {
+        ctx.usedComponentCtxVars.add(componentCtxVar);
+        yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents, () => usedComponentEventsVar = true);
+    }
+    const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
+    if (slotDir && componentCtxVar) {
+        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
+    }
+    else {
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+    }
+    if (defineComponentCtxVar && ctx.usedComponentCtxVars.has(defineComponentCtxVar)) {
+        yield `const ${componentCtxVar} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})!${common_1.endOfLine}`;
     }
-    //#region fix #1775
+    if (usedComponentEventsVar) {
+        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${componentCtxVar}.emit>${common_1.endOfLine}`;
+    }
+}
+exports.generateComponent = generateComponent;
+function* generateElement(options, ctx, node, currentComponent, componentCtxVar) {
+    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)
+        : undefined;
+    const propsFailedExps = [];
+    yield `__VLS_elementAsFunction(__VLS_intrinsicElements`;
+    yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
+    if (endTagOffset !== undefined) {
+        yield `, __VLS_intrinsicElements`;
+        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, endTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
+    }
+    yield `)(`;
+    yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, true, propsFailedExps), `}`);
+    yield `)${common_1.endOfLine}`;
     for (const failedExp of propsFailedExps) {
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.loc.source, failedExp.loc, failedExp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
         yield common_1.endOfLine;
     }
+    yield* generateVScope(options, ctx, node, node.props);
+    const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
+    if (slotDir && componentCtxVar) {
+        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
+    }
+    else {
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+    }
+}
+exports.generateElement = generateElement;
+function* generateVScope(options, ctx, node, props) {
     const vScope = props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && (prop.name === 'scope' || prop.name === 'data'));
     let inScope = false;
     let originalConditionsNum = ctx.blockConditions.length;
@@ -144,30 +210,11 @@ function* generateElement(options, ctx, node, currentElement, componentCtxVar) {
     if (options.shouldGenerateScopedClasses) {
         yield* generateReferencesForScopedCssClasses(ctx, node);
     }
-    if (componentCtxVar) {
-        ctx.usedComponentCtxVars.add(componentCtxVar);
-        yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents, () => usedComponentEventsVar = true);
-    }
     if (inScope) {
         yield `}${common_1.newLine}`;
         ctx.blockConditions.length = originalConditionsNum;
     }
-    //#endregion
-    const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    if (slotDir && componentCtxVar) {
-        yield* generateComponentSlot(options, ctx, node, slotDir, currentElement, componentCtxVar);
-    }
-    else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentElement, componentCtxVar);
-    }
-    if (defineComponentCtxVar && ctx.usedComponentCtxVars.has(defineComponentCtxVar)) {
-        yield `const ${componentCtxVar} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})!${common_1.endOfLine}`;
-    }
-    if (usedComponentEventsVar) {
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${componentCtxVar}.emit>${common_1.endOfLine}`;
-    }
 }
-exports.generateElement = generateElement;
 function getCanonicalComponentName(tagText) {
     return common_1.variableNameRegex.test(tagText)
         ? tagText
@@ -196,11 +243,11 @@ function* generateCanonicalComponentName(tagText, offset, features) {
         yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), offset, features);
     }
 }
-function* generateComponentSlot(options, ctx, node, slotDir, currentElement, componentCtxVar) {
+function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar) {
     yield `{${common_1.newLine}`;
     ctx.usedComponentCtxVars.add(componentCtxVar);
-    if (currentElement) {
-        ctx.hasSlotElements.add(currentElement);
+    if (currentComponent) {
+        ctx.hasSlotElements.add(currentComponent);
     }
     const slotBlockVars = [];
     let hasProps = false;
@@ -249,7 +296,7 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentElement, com
     yield* ctx.resetDirectiveComments('end of slot children start');
     let prev;
     for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentElement, prev, componentCtxVar);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar);
         prev = childNode;
     }
     for (const varName of slotBlockVars) {
@@ -322,4 +369,10 @@ function* generateReferencesForScopedCssClasses(ctx, node) {
         }
     }
 }
+function camelizeComponentName(newName) {
+    return (0, shared_1.camelize)('-' + newName);
+}
+function getTagRenameApply(oldName) {
+    return oldName === (0, shared_2.hyphenateTag)(oldName) ? shared_2.hyphenateTag : undefined;
+}
 //# sourceMappingURL=element.js.map

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

@@ -1,5 +1,5 @@
-import type * as CompilerDOM from '@vue/compiler-dom';
+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 generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentElement: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;

package/lib/codegen/template/elementChildren.js

@@ -1,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementChildren = void 0;
+const CompilerDOM = require("@vue/compiler-dom");
 const common_1 = require("../common");
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node, currentElement, componentCtxVar) {
+function* generateElementChildren(options, ctx, node, currentComponent, componentCtxVar) {
     yield* ctx.resetDirectiveComments('end of element children start');
     let prev;
     for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentElement, prev, componentCtxVar);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar);
         prev = childNode;
     }
+    yield* ctx.generateAutoImportCompletion();
     // fix https://github.com/vuejs/language-tools/issues/932
-    if (!ctx.hasSlotElements.has(node) && node.children.length) {
+    if (!ctx.hasSlotElements.has(node)
+        && node.children.length
+        && node.tagType !== CompilerDOM.ElementTypes.ELEMENT
+        && node.tagType !== CompilerDOM.ElementTypes.TEMPLATE) {
         yield `(${componentCtxVar}.slots!).`;
         yield* (0, common_1.wrapWith)(node.children[0].loc.start.offset, node.children[node.children.length - 1].loc.end.offset, ctx.codeFeatures.navigation, `default`);
         yield common_1.endOfLine;

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

@@ -4,4 +4,6 @@ import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, eventsVar: string, used: () => void): Generator<Code>;
+export declare function generateEventArg(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, arg: CompilerDOM.SimpleExpressionNode, access: boolean): Generator<Code>;
+export declare function generateEventExpression(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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCompoundExpression = exports.generateElementEvents = void 0;
+exports.isCompoundExpression = exports.generateEventExpression = exports.generateEventArg = exports.generateElementEvents = void 0;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const shared_2 = require("../../utils/shared");
@@ -18,33 +18,7 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             yield `let ${eventVar} = { '${prop.arg.loc.source}': __VLS_pickEvent(`;
             yield `${eventsVar}['${prop.arg.loc.source}'], `;
             yield `({} as __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>)`;
-            const startMappingFeatures = {
-                navigation: {
-                    // @click-outside -> onClickOutside
-                    resolveRenameNewName(newName) {
-                        return (0, shared_1.camelize)('on-' + newName);
-                    },
-                    // onClickOutside -> @click-outside
-                    resolveRenameEditText(newName) {
-                        const hName = (0, shared_2.hyphenateAttr)(newName);
-                        if ((0, shared_2.hyphenateAttr)(newName).startsWith('on-')) {
-                            return (0, shared_1.camelize)(hName.slice('on-'.length));
-                        }
-                        return newName;
-                    },
-                },
-            };
-            if (common_1.variableNameRegex.test((0, shared_1.camelize)(prop.arg.loc.source))) {
-                yield `.`;
-                yield ['', 'template', prop.arg.loc.start.offset, startMappingFeatures];
-                yield `on`;
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(prop.arg.loc.source), prop.arg.loc.start.offset, common_1.combineLastMapping);
-            }
-            else {
-                yield `[`;
-                yield* (0, common_1.wrapWith)(prop.arg.loc.start.offset, prop.arg.loc.end.offset, startMappingFeatures, `'`, ['', 'template', prop.arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(prop.arg.loc.source), prop.arg.loc.start.offset, common_1.combineLastMapping), `'`);
-                yield `]`;
-            }
+            yield* generateEventArg(options, ctx, prop.arg, true);
             yield `) }${common_1.endOfLine}`;
             yield `${eventVar} = { `;
             if (prop.arg.loc.source.startsWith('[') && prop.arg.loc.source.endsWith(']')) {
@@ -56,7 +30,7 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
                 yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, prop.arg.loc.source, prop.arg.loc.start.offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation, prop.arg.loc);
             }
             yield `: `;
-            yield* appendExpressionNode(options, ctx, prop);
+            yield* generateEventExpression(options, ctx, prop);
             yield ` }${common_1.endOfLine}`;
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -70,7 +44,48 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
     }
 }
 exports.generateElementEvents = generateElementEvents;
-function* appendExpressionNode(options, ctx, prop) {
+const eventArgFeatures = {
+    navigation: {
+        // @click-outside -> onClickOutside
+        resolveRenameNewName(newName) {
+            return (0, shared_1.camelize)('on-' + newName);
+        },
+        // onClickOutside -> @click-outside
+        resolveRenameEditText(newName) {
+            const hName = (0, shared_2.hyphenateAttr)(newName);
+            if ((0, shared_2.hyphenateAttr)(newName).startsWith('on-')) {
+                return (0, shared_1.camelize)(hName.slice('on-'.length));
+            }
+            return newName;
+        },
+    },
+};
+function* generateEventArg(options, ctx, arg, access) {
+    if (arg.loc.source.startsWith('[') && arg.loc.source.endsWith(']')) {
+        yield `[`;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, arg.loc.source.slice(1, -1), arg.loc, arg.loc.start.offset + 1, ctx.codeFeatures.all, '', '');
+        yield `]`;
+    }
+    else if (common_1.variableNameRegex.test((0, shared_1.camelize)(arg.loc.source))) {
+        if (access) {
+            yield `.`;
+        }
+        yield ['', 'template', arg.loc.start.offset, eventArgFeatures];
+        yield `on`;
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping);
+    }
+    else {
+        if (access) {
+            yield `[`;
+        }
+        yield* (0, common_1.wrapWith)(arg.loc.start.offset, arg.loc.end.offset, eventArgFeatures, `'`, ['', 'template', arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping), `'`);
+        if (access) {
+            yield `]`;
+        }
+    }
+}
+exports.generateEventArg = generateEventArg;
+function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         let prefix = '(';
         let suffix = ')';
@@ -109,13 +124,14 @@ function* appendExpressionNode(options, ctx, prop) {
             ctx.removeLocalVariable('$event');
             yield common_1.endOfLine;
             yield* ctx.generateAutoImportCompletion();
-            yield `}${common_1.newLine}`;
+            yield `}`;
         }
     }
     else {
         yield `() => {}`;
     }
 }
+exports.generateEventExpression = generateEventExpression;
 function isCompoundExpression(ts, ast) {
     let result = true;
     if (ast.statements.length === 1) {