@vue/language-core 2.2.2 → 2.2.4

package/lib/codegen/template/elementDirectives.js

@@ -9,6 +9,7 @@ const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const stringLiteralKey_1 = require("../utils/stringLiteralKey");
+const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
 const builtInDirectives = new Set([
@@ -86,7 +87,7 @@ function* generateValue(options, ctx, prop) {
     }
     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, `(`, `)`));
+    yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp, ctx.codeFeatures.all);
 }
 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, eventsVar: string): Generator<Code, boolean>;
+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 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

@@ -9,8 +9,9 @@ const shared_1 = require("@vue/shared");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, eventsVar) {
-    let usedComponentEventsVar = false;
+function* generateElementEvents(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
+    let emitVar;
+    let eventsVar;
     let propsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -18,10 +19,14 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
             && !prop.arg.loc.source.startsWith('[')
             && !prop.arg.loc.source.endsWith(']')) {
-            usedComponentEventsVar = true;
-            if (!propsVar) {
+            ctx.currentComponent.used = true;
+            if (!emitVar) {
+                emitVar = ctx.getInternalVariable();
+                eventsVar = ctx.getInternalVariable();
                 propsVar = ctx.getInternalVariable();
-                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${utils_1.endOfLine}`;
+                yield `let ${emitVar}!: typeof ${componentCtxVar}.emit${utils_1.endOfLine}`;
+                yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${utils_1.endOfLine}`;
+                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
             }
             let source = prop.arg.loc.source;
             let start = prop.arg.loc.start.offset;
@@ -40,7 +45,6 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             yield `}${utils_1.endOfLine}`;
         }
     }
-    return usedComponentEventsVar;
 }
 function* generateEventArg(ctx, name, start, directive = 'on') {
     const features = {
@@ -58,18 +62,18 @@ function* generateEventArg(ctx, name, start, directive = 'on') {
 }
 function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        let prefix = '(';
-        let suffix = ')';
+        let prefix = `(`;
+        let suffix = `)`;
         let isFirstMapping = true;
         const ast = (0, utils_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
         const _isCompoundExpression = isCompoundExpression(options.ts, ast);
         if (_isCompoundExpression) {
             yield `(...[$event]) => {${utils_1.newLine}`;
             ctx.addLocalVariable('$event');
-            prefix = '';
-            suffix = '';
+            prefix = ``;
+            suffix = ``;
             for (const blockCondition of ctx.blockConditions) {
-                prefix += `if (!(${blockCondition})) return${utils_1.endOfLine}`;
+                prefix += `if (!${blockCondition}) return${utils_1.endOfLine}`;
             }
         }
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {

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

@@ -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, features: VueCodeInformation, enableCodeFeatures?: boolean): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -40,12 +40,12 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.startsWith('[')
                 && prop.arg.loc.source.endsWith(']')) {
-                failedPropExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
-                failedPropExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
+                failedPropExps?.push({ node: prop.arg, prefix: `(`, suffix: `)` });
+                failedPropExps?.push({ node: prop.exp, prefix: `() => {`, suffix: `}` });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
         }
     }
@@ -66,7 +66,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                    failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
                 }
                 continue;
             }
@@ -82,7 +82,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
             const codes = (0, utils_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, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures), `)`);
+                : (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: `, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures));
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -123,9 +123,9 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ??= {}, shouldCamelize), `: (`, ...(prop.value
+            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ??= {}, shouldCamelize), `: `, ...(prop.value
                 ? generateAttrValue(prop.value, ctx.codeFeatures.withoutNavigation)
-                : [`true`]), `)`);
+                : [`true`]));
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -159,7 +159,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
         }
     }
 }
-function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures) {
+function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures = true) {
     const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
     if (isShorthand && features.completion) {
         features = {
@@ -169,7 +169,7 @@ function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures)
     }
     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, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, `(`, `)`);
         }
         else {
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
@@ -231,6 +231,8 @@ function getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize) {
         },
         verification: strictPropsCheck || {
             shouldReport(_source, code) {
+                // https://typescript.tv/errors/#ts2353
+                // https://typescript.tv/errors/#ts2561
                 if (String(code) === '2353' || String(code) === '2561') {
                     return false;
                 }

package/lib/codegen/template/index.js

@@ -18,26 +18,35 @@ function* generateTemplate(options) {
         ctx.addLocalVariable(options.propsAssignName);
     }
     const slotsPropertyName = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
-    ctx.specialVars.add(slotsPropertyName);
-    ctx.specialVars.add('$attrs');
-    ctx.specialVars.add('$refs');
-    ctx.specialVars.add('$el');
+    if (options.vueCompilerOptions.inferTemplateDollarSlots) {
+        ctx.dollarVars.add(slotsPropertyName);
+    }
+    if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
+        ctx.dollarVars.add('$attrs');
+    }
+    if (options.vueCompilerOptions.inferTemplateDollarRefs) {
+        ctx.dollarVars.add('$refs');
+    }
+    if (options.vueCompilerOptions.inferTemplateDollarEl) {
+        ctx.dollarVars.add('$el');
+    }
     if (options.template.ast) {
         yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined);
     }
     yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
+    yield* ctx.generateAutoImportCompletion();
+    yield* ctx.generateHoistVariables();
     const speicalTypes = [
         [slotsPropertyName, yield* generateSlots(options, ctx)],
         ['$attrs', yield* generateInheritedAttrs(options, ctx)],
         ['$refs', yield* generateTemplateRefs(options, ctx)],
         ['$el', yield* generateRootEl(ctx)]
     ];
-    yield `var __VLS_special!: {${utils_1.newLine}`;
+    yield `var __VLS_dollars!: {${utils_1.newLine}`;
     for (const [name, type] of speicalTypes) {
         yield `${name}: ${type}${utils_1.endOfLine}`;
     }
-    yield `} & { [K in keyof typeof __VLS_ctx]: unknown }${utils_1.endOfLine}`;
-    yield* ctx.generateAutoImportCompletion();
+    yield `} & { [K in keyof import('${options.vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${utils_1.endOfLine}`;
     return ctx;
 }
 function* generateSlots(options, ctx) {
@@ -45,12 +54,10 @@ function* generateSlots(options, ctx) {
         const name = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
         yield `type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.${name}>`;
         for (const { expVar, propsVar } of ctx.dynamicSlots) {
-            ctx.hasSlot = true;
             yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
         }
         for (const slot of ctx.slots) {
             yield `${utils_1.newLine}& { `;
-            ctx.hasSlot = true;
             if (slot.name && slot.offset !== undefined) {
                 yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.offset, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
             }
@@ -72,7 +79,7 @@ function* generateInheritedAttrs(options, ctx) {
     if (ctx.bindingAttrLocs.length) {
         yield `[`;
         for (const loc of ctx.bindingAttrLocs) {
-            yield `__VLS_special.`;
+            yield `__VLS_dollars.`;
             yield [
                 loc.source,
                 'template',
@@ -87,16 +94,23 @@ function* generateInheritedAttrs(options, ctx) {
 }
 function* generateTemplateRefs(options, ctx) {
     yield `type __VLS_TemplateRefs = {${utils_1.newLine}`;
-    for (const [name, [varName, offset]] of ctx.templateRefs) {
+    for (const [name, { typeExp, offset }] of ctx.templateRefs) {
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, name, offset, ctx.codeFeatures.navigationAndCompletion);
-        yield `: typeof ${varName},${utils_1.newLine}`;
+        yield `: ${typeExp},${utils_1.newLine}`;
     }
     yield `}${utils_1.endOfLine}`;
     return `__VLS_TemplateRefs`;
 }
 function* generateRootEl(ctx) {
     yield `type __VLS_RootEl = `;
-    yield ctx.singleRootElType ?? `any`;
+    if (ctx.singleRootElTypes.length && !ctx.singleRootNodes.has(null)) {
+        for (const type of ctx.singleRootElTypes) {
+            yield `${utils_1.newLine}| ${type}`;
+        }
+    }
+    else {
+        yield `any`;
+    }
     yield utils_1.endOfLine;
     return `__VLS_RootEl`;
 }

package/lib/codegen/template/interpolation.js

@@ -87,7 +87,7 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
         for (let i = 0; i < ctxVars.length - 1; i++) {
             const curVar = ctxVars[i];
             const nextVar = ctxVars[i + 1];
-            yield* generateVar(code, ctx.specialVars, destructuredPropNames, templateRefNames, curVar);
+            yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, curVar);
             if (nextVar.isShorthand) {
                 yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
                 yield [': ', undefined];
@@ -97,7 +97,7 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
             }
         }
         const lastVar = ctxVars.at(-1);
-        yield* generateVar(code, ctx.specialVars, destructuredPropNames, templateRefNames, lastVar);
+        yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, lastVar);
         if (lastVar.offset + lastVar.text.length < code.length) {
             yield [code.slice(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
         }
@@ -106,7 +106,7 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
         yield [code, 0];
     }
 }
-function* generateVar(code, specialVars, destructuredPropNames, templateRefNames, curVar) {
+function* generateVar(code, dollarVars, destructuredPropNames, templateRefNames, curVar) {
     // fix https://github.com/vuejs/language-tools/issues/1205
     // fix https://github.com/vuejs/language-tools/issues/1264
     yield ['', curVar.offset, 'errorMappingOnly'];
@@ -118,8 +118,8 @@ function* generateVar(code, specialVars, destructuredPropNames, templateRefNames
         yield [`)`, undefined];
     }
     else {
-        if (specialVars.has(curVar.text)) {
-            yield [`__VLS_special.`, undefined];
+        if (dollarVars.has(curVar.text)) {
+            yield [`__VLS_dollars.`, undefined];
         }
         else if (!isDestructuredProp) {
             yield [`__VLS_ctx.`, undefined];

package/lib/codegen/template/slotOutlet.js

@@ -10,6 +10,7 @@ const interpolation_1 = require("./interpolation");
 const propertyAccess_1 = require("./propertyAccess");
 function* generateSlotOutlet(options, ctx, node) {
     const startTagOffset = node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
+    const startTagEndOffset = startTagOffset + node.tag.length;
     const propsVar = ctx.getInternalVariable();
     const nameProp = node.props.find(prop => {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
@@ -22,7 +23,7 @@ function* generateSlotOutlet(options, ctx, node) {
         }
     });
     if (options.hasDefineSlots) {
-        yield `__VLS_normalizeSlot(`;
+        yield `__VLS_asFunctionalSlot(`;
         if (nameProp) {
             let codes;
             if (nameProp.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value) {
@@ -37,7 +38,7 @@ function* generateSlotOutlet(options, ctx, node) {
                 && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
                 codes = [
                     `[`,
-                    ...(0, elementProps_1.generatePropExp)(options, ctx, nameProp, nameProp.exp, ctx.codeFeatures.all, true),
+                    ...(0, elementProps_1.generatePropExp)(options, ctx, nameProp, nameProp.exp, ctx.codeFeatures.all),
                     `]`
                 ];
             }
@@ -47,10 +48,10 @@ function* generateSlotOutlet(options, ctx, node) {
             yield* (0, utils_1.wrapWith)(nameProp.loc.start.offset, nameProp.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}`, ...codes);
         }
         else {
-            yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}['default']`);
+            yield* (0, utils_1.wrapWith)(startTagOffset, startTagEndOffset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, utils_1.wrapWith)(startTagOffset, startTagEndOffset, ctx.codeFeatures.verification, `'default'`), `]`);
         }
-        yield `)?.(`;
-        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.filter(prop => prop !== nameProp), true, true), `}`);
+        yield `)(`;
+        yield* (0, utils_1.wrapWith)(startTagOffset, startTagEndOffset, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true, true), `}`);
         yield `)${utils_1.endOfLine}`;
     }
     else {
@@ -64,7 +65,7 @@ function* generateSlotOutlet(options, ctx, node) {
                 offset: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
                 tagRange: [startTagOffset, startTagOffset + node.tag.length],
                 nodeLoc: node.loc,
-                propsVar,
+                propsVar: ctx.getHoistVariable(propsVar),
             });
         }
         else if (nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -78,16 +79,16 @@ function* generateSlotOutlet(options, ctx, node) {
             yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, nameProp.exp.content, nameProp.exp.loc.start.offset, nameProp.exp);
             yield `)${utils_1.endOfLine}`;
             ctx.dynamicSlots.push({
-                expVar,
-                propsVar,
+                expVar: ctx.getHoistVariable(expVar),
+                propsVar: ctx.getHoistVariable(propsVar),
             });
         }
         else {
             ctx.slots.push({
                 name: 'default',
-                tagRange: [startTagOffset, startTagOffset + node.tag.length],
+                tagRange: [startTagOffset, startTagEndOffset],
                 nodeLoc: node.loc,
-                propsVar,
+                propsVar: ctx.getHoistVariable(propsVar),
             });
         }
     }

package/lib/codegen/template/styleScopedClasses.js

@@ -6,21 +6,18 @@ const CompilerDOM = require("@vue/compiler-dom");
 const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const utils_1 = require("../utils");
 function* generateStyleScopedClassReferences(ctx, withDot = false) {
-    if (!ctx.emptyClassOffsets.length && !ctx.scopedClasses.length) {
-        return;
-    }
-    yield `[`;
     for (const offset of ctx.emptyClassOffsets) {
-        yield `'`;
+        yield `/** @type {__VLS_StyleScopedClasses['`;
         yield [
             '',
             'template',
             offset,
             ctx.codeFeatures.additionalCompletion,
         ];
-        yield `', `;
+        yield `']} */${utils_1.endOfLine}`;
     }
     for (const { source, className, offset } of ctx.scopedClasses) {
+        yield `/** @type {__VLS_StyleScopedClasses[`;
         yield [
             '',
             source,
@@ -35,11 +32,10 @@ function* generateStyleScopedClassReferences(ctx, withDot = false) {
             '',
             source,
             offset + className.length,
-            ctx.codeFeatures.navigationWithoutRename,
+            ctx.codeFeatures.navigation,
         ];
-        yield `, `;
+        yield `]} */${utils_1.endOfLine}`;
     }
-    yield `] as (keyof __VLS_StyleScopedClasses)[]${utils_1.endOfLine}`;
     function* escapeString(source, className, offset, escapeTargets) {
         let count = 0;
         const currentEscapeTargets = [...escapeTargets];

package/lib/codegen/template/templateChild.js

@@ -4,6 +4,7 @@ exports.generateTemplateChild = generateTemplateChild;
 exports.getVForNode = getVForNode;
 exports.parseInterpolationNode = parseInterpolationNode;
 const CompilerDOM = require("@vue/compiler-dom");
+const shared_1 = require("../../utils/shared");
 const utils_1 = require("../utils");
 const element_1 = require("./element");
 const interpolation_1 = require("./interpolation");
@@ -11,6 +12,7 @@ const slotOutlet_1 = require("./slotOutlet");
 const vFor_1 = require("./vFor");
 const vIf_1 = require("./vIf");
 const vSlot_1 = require("./vSlot");
+const commentDirectiveRegex = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)-->$/;
 // @ts-ignore
 const transformContext = {
     onError: () => { },
@@ -28,38 +30,44 @@ const transformContext = {
 };
 function* generateTemplateChild(options, ctx, node, prevNode, isVForChild = false) {
     if (prevNode?.type === CompilerDOM.NodeTypes.COMMENT) {
-        const commentText = prevNode.content.trim().split(' ')[0];
-        if (/^@vue-skip\b[\s\S]*/.test(commentText)) {
-            yield `// @vue-skip${utils_1.newLine}`;
-            return;
-        }
-        else if (/^@vue-ignore\b[\s\S]*/.test(commentText)) {
-            yield* ctx.ignoreError();
-        }
-        else if (/^@vue-expect-error\b[\s\S]*/.test(commentText)) {
-            yield* ctx.expectError(prevNode);
-        }
-        else {
-            const match = prevNode.loc.source.match(/^<!--\s*@vue-generic\b\s*\{(?<content>[^}]*)\}/);
-            if (match) {
-                const { content } = match.groups ?? {};
-                ctx.lastGenericComment = {
-                    content,
-                    offset: prevNode.loc.start.offset + match[0].indexOf(content)
-                };
+        const match = prevNode.loc.source.match(commentDirectiveRegex);
+        if (match) {
+            const { name, content } = match.groups;
+            switch (name) {
+                case 'skip': {
+                    yield `// @vue-skip${utils_1.newLine}`;
+                    return;
+                }
+                case 'ignore': {
+                    yield* ctx.ignoreError();
+                    break;
+                }
+                case 'expect-error': {
+                    yield* ctx.expectError(prevNode);
+                    break;
+                }
+                case 'generic': {
+                    const text = content.trim();
+                    if (text.startsWith('{') && text.endsWith('}')) {
+                        ctx.lastGenericComment = {
+                            content: text.slice(1, -1),
+                            offset: prevNode.loc.start.offset + prevNode.loc.source.indexOf('{') + 1,
+                        };
+                    }
+                    break;
+                }
             }
         }
     }
-    const shouldInheritRootNodeAttrs = options.inheritAttrs;
     const cur = node;
     if (cur.codegenNode?.type === CompilerDOM.NodeTypes.JS_CACHE_EXPRESSION) {
         cur.codegenNode = cur.codegenNode.value;
     }
     if (node.type === CompilerDOM.NodeTypes.ROOT) {
-        let prev;
-        if (shouldInheritRootNodeAttrs && node.children.length === 1 && node.children[0].type === CompilerDOM.NodeTypes.ELEMENT) {
-            ctx.singleRootNode = node.children[0];
+        for (const item of collectSingleRootNodes(options, node.children)) {
+            ctx.singleRootNodes.add(item);
         }
+        let prev;
         for (const childNode of node.children) {
             yield* generateTemplateChild(options, ctx, childNode, prev);
             prev = childNode;
@@ -91,7 +99,7 @@ function* generateTemplateChild(options, ctx, node, prevNode, isVForChild = fals
             }
             else {
                 const { currentComponent } = ctx;
-                yield* (0, element_1.generateComponent)(options, ctx, node);
+                yield* (0, element_1.generateComponent)(options, ctx, node, isVForChild);
                 ctx.currentComponent = currentComponent;
             }
         }
@@ -126,6 +134,30 @@ function* generateTemplateChild(options, ctx, node, prevNode, isVForChild = fals
         // not needed progress
     }
 }
+function* collectSingleRootNodes(options, children) {
+    if (children.length !== 1) {
+        // "null" is used to determine whether the component is not always has a single root
+        if (children.length > 1) {
+            yield null;
+        }
+        return;
+    }
+    const child = children[0];
+    if (child.type === CompilerDOM.NodeTypes.IF) {
+        for (const branch of child.branches) {
+            yield* collectSingleRootNodes(options, branch.children);
+        }
+        return;
+    }
+    else if (child.type !== CompilerDOM.NodeTypes.ELEMENT) {
+        return;
+    }
+    yield child;
+    const tag = (0, shared_1.hyphenateTag)(child.tag);
+    if (options.vueCompilerOptions.fallthroughComponentNames.includes(tag)) {
+        yield* collectSingleRootNodes(options, child.children);
+    }
+}
 // TODO: track https://github.com/vuejs/vue-next/issues/3498
 function getVForNode(node) {
     const forDirective = node.props.find((prop) => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -146,11 +178,11 @@ function getVForNode(node) {
     }
 }
 function getVIfNode(node) {
-    const forDirective = node.props.find((prop) => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+    const ifDirective = node.props.find((prop) => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
         && prop.name === 'if');
-    if (forDirective) {
+    if (ifDirective) {
         let ifNode;
-        CompilerDOM.processIf(node, forDirective, transformContext, _ifNode => {
+        CompilerDOM.processIf(node, ifDirective, transformContext, _ifNode => {
             ifNode = { ..._ifNode };
             return undefined;
         });
@@ -158,7 +190,7 @@ function getVIfNode(node) {
             for (const branch of ifNode.branches) {
                 branch.children = [{
                         ...node,
-                        props: node.props.filter(prop => prop !== forDirective),
+                        props: node.props.filter(prop => prop !== ifDirective),
                     }];
             }
             return ifNode;

package/lib/codegen/template/vFor.js

@@ -24,7 +24,7 @@ function* generateVFor(options, ctx, node) {
     yield `] of `;
     if (source.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         yield `__VLS_getVForSourceType(`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, source.content, source.loc.start.offset, source.loc, '(', ')');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, source.content, source.loc.start.offset, source.loc, `(`, `)`);
         yield `!)`; // #3102
     }
     else {
@@ -46,7 +46,7 @@ function* generateVFor(options, ctx, node) {
             for (const prop of argument.returns.props.properties) {
                 if (prop.value.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                     && !prop.value.isStatic) {
-                    yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, prop.value.content, prop.value.loc.start.offset, prop.value.loc, '(', ')');
+                    yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, prop.value.content, prop.value.loc.start.offset, prop.value.loc, `(`, `)`);
                     yield utils_1.endOfLine;
                 }
             }

package/lib/codegen/template/vIf.js

@@ -7,7 +7,7 @@ const utils_1 = require("../utils");
 const interpolation_1 = require("./interpolation");
 const templateChild_1 = require("./templateChild");
 function* generateVIf(options, ctx, node) {
-    let originalBlockConditionsLength = ctx.blockConditions.length;
+    const originalBlockConditionsLength = ctx.blockConditions.length;
     for (let i = 0; i < node.branches.length; i++) {
         const branch = node.branches[i];
         if (i === 0) {
@@ -22,7 +22,7 @@ function* generateVIf(options, ctx, node) {
         let addedBlockCondition = false;
         if (branch.condition?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
             const codes = [
-                ...(0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, branch.condition.content, branch.condition.loc.start.offset, branch.condition.loc, '(', ')'),
+                ...(0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, branch.condition.content, branch.condition.loc.start.offset, branch.condition.loc, `(`, `)`),
             ];
             for (const code of codes) {
                 yield code;
@@ -43,7 +43,7 @@ function* generateVIf(options, ctx, node) {
         yield* ctx.generateAutoImportCompletion();
         yield `}${utils_1.newLine}`;
         if (addedBlockCondition) {
-            ctx.blockConditions[ctx.blockConditions.length - 1] = `!(${ctx.blockConditions[ctx.blockConditions.length - 1]})`;
+            ctx.blockConditions[ctx.blockConditions.length - 1] = `!${ctx.blockConditions[ctx.blockConditions.length - 1]}`;
         }
     }
     ctx.blockConditions.length = originalBlockConditionsLength;

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

@@ -3,3 +3,4 @@ import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateVSlot(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, slotDir: CompilerDOM.DirectiveNode): Generator<Code>;
+export declare function generateImplicitDefaultSlot(ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code, void, any>;

package/lib/codegen/template/vSlot.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateVSlot = generateVSlot;
+exports.generateImplicitDefaultSlot = generateImplicitDefaultSlot;
 const CompilerDOM = require("@vue/compiler-dom");
 const utils_1 = require("../utils");
 const objectProperty_1 = require("./objectProperty");
@@ -77,4 +78,15 @@ function* generateVSlot(options, ctx, node, slotDir) {
     yield* ctx.generateAutoImportCompletion();
     yield `}${utils_1.newLine}`;
 }
+function* generateImplicitDefaultSlot(ctx, node) {
+    if (!ctx.currentComponent) {
+        return;
+    }
+    if (node.children.length) {
+        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=vSlot.js.map