@vue/language-core 3.1.4 → 3.1.6

package/lib/codegen/template/slotOutlet.js

@@ -5,12 +5,13 @@ const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
+const names = require("../names");
 const utils_1 = require("../utils");
-const wrapWith_1 = require("../utils/wrapWith");
-const elementChildren_1 = require("./elementChildren");
+const boundary_1 = require("../utils/boundary");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const propertyAccess_1 = require("./propertyAccess");
+const templateChild_1 = require("./templateChild");
 function* generateSlotOutlet(options, ctx, node) {
     const [startTagOffset] = (0, shared_1.getElementTagOffsets)(node, options.template);
     const startTagEndOffset = startTagOffset + node.tag.length;
@@ -29,12 +30,8 @@ function* generateSlotOutlet(options, ctx, node) {
         if (nameProp) {
             let codes;
             if (nameProp.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value) {
-                let { source, start: { offset } } = nameProp.value.loc;
-                if (source.startsWith('"') || source.startsWith("'")) {
-                    source = source.slice(1, -1);
-                    offset++;
-                }
-                codes = (0, propertyAccess_1.generatePropertyAccess)(options, ctx, source, offset, codeFeatures_1.codeFeatures.navigationAndVerification);
+                const [content, offset] = (0, shared_1.normalizeAttributeValue)(nameProp.value);
+                codes = (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, offset, codeFeatures_1.codeFeatures.navigationAndVerification);
             }
             else if (nameProp.type === CompilerDOM.NodeTypes.DIRECTIVE
                 && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
@@ -47,18 +44,31 @@ function* generateSlotOutlet(options, ctx, node) {
             else {
                 codes = [`['default']`];
             }
-            yield* (0, wrapWith_1.wrapWith)(nameProp.loc.start.offset, nameProp.loc.end.offset, codeFeatures_1.codeFeatures.verification, options.slotsAssignName ?? '__VLS_slots', ...codes);
+            const token = yield* (0, boundary_1.startBoundary)('template', nameProp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+            yield options.slotsAssignName ?? names.slots;
+            yield* codes;
+            yield (0, boundary_1.endBoundary)(token, nameProp.loc.end.offset);
         }
         else {
-            yield* (0, wrapWith_1.wrapWith)(startTagOffset, startTagEndOffset, codeFeatures_1.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, wrapWith_1.wrapWith)(startTagOffset, startTagEndOffset, codeFeatures_1.codeFeatures.verification, `'default'`), `]`);
+            const token = yield* (0, boundary_1.startBoundary)('template', startTagOffset, codeFeatures_1.codeFeatures.verification);
+            yield `${options.slotsAssignName ?? names.slots}[`;
+            const token2 = yield* (0, boundary_1.startBoundary)('template', startTagOffset, codeFeatures_1.codeFeatures.verification);
+            yield `'default'`;
+            yield (0, boundary_1.endBoundary)(token2, startTagEndOffset);
+            yield `]`;
+            yield (0, boundary_1.endBoundary)(token, startTagEndOffset);
         }
         yield `)(`;
-        yield* (0, wrapWith_1.wrapWith)(startTagOffset, startTagEndOffset, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true, true), `}`);
+        const token = yield* (0, boundary_1.startBoundary)('template', startTagOffset, codeFeatures_1.codeFeatures.verification);
+        yield `{${utils_1.newLine}`;
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true);
+        yield `}`;
+        yield (0, boundary_1.endBoundary)(token, startTagEndOffset);
         yield `)${utils_1.endOfLine}`;
     }
     else {
         yield `var ${propsVar} = {${utils_1.newLine}`;
-        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.checkUnknownProps, true);
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.checkUnknownProps);
         yield `}${utils_1.endOfLine}`;
         if (nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && nameProp.value) {
@@ -78,7 +88,7 @@ function* generateSlotOutlet(options, ctx, node) {
             }
             const expVar = ctx.getInternalVariable();
             yield `var ${expVar} = __VLS_tryAsConstant(`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, nameProp.exp.content, nameProp.exp.loc.start.offset);
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, nameProp.exp.content, nameProp.exp.loc.start.offset);
             yield `)${utils_1.endOfLine}`;
             ctx.dynamicSlots.push({
                 expVar: ctx.getHoistVariable(expVar),
@@ -94,6 +104,8 @@ function* generateSlotOutlet(options, ctx, node) {
             });
         }
     }
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
+    for (const child of node.children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
+    }
 }
 //# sourceMappingURL=slotOutlet.js.map

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

@@ -1,6 +1,3 @@
-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 generateStyleScopedClassReferences(ctx: TemplateCodegenContext, withDot?: boolean): Generator<Code>;
-export declare function collectStyleScopedClassReferences(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): void;
+import type { Code, SfcBlock } from '../../types';
+export declare const references: WeakMap<SfcBlock, [version: string, [className: string, offset: number][]]>;
+export declare function generateStyleScopedClassReference(block: SfcBlock, className: string, offset: number, fullStart?: number): Generator<Code>;

package/lib/codegen/template/styleScopedClasses.js

@@ -1,162 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateStyleScopedClassReferences = generateStyleScopedClassReferences;
-exports.collectStyleScopedClassReferences = collectStyleScopedClassReferences;
-const CompilerDOM = require("@vue/compiler-dom");
-const shared_1 = require("../../utils/shared");
+exports.references = void 0;
+exports.generateStyleScopedClassReference = generateStyleScopedClassReference;
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 const escaped_1 = require("../utils/escaped");
-const wrapWith_1 = require("../utils/wrapWith");
 const classNameEscapeRegex = /([\\'])/;
-function* generateStyleScopedClassReferences(ctx, withDot = false) {
-    for (const offset of ctx.emptyClassOffsets) {
+// For language-service/lib/plugins/vue-scoped-class-links.ts usage
+exports.references = new WeakMap();
+function* generateStyleScopedClassReference(block, className, offset, fullStart = offset) {
+    if (!className) {
         yield `/** @type {__VLS_StyleScopedClasses['`;
-        yield [
-            '',
-            'template',
-            offset,
-            codeFeatures_1.codeFeatures.additionalCompletion,
-        ];
+        yield ['', 'template', offset, codeFeatures_1.codeFeatures.completion];
         yield `']} */${utils_1.endOfLine}`;
+        return;
     }
-    for (const { source, className, offset } of ctx.scopedClasses) {
-        yield `/** @type {__VLS_StyleScopedClasses[`;
-        yield* (0, wrapWith_1.wrapWith)(offset - (withDot ? 1 : 0), offset + className.length, source, codeFeatures_1.codeFeatures.navigation, `'`, ...(0, escaped_1.generateEscaped)(className, source, offset, codeFeatures_1.codeFeatures.navigationAndAdditionalCompletion, classNameEscapeRegex), `'`);
-        yield `]} */${utils_1.endOfLine}`;
+    const cache = exports.references.get(block);
+    if (!cache || cache[0] !== block.content) {
+        const arr = [];
+        exports.references.set(block, [block.content, arr]);
+        arr.push([className, offset]);
     }
-}
-function collectStyleScopedClassReferences(options, ctx, node) {
-    for (const prop of node.props) {
-        if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
-            && prop.name === 'class'
-            && prop.value) {
-            if (options.template.lang === 'pug') {
-                const getClassOffset = Reflect.get(prop.value.loc.start, 'getClassOffset');
-                const content = prop.value.loc.source.slice(1, -1);
-                let startOffset = 1;
-                for (const className of content.split(' ')) {
-                    if (className) {
-                        ctx.scopedClasses.push({
-                            source: 'template',
-                            className,
-                            offset: getClassOffset(startOffset),
-                        });
-                    }
-                    startOffset += className.length + 1;
-                }
-            }
-            else {
-                const [content, startOffset] = (0, utils_1.normalizeAttributeValue)(prop.value);
-                if (content) {
-                    const classes = collectClasses(content, startOffset);
-                    ctx.scopedClasses.push(...classes);
-                }
-                else {
-                    ctx.emptyClassOffsets.push(startOffset);
-                }
-            }
-        }
-        else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-            && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-            && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-            && prop.arg.content === 'class') {
-            const content = '(' + prop.exp.content + ')';
-            const startOffset = prop.exp.loc.start.offset - 1;
-            const { ts } = options;
-            const ast = ts.createSourceFile('', content, 99);
-            const literals = [];
-            ts.forEachChild(ast, node => {
-                if (!ts.isExpressionStatement(node)
-                    || !ts.isParenthesizedExpression(node.expression)) {
-                    return;
-                }
-                const { expression } = node.expression;
-                if (ts.isStringLiteralLike(expression)) {
-                    literals.push(expression);
-                }
-                else if (ts.isArrayLiteralExpression(expression)) {
-                    walkArrayLiteral(expression);
-                }
-                else if (ts.isObjectLiteralExpression(expression)) {
-                    walkObjectLiteral(expression);
-                }
-            });
-            for (const literal of literals) {
-                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;
-                for (const element of elements) {
-                    if (ts.isStringLiteralLike(element)) {
-                        literals.push(element);
-                    }
-                    else if (ts.isObjectLiteralExpression(element)) {
-                        walkObjectLiteral(element);
-                    }
-                }
-            }
-            function walkObjectLiteral(node) {
-                const { properties } = node;
-                for (const property of properties) {
-                    if (ts.isPropertyAssignment(property)) {
-                        const { name } = property;
-                        if (ts.isIdentifier(name)) {
-                            walkIdentifier(name);
-                        }
-                        else if (ts.isStringLiteral(name)) {
-                            literals.push(name);
-                        }
-                        else if (ts.isComputedPropertyName(name)) {
-                            const { expression } = name;
-                            if (ts.isStringLiteralLike(expression)) {
-                                literals.push(expression);
-                            }
-                        }
-                    }
-                    else if (ts.isShorthandPropertyAssignment(property)) {
-                        walkIdentifier(property.name);
-                    }
-                }
-            }
-            function walkIdentifier(node) {
-                const text = (0, shared_1.getNodeText)(ts, node, ast);
-                ctx.scopedClasses.push({
-                    source: 'template',
-                    className: text,
-                    offset: node.end - text.length + startOffset,
-                });
-            }
-        }
-    }
-}
-function collectClasses(content, startOffset = 0) {
-    const classes = [];
-    let currentClassName = '';
-    let offset = 0;
-    for (const char of (content + ' ')) {
-        if (char.trim() === '') {
-            if (currentClassName !== '') {
-                classes.push({
-                    source: 'template',
-                    className: currentClassName,
-                    offset: offset + startOffset,
-                });
-                offset += currentClassName.length;
-                currentClassName = '';
-            }
-            offset += char.length;
-        }
-        else {
-            currentClassName += char;
-        }
+    else {
+        cache[1].push([className, offset]);
     }
-    return classes;
+    yield `/** @type {__VLS_StyleScopedClasses[`;
+    const token = yield* (0, boundary_1.startBoundary)(block.name, fullStart, codeFeatures_1.codeFeatures.navigation);
+    yield `'`;
+    yield* (0, escaped_1.generateEscaped)(className, block.name, offset, codeFeatures_1.codeFeatures.navigationAndCompletion, classNameEscapeRegex);
+    yield `'`;
+    yield (0, boundary_1.endBoundary)(token, offset + className.length);
+    yield `]} */${utils_1.endOfLine}`;
 }
 //# sourceMappingURL=styleScopedClasses.js.map

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

@@ -3,5 +3,4 @@ import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, enterNode?: boolean): Generator<Code>;
-export declare function getVForNode(node: CompilerDOM.ElementNode): CompilerDOM.ForNode | undefined;
 export declare function parseInterpolationNode(node: CompilerDOM.InterpolationNode, template: string): readonly [string, number];

package/lib/codegen/template/templateChild.js

@@ -1,34 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplateChild = generateTemplateChild;
-exports.getVForNode = getVForNode;
 exports.parseInterpolationNode = parseInterpolationNode;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const element_1 = require("./element");
-const elementChildren_1 = require("./elementChildren");
 const interpolation_1 = require("./interpolation");
 const slotOutlet_1 = require("./slotOutlet");
 const vFor_1 = require("./vFor");
 const vIf_1 = require("./vIf");
 const vSlot_1 = require("./vSlot");
-// @ts-ignore
-const transformContext = {
-    onError: () => { },
-    helperString: str => str.toString(),
-    replaceNode: () => { },
-    cacheHandlers: false,
-    prefixIdentifiers: false,
-    scopes: {
-        vFor: 0,
-        vOnce: 0,
-        vPre: 0,
-        vSlot: 0,
-    },
-    expressionPlugins: ['typescript'],
-};
 function* generateTemplateChild(options, ctx, node, enterNode = true) {
     if (enterNode && !ctx.enter(node)) {
         return;
@@ -41,18 +24,12 @@ function* generateTemplateChild(options, ctx, node, enterNode = true) {
         for (const item of collectSingleRootNodes(options, node.children)) {
             ctx.singleRootNodes.add(item);
         }
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
+        for (const child of node.children) {
+            yield* generateTemplateChild(options, ctx, child);
+        }
     }
     else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
-        const vForNode = getVForNode(node);
-        const vIfNode = getVIfNode(node);
-        if (vForNode) {
-            yield* (0, vFor_1.generateVFor)(options, ctx, vForNode);
-        }
-        else if (vIfNode) {
-            yield* (0, vIf_1.generateVIf)(options, ctx, vIfNode);
-        }
-        else if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
+        if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
             yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node);
         }
         else {
@@ -79,12 +56,17 @@ function* generateTemplateChild(options, ctx, node, enterNode = true) {
     }
     else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
         // {{ ... }} {{ ... }}
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children.filter(child => typeof child === 'object'), false);
+        for (const child of node.children) {
+            if (typeof child !== 'object') {
+                continue;
+            }
+            yield* generateTemplateChild(options, ctx, child, false);
+        }
     }
     else if (node.type === CompilerDOM.NodeTypes.INTERPOLATION) {
         // {{ ... }}
         const [content, start] = parseInterpolationNode(node, options.template.content);
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, content, start, `(`, `)${utils_1.endOfLine}`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, content, start, `(`, `)${utils_1.endOfLine}`);
     }
     else if (node.type === CompilerDOM.NodeTypes.IF) {
         // v-if / v-else-if / v-else
@@ -127,45 +109,6 @@ function* collectSingleRootNodes(options, children) {
         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
-        && prop.name === 'for');
-    if (forDirective) {
-        let forNode;
-        CompilerDOM.processFor(node, forDirective, transformContext, _forNode => {
-            forNode = { ..._forNode };
-            return undefined;
-        });
-        if (forNode) {
-            forNode.children = [{
-                    ...node,
-                    props: node.props.filter(prop => prop !== forDirective),
-                }];
-            return forNode;
-        }
-    }
-}
-function getVIfNode(node) {
-    const ifDirective = node.props.find((prop) => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-        && prop.name === 'if');
-    if (ifDirective) {
-        let ifNode;
-        CompilerDOM.processIf(node, ifDirective, transformContext, _ifNode => {
-            ifNode = { ..._ifNode };
-            return undefined;
-        });
-        if (ifNode) {
-            for (const branch of ifNode.branches) {
-                branch.children = [{
-                        ...node,
-                        props: node.props.filter(prop => prop !== ifDirective),
-                    }];
-            }
-            return ifNode;
-        }
-    }
-}
 function parseInterpolationNode(node, template) {
     let start = node.content.loc.start.offset;
     let end = node.content.loc.end.offset;

package/lib/codegen/template/vFor.js

@@ -6,16 +6,16 @@ const CompilerDOM = require("@vue/compiler-dom");
 const collectBindings_1 = require("../../utils/collectBindings");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
-const elementChildren_1 = require("./elementChildren");
 const interpolation_1 = require("./interpolation");
+const templateChild_1 = require("./templateChild");
 function* generateVFor(options, ctx, node) {
     const { source } = node.parseResult;
     const { leftExpressionRange, leftExpressionText } = parseVForNode(node);
-    const forBlockVars = [];
+    const endScope = ctx.startScope();
     yield `for (const [`;
     if (leftExpressionRange && leftExpressionText) {
-        const collectAst = (0, utils_1.createTsAst)(options.ts, ctx.inlineTsAsts, `const [${leftExpressionText}]`);
-        forBlockVars.push(...(0, collectBindings_1.collectBindingNames)(options.ts, collectAst, collectAst));
+        const collectAst = (0, utils_1.getTypeScriptAST)(options.ts, options.template, `const [${leftExpressionText}]`);
+        ctx.declare(...(0, collectBindings_1.collectBindingNames)(options.ts, collectAst, collectAst));
         yield [
             leftExpressionText,
             'template',
@@ -26,16 +26,13 @@ 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', codeFeatures_1.codeFeatures.all, source.content, source.loc.start.offset, `(`, `)`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, source.content, source.loc.start.offset, `(`, `)`);
         yield `!)`; // #3102
     }
     else {
         yield `{} as any`;
     }
     yield `) {${utils_1.newLine}`;
-    for (const varName of forBlockVars) {
-        ctx.addLocalVariable(varName);
-    }
     let isFragment = true;
     for (const argument of node.codegenNode?.children.arguments ?? []) {
         if (argument.type === CompilerDOM.NodeTypes.JS_FUNCTION_EXPRESSION
@@ -48,7 +45,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', codeFeatures_1.codeFeatures.all, prop.value.content, prop.value.loc.start.offset, `(`, `)`);
+                    yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, prop.value.content, prop.value.loc.start.offset, `(`, `)`);
                     yield utils_1.endOfLine;
                 }
             }
@@ -56,11 +53,11 @@ function* generateVFor(options, ctx, node) {
     }
     const { inVFor } = ctx;
     ctx.inVFor = true;
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children, isFragment);
-    ctx.inVFor = inVFor;
-    for (const varName of forBlockVars) {
-        ctx.removeLocalVariable(varName);
+    for (const child of node.children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child, isFragment);
     }
+    ctx.inVFor = inVFor;
+    yield* endScope();
     yield `}${utils_1.newLine}`;
 }
 function parseVForNode(node) {

package/lib/codegen/template/vIf.js

@@ -5,8 +5,8 @@ const CompilerDOM = require("@vue/compiler-dom");
 const muggle_string_1 = require("muggle-string");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
-const elementChildren_1 = require("./elementChildren");
 const interpolation_1 = require("./interpolation");
+const templateChild_1 = require("./templateChild");
 function* generateVIf(options, ctx, node) {
     const originalBlockConditionsLength = ctx.blockConditions.length;
     const isFragment = node.codegenNode
@@ -26,14 +26,16 @@ 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', codeFeatures_1.codeFeatures.all, branch.condition.content, branch.condition.loc.start.offset, `(`, `)`)];
+            const codes = [...(0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, branch.condition.content, branch.condition.loc.start.offset, `(`, `)`)];
             yield* codes;
             ctx.blockConditions.push((0, muggle_string_1.toString)(codes));
             addedBlockCondition = true;
             yield ` `;
         }
         yield `{${utils_1.newLine}`;
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, branch.children, i !== 0 || isFragment);
+        for (const child of branch.children) {
+            yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child, i !== 0 || isFragment);
+        }
         yield `}${utils_1.newLine}`;
         if (addedBlockCondition) {
             ctx.blockConditions[ctx.blockConditions.length - 1] = `!${ctx.blockConditions[ctx.blockConditions.length - 1]}`;

package/lib/codegen/template/vSlot.js

@@ -6,48 +6,48 @@ const muggle_string_1 = require("muggle-string");
 const collectBindings_1 = require("../../utils/collectBindings");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
-const wrapWith_1 = require("../utils/wrapWith");
-const elementChildren_1 = require("./elementChildren");
+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;
     }
-    const slotBlockVars = [];
     const slotVar = ctx.getInternalVariable();
     if (slotDir) {
         yield `{${utils_1.newLine}`;
     }
     if (slotDir || node.children.length) {
-        ctx.currentComponent.used = true;
         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 {
-                yield* (0, wrapWith_1.wrapWith)(slotDir.loc.start.offset, slotDir.loc.start.offset + (slotDir.rawName?.length ?? 0), codeFeatures_1.codeFeatures.withoutHighlightAndCompletion, `default`);
+                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));
             }
         }
         else {
             // #932: reference for implicit default slot
-            yield* (0, wrapWith_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, codeFeatures_1.codeFeatures.navigation, `default`);
+            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} } = ${ctx.currentComponent.ctxVar}.slots!${utils_1.endOfLine}`;
     }
+    const endScope = ctx.startScope();
     if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        const slotAst = (0, utils_1.createTsAst)(options.ts, ctx.inlineTsAsts, `(${slotDir.exp.content}) => {}`);
-        slotBlockVars.push(...(0, collectBindings_1.collectBindingNames)(options.ts, slotAst, slotAst));
+        const slotAst = (0, utils_1.getTypeScriptAST)(options.ts, options.template, `(${slotDir.exp.content}) => {}`);
         yield* generateSlotParameters(options, ctx, slotAst, slotDir.exp, slotVar);
+        ctx.declare(...(0, collectBindings_1.collectBindingNames)(options.ts, slotAst, slotAst));
     }
-    for (const varName of slotBlockVars) {
-        ctx.addLocalVariable(varName);
-    }
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
-    for (const varName of slotBlockVars) {
-        ctx.removeLocalVariable(varName);
+    for (const child of node.children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
     }
+    yield* endScope();
     if (slotDir) {
         let isStatic = true;
         if (slotDir.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
@@ -79,7 +79,7 @@ function* generateSlotParameters(options, ctx, ast, exp, slotVar) {
     const { expression } = statement;
     const startOffset = exp.loc.start.offset - 1;
     const types = [];
-    const interpolation = [...(0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, ast.text, startOffset)];
+    const interpolation = [...(0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, ast.text, startOffset)];
     (0, muggle_string_1.replaceSourceRange)(interpolation, 'template', startOffset, startOffset + `(`.length);
     (0, muggle_string_1.replaceSourceRange)(interpolation, 'template', startOffset + ast.text.length - `) => {}`.length, startOffset + ast.text.length);
     for (const { name, type } of expression.parameters) {
@@ -101,7 +101,11 @@ function* generateSlotParameters(options, ctx, ast, exp, slotVar) {
     yield `] = __VLS_getSlotParameters(${slotVar}!`;
     if (types.some(t => t)) {
         yield `, `;
-        yield* (0, wrapWith_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `(`, ...types.flatMap(type => type ? [`_`, type, `, `] : `_, `), `) => [] as any`);
+        const token = yield* (0, boundary_1.startBoundary)('template', exp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+        yield `(`;
+        yield* types.flatMap(type => type ? [`_`, type, `, `] : `_, `);
+        yield `) => [] as any`;
+        yield (0, boundary_1.endBoundary)(token, exp.loc.end.offset);
     }
     yield `)${utils_1.endOfLine}`;
 }

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

@@ -0,0 +1,3 @@
+import type { Code, VueCodeInformation } from '../../types';
+export declare function startBoundary(source: string, startOffset: number, features: VueCodeInformation): Generator<Code, symbol, unknown>;
+export declare function endBoundary(token: symbol, endOffset: number): Code;

package/lib/codegen/utils/boundary.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startBoundary = startBoundary;
+exports.endBoundary = endBoundary;
+function* startBoundary(source, startOffset, features) {
+    const token = Symbol(source);
+    yield ['', source, startOffset, { ...features, __combineToken: token }];
+    return token;
+}
+function endBoundary(token, endOffset) {
+    return ['', token.description, endOffset, { __combineToken: token }];
+}
+//# sourceMappingURL=boundary.js.map

package/lib/codegen/utils/camelized.js

@@ -4,7 +4,7 @@ exports.generateCamelized = generateCamelized;
 const shared_1 = require("@vue/shared");
 function* generateCamelized(code, source, offset, features) {
     const parts = code.split('-');
-    const startCombineOffset = features.__combineOffset ?? 0;
+    const combineToken = features.__combineToken ?? Symbol();
     for (let i = 0; i < parts.length; i++) {
         const part = parts[i];
         if (part !== '') {
@@ -13,7 +13,7 @@ function* generateCamelized(code, source, offset, features) {
                     part,
                     source,
                     offset,
-                    features,
+                    { ...features, __combineToken: combineToken },
                 ];
             }
             else {
@@ -21,7 +21,7 @@ function* generateCamelized(code, source, offset, features) {
                     (0, shared_1.capitalize)(part),
                     source,
                     offset,
-                    { __combineOffset: startCombineOffset + i },
+                    { __combineToken: combineToken },
                 ];
             }
         }