@vue/language-core 2.1.8 → 2.2.0

package/lib/codegen/template/element.js

@@ -2,31 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateComponent = generateComponent;
 exports.generateElement = generateElement;
-exports.getCanonicalComponentName = getCanonicalComponentName;
-exports.getPossibleOriginalComponentNames = getPossibleOriginalComponentNames;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
+const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
 const elementChildren_1 = require("./elementChildren");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
+const objectProperty_1 = require("./objectProperty");
 const propertyAccess_1 = require("./propertyAccess");
 const templateChild_1 = require("./templateChild");
-const objectProperty_1 = require("./objectProperty");
-const inlayHints_1 = require("../inlayHints");
-const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node, currentComponent) {
-    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 tagOffsets = endTagOffset !== undefined && endTagOffset > startTagOffset
-        ? [startTagOffset, endTagOffset]
-        : [startTagOffset];
-    const propsFailedExps = [];
+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);
+        if (endTagOffset > tagOffsets[0]) {
+            tagOffsets.push(endTagOffset);
+        }
+    }
+    const failedPropExps = [];
     const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
     const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
     const var_originalComponent = matchImportName ?? ctx.getInternalVariable();
@@ -36,6 +36,11 @@ function* generateComponent(options, ctx, node, currentComponent) {
     const var_componentEvents = ctx.getInternalVariable();
     const var_defineComponentCtx = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
+    ctx.currentComponent = {
+        node,
+        ctxVar: var_defineComponentCtx,
+        used: false
+    };
     let props = node.props;
     let dynamicTagInfo;
     if (isComponentTag) {
@@ -49,7 +54,7 @@ function* generateComponent(options, ctx, node, currentComponent) {
                 }
                 dynamicTagInfo = {
                     tag: prop.exp.content,
-                    offsets: [prop.exp.loc.start.offset, undefined],
+                    offsets: [prop.exp.loc.start.offset],
                     astHolder: prop.exp.loc,
                 };
                 props = props.filter(p => p !== prop);
@@ -61,15 +66,16 @@ function* generateComponent(options, ctx, node, currentComponent) {
         // namespace tag
         dynamicTagInfo = {
             tag: node.tag,
-            offsets: [startTagOffset, endTagOffset],
+            offsets: tagOffsets,
             astHolder: node.loc,
         };
     }
     if (matchImportName) {
         // hover, renaming / find references support
-        yield `// @ts-ignore${common_1.newLine}`; // #2304
-        yield `[`;
+        yield `// @ts-ignore${utils_1.newLine}`; // #2304
+        yield `/** @type { [`;
         for (const tagOffset of tagOffsets) {
+            yield `typeof `;
             if (var_originalComponent === node.tag) {
                 yield [
                     var_originalComponent,
@@ -79,7 +85,8 @@ function* generateComponent(options, ctx, node, currentComponent) {
                 ];
             }
             else {
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffset, {
+                const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
+                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
                     ...ctx.codeFeatures.withoutHighlightAndCompletion,
                     navigation: {
                         resolveRenameNewName: camelizeComponentName,
@@ -87,32 +94,32 @@ function* generateComponent(options, ctx, node, currentComponent) {
                     },
                 });
             }
-            yield `,`;
+            yield `, `;
         }
-        yield `]${common_1.endOfLine}`;
+        yield `] } */${utils_1.endOfLine}`;
     }
     else if (dynamicTagInfo) {
         yield `const ${var_originalComponent} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.tag, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', ')');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], dynamicTagInfo.astHolder, '(', ')');
         if (dynamicTagInfo.offsets[1] !== undefined) {
             yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.tag, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], {
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', {
                 ...ctx.codeFeatures.all,
                 completion: false,
-            }, '(', ')');
+            }, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], dynamicTagInfo.astHolder, '(', ')');
         }
-        yield `)${common_1.endOfLine}`;
+        yield `)${utils_1.endOfLine}`;
     }
     else if (!isComponentTag) {
-        yield `const ${var_originalComponent} = __VLS_resolvedLocalAndGlobalComponents.`;
-        yield* generateCanonicalComponentName(node.tag, startTagOffset, {
-            // with hover support
-            ...ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation,
-            ...ctx.codeFeatures.verification,
-        });
-        yield `${common_1.endOfLine}`;
+        yield `const ${var_originalComponent} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
+        yield getPossibleOriginalComponentNames(node.tag, false)
+            .map(name => `'${name}'`)
+            .join(`, `);
+        yield `>).`;
+        yield* generateCanonicalComponentName(node.tag, tagOffsets[0], ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
+        yield `${utils_1.endOfLine}`;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
-        if (common_1.variableNameRegex.test(camelizedTag)) {
+        if (utils_1.variableNameRegex.test(camelizedTag)) {
             // renaming / find references support
             yield `/** @type { [`;
             for (const tagOffset of tagOffsets) {
@@ -128,47 +135,53 @@ function* generateComponent(options, ctx, node, currentComponent) {
                     yield `, `;
                 }
             }
-            yield `] } */${common_1.newLine}`;
+            yield `] } */${utils_1.endOfLine}`;
             // auto import support
             if (options.edited) {
-                yield `// @ts-ignore${common_1.newLine}`; // #2304
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), startTagOffset, {
+                yield `// @ts-ignore${utils_1.newLine}`; // #2304
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffsets[0], {
                     completion: {
                         isAdditional: true,
                         onlyImport: true,
                     },
                 });
-                yield `${common_1.endOfLine}`;
+                yield `${utils_1.endOfLine}`;
             }
         }
     }
     else {
-        yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
-    }
-    yield `// @ts-ignore${common_1.newLine}`;
-    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_componentInstance} = ${var_functionalComponent}(`;
-    yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
-    yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
-    currentComponent = node;
-    for (const failedExp of propsFailedExps) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.node.loc.source, failedExp.node.loc, failedExp.node.loc.start.offset, ctx.codeFeatures.all, failedExp.prefix, failedExp.suffix);
-        yield common_1.endOfLine;
-    }
+        yield `const ${var_originalComponent} = {} as any${utils_1.endOfLine}`;
+    }
+    yield `// @ts-ignore${utils_1.newLine}`;
+    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({${utils_1.newLine}`;
+    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.strictTemplates, false);
+    yield `}))${utils_1.endOfLine}`;
+    yield `const `;
+    yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, {
+        verification: {
+            shouldReport(_source, code) {
+                return String(code) !== '6133';
+            },
+        }
+    }, var_componentInstance);
+    yield ` = ${var_functionalComponent}`;
+    yield* generateComponentGeneric(ctx);
+    yield `(`;
+    yield* (0, utils_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.strictTemplates, true, failedPropExps), `}`);
+    yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${utils_1.endOfLine}`;
+    yield* generateFailedPropExps(options, ctx, failedPropExps);
     const [refName, offset] = yield* generateVScope(options, ctx, node, props);
     const isRootNode = node === ctx.singleRootNode;
     if (refName || isRootNode) {
         const varName = ctx.getInternalVariable();
-        ctx.usedComponentCtxVars.add(var_defineComponentCtx);
+        ctx.currentComponent.used = true;
         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}`;
+        yield `${utils_1.endOfLine}`;
         if (refName) {
             ctx.templateRefs.set(refName, [varName, offset]);
         }
@@ -176,11 +189,11 @@ function* generateComponent(options, ctx, node, currentComponent) {
             ctx.singleRootElType = `NonNullable<typeof ${varName}>['$el']`;
         }
     }
-    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
+    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents);
     if (usedComponentEventsVar) {
-        ctx.usedComponentCtxVars.add(var_defineComponentCtx);
-        yield `let ${var_componentEmit}!: typeof ${var_defineComponentCtx}.emit${common_1.endOfLine}`;
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${common_1.endOfLine}`;
+        ctx.currentComponent.used = true;
+        yield `let ${var_componentEmit}!: typeof ${var_defineComponentCtx}.emit${utils_1.endOfLine}`;
+        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${utils_1.endOfLine}`;
     }
     if (options.vueCompilerOptions.fallthroughAttributes
         && (node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.exp?.loc.source === '$attrs')
@@ -191,21 +204,21 @@ function* generateComponent(options, ctx, node, currentComponent) {
     }
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     if (slotDir) {
-        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, var_defineComponentCtx);
+        yield* generateComponentSlot(options, ctx, node, slotDir);
     }
     else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, var_defineComponentCtx);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
     }
-    if (ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
-        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${common_1.endOfLine}`;
+    if (ctx.currentComponent.used) {
+        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${utils_1.endOfLine}`;
     }
 }
-function* generateElement(options, ctx, node, currentComponent, componentCtxVar, isVForChild) {
-    const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+function* generateElement(options, ctx, node, isVForChild) {
+    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 propsFailedExps = [];
+    const failedPropExps = [];
     yield `__VLS_elementAsFunction(__VLS_intrinsicElements`;
     yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     if (endTagOffset !== undefined) {
@@ -213,12 +226,9 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar,
         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.node.loc.source, failedExp.node.loc, failedExp.node.loc.start.offset, ctx.codeFeatures.all, failedExp.prefix, failedExp.suffix);
-        yield common_1.endOfLine;
-    }
+    yield* (0, utils_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.strictTemplates, true, failedPropExps), `}`);
+    yield `)${utils_1.endOfLine}`;
+    yield* generateFailedPropExps(options, ctx, failedPropExps);
     const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
     if (refName) {
         let refValue = `__VLS_nativeElements['${node.tag}']`;
@@ -231,11 +241,11 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar,
         ctx.singleRootElType = `typeof __VLS_nativeElements['${node.tag}']`;
     }
     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);
+    if (slotDir && ctx.currentComponent) {
+        yield* generateComponentSlot(options, ctx, node, slotDir);
     }
     else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
     }
     if (options.vueCompilerOptions.fallthroughAttributes
         && (node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.exp?.loc.source === '$attrs')
@@ -243,6 +253,12 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar,
         ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);
     }
 }
+function* generateFailedPropExps(options, ctx, failedPropExps) {
+    for (const failedExp of failedPropExps) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, failedExp.node.loc.source, failedExp.node.loc.start.offset, failedExp.node.loc, failedExp.prefix, failedExp.suffix);
+        yield utils_1.endOfLine;
+    }
+}
 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;
@@ -257,8 +273,8 @@ function* generateVScope(options, ctx, node, props) {
             vScope.exp.loc.start.offset,
             ctx.codeFeatures.all,
         ];
-        yield common_1.endOfLine;
-        yield `if (${condition}) {${common_1.newLine}`;
+        yield utils_1.endOfLine;
+        yield `if (${condition}) {${utils_1.newLine}`;
         ctx.blockConditions.push(condition);
         inScope = true;
     }
@@ -266,13 +282,13 @@ function* generateVScope(options, ctx, node, props) {
     const [refName, offset] = yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
     yield* generateReferencesForScopedCssClasses(options, ctx, node);
     if (inScope) {
-        yield `}${common_1.newLine}`;
+        yield `}${utils_1.newLine}`;
         ctx.blockConditions.length = originalConditionsNum;
     }
     return [refName, offset];
 }
 function getCanonicalComponentName(tagText) {
-    return common_1.variableNameRegex.test(tagText)
+    return utils_1.variableNameRegex.test(tagText)
         ? tagText
         : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
 }
@@ -290,37 +306,43 @@ function getPossibleOriginalComponentNames(tagText, deduplicate) {
     return names;
 }
 function* generateCanonicalComponentName(tagText, offset, features) {
-    if (common_1.variableNameRegex.test(tagText)) {
+    if (utils_1.variableNameRegex.test(tagText)) {
         yield [tagText, 'template', offset, features];
     }
     else {
         yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), offset, features);
     }
 }
-function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar) {
-    yield `{${common_1.newLine}`;
-    ctx.usedComponentCtxVars.add(componentCtxVar);
-    if (currentComponent) {
-        ctx.hasSlotElements.add(currentComponent);
+function* generateComponentGeneric(ctx) {
+    if (ctx.lastGenericComment) {
+        const { content, offset } = ctx.lastGenericComment;
+        yield* (0, utils_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
+            content,
+            'template',
+            offset,
+            ctx.codeFeatures.all
+        ], `>`);
+    }
+    ctx.lastGenericComment = undefined;
+}
+function* generateComponentSlot(options, ctx, node, slotDir) {
+    yield `{${utils_1.newLine}`;
+    if (ctx.currentComponent) {
+        ctx.currentComponent.used = true;
+        ctx.hasSlotElements.add(ctx.currentComponent.node);
     }
     const slotBlockVars = [];
     yield `const {`;
     if (slotDir?.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && slotDir.arg.content) {
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slotDir.arg.loc.source, slotDir.arg.loc.start.offset, slotDir.arg.isStatic ? ctx.codeFeatures.withoutHighlight : ctx.codeFeatures.all, slotDir.arg.loc, false, true);
-        yield ': __VLS_thisSlot';
     }
     else {
-        yield `default: `;
-        yield* (0, common_1.wrapWith)(slotDir.loc.start.offset, slotDir.loc.start.offset + (slotDir.loc.source.startsWith('#')
-            ? '#'.length
-            : slotDir.loc.source.startsWith('v-slot:')
-                ? 'v-slot:'.length
-                : 0), ctx.codeFeatures.withoutHighlightAndCompletion, `__VLS_thisSlot`);
+        yield* (0, utils_1.wrapWith)(slotDir.loc.start.offset, slotDir.loc.start.offset + (slotDir.rawName?.length ?? 0), ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
     }
-    yield `} = __VLS_nonNullable(${componentCtxVar}.slots)${common_1.endOfLine}`;
+    yield `: __VLS_thisSlot } = ${ctx.currentComponent.ctxVar}.slots!${utils_1.endOfLine}`;
     if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        const slotAst = (0, common_1.createTsAst)(options.ts, slotDir, `(${slotDir.exp.content}) => {}`);
-        (0, common_1.collectVars)(options.ts, slotAst, slotAst, slotBlockVars);
+        const slotAst = (0, utils_1.createTsAst)(options.ts, slotDir, `(${slotDir.exp.content}) => {}`);
+        (0, utils_1.collectVars)(options.ts, slotAst, slotAst, slotBlockVars);
         if (!slotDir.exp.content.includes(':')) {
             yield `const [`;
             yield [
@@ -329,7 +351,7 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, c
                 slotDir.exp.loc.start.offset,
                 ctx.codeFeatures.all,
             ];
-            yield `] = __VLS_getSlotParams(__VLS_thisSlot)${common_1.endOfLine}`;
+            yield `] = __VLS_getSlotParams(__VLS_thisSlot)${utils_1.endOfLine}`;
         }
         else {
             yield `const `;
@@ -339,7 +361,7 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, c
                 slotDir.exp.loc.start.offset,
                 ctx.codeFeatures.all,
             ];
-            yield ` = __VLS_getSlotParam(__VLS_thisSlot)${common_1.endOfLine}`;
+            yield ` = __VLS_getSlotParam(__VLS_thisSlot)${utils_1.endOfLine}`;
         }
     }
     for (const varName of slotBlockVars) {
@@ -348,7 +370,7 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, c
     yield* ctx.resetDirectiveComments('end of slot children start');
     let prev;
     for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
         prev = childNode;
     }
     for (const varName of slotBlockVars) {
@@ -359,7 +381,7 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, c
         isStatic = slotDir.arg.isStatic;
     }
     if (isStatic && slotDir && !slotDir.arg) {
-        yield `__VLS_nonNullable(${componentCtxVar}.slots)['`;
+        yield `${ctx.currentComponent.ctxVar}.slots!['`;
         yield [
             '',
             'template',
@@ -369,10 +391,10 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, c
                 : 0),
             ctx.codeFeatures.completion,
         ];
-        yield `'/* empty slot name completion */]${common_1.newLine}`;
+        yield `'/* empty slot name completion */]${utils_1.newLine}`;
     }
     yield* ctx.generateAutoImportCompletion();
-    yield `}${common_1.newLine}`;
+    yield `}${utils_1.newLine}`;
 }
 function* generateReferencesForElements(options, ctx, node) {
     for (const prop of node.props) {
@@ -380,11 +402,11 @@ function* generateReferencesForElements(options, ctx, node) {
             && prop.name === 'ref'
             && prop.value) {
             const [content, startOffset] = normalizeAttributeValue(prop.value);
-            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${common_1.newLine}`;
-            yield `__VLS_ctx`;
+            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${utils_1.newLine}`;
+            yield `/** @type { typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
-            yield common_1.endOfLine;
-            if (common_1.variableNameRegex.test(content)) {
+            yield ` } */${utils_1.endOfLine}`;
+            if (utils_1.variableNameRegex.test(content) && !options.templateRefNames.has(content)) {
                 ctx.accessExternalVariable(content, startOffset);
             }
             return [content, startOffset];
@@ -450,8 +472,13 @@ function* generateReferencesForScopedCssClasses(options, ctx, node) {
                 }
             });
             for (const literal of literals) {
-                const classes = collectClasses(literal.text, literal.end - literal.text.length - 1 + startOffset);
-                ctx.scopedClasses.push(...classes);
+                if (literal.text) {
+                    const classes = collectClasses(literal.text, literal.end - literal.text.length - 1 + startOffset);
+                    ctx.scopedClasses.push(...classes);
+                }
+                else {
+                    ctx.emptyClassOffsets.push(literal.end - 1 + startOffset);
+                }
             }
             function walkArrayLiteral(node) {
                 const { elements } = node;

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

@@ -2,4 +2,4 @@ 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, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;

package/lib/codegen/template/elementChildren.js

@@ -2,26 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementChildren = generateElementChildren;
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node, currentComponent, componentCtxVar) {
+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, currentComponent, prev, componentCtxVar);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
         prev = childNode;
     }
     yield* ctx.generateAutoImportCompletion();
     // fix https://github.com/vuejs/language-tools/issues/932
-    if (componentCtxVar
+    if (ctx.currentComponent
         && !ctx.hasSlotElements.has(node)
         && node.children.length
         && node.tagType !== CompilerDOM.ElementTypes.ELEMENT
         && node.tagType !== CompilerDOM.ElementTypes.TEMPLATE) {
-        ctx.usedComponentCtxVars.add(componentCtxVar);
-        yield `__VLS_nonNullable(${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;
+        ctx.currentComponent.used = true;
+        yield `${ctx.currentComponent.ctxVar}.slots!.`;
+        yield* (0, utils_1.wrapWith)(node.children[0].loc.start.offset, node.children[node.children.length - 1].loc.end.offset, ctx.codeFeatures.navigation, `default`);
+        yield utils_1.endOfLine;
     }
 }
 //# sourceMappingURL=elementChildren.js.map

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

@@ -3,3 +3,4 @@ import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateElementDirectives(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateModifiers(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, propertyName?: string): Generator<Code>;

package/lib/codegen/template/elementDirectives.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementDirectives = generateElementDirectives;
+exports.generateModifiers = generateModifiers;
 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 utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generateElementDirectives(options, ctx, node) {
     for (const prop of node.props) {
         if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
@@ -21,13 +22,13 @@ function* generateElementDirectives(options, ctx, node) {
             continue;
         }
         ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-        yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), `}, null!, null!)`);
-        yield common_1.endOfLine;
+        yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        yield utils_1.endOfLine;
     }
 }
 function* generateIdentifier(ctx, prop) {
     const rawName = 'v-' + prop.name;
-    yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, {
+    yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, {
         ...ctx.codeFeatures.all,
         verification: false,
         completion: {
@@ -46,34 +47,39 @@ function* generateArg(options, ctx, prop) {
         return;
     }
     const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
-    yield* (0, common_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, 'arg');
-    yield ': ';
+    yield* (0, utils_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, `arg`);
+    yield `: `;
     if (arg.isStatic) {
-        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, ctx.codeFeatures.withoutHighlight);
+        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, ctx.codeFeatures.all);
     }
     else {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, arg.content, arg.loc, startOffset, ctx.codeFeatures.all, '(', ')');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, arg.content, startOffset, arg.loc, `(`, `)`);
     }
-    yield ', ';
+    yield `, `;
 }
-function* generateModifiers(options, ctx, prop) {
-    if (options.vueCompilerOptions.target < 3.5) {
+function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
+    const { modifiers } = prop;
+    if (!modifiers.length) {
         return;
     }
-    yield 'modifiers: { ';
-    for (const mod of prop.modifiers) {
-        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutHighlight);
-        yield ': true, ';
+    const startOffset = modifiers[0].loc.start.offset - 1;
+    const endOffset = modifiers.at(-1).loc.end.offset;
+    yield* (0, utils_1.wrapWith)(startOffset, endOffset, ctx.codeFeatures.verification, propertyName);
+    yield `: { `;
+    for (const mod of modifiers) {
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutNavigation);
+        yield `: true, `;
     }
-    yield '}, ';
+    yield `}, `;
 }
 function* generateValue(options, ctx, prop) {
-    if (prop.exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+    const { exp } = prop;
+    if (exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         return;
     }
-    yield* (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, 'value');
-    yield ': ';
-    yield* (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'));
+    yield* (0, utils_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, `value`);
+    yield `: `;
+    yield* (0, utils_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, exp.content, exp.loc.start.offset, exp.loc, `(`, `)`));
 }
 function getPropRenameApply(oldName) {
     return oldName === (0, shared_2.hyphenateAttr)(oldName) ? shared_2.hyphenateAttr : undefined;

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

@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 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, emitVar: string, eventsVar: string): Generator<Code>;
-export declare function generateEventArg(ctx: TemplateCodegenContext, arg: CompilerDOM.SimpleExpressionNode, enableHover: boolean): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, eventsVar: string): Generator<Code, boolean>;
+export declare function generateEventArg(ctx: TemplateCodegenContext, name: string, start: number, directive?: string): 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;