@vue/language-core 3.1.7 → 3.1.8

package/lib/codegen/template/element.js

@@ -12,6 +12,7 @@ const names = require("../names");
 const utils_1 = require("../utils");
 const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const elementProps_1 = require("./elementProps");
@@ -20,33 +21,14 @@ const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
 const templateChild_1 = require("./templateChild");
 const vSlot_1 = require("./vSlot");
-const colonReg = /:/g;
 function* generateComponent(options, ctx, node) {
-    const tagOffsets = (0, shared_2.getElementTagOffsets)(node, options.template);
-    const failGeneratedExpressions = [];
-    const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
-    const matchConst = possibleOriginalNames.find(name => options.setupConsts.has(name));
-    const componentOriginalVar = matchConst ?? ctx.getInternalVariable();
-    const componentFunctionalVar = ctx.getInternalVariable();
-    const componentVNodeVar = ctx.getInternalVariable();
-    const componentCtxVar = ctx.getInternalVariable();
-    const componentPropsVar = ctx.getInternalVariable();
-    const isComponentTag = node.tag.toLowerCase() === 'component';
-    let isCtxVarUsed = false;
-    let isPropsVarUsed = false;
-    ctx.currentComponent = {
-        get ctxVar() {
-            isCtxVarUsed = true;
-            return componentCtxVar;
-        },
-        get propsVar() {
-            isPropsVarUsed = true;
-            return componentPropsVar;
-        },
-    };
-    let props = node.props;
-    let dynamicTagInfo;
-    if (isComponentTag) {
+    let { tag, props } = node;
+    let [startTagOffset, endTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
+    let isExpression = false;
+    if (tag.includes('.')) {
+        isExpression = true;
+    }
+    else if (tag === 'component') {
         for (const prop of node.props) {
             if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
                 && prop.name === 'bind'
@@ -55,122 +37,123 @@ function* generateComponent(options, ctx, node) {
                 if (prop.arg.loc.end.offset === prop.exp.loc.end.offset) {
                     ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.exp.loc, 'is'));
                 }
-                dynamicTagInfo = {
-                    tag: prop.exp.content,
-                    offsets: [prop.exp.loc.start.offset],
-                };
+                isExpression = true;
+                tag = prop.exp.content;
+                startTagOffset = prop.exp.loc.start.offset;
+                endTagOffset = undefined;
                 props = props.filter(p => p !== prop);
                 break;
             }
         }
     }
-    else if (node.tag.includes('.')) {
-        // namespace tag
-        dynamicTagInfo = {
-            tag: node.tag,
-            offsets: tagOffsets,
-        };
-    }
-    if (matchConst) {
-        // navigation support
-        yield `/** @type {[`;
-        for (const tagOffset of tagOffsets) {
-            yield `typeof `;
-            if (componentOriginalVar === node.tag) {
-                yield [
-                    componentOriginalVar,
-                    'template',
-                    tagOffset,
-                    codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
-                ];
-            }
-            else {
-                const shouldCapitalize = matchConst[0].toUpperCase() === matchConst[0];
-                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
-            }
-            yield `, `;
-        }
-        yield `]} */${utils_1.endOfLine}`;
-        // auto import support
-        yield `// @ts-ignore${utils_1.newLine}`; // #2304
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], codeFeatures_1.codeFeatures.importCompletionOnly);
-        yield utils_1.endOfLine;
-    }
-    else if (dynamicTagInfo) {
-        yield `const ${componentOriginalVar} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], `(`, `)`);
-        if (dynamicTagInfo.offsets[1] !== undefined) {
-            yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], `(`, `)`);
+    const componentVar = ctx.getInternalVariable();
+    if (isExpression) {
+        yield `const ${componentVar} = `;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, tag, startTagOffset, `(`, `)`);
+        if (endTagOffset !== undefined) {
+            yield ` || `;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.withoutCompletion, tag, endTagOffset, `(`, `)`);
         }
-        yield `)${utils_1.endOfLine}`;
+        yield `${utils_1.endOfLine}`;
     }
     else {
-        yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
-        if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
-            yield `typeof ${names._export}, `;
+        const originalNames = new Set([
+            (0, shared_1.capitalize)((0, shared_1.camelize)(tag)),
+            (0, shared_1.camelize)(tag),
+            tag,
+        ]);
+        const matchedSetupConst = [...originalNames].find(name => options.setupConsts.has(name));
+        if (matchedSetupConst) {
+            // navigation & auto import support
+            yield `const ${componentVar} = `;
+            yield* (0, camelized_1.generateCamelized)(matchedSetupConst[0] + tag.slice(1), 'template', startTagOffset, {
+                ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
+                ...codeFeatures_1.codeFeatures.importCompletionOnly,
+            });
+            if (endTagOffset !== undefined) {
+                yield ` || `;
+                yield* (0, camelized_1.generateCamelized)(matchedSetupConst[0] + tag.slice(1), 'template', endTagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
+            }
+            yield utils_1.endOfLine;
         }
         else {
-            yield `void, `;
-        }
-        yield getPossibleOriginalComponentNames(node.tag, false)
-            .map(name => `'${name}'`)
-            .join(`, `);
-        yield `>).`;
-        yield* generateCanonicalComponentName(node.tag, tagOffsets[0], {
-            ...codeFeatures_1.codeFeatures.semanticWithoutHighlight,
-            ...options.vueCompilerOptions.checkUnknownComponents
-                ? codeFeatures_1.codeFeatures.verification
-                : codeFeatures_1.codeFeatures.doNotReportTs2339AndTs2551,
-        });
-        yield utils_1.endOfLine;
-        const camelizedTag = (0, shared_1.camelize)(node.tag);
-        if (utils_1.identifierRegex.test(camelizedTag)) {
-            // navigation support
-            yield `/** @type {[`;
-            for (const tagOffset of tagOffsets) {
-                for (const shouldCapitalize of (node.tag[0] === node.tag[0].toUpperCase() ? [false] : [true, false])) {
-                    yield `typeof ${names.components}.`;
-                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.navigation);
-                    yield `, `;
+            yield `let ${componentVar}!: __VLS_WithComponent<'${tag}', __VLS_LocalComponents`;
+            yield originalNames.has(options.selfComponentName)
+                ? `, typeof ${names._export}`
+                : `, void`;
+            for (const name of originalNames) {
+                yield `, '${name}'`;
+            }
+            yield `>[`;
+            yield* (0, stringLiteralKey_1.generateStringLiteralKey)(tag, startTagOffset, {
+                ...codeFeatures_1.codeFeatures.semanticWithoutHighlight,
+                ...options.vueCompilerOptions.checkUnknownComponents
+                    ? codeFeatures_1.codeFeatures.verification
+                    : codeFeatures_1.codeFeatures.doNotReportTs2339AndTs2551,
+            });
+            yield `]${utils_1.endOfLine}`;
+            if (utils_1.identifierRegex.test((0, shared_1.camelize)(tag))) {
+                // navigation support
+                yield `/** @ts-ignore @type {typeof ${names.components}.`;
+                yield* (0, camelized_1.generateCamelized)(tag, 'template', startTagOffset, codeFeatures_1.codeFeatures.navigation);
+                if (tag[0] !== tag[0].toUpperCase()) {
+                    yield ` | typeof ${names.components}.`;
+                    yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tag), 'template', startTagOffset, codeFeatures_1.codeFeatures.navigation);
                 }
+                yield `} */${utils_1.newLine}`;
+                // auto import support
+                yield* (0, camelized_1.generateCamelized)(tag, 'template', startTagOffset, codeFeatures_1.codeFeatures.importCompletionOnly);
+                yield utils_1.endOfLine;
             }
-            yield `]} */${utils_1.endOfLine}`;
-            // auto import support
-            yield `// @ts-ignore${utils_1.newLine}`; // #2304
-            yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], codeFeatures_1.codeFeatures.importCompletionOnly);
-            yield utils_1.endOfLine;
         }
     }
+    yield* generateComponentBody(options, ctx, node, tag, startTagOffset, props, componentVar);
+}
+function* generateComponentBody(options, ctx, node, tag, tagOffset, props, componentVar) {
+    let isCtxVarUsed = false;
+    let isPropsVarUsed = false;
+    const getCtxVar = () => (isCtxVarUsed = true, ctxVar);
+    const getPropsVar = () => (isPropsVarUsed = true, propsVar);
+    ctx.components.push(getCtxVar);
+    const failGeneratedExpressions = [];
     const propCodes = [...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, failGeneratedExpressions)];
+    const functionalVar = ctx.getInternalVariable();
+    const vNodeVar = ctx.getInternalVariable();
+    const ctxVar = ctx.getInternalVariable();
+    const propsVar = ctx.getInternalVariable();
     yield `// @ts-ignore${utils_1.newLine}`;
-    yield `const ${componentFunctionalVar} = __VLS_asFunctionalComponent(${componentOriginalVar}, new ${componentOriginalVar}({${utils_1.newLine}`;
+    yield `const ${functionalVar} = __VLS_asFunctionalComponent(${componentVar}, new ${componentVar}({${utils_1.newLine}`;
     yield* (0, muggle_string_1.toString)(propCodes);
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
     const token = yield* (0, boundary_1.startBoundary)('template', node.loc.start.offset, codeFeatures_1.codeFeatures.doNotReportTs6133);
-    yield componentVNodeVar;
+    yield vNodeVar;
     yield (0, boundary_1.endBoundary)(token, node.loc.end.offset);
-    yield ` = ${componentFunctionalVar}`;
-    yield* generateComponentGeneric(ctx);
+    yield ` = ${functionalVar}`;
+    if (ctx.currentInfo.generic) {
+        const { content, offset } = ctx.currentInfo.generic;
+        const token = yield* (0, boundary_1.startBoundary)('template', offset, codeFeatures_1.codeFeatures.verification);
+        yield `<`;
+        yield [content, 'template', offset, codeFeatures_1.codeFeatures.all];
+        yield `>`;
+        yield (0, boundary_1.endBoundary)(token, offset + content.length);
+    }
     yield `(`;
-    const token2 = yield* (0, boundary_1.startBoundary)('template', tagOffsets[0], codeFeatures_1.codeFeatures.verification);
+    const token2 = yield* (0, boundary_1.startBoundary)('template', tagOffset, codeFeatures_1.codeFeatures.verification);
     yield `{${utils_1.newLine}`;
     yield* propCodes;
     yield `}`;
-    yield (0, boundary_1.endBoundary)(token2, tagOffsets[0] + node.tag.length);
-    yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
+    yield (0, boundary_1.endBoundary)(token2, tagOffset + tag.length);
+    yield `, ...__VLS_functionalComponentArgsRest(${functionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedExpressions(options, ctx, failGeneratedExpressions);
-    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar);
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentVar, getCtxVar, getPropsVar);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     const templateRef = getTemplateRef(node);
-    const tag = (0, shared_2.hyphenateTag)(node.tag);
     const isRootNode = ctx.singleRootNodes.has(node)
-        && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
+        && !options.vueCompilerOptions.fallthroughComponentNames.includes((0, shared_2.hyphenateTag)(tag));
     if (templateRef || isRootNode) {
         const componentInstanceVar = ctx.getInternalVariable();
-        isCtxVarUsed = true;
-        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
+        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${getCtxVar()}['expose']>>[0] | null)`;
         if (ctx.inVFor) {
             yield `[]`;
         }
@@ -184,18 +167,20 @@ function* generateComponent(options, ctx, node) {
         }
     }
     if (hasVBindAttrs(options, ctx, node)) {
-        ctx.inheritedAttrVars.add(componentPropsVar);
-        isPropsVarUsed = true;
+        ctx.inheritedAttrVars.add(getPropsVar());
     }
     yield* generateStyleScopedClassReferences(options, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
+    if (slotDir || node.children.length) {
+        yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir, getCtxVar());
+    }
     if (isCtxVarUsed) {
-        yield `var ${componentCtxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+        yield `var ${ctxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentVar}, typeof ${vNodeVar}>${utils_1.endOfLine}`;
     }
     if (isPropsVarUsed) {
-        yield `var ${componentPropsVar}!: __VLS_FunctionalComponentProps<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+        yield `var ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${vNodeVar}>${utils_1.endOfLine}`;
     }
+    ctx.components.pop();
 }
 function* generateElement(options, ctx, node) {
     const [startTagOffset, endTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
@@ -231,12 +216,9 @@ function* generateElement(options, ctx, node) {
         ctx.inheritedAttrVars.add(`__VLS_intrinsics.${node.tag}`);
     }
     yield* generateStyleScopedClassReferences(options, node);
-    const { currentComponent } = ctx;
-    ctx.currentComponent = undefined;
     for (const child of node.children) {
         yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
     }
-    ctx.currentComponent = currentComponent;
 }
 function* generateStyleScopedClassReferences({ template, ts }, node) {
     for (const prop of node.props) {
@@ -339,42 +321,6 @@ function* generateFailedExpressions(options, ctx, failGeneratedExpressions) {
         yield utils_1.endOfLine;
     }
 }
-function getCanonicalComponentName(tagText) {
-    return utils_1.identifierRegex.test(tagText)
-        ? tagText
-        : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
-}
-function getPossibleOriginalComponentNames(tagText, deduplicate) {
-    const name1 = (0, shared_1.capitalize)((0, shared_1.camelize)(tagText));
-    const name2 = (0, shared_1.camelize)(tagText);
-    const name3 = tagText;
-    const names = [name1];
-    if (!deduplicate || name2 !== name1) {
-        names.push(name2);
-    }
-    if (!deduplicate || name3 !== name2) {
-        names.push(name3);
-    }
-    return names;
-}
-function* generateCanonicalComponentName(tagText, offset, features) {
-    if (utils_1.identifierRegex.test(tagText)) {
-        yield [tagText, 'template', offset, features];
-    }
-    else {
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), 'template', offset, features);
-    }
-}
-function* generateComponentGeneric(ctx) {
-    if (ctx.currentInfo.generic) {
-        const { content, offset } = ctx.currentInfo.generic;
-        const token = yield* (0, boundary_1.startBoundary)('template', offset, codeFeatures_1.codeFeatures.verification);
-        yield `<`;
-        yield [content, 'template', offset, codeFeatures_1.codeFeatures.all];
-        yield `>`;
-        yield (0, boundary_1.endBoundary)(token, offset + content.length);
-    }
-}
 function getTemplateRef(node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE

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

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

package/lib/codegen/template/elementChildren.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateElementChildren = generateElementChildren;
+const templateChild_1 = require("./templateChild");
+function* generateElementChildren(options, ctx, children, enterNode = true) {
+    yield* ctx.generateAutoImportCompletion();
+    for (const childNode of children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, enterNode);
+    }
+    yield* ctx.generateAutoImportCompletion();
+}
+//# sourceMappingURL=elementChildren.js.map

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

@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string, getCtxVar: () => string, getPropsVar: () => string): Generator<Code>;
 export declare function generateEventArg(options: TemplateCodegenOptions, name: string, start: number, directive?: string, features?: VueCodeInformation): Generator<Code>;
 export declare function generateEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function generateModelEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;

package/lib/codegen/template/elementEvents.js

@@ -12,7 +12,7 @@ const utils_1 = require("../utils");
 const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentOriginalVar) {
+function* generateElementEvents(options, ctx, node, componentOriginalVar, getCtxVar, getPropsVar) {
     let emitsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -23,7 +23,7 @@ function* generateElementEvents(options, ctx, node, componentOriginalVar) {
                     && (!prop.arg || prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))) {
             if (!emitsVar) {
                 emitsVar = ctx.getInternalVariable();
-                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${ctx.currentComponent.ctxVar}.emit>${utils_1.endOfLine}`;
+                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${getCtxVar()}.emit>${utils_1.endOfLine}`;
             }
             let source = prop.arg?.loc.source ?? 'model-value';
             let start = prop.arg?.loc.start.offset;
@@ -42,7 +42,7 @@ function* generateElementEvents(options, ctx, node, componentOriginalVar) {
             const propName = (0, shared_1.camelize)(propPrefix + source);
             const emitName = emitPrefix + source;
             const camelizedEmitName = (0, shared_1.camelize)(emitName);
-            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${ctx.currentComponent.propsVar}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> = (${utils_1.newLine}`;
+            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${getPropsVar()}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> = (${utils_1.newLine}`;
             if (prop.name === 'on') {
                 yield `{ `;
                 yield* generateEventArg(options, source, start, emitPrefix.slice(0, -1), codeFeatures_1.codeFeatures.navigation);

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

@@ -10,7 +10,7 @@ export interface TemplateCodegenOptions {
     propsAssignName?: string;
     slotsAssignName?: string;
     inheritAttrs: boolean;
-    selfComponentName?: string;
+    selfComponentName: string;
 }
 export { generate as generateTemplate };
 declare function generate(options: TemplateCodegenOptions): {
@@ -49,15 +49,12 @@ declare function generate(options: TemplateCodegenOptions): {
         typeExp: string;
         offset: number;
     }[]>;
-    currentComponent: {
-        get ctxVar(): string;
-        get propsVar(): string;
-    } | undefined;
     singleRootElTypes: Set<string>;
     singleRootNodes: Set<import("@vue/compiler-dom").ElementNode | null>;
     addTemplateRef(name: string, typeExp: string, offset: number): void;
     recordComponentAccess(source: string, name: string, offset?: number): void;
     scopes: Set<string>[];
+    components: (() => string)[];
     declare(...varNames: string[]): void;
     startScope(): () => Generator<Code, any, any>;
     getInternalVariable(): string;

package/lib/codegen/template/templateChild.js

@@ -29,25 +29,21 @@ function* generateTemplateChild(options, ctx, node, enterNode = true) {
         }
     }
     else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+        let slotDir;
         if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
             yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node);
         }
+        else if (node.tagType === CompilerDOM.ElementTypes.TEMPLATE
+            && ctx.components.length
+            && (slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot'))) {
+            yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir, ctx.components[ctx.components.length - 1]());
+        }
+        else if (node.tagType === CompilerDOM.ElementTypes.ELEMENT
+            || node.tagType === CompilerDOM.ElementTypes.TEMPLATE) {
+            yield* (0, element_1.generateElement)(options, ctx, node);
+        }
         else {
-            const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-            if (node.tagType === CompilerDOM.ElementTypes.TEMPLATE
-                && ctx.currentComponent
-                && slotDir) {
-                yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
-            }
-            else if (node.tagType === CompilerDOM.ElementTypes.ELEMENT
-                || node.tagType === CompilerDOM.ElementTypes.TEMPLATE) {
-                yield* (0, element_1.generateElement)(options, ctx, node);
-            }
-            else {
-                const { currentComponent } = ctx;
-                yield* (0, element_1.generateComponent)(options, ctx, node);
-                ctx.currentComponent = currentComponent;
-            }
+            yield* (0, element_1.generateComponent)(options, ctx, node);
         }
     }
     else if (node.type === CompilerDOM.NodeTypes.TEXT_CALL) {

package/lib/codegen/template/vSlot.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 generateVSlot(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, slotDir: CompilerDOM.DirectiveNode | undefined): Generator<Code>;
+export declare function generateVSlot(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, slotDir: CompilerDOM.DirectiveNode | undefined, ctxVar: string): Generator<Code>;

package/lib/codegen/template/vSlot.js

@@ -10,34 +10,28 @@ const boundary_1 = require("../utils/boundary");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
 const templateChild_1 = require("./templateChild");
-function* generateVSlot(options, ctx, node, slotDir) {
-    if (!ctx.currentComponent) {
-        return;
-    }
+function* generateVSlot(options, ctx, node, slotDir, ctxVar) {
     const slotVar = ctx.getInternalVariable();
     if (slotDir) {
         yield `{${utils_1.newLine}`;
-    }
-    if (slotDir || node.children.length) {
         yield `const { `;
-        if (slotDir) {
-            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 ? codeFeatures_1.codeFeatures.withoutHighlight : codeFeatures_1.codeFeatures.all, false, true);
-            }
-            else {
-                const token = yield* (0, boundary_1.startBoundary)('template', slotDir.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
-                yield `default`;
-                yield (0, boundary_1.endBoundary)(token, slotDir.loc.start.offset + (slotDir.rawName?.length ?? 0));
-            }
+        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 ? codeFeatures_1.codeFeatures.withoutHighlight : codeFeatures_1.codeFeatures.all, false, true);
         }
         else {
-            // #932: reference for implicit default slot
-            const token = yield* (0, boundary_1.startBoundary)('template', node.loc.start.offset, codeFeatures_1.codeFeatures.navigation);
+            const token = yield* (0, boundary_1.startBoundary)('template', slotDir.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
             yield `default`;
-            yield (0, boundary_1.endBoundary)(token, node.loc.end.offset);
+            yield (0, boundary_1.endBoundary)(token, slotDir.loc.start.offset + (slotDir.rawName?.length ?? 0));
         }
-        yield `: ${slotVar} } = ${ctx.currentComponent.ctxVar}.slots!${utils_1.endOfLine}`;
     }
+    else {
+        yield `const { `;
+        // #932: reference for implicit default slot
+        const token = yield* (0, boundary_1.startBoundary)('template', node.loc.start.offset, codeFeatures_1.codeFeatures.navigation);
+        yield `default`;
+        yield (0, boundary_1.endBoundary)(token, node.loc.end.offset);
+    }
+    yield `: ${slotVar} } = ${ctxVar}.slots!${utils_1.endOfLine}`;
     const endScope = ctx.startScope();
     if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         const slotAst = (0, utils_1.getTypeScriptAST)(options.ts, options.template, `(${slotDir.exp.content}) => {}`);
@@ -54,7 +48,7 @@ function* generateVSlot(options, ctx, node, slotDir) {
             isStatic = slotDir.arg.isStatic;
         }
         if (isStatic && !slotDir.arg) {
-            yield `${ctx.currentComponent.ctxVar}.slots!['`;
+            yield `${ctxVar}.slots!['`;
             yield [
                 '',
                 'template',

package/lib/codegen/utils/index.js

@@ -39,9 +39,11 @@ function* generateSfcBlockSection(block, start, end, features) {
     yield [text, block.name, start, features];
     // #3632
     if ('parseDiagnostics' in block.ast) {
-        const emptyEndLength = text.length - text.trimEnd().length;
+        const textEnd = text.trimEnd().length;
         for (const diag of block.ast.parseDiagnostics) {
-            if (diag.start >= end - emptyEndLength) {
+            const diagStart = diag.start;
+            const diagEnd = diag.start + diag.length;
+            if (diagStart >= textEnd && diagEnd <= end) {
                 yield `;`;
                 yield ['', block.name, end, codeFeatures_1.codeFeatures.verification];
                 yield exports.newLine;

package/lib/codegen/utils/wrapWith.d.ts

@@ -0,0 +1,2 @@
+import type { Code, VueCodeInformation } from '../../types';
+export declare function wrapWith(source: string, startOffset: number, endOffset: number, features: VueCodeInformation, ...codes: Code[]): Generator<Code>;

package/lib/codegen/utils/wrapWith.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapWith = wrapWith;
+function* wrapWith(source, startOffset, endOffset, features, ...codes) {
+    yield ['', source, startOffset, features];
+    let offset = 1;
+    for (const code of codes) {
+        if (typeof code !== 'string') {
+            offset++;
+        }
+        yield code;
+    }
+    yield ['', source, endOffset, { __combineOffset: offset }];
+}
+//# sourceMappingURL=wrapWith.js.map

package/lib/parsers/scriptRanges.d.ts

@@ -5,8 +5,10 @@ export interface ScriptRanges extends ReturnType<typeof parseScriptRanges> {
 export declare function parseScriptRanges(ts: typeof import('typescript'), ast: ts.SourceFile, vueCompilerOptions: VueCompilerOptions): {
     exportDefault: (TextRange & {
         expression: TextRange;
+        isObjectLiteral: boolean;
     }) | undefined;
     componentOptions: {
+        isObjectLiteral: boolean;
         expression: TextRange;
         args: TextRange;
         argsNode: ts.ObjectLiteralExpression;

package/lib/parsers/scriptRanges.js

@@ -12,6 +12,7 @@ function parseScriptRanges(ts, ast, vueCompilerOptions) {
             exportDefault = {
                 ..._getStartEnd(raw),
                 expression: _getStartEnd(raw.expression),
+                isObjectLiteral: ts.isObjectLiteralExpression(raw.expression),
             };
             const comment = (0, utils_1.getClosestMultiLineCommentRange)(ts, raw, [], ast);
             if (comment) {
@@ -54,6 +55,7 @@ function parseScriptRanges(ts, ast, vueCompilerOptions) {
                     }
                 });
                 componentOptions = {
+                    isObjectLiteral: ts.isObjectLiteralExpression(node.expression),
                     expression: _getStartEnd(node.expression),
                     args: _getStartEnd(obj),
                     argsNode: obj,

package/lib/parsers/utils.js

@@ -35,6 +35,9 @@ function parseBindingRanges(ts, ast, componentExtsensions) {
                     if (componentExtsensions.some(ext => moduleName.endsWith(ext))) {
                         components.push(_getStartEnd(name));
                     }
+                    else {
+                        bindings.push(_getStartEnd(name));
+                    }
                 }
                 if (namedBindings) {
                     if (ts.isNamedImports(namedBindings)) {

package/lib/plugins/vue-script-js.js

@@ -6,7 +6,7 @@ const plugin = ({ modules }) => {
         compileSFCScript(lang, script) {
             if (lang === 'js' || lang === 'ts' || lang === 'jsx' || lang === 'tsx') {
                 const ts = modules.typescript;
-                return ts.createSourceFile('test.' + lang, script, 99);
+                return ts.createSourceFile('.' + lang, script, 99);
             }
         },
     };

package/lib/plugins/vue-tsx.d.ts

@@ -3,8 +3,10 @@ export declare const tsCodegen: WeakMap<Sfc, {
     getScriptRanges: () => {
         exportDefault: (import("../types").TextRange & {
             expression: import("../types").TextRange;
+            isObjectLiteral: boolean;
         }) | undefined;
         componentOptions: {
+            isObjectLiteral: boolean;
             expression: import("../types").TextRange;
             args: import("../types").TextRange;
             argsNode: import("typescript").ObjectLiteralExpression;
@@ -160,15 +162,12 @@ export declare const tsCodegen: WeakMap<Sfc, {
             typeExp: string;
             offset: number;
         }[]>;
-        currentComponent: {
-            get ctxVar(): string;
-            get propsVar(): string;
-        } | undefined;
         singleRootElTypes: Set<string>;
         singleRootNodes: Set<import("@vue/compiler-dom").ElementNode | null>;
         addTemplateRef(name: string, typeExp: string, offset: number): void;
         recordComponentAccess(source: string, name: string, offset?: number): void;
         scopes: Set<string>[];
+        components: (() => string)[];
         declare(...varNames: string[]): void;
         startScope(): () => Generator<import("../types").Code, any, any>;
         getInternalVariable(): string;